From 76c51065bf6e0f9cb6453882b06b0bc8fe94787e Mon Sep 17 00:00:00 2001 From: Lennart Date: Thu, 23 Jan 2020 14:53:10 +0100 Subject: [PATCH] BREAKING CHANGE: 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 --- examples/minimal-blog/README.md | 2 +- examples/minimal-blog/gatsby-config.js | 33 ++++++--- .../gatsby-config.js | 7 -- .../gatsby-node.js | 59 +++++++++++++++ .../utils/default-options.js | 6 ++ themes/gatsby-theme-minimal-blog/README.md | 25 ++++++- .../gatsby-config.js | 71 +++++++------------ .../src/components/blog.tsx | 4 +- .../src/components/code.tsx | 4 +- .../src/components/header.tsx | 22 +++--- .../src/components/homepage.tsx | 4 +- .../src/components/item-tags.tsx | 4 +- .../src/components/navigation.tsx | 28 +++++--- .../src/components/tag.tsx | 4 +- .../src/components/tags.tsx | 4 +- .../src/hooks/use-minimal-blog-config.tsx | 47 ++++++++++++ .../src/hooks/use-navigation.tsx | 31 -------- .../src/hooks/use-site-metadata.tsx | 17 +---- 18 files changed, 227 insertions(+), 145 deletions(-) create mode 100644 themes/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config.tsx delete mode 100644 themes/gatsby-theme-minimal-blog/src/hooks/use-navigation.tsx diff --git a/examples/minimal-blog/README.md b/examples/minimal-blog/README.md index ab56c4baf..f41c1523d 100644 --- 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 index 724bf4f9e..7c847d602 100644 --- 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 index 021fae03c..06ff62779 100644 --- 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 index fb16c1100..8250d4f0a 100644 --- 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 index b9a8d5a3a..26c75d724 100644 --- a/themes/gatsby-theme-minimal-blog-core/utils/default-options.js +++ b/themes/gatsby-theme-minimal-blog-core/utils/default-options.js @@ -4,6 +4,9 @@ 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, @@ -11,5 +14,8 @@ module.exports = themeOptions => { postsPath, pagesPath, tagsPath, + externalLinks, + navigation, + showLineNumbers, } } diff --git a/themes/gatsby-theme-minimal-blog/README.md b/themes/gatsby-theme-minimal-blog/README.md index 1007d2a88..7bd9667b9 100644 --- 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 index 5c5ba0ffd..9d898febd 100644 --- 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 index 2685de26b..9b20012d0 100644 --- 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 ( diff --git a/themes/gatsby-theme-minimal-blog/src/components/code.tsx b/themes/gatsby-theme-minimal-blog/src/components/code.tsx index cf13b9da4..016e11450 100644 --- 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 index c3b5f8a73..d3ab5968d 100644 --- 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 = () => { }} > -
- {externalLinks.map(link => ( - - {link.name} - - ))} -
+ {externalLinks && externalLinks.length > 0 && ( +
+ {externalLinks.map(link => ( + + {link.name} + + ))} +
+ )} ) diff --git a/themes/gatsby-theme-minimal-blog/src/components/homepage.tsx b/themes/gatsby-theme-minimal-blog/src/components/homepage.tsx index c423386aa..f01ec9f61 100644 --- 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 ( diff --git a/themes/gatsby-theme-minimal-blog/src/components/item-tags.tsx b/themes/gatsby-theme-minimal-blog/src/components/item-tags.tsx index 249d94a0b..cc69cba79 100644 --- 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 ( diff --git a/themes/gatsby-theme-minimal-blog/src/components/navigation.tsx b/themes/gatsby-theme-minimal-blog/src/components/navigation.tsx index e21cdfe26..972695132 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/navigation.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/navigation.tsx @@ -1,7 +1,8 @@ /** @jsx jsx */ +import React from "react" import { jsx, 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 NavigationProps = { @@ -12,16 +13,25 @@ type NavigationProps = { } const Navigation = ({ nav }: NavigationProps) => { - const { basePath } = useSiteMetadata() + const { basePath } = useMinimalBlogConfig() return ( - + + {nav && nav.length > 0 && ( + + )} + ) } diff --git a/themes/gatsby-theme-minimal-blog/src/components/tag.tsx b/themes/gatsby-theme-minimal-blog/src/components/tag.tsx index d9a5009bf..52d4644a5 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/tag.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/tag.tsx @@ -3,7 +3,7 @@ import { jsx, Styled } from "theme-ui" import { Flex } from "@theme-ui/components" import { Link } from "gatsby" import Layout from "./layout" -import useSiteMetadata from "../hooks/use-site-metadata" +import useMinimalBlogConfig from "../hooks/use-minimal-blog-config" import Listing from "./listing" import replaceSlashes from "../utils/replaceSlashes" import SEO from "./seo" @@ -27,7 +27,7 @@ type TagProps = { } const Tag = ({ posts, pageContext }: TagProps) => { - const { tagsPath, basePath } = useSiteMetadata() + const { tagsPath, basePath } = useMinimalBlogConfig() return ( diff --git a/themes/gatsby-theme-minimal-blog/src/components/tags.tsx b/themes/gatsby-theme-minimal-blog/src/components/tags.tsx index aaf0be278..b104a65b3 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/tags.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/tags.tsx @@ -4,7 +4,7 @@ import { Box, Flex } from "@theme-ui/components" import kebabCase from "lodash.kebabcase" import { Link } from "gatsby" import Layout from "./layout" -import useSiteMetadata from "../hooks/use-site-metadata" +import useMinimalBlogConfig from "../hooks/use-minimal-blog-config" import SEO from "./seo" import replaceSlashes from "../utils/replaceSlashes" @@ -16,7 +16,7 @@ type PostsProps = { } const Tags = ({ list }: PostsProps) => { - const { tagsPath, basePath } = useSiteMetadata() + const { tagsPath, basePath } = useMinimalBlogConfig() return ( diff --git a/themes/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config.tsx b/themes/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config.tsx new file mode 100644 index 000000000..0451ebb13 --- /dev/null +++ b/themes/gatsby-theme-minimal-blog/src/hooks/use-minimal-blog-config.tsx @@ -0,0 +1,47 @@ +import { graphql, useStaticQuery } from "gatsby" + +type Props = { + minimalBlogConfig: { + basePath: string + blogPath: string + postsPath: string + pagesPath: string + tagsPath: string + externalLinks: { + name: string + url: string + }[] + navigation: { + title: string + slug: string + }[] + showLineNumbers: boolean + } +} + +const useMinimalBlogConfig = () => { + const data = useStaticQuery(graphql` + query { + minimalBlogConfig { + basePath + blogPath + postsPath + pagesPath + tagsPath + externalLinks { + name + url + } + navigation { + title + slug + } + showLineNumbers + } + } + `) + + return data.minimalBlogConfig +} + +export default useMinimalBlogConfig diff --git a/themes/gatsby-theme-minimal-blog/src/hooks/use-navigation.tsx b/themes/gatsby-theme-minimal-blog/src/hooks/use-navigation.tsx deleted file mode 100644 index b322947bd..000000000 --- a/themes/gatsby-theme-minimal-blog/src/hooks/use-navigation.tsx +++ /dev/null @@ -1,31 +0,0 @@ -import { graphql, useStaticQuery } from "gatsby" - -type Props = { - site: { - siteMetadata: { - navigation: { - title: string - slug: string - }[] - } - } -} - -const useNavigation = () => { - const data = useStaticQuery(graphql` - query { - site { - siteMetadata { - navigation { - title - slug - } - } - } - } - `) - - return data.site.siteMetadata.navigation -} - -export default useNavigation diff --git a/themes/gatsby-theme-minimal-blog/src/hooks/use-site-metadata.tsx b/themes/gatsby-theme-minimal-blog/src/hooks/use-site-metadata.tsx index 78a6bde47..8499e5bad 100644 --- a/themes/gatsby-theme-minimal-blog/src/hooks/use-site-metadata.tsx +++ b/themes/gatsby-theme-minimal-blog/src/hooks/use-site-metadata.tsx @@ -11,14 +11,7 @@ type Props = { siteLanguage: string siteImage: string author: string - externalLinks: { - name: string - url: string - }[] - tagsPath: string - basePath: string - blogPath: string - showLineNumbers: boolean + [key: string]: unknown } } } @@ -36,14 +29,6 @@ const useSiteMetadata = () => { siteLanguage siteImage author - externalLinks { - name - url - } - tagsPath - basePath - blogPath - showLineNumbers } } }