feat: Change config format on minimal-blog theme (#234)

* Remove unused navigation hook * Replace hooks * New config hooks * Move config in siteMetadata to own config * Add README notices BREAKING CHANGE: The navigation and externalLinks options are no longer on the siteMetadata but now in the theme options itself.
LekoArts · Jan 23, 2020 · bdeb670 · bdeb670
1 parent 31cad37
commit bdeb670
Show file tree

Hide file tree

Showing 18 changed files with 227 additions and 145 deletions.
diff --git a/examples/minimal-blog/README.md b/examples/minimal-blog/README.md
@@ -173,7 +173,7 @@ The `date` field has to be written in the format `YYYY-MM-DD`!
 
 #### Adding a new page
 
-Additional pages can be created by placing MDX files inside `contents/pages`, e.g. an "About" or "Contact" page. You'll manually need to link to those pages, for example by adding them to the navigation (in `siteMetadata`). General instructions:
+Additional pages can be created by placing MDX files inside `contents/pages`, e.g. an "About" or "Contact" page. You'll manually need to link to those pages, for example by adding them to the navigation (in `navigation` option of the theme). General instructions:
 
 1. Create a new folder inside `content/pages`
 1. Create a new `index.mdx` file, and add the frontmatter

diff --git a/examples/minimal-blog/gatsby-config.js b/examples/minimal-blog/gatsby-config.js
@@ -5,21 +5,32 @@ require(`dotenv`).config({
 module.exports = {
   siteMetadata: {
     siteTitleAlt: `Minimal Blog - Gatsby Theme`,
-    navigation: [
-      {
-        title: `Blog`,
-        slug: `/blog`,
-      },
-      {
-        title: `About`,
-        slug: `/about`,
-      },
-    ],
   },
   plugins: [
     {
       resolve: `@lekoarts/gatsby-theme-minimal-blog`,
-      options: {},
+      options: {
+        navigation: [
+          {
+            title: `Blog`,
+            slug: `/blog`,
+          },
+          {
+            title: `About`,
+            slug: `/about`,
+          },
+        ],
+        externalLinks: [
+          {
+            name: `Twitter`,
+            url: `https://twitter.com/lekoarts_de`,
+          },
+          {
+            name: `Instagram`,
+            url: `https://www.instagram.com/lekoarts.de/`,
+          },
+        ],
+      },
     },
     {
       resolve: `gatsby-plugin-google-analytics`,

diff --git a/themes/gatsby-theme-minimal-blog-core/gatsby-config.js b/themes/gatsby-theme-minimal-blog-core/gatsby-config.js
@@ -5,13 +5,6 @@ module.exports = themeOptions => {
   const { mdx = true } = themeOptions
 
   return {
-    siteMetadata: {
-      basePath: options.basePath,
-      blogPath: options.blogPath,
-      postsPath: options.postsPath,
-      pagesPath: options.pagesPath,
-      tagsPath: options.tagsPath,
-    },
     plugins: [
       {
         resolve: `gatsby-source-filesystem`,

diff --git a/themes/gatsby-theme-minimal-blog-core/gatsby-node.js b/themes/gatsby-theme-minimal-blog-core/gatsby-node.js
@@ -114,9 +114,68 @@ exports.createSchemaCustomization = ({ actions, schema }, themeOptions) => {
       excerpt(pruneLength: Int = 140): String! @mdxpassthrough(fieldName: "excerpt")
       body: String! @mdxpassthrough(fieldName: "body")
     }
+    
+    type MinimalBlogConfig implements Node {
+      basePath: String
+      blogPath: String
+      postsPath: String
+      pagesPath: String
+      tagsPath: String
+      externalLinks: [ExternalLink]
+      navigation: [NavigationEntry]
+      showLineNumbers: Boolean
+    }
+    
+    type ExternalLink {
+      name: String!
+      url: String!
+    }
+    
+    type NavigationEntry {
+      title: String!
+      slug: String!
+    }
   `)
 }
 
+exports.sourceNodes = ({ actions, createContentDigest }, themeOptions) => {
+  const { createNode } = actions
+  const {
+    basePath,
+    blogPath,
+    postsPath,
+    pagesPath,
+    tagsPath,
+    externalLinks,
+    navigation,
+    showLineNumbers,
+  } = withDefaults(themeOptions)
+
+  const minimalBlogConfig = {
+    basePath,
+    blogPath,
+    postsPath,
+    pagesPath,
+    tagsPath,
+    externalLinks,
+    navigation,
+    showLineNumbers,
+  }
+
+  createNode({
+    ...minimalBlogConfig,
+    id: `@lekoarts/gatsby-theme-minimal-blog-core-config`,
+    parent: null,
+    children: [],
+    internal: {
+      type: `MinimalBlogConfig`,
+      contentDigest: createContentDigest(minimalBlogConfig),
+      content: JSON.stringify(minimalBlogConfig),
+      description: `Options for @lekoarts/gatsby-theme-minimal-blog-core`,
+    },
+  })
+}
+
 exports.onCreateNode = ({ node, actions, getNode, createNodeId, createContentDigest }, themeOptions) => {
   const { createNode, createParentChildLink } = actions
 

diff --git a/themes/gatsby-theme-minimal-blog-core/utils/default-options.js b/themes/gatsby-theme-minimal-blog-core/utils/default-options.js
@@ -4,12 +4,18 @@ module.exports = themeOptions => {
   const postsPath = themeOptions.postsPath || `content/posts`
   const pagesPath = themeOptions.pagesPath || `content/pages`
   const tagsPath = themeOptions.tagsPath || `/tags`
+  const externalLinks = themeOptions.externalLinks || []
+  const navigation = themeOptions.navigation || []
+  const showLineNumbers = themeOptions.showLineNumbers || true
 
   return {
     basePath,
     blogPath,
     postsPath,
     pagesPath,
     tagsPath,
+    externalLinks,
+    navigation,
+    showLineNumbers,
   }
 }
diff --git a/themes/gatsby-theme-minimal-blog/README.md b/themes/gatsby-theme-minimal-blog/README.md
@@ -73,6 +73,8 @@ gatsby new minimal-blog LekoArts/gatsby-starter-minimal-blog
 | `pagesPath`       | `content/pages` | Location of additional pages (optional)                                                                   |
 | `mdx`             | `true`          | Configure `gatsby-plugin-mdx` (if your website already is using the plugin pass `false` to turn this off) |
 | `showLineNumbers` | `true`          | Show line numbers in code blocks                                                                          |
+| `navigation`      | `[]`            | Add links to your internal sites to the left part of the header                                           |
+| `externalLinks`   | `[]`            | Add links to your external sites to the right part of the header                                          |
 
 #### Example usage
 
@@ -83,8 +85,27 @@ module.exports = {
     {
       resolve: `@lekoarts/gatsby-theme-minimal-blog`,
       options: {
-          showLineNumbers: false,
-        }
+        showLineNumbers: false,
+        navigation: [
+          {
+            title: `Blog`,
+            slug: `/blog`
+          },
+          {
+            title: `About`,
+            slug: `/about`
+          }
+        ],
+        externalLinks: [
+          {
+            name: `Twitter`,
+            url: `https://twitter.com/lekoarts_de`
+          },
+          {
+            name: `Instagram`,
+            url: `https://www.instagram.com/lekoarts.de/`
+          }
+        ]
       }
     }
   ]

diff --git a/themes/gatsby-theme-minimal-blog/gatsby-config.js b/themes/gatsby-theme-minimal-blog/gatsby-config.js
@@ -1,49 +1,28 @@
 const newsletterFeed = require(`./src/utils/newsletterFeed`)
 
-module.exports = options => {
-  const showLineNumbers = options.showLineNumbers || true
-
-  return {
-    siteMetadata: {
-      siteTitle: `Lupin`,
-      siteTitleAlt: `Minimal Blog - @lekoarts/gatsby-theme-minimal-blog`,
-      siteHeadline: `Minimal Blog - Gatsby Theme from @lekoarts`,
-      siteUrl: `https://minimal-blog.lekoarts.de`,
-      siteDescription: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.`,
-      siteLanguage: `en`,
-      siteImage: `/banner.jpg`,
-      author: `@lekoarts_de`,
-      externalLinks: [
-        {
-          name: `Twitter`,
-          url: `https://twitter.com/lekoarts_de`,
-        },
-        {
-          name: `Instagram`,
-          url: `https://www.instagram.com/lekoarts.de/`,
-        },
-      ],
-      navigation: [
-        {
-          title: `Blog`,
-          slug: `/blog`,
-        },
-      ],
-      showLineNumbers,
+module.exports = options => ({
+  siteMetadata: {
+    siteTitle: `Lupin`,
+    siteTitleAlt: `Minimal Blog - @lekoarts/gatsby-theme-minimal-blog`,
+    siteHeadline: `Minimal Blog - Gatsby Theme from @lekoarts`,
+    siteUrl: `https://minimal-blog.lekoarts.de`,
+    siteDescription: `Typography driven, feature-rich blogging theme with minimal aesthetics. Includes tags/categories support and extensive features for code blocks such as live preview, line numbers, and line highlighting.`,
+    siteLanguage: `en`,
+    siteImage: `/banner.jpg`,
+    author: `@lekoarts_de`,
+  },
+  plugins: [
+    {
+      resolve: `@lekoarts/gatsby-theme-minimal-blog-core`,
+      options,
+    },
+    {
+      resolve: `gatsby-plugin-feed`,
+      options: newsletterFeed,
     },
-    plugins: [
-      {
-        resolve: `@lekoarts/gatsby-theme-minimal-blog-core`,
-        options,
-      },
-      {
-        resolve: `gatsby-plugin-feed`,
-        options: newsletterFeed,
-      },
-      `gatsby-plugin-react-helmet`,
-      `gatsby-plugin-typescript`,
-      `gatsby-plugin-catch-links`,
-      `gatsby-plugin-theme-ui`,
-    ],
-  }
-}
+    `gatsby-plugin-react-helmet`,
+    `gatsby-plugin-typescript`,
+    `gatsby-plugin-catch-links`,
+    `gatsby-plugin-theme-ui`,
+  ],
+})
diff --git a/themes/gatsby-theme-minimal-blog/src/components/blog.tsx b/themes/gatsby-theme-minimal-blog/src/components/blog.tsx
@@ -4,7 +4,7 @@ import { Link } from "gatsby"
 import { Flex } from "@theme-ui/components"
 import Layout from "./layout"
 import Listing from "./listing"
-import useSiteMetadata from "../hooks/use-site-metadata"
+import useMinimalBlogConfig from "../hooks/use-minimal-blog-config"
 import replaceSlashes from "../utils/replaceSlashes"
 import SEO from "./seo"
 
@@ -21,7 +21,7 @@ type PostsProps = {
 }
 
 const Blog = ({ posts }: PostsProps) => {
-  const { tagsPath, basePath } = useSiteMetadata()
+  const { tagsPath, basePath } = useMinimalBlogConfig()
 
   return (
     <Layout>

diff --git a/themes/gatsby-theme-minimal-blog/src/components/code.tsx b/themes/gatsby-theme-minimal-blog/src/components/code.tsx
@@ -2,7 +2,7 @@
 import React from "react"
 import loadable from "@loadable/component"
 import theme from "prism-react-renderer/themes/nightOwl"
-import useSiteMetadata from "../hooks/use-site-metadata"
+import useMinimalBlogConfig from "../hooks/use-minimal-blog-config"
 import { HighlightInnerProps, Language } from "../types"
 
 type CodeProps = {
@@ -78,7 +78,7 @@ const Code = ({
   metastring = ``,
   ...props
 }: CodeProps) => {
-  const { showLineNumbers } = useSiteMetadata()
+  const { showLineNumbers } = useMinimalBlogConfig()
 
   const [language, { title = `` }] = getParams(blockClassName)
   const shouldHighlightLine = calculateLinesToHighlight(metastring)

diff --git a/themes/gatsby-theme-minimal-blog/src/components/header.tsx b/themes/gatsby-theme-minimal-blog/src/components/header.tsx
@@ -3,14 +3,14 @@ import { jsx, useColorMode, Styled } from "theme-ui"
 import { Link } from "gatsby"
 import { Flex } from "@theme-ui/components"
 import useSiteMetadata from "../hooks/use-site-metadata"
+import useMinimalBlogConfig from "../hooks/use-minimal-blog-config"
 import ColorModeToggle from "./colormode-toggle"
-import useNavigation from "../hooks/use-navigation"
 import Navigation from "./navigation"
 import replaceSlashes from "../utils/replaceSlashes"
 
 const Header = () => {
-  const { siteTitle, externalLinks, basePath } = useSiteMetadata()
-  const nav = useNavigation()
+  const { siteTitle } = useSiteMetadata()
+  const { navigation: nav, externalLinks, basePath } = useMinimalBlogConfig()
   const [colorMode, setColorMode] = useColorMode()
   const isDark = colorMode === `dark`
   const toggleColorMode = (e: any) => {
@@ -44,13 +44,15 @@ const Header = () => {
         }}
       >
         <Navigation nav={nav} />
-        <div sx={{ "a:not(:first-of-type)": { ml: 3 }, fontSize: [1, `18px`] }}>
-          {externalLinks.map(link => (
-            <Styled.a key={link.url} href={link.url}>
-              {link.name}
-            </Styled.a>
-          ))}
-        </div>
+        {externalLinks && externalLinks.length > 0 && (
+          <div sx={{ "a:not(:first-of-type)": { ml: 3 }, fontSize: [1, `18px`] }}>
+            {externalLinks.map(link => (
+              <Styled.a key={link.url} href={link.url}>
+                {link.name}
+              </Styled.a>
+            ))}
+          </div>
+        )}
       </div>
     </header>
   )

diff --git a/themes/gatsby-theme-minimal-blog/src/components/homepage.tsx b/themes/gatsby-theme-minimal-blog/src/components/homepage.tsx
@@ -7,7 +7,7 @@ import Bottom from "../texts/bottom"
 import Title from "./title"
 import Listing from "./listing"
 import List from "./list"
-import useSiteMetadata from "../hooks/use-site-metadata"
+import useMinimalBlogConfig from "../hooks/use-minimal-blog-config"
 import replaceSlashes from "../utils/replaceSlashes"
 
 type PostsProps = {
@@ -23,7 +23,7 @@ type PostsProps = {
 }
 
 const Homepage = ({ posts }: PostsProps) => {
-  const { basePath, blogPath } = useSiteMetadata()
+  const { basePath, blogPath } = useMinimalBlogConfig()
 
   return (
     <Layout>

diff --git a/themes/gatsby-theme-minimal-blog/src/components/item-tags.tsx b/themes/gatsby-theme-minimal-blog/src/components/item-tags.tsx
@@ -1,7 +1,7 @@
 import React from "react"
 import { Styled } from "theme-ui"
 import { Link } from "gatsby"
-import useSiteMetadata from "../hooks/use-site-metadata"
+import useMinimalBlogConfig from "../hooks/use-minimal-blog-config"
 import replaceSlashes from "../utils/replaceSlashes"
 
 type TagsProps = {
@@ -12,7 +12,7 @@ type TagsProps = {
 }
 
 const ItemTags = ({ tags }: TagsProps) => {
-  const { tagsPath, basePath } = useSiteMetadata()
+  const { tagsPath, basePath } = useMinimalBlogConfig()
 
   return (
     <React.Fragment>