feat(docz-core): add headings property for entries and autolink on he…

…adings

packages/docz-core/package.json

@@ -45,6 +45,7 @@
     "happypack": "^5.0.0",
     "hast-util-to-string": "^1.0.1",
     "html-webpack-plugin": "^3.2.0",
+    "humanize-string": "^1.0.2",
     "koa-connect": "^2.0.1",
     "koa-mount": "^3.0.0",
     "koa-static": "^4.0.3",
@@ -54,9 +55,12 @@
     "react-dev-utils": "^5.0.1",
     "react-docgen-typescript-loader": "^2.1.0",
     "react-hot-loader": "4.3.0",
+    "rehype-autolink-headings": "^2.0.2",
+    "rehype-slug": "^2.0.1",
     "remark-frontmatter": "^1.2.0",
     "remark-parse": "^5.0.0",
     "remark-parse-yaml": "^0.0.1",
+    "remark-slug": "^5.0.0",
     "resolve": "^1.7.1",
     "signale": "^1.1.0",
     "to-vfile": "^4.0.0",

packages/docz-core/src/Entries.tsx

@@ -6,7 +6,7 @@ import * as paths from './config/paths'
 import { touch, compiled } from './utils/fs'
 import { mapToObj } from './utils/helpers'
 
-import { Entry, parseMdx } from './Entry'
+import { Entry, EntryObj, parseMdx } from './Entry'
 import { Plugin } from './Plugin'
 import { Config } from './commands/args'
 
@@ -66,17 +66,6 @@ const writeData = async (map: EntryMap, config: Config): Promise<void> => {
   await touch(paths.configJson, JSON.stringify(configObj, null, 2))
 }
 
-export interface EntryObj {
-  id: string
-  filepath: string
-  slug: string
-  name: string
-  route: string
-  order: number
-  menu: string | null
-  [key: string]: any
-}
-
 export type EntryMap = Record<string, EntryObj>
 
 export class Entries {

packages/docz-core/src/Entry.ts

@@ -4,11 +4,14 @@ import vfile from 'to-vfile'
 import unified from 'unified'
 import remark from 'remark-parse'
 import matter from 'remark-frontmatter'
+import slug from 'remark-slug'
 import parseFrontmatter from 'remark-parse-yaml'
 import slugify from '@sindresorhus/slugify'
 import find from 'unist-util-find'
 import is from 'unist-util-is'
+import visit from 'unist-util-visit'
 import get from 'lodash.get'
+import humanize from 'humanize-string'
 
 import * as paths from './config/paths'
 
@@ -18,6 +21,7 @@ export const parseMdx = (file: string): Promise<string> => {
     .use(remark, { type: 'yaml', marker: '-' })
     .use(matter)
     .use(parseFrontmatter)
+    .use(slug)
 
   return parser.run(parser.parse(raw))
 }
@@ -27,6 +31,41 @@ const getParsedData = (ast: any) => {
   return get(node, `data.parsedValue`)
 }
 
+export interface Heading {
+  depth: number
+  slug: string
+  value: string
+}
+
+const getHeadings = (ast: any): Heading[] => {
+  const headings: Heading[] = []
+
+  visit(ast, 'heading', (node: any) => {
+    const slug = get(node, 'data.id')
+    const depth = get(node, 'depth')
+
+    headings.push({
+      depth,
+      slug,
+      value: humanize(slug),
+    })
+  })
+
+  return headings
+}
+
+export interface EntryObj {
+  id: string
+  filepath: string
+  slug: string
+  name: string
+  route: string
+  order: number
+  menu: string | null
+  headings: Heading[]
+  [key: string]: any
+}
+
 export class Entry {
   readonly [key: string]: any
 
@@ -43,6 +82,7 @@ export class Entry {
   public name: string
   public order: number
   public menu: string | null
+  public headings: Heading[]
   public settings: {
     [key: string]: any
   }
@@ -58,6 +98,7 @@ export class Entry {
     this.name = parsed.name
     this.order = parsed.order || 0
     this.menu = parsed.menu
+    this.headings = getHeadings(ast)
     this.settings = parsed
   }
 

packages/docz-core/src/bundlers/webpack/loaders.ts

@@ -2,6 +2,8 @@ import * as path from 'path'
 import HappyPack from 'happypack'
 import merge from 'deepmerge'
 import matter from 'remark-frontmatter'
+import slug from 'rehype-slug'
+import headings from 'rehype-autolink-headings'
 
 import Config from 'webpack-chain'
 import { plugin as mdastPlugin } from '../../utils/plugin-mdast'
@@ -99,7 +101,7 @@ export const mdx = (config: Config, args: Args) => {
       type: 'yaml',
       marker: '-',
       mdPlugins: mdPlugins.concat([matter, mdastPlugin]),
-      hastPlugins: hastPlugins.concat([hastPlugin]),
+      hastPlugins: hastPlugins.concat([hastPlugin, slug, headings]),
     })
 }
 

packages/docz-core/src/types.d.ts

@@ -2,6 +2,7 @@ declare module '@mdx-js/mdxast'
 declare module '@mdx-js/mdx'
 declare module 'chokidar'
 declare module '@sindresorhus/slugify'
+declare module 'humanize-string'
 declare module 'unified'
 declare module 'unist-util-is'
 declare module 'unist-util-visit'
@@ -10,9 +11,12 @@ declare module 'unist-util-remove'
 declare module 'hast-util-to-string'
 declare module 'happypack'
 declare module 'remark-parse'
+declare module 'remark-slug'
 declare module 'remark-parse-yaml'
 declare module 'remark-frontmatter'
 declare module 'remark-parse/lib/block-elements.json'
+declare module 'rehype-slug'
+declare module 'rehype-autolink-headings'
 declare module 'to-vfile'
 declare module 'art-template'
 declare module 'friendly-errors-webpack-plugin'

packages/docz/src/theme.tsx

@@ -16,6 +16,12 @@ export interface MSXImport {
   default: MSXComponent
 }
 
+export interface Heading {
+  depth: number
+  slug: string
+  value: string
+}
+
 export interface Entry {
   id: string
   filepath: string
@@ -24,6 +30,7 @@ export interface Entry {
   name: string
   order: number
   menu: string | null
+  headings: Heading[]
   [key: string]: any
 }
 

yarn.lock

@@ -3190,6 +3190,10 @@ elliptic@^6.0.0:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.0"
 
+"emoji-regex@>=6.0.0 <=6.1.1":
+  version "6.1.1"
+  resolved "https://registry.npmjs.org/emoji-regex/-/emoji-regex-6.1.1.tgz#c6cd0ec1b0642e2a3c67a1137efc5e796da4f88e"
+
 emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
@@ -3571,7 +3575,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.0:
+extend@^3.0.0, extend@^3.0.1, extend@~3.0.0:
   version "3.0.1"
   resolved "https://registry.npmjs.org/extend/-/extend-3.0.1.tgz#a755ea7bc1adfcc5a31ce7e762dbaadc5e636444"
 
@@ -4020,6 +4024,12 @@ gitconfiglocal@^1.0.0:
   dependencies:
     ini "^1.3.2"
 
+github-slugger@^1.0.0, github-slugger@^1.1.1:
+  version "1.2.0"
+  resolved "https://registry.npmjs.org/github-slugger/-/github-slugger-1.2.0.tgz#8ada3286fd046d8951c3c952a8d7854cfd90fd9a"
+  dependencies:
+    emoji-regex ">=6.0.0 <=6.1.1"
+
 [email protected]:
   version "0.2.4"
   resolved "https://registry.npmjs.org/github/-/github-0.2.4.tgz#24fa7f0e13fa11b946af91134c51982a91ce538b"
@@ -4317,7 +4327,15 @@ hasha@^3.0.0:
   dependencies:
     is-stream "^1.0.1"
 
-hast-util-to-string@^1.0.1:
+hast-util-has-property@^1.0.0:
+  version "1.0.1"
+  resolved "https://registry.npmjs.org/hast-util-has-property/-/hast-util-has-property-1.0.1.tgz#ac08c40bcbf27b80a85aaae91e4f6250a53e802f"
+
+hast-util-is-element@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-1.0.0.tgz#3f7216978b2ae14d98749878782675f33be3ce00"
+
+hast-util-to-string@^1.0.0, hast-util-to-string@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/hast-util-to-string/-/hast-util-to-string-1.0.1.tgz#b28055cdca012d3c8fd048757c8483d0de0d002c"
 
@@ -4444,6 +4462,12 @@ https-browserify@^1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz#ec06c10e0a34c0f2faf199f7fd7fc78fffd03c73"
 
+humanize-string@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.npmjs.org/humanize-string/-/humanize-string-1.0.2.tgz#fef0a8bc9b1b857ca4013bbfaea75071736988f6"
+  dependencies:
+    decamelize "^1.0.0"
+
 [email protected]:
   version "0.4.19"
   resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.19.tgz#f7468f60135f5e5dad3399c0a81be9a1603a082b"
@@ -5528,6 +5552,10 @@ mdast-util-to-hast@^3.0.0:
     unist-util-visit "^1.1.0"
     xtend "^4.0.1"
 
+mdast-util-to-string@^1.0.0:
+  version "1.0.4"
+  resolved "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.0.4.tgz#5c455c878c9355f0c1e7f3e8b719cf583691acfb"
+
 mdurl@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz#fe85b2ec75a59037f2adfec100fd6c601761152e"
@@ -7087,6 +7115,25 @@ regjsparser@^0.2.1:
   dependencies:
     jsesc "~0.5.0"
 
+rehype-autolink-headings@^2.0.2:
+  version "2.0.2"
+  resolved "https://registry.npmjs.org/rehype-autolink-headings/-/rehype-autolink-headings-2.0.2.tgz#48c7161b1a1020e942c758eb6b2c55cb1bc504d0"
+  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"
+  dependencies:
+    github-slugger "^1.1.1"
+    hast-util-has-property "^1.0.0"
+    hast-util-is-element "^1.0.0"
+    hast-util-to-string "^1.0.0"
+    unist-util-visit "^1.1.0"
+
 [email protected]:
   version "0.2.7"
   resolved "https://registry.npmjs.org/relateurl/-/relateurl-0.2.7.tgz#54dbf377e51440aca90a4cd274600d3ff2d888a9"
@@ -7140,6 +7187,14 @@ remark-parse@^5.0.0:
     vfile-location "^2.0.0"
     xtend "^4.0.1"
 
+remark-slug@^5.0.0:
+  version "5.0.0"
+  resolved "https://registry.npmjs.org/remark-slug/-/remark-slug-5.0.0.tgz#9de71fcdc2bfae33ebb4a41eb83035288a829980"
+  dependencies:
+    github-slugger "^1.0.0"
+    mdast-util-to-string "^1.0.0"
+    unist-util-visit "^1.0.0"
+
 remark-squeeze-paragraphs@^3.0.1:
   version "3.0.1"
   resolved "https://registry.npmjs.org/remark-squeeze-paragraphs/-/remark-squeeze-paragraphs-3.0.1.tgz#0aae4d14bd943ebf7d0125136f0c419b34f9c92e"