Merge pull request #30 from clean-commit/next

1.1.0 Update -

Author: mrkaluzny

.nvmrc

@@ -1 +1 @@
-v16.13.0
+v18.12.1

CHANGELOG.md

@@ -1,5 +1,21 @@
 # Changelog
 
+## 1.1.0 - January 4, 2022
+
+**BREAKING CHANGES**
+- Support for Gatsby v5 added
+- `react-helmet` removed, SEO partials moved to Head API
+- `yarn start` renamed to `yarn dev`
+
+**Minor changes**
+- `classnames` removed, `clsx` added
+- Language definition added to `gatsby-ssr.js`
+- Removed unnused packages
+
+**Bug Fixes**
+- Improved darkmode toggle component - issue with hydration
+- Resolved minor warnings issues
+
 ## 1.0.1 - October 22, 2022
 
 **Minor changes**

README.md

@@ -1,6 +1,6 @@
 ![Henlo Starter](https://repository-images.githubusercontent.com/270961687/4085d990-9083-451d-b39b-5316579adf09)
 
-# Gatsby Starter Henlo (v1.0.0)
+# Gatsby Starter Henlo (v1.1.0)
 
 [![Netlify Status](https://api.netlify.com/api/v1/badges/43532afb-3488-432b-8185-a745645a90d8/deploy-status)](https://app.netlify.com/sites/henlo/deploys)
 
@@ -14,15 +14,16 @@ It follows the [JAMstack architecture](https://jamstack.org) by using Git as a s
 
 ## Features
 
+- Support for Gatsby v5
 - 💪 Battle-tested starting point for small & large web projects
 - 📄 Form Builder that enables Admins to create multiple forms with ease & Netlify Forms integration.
 - 🌗 Darkmode support
 - 🗺 Sitemaps using `gatsby-plugin-sitemap`
 - 🔥 Perfect score on Lighthouse for SEO, Accessibility and Performance
-- 💇‍♀️ TailwindCSS support with PostCSS processing & PurgeCSS
+- 💇‍♀️ TailwindCSS support with PostCSS
 - 🔌 Support for Gatsby API functions
 - 🎇 Crazy fast images with `gatsby-plugin-image`
-- 🕵️‍♂️ Complete SEO configuration with graphql fragment and reusable components
+- 🕵️‍♂️ Complete SEO configuration with graphql fragment and reusable components based on Head API
 - Netlify deploy configuration
 - Example pages, collections, CMS configuration with Netlify CMS & hooks
 - Readme template for custom projects
@@ -31,7 +32,7 @@ It follows the [JAMstack architecture](https://jamstack.org) by using Git as a s
 
 ## Prerequisites
 
-- Node 16.13
+- Node 18
 - [Gatsby CLI](https://www.gatsbyjs.org/docs/)
 - [Netlify CLI](https://github.com/netlify/cli)
 
@@ -48,7 +49,7 @@ After clicking that button, you’ll authenticate with GitHub and choose a repos
 ```
 $ gatsby new [SITE_DIRECTORY_NAME] https://github.com/clean-commit/gatsby-starter-henlo
 $ cd [SITE_DIRECTORY_NAME]
-$ yarn start
+$ yarn dev
 ```
 
 ### Access Locally
@@ -58,13 +59,13 @@ Pulldown a local copy of the Github repository Netlify created for you, with the
 ```
 $ git clone https://github.com/[GITHUB_USERNAME]/[REPO_NAME].git
 $ cd [REPO_NAME]
-$ yarn && yarn start
+$ yarn && yarn dev
 ```
 
 To test the CMS locally, you'll need run a production build of the site & [run local instance of Netlify CMS](https://www.netlifycms.org/docs/beta-features/#working-with-a-local-git-repository)
 
 ```
-$ yarn start
+$ yarn dev
 $ npx netlify-cms-proxy-server
 ```
 
@@ -113,6 +114,7 @@ The website will build locally and then deploy to production.
 │       └── post.js
 ├── static
 ├── _headers
+├── .env.example             # Example env -> GATSBY_APP_URL is required to run the app
 ├── gatsby-config.js         # Config files for gatsby
 ├── gatsby-node.js           # Page generation setup
 └── tailwind.config.js       # Tailwind configuration
@@ -122,6 +124,9 @@ The website will build locally and then deploy to production.
 
 Follow the [Netlify CMS Quick Start Guide](https://www.netlifycms.org/docs/quick-start/#authentication) to set up authentication, and hosting.
 
+**Important**
+This template can be mostly changed by the user within the CMS itself (Settings type). For sitemaps to work correctly, you'll need to provide ENV variable `GATSBY_APP_URL` which defaults to https://example.com, this url will be used in setting up meta values in the head of the documents and links URL in the CMS.
+
 CMS configuration was placed within `cms` directory in the root of the project. This allows us to work efficiently on fields and collections without mixing CMS config with Gatsby code.
 
 Henlo uses Manual Initialization to take advantage of componetized approach to managing configuration for Netlify CMS. Thanks to that you don't have to control the CMS from centralized YAML file.
@@ -250,36 +255,14 @@ Favicons can be generated using this [Favicon Generator](https://www.favicon-gen
 Since 0.4.0 Henlo supports [`gatsby-plugin-preload-fonts`](https://www.gatsbyjs.com/plugins/gatsby-plugin-preload-fonts/) plugin out of the box. To create the preload cache you need to start development server and then run `preload-fonts` command. This will generate the `font-preload-cache.json` file in the root of your project. When your projects builds fonts will be added automatically to head of the document.
 
 ```
-yarn start
+yarn dev
 yarn preload-fonts
 ```
 
 ## Browser support
 
 Gatsby tends to add a lot of polyfills to support older browser versions. In package.json file you can adjust which sites your project should support. As default Henlo will use `defaults` setting. If you want to learn more about the browser support visit official [Gatsby How-To Guide on this subject](https://www.gatsbyjs.com/docs/how-to/custom-configuration/browser-support/)
 
-## PurgeCSS
-
-This plugin uses [gatsby-plugin-purgecss](https://www.gatsbyjs.org/packages/gatsby-plugin-purgecss/) and [Tailwind](https://tailwindcss.com/). The builds are usually ~780K but reduced 98% by purgecss. Normally our websites won't cross 30Kb of CSS.
-
-Since Henlo v0.5.0 we use PurgeCSS v4, the default configuration is already included, to learn more [check purgecss docs](https://purgecss.com/configuration.html) or [check gatsby-plugin-purgecss documentation](https://www.gatsbyjs.com/plugins/gatsby-plugin-purgecss/)
-
-```javascript
-{
-  resolve: `gatsby-plugin-purgecss`,
-  options: {
-    printRejected: true,
-    develop: false,
-    tailwind: true,
-    purgeCSSOptions: {
-      safelist: {
-        standard: [],
-        deep: [],
-      },
-    },
-  },
-},
-```
 
 # CONTRIBUTING
 

gatsby-config.js

@@ -1,11 +1,14 @@
-const path = require('path');
+const path = require('path')
 require('dotenv').config({
   path: `.env.${process.env.NODE_ENV}`,
-});
+})
 
 module.exports = {
   siteMetadata: {
-    siteUrl: process.env.GATSBY_APP_URL,
+    siteUrl: process.env.GATSBY_APP_URL || 'http://localhost:8000',
+  },
+  flags: {
+    DEV_SSR: true,
   },
   plugins: [
     'gatsby-plugin-sharp',
@@ -14,20 +17,6 @@ module.exports = {
     'gatsby-plugin-image',
     'gatsby-plugin-dark-mode',
     'gatsby-plugin-postcss',
-    {
-      resolve: `gatsby-plugin-purgecss`,
-      options: {
-        printRejected: true,
-        develop: false,
-        tailwind: true,
-        purgeCSSOptions: {
-          safelist: {
-            standard: [],
-            deep: [],
-          },
-        },
-      },
-    },
     {
       resolve: 'gatsby-plugin-brotli',
     },
@@ -56,7 +45,8 @@ module.exports = {
     {
       resolve: 'gatsby-plugin-sitemap',
       options: {
-        resolveSiteUrl: () => process.env.GATSBY_APP_URL,
+        resolveSiteUrl: () =>
+          process.env.GATSBY_APP_URL || 'https://www.example.com',
       },
     },
     {
@@ -73,7 +63,6 @@ module.exports = {
         name: 'pages',
       },
     },
-    'gatsby-plugin-react-helmet',
     {
       resolve: 'gatsby-plugin-root-import',
       options: {
@@ -92,4 +81,4 @@ module.exports = {
     },
     'gatsby-plugin-netlify', // make sure to keep it last in the array
   ],
-};
+}

gatsby-ssr.js

@@ -0,0 +1,5 @@
+const seoData = require('./src/settings/seo.json')
+
+exports.onRenderBody = ({ setHtmlAttributes }) => {
+  setHtmlAttributes({ lang: seoData?.lang || 'en' })
+}

package.json

@@ -1,62 +1,58 @@
 {
   "name": "gatsby-starter-henlo",
-  "description": "Minimalistic starter for Gatsby v4, optimized for SEO & Performance.",
-  "version": "1.0.1",
+  "description": "Minimalistic starter for Gatsby v5, optimized for SEO & Performance.",
+  "version": "1.1.0",
   "author": "Wojciech Kałużny <[email protected]>",
   "browserslist": [
     "defaults"
   ],
   "dependencies": {
-    "babel-preset-gatsby": "^2.24.0",
-    "classnames": "^2.2.6",
-    "gatsby": "^4.24.0",
+    "clsx": "^1.2.1",
+    "gatsby": "^5.3.3",
     "gatsby-plugin-brotli": "^2.1.0",
     "gatsby-plugin-dark-mode": "^1.1.2",
-    "gatsby-plugin-image": "^2.9.0",
-    "gatsby-plugin-netlify": "^4.1.0",
-    "gatsby-plugin-netlify-cms": "^6.9.0",
-    "gatsby-plugin-postcss": "^5.20.0",
-    "gatsby-plugin-preload-fonts": "^3.9.0",
-    "gatsby-plugin-purgecss": "^6.0.0",
-    "gatsby-plugin-react-helmet": "^5.9.0",
+    "gatsby-plugin-image": "^3.3.2",
+    "gatsby-plugin-netlify": "^5.1.0",
+    "gatsby-plugin-netlify-cms": "^7.3.0",
+    "gatsby-plugin-postcss": "^6.3.0",
+    "gatsby-plugin-preload-fonts": "^4.3.1",
     "gatsby-plugin-root-import": "^2.0.6",
-    "gatsby-plugin-sharp": "^4.24.0",
-    "gatsby-plugin-sitemap": "^5.20.0",
+    "gatsby-plugin-sharp": "^5.3.2",
+    "gatsby-plugin-sitemap": "^6.3.1",
     "gatsby-plugin-svgr-loader": "^0.1.0",
-    "gatsby-remark-copy-linked-files": "^3.0.0",
-    "gatsby-remark-images": "^6.9.0",
+    "gatsby-remark-copy-linked-files": "^6.3.0",
+    "gatsby-remark-images": "^7.3.1",
     "gatsby-remark-relative-images": "^2.0.2",
-    "gatsby-source-filesystem": "^4.9.0",
-    "gatsby-transformer-remark": "^5.9.0",
-    "gatsby-transformer-sharp": "^4.9.0",
-    "lodash": "^4.17.21",
-    "lodash-webpack-plugin": "^0.11.6",
+    "gatsby-source-filesystem": "^5.3.1",
+    "gatsby-transformer-remark": "^6.3.2",
+    "gatsby-transformer-sharp": "^5.3.1",
     "netlify-cms-app": "^2.14.29",
     "netlify-cms-widget-id": "^1.0.1",
     "netlify-cms-widget-permalink": "^1.0.2",
     "parcel-bundler": "^1.9.4",
     "path-browserify": "^1.0.1",
     "prop-types": "^15.6.0",
-    "react": "^17.0.1",
-    "react-dom": "^17.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "react-helmet": "^6.1.0",
-    "react-hook-form": "^7.34.0",
-    "react-markdown": "^8.0.3"
+    "react-hook-form": "^7.41.3",
+    "react-markdown": "^8.0.4"
   },
   "keywords": [
     "gatsby"
   ],
   "license": "MIT",
   "main": "n/a",
   "scripts": {
-    "init": "netlify init",
-    "link": "netlify link",
-    "clean": "gatsby clean",
-    "start": "npm run develop",
-    "build": "npm run clean && gatsby build",
+    "start": "gatsby serve",
+    "dev": "npm run develop",
     "develop": "npm run clean && gatsby develop",
+    "build": "npm run clean && gatsby build",
     "serve:prod": "npm run clean && gatsby build && gatsby serve",
     "build:prod": "netlify build",
+    "init": "netlify init",
+    "link": "netlify link",
+    "clean": "gatsby clean",
     "deploy": "npm run clean && netlify build && netlify deploy",
     "deploy:prod": "npm run clean && netlify build && netlify deploy --prod",
     "format": "prettier --trailing-comma es5 --no-semi --single-quote --write \"{gatsby-*.js,src/**/*.js}\"",
@@ -67,10 +63,10 @@
     "@tailwindcss/forms": "^0.5.0",
     "@tailwindcss/typography": "^0.5.2",
     "autoprefixer": "^10.4.2",
-    "postcss": "^8.4.16",
-    "postcss-nested": "^5.0.6",
-    "prettier": "^2.2.1",
-    "prettier-plugin-tailwindcss": "^0.1.13",
+    "postcss": "^8.4.20",
+    "postcss-nested": "^6.0.0",
+    "prettier": "^2.8.1",
+    "prettier-plugin-tailwindcss": "^0.2.1",
     "tailwindcss": "^3.0.23"
   }
-}
+}

src/blocks/ContentImage.js

@@ -1,50 +1,51 @@
-import React from 'react';
-import Image from '../resolvers/Image';
-import Container from '../components/UI/Container';
-import Text from '../components/UI/Text';
-import Title from '../components/UI/Title';
-import Buttons from '../components/UI/Buttons';
-import classNames from 'classnames';
+import React from 'react'
+import Image from '../resolvers/Image'
+import Container from '../components/UI/Container'
+import Text from '../components/UI/Text'
+import Title from '../components/UI/Title'
+import Buttons from '../components/UI/Buttons'
+import clsx from 'clsx'
 
 export default function ContentImage({ data }) {
-  const isReversed = data?.variant === 'reversed';
+  const isReversed = data?.variant === 'reversed'
   return (
-    <section className='py-20 lg:py-32'>
-      <Container className='max-w-7xl'>
+    <section className="py-20 lg:py-32">
+      <Container className="max-w-7xl">
         <div
-          className={classNames(
+          className={clsx(
             'flex flex-col items-center justify-center gap-4 md:gap-6 lg:gap-10',
             { 'md:flex-row-reverse': isReversed },
             { 'md:flex-row': !isReversed },
-          )}>
-          <div className='lg:w-1/2'>
+          )}
+        >
+          <div className="lg:w-1/2">
             {data?.photo?.image && (
               <Image
                 src={data?.photo?.image}
                 alt={data?.photo?.alt}
-                className='w-full'
+                className="w-full"
               />
             )}
           </div>
-          <div className='lg:w-1/2'>
-            <div className='mx-auto max-w-2xl'>
+          <div className="lg:w-1/2">
+            <div className="mx-auto max-w-2xl">
               {data?.title && (
-                <Title Tag='h2' variant='lg'>
+                <Title Tag="h2" variant="lg">
                   {data?.title}
                 </Title>
               )}
               {data?.content && (
-                <Text className='mt-4 lg:text-lg lg:leading-relaxed'>
+                <Text className="mt-4 lg:text-lg lg:leading-relaxed">
                   {data?.content}
                 </Text>
               )}
               {data?.buttons && (
-                <Buttons buttons={data?.buttons} className='mt-4' />
+                <Buttons buttons={data?.buttons} className="mt-4" />
               )}
             </div>
           </div>
         </div>
       </Container>
     </section>
-  );
+  )
 }