feat(gatsby-theme-docz): add custom theme support

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

@@ -41,7 +41,7 @@ export const getBaseConfig = (
   custom?: Partial<Config>
 ): Config => {
   const initial = omit<Arguments<Argv>, any>(toOmit, argv)
-  const base = { ...initial, ...doczRcBaseConfig }
+  const base = { ...initial, ...doczRcBaseConfig, paths }
   return merge(base, custom) as Config
 }
 
@@ -63,5 +63,5 @@ export const parseConfig = async (
     : load<Config>('docz', defaultConfig)
 
   const reduceAsync = Plugin.reduceFromPluginsAsync<Config>(config.plugins)
-  return reduceAsync('setConfig', { ...config, paths })
+  return reduceAsync('setConfig', config)
 }

core/docz-theme-default/src/index.tsx

@@ -9,7 +9,7 @@ import { Global } from './styles/global'
 import { config } from './config'
 import { ThemeProvider } from './utils/theme'
 
-const componentsMap = {
+export const componentsMap = {
   a: components.Link,
   blockquote: components.Blockquote,
   h1: components.H1,

core/gatsby-theme-docz/gatsby-config.js

@@ -4,7 +4,7 @@ const { mdPlugins, hastPlugins } = require('./src/utils/remark-plugins')
 const { getDoczConfig } = require('./src/utils/parseConfig')
 
 module.exports = opts => {
-  const config = getDoczConfig(opts)
+  const { paths, ...config } = getDoczConfig(opts)
   return {
     plugins: [
       {
@@ -14,13 +14,16 @@ module.exports = opts => {
           mdPlugins: config.mdPlugins.concat(mdPlugins),
           hastPlugins: config.hastPlugins.concat(hastPlugins),
           defaultLayouts: {
-            default: path.resolve(__dirname, 'src/components/Layout.js'),
+            default: path.join(paths.app, 'components/Layout.js'),
           },
         },
       },
       {
         resolve: 'gatsby-plugin-react-helmet',
       },
+      {
+        resolve: 'gatsby-plugin-root-import',
+      },
       {
         resolve: 'gatsby-plugin-compile-es6-packages',
         options: {

core/gatsby-theme-docz/gatsby-node.js

@@ -1,3 +1,4 @@
 exports.createPagesStatefully = require('./src/node/createPagesStatefully')
 exports.onCreateBabelConfig = require('./src/node/onCreateBabelConfig')
+exports.onPreInit = require('./src/node/onPreInit')
 exports.sourceNodes = require('./src/node/sourceNodes')

core/gatsby-theme-docz/package.json

@@ -22,12 +22,14 @@
     "docz": "^0.13.5",
     "docz-core": "^0.13.5",
     "docz-theme-default": "^0.13.5",
+    "docz-utils": "^0.13.5",
     "fs-extra": "^7.0.1",
     "gatsby": "^2.1.4",
     "gatsby-mdx": "^0.3.6",
     "gatsby-plugin-compile-es6-packages": "^1.0.6",
     "gatsby-plugin-manifest": "^2.0.17",
     "gatsby-plugin-react-helmet": "^3.0.6",
+    "gatsby-plugin-root-import": "^2.0.5",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",
     "react": "^16.8.2",

core/gatsby-theme-docz/src/node/onPreInit.js

@@ -0,0 +1,31 @@
+const fs = require('fs-extra')
+const path = require('path')
+const { touch, compiled } = require('docz-utils')
+const { parseConfig } = require('../utils/parseConfig')
+
+const fromTemplates = filepath =>
+  path.resolve(__dirname, '../../templates', filepath)
+
+const mountComponentPath = paths => component =>
+  path.join(paths.app, 'components', component || '')
+
+const touchTemplateWithPaths = paths => async (filepath, opts) => {
+  const componentPath = mountComponentPath(paths)
+  const dest = componentPath(filepath.replace('.tpl', ''))
+  const template = await compiled(fromTemplates(filepath), { minimize: false })
+  const raw = template(opts)
+  await touch(dest, raw)
+}
+
+module.exports = async opts => {
+  const { paths, ...config } = await parseConfig(opts)
+  const componentPath = mountComponentPath(paths)
+  const touchTemplate = touchTemplateWithPaths(paths)
+
+  await fs.ensureDir(componentPath())
+  await fs.copy(fromTemplates('Seo.tpl.js'), componentPath('Seo.js'))
+  await fs.copy(fromTemplates('Link.tpl.js'), componentPath('Link.js'))
+  await touchTemplate('Layout.tpl.js', { theme: config.theme })
+
+  return Promise.resolve()
+}

core/gatsby-theme-docz/templates/Layout.tpl.js

@@ -0,0 +1,72 @@
+import React, { Fragment } from 'react'
+import PropTypes from 'prop-types'
+import { StaticQuery, graphql } from 'gatsby'
+import { AsyncRoute, useComponents } from 'docz'
+import { MDXProvider } from '@mdx-js/tag'
+import Theme from '<%- theme %>'
+
+import { Link } from './Link'
+import SEO from './Seo'
+
+const query = graphql`
+  query Layout {
+    doczDb {
+      id
+      db
+    }
+  }
+`
+
+const Route = ({ children, ...props }) => {
+  const components = useComponents()
+  const NotFound = components.NotFound
+  if (!props.entry) return <NotFound />
+
+  return (
+    <MDXProvider components={components}>
+      <AsyncRoute
+        {...props}
+        asyncComponent={() => <Fragment>{children}</Fragment>}
+      />
+    </MDXProvider>
+  )
+}
+
+const parseDatabase = data => {
+  try {
+    return JSON.parse(data.doczDb.db)
+  } catch (err) {
+    return {}
+  }
+}
+
+const Layout = ({ children, ...defaultProps }) => {
+  const { pageContext: ctx } = defaultProps
+  return (
+    <StaticQuery
+      query={query}
+      render={data => {
+        const db = parseDatabase(data)
+        const entry = db.entries.find(entry => entry.filepath === ctx.filepath)
+
+        return (
+          <Fragment>
+            {entry && <SEO title={entry.value.name} />}
+            <Theme db={db} linkComponent={Link}>
+              <Route {...defaultProps} entry={entry}>
+                {children}
+              </Route>
+            </Theme>
+          </Fragment>
+        )
+      }}
+    />
+  )
+}
+
+Layout.propTypes = {
+  color: PropTypes.string,
+  children: PropTypes.node.isRequired,
+}
+
+export default Layout

core/gatsby-theme-docz/templates/Link.tpl.js

@@ -0,0 +1,11 @@
+import React from 'react'
+import { Link as BaseLink } from 'gatsby'
+
+export const Link = props => (
+  <BaseLink
+    {...props}
+    getProps={({ isCurrent, ...customProps }) =>
+      isCurrent ? { className: `${props.className} active` } : null
+    }
+  />
+)

core/gatsby-theme-docz/templates/Seo.tpl.js

@@ -0,0 +1,88 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Helmet from 'react-helmet'
+import { StaticQuery, graphql } from 'gatsby'
+
+function SEO({ description, lang, meta, keywords, title }) {
+  return (
+    <StaticQuery
+      query={detailsQuery}
+      render={data => {
+        const db = JSON.parse(data.doczDb.db)
+        const metaDescription = description || db.config.title
+
+        return (
+          <Helmet
+            htmlAttributes={{ lang }}
+            title={title}
+            titleTemplate={`%s | ${db.config.title}`}
+            meta={[
+              {
+                name: `description`,
+                content: metaDescription,
+              },
+              {
+                property: `og:title`,
+                content: title,
+              },
+              {
+                property: `og:description`,
+                content: metaDescription,
+              },
+              {
+                property: `og:type`,
+                content: `website`,
+              },
+              {
+                name: `twitter:card`,
+                content: `summary`,
+              },
+              {
+                name: `twitter:title`,
+                content: title,
+              },
+              {
+                name: `twitter:description`,
+                content: metaDescription,
+              },
+            ]
+              .concat(
+                keywords.length > 0
+                  ? {
+                      name: `keywords`,
+                      content: keywords.join(`, `),
+                    }
+                  : []
+              )
+              .concat(meta)}
+          />
+        )
+      }}
+    />
+  )
+}
+
+SEO.defaultProps = {
+  lang: `en`,
+  meta: [],
+  keywords: [],
+}
+
+SEO.propTypes = {
+  description: PropTypes.string,
+  lang: PropTypes.string,
+  meta: PropTypes.array,
+  keywords: PropTypes.arrayOf(PropTypes.string),
+  title: PropTypes.string.isRequired,
+}
+
+export default SEO
+
+const detailsQuery = graphql`
+  query DefaultSEOQuery {
+    doczDb {
+      id
+      db
+    }
+  }
+`