Updated Docs engine (#233)

* WIP: setting up theme

* removing unused

* fixed crash issue with pkg upgrade

* disabled tailwind prefilght and minor fixes

* updated theme pkg

* exmaple usage

* added wrapped layout for 404 page

* removed unused markdownContent

* removed docs code

Author: yathomasi

content/docs/ref/ci.md

@@ -1,6 +1,6 @@
 # Command Reference: `ci`
 
-```bash
+```usage
 cml ci [options]
 ```
 
@@ -25,6 +25,6 @@ Instead of wrangling with
 `git config user.email` before being able to `git commit` or use
 [`cml pr`](/doc/ref/pr), simply run:
 
-```bash
-cml ci
+```cml
+$ cml ci
 ```

gatsby-browser.js

@@ -1,5 +1,2 @@
 /* eslint-env node */
-
-const PageWrapper = require('./src/components/organisms/PageWrapper').default
-
-exports.wrapPageElement = PageWrapper
+require('./src/styles/global.css')

gatsby-config.js

@@ -24,10 +24,10 @@ const keywords = [
 
 const plugins = [
   {
-    resolve: `gatsby-plugin-typescript`,
+    resolve: '@dvcorg/gatsby-theme-iterative',
     options: {
-      isTSX: true,
-      allExtensions: true
+      remark: true,
+      cssBase: path.join('src', 'components', 'organisms', 'Page', 'base.css')
     }
   },
   {
@@ -38,83 +38,14 @@ const plugins = [
       }
     }
   },
-  'gatsby-plugin-postcss',
-  'gatsby-plugin-react-helmet',
-  'gatsby-plugin-sitemap',
   `gatsby-plugin-theme-ui`,
-  {
-    resolve: 'gatsby-source-filesystem',
-    options: {
-      name: 'content',
-      path: path.join(__dirname, 'content')
-    }
-  },
   {
     resolve: 'gatsby-source-filesystem',
     options: {
       name: 'images',
       path: path.join(__dirname, 'static', 'img')
     }
   },
-  {
-    resolve: 'gatsby-transformer-remark',
-    options: {
-      plugins: [
-        'gatsby-remark-embedder',
-        {
-          resolve: 'gatsby-remark-prismjs',
-          options: {
-            noInlineHighlight: true,
-            languageExtensions: [
-              {
-                language: 'text',
-                definition: {}
-              }
-            ]
-          }
-        },
-        {
-          resolve: 'gatsby-remark-smartypants',
-          options: {
-            quotes: false
-          }
-        },
-        `gatsby-plugin-robots-txt`,
-        {
-          resolve: 'gatsby-remark-embed-gist',
-          options: {
-            includeDefaultCss: true
-          }
-        },
-        'gatsby-remark-relative-images',
-        'gatsby-remark-copy-linked-files',
-        'gatsby-remark-external-links',
-        {
-          resolve: 'gatsby-remark-autolink-headers',
-          options: {
-            enableCustomId: true,
-            isIconAfterHeader: true
-          }
-        },
-        {
-          resolve: 'gatsby-remark-images',
-          options: {
-            maxWidth: 700,
-            withWebp: true,
-            quality: 90
-          }
-        },
-        'gatsby-remark-responsive-iframe'
-      ]
-    }
-  },
-  {
-    resolve: 'gatsby-plugin-svgr',
-    options: {
-      ref: true
-    }
-  },
-  'gatsby-plugin-sharp',
   'gatsby-plugin-catch-links',
   {
     resolve: 'gatsby-plugin-manifest',
@@ -238,8 +169,12 @@ module.exports = {
     description,
     author: 'Iterative',
     keywords,
-    siteUrl: 'https://cml.dev',
-    title
+    title,
+    siteUrl: process.env.HEROKU_APP_NAME
+      ? `https://${process.env.HEROKU_APP_NAME}.herokuapp.com`
+      : 'https://cml.dev',
+    twitterUsername: '@DVCorg',
+    titleTemplate: '%s | CML'
   },
   developMiddleware: app => {
     app.use(redirectsMiddleware)

gatsby-ssr.js

@@ -1,8 +1,6 @@
 /* eslint-env node */
 const React = require('react')
 
-const PageWrapper = require('./src/components/organisms/PageWrapper').default
-
 const onRenderBody = ({ setHeadComponents }) => {
   return setHeadComponents([
     <script
@@ -15,5 +13,4 @@ const onRenderBody = ({ setHeadComponents }) => {
   ])
 }
 
-exports.wrapPageElement = PageWrapper
 exports.onRenderBody = onRenderBody

package.json

@@ -8,6 +8,7 @@
     "dev": "gatsby develop",
     "author": "LIMIT_BLOG_PAGES=1 SKIP_DOCS=true gatsby develop",
     "build": "gatsby build",
+    "clean": "gatsby clean",
     "start": "node ./src/server/index.js",
     "test": "jest",
     "format-staged": "pretty-quick --staged --no-restage --bail",
@@ -35,6 +36,7 @@
     "node": "<=14.x"
   },
   "dependencies": {
+    "@dvcorg/gatsby-theme-iterative": "^0.1.0",
     "@emotion/react": "^11.7.1",
     "@emotion/styled": "^11.6.0",
     "@hapi/wreck": "^17.0.0",
@@ -54,7 +56,7 @@
     "ease-component": "^1.0.0",
     "express": "^4.17.2",
     "fs-extra": "^10.0.0",
-    "gatsby": "^4.5.3",
+    "gatsby": "^4.13.1",
     "gatsby-cli": "4.5.2",
     "gatsby-link": "^4.5.0",
     "gatsby-plugin-alias-imports": "^1.0.5",
@@ -127,10 +129,9 @@
     "gatsby-plugin-postcss": "^5.5.0",
     "gatsby-plugin-react-helmet": "^5.5.0",
     "gatsby-plugin-sentry": "^1.0.1",
-    "gatsby-plugin-sharp": "4.5.2",
+    "gatsby-plugin-sharp": "^4.13.0",
     "gatsby-plugin-sitemap": "^5.5.0",
     "gatsby-plugin-svgr": "^3.0.0-beta.0",
-    "gatsby-plugin-typescript": "^4.5.2",
     "gatsby-plugin-webpack-bundle-analyzer": "^1.0.5",
     "gatsby-remark-autolink-headers": "^5.5.0",
     "gatsby-remark-copy-linked-files": "^5.5.0",
@@ -144,8 +145,9 @@
     "gatsby-remark-smartypants": "^5.5.0",
     "gatsby-source-filesystem": "^4.5.2",
     "gatsby-transformer-remark": "^5.5.2",
+    "gatsby-transformer-sharp": "^4.13.0",
     "hast-util-select": "^5.0.1",
-    "husky": "4",
+    "husky": "^7.0.4",
     "jest": "^27.4.7",
     "lint-staged": "^12.2.0",
     "postcss-color-mod-function": "^3.0.3",
@@ -159,6 +161,7 @@
     "remark-parse": "^10.0.1",
     "stylelint": "^14.2.0",
     "stylelint-config-standard": "^24.0.0",
+    "tailwindcss": "^3.0.24",
     "typescript": "^4.5.4",
     "unist-util-remove-position": "^4.0.1"
   },

postcss.config.js

@@ -0,0 +1,3 @@
+import Page from '../../../../components/organisms/Page'
+
+export default Page

src/@dvcorg/gatsby-theme-iterative/components/Page/index.tsx

@@ -0,0 +1,3 @@
+const getEditLink = (sourcePath: string): string =>
+  `https://github.com/iterative/cml.dev/blob/master/content${sourcePath}`
+export default getEditLink

src/@dvcorg/gatsby-theme-iterative/getEditLink.ts

@@ -0,0 +1 @@
+module.exports = require('../../../content/docs/sidebar.json')

src/@dvcorg/gatsby-theme-iterative/sidebar.ts

@@ -0,0 +1,18 @@
+import React from 'react'
+
+import MainLayout from '../MainLayout'
+import SiteHeader from '../../organisms/SiteHeader'
+import SiteFooter from '../../organisms/SiteFooter'
+import { IPageProps } from '../../organisms/Page'
+
+const WrappedLayout: React.FC<IPageProps> = ({ children, ...restProps }) => {
+  return (
+    <>
+      <SiteHeader isMain={false} />
+      <MainLayout {...restProps}>{children}</MainLayout>
+      <SiteFooter />
+    </>
+  )
+}
+
+export default WrappedLayout