Support internal and relative linking

src/utils/filesystem.js

@@ -6,8 +6,8 @@ const { ncp } = require('ncp')
 function copyDir (from, to) {
   return new Promise((resolve, reject) => {
     ncp(from, to, (err) => {
-     if (err) reject(err)
-     else resolve()
+      if (err) reject(err)
+      else resolve()
     })
   })
 }

themes/default/markdown/index.js

@@ -1,50 +1,11 @@
 import React from 'react'
 import Markdown from 'markdown-to-jsx'
-import Syntax, { registerLanguage } from 'react-syntax-highlighter/prism-light'
-import { theme, languages } from '@codegen/loadSyntax' // eslint-disable-line
+import { registerLanguage } from 'react-syntax-highlighter/prism-light'
+import { languages } from '@codegen/loadSyntax' // eslint-disable-line
 import { Wrapper } from './styles'
+import Code from './overrides/Code'
 import Header from './overrides/Header'
-
-const CODE_BLOCK_FENCED = /^\s*(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n *)+\n/
-const CODE_BLOCK = /^(?: {4}[^\n]+\n*)+(?:\n *)+\n/
-
-const Code = (props) => {
-  const {
-    className = '',
-    children,
-  } = props
-
-  const language = className.split('-')[1]
-
-  if (language) {
-    const languageRegistered = languages
-      .findIndex(i => i.name === language) > -1
-
-    if (!languageRegistered && process.env.NODE_ENV === 'development') {
-      console.warn(`You have ${language} syntax in your page, but didn't include it in your config file!`)
-    }
-  }
-
-  if (
-    !props.source.match(CODE_BLOCK_FENCED) &&
-    !props.source.match(CODE_BLOCK) &&
-    !language
-  ) {
-    return <code>{children}</code>
-  }
-
-  return (
-    <Syntax
-      style={theme}
-      language={language}
-      showLineNumbers={props.lineNumbers}
-      lineNumberStyle={{ opacity: 0.5 }}
-      useInlineStyles
-    >
-      {children}
-    </Syntax>
-  )
-}
+import Link from './overrides/Link'
 
 export default function (props) {
   languages.forEach(lang =>
@@ -56,6 +17,9 @@ export default function (props) {
         props,
         component: Code,
       },
+      a: {
+        component: Link,
+      },
       h1: {
         props: { el: 'h1' },
         component: Header

themes/default/markdown/overrides/Code.js

@@ -1,49 +1,47 @@
 import React from 'react'
-import { Syntax } from 'react-syntax-highlighter/prism-light'
+import Syntax from 'react-syntax-highlighter/prism-light'
 import { theme, languages } from '@codegen/loadSyntax' // eslint-disable-line
 
 const CODE_BLOCK_FENCED = /^\s*(`{3,}|~{3,}) *(\S+)? *\n([\s\S]+?)\s*\1 *(?:\n *)+\n/
 const CODE_BLOCK = /^(?: {4}[^\n]+\n*)+(?:\n *)+\n/
 
-const Code = (props) => {
-  console.log(props)
+export default function (props) {
   const {
     className = '',
     children,
   } = props
 
-  if (
-    !props.source.match(CODE_BLOCK_FENCED) &&
-    !props.source.match(CODE_BLOCK) &&
-    !language
-  ) {
-    return <code>{children}</code>
-  }
-
-  const language = className.split('-')[1]
+  let language = className.split('-')[1]
 
   if (language) {
+    language = language // language name aliases
+      .replace(/^js$/, 'javascript')
+
     const languageRegistered = languages
-      .findIndex(i => i.name === language) > -1
+      .findIndex(({ name }) => name === language) > -1
 
     if (!languageRegistered && process.env.NODE_ENV === 'development') {
       console.warn(`You have ${language} syntax in your page, but didn't include it in your config file!`)
     }
   }
 
+  if (
+    !props.source.match(CODE_BLOCK_FENCED) &&
+    !props.source.match(CODE_BLOCK) &&
+    !language
+  ) {
+    return <code>{children}</code>
+  }
+
   return (
     <Syntax
       style={theme}
       language={language}
       showLineNumbers={props.lineNumbers}
       lineNumberStyle={{ opacity: 0.5 }}
       useInlineStyles
-      className="syntax"
     >
       {children}
     </Syntax>
   )
 }
-
-
-export default Code

themes/default/markdown/overrides/Header.js

@@ -22,23 +22,25 @@ const style = {
   display: 'inline-block'
 }
 
-const Header = ({ children, id, el, ...rest }) => {
-  if (!id) {
-    id = children[0]
-      .toLowerCase()
-      .split(' ')
-      .join('-')
-  }
+export default function (props) {
+  const {
+    id,
+    el,
+    children,
+  } = props
+
+  const itemId = id || children[0]
+    .toLowerCase()
+    .split(' ')
+    .join('-')
 
   if (!el) {
     return <h1>{children}</h1>
   }
 
   return (
-    <Link href={`#${id}`} id={id}>
-      {React.createElement(el, { children, style })}
+    <Link href={`#${itemId}`} id={itemId}>
+      {React.createElement(el, { style }, children)}
     </Link>
   )
 }
-
-export default Header

themes/default/markdown/overrides/Link.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Link } from 'react-router-dom'
+
+export default function (props) {
+  const { href, children, ...rest } = props
+  const isExternal = /^https?:\/\//.test(href)
+
+  return isExternal
+    ? <a {...props} target="_blank">{children}</a>
+    : <Link {...rest} to={href}>{children}</Link>
+}