Refactor and simplify styles and templates (#33)

* Update packages and use Script component

* Add requirements for nginx buildpack

* Add script that cleans all but necessary files after build

* Fix(?) heroku script

* Remove script and just point nginx at path

* Make main layout body expand to full height

* Add new homepage

* Replace postcss media and mixins with tailwind equivalents

* Improve layout and remove postcss media in JS

* Remove color mod and custom properties, replace headerIsScrolled

* Change how intersection observer is used to check for scrolled header

* Move docs left toggle menu one z-index higher so it shows on super
small screens

* Change layout to flex-based one that doesn't require advanced scroll handling

* Fix eslint

* Add forced scroll height to homepage and use sentinel to collapse flex
header

* Make slightly better homepage

* Upgrade again

* Move plausible script outside of Helmet

* Remove unused import

* Remove unused cssBase

* Update packages

* Remove template wrapping system

* Upgrade packages

* Upgrade packages

* Remove unused files

* Add rewrite rule for trailing slashes on the example server

* Try just disabling trailingSlash

* Fix root

* Remove useRedirect

* Try another nginx rule

* Use try_files

* Fix link styling by using our custom link component

* Update packages

* Use @sentry/gatsby

* Remove DEV_SSR plugin

* Use example URL and make max breakpoints unique placeholders

* re-remove sentry

* Use classNames in long tailwind utility classes

* Fix right sidebar top margin

* Tweak styles, fixing external link icon

* Make docs engine more configurable

* Try one way of fixing the header

* Refactor layout to fix some height, alert, and header bugs

* Fix scroll-past-the-end bug?

* Revert to flex sticky header and add padding

* Fix header social icons

* Fix scroll-past-header bug and refactor header links

* Add simpler method for hiding nav items

* Ensure docs first h1 and right bar "content" header are aligned
particularly while not breaking mobile

* use scroll-margin-top for anchor nav

* Add margin:auto to home container

* Refactor sidebar autoscrolling

* Increase specificity of markdown list style rules

* Fix sticky sidebars

* Fix mobile sidebar scrolling

* Use fixed header and sticky sidebar to fix issues

* Retweak padding and width of sidebar

* Use max height so sidebar isn't necessarily size of screen

* Tweak layout so docs look better at all heights

* Make right sidebar screen-height and sticky

* Reposition sidebar back in line with header

* Fix mobile sidebar and content by adding explicit width

* Fix args linker and make its targeted pages configurable

* Shift 10px of margin to right panel so buttons block has its own spacing

* Only add horizontal padding to markdown content after xs

* use pathname instead of slug

* v0.2.0

Co-authored-by: Thomas Kunwar <[email protected]>

Author: rogermparent

packages/example/src/pages/index.tsx

@@ -1,18 +1,39 @@
 import React from 'react'
-import { Link } from 'gatsby'
+import cn from 'classnames'
+import { PageProps } from 'gatsby'
+import MainLayout from '@dvcorg/gatsby-theme-iterative/src/components/MainLayout'
+import Link from '@dvcorg/gatsby-theme-iterative/src/components/Link'
 
-export default function Home() {
+export default function Home({ location }: PageProps) {
   return (
-    <div>
-      <h1>Gatsby Theme: Iterative</h1>
-      <p>
-        Welcome to the documentation and example website for Iterative&apos;s
-        website engine!
-      </p>
-      <p>
-        This theme is primarily related to adding a documentation engine, which
-        you can see <Link to="/doc">here!</Link>
-      </p>
-    </div>
+    <MainLayout location={location}>
+      <div
+        className={cn(
+          'container',
+          'mx-auto',
+          'mt-14',
+          'px-4',
+          'py-14',
+          'flex',
+          'flex-col',
+          'justify-center',
+          'items-center'
+        )}
+      >
+        <h1 className={cn('text-2xl', 'font-bold', 'text-center', 'mb-5')}>
+          Gatsby Theme: Iterative
+        </h1>
+        <section className="text-lg">
+          <p>
+            Welcome to the documentation and example website for
+            Iterative&apos;s website engine!
+          </p>
+          <p>
+            This theme is primarily related to adding a documentation engine,
+            which you can see <Link href="/doc">here!</Link>
+          </p>
+        </section>
+      </div>
+    </MainLayout>
   )
 }

packages/example/tailwind.config.js

@@ -1,7 +1,13 @@
+const themeConfig = require('@dvcorg/gatsby-theme-iterative/tailwind.config')
+
 module.exports = {
-  content: ['./src/**/*.{js,jsx,ts,tsx}'],
+  ...themeConfig,
+  content: [...themeConfig.content, './src/**/*'],
   theme: {
-    extend: {}
-  },
-  plugins: []
+    ...themeConfig.theme,
+    fontFamily: {
+      sans: ['Tahoma', 'Arial', 'sans-serif'],
+      mono: ['Consolas', '"Liberation Mono"', 'Menlo', 'Courier', 'monospace']
+    }
+  }
 }

packages/gatsby-theme-iterative/config-defaults.js

@@ -0,0 +1,8 @@
+const path = require('path')
+module.exports = {
+  glossaryPath: path.resolve('content', 'docs', 'user-guide', 'basic-concepts'),
+  docsPath: path.resolve('content', 'docs'),
+  glossaryInstanceName: 'iterative-glossary',
+  docsInstanceName: 'iterative-docs',
+  argsLinkerPath: ['command-reference', `ref`, 'cli-reference']
+}

packages/gatsby-theme-iterative/config/postcss/media.d.ts

@@ -3,6 +3,8 @@ const GithubSlugger = require('github-slugger')
 const slugger = new GithubSlugger()
 const SLUG_REGEXP = /\s+{#([a-z0-9-]*[a-z0-9]+)}\s*$/
 
+const path = require('path')
+
 const extractSlugFromTitle = title => {
   // extracts expressions like {#too-many-files} from the end of a title
   const meta = title.match(SLUG_REGEXP)
@@ -34,7 +36,7 @@ const parseHeadings = text => {
 
 const createPages = async (
   { graphql, actions },
-  { defaultTemplate, getTemplate, disable }
+  { defaultTemplate, getTemplate, disable, docsPrefix }
 ) => {
   if (disable) return
   const docsResponse = await graphql(
@@ -73,14 +75,13 @@ const createPages = async (
     } = doc
     const headings = parseHeadings(rawMarkdownBody)
 
-    if (slug) {
+    if (slug !== undefined) {
       actions.createPage({
         component: getTemplate(template, defaultTemplate),
-        path: slug,
+        path: path.posix.join(docsPrefix, slug),
         context: {
           id,
           slug,
-          isDocs: true,
           headings
         }
       })

packages/gatsby-theme-iterative/config/postcss/media.js

@@ -3,21 +3,6 @@ const fs = require('fs')
 const path = require('path')
 
 const autoprefixer = require('autoprefixer')
-const customMedia = require('postcss-custom-media')
-const customProperties = require('postcss-custom-properties')
-const mixins = require('postcss-mixins')
-const colorMod = require('postcss-color-mod-function')
-
-const mediaConfig = require('./config/postcss/media')
-const mixinsConfig = require('./config/postcss/mixins')
-
-const defaultCssBase = path.join(
-  __dirname,
-  'src',
-  'components',
-  'Page',
-  'base.css'
-)
 
 const customYoutubeTransformer = require('./config/gatsby-remark-embedder/custom-yt-embedder')
 
@@ -31,26 +16,20 @@ require('./config/prismjs/dvctable')
 
 const imageMaxWidth = 700
 
+const defaults = require('./config-defaults')
+
 module.exports = ({
   simpleLinkerTerms,
-  cssBase = defaultCssBase,
-  customMediaConfig = { importFrom: [mediaConfig] },
-  customPropertiesConfig = {
-    importFrom: [cssBase],
-    disableDeprecationNotice: true
-  },
-  colorModConfig = {
-    importFrom: [cssBase]
-  },
   postCssPlugins = [
     require('tailwindcss/nesting')(require('postcss-nested')),
-    customMedia(customMediaConfig),
-    mixins(mixinsConfig),
-    customProperties(customPropertiesConfig),
-    colorMod(colorModConfig),
     autoprefixer,
     require('tailwindcss')
-  ]
+  ],
+  docsInstanceName = defaults.docsInstanceName,
+  docsPath = defaults.docsPath,
+  glossaryInstanceName = defaults.glossaryInstanceName,
+  glossaryPath = defaults.glossaryPath,
+  argsLinkerPath = defaults.argsLinkerPath
 }) => ({
   plugins: [
     {
@@ -68,11 +47,18 @@ module.exports = ({
     },
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sitemap',
-    {
+    glossaryInstanceName && {
       resolve: 'gatsby-source-filesystem',
       options: {
-        name: 'content',
-        path: path.resolve('content')
+        name: glossaryInstanceName,
+        path: glossaryPath
+      }
+    },
+    docsInstanceName && {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: docsInstanceName,
+        path: docsPath
       }
     },
     'gatsby-plugin-image',
@@ -97,11 +83,7 @@ module.exports = ({
             options: {
               icon: linkIcon,
               // Pathname can also be array of paths. eg: ['docs/command-reference;', 'docs/api']
-              pathname: [
-                'docs/command-reference',
-                `docs/ref`,
-                'docs/cli-reference'
-              ]
+              pathname: argsLinkerPath
             }
           },
           {
@@ -169,10 +151,10 @@ module.exports = ({
         }
       }
     }
-  ],
+  ].filter(Boolean),
   siteMetadata: {
     author: 'Iterative',
-    siteUrl: 'https://cml.dev',
+    siteUrl: 'https://example.com',
     titleTemplate: ''
   }
 })

packages/gatsby-theme-iterative/config/postcss/mixins.js

@@ -1,5 +1,6 @@
 const path = require('path')
 const { name: packageName } = require('./package.json')
+const defaults = require('./config-defaults')
 
 const defaultGetTemplate = (template, defaultTemplate) =>
   template
@@ -15,7 +16,13 @@ exports.pluginOptionsSchema = ({ Joi }) => {
     ),
     remark: Joi.boolean().default(true),
     filesystem: Joi.boolean().default(true),
-    glossaryDirectory: Joi.string().default('docs/user-guide/basic-concepts'),
+    glossaryDirectory: Joi.string().default(
+      path.resolve('content', 'docs', 'user-guide', 'basic-concepts')
+    ),
+    docsDirectory: Joi.string().default(path.resolve('content', 'docs')),
+    glossaryInstanceName: Joi.string().default('iterative-glossary'),
+    docsInstanceName: Joi.string().default('iterative-docs'),
+    docsPrefix: Joi.string().default('doc'),
     simpleLinkerTerms: Joi.array().items(
       Joi.object({
         matches: Joi.string(),
@@ -24,9 +31,10 @@ exports.pluginOptionsSchema = ({ Joi }) => {
     ),
     cssBase: Joi.string(),
     customMediaConfig: Joi.object(),
-    customPropertiesConfig: Joi.object(),
-    colorModConfig: Joi.object(),
-    postCssPlugins: Joi.array()
+    postCssPlugins: Joi.array(),
+    argsLinkerPath: Joi.alternatives()
+      .try(Joi.string(), Joi.array().items(Joi.string()))
+      .default(defaults.argsLinkerPath)
   })
 }