Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

BREAKING: Change config format on minimal-blog theme #234

Merged
merged 5 commits into from
Jan 23, 2020
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/minimal-blog/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
33 changes: 22 additions & 11 deletions examples/minimal-blog/gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
7 changes: 0 additions & 7 deletions themes/gatsby-theme-minimal-blog-core/gatsby-config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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`,
Expand Down
59 changes: 59 additions & 0 deletions themes/gatsby-theme-minimal-blog-core/gatsby-node.js
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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,
}
}
25 changes: 23 additions & 2 deletions themes/gatsby-theme-minimal-blog/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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/`
}
]
}
}
]
Expand Down
71 changes: 25 additions & 46 deletions themes/gatsby-theme-minimal-blog/gatsby-config.js
Original file line number Diff line number Diff line change
@@ -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`,
],
})
4 changes: 2 additions & 2 deletions themes/gatsby-theme-minimal-blog/src/components/blog.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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"

Expand All @@ -21,7 +21,7 @@ type PostsProps = {
}

const Blog = ({ posts }: PostsProps) => {
const { tagsPath, basePath } = useSiteMetadata()
const { tagsPath, basePath } = useMinimalBlogConfig()

return (
<Layout>
Expand Down
4 changes: 2 additions & 2 deletions themes/gatsby-theme-minimal-blog/src/components/code.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -78,7 +78,7 @@ const Code = ({
metastring = ``,
...props
}: CodeProps) => {
const { showLineNumbers } = useSiteMetadata()
const { showLineNumbers } = useMinimalBlogConfig()

const [language, { title = `` }] = getParams(blockClassName)
const shouldHighlightLine = calculateLinesToHighlight(metastring)
Expand Down
22 changes: 12 additions & 10 deletions themes/gatsby-theme-minimal-blog/src/components/header.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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) => {
Expand Down Expand Up @@ -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>
)
Expand Down
4 changes: 2 additions & 2 deletions themes/gatsby-theme-minimal-blog/src/components/homepage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand All @@ -23,7 +23,7 @@ type PostsProps = {
}

const Homepage = ({ posts }: PostsProps) => {
const { basePath, blogPath } = useSiteMetadata()
const { basePath, blogPath } = useMinimalBlogConfig()

return (
<Layout>
Expand Down
4 changes: 2 additions & 2 deletions themes/gatsby-theme-minimal-blog/src/components/item-tags.tsx
Original file line number Diff line number Diff line change
@@ -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 = {
Expand All @@ -12,7 +12,7 @@ type TagsProps = {
}

const ItemTags = ({ tags }: TagsProps) => {
const { tagsPath, basePath } = useSiteMetadata()
const { tagsPath, basePath } = useMinimalBlogConfig()

return (
<React.Fragment>
Expand Down
Loading