From 785f2f646926c60d02a76d0124fd62cd8a70437a Mon Sep 17 00:00:00 2001 From: Marvin Heilemann Date: Wed, 2 Oct 2019 10:00:50 +0200 Subject: [PATCH] Fix multi render issue on breadcrumb Finished breadcrumb (still not perfect but works) Cleanup --- .gitignore | 1 + ISSUES.md | 8 +++ TODO.md | 4 ++ gatsby-config.js | 32 ++++++++---- gatsby/utils.js | 13 ++--- metadata.js | 7 +++ package-lock.json | 5 ++ package.json | 2 +- reports/v3.0.0/treemap.html | 4 +- src/components/Breadcrumb.jsx | 68 +++++++++----------------- src/components/Time.jsx | 2 +- src/components/logo.jsx | 2 +- src/components/status.jsx | 2 +- src/{context.jsx => context.js} | 0 src/hooks/use-site-metadata.js | 25 ++++++++++ src/html.js | 39 +++++++++++++++ src/html.jsx | 22 --------- src/layouts/Article.jsx | 6 +-- src/layouts/header.jsx | 10 ++-- src/layouts/index.jsx | 2 +- src/pages/404.jsx | 2 +- src/pages/index.jsx | 8 +-- src/pages/projects.jsx | 8 +-- src/pages/writings.jsx | 6 +-- src/styles/app.scss | 1 + src/styles/components/_breadcrumb.scss | 17 +++++++ src/templates/ProjectsSingle.jsx | 10 ++-- src/templates/WritingsSingle.jsx | 10 ++-- src/templates/test.css | 4 +- 29 files changed, 198 insertions(+), 122 deletions(-) create mode 100644 ISSUES.md rename src/{context.jsx => context.js} (100%) create mode 100644 src/hooks/use-site-metadata.js create mode 100644 src/html.js delete mode 100644 src/html.jsx create mode 100644 src/styles/components/_breadcrumb.scss diff --git a/.gitignore b/.gitignore index 1aea9a3..7f898c2 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,6 @@ /_old /tmp +.env.* # Logs logs diff --git a/ISSUES.md b/ISSUES.md new file mode 100644 index 0000000..0e1506f --- /dev/null +++ b/ISSUES.md @@ -0,0 +1,8 @@ +# Open issues that affect this project + +- [PostCss plugin is not executed when using Scss](#postcss-plugin-is-not-executed-when-using-scss) + +## PostCss plugin is not executed when using Scss + +- https://github.com/gatsbyjs/gatsby/issues/17887 +- https://github.com/larsenwork/postcss-easing-gradients/issues/11 diff --git a/TODO.md b/TODO.md index 6950ba8..4546121 100644 --- a/TODO.md +++ b/TODO.md @@ -39,8 +39,12 @@ - [ ] move from bash script to [Nim][2] - [ ] check markdown for ["Vary sentence length"][3] - [ ] check markdown for [Readability][4] +- [ ] generate [rich snippets][5] +- [ ] use [Scheme customizations][6] to map post meta e.g. for authors [1]: https://www.gatsbyjs.org/packages/gatsby-plugin-preact/ [2]: https://nim-lang.org/docs/tut1.html [3]: https://github.com/wooorm/write-music [4]: https://wooorm.com/readability/ +[5]: https://www.gatsbyjs.org/docs/seo/ +[6]: https://www.gatsbyjs.org/docs/schema-customization/#foreign-key-fields diff --git a/gatsby-config.js b/gatsby-config.js index e6b9956..c0f83b1 100644 --- a/gatsby-config.js +++ b/gatsby-config.js @@ -4,17 +4,36 @@ * @see https://www.gatsbyjs.org/docs/gatsby-config/ */ +require('dotenv').config({ + path: `.env.${process.env.NODE_ENV}`, +}) + const path = require('path') const { yellow } = require('kleur') -const { getPkgVersion, getSiteMetadata } = require('./gatsby/utils') +const { getPkgVersion, siteMetadata } = require('./gatsby/utils') const { activeEnv } = require('./gatsby/environment') console.log(`Using environment: ${yellow(activeEnv)}\n`) module.exports = { - siteMetadata: getSiteMetadata(), + siteMetadata, plugins: [ - 'gatsby-plugin-layout', + { + resolve: 'gatsby-plugin-module-resolver', + options: { + root: './src', + aliases: { + '@app': './', + '@components': './components', + '@layouts': './layouts', + '@scripts': './scripts', + '@utils': './utils', + '@hooks': './hooks', + '@images': './images', + }, + }, + }, + `gatsby-plugin-layout`, `gatsby-plugin-react-helmet`, { resolve: `gatsby-plugin-canonical-urls`, @@ -25,12 +44,7 @@ module.exports = { }, `gatsby-plugin-sass`, `gatsby-plugin-postcss`, - { - resolve: 'gatsby-plugin-purgecss', - options: { - // ignore: ['src/styles'], - }, - }, + 'gatsby-plugin-purgecss', 'gatsby-transformer-json', 'gatsby-plugin-sharp', 'gatsby-transformer-sharp', diff --git a/gatsby/utils.js b/gatsby/utils.js index 4cdbfc7..83744bd 100644 --- a/gatsby/utils.js +++ b/gatsby/utils.js @@ -1,5 +1,4 @@ const pkg = require('../package.json') -const { parsed } = require('dotenv').config() const metadata = require('../metadata') /** @@ -41,13 +40,11 @@ module.exports.getPkgVersion = (dots = true) => { /** * Assign env data to metadata. */ -module.exports.getSiteMetadata = () => { - return { - ...metadata, - ...{ - siteUrl: parsed.SITE_URL, - }, - } +module.exports.siteMetadata = { + ...metadata, + ...{ + siteUrl: process.env.SITE_URL, + }, } /** diff --git a/metadata.js b/metadata.js index 5095743..0bb14b3 100644 --- a/metadata.js +++ b/metadata.js @@ -20,6 +20,13 @@ module.exports = { name: 'About', link: '/about', }, + { + name: 'Setup', + external: true, + // link: '/about/setup', use Notion API later? + link: + 'https://www.notion.so/marvins/Setup-9ad349afe68942ae807dc31c9afccd7d', + }, { name: 'Projects', link: '/projects', diff --git a/package-lock.json b/package-lock.json index 6645ada..00f74f2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -8111,6 +8111,11 @@ } } }, + "gatsby-plugin-module-resolver": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/gatsby-plugin-module-resolver/-/gatsby-plugin-module-resolver-1.0.3.tgz", + "integrity": "sha512-MrE2JhDEiiZB6uLVJ0zpoZmHi36zkgGoNgBr9YQ4r6TUqayiNXU97NBhO87CRJQz8I4MaL6ZrOWjUdoHEXvndg==" + }, "gatsby-plugin-page-creator": { "version": "2.1.23", "resolved": "https://registry.npmjs.org/gatsby-plugin-page-creator/-/gatsby-plugin-page-creator-2.1.23.tgz", diff --git a/package.json b/package.json index d6e6292..b9f5704 100644 --- a/package.json +++ b/package.json @@ -40,7 +40,6 @@ "dependencies": { "@ibm/plex": "^2.0.0", "dayjs": "^1.8.16", - "dotenv": "^8.1.0", "gatsby": "^2.15.28", "gatsby-image": "^2.2.23", "gatsby-plugin-canonical-urls": "^2.1.10", @@ -48,6 +47,7 @@ "gatsby-plugin-humans-txt": "^1.1.4", "gatsby-plugin-layout": "^1.1.10", "gatsby-plugin-manifest": "^2.2.20", + "gatsby-plugin-module-resolver": "^1.0.3", "gatsby-plugin-postcss": "^2.1.10", "gatsby-plugin-purgecss": "^4.0.1", "gatsby-plugin-react-helmet": "^3.1.10", diff --git a/reports/v3.0.0/treemap.html b/reports/v3.0.0/treemap.html index 1fa7ab9..58a79d1 100644 --- a/reports/v3.0.0/treemap.html +++ b/reports/v3.0.0/treemap.html @@ -3,7 +3,7 @@ - marvin-digital [1 Oct 2019 at 21:43] + marvin-digital [2 Oct 2019 at 9:36] diff --git a/src/components/Breadcrumb.jsx b/src/components/Breadcrumb.jsx index 481beef..4309825 100644 --- a/src/components/Breadcrumb.jsx +++ b/src/components/Breadcrumb.jsx @@ -1,11 +1,10 @@ import React, { useContext } from 'react' -import { useStaticQuery, graphql, Link } from 'gatsby' -import { GlobalContext } from '../context' +import { Link } from 'gatsby' +import { GlobalContext } from '@app/context' +import { useSiteMetadata } from '@hooks/use-site-metadata' const Breadcrumb = ({ location: { pathname } }) => { - const { - site: { siteMetadata }, - } = useStaticQuery(query) + const siteMetadata = useSiteMetadata() const [state] = useContext(GlobalContext) const fragments = pathname.split('/') @@ -13,59 +12,36 @@ const Breadcrumb = ({ location: { pathname } }) => { fragments.pop() const menuLinks = siteMetadata.menuLinks - // const menuLinks = [ - // { - // name: 'Projects', - // link: '/projects', - // }, - // { - // name: 'Demo', - // link: '/projects/demo', - // }, - // ] - console.log(state) - console.log(menuLinks) - console.log(fragments) - - const path = menuLinks.filter(({ name, link }) => { + const path = menuLinks.filter(({ name, external }) => { + if (external) return false // ignore const menuIndex = fragments.indexOf(name.toLowerCase()) if (menuIndex > -1) { - const menu = menuLinks[menuIndex] - console.log(menu) - return menu + return menuLinks[menuIndex] } return false }) - console.log(path) - console.log(path.length) - return state.title ? ( -
- / + ) : null } -const query = graphql` - { - site { - siteMetadata { - menuLinks { - name - link - } - } - } - } -` - export default Breadcrumb diff --git a/src/components/Time.jsx b/src/components/Time.jsx index 40d8bd8..6ffc4ab 100644 --- a/src/components/Time.jsx +++ b/src/components/Time.jsx @@ -1,7 +1,7 @@ import React from 'react' import dayjs from 'dayjs' -import { isDev } from '../environment' +import { isDev } from '@app/environment' import DataType from './DataType' const Time = ({ date, format = 'L' }) => { diff --git a/src/components/logo.jsx b/src/components/logo.jsx index b8dcf37..ea1a8df 100644 --- a/src/components/logo.jsx +++ b/src/components/logo.jsx @@ -1,7 +1,7 @@ import React from 'react' import { useStaticQuery, graphql } from 'gatsby' -import logo from '../images/logo-white.svg' +import logo from '@images/logo-white.svg' const Logo = () => { const data = useStaticQuery(query) diff --git a/src/components/status.jsx b/src/components/status.jsx index 799419a..2470574 100644 --- a/src/components/status.jsx +++ b/src/components/status.jsx @@ -1,6 +1,6 @@ import React from 'react' -import { capitalizeString } from '../utils/transform' +import { capitalizeString } from '@utils/transform' const Status = ({ state }) => { const stateTransformed = capitalizeString(state) diff --git a/src/context.jsx b/src/context.js similarity index 100% rename from src/context.jsx rename to src/context.js diff --git a/src/hooks/use-site-metadata.js b/src/hooks/use-site-metadata.js new file mode 100644 index 0000000..4ea025c --- /dev/null +++ b/src/hooks/use-site-metadata.js @@ -0,0 +1,25 @@ +import { useStaticQuery, graphql } from 'gatsby' + +export const useSiteMetadata = () => { + const { site } = useStaticQuery( + graphql` + query SiteMetaData { + site { + siteMetadata { + title + author + description + siteUrl + keywords + menuLinks { + name + link + } + } + } + } + ` + ) + + return site.siteMetadata +} diff --git a/src/html.js b/src/html.js new file mode 100644 index 0000000..8908809 --- /dev/null +++ b/src/html.js @@ -0,0 +1,39 @@ +import React from 'react' +import PropTypes from 'prop-types' + +export default function HTML(props) { + return ( + + + + + + {props.headComponents} + + + {props.preBodyComponents} + +
+ {props.postBodyComponents} + + + ) +} + +HTML.propTypes = { + htmlAttributes: PropTypes.object, + headComponents: PropTypes.array, + bodyAttributes: PropTypes.object, + preBodyComponents: PropTypes.array, + body: PropTypes.string, + postBodyComponents: PropTypes.array, +} diff --git a/src/html.jsx b/src/html.jsx deleted file mode 100644 index 9f81b5e..0000000 --- a/src/html.jsx +++ /dev/null @@ -1,22 +0,0 @@ -import React from 'react' - -export default function HTML(props) { - return ( - - - - - - - {props.headComponents} - - -
- {props.postBodyComponents} - - - ) -} diff --git a/src/layouts/Article.jsx b/src/layouts/Article.jsx index 7994169..b924be6 100644 --- a/src/layouts/Article.jsx +++ b/src/layouts/Article.jsx @@ -1,8 +1,8 @@ import React from 'react' -import { scrollTo } from '../utils/animate' -import { prefersReducedMotion } from '../utils/accessibility' -import Lightbox from '../scripts/lightbox' +import { scrollTo } from '@utils/animate' +import { prefersReducedMotion } from '@utils/accessibility' +import Lightbox from '@scripts/lightbox' class Article extends React.Component { scrollElements = [] diff --git a/src/layouts/header.jsx b/src/layouts/header.jsx index 2d2e3c6..79e5ff8 100644 --- a/src/layouts/header.jsx +++ b/src/layouts/header.jsx @@ -1,8 +1,8 @@ import React from 'react' -import Logo from '../components/Logo' -import Navigation from '../components/Navigation' -import Breadcrumb from '../components/Breadcrumb' +import Logo from '@components/Logo' +import Navigation from '@components/Navigation' +import Breadcrumb from '@components/Breadcrumb' class Header extends React.Component { constructor(props) { @@ -23,6 +23,10 @@ class Header extends React.Component { window.removeEventListener('scroll', this.handleScroll) } + shouldComponentUpdate(_, nextState) { + return !(this.state.sticky === nextState.sticky) + } + handleScroll(event) { this.setState({ sticky: window.pageYOffset > 0, diff --git a/src/layouts/index.jsx b/src/layouts/index.jsx index 0e508cf..d4d4efb 100644 --- a/src/layouts/index.jsx +++ b/src/layouts/index.jsx @@ -1,5 +1,5 @@ import React from 'react' -import { GlobalProvider } from '../context' +import { GlobalProvider } from '@app/context' import { HelmetProvider } from 'react-helmet-async' import Header from './Header' diff --git a/src/pages/404.jsx b/src/pages/404.jsx index 8d33657..e7bf343 100644 --- a/src/pages/404.jsx +++ b/src/pages/404.jsx @@ -1,6 +1,6 @@ import React from 'react' import { Helmet } from 'react-helmet-async' -import SEO from '../components/SEO' +import SEO from '@components/SEO' const Page = () => ( <> diff --git a/src/pages/index.jsx b/src/pages/index.jsx index 1a3099e..4e78d1d 100644 --- a/src/pages/index.jsx +++ b/src/pages/index.jsx @@ -1,11 +1,11 @@ import React from 'react' import { Helmet } from 'react-helmet-async' import { graphql, Link } from 'gatsby' -import { GlobalConsumer } from '../context' -import SEO from '../components/SEO' -import { isDev } from '../environment' +import { GlobalConsumer } from '@app/context' +import SEO from '@components/SEO' +import { isDev } from '@app/environment' -import Backdrop from '../components/Backdrop' +import Backdrop from '@components/Backdrop' class Page extends React.Component { static contextType = GlobalConsumer diff --git a/src/pages/projects.jsx b/src/pages/projects.jsx index 9f1563e..54e4f60 100644 --- a/src/pages/projects.jsx +++ b/src/pages/projects.jsx @@ -1,11 +1,11 @@ import React from 'react' import { graphql } from 'gatsby' import { Helmet } from 'react-helmet-async' -import { GlobalConsumer } from '../context' -import SEO from '../components/SEO' -import { isDev } from '../environment' +import { GlobalConsumer } from '@app/context' +import SEO from '@components/SEO' +import { isDev } from '@app/environment' -import Portfolio from '../components/Portfolio' +import Portfolio from '@components/Portfolio' class Page extends React.Component { static contextType = GlobalConsumer diff --git a/src/pages/writings.jsx b/src/pages/writings.jsx index 9169a54..365e50e 100644 --- a/src/pages/writings.jsx +++ b/src/pages/writings.jsx @@ -1,9 +1,9 @@ import React from 'react' import { graphql, Link } from 'gatsby' import { Helmet } from 'react-helmet-async' -import { GlobalConsumer } from '../context' -import SEO from '../components/SEO' -import { isDev } from '../environment' +import { GlobalConsumer } from '@app/context' +import SEO from '@components/SEO' +import { isDev } from '@app/environment' class Page extends React.Component { static contextType = GlobalConsumer diff --git a/src/styles/app.scss b/src/styles/app.scss index 8dccda2..c881fcc 100644 --- a/src/styles/app.scss +++ b/src/styles/app.scss @@ -30,6 +30,7 @@ @import 'components/animation'; @import 'components/backdrop'; +@import 'components/breadcrumb'; @import 'components/button'; @import 'components/code'; @import 'components/dot'; diff --git a/src/styles/components/_breadcrumb.scss b/src/styles/components/_breadcrumb.scss new file mode 100644 index 0000000..a1d7090 --- /dev/null +++ b/src/styles/components/_breadcrumb.scss @@ -0,0 +1,17 @@ +#breadcrumb { + font-family: var(--font-mono); + font-size: var(--text-sm); + + .breadcrumb__divider { + opacity: 0.8; + } + + .breadcrumb__link { + opacity: 0.8; + transition: opacity var(--transition-fast); + + &:hover { + opacity: 1; + } + } +} diff --git a/src/templates/ProjectsSingle.jsx b/src/templates/ProjectsSingle.jsx index 4d507bf..788393b 100644 --- a/src/templates/ProjectsSingle.jsx +++ b/src/templates/ProjectsSingle.jsx @@ -1,12 +1,12 @@ import { graphql } from 'gatsby' import React from 'react' import { Helmet } from 'react-helmet-async' -import { GlobalConsumer } from '../context' -import Article from '../layouts/Article' -import SEO from '../components/SEO' -import { isDev } from '../environment' +import { GlobalConsumer } from '@app/context' +import Article from '@layouts/Article' +import SEO from '@components/SEO' +import { isDev } from '@app/environment' -import HeroProjects from '../components/HeroProjects' +import HeroProjects from '@components/HeroProjects' class Single extends React.Component { static contextType = GlobalConsumer diff --git a/src/templates/WritingsSingle.jsx b/src/templates/WritingsSingle.jsx index ee48fec..18b44c0 100644 --- a/src/templates/WritingsSingle.jsx +++ b/src/templates/WritingsSingle.jsx @@ -1,12 +1,12 @@ import { graphql } from 'gatsby' import React from 'react' import { Helmet } from 'react-helmet-async' -import { GlobalConsumer } from '../context' -import Article from '../layouts/Article' -import SEO from '../components/SEO' -import { isDev } from '../environment' +import { GlobalConsumer } from '@app/context' +import Article from '@layouts/Article' +import SEO from '@components/SEO' +import { isDev } from '@app/environment' -import HeroWritings from '../components/HeroWritings' +import HeroWritings from '@components/HeroWritings' // TODO: still not working import './test.css' diff --git a/src/templates/test.css b/src/templates/test.css index a730ae9..2f40e53 100644 --- a/src/templates/test.css +++ b/src/templates/test.css @@ -1,8 +1,8 @@ -#hero .backdrop::after { +/* #hero .backdrop::after { background-image: linear-gradient( to top, #1e252d, cubic-bezier(0.66, 0, 0.41, 0.42), transparent ); -} +} */