From 67a05ac3e1deaddfe38591739e7f50f56d49d109 Mon Sep 17 00:00:00 2001 From: Lennart Date: Mon, 27 Apr 2020 09:47:37 +0200 Subject: [PATCH] feat: Update theme-ui to v0.3.x (#371) Theme UI updated to v0.3 a while ago and I now finally had time to go through the breaking changes: https://theme-ui.com/migrating#v03 In general this update should be painless and without any breaking changes (for most people). The sites look and function identical, it was more a technical refactoring. ## Breaking Changes These changes might be breaking for some people: - `@lekoarts/gatsby-theme-specimens`: Renamed the `theme` prop on the `` component to `config` - `@lekoarts/gatsby-theme-specimens` & `@lekoarts/gatsby-theme-styleguide`: Removed `theme-ui` as a direct dependency and moved them to `peerDependencies`. This supersedes the PR #262 ## Description - Updated all `gatsby`, `react`, `react-dom` packages to latest version - Removed `@emotion/core` and `@mdx-js/react` packages as `theme-ui` now comes with it - Removed `` components as Theme UI now places that on the `body` by default - Replaced `Styled.x` with e.g. `Link`, `Heading` - Moved `@emotion/core`, `@mdx-js/mdx` & `@mdx-js/react` to `yarn resolutions` to only have one version of each dependency - Use `merge` from `theme-ui` for config merging - Clean up `` by moving stuff to the Theme UI config - Rename some internal TypeScript types - Add/Update some comments - Use optional chaining.? --- cypress/e2e/cara.ts | 4 +- cypress/e2e/emilia.ts | 4 +- cypress/e2e/emma.ts | 4 +- cypress/e2e/graphql-playground.ts | 4 +- cypress/e2e/minimal-blog.ts | 4 +- examples/cara/package.json | 6 +- examples/emilia/gatsby-config.js | 1 + examples/emilia/package.json | 6 +- examples/emma/gatsby-config.js | 1 + examples/emma/package.json | 6 +- examples/graphql-playground/gatsby-config.js | 1 + examples/graphql-playground/package.json | 6 +- .../index.mdx | 14 + examples/minimal-blog/gatsby-config.js | 2 +- examples/minimal-blog/package.json | 9 +- examples/specimens/gatsby-config.js | 1 + examples/specimens/package.json | 22 +- .../src/components/wrapPageElement.js | 7 +- .../src/gatsby-plugin-theme-ui/components.js | 2 +- examples/specimens/src/pages/index.mdx | 2 +- examples/status-dashboard/gatsby-config.js | 1 + examples/status-dashboard/package.json | 6 +- examples/styleguide/gatsby-config.js | 1 + examples/styleguide/package.json | 13 +- .../gatsby-theme-styleguide/layout.jsx | 67 +- package.json | 7 +- themes/gatsby-theme-cara/gatsby-config.js | 2 +- themes/gatsby-theme-cara/package.json | 18 +- .../src/components/contact.tsx | 2 +- .../src/components/footer.tsx | 14 +- .../src/components/layout.tsx | 16 +- .../src/elements/content.tsx | 9 +- .../src/elements/divider.tsx | 7 +- .../gatsby-theme-cara/src/elements/inner.tsx | 2 +- .../src/gatsby-plugin-theme-ui/index.js | 83 +- .../src/hooks/use-site-metadata.tsx | 4 +- themes/gatsby-theme-cara/src/index.d.ts | 16 +- themes/gatsby-theme-emilia-core/package.json | 7 +- themes/gatsby-theme-emilia/package.json | 14 +- .../src/components/card.tsx | 20 +- .../src/components/colormode-toggle.tsx | 8 +- .../src/components/footer.tsx | 34 +- .../src/components/header-project.tsx | 27 +- .../src/components/header.tsx | 26 +- .../src/components/layout.tsx | 20 +- .../src/components/project-pagination.tsx | 14 +- .../src/components/project.tsx | 37 +- .../src/components/projects.tsx | 26 +- .../src/components/seo.tsx | 4 +- .../src/gatsby-plugin-theme-ui/index.js | 55 +- .../src/hooks/use-emilia-config.tsx | 4 +- .../src/hooks/use-site-metadata.tsx | 4 +- themes/gatsby-theme-emilia/src/types.ts | 39 +- themes/gatsby-theme-emma-core/package.json | 1 - themes/gatsby-theme-emma/package.json | 8 +- .../src/components/bg-image.tsx | 4 +- .../src/components/footer.tsx | 14 +- .../src/components/header.tsx | 19 +- .../gatsby-theme-emma/src/components/hero.tsx | 4 +- .../src/components/layout.tsx | 18 +- .../src/components/navigation.tsx | 10 +- .../gatsby-theme-emma/src/components/page.tsx | 10 +- .../src/components/project-info-item.tsx | 4 +- .../src/components/project-item.tsx | 4 +- .../src/components/project.tsx | 10 +- .../src/components/projects.tsx | 4 +- .../gatsby-theme-emma/src/components/seo.tsx | 4 +- .../src/gatsby-plugin-theme-ui/index.js | 43 +- .../src/hooks/use-navigation.tsx | 4 +- .../src/hooks/use-site-metadata.tsx | 5 +- .../package.json | 12 +- .../src/components/colormode-toggle.tsx | 2 +- .../src/components/layout.tsx | 16 +- .../src/components/seo.tsx | 4 +- .../src/components/sidebar.tsx | 3 +- .../src/gatsby-plugin-theme-ui/index.js | 50 +- .../src/hooks/use-site-metadata.tsx | 5 +- .../src/templates/homepage.tsx | 3 +- .../src/templates/item.tsx | 10 +- .../package.json | 1 - themes/gatsby-theme-minimal-blog/package.json | 12 +- .../src/components/blog-list-item.tsx | 6 +- .../src/components/blog.tsx | 8 +- .../src/components/colormode-toggle.tsx | 2 +- .../src/components/footer.tsx | 10 +- .../src/components/header.tsx | 6 +- .../src/components/homepage.tsx | 8 +- .../src/components/item-tags.tsx | 6 +- .../src/components/layout.tsx | 19 +- .../src/components/navigation.tsx | 11 +- .../src/components/page.tsx | 4 +- .../src/components/post.tsx | 4 +- .../src/components/seo.tsx | 4 +- .../src/components/tag.tsx | 8 +- .../src/components/tags.tsx | 8 +- .../src/gatsby-plugin-theme-ui/index.js | 90 +- .../src/hooks/use-minimal-blog-config.tsx | 4 +- .../src/hooks/use-site-metadata.tsx | 4 +- .../gatsby-theme-minimal-blog/src/index.d.ts | 3 +- .../src/styles/code.ts | 23 +- themes/gatsby-theme-specimens/README.md | 4 +- themes/gatsby-theme-specimens/package.json | 7 +- .../src/components/heading.tsx | 14 +- .../src/components/palette.tsx | 2 +- .../package.json | 8 +- .../src/components/card.tsx | 12 +- .../src/gatsby-plugin-theme-ui/index.js | 8 +- .../src/hooks/use-circle-ci.tsx | 4 +- .../src/hooks/use-netlify.tsx | 4 +- themes/gatsby-theme-styleguide/README.md | 4 +- themes/gatsby-theme-styleguide/package.json | 6 +- .../src/typography.tsx | 2 +- yarn.lock | 3113 +++++++++-------- 113 files changed, 2315 insertions(+), 2098 deletions(-) diff --git a/cypress/e2e/cara.ts b/cypress/e2e/cara.ts index 98aec653d..5f2608fac 100644 --- a/cypress/e2e/cara.ts +++ b/cypress/e2e/cara.ts @@ -28,11 +28,11 @@ describe(`gatsby-theme-cara`, () => { cy.findByLabelText(/toggle dark mode/i) }) it(`should have functioning dark mode toggle`, () => { - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(226, 232, 240)`) .should(`have.css`, `background`, `rgb(20, 24, 33) none repeat scroll 0% 0% / auto padding-box border-box`) cy.findByLabelText(/toggle dark mode/i).click() - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(45, 55, 72)`) .should(`have.css`, `background`, `rgb(247, 250, 252) none repeat scroll 0% 0% / auto padding-box border-box`) }) diff --git a/cypress/e2e/emilia.ts b/cypress/e2e/emilia.ts index 8cbb77434..d0e1d56f5 100644 --- a/cypress/e2e/emilia.ts +++ b/cypress/e2e/emilia.ts @@ -25,11 +25,11 @@ describe(`gatsby-theme-emilia`, () => { cy.findByText(/Boggarts lavender robes/i) }) it(`should have functioning theme toggle`, () => { - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(45, 55, 72)`) .should(`have.css`, `background`, `rgb(247, 250, 252) none repeat scroll 0% 0% / auto padding-box border-box`) cy.findByLabelText(/activate dark mode/i).click() - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(203, 213, 224)`) .should(`have.css`, `background`, `rgb(26, 32, 44) none repeat scroll 0% 0% / auto padding-box border-box`) cy.findByLabelText(/activate light mode/i) diff --git a/cypress/e2e/emma.ts b/cypress/e2e/emma.ts index 354f85538..412084dea 100644 --- a/cypress/e2e/emma.ts +++ b/cypress/e2e/emma.ts @@ -21,11 +21,11 @@ describe(`gatsby-theme-emma`, () => { cy.findByLabelText(/toggle dark mode/i).click() } }) - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(45, 55, 72)`) .should(`have.css`, `background`, `rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box`) cy.findByLabelText(/toggle dark mode/i).click() - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(255, 255, 255)`) .should(`have.css`, `background`, `rgb(45, 55, 72) none repeat scroll 0% 0% / auto padding-box border-box`) }) diff --git a/cypress/e2e/graphql-playground.ts b/cypress/e2e/graphql-playground.ts index 17cf16360..4e66825e8 100644 --- a/cypress/e2e/graphql-playground.ts +++ b/cypress/e2e/graphql-playground.ts @@ -28,11 +28,11 @@ describe(`gatsby-theme-graphql-playground`, () => { cy.findByTestId(/iFrame-Get the Site Title/i) }) it(`should have functioning theme toggle`, () => { - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(45, 55, 72)`) .should(`have.css`, `background`, `rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box`) cy.findByLabelText(/activate dark mode/i).click() - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(237, 242, 247)`) .should(`have.css`, `background`, `rgb(45, 55, 72) none repeat scroll 0% 0% / auto padding-box border-box`) cy.findByLabelText(/activate light mode/i) diff --git a/cypress/e2e/minimal-blog.ts b/cypress/e2e/minimal-blog.ts index 2f001bed6..8fc887868 100644 --- a/cypress/e2e/minimal-blog.ts +++ b/cypress/e2e/minimal-blog.ts @@ -114,11 +114,11 @@ describe(`gatsby-theme-minimal-blog`, () => { cy.findByLabelText(/Activate Dark Mode/i) }) it(`should have functioning dark mode toggle`, () => { - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(45, 55, 72)`) .should(`have.css`, `background`, `rgb(255, 255, 255) none repeat scroll 0% 0% / auto padding-box border-box`) cy.findByLabelText(/Activate Dark Mode/i).click() - cy.findByTestId(`theme-root`) + cy.get(`body`) .should(`have.css`, `color`, `rgb(203, 213, 224)`) .should(`have.css`, `background`, `rgb(26, 32, 44) none repeat scroll 0% 0% / auto padding-box border-box`) }) diff --git a/examples/cara/package.json b/examples/cara/package.json index 00e50ddb7..ad982426a 100644 --- a/examples/cara/package.json +++ b/examples/cara/package.json @@ -17,13 +17,13 @@ }, "dependencies": { "@lekoarts/gatsby-theme-cara": "^1.1.8", - "gatsby": "^2.13.72", + "gatsby": "^2.20.36", "gatsby-plugin-google-analytics": "^2.1.8", "gatsby-plugin-manifest": "^2.2.6", "gatsby-plugin-netlify": "^2.1.6", "gatsby-plugin-offline": "^2.2.7", - "react": "^16.9.0", - "react-dom": "^16.9.0" + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "devDependencies": { "cross-env": "^5.2.0" diff --git a/examples/emilia/gatsby-config.js b/examples/emilia/gatsby-config.js index 48d6ed3cb..87478051a 100644 --- a/examples/emilia/gatsby-config.js +++ b/examples/emilia/gatsby-config.js @@ -9,6 +9,7 @@ module.exports = { plugins: [ { resolve: `@lekoarts/gatsby-theme-emilia`, + // See the theme's README for all available options options: {}, }, { diff --git a/examples/emilia/package.json b/examples/emilia/package.json index ee3ddb605..90a74024e 100644 --- a/examples/emilia/package.json +++ b/examples/emilia/package.json @@ -17,14 +17,14 @@ }, "dependencies": { "@lekoarts/gatsby-theme-emilia": "^1.2.8", - "gatsby": "^2.15.2", + "gatsby": "^2.20.36", "gatsby-plugin-google-analytics": "^2.1.13", "gatsby-plugin-manifest": "^2.2.13", "gatsby-plugin-netlify": "^2.1.11", "gatsby-plugin-offline": "^3.0.1", "gatsby-plugin-sitemap": "^2.2.7", - "react": "^16.9.0", - "react-dom": "^16.9.0" + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "devDependencies": { "cross-env": "^5.2.1" diff --git a/examples/emma/gatsby-config.js b/examples/emma/gatsby-config.js index b4dd476d6..047f26f65 100644 --- a/examples/emma/gatsby-config.js +++ b/examples/emma/gatsby-config.js @@ -9,6 +9,7 @@ module.exports = { plugins: [ { resolve: `@lekoarts/gatsby-theme-emma`, + // See the theme's README for all available options options: {}, }, { diff --git a/examples/emma/package.json b/examples/emma/package.json index ff8d39be1..362cfb244 100644 --- a/examples/emma/package.json +++ b/examples/emma/package.json @@ -17,14 +17,14 @@ }, "dependencies": { "@lekoarts/gatsby-theme-emma": "^1.3.8", - "gatsby": "^2.13.72", + "gatsby": "^2.20.36", "gatsby-plugin-google-analytics": "^2.1.8", "gatsby-plugin-manifest": "^2.2.6", "gatsby-plugin-netlify": "^2.1.6", "gatsby-plugin-offline": "^2.2.7", "gatsby-plugin-sitemap": "^2.2.7", - "react": "^16.9.0", - "react-dom": "^16.9.0" + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "devDependencies": { "cross-env": "^5.2.0" diff --git a/examples/graphql-playground/gatsby-config.js b/examples/graphql-playground/gatsby-config.js index 93256920c..efa5006fa 100644 --- a/examples/graphql-playground/gatsby-config.js +++ b/examples/graphql-playground/gatsby-config.js @@ -2,6 +2,7 @@ module.exports = { plugins: [ { resolve: `@lekoarts/gatsby-theme-graphql-playground`, + // See the theme's README for all available options options: {}, }, `gatsby-plugin-netlify`, diff --git a/examples/graphql-playground/package.json b/examples/graphql-playground/package.json index a90c95fb6..c05f2076d 100644 --- a/examples/graphql-playground/package.json +++ b/examples/graphql-playground/package.json @@ -17,10 +17,10 @@ }, "dependencies": { "@lekoarts/gatsby-theme-graphql-playground": "^1.0.19", - "gatsby": "^2.17.7", + "gatsby": "^2.20.36", "gatsby-plugin-netlify": "^2.1.23", - "react": "^16.11.0", - "react-dom": "^16.11.0" + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "devDependencies": { "cross-env": "^5.2.0" diff --git a/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx b/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx index 2c1cba349..68a969d6f 100644 --- a/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx +++ b/examples/minimal-blog/content/posts/fantastic-beasts-and-where-to-find-them/index.mdx @@ -49,6 +49,20 @@ var treePromise = new Promise(function(resolve) { }); ``` +Normal block without language: + +``` +import Test from "../components/test" + +const Layout = ({ children }) => ( + + {children} + +) + +export default Layout +``` + Code block with code highlighting: ```jsx:title=src/components/post.jsx {5-7,10} diff --git a/examples/minimal-blog/gatsby-config.js b/examples/minimal-blog/gatsby-config.js index 7c847d602..8eee87a08 100644 --- a/examples/minimal-blog/gatsby-config.js +++ b/examples/minimal-blog/gatsby-config.js @@ -9,6 +9,7 @@ module.exports = { plugins: [ { resolve: `@lekoarts/gatsby-theme-minimal-blog`, + // See the theme's README for all available options options: { navigation: [ { @@ -65,6 +66,5 @@ module.exports = { }, `gatsby-plugin-offline`, `gatsby-plugin-netlify`, - // `gatsby-plugin-webpack-bundle-analyser-v2`, ], } diff --git a/examples/minimal-blog/package.json b/examples/minimal-blog/package.json index ecee14b15..9ff100b77 100644 --- a/examples/minimal-blog/package.json +++ b/examples/minimal-blog/package.json @@ -17,17 +17,16 @@ }, "dependencies": { "@lekoarts/gatsby-theme-minimal-blog": "^2.2.11", - "gatsby": "^2.13.3", + "gatsby": "^2.20.36", "gatsby-plugin-google-analytics": "^2.1.4", "gatsby-plugin-manifest": "^2.2.3", "gatsby-plugin-netlify": "^2.1.3", "gatsby-plugin-offline": "^2.2.4", "gatsby-plugin-sitemap": "^2.2.19", - "react": "^16.9.0", - "react-dom": "^16.9.0" + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "devDependencies": { - "cross-env": "^5.2.0", - "gatsby-plugin-webpack-bundle-analyser-v2": "^1.1.8" + "cross-env": "^5.2.0" } } diff --git a/examples/specimens/gatsby-config.js b/examples/specimens/gatsby-config.js index e07d4f3e1..d80a60d51 100644 --- a/examples/specimens/gatsby-config.js +++ b/examples/specimens/gatsby-config.js @@ -11,6 +11,7 @@ module.exports = { plugins: [ { resolve: `@lekoarts/gatsby-theme-specimens`, + // See the theme's README for all available options options: { CMYK: true, }, diff --git a/examples/specimens/package.json b/examples/specimens/package.json index 0fdddf702..fbde0ea7c 100644 --- a/examples/specimens/package.json +++ b/examples/specimens/package.json @@ -16,29 +16,27 @@ "clean": "gatsby clean" }, "dependencies": { - "@emotion/core": "^10.0.16", "@lekoarts/gatsby-theme-specimens": "^2.1.8", - "@mdx-js/mdx": "^1.3.1", - "@mdx-js/react": "^1.3.1", - "@theme-ui/presets": "^0.2.44", - "gatsby": "^2.13.72", + "@mdx-js/mdx": "^1.5.9", + "@theme-ui/presets": "^0.3.0", + "gatsby": "^2.20.36", "gatsby-plugin-catch-links": "^2.1.4", "gatsby-plugin-emotion": "^4.1.3", "gatsby-plugin-manifest": "^2.2.6", - "gatsby-plugin-mdx": "^1.0.25", + "gatsby-plugin-mdx": "^1.1.11", "gatsby-plugin-netlify": "^2.1.6", "gatsby-plugin-offline": "^2.2.7", "gatsby-plugin-react-helmet": "^3.1.4", - "gatsby-plugin-theme-ui": "^0.2.34", + "gatsby-plugin-theme-ui": "^0.3.0", "gatsby-source-filesystem": "^2.1.10", "mdx-utils": "^0.2.0", - "prism-react-renderer": "^0.1.7", - "react": "^16.9.0", - "react-dom": "^16.9.0", + "prism-react-renderer": "^1.1.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", "react-helmet": "^5.2.1", - "react-live": "^2.2.0", + "react-live": "^2.2.2", "remark-slug": "^5.1.2", - "theme-ui": "^0.2.35" + "theme-ui": "^0.3.1" }, "devDependencies": { "cross-env": "^5.2.0" diff --git a/examples/specimens/src/components/wrapPageElement.js b/examples/specimens/src/components/wrapPageElement.js index ee379351e..4a120f8e0 100644 --- a/examples/specimens/src/components/wrapPageElement.js +++ b/examples/specimens/src/components/wrapPageElement.js @@ -1,9 +1,4 @@ import React from "react" -import { Styled } from "theme-ui" import Layout from "./layout" -export const wrapPageElement = ({ element }) => ( - - {element} - -) +export const wrapPageElement = ({ element }) => {element} diff --git a/examples/specimens/src/gatsby-plugin-theme-ui/components.js b/examples/specimens/src/gatsby-plugin-theme-ui/components.js index 4789569e3..5a14a10a3 100644 --- a/examples/specimens/src/gatsby-plugin-theme-ui/components.js +++ b/examples/specimens/src/gatsby-plugin-theme-ui/components.js @@ -62,7 +62,7 @@ const components = { FontFamily: ({ fonts, previewText }) => , FontSize: ({ fontSizes }) => , FontWeight: ({ fontWeights, previewText }) => , - Heading: ({ styles, theme, previewText }) => , + Heading: ({ styles, config, previewText }) => , Palette: ({ colors, mode, single, minimal, prefix }) => ( ), diff --git a/examples/specimens/src/pages/index.mdx b/examples/specimens/src/pages/index.mdx index cec60b64a..803a43bb1 100644 --- a/examples/specimens/src/pages/index.mdx +++ b/examples/specimens/src/pages/index.mdx @@ -355,7 +355,7 @@ render( input: theme.styles, allowed: [`h1`, `h2`], })} - theme={theme} + config={theme} /> ); ``` diff --git a/examples/status-dashboard/gatsby-config.js b/examples/status-dashboard/gatsby-config.js index 07fc11d17..61f4106de 100644 --- a/examples/status-dashboard/gatsby-config.js +++ b/examples/status-dashboard/gatsby-config.js @@ -9,6 +9,7 @@ module.exports = { siteDescription: process.env.SITE_DESCRIPTION || `Showing the statuses of my Netlify deploys & CircleCI tests.`, }, plugins: [ + // See the theme's README for all available components `@lekoarts/gatsby-theme-status-dashboard`, `gatsby-plugin-react-helmet`, `gatsby-plugin-emotion`, diff --git a/examples/status-dashboard/package.json b/examples/status-dashboard/package.json index 96727d636..d45ddab07 100644 --- a/examples/status-dashboard/package.json +++ b/examples/status-dashboard/package.json @@ -18,14 +18,14 @@ "dependencies": { "@emotion/core": "^10.0.16", "@lekoarts/gatsby-theme-status-dashboard": "^1.0.21", - "gatsby": "^2.13.72", + "gatsby": "^2.20.36", "gatsby-plugin-emotion": "^4.1.3", "gatsby-plugin-manifest": "^2.2.6", "gatsby-plugin-netlify": "^2.1.6", "gatsby-plugin-offline": "^2.2.7", "gatsby-plugin-react-helmet": "^3.1.4", - "react": "^16.9.0", - "react-dom": "^16.9.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", "react-helmet": "^5.2.1" }, "devDependencies": { diff --git a/examples/styleguide/gatsby-config.js b/examples/styleguide/gatsby-config.js index a72c711d4..3d3a995e3 100644 --- a/examples/styleguide/gatsby-config.js +++ b/examples/styleguide/gatsby-config.js @@ -13,6 +13,7 @@ module.exports = { `gatsby-plugin-theme-ui`, { resolve: `@lekoarts/gatsby-theme-styleguide`, + // See the theme's README for all available options options: { basePath: `/`, }, diff --git a/examples/styleguide/package.json b/examples/styleguide/package.json index 6b63a4ecf..a8e064d55 100644 --- a/examples/styleguide/package.json +++ b/examples/styleguide/package.json @@ -16,16 +16,15 @@ "clean": "gatsby clean" }, "dependencies": { - "@emotion/core": "^10.0.22", "@lekoarts/gatsby-theme-styleguide": "^1.0.15", - "@mdx-js/react": "^1.5.1", - "gatsby": "^2.18.7", + "gatsby": "^2.20.36", "gatsby-plugin-netlify": "^2.1.27", "gatsby-plugin-react-helmet": "^3.1.16", - "gatsby-plugin-theme-ui": "^0.2.43", - "react": "^16.12.0", - "react-dom": "^16.12.0", - "react-helmet": "^5.2.1" + "gatsby-plugin-theme-ui": "^0.3.0", + "react": "^16.13.1", + "react-dom": "^16.13.1", + "react-helmet": "^5.2.1", + "theme-ui": "^0.3.1" }, "devDependencies": { "cross-env": "^6.0.3" diff --git a/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx b/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx index c7ab8d58b..2ace3f23c 100644 --- a/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx +++ b/examples/styleguide/src/@lekoarts/gatsby-theme-styleguide/layout.jsx @@ -1,32 +1,35 @@ -/** @jsx jsx */ -import { Styled, jsx } from "theme-ui" -import { css, Global } from "@emotion/core" -import SEO from "../../components/seo" - -export default ({ children }) => ( - - - -
{children}
- -) +/** @jsx jsx */ +import React from "react" +import { jsx } from "theme-ui" +import { css, Global } from "@emotion/core" +import SEO from "../../components/seo" + +const Layout = ({ children }) => ( + + + +
{children}
+ +) + +export default Layout diff --git a/package.json b/package.json index 35c30be91..3043efba5 100644 --- a/package.json +++ b/package.json @@ -46,7 +46,7 @@ "@types/styled-system": "^5.1.9", "@types/testing-library__cypress": "^5.0.5", "@types/testing-library__jest-dom": "^5.0.3", - "@types/theme-ui": "^0.2.6", + "@types/theme-ui": "^0.3.1", "@typescript-eslint/eslint-plugin": "^2.28.0", "@typescript-eslint/parser": "^2.28.0", "concurrently": "^5.1.0", @@ -73,6 +73,9 @@ "typescript": "^3.8.3" }, "resolutions": { - "cypress": "^4.4.0" + "cypress": "^4.4.0", + "@emotion/core": "^10.0.27", + "@mdx-js/mdx": "^1.5.9", + "@mdx-js/react": "^1.5.9" } } diff --git a/themes/gatsby-theme-cara/gatsby-config.js b/themes/gatsby-theme-cara/gatsby-config.js index bab50f6e3..9d4db56f5 100644 --- a/themes/gatsby-theme-cara/gatsby-config.js +++ b/themes/gatsby-theme-cara/gatsby-config.js @@ -26,5 +26,5 @@ module.exports = ({ basePath = `/`, mdx = true }) => ({ `gatsby-plugin-typescript`, `gatsby-plugin-emotion`, `gatsby-plugin-theme-ui`, - ], + ].filter(Boolean), }) diff --git a/themes/gatsby-theme-cara/package.json b/themes/gatsby-theme-cara/package.json index 92f887b8c..2b69f0cc5 100644 --- a/themes/gatsby-theme-cara/package.json +++ b/themes/gatsby-theme-cara/package.json @@ -15,25 +15,23 @@ "clean": "gatsby clean" }, "peerDependencies": { - "gatsby": "^2.13.3", - "react": "^16.9.0", - "react-dom": "^16.9.0" + "gatsby": "^2.20.36", + "react": "^16.13.1", + "react-dom": "^16.13.1" }, "dependencies": { - "@emotion/core": "^10.0.28", "@emotion/styled": "^10.0.27", - "@mdx-js/mdx": "^1.5.8", - "@mdx-js/react": "^1.5.8", - "@theme-ui/presets": "^0.2.44", + "@mdx-js/mdx": "^1.5.9", + "@theme-ui/presets": "^0.3.0", "gatsby-plugin-emotion": "^4.2.2", - "gatsby-plugin-mdx": "^1.1.9", + "gatsby-plugin-mdx": "^1.1.11", "gatsby-plugin-react-helmet": "^3.2.4", - "gatsby-plugin-theme-ui": "^0.2.53", + "gatsby-plugin-theme-ui": "^0.3.0", "gatsby-plugin-typescript": "^2.3.3", "gatsby-source-filesystem": "^2.2.4", "react-helmet": "^6.0.0", "react-spring": "^8.0.27", - "theme-ui": "^0.2.52" + "theme-ui": "^0.3.1" }, "keywords": [ "gatsby", diff --git a/themes/gatsby-theme-cara/src/components/contact.tsx b/themes/gatsby-theme-cara/src/components/contact.tsx index fcab77c5c..2fe4f9fac 100644 --- a/themes/gatsby-theme-cara/src/components/contact.tsx +++ b/themes/gatsby-theme-cara/src/components/contact.tsx @@ -6,9 +6,9 @@ import Inner from "../elements/inner" import Content from "../elements/content" import SVG from "./svg" import { UpDown, UpDownWide, waveAnimation } from "../styles/animations" +import Footer from "./footer" // @ts-ignore import ContactMDX from "../sections/contact" -import Footer from "./footer" const InnerWave = styled.div` path { diff --git a/themes/gatsby-theme-cara/src/components/footer.tsx b/themes/gatsby-theme-cara/src/components/footer.tsx index c74df572f..7994e138d 100644 --- a/themes/gatsby-theme-cara/src/components/footer.tsx +++ b/themes/gatsby-theme-cara/src/components/footer.tsx @@ -1,5 +1,5 @@ /** @jsx jsx */ -import { Footer as ThemeFooter, Styled, Flex, useColorMode, jsx } from "theme-ui" +import { Box, Flex, Link, useColorMode, jsx } from "theme-ui" const Footer = () => { const [colorMode, setColorMode] = useColorMode() @@ -9,7 +9,7 @@ const Footer = () => { } return ( - + - + ) export default ColorModeToggle diff --git a/themes/gatsby-theme-emilia/src/components/footer.tsx b/themes/gatsby-theme-emilia/src/components/footer.tsx index 28f291997..a2251d4d3 100644 --- a/themes/gatsby-theme-emilia/src/components/footer.tsx +++ b/themes/gatsby-theme-emilia/src/components/footer.tsx @@ -1,9 +1,10 @@ /** @jsx jsx */ -import { Footer as ThemeFooter, jsx, Styled, Container, useColorMode } from "theme-ui" -import AboutMeMDX from "../texts/about-me.mdx" +import { Box, jsx, Container, Flex, Link, useColorMode } from "theme-ui" import useEmiliaConfig from "../hooks/use-emilia-config" import SocialMediaList from "./social-media-list" import ColorModeToggle from "./colormode-toggle" +// @ts-ignore +import AboutMeMDX from "../texts/about-me" const Footer = () => { const { showThemeAuthor } = useEmiliaConfig() @@ -15,20 +16,29 @@ const Footer = () => { } return ( -
-
+
-
{
Copyright © {new Date().getFullYear()}. All rights reserved.
-
+ {showThemeAuthor && ( @@ -57,21 +67,21 @@ const Footer = () => { > LekoArts Logo {` `} - Theme - +
by
{` `} - + LekoArts - + )} - + ) } diff --git a/themes/gatsby-theme-emilia/src/components/header-project.tsx b/themes/gatsby-theme-emilia/src/components/header-project.tsx index 653c11f54..ac6292803 100644 --- a/themes/gatsby-theme-emilia/src/components/header-project.tsx +++ b/themes/gatsby-theme-emilia/src/components/header-project.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ import React from "react" -import { Header as ThemeHeader, jsx, Styled, Container } from "theme-ui" +import { Flex, jsx, Container, Heading, Styled } from "theme-ui" import { animated, useSpring, config } from "react-spring" import { useStaticQuery, graphql, Link } from "gatsby" import { MDXRenderer } from "gatsby-plugin-mdx" @@ -8,17 +8,24 @@ import Img from "gatsby-image" import HeaderBackground from "./header-background" import LeftArrow from "../assets/left-arrow" import useEmiliaConfig from "../hooks/use-emilia-config" +import { ChildImageSharpFixed } from "../types" -type Props = { +type HeaderProjectProps = { title: string areas: string[] description?: string date: string } -const HeaderProject = ({ title, areas, description, date }: Props) => { +type AvatarStaticQuery = { + file: { + childImageSharp: ChildImageSharpFixed + } +} + +const HeaderProject = ({ title, areas, description, date }: HeaderProjectProps) => { const { name } = useEmiliaConfig() - const avatar = useStaticQuery(graphql` + const avatar = useStaticQuery(graphql` query { file(name: { eq: "avatar" }) { childImageSharp { @@ -43,7 +50,7 @@ const HeaderProject = ({ title, areas, description, date }: Props) => { const infoProps = useSpring({ config: config.slow, delay: 500, from: { opacity: 0 }, to: { opacity: 1 } }) return ( - + @@ -73,16 +80,16 @@ const HeaderProject = ({ title, areas, description, date }: Props) => { mx: 2, }} > - {avatar && avatar.file && avatar.file.childImageSharp && ( - - )} + {avatar?.file?.childImageSharp?.fixed && } {name}
- {title} + + {title} + {date} @@ -102,7 +109,7 @@ const HeaderProject = ({ title, areas, description, date }: Props) => {
- + ) } diff --git a/themes/gatsby-theme-emilia/src/components/header.tsx b/themes/gatsby-theme-emilia/src/components/header.tsx index 9e9ae8fa1..0c69d0bfd 100644 --- a/themes/gatsby-theme-emilia/src/components/header.tsx +++ b/themes/gatsby-theme-emilia/src/components/header.tsx @@ -1,5 +1,5 @@ /** @jsx jsx */ -import { Header as ThemeHeader, jsx, Styled } from "theme-ui" +import { jsx, Heading, Flex } from "theme-ui" import { animated, useSpring, config } from "react-spring" import { useStaticQuery, graphql } from "gatsby" import Img from "gatsby-image" @@ -7,10 +7,17 @@ import useEmiliaConfig from "../hooks/use-emilia-config" import HeaderBackground from "./header-background" import Location from "../assets/location" import SocialMediaList from "./social-media-list" +import { ChildImageSharpFixed } from "../types" + +type AvatarStaticQuery = { + file: { + childImageSharp: ChildImageSharpFixed + } +} const Header = () => { const { name, location, assetsPath } = useEmiliaConfig() - const avatar = useStaticQuery(graphql` + const avatar = useStaticQuery(graphql` query { file(name: { eq: "avatar" }) { childImageSharp { @@ -37,7 +44,7 @@ const Header = () => { const fadeLongProps = useSpring({ config: config.slow, delay: 600, from: { opacity: 0 }, to: { opacity: 1 } }) return ( - +
@@ -55,7 +62,7 @@ const Header = () => { }, }} > - {avatar && avatar.file && avatar.file.childImageSharp ? ( + {avatar?.file?.childImageSharp?.fixed ? ( ) : (
{
- {name} + + {name} + -
{ ".secondary": { color: `iconSecondary` }, mr: 2, }, - display: `flex`, justifyContent: `center`, alignItems: `center`, color: `text`, }} > {location} -
+
@@ -104,7 +112,7 @@ const Header = () => {
- + ) } diff --git a/themes/gatsby-theme-emilia/src/components/layout.tsx b/themes/gatsby-theme-emilia/src/components/layout.tsx index 40f798d8e..44e4375c1 100644 --- a/themes/gatsby-theme-emilia/src/components/layout.tsx +++ b/themes/gatsby-theme-emilia/src/components/layout.tsx @@ -1,33 +1,23 @@ import React from "react" import { Global } from "@emotion/core" -import { css, Styled } from "theme-ui" import Footer from "./footer" import SEO from "./seo" type LayoutProps = { children: React.ReactNode } const Layout = ({ children }: LayoutProps) => ( - + ({ "*": { boxSizing: `inherit`, }, html: { fontSize: `18px`, }, - body: { - margin: 0, - padding: 0, - boxSizing: `border-box`, - textRendering: `optimizeLegibility`, - }, "::selection": { - backgroundColor: `primary`, - color: `background`, - }, - a: { - transition: `all 0.3s ease-in-out`, + background: `black`, + color: `white`, }, "@media(max-width: 600px)": { html: { @@ -39,7 +29,7 @@ const Layout = ({ children }: LayoutProps) => ( {children}
- + ) export default Layout diff --git a/themes/gatsby-theme-emilia/src/components/project-pagination.tsx b/themes/gatsby-theme-emilia/src/components/project-pagination.tsx index d3b246c5a..fe119033d 100644 --- a/themes/gatsby-theme-emilia/src/components/project-pagination.tsx +++ b/themes/gatsby-theme-emilia/src/components/project-pagination.tsx @@ -1,16 +1,18 @@ /** @jsx jsx */ import { jsx } from "theme-ui" import Card from "./card" -import { ChildImageSharp } from "../types" +import { ChildImageSharpFluid } from "../types" -type Props = { +type ProjectPaginationProps = { prev: { slug: string parent: { fileAbsolutePath: string } title: string - cover: ChildImageSharp + cover: { + childImageSharp: ChildImageSharpFluid + } } next: { slug: string @@ -18,11 +20,13 @@ type Props = { fileAbsolutePath: string } title: string - cover: ChildImageSharp + cover: { + childImageSharp: ChildImageSharpFluid + } } } -const ProjectPagination = ({ prev, next }: Props) => ( +const ProjectPagination = ({ prev, next }: ProjectPaginationProps) => (

{ +const Project = ({ data: { project, images }, pageContext: { prev, next } }: ProjectProps) => { const imageFade = useSpring({ config: config.slow, delay: 800, from: { opacity: 0 }, to: { opacity: 1 } }) return ( @@ -66,7 +65,7 @@ const Project = ({ data: { project, images }, pageContext: { prev, next } }: Pro title={project.title} description={project.excerpt} pathname={project.slug} - image={project.cover.childImageSharp.resize!.src} + image={project.cover.childImageSharp.resize.src} /> diff --git a/themes/gatsby-theme-emilia/src/components/projects.tsx b/themes/gatsby-theme-emilia/src/components/projects.tsx index 5af3a5691..8bcea6512 100644 --- a/themes/gatsby-theme-emilia/src/components/projects.tsx +++ b/themes/gatsby-theme-emilia/src/components/projects.tsx @@ -1,9 +1,9 @@ /** @jsx jsx */ /* eslint no-shadow: 0 */ -import { jsx, Container, Styled, Main } from "theme-ui" +import { jsx, Container, Styled, Box } from "theme-ui" import { useSpring, animated, config } from "react-spring" import { graphql, useStaticQuery } from "gatsby" -import { ChildImageSharp } from "../types" +import { ChildImageSharpFluid } from "../types" import Layout from "./layout" import Header from "./header" import Card from "./card" @@ -12,12 +12,26 @@ type Props = { projects: { slug: string title: string - cover: ChildImageSharp + cover: { + childImageSharp: ChildImageSharpFluid + } }[] } +type ProjecsStaticQuery = { + allProject: { + nodes: { + parent: { + fields: { + colorThief: string[] + } + } + }[] + } +} + const Projects = ({ projects }: Props) => { - const data = useStaticQuery(graphql` + const data = useStaticQuery(graphql` query { allProject(sort: { fields: date, order: DESC }) { nodes { @@ -80,7 +94,7 @@ const Projects = ({ projects }: Props) => { return (
-
+ { })} -
+ ) } diff --git a/themes/gatsby-theme-emilia/src/components/seo.tsx b/themes/gatsby-theme-emilia/src/components/seo.tsx index 46b46ca9b..df6e69d54 100644 --- a/themes/gatsby-theme-emilia/src/components/seo.tsx +++ b/themes/gatsby-theme-emilia/src/components/seo.tsx @@ -11,7 +11,7 @@ const defaultProps = { children: null, } -type Props = { +type SEOProps = { title?: string description?: string pathname?: string @@ -19,7 +19,7 @@ type Props = { children?: React.ReactNode } -const SEO = ({ title, description, pathname, image, children }: Props) => { +const SEO = ({ title, description, pathname, image, children }: SEOProps) => { const site = useSiteMetadata() const { diff --git a/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js index ba84a28df..a812e40a4 100644 --- a/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js +++ b/themes/gatsby-theme-emilia/src/gatsby-plugin-theme-ui/index.js @@ -1,11 +1,10 @@ +import { merge } from "theme-ui" import { tailwind } from "@theme-ui/presets" -export default { - ...tailwind, - initialColorMode: `light`, +export default merge(tailwind, { + initialColorModeName: `light`, useCustomProperties: true, colors: { - ...tailwind.colors, text: tailwind.colors.gray[8], primary: tailwind.colors.blue[6], background: tailwind.colors.gray[1], @@ -31,38 +30,46 @@ export default { }, }, }, - styles: { - ...tailwind.styles, - root: { - ...tailwind.styles.root, - color: `text`, - backgroundColor: `background`, - }, - Footer: { + layout: { + footer: { display: `block`, color: `text`, pt: 6, pb: 4, }, - a: { - ...tailwind.styles.a, - color: `primary`, + main: { + position: `relative`, }, - Main: { - ...tailwind.styles.Main, + header: { position: `relative`, + overflow: `hidden`, + justifyContent: `center`, }, - Header: { - ...tailwind.styles.Header, + projectHead: { position: `relative`, overflow: `hidden`, justifyContent: `center`, }, - Container: { + container: { px: [3, 4], py: [2, 3], maxWidth: `1600px`, }, + }, + styles: { + root: { + color: `text`, + backgroundColor: `background`, + margin: 0, + padding: 0, + boxSizing: `border-box`, + textRendering: `optimizeLegibility`, + }, + a: { + color: `primary`, + textDecoration: `none`, + transition: `all 0.3s ease-in-out`, + }, p: { fontSize: 1, letterSpacing: `-0.003em`, @@ -71,38 +78,32 @@ export default { "--x-height-multiplier": 0.35, }, h1: { - ...tailwind.styles.h1, fontSize: [4, 5], mt: 2, color: `heading`, }, h2: { - ...tailwind.styles.h2, fontSize: [3, 4], mt: 2, color: `heading`, }, h3: { - ...tailwind.styles.h3, fontSize: [2, 3], mt: 3, color: `heading`, }, h4: { - ...tailwind.styles.h4, fontSize: [1, 2], color: `heading`, }, h5: { - ...tailwind.styles.h5, fontSize: 1, color: `heading`, }, h6: { - ...tailwind.styles.h6, fontSize: 1, mb: 2, color: `heading`, }, }, -} +}) diff --git a/themes/gatsby-theme-emilia/src/hooks/use-emilia-config.tsx b/themes/gatsby-theme-emilia/src/hooks/use-emilia-config.tsx index d4053d965..e14449f56 100644 --- a/themes/gatsby-theme-emilia/src/hooks/use-emilia-config.tsx +++ b/themes/gatsby-theme-emilia/src/hooks/use-emilia-config.tsx @@ -1,6 +1,6 @@ import { graphql, useStaticQuery } from "gatsby" -type Props = { +type UseEmiliaConfigProps = { emiliaConfig: { name: string location: string @@ -14,7 +14,7 @@ type Props = { } const useEmiliaConfig = () => { - const data = useStaticQuery(graphql` + const data = useStaticQuery(graphql` query { emiliaConfig { name diff --git a/themes/gatsby-theme-emilia/src/hooks/use-site-metadata.tsx b/themes/gatsby-theme-emilia/src/hooks/use-site-metadata.tsx index 8499e5bad..16b5d2f34 100644 --- a/themes/gatsby-theme-emilia/src/hooks/use-site-metadata.tsx +++ b/themes/gatsby-theme-emilia/src/hooks/use-site-metadata.tsx @@ -1,6 +1,6 @@ import { graphql, useStaticQuery } from "gatsby" -type Props = { +type UseSiteMetadataProps = { site: { siteMetadata: { siteTitle: string @@ -17,7 +17,7 @@ type Props = { } const useSiteMetadata = () => { - const data = useStaticQuery(graphql` + const data = useStaticQuery(graphql` query { site { siteMetadata { diff --git a/themes/gatsby-theme-emilia/src/types.ts b/themes/gatsby-theme-emilia/src/types.ts index aef220169..565269948 100644 --- a/themes/gatsby-theme-emilia/src/types.ts +++ b/themes/gatsby-theme-emilia/src/types.ts @@ -1,18 +1,25 @@ -export type ChildImageSharp = { - childImageSharp: { - fluid: { - aspectRatio: number - src: string - srcSet: string - sizes: string - base64: string - tracedSVG: string - srcWebp: string - srcSetWebp: string - presentationHeight: number - } - resize?: { - src: string - } +export type ChildImageSharpFixed = { + fixed: { + width: number + height: number + src: string + srcSet: string + base64: string + srcWebp: string + srcSetWebp: string + } +} + +export type ChildImageSharpFluid = { + fluid: { + aspectRatio: number + src: string + srcSet: string + sizes: string + base64: string + tracedSVG: string + srcWebp: string + srcSetWebp: string + presentationHeight: number } } diff --git a/themes/gatsby-theme-emma-core/package.json b/themes/gatsby-theme-emma-core/package.json index 0cbe2a614..ecab48799 100644 --- a/themes/gatsby-theme-emma-core/package.json +++ b/themes/gatsby-theme-emma-core/package.json @@ -15,7 +15,6 @@ "clean": "gatsby clean" }, "peerDependencies": { - "@mdx-js/react": "^1.3.1", "gatsby": "^2.13.3", "react": "^16.9.0", "react-dom": "^16.9.0" diff --git a/themes/gatsby-theme-emma/package.json b/themes/gatsby-theme-emma/package.json index 7848cc452..d2d6761ce 100644 --- a/themes/gatsby-theme-emma/package.json +++ b/themes/gatsby-theme-emma/package.json @@ -20,21 +20,19 @@ "react-dom": "^16.9.0" }, "dependencies": { - "@emotion/core": "^10.0.28", "@lekoarts/gatsby-theme-emma-core": "^1.2.6", "@mdx-js/mdx": "^1.5.8", - "@mdx-js/react": "^1.5.8", - "@theme-ui/presets": "^0.2.44", + "@theme-ui/presets": "^0.3.0", "gatsby-image": "^2.3.4", "gatsby-plugin-catch-links": "^2.2.3", "gatsby-plugin-emotion": "^4.2.2", "gatsby-plugin-react-helmet": "^3.2.4", - "gatsby-plugin-theme-ui": "^0.2.53", + "gatsby-plugin-theme-ui": "^0.3.0", "gatsby-plugin-typescript": "^2.3.3", "polished": "^3.5.2", "react-helmet": "^6.0.0", "react-spring": "^8.0.27", - "theme-ui": "^0.2.52" + "theme-ui": "^0.3.1" }, "keywords": [ "gatsby", diff --git a/themes/gatsby-theme-emma/src/components/bg-image.tsx b/themes/gatsby-theme-emma/src/components/bg-image.tsx index f7a7c73c8..adcbaebb8 100644 --- a/themes/gatsby-theme-emma/src/components/bg-image.tsx +++ b/themes/gatsby-theme-emma/src/components/bg-image.tsx @@ -3,9 +3,9 @@ import React from "react" import { jsx, useColorMode, useThemeUI } from "theme-ui" import { rgba } from "polished" -type Props = { children: React.ReactNode; color?: string; slim: boolean } +type BGImageProps = { children: React.ReactNode; color?: string; slim: boolean } -const BGImage = ({ children, color, slim }: Props) => { +const BGImage = ({ children, color, slim }: BGImageProps) => { const [colorMode] = useColorMode() const { theme } = useThemeUI() diff --git a/themes/gatsby-theme-emma/src/components/footer.tsx b/themes/gatsby-theme-emma/src/components/footer.tsx index 31274a67e..f52e73f1d 100644 --- a/themes/gatsby-theme-emma/src/components/footer.tsx +++ b/themes/gatsby-theme-emma/src/components/footer.tsx @@ -1,8 +1,8 @@ /** @jsx jsx */ -import { Footer as ThemeFooter, Styled, Flex, jsx } from "theme-ui" +import { Box, Link, Flex, jsx } from "theme-ui" const Footer = () => ( - + Copyright © {new Date().getFullYear()}. All rights reserved.
( > LekoArts Logo {` `} - Theme - +
by
{` `} - + LekoArts - + - + ) export default Footer diff --git a/themes/gatsby-theme-emma/src/components/header.tsx b/themes/gatsby-theme-emma/src/components/header.tsx index d43c3db99..5565caa23 100644 --- a/themes/gatsby-theme-emma/src/components/header.tsx +++ b/themes/gatsby-theme-emma/src/components/header.tsx @@ -1,10 +1,10 @@ /** @jsx jsx */ -import { Header as ThemeHeader, jsx, useColorMode, Styled } from "theme-ui" +import { Flex, jsx, useColorMode, Link as TLink } from "theme-ui" import { Link } from "gatsby" import Navigation from "./navigation" import SocialLinks from "./social-links" -type MetaType = { +type HeaderProps = { meta: { [key: string]: string } @@ -14,7 +14,7 @@ type MetaType = { }[] } -const Header = ({ meta, nav }: MetaType) => { +const Header = ({ meta, nav }: HeaderProps) => { const [colorMode, setColorMode] = useColorMode() const isDark = colorMode === `dark` const toggleColorMode = (e: any) => { @@ -24,27 +24,26 @@ const Header = ({ meta, nav }: MetaType) => { const navEmpty = nav.length === 0 return ( - + {!navEmpty && } -
- {meta.siteTitle} - -
+ +
{ {isDark ? `Light` : `Dark`}
- + ) } diff --git a/themes/gatsby-theme-emma/src/components/hero.tsx b/themes/gatsby-theme-emma/src/components/hero.tsx index 1300b6555..83354ac6b 100644 --- a/themes/gatsby-theme-emma/src/components/hero.tsx +++ b/themes/gatsby-theme-emma/src/components/hero.tsx @@ -8,7 +8,7 @@ const defaultProps = { slim: false, } -type Props = { +type HeroProps = { children: React.ReactNode color?: string slim?: boolean @@ -24,7 +24,7 @@ type Props = { } } & typeof defaultProps -const Hero = ({ children, color, image, slim }: Props) => ( +const Hero = ({ children, color, image, slim }: HeroProps) => (
{ const nav = useNavigation() return ( - + ({ "*": { boxSizing: `inherit`, }, - body: { - margin: 0, - padding: 0, - boxSizing: `border-box`, - textRendering: `optimizeLegibility`, - }, "::selection": { backgroundColor: `primary`, color: `background`, @@ -37,9 +31,11 @@ const Layout = ({ children, className }: LayoutProps) => { />
-
{children}
+ + {children} +
- + ) } diff --git a/themes/gatsby-theme-emma/src/components/navigation.tsx b/themes/gatsby-theme-emma/src/components/navigation.tsx index c8c95e91c..fc21bfc9d 100644 --- a/themes/gatsby-theme-emma/src/components/navigation.tsx +++ b/themes/gatsby-theme-emma/src/components/navigation.tsx @@ -1,15 +1,15 @@ /** @jsx jsx */ -import { jsx, Styled, Flex } from "theme-ui" +import { jsx, Link as TLink, Flex } from "theme-ui" import { Link } from "gatsby" -type Props = { +type NavigationProps = { nav: { title: string slug: string }[] } -const Navigation = ({ nav }: Props) => ( +const Navigation = ({ nav }: NavigationProps) => ( ( aria-label="Primary Navigation" > {nav.map((n) => ( - {n.title} - + ))} ) diff --git a/themes/gatsby-theme-emma/src/components/page.tsx b/themes/gatsby-theme-emma/src/components/page.tsx index b2ba0a669..6b5d3a9c6 100644 --- a/themes/gatsby-theme-emma/src/components/page.tsx +++ b/themes/gatsby-theme-emma/src/components/page.tsx @@ -1,13 +1,13 @@ /** @jsx jsx */ import { animated, useSpring, config } from "react-spring" -import { Container, Styled, jsx, Flex } from "theme-ui" +import { Container, jsx, Flex, Heading } from "theme-ui" import { MDXRenderer } from "gatsby-plugin-mdx" import Layout from "./layout" import SEO from "./seo" import { ChildImageSharp } from "../types" import Hero from "./hero" -type Props = { +type PageProps = { data: { page: { title: string @@ -19,7 +19,7 @@ type Props = { } } -const Page = ({ data: { page } }: Props) => { +const Page = ({ data: { page } }: PageProps) => { const titleProps = useSpring({ config: config.slow, from: { opacity: 0, transform: `translate3d(0, -30px, 0)` }, @@ -45,7 +45,9 @@ const Page = ({ data: { page } }: Props) => { }} > - {page.title} + + {page.title} + diff --git a/themes/gatsby-theme-emma/src/components/project-info-item.tsx b/themes/gatsby-theme-emma/src/components/project-info-item.tsx index 908e1bb73..c9aafa52b 100644 --- a/themes/gatsby-theme-emma/src/components/project-info-item.tsx +++ b/themes/gatsby-theme-emma/src/components/project-info-item.tsx @@ -1,12 +1,12 @@ /** @jsx jsx */ import { Flex, jsx } from "theme-ui" -type ItemProps = { +type ProjectInfoItemProps = { name: string content: string } -const ProjectInfoItem = ({ name, content }: ItemProps) => ( +const ProjectInfoItem = ({ name, content }: ProjectInfoItemProps) => ( ( +const ProjectItem = ({ node, style }: ProjectItemProps) => ( { +const Project = ({ data: { project } }: ProjectProps) => { const titleProps = useSpring({ config: config.slow, from: { opacity: 0, transform: `translate3d(0, -30px, 0)` }, @@ -61,7 +61,9 @@ const Project = ({ data: { project } }: Props) => { }} > - {project.title} + + {project.title} + diff --git a/themes/gatsby-theme-emma/src/components/projects.tsx b/themes/gatsby-theme-emma/src/components/projects.tsx index fa5269647..f58705797 100644 --- a/themes/gatsby-theme-emma/src/components/projects.tsx +++ b/themes/gatsby-theme-emma/src/components/projects.tsx @@ -5,7 +5,7 @@ import Layout from "./layout" import { ChildImageSharp } from "../types" import ProjectItem from "./project-item" -type Props = { +type ProjectsProps = { projects: { color: string slug: string @@ -16,7 +16,7 @@ type Props = { }[] } -const Projects = ({ projects }: Props) => { +const Projects = ({ projects }: ProjectsProps) => { const trail = useTrail(projects.length, { from: { height: `0%` }, to: { height: `100%` }, diff --git a/themes/gatsby-theme-emma/src/components/seo.tsx b/themes/gatsby-theme-emma/src/components/seo.tsx index bcfcccc69..e75e9de50 100644 --- a/themes/gatsby-theme-emma/src/components/seo.tsx +++ b/themes/gatsby-theme-emma/src/components/seo.tsx @@ -11,7 +11,7 @@ const defaultProps = { children: null, } -type Props = { +type SEOProps = { title?: string description?: string pathname?: string @@ -19,7 +19,7 @@ type Props = { children?: React.ReactNode } -const SEO = ({ title, description, pathname, image, children }: Props) => { +const SEO = ({ title, description, pathname, image, children }: SEOProps) => { const site = useSiteMetadata() const { diff --git a/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js index 6114cae25..4557990ee 100644 --- a/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js +++ b/themes/gatsby-theme-emma/src/gatsby-plugin-theme-ui/index.js @@ -1,11 +1,10 @@ +import { merge } from "theme-ui" import { tailwind } from "@theme-ui/presets" -export default { - ...tailwind, - initialColorMode: `light`, +export default merge(tailwind, { + initialColorModeName: `light`, useCustomProperties: true, colors: { - ...tailwind.colors, primary: tailwind.colors.pink[7], secondary: tailwind.colors.indigo[6], modes: { @@ -17,21 +16,15 @@ export default { }, }, }, - styles: { - ...tailwind.styles, - root: { - ...tailwind.styles.root, - color: `text`, - backgroundColor: `background`, - }, - Footer: { + layout: { + footer: { textAlign: `center`, display: `block`, color: `textMuted`, px: [2, 3], py: [3, 4], }, - Header: { + header: { px: [3, 4], py: [2, 3], fontSize: 2, @@ -39,12 +32,22 @@ export default { alignItems: `center`, flexWrap: `wrap`, }, - Main: { - ...tailwind.styles.Main, + main: { position: `relative`, }, - Container: { + container: { maxWidth: `5xl`, + padding: 4, + }, + }, + styles: { + root: { + color: `text`, + backgroundColor: `background`, + margin: 0, + padding: 0, + boxSizing: `border-box`, + textRendering: `optimizeLegibility`, }, p: { fontSize: [1, 2], @@ -54,30 +57,24 @@ export default { "--x-height-multiplier": 0.35, }, h1: { - ...tailwind.styles.h1, fontSize: [5, 6], mt: 2, }, h2: { - ...tailwind.styles.h2, fontSize: [4, 5], mt: 2, }, h3: { - ...tailwind.styles.h3, fontSize: [3, 4], mt: 3, }, h4: { - ...tailwind.styles.h4, fontSize: [2, 3], }, h5: { - ...tailwind.styles.h5, fontSize: [1, 2], }, h6: { - ...tailwind.styles.h6, fontSize: 1, mb: 2, }, @@ -94,4 +91,4 @@ export default { ml: 3, }, }, -} +}) diff --git a/themes/gatsby-theme-emma/src/hooks/use-navigation.tsx b/themes/gatsby-theme-emma/src/hooks/use-navigation.tsx index d911922e9..46cf3282e 100644 --- a/themes/gatsby-theme-emma/src/hooks/use-navigation.tsx +++ b/themes/gatsby-theme-emma/src/hooks/use-navigation.tsx @@ -1,6 +1,6 @@ import { graphql, useStaticQuery } from "gatsby" -type Props = { +type UseNavigationProps = { allPage: { nodes: { title: string @@ -10,7 +10,7 @@ type Props = { } const useNavigation = () => { - const data = useStaticQuery(graphql` + const data = useStaticQuery(graphql` query { allPage { nodes { diff --git a/themes/gatsby-theme-emma/src/hooks/use-site-metadata.tsx b/themes/gatsby-theme-emma/src/hooks/use-site-metadata.tsx index 8499e5bad..24eb4da0e 100644 --- a/themes/gatsby-theme-emma/src/hooks/use-site-metadata.tsx +++ b/themes/gatsby-theme-emma/src/hooks/use-site-metadata.tsx @@ -1,6 +1,6 @@ import { graphql, useStaticQuery } from "gatsby" -type Props = { +type UseSiteMetadataProps = { site: { siteMetadata: { siteTitle: string @@ -11,13 +11,12 @@ type Props = { siteLanguage: string siteImage: string author: string - [key: string]: unknown } } } const useSiteMetadata = () => { - const data = useStaticQuery(graphql` + const data = useStaticQuery(graphql` query { site { siteMetadata { diff --git a/themes/gatsby-theme-graphql-playground/package.json b/themes/gatsby-theme-graphql-playground/package.json index 2e7805081..3700ea6b9 100644 --- a/themes/gatsby-theme-graphql-playground/package.json +++ b/themes/gatsby-theme-graphql-playground/package.json @@ -20,21 +20,19 @@ "react-dom": "^16.11.0" }, "dependencies": { - "@emotion/core": "^10.0.28", "@mdx-js/mdx": "^1.5.8", - "@mdx-js/react": "^1.5.8", - "@theme-ui/presets": "^0.2.44", - "@theme-ui/prism": "^0.2.50", - "@theme-ui/sidenav": "^0.2.53", + "@theme-ui/presets": "^0.3.0", + "@theme-ui/prism": "^0.3.0", + "@theme-ui/sidenav": "^0.3.1", "gatsby-plugin-mdx": "^1.1.9", "gatsby-plugin-react-helmet": "^3.2.4", - "gatsby-plugin-theme-ui": "^0.2.53", + "gatsby-plugin-theme-ui": "^0.3.0", "gatsby-plugin-typescript": "^2.3.3", "gatsby-source-filesystem": "^2.2.4", "is-absolute-url": "^3.0.3", "re-resizable": "^6.3.2", "react-helmet": "^6.0.0", - "theme-ui": "^0.2.52" + "theme-ui": "^0.3.1" }, "keywords": [ "gatsby", diff --git a/themes/gatsby-theme-graphql-playground/src/components/colormode-toggle.tsx b/themes/gatsby-theme-graphql-playground/src/components/colormode-toggle.tsx index 09128348f..f0a45aafa 100644 --- a/themes/gatsby-theme-graphql-playground/src/components/colormode-toggle.tsx +++ b/themes/gatsby-theme-graphql-playground/src/components/colormode-toggle.tsx @@ -6,7 +6,7 @@ type Props = { toggle: (e: any) => void } -// Adapted from: https://codepen.io/aaroniker/pen/KGpXZo and https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx +// Adapted from: https://codepen.io/aaroniker/pen/KGpXZo and https://github.com/narative/gatsby-theme-novela/blob/714b6209c5bd61b220370e8a7ad84c0b1407946a/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx const ColorModeToggle = ({ isDark, toggle }: Props) => (

- + ) export default Layout diff --git a/themes/gatsby-theme-graphql-playground/src/components/seo.tsx b/themes/gatsby-theme-graphql-playground/src/components/seo.tsx index d0e4b9317..48383327a 100644 --- a/themes/gatsby-theme-graphql-playground/src/components/seo.tsx +++ b/themes/gatsby-theme-graphql-playground/src/components/seo.tsx @@ -11,7 +11,7 @@ const defaultProps = { children: null, } -type Props = { +type SEOProps = { title?: string description?: string pathname?: string @@ -19,7 +19,7 @@ type Props = { children?: React.ReactNode } -const SEO = ({ title, description, pathname, image, children }: Props) => { +const SEO = ({ title, description, pathname, image, children }: SEOProps) => { const site = useSiteMetadata() const { diff --git a/themes/gatsby-theme-graphql-playground/src/components/sidebar.tsx b/themes/gatsby-theme-graphql-playground/src/components/sidebar.tsx index f23498363..55c56855f 100644 --- a/themes/gatsby-theme-graphql-playground/src/components/sidebar.tsx +++ b/themes/gatsby-theme-graphql-playground/src/components/sidebar.tsx @@ -3,7 +3,8 @@ import { Sidenav } from "@theme-ui/sidenav" import { jsx, useColorMode } from "theme-ui" import useSiteMetadata from "../hooks/use-site-metadata" import ColorModeToggle from "./colormode-toggle" -import Navigation from "../data/navigation.mdx" +// @ts-ignore +import Navigation from "../data/navigation" const Sidebar = () => { const { siteTitle } = useSiteMetadata() diff --git a/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js b/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js index 7399b263c..cf05d42cf 100644 --- a/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js +++ b/themes/gatsby-theme-graphql-playground/src/gatsby-plugin-theme-ui/index.js @@ -1,12 +1,11 @@ +import { merge } from "theme-ui" import { tailwind } from "@theme-ui/presets" import nightOwl from "@theme-ui/prism/presets/night-owl" -export default { - ...tailwind, - initialColorMode: `light`, +export default merge(tailwind, { + initialColorModeName: `light`, useCustomProperties: true, colors: { - ...tailwind.colors, primary: tailwind.colors.indigo[7], secondary: tailwind.colors.orange[6], codeBlockBG: tailwind.colors.gray[2], @@ -26,25 +25,15 @@ export default { }, }, }, - styles: { - ...tailwind.styles, - root: { - ...tailwind.styles.root, - color: `text`, - backgroundColor: `background`, - }, - pre: { - ...nightOwl, - padding: 3, - }, - Footer: { + layout: { + footer: { textAlign: `center`, display: `block`, color: `textMuted`, px: [2, 3], py: [3, 4], }, - Header: { + header: { px: [3, 4], py: [2, 3], fontSize: 2, @@ -52,13 +41,26 @@ export default { alignItems: `center`, flexWrap: `wrap`, }, - Main: { - ...tailwind.styles.Main, + main: { position: `relative`, }, - Container: { + container: { maxWidth: `5xl`, }, + }, + styles: { + root: { + color: `text`, + backgroundColor: `background`, + margin: 0, + padding: 0, + boxSizing: `border-box`, + textRendering: `optimizeLegibility`, + }, + pre: { + ...nightOwl, + padding: 3, + }, p: { fontSize: [1, 2], letterSpacing: `-0.003em`, @@ -83,38 +85,32 @@ export default { }, }, h1: { - ...tailwind.styles.h1, fontSize: [5, 6], mt: 2, color: `textHeading`, }, h2: { - ...tailwind.styles.h2, fontSize: [4, 5], mt: 2, color: `textHeading`, }, h3: { - ...tailwind.styles.h3, fontSize: [3, 4], mt: 3, color: `textHeading`, }, h4: { - ...tailwind.styles.h4, fontSize: [2, 3], color: `textHeading`, }, h5: { - ...tailwind.styles.h5, fontSize: [1, 2], color: `textHeading`, }, h6: { - ...tailwind.styles.h6, fontSize: 1, mb: 2, color: `textHeading`, }, }, -} +}) diff --git a/themes/gatsby-theme-graphql-playground/src/hooks/use-site-metadata.tsx b/themes/gatsby-theme-graphql-playground/src/hooks/use-site-metadata.tsx index b22ea20c3..c092b9ae2 100644 --- a/themes/gatsby-theme-graphql-playground/src/hooks/use-site-metadata.tsx +++ b/themes/gatsby-theme-graphql-playground/src/hooks/use-site-metadata.tsx @@ -1,6 +1,6 @@ import { graphql, useStaticQuery } from "gatsby" -type Props = { +type UseSiteMetadataProps = { site: { siteMetadata: { siteTitle: string @@ -12,13 +12,12 @@ type Props = { siteImage: string author: string graphiQLUrl: string - [key: string]: unknown } } } const useSiteMetadata = () => { - const data = useStaticQuery(graphql` + const data = useStaticQuery(graphql` query { site { siteMetadata { diff --git a/themes/gatsby-theme-graphql-playground/src/templates/homepage.tsx b/themes/gatsby-theme-graphql-playground/src/templates/homepage.tsx index 84b6437e8..d3b5bbd1a 100644 --- a/themes/gatsby-theme-graphql-playground/src/templates/homepage.tsx +++ b/themes/gatsby-theme-graphql-playground/src/templates/homepage.tsx @@ -1,6 +1,7 @@ import React from "react" import Layout from "../components/layout" -import Index from "../data/index.mdx" +// @ts-ignore +import Index from "../data/index" const Homepage = () => ( diff --git a/themes/gatsby-theme-graphql-playground/src/templates/item.tsx b/themes/gatsby-theme-graphql-playground/src/templates/item.tsx index 13f93bef5..5394030c6 100644 --- a/themes/gatsby-theme-graphql-playground/src/templates/item.tsx +++ b/themes/gatsby-theme-graphql-playground/src/templates/item.tsx @@ -1,12 +1,12 @@ /** @jsx jsx */ -import { jsx, Styled } from "theme-ui" +import { jsx, Heading } from "theme-ui" import { graphql } from "gatsby" import { MDXRenderer } from "gatsby-plugin-mdx" import Layout from "../components/layout" import IFrame from "../components/iframe" import Resizable from "../components/resizable" -type ItemType = { +type ItemProps = { data: { playground: { slug: string @@ -17,10 +17,12 @@ type ItemType = { } } -const Item = ({ data: { playground } }: ItemType) => ( +const Item = ({ data: { playground } }: ItemProps) => (
- {playground.title} + + {playground.title} + {playground.body}
diff --git a/themes/gatsby-theme-minimal-blog-core/package.json b/themes/gatsby-theme-minimal-blog-core/package.json index f6c0f17db..6ef1b991f 100644 --- a/themes/gatsby-theme-minimal-blog-core/package.json +++ b/themes/gatsby-theme-minimal-blog-core/package.json @@ -15,7 +15,6 @@ "clean": "gatsby clean" }, "peerDependencies": { - "@mdx-js/react": "^1.5.1", "gatsby": "^2.17.10", "react": "^16.11.0", "react-dom": "^16.11.0" diff --git a/themes/gatsby-theme-minimal-blog/package.json b/themes/gatsby-theme-minimal-blog/package.json index 7e1fd3c66..6165b6f7d 100644 --- a/themes/gatsby-theme-minimal-blog/package.json +++ b/themes/gatsby-theme-minimal-blog/package.json @@ -20,23 +20,21 @@ "react-dom": "^16.9.0" }, "dependencies": { - "@emotion/core": "^10.0.28", "@lekoarts/gatsby-theme-minimal-blog-core": "^2.2.7", - "@mdx-js/react": "^1.5.8", - "@theme-ui/color": "^0.2.53", - "@theme-ui/components": "^0.2.50", - "@theme-ui/presets": "^0.2.44", + "@theme-ui/color": "^0.3.1", + "@theme-ui/components": "^0.3.1", + "@theme-ui/presets": "^0.3.0", "gatsby-plugin-catch-links": "^2.2.3", "gatsby-plugin-feed": "^2.4.3", "gatsby-plugin-react-helmet": "^3.2.4", - "gatsby-plugin-theme-ui": "^0.2.53", + "gatsby-plugin-theme-ui": "^0.3.0", "gatsby-plugin-typescript": "^2.3.3", "lodash.kebabcase": "^4.1.1", "mdx-utils": "^0.2.0", "prism-react-renderer": "^1.0.2", "react-helmet": "^6.0.0", "react-live": "^2.2.2", - "theme-ui": "^0.2.52", + "theme-ui": "^0.3.1", "typeface-ibm-plex-sans": "^0.0.75" }, "keywords": [ diff --git a/themes/gatsby-theme-minimal-blog/src/components/blog-list-item.tsx b/themes/gatsby-theme-minimal-blog/src/components/blog-list-item.tsx index 15bbbc505..2b17bcb80 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/blog-list-item.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/blog-list-item.tsx @@ -1,6 +1,6 @@ /** @jsx jsx */ import React from "react" -import { jsx, Styled } from "theme-ui" +import { jsx, Link as TLink } from "theme-ui" import { Box } from "@theme-ui/components" import { Link } from "gatsby" import ItemTags from "./item-tags" @@ -23,9 +23,9 @@ type BlogListItemProps = { const BlogListItem = ({ post, showTags = true }: BlogListItemProps) => ( - + {post.title} - +

{post.tags && showTags && ( diff --git a/themes/gatsby-theme-minimal-blog/src/components/blog.tsx b/themes/gatsby-theme-minimal-blog/src/components/blog.tsx index 19dd7775d..2045ef9b6 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/blog.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/blog.tsx @@ -1,5 +1,5 @@ /** @jsx jsx */ -import { jsx, Styled } from "theme-ui" +import { jsx, Heading, Link as TLink } from "theme-ui" import { Link } from "gatsby" import { Flex } from "@theme-ui/components" import Layout from "./layout" @@ -30,10 +30,10 @@ const Blog = ({ posts }: PostsProps) => { - Blog - + Blog + View all tags - +

diff --git a/themes/gatsby-theme-minimal-blog/src/components/colormode-toggle.tsx b/themes/gatsby-theme-minimal-blog/src/components/colormode-toggle.tsx index 2418fb2f9..585731a99 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/colormode-toggle.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/colormode-toggle.tsx @@ -6,7 +6,7 @@ type Props = { toggle: (e: any) => void } -// Adapted from: https://codepen.io/aaroniker/pen/KGpXZo and https://github.com/narative/gatsby-theme-novela/blob/master/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx +// Adapted from: https://codepen.io/aaroniker/pen/KGpXZo and https://github.com/narative/gatsby-theme-novela/blob/714b6209c5bd61b220370e8a7ad84c0b1407946a/%40narative/gatsby-theme-novela/src/components/Navigation/Navigation.Header.tsx const ColorModeToggle = ({ isDark, toggle }: Props) => (
- Theme - + {` `} by {` `} - + LekoArts - +
) diff --git a/themes/gatsby-theme-minimal-blog/src/components/header.tsx b/themes/gatsby-theme-minimal-blog/src/components/header.tsx index 90c35cbb4..82d95b759 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/header.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/header.tsx @@ -1,5 +1,5 @@ /** @jsx jsx */ -import { jsx, useColorMode, Styled } from "theme-ui" +import { jsx, useColorMode, Link as TLink } from "theme-ui" import { Link } from "gatsby" import { Flex } from "@theme-ui/components" import useSiteMetadata from "../hooks/use-site-metadata" @@ -47,9 +47,9 @@ const Header = () => { {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 2bb54ca6e..7c2a979c8 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/homepage.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/homepage.tsx @@ -2,15 +2,15 @@ import { jsx } from "theme-ui" import { Link } from "gatsby" import Layout from "./layout" -// @ts-ignore -import Hero from "../texts/hero" -// @ts-ignore -import Bottom from "../texts/bottom" import Title from "./title" import Listing from "./listing" import List from "./list" import useMinimalBlogConfig from "../hooks/use-minimal-blog-config" import replaceSlashes from "../utils/replaceSlashes" +// @ts-ignore +import Hero from "../texts/hero" +// @ts-ignore +import Bottom from "../texts/bottom" type PostsProps = { posts: { 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 11fbd1fdb..945be52d5 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/item-tags.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/item-tags.tsx @@ -1,5 +1,5 @@ import React from "react" -import { Styled } from "theme-ui" +import { Link as TLink } from "theme-ui" import { Link } from "gatsby" import useMinimalBlogConfig from "../hooks/use-minimal-blog-config" import replaceSlashes from "../utils/replaceSlashes" @@ -19,9 +19,9 @@ const ItemTags = ({ tags }: TagsProps) => { {tags.map((tag, i) => ( {!!i && `, `} - + {tag.name} - + ))} diff --git a/themes/gatsby-theme-minimal-blog/src/components/layout.tsx b/themes/gatsby-theme-minimal-blog/src/components/layout.tsx index 30f5a9bef..83d74640f 100644 --- a/themes/gatsby-theme-minimal-blog/src/components/layout.tsx +++ b/themes/gatsby-theme-minimal-blog/src/components/layout.tsx @@ -1,6 +1,7 @@ +/** @jsx jsx */ import React from "react" import { Global } from "@emotion/core" -import { Main, Styled, Container, css } from "theme-ui" +import { Box, Container, jsx } from "theme-ui" import "typeface-ibm-plex-sans" import SEO from "./seo" import Header from "./header" @@ -11,18 +12,12 @@ import SkipNavLink from "./skip-nav" type LayoutProps = { children: React.ReactNode; className?: string } const Layout = ({ children, className }: LayoutProps) => ( - + ({ "*": { boxSizing: `inherit`, }, - body: { - margin: 0, - padding: 0, - boxSizing: `border-box`, - textRendering: `optimizeLegibility`, - }, "::selection": { backgroundColor: `primary`, color: `white`, @@ -37,12 +32,12 @@ const Layout = ({ children, className }: LayoutProps) => ( Skip to content
-
+ {children} -
+