Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit c9aeb2e

Browse files
LBLaurie Barthjohno
authored
Blog theme - Allow users to toggle off gatsby-plugin-theme-ui (gatsbyjs#23180)
* Initial implementation of theme-ui override, currently incompatable * Create toggle for gatsby-plugin-theme-ui * Create toggle for gatsby-plugin-theme-ui * Remove test state in starter * Fix prettier error and use destructuring for clarity * remove prettier parens now that prettierrc is updated * Update packages/gatsby-theme-blog/gatsby-node.js Co-Authored-By: John Otander <[email protected]> Co-authored-by: Laurie Barth <[email protected]> Co-authored-by: John Otander <[email protected]>
1 parent fbdb4de commit c9aeb2e

File tree

6 files changed

+100
-20
lines changed

6 files changed

+100
-20
lines changed

‎packages/gatsby-theme-blog/README.md

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -60,12 +60,13 @@ module.exports = {
6060

6161
### Theme options
6262

63-
| Key | Default value | Description |
64-
| ------------------------ | ---------------- | -------------------------------------------------------------------------------- |
65-
| `basePath` | `/` | Root url for all blog posts |
66-
| `contentPath` | `content/posts` | Location of blog posts |
67-
| `assetPath` | `content/assets` | Location of assets |
68-
| `mdxOtherwiseConfigured` | `false` | Set this flag `true` if `gatsby-plugin-mdx` is already configured for your site. |
63+
| Key | Default value | Description |
64+
| ------------------------ | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
65+
| `basePath` | `/` | Root url for all blog posts |
66+
| `contentPath` | `content/posts` | Location of blog posts |
67+
| `assetPath` | `content/assets` | Location of assets |
68+
| `mdxOtherwiseConfigured` | `false` | Set this flag `true` if `gatsby-plugin-mdx` is already configured for your site. |
69+
| `disableThemeUiStyling` | `false` | Set this flag `true` if you want to use the blog theme without `gatsby-plugin-theme-ui` styles. Note that styles within the components you can shadow still exist. |
6970

7071
#### Example configuration
7172

‎packages/gatsby-theme-blog/README.md.rej

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
diff a/packages/gatsby-theme-blog/README.md b/packages/gatsby-theme-blog/README.md (rejected hunks)
2+
@@ -63,7 +63,7 @@ module.exports = {
3+
-| Key | Default value | Description |
4+
-| ------------------------ | ---------------- | -------------------------------------------------------------------------------- |
5+
-| `basePath` | `/` | Root url for all blog posts |
6+
-| `contentPath` | `content/posts` | Location of blog posts |
7+
-| `assetPath` | `content/assets` | Location of assets |
8+
-| `mdxOtherwiseConfigured` | `false` | Set this flag `true` if `gatsby-plugin-mdx` is already configured for your site. |
9+
-| `disableThemeUiStyling` | `false` | Set this flag `true` if you want to use the blog theme without theme-ui styles. Note that styles within the components you can shadow still exist.|
10+
+| Key | Default value | Description |
11+
+| ------------------------ | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
12+
+| `basePath` | `/` | Root url for all blog posts |
13+
+| `contentPath` | `content/posts` | Location of blog posts |
14+
+| `assetPath` | `content/assets` | Location of assets |
15+
+| `mdxOtherwiseConfigured` | `false` | Set this flag `true` if `gatsby-plugin-mdx` is already configured for your site. |
16+
+| `disableThemeUiStyling` | `false` | Set this flag `true` if you want to use the blog theme without theme-ui styles. Note that styles within the components you can shadow still exist. |

‎packages/gatsby-theme-blog/gatsby-config.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,5 @@
11
module.exports = options => {
2+
let {disableThemeUiStyling = false} = options
23
return {
34
plugins: [
45
{
@@ -8,7 +9,9 @@ module.exports = options => {
89
`gatsby-plugin-react-helmet`,
910
`gatsby-plugin-twitter`,
1011
`gatsby-plugin-emotion`,
11-
`gatsby-plugin-theme-ui`,
12-
],
12+
!disableThemeUiStyling && {
13+
resolve: `gatsby-plugin-theme-ui`,
14+
}
15+
].filter(Boolean)
1316
}
1417
}

‎packages/gatsby-theme-blog/gatsby-node.js

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
exports.createSchemaCustomization = ({ actions }) => {
2+
const { createTypes } = actions
3+
4+
createTypes(`
5+
type BlogThemeConfig implements Node {
6+
disableThemeUiStyling: Boolean
7+
}
8+
`)
9+
}
10+
11+
exports.sourceNodes = (
12+
{ actions, createContentDigest },
13+
{ disableThemeUiStyling = false }
14+
) => {
15+
const { createNode } = actions
16+
17+
const blogThemeConfig = {
18+
disableThemeUiStyling,
19+
}
20+
21+
createNode({
22+
...blogThemeConfig,
23+
id: `gatsby-theme-blog-config`,
24+
parent: null,
25+
children: [],
26+
internal: {
27+
type: `BlogThemeConfig`,
28+
contentDigest: createContentDigest(blogThemeConfig),
29+
content: JSON.stringify(blogThemeConfig),
30+
description: `Options for gatsby-theme-blog`,
31+
},
32+
})
33+
}

‎packages/gatsby-theme-blog/src/components/header.js

Lines changed: 24 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import Switch from "./switch"
55
import Bio from "../components/bio"
66
import sun from "../../assets/sun.png"
77
import moon from "../../assets/moon.png"
8+
import useBlogThemeConfig from "../hooks/configOptions"
89

910
const rootPath = `${__PATH_PREFIX__}/`
1011

@@ -79,12 +80,29 @@ const uncheckedIcon = (
7980
)
8081

8182
export default ({ children, title, ...props }) => {
82-
const [colorMode, setColorMode] = useColorMode()
83-
const isDark = colorMode === `dark`
84-
const toggleColorMode = e => {
85-
setColorMode(isDark ? `light` : `dark`)
86-
}
83+
const blogThemeConfig = useBlogThemeConfig()
84+
85+
const { disableThemeUiStyling } = blogThemeConfig
8786

87+
var switchToggle
88+
if (!disableThemeUiStyling) {
89+
const [colorMode, setColorMode] = useColorMode()
90+
const isDark = colorMode === `dark`
91+
const toggleColorMode = e => {
92+
setColorMode(isDark ? `light` : `dark`)
93+
}
94+
switchToggle = (
95+
<Switch
96+
aria-label="Toggle dark mode"
97+
checkedIcon={checkedIcon}
98+
uncheckedIcon={uncheckedIcon}
99+
checked={isDark}
100+
onChange={toggleColorMode}
101+
/>
102+
)
103+
} else {
104+
switchToggle = null
105+
}
88106
return (
89107
<header>
90108
<div
@@ -105,13 +123,7 @@ export default ({ children, title, ...props }) => {
105123
>
106124
<Title {...props}>{title}</Title>
107125
{children}
108-
<Switch
109-
aria-label="Toggle dark mode"
110-
checkedIcon={checkedIcon}
111-
uncheckedIcon={uncheckedIcon}
112-
checked={isDark}
113-
onChange={toggleColorMode}
114-
/>
126+
{switchToggle}
115127
</div>
116128
{props.location.pathname === rootPath && <Bio />}
117129
</div>

‎packages/gatsby-theme-blog/src/hooks/configOptions.js

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import { useStaticQuery, graphql } from "gatsby"
2+
3+
const useBlogThemeConfig = () => {
4+
const data = useStaticQuery(graphql`
5+
query {
6+
blogThemeConfig(id: { eq: "gatsby-theme-blog-config" }) {
7+
disableThemeUiStyling
8+
}
9+
}
10+
`)
11+
12+
return data.blogThemeConfig
13+
}
14+
15+
export default useBlogThemeConfig

0 commit comments

Comments
 (0)