added anchors to content data FIXES #13

Author: alidcast

lib/content/page.js

@@ -6,29 +6,26 @@ const paramCase = require('param-case')
 const permalinkCompiler = require('path-to-regexp').compile
 
 export default function prepPage (meta, options) {
+  const source = readFileSync(meta.filePath).toString()
   const cached = {}
 
-  return { // TODO include permalink and anchors and is data injected?
+  return { // TODO is data injected?
     create () {
-      const { permalink, date, data, template } = this
+      const { date, permalink, anchors, data } = this
       return {
         meta,
-        permalink,
         date,
+        permalink,
+        anchors,
         ...data,
       }
     },
 
-    get data () {
-      if (!cached.data) { // TODO inject additional data
-        cached.data = parseFile(meta, options)
-      }
-      return cached.data
-    },
-
     get permalink () {
       if (!cached.permalink) {
-        const { date, slug, section } = this
+        const { date } = this
+        const { section, fileName } = meta
+        const slug = getSlug(fileName)
         const { year, month, day } = splitDate(date)
         const params = { section, slug, date, year, month, day }
         const toPermalink = permalinkCompiler(options.permalink)
@@ -39,6 +36,49 @@ export default function prepPage (meta, options) {
       return cached.permalink
     },
 
+    get anchors () {
+      if (!cached.anchors) {
+        const level = options.anchorsLevel
+        const anchorsExp = new RegExp(`(#{${level + 1},})|#{${level}}(.*)`, 'g')
+        let result
+        let anchors = []
+        while (result = anchorsExp.exec(source)) {
+          let [match, otherLevel, capturedHeading] = result
+          if (!otherLevel && capturedHeading) {
+            const anchor = `#${paramCase(capturedHeading)}`
+            anchors.push([anchor, capturedHeading])
+          }
+        }
+        cached.anchors = anchors
+      }
+      return cached.anchors
+    },
+
+    get data () {
+      if (!cached.data) {
+        const { fileName } = meta
+        const { parsers } = options
+        if (fileName.search(/\.comp\.md$/) > -1) {
+          const { attributes } = fm(source)
+          const { dirName, section, fileName } = meta
+          const relativePath = '.' +  join(dirName, section, fileName)
+          cached.data = {
+            ...attributes,
+            body: { relativePath } // component body compiled by loader and imported separately
+          }
+        } else if (fileName.search(/\.md$/) > -1) {
+          const { attributes, body } = fm(source)
+          cached.data = {
+            ...attributes,
+            body: parsers.mdParser(parsers.md, options).render(body)
+          }
+        } else if (fileName.search(/\.yaml$/) > -1) {
+          cached.data = parsers.yamlParser().render(source)
+        }
+      }
+      return cached.data
+    },
+
     get date () {
       if (!cached.date) {
         const { filePath, fileName, section } = meta
@@ -52,49 +92,15 @@ export default function prepPage (meta, options) {
         }
       }
       return cached.date
-    },
-
-    get slug () {
-      if (!cached.slug) {
-        const { fileName } = meta
-        const onlyName = fileName
-          .replace(/(\.comp)?(\.[0-9a-z]+$)/, '') // remove any ext
-          .replace(/!?(\d{4}-\d{2}-\d{2}-)/, '')  // remove date and hypen
-        cached.slug = paramCase(onlyName)
-      }
-      return cached.slug
-    },
-
-    get section () {
-      return meta.section
     }
   }
 }
 
-
-
-function parseFile(meta, options) {
-  const { filePath, fileName } = meta
-  const source = readFileSync(filePath).toString()
-  if (fileName.search(/\.md/) > -1) return compileMd(source, meta, options)
-  else if (fileName.search(/\.yaml/) > -1) return options.parsers.yaml(source)
-}
-
-function compileMd(source, { dirName, section, fileName }, { parsers }) {
-  const { attributes, body } = fm(source)
-  if (fileName.search(/\.comp\.md/) > -1) {
-    const relativePath = '.' +  join(dirName, section, fileName)
-    return {
-      ...attributes,
-      // component body is compiled by loader and imported seperately
-      body: { relativePath }
-    }
-  } else {
-    return {
-      ...attributes,
-      body: parsers.md.render(body)
-    }
-  }
+function getSlug (fileName) {
+  const onlyName = fileName
+    .replace(/(\.comp)?(\.[0-9a-z]+$)/, '') // remove any ext
+    .replace(/!?(\d{4}-\d{2}-\d{2}-)/, '')  // remove date and hypen
+  return paramCase(onlyName)
 }
 
 function splitDate (date) {

lib/loader.js

@@ -16,7 +16,8 @@ const mdCompParser = (mdParser) => {
   return parser
 }
 
-const mdComponent = (source, { srcPath, sitePath, componentsDir, parsers }) => {
+const mdComponent = (source, moduleOpts, dirOpts) => {
+  const { srcPath, sitePath, componentsDir, parsers } = moduleOpts
   // captures code or markdown component  -- '@[]' or '@[]()'
   const compExp = /(`{3}[a-z]*\n[\s\S]*?\n`{3})|(`{1}.*?`{1})|@\[(.*?)\](?:\((.*?)\))?/g
   let result
@@ -34,19 +35,23 @@ const mdComponent = (source, { srcPath, sitePath, componentsDir, parsers }) => {
     }
   }
 
+  const { mdParser, md } = parsers
+
   return {
-    template: mdCompParser(parsers.md).render(source),
+    template: mdCompParser(parsers.mdParser(md, dirOpts)).render(source),
     components: comps
   }
 }
 
 module.exports = function (source) {
   this.cacheable()
 
-  const options = loaderUtils.getOptions(this)
+  const moduleOpts = loaderUtils.getOptions(this)
+  const section = getSection(this.context)
+  const dirOpts = moduleOpts.content[section]
 
   const { body } = fm(source)
-  const { template, components } = mdComponent(body, options)
+  const { template, components } = mdComponent(body, moduleOpts, dirOpts)
 
   const allImports = Object.keys(components)
       .map(key => `import ${key} from '~components/${components[key]}'`).join('\n')
@@ -85,6 +90,11 @@ function mergeParserRules (parser, rules, fn) {
   return parser
 }
 
+function getSection (path) {
+  const [match, section] = path.match(/\/content([\/].*|$)/)
+  return section === '' ? '/' : section
+}
+
 function getExt(basePath, name) {
   if (existsSync(basePath + name + '.vue')) return '.vue'
   else if (existsSync(basePath + name + '.js')) return '.js'

lib/module.js

@@ -1,7 +1,7 @@
 import createRouter from './content/api'
 import interceptRoutes from './content/routes'
 import buildContent from './content/build'
-import parsers from './util/parsers'
+import { mdParser, yamlParser } from './util/parsers'
 
 const { existsSync } = require('fs')
 const { resolve, join } = require('path')
@@ -30,14 +30,6 @@ const contentOptions = (content, defaults) => {
   return opts
 }
 
-const contentParsers = (opts, defaults) => {
-  const options = { ...defaults, ...opts }
-  return {
-    md: parsers.md(options.md),
-    yaml: parsers.yaml
-  }
-}
-
 const apiOptions = (opts, defaults, isProd) => {
   const baseURL = opts && opts.baseURL ? opts.baseURL(isProd) : defaults.baseURL
   return { baseURL }
@@ -57,22 +49,20 @@ export default function ContentModule(moduleOpts) {
     content: contentOptions(userOptions.content, {
       routeName: null,
       permalink: ':slug',
+      anchorsLevel: 1,
       isPost: true,
       data: {}
     }),
 
-    parsers: contentParsers(userOptions.parser, {
+    parsers: {
       md: {
         highlight: null,
-        use: [],
-        options: {
-          anchors: {
-            level: 1,
-            permalinkClass: 'nuxtent-anchor'
-          }
-        }
-      }
-    }),
+        use: []
+      },
+      ...userOptions.parsers,
+      mdParser,
+      yamlParser
+    },
 
     api: {
       ...apiOptions(userOptions.api, {
@@ -83,6 +73,7 @@ export default function ContentModule(moduleOpts) {
     }
   }
 
+
   const { isDev, srcDir, content, api } = options
 
   // 1. Configure and build dynamic content pages

lib/util/parsers.js

@@ -1,8 +1,8 @@
-const yamlParser = require('js-yaml')
+const yamlit = require('js-yaml')
 const markdownit = require('markdown-it')
 const markdownAnchors = require('markdown-it-anchor')
 
-const mdParser = ({ highlight, use, options }) => {
+export const mdParser = ({ highlight, use }, { anchorsLevel }) => {
   const parser = markdownit({
     preset: 'default',
     html: true,
@@ -12,7 +12,9 @@ const mdParser = ({ highlight, use, options }) => {
   })
 
   const plugins = [
-    [markdownAnchors, options.anchors]
+    [markdownAnchors, { // TODO they are all getting IDs! :(
+      level: anchorsLevel
+    }]
   ].concat(use)
 
   plugins.forEach(plugin => {
@@ -22,7 +24,8 @@ const mdParser = ({ highlight, use, options }) => {
   return parser
 }
 
-export default {
-  md: mdParser,
-  yaml: yamlParser.safeLoad
+export const yamlParser = () => {
+  return {
+      render: yamlit.safeLoad
+  }
 }

package.json

@@ -38,6 +38,7 @@
     "js-yaml": "^3.9.0",
     "loader-utils": "^1.1.0",
     "markdown-it": "^8.3.1",
+    "markdown-it-anchor": "^4.0.0",
     "moment": "^2.18.1",
     "param-case": "^2.1.1",
     "path-to-regexp": "^1.7.0",