fix: heading hash link with hash router config

packages/docz-core/package.json

@@ -65,7 +65,6 @@
     "react-dev-utils": "^5.0.2",
     "react-docgen-typescript-loader": "^3.0.0-rc.0",
     "react-hot-loader": "4.3.6",
-    "rehype-autolink-headings": "^2.0.3",
     "rehype-docz": "^0.11.0",
     "rehype-slug": "^2.0.1",
     "remark-docz": "^0.11.0",

packages/docz-core/src/config/mdx.ts

@@ -1,29 +1,12 @@
 import matter from 'remark-frontmatter'
 import slug from 'rehype-slug'
-import headings from 'rehype-autolink-headings'
 import remarkDocz from 'remark-docz'
 import rehypeDocz from 'rehype-docz'
 
 export const config = {
   type: 'yaml',
   marker: '-',
-  properties: {
-    'aria-hidden': true,
-  },
-  content: {
-    type: 'element',
-    tagName: 'span',
-    properties: {
-      className: ['icon-link'],
-    },
-    children: [
-      {
-        type: 'text',
-        value: '#',
-      },
-    ],
-  },
 }
 
 export const remarkPlugins = [matter, remarkDocz]
-export const rehypePlugins = [rehypeDocz, slug, headings]
+export const rehypePlugins = [rehypeDocz, slug]

packages/docz-theme-default/src/components/ui/H2.tsx

@@ -1,20 +1,34 @@
+import * as React from 'react'
+import { SFC } from 'react'
 import styled from 'react-emotion'
+import Hash from 'react-feather/dist/icons/hash'
+import { Link } from 'docz'
 
-export const H2 = styled('h2')`
+const Icon = styled(Hash)`
+  position: absolute;
+  display: inline-block;
+  top: 11px;
+  left: -28px;
+  opacity: 0;
+  transition: opacity 0.2s;
+  color: ${p => p.theme.docz.colors.primary};
+`
+
+const Heading = styled('h2')`
   position: relative;
   margin: 50px 0 20px;
   ${p => p.theme.docz.mq(p.theme.docz.styles.h2)};
 
-  .icon-link {
-    position: absolute;
-    display: inline-block;
-    top: 0;
-    left: -25px;
-    opacity: 0;
-    transition: opacity 0.2s;
-  }
-
-  &:hover .icon-link {
+  &:hover ${Icon.toString()} {
     opacity: 1;
   }
 `
+
+export const H2: SFC<React.HTMLAttributes<any>> = ({ children, ...props }) => (
+  <Heading {...props}>
+    <Link aria-hidden to={{ hash: `#${props.id}` }}>
+      <Icon height={20} />
+    </Link>
+    {children}
+  </Heading>
+)

packages/docz-theme-default/src/types.d.ts

@@ -25,6 +25,7 @@ declare module 'react-feather/dist/icons/monitor'
 declare module 'react-feather/dist/icons/maximize'
 declare module 'react-feather/dist/icons/minimize'
 declare module 'react-feather/dist/icons/refresh-cw'
+declare module 'react-feather/dist/icons/hash'
 declare module 'react-lightweight-tooltip'
 declare module 'react-powerplug'
 declare module 'react-sizes'

packages/docz-theme-default/webpack.config.js

@@ -36,6 +36,7 @@ const externalList = [
   'react-feather/dist/icons/maximize',
   'react-feather/dist/icons/minimize',
   'react-feather/dist/icons/refresh-cw',
+  'react-feather/dist/icons/hash',
   'react-sizes',
 ]
 

yarn.lock

@@ -4714,7 +4714,7 @@ extend-shallow@^3.0.0, extend-shallow@^3.0.2:
     assign-symbols "^1.0.0"
     is-extendable "^1.0.1"
 
-extend@^3.0.0, extend@^3.0.1, extend@~3.0.2:
+extend@^3.0.0, extend@~3.0.2:
   version "3.0.2"
   resolved "https://registry.npmjs.org/extend/-/extend-3.0.2.tgz#f8b1136b4071fbd8eb140aff858b1019ec2915fa"
 
@@ -9128,15 +9128,6 @@ regjsparser@^0.3.0:
   dependencies:
     jsesc "~0.5.0"
 
-rehype-autolink-headings@^2.0.3:
-  version "2.0.3"
-  resolved "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-2.0.3.tgz#b23d02937019b8e33566362fc1541df42e99b0e5"
-  dependencies:
-    extend "^3.0.1"
-    hast-util-has-property "^1.0.0"
-    hast-util-is-element "^1.0.0"
-    unist-util-visit "^1.1.0"
-
 rehype-slug@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/rehype-slug/-/rehype-slug-2.0.1.tgz#8c1809ea1eb513b231f721cae17bd1ce9329e373"