Merge pull request #44 from clean-commit/1.1.1

1.1.1

content/blog/hello-world.md

@@ -4,18 +4,12 @@ type: post
 layout: post
 title: Philosophy behind Henlo.
 permalink: /blog/hello-world/
-thumbnail: /img/tezos-wpn1xnccgpw-unsplash.jpg
+thumbnail: /img/henlo-cover.png
 date: 2022-05-11T19:16:41.067Z
 author: a1d1172a-8736-47c1-831d-3e508729fee2
 excerpt: If you’re a WordPress developer then you must have heard about a plugin
   called Advanced Custom Fields and a Flexible Content field that allows editors
   to generate new pages easily.
-seo:
-  ogimage: /img/tezos-wpn1xnccgpw-unsplash.jpg
-  title: Hello World
-  description: If you’re a WordPress developer then you must have heard about a
-    plugin called Advanced Custom Fields and a Flexible Content field that
-    allows editors to generate new pages easily.
 ---
 
 If you’re a WordPress developer then you must have heard about a plugin called Advanced Custom Fields and a Flexible Content field that allows editors to generate new pages easily.

content/pages/my-title.md → content/pages/example-blog.md

@@ -13,6 +13,4 @@ blocks:
     variant: default
   - type: recentArticles
     title: Recent Articles
-seo:
-  ogimage: /img/henlo-cover.png
 ---

content/pages/home-page.md

@@ -4,7 +4,7 @@ type: page
 layout: page-builder
 title: Home Page
 permalink: /
-thumbnail: ""
+thumbnail: ''
 blocks:
   - type: hero
     title: Henlo.
@@ -32,18 +32,21 @@ blocks:
         content: Create forms with Netlify CMS, powered by
           [react-hook-form](https://react-hook-form.com/).
       - title: Integrated Previews
-        content: Blocks created by developers are instantly available for previews from
+        content:
+          Blocks created by developers are instantly available for previews from
           Netlify CMS layout
       - title: Permalink-based page generation
-        content: "Automatically generated pages based on permalinks. "
+        content: 'Automatically generated pages based on permalinks. '
       - title: Modify Navigation with ease
-        content: Navigation can be modified with ease, without a need for changing the
+        content:
+          Navigation can be modified with ease, without a need for changing the
           code base
-    content: ""
+    content: ''
   - type: content_image
     variant: reversed
     title: Block-based page creator with Previews
-    content: Create blocks and reuse them across different pages that can be created
+    content:
+      Create blocks and reuse them across different pages that can be created
       using Netlify CMS UI. Previews will be generated automatically for all
       blocks!
     buttons:
@@ -82,6 +85,4 @@ blocks:
     photo:
       image: /img/frame-72.png
       alt: Netlify CMS configuration with Henlo
-seo:
-  ogimage: /img/henlo-cover.png
 ---

content/pages/page-name.md

@@ -35,7 +35,4 @@ blocks:
     variant: default
 thumbnail: ''
 date: 2022-04-11T22:00:00.000Z
-seo:
-  ogimage: https://images.unsplash.com/photo-1521791136064-7986c2920216?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1469&q=80
-  title: Welcome to my page!
 ---

gatsby-node.js

@@ -3,6 +3,38 @@ const path = require('path');
 const fs = require('fs');
 const { createFilePath } = require('gatsby-source-filesystem');
 
+exports.createSchemaCustomization = ({ actions }) => {
+  const { createTypes } = actions;
+  const defs = `
+  type MarkdownRemark implements Node {
+      frontmatter: MarkdownRemarkFrontmatter
+  }
+  
+  type MarkdownRemarkFrontmatter {
+    id: String
+    title: String
+    seo: MarkdownRemarkFrontmatterSeo
+    blocks: [MarkdownRemarkFrontmatterBlocks]
+  }
+  
+  type MarkdownRemarkFrontmatterBlocks {
+    type: String
+    photo: MarkdownRemarkFrontmatterBlocksPhoto
+  }
+
+  type MarkdownRemarkFrontmatterBlocksPhoto @dontInfer  {
+    alt: String
+    image: File @fileByRelativePath
+  }
+
+  type MarkdownRemarkFrontmatterSeo {
+    title: String
+    description: String
+    ogimage: File @fileByRelativePath
+  }`;
+  createTypes(defs);
+};
+
 exports.createPages = ({ actions, graphql }) => {
   const { createPage } = actions;
 
@@ -95,14 +127,3 @@ exports.onCreateWebpackConfig = ({ actions }) => {
     },
   });
 };
-
-exports.createSchemaCustomization = ({ actions }) => {
-  const { createTypes } = actions;
-  const defs = `
-  type MarkdownRemarkFrontmatterSeo @infer {
-    title: String
-    description: String
-    image: File
-  }`;
-  createTypes(defs);
-};

package.json

@@ -69,4 +69,4 @@
     "prettier-plugin-tailwindcss": "^0.2.1",
     "tailwindcss": "^3.0.23"
   }
-}
+}

src/components/Head/DefaultHead.js

@@ -1,117 +1,117 @@
-import React from 'react'
-import { graphql } from 'gatsby'
-import { useLocation } from '@reach/router'
-import { getSrc } from 'gatsby-plugin-image'
-import * as seoData from '../../settings/seo.json'
+import React from 'react';
+import { graphql } from 'gatsby';
+import { useLocation } from '@reach/router';
+import { getSrc } from 'gatsby-plugin-image';
+import * as seoData from '../../settings/seo.json';
 
 export default function DefaultHead({ data, children }) {
-  const { pathname } = useLocation()
-  const metadata = { ...seoData, siteUrl: process.env.GATSBY_APP_URL }
-  const metaDescription = data.description || metadata.description
-  const title = data.title || metadata.title
+  const { pathname } = useLocation();
+  const metadata = { ...seoData, siteUrl: process.env.GATSBY_APP_URL };
+  const metaDescription = data?.description || metadata?.description;
+  const title = data?.title || metadata?.title;
   const image = data?.ogimage?.childImageSharp
-    ? `${metadata.siteUrl}${getSrc(data.ogimage)}`
-    : `${metadata.siteUrl}${metadata.image}`
+    ? `${metadata.siteUrl}${getSrc(data?.ogimage)}`
+    : `${metadata.siteUrl}${metadata.image}`;
 
-  const fullTitle = `${title} ${metadata.separator} ${metadata.baseTitle}`
+  const fullTitle = `${title} ${metadata.separator} ${metadata.baseTitle}`;
 
   return (
     <>
-      <title id="t">{fullTitle}</title>
-      <meta id="description" name="description" content={metaDescription} />
-      <meta id="ot" property="og:title" content={fullTitle} />
+      <title id='t'>{fullTitle}</title>
+      <meta id='description' name='description' content={metaDescription} />
+      <meta id='ot' property='og:title' content={fullTitle} />
       <meta
-        id="ou"
-        property="og:url"
+        id='ou'
+        property='og:url'
         content={`${metadata.siteUrl}${pathname}`}
       />
-      <meta id="oty" property="og:type" content="website" />
-      <meta id="oi" property="og:image" content={image} />
-      <meta id="od" property="og:description" content={metaDescription} />
-      <meta id="tt" name="twitter:title" content={fullTitle} />
-      <meta id="ti" name="twitter:image" content={image} />
-      <meta id="td" name="twitter:description" content={metaDescription} />
+      <meta id='oty' property='og:type' content='website' />
+      <meta id='oi' property='og:image' content={image} />
+      <meta id='od' property='og:description' content={metaDescription} />
+      <meta id='tt' name='twitter:title' content={fullTitle} />
+      <meta id='ti' name='twitter:image' content={image} />
+      <meta id='td' name='twitter:description' content={metaDescription} />
       {children}
-      <meta name="msapplication-TileColor" content={metadata.themeColor} />
-      <meta name="theme-color" content={metadata.themeColor} />
-      <meta name="twitter:card" content="summary_large_image" />
-      <link rel="canonical" href={`${metadata.siteUrl}${pathname}`} />
-      <link rel="manifest" href="/img/favicons/manifest.json" />
+      <meta name='msapplication-TileColor' content={metadata.themeColor} />
+      <meta name='theme-color' content={metadata.themeColor} />
+      <meta name='twitter:card' content='summary_large_image' />
+      <link rel='canonical' href={`${metadata.siteUrl}${pathname}`} />
+      <link rel='manifest' href='/img/favicons/manifest.json' />
       <link
-        rel="apple-touch-icon"
-        sizes="57x57"
-        href="/img/favicons/apple-icon-57x57.png"
+        rel='apple-touch-icon'
+        sizes='57x57'
+        href='/img/favicons/apple-icon-57x57.png'
       />
       <link
-        rel="apple-touch-icon"
-        sizes="60x60"
-        href="/img/favicons/apple-icon-60x60.png"
+        rel='apple-touch-icon'
+        sizes='60x60'
+        href='/img/favicons/apple-icon-60x60.png'
       />
       <link
-        rel="apple-touch-icon"
-        sizes="72x72"
-        href="/img/favicons/apple-icon-72x72.png"
+        rel='apple-touch-icon'
+        sizes='72x72'
+        href='/img/favicons/apple-icon-72x72.png'
       />
       <link
-        rel="apple-touch-icon"
-        sizes="76x76"
-        href="/img/favicons/apple-icon-76x76.png"
+        rel='apple-touch-icon'
+        sizes='76x76'
+        href='/img/favicons/apple-icon-76x76.png'
       />
       <link
-        rel="apple-touch-icon"
-        sizes="114x114"
-        href="/img/favicons/apple-icon-114x114.png"
+        rel='apple-touch-icon'
+        sizes='114x114'
+        href='/img/favicons/apple-icon-114x114.png'
       />
       <link
-        rel="apple-touch-icon"
-        sizes="120x120"
-        href="/img/favicons/apple-icon-120x120.png"
+        rel='apple-touch-icon'
+        sizes='120x120'
+        href='/img/favicons/apple-icon-120x120.png'
       />
       <link
-        rel="apple-touch-icon"
-        sizes="144x144"
-        href="/img/favicons/apple-icon-144x144.png"
+        rel='apple-touch-icon'
+        sizes='144x144'
+        href='/img/favicons/apple-icon-144x144.png'
       />
       <link
-        rel="apple-touch-icon"
-        sizes="152x152"
-        href="/img/favicons/apple-icon-152x152.png"
+        rel='apple-touch-icon'
+        sizes='152x152'
+        href='/img/favicons/apple-icon-152x152.png'
       />
       <link
-        rel="apple-touch-icon"
-        sizes="180x180"
-        href="/img/favicons/apple-icon-180x180.png"
+        rel='apple-touch-icon'
+        sizes='180x180'
+        href='/img/favicons/apple-icon-180x180.png'
       />
       <link
-        rel="icon"
-        type="image/png"
-        sizes="192x192"
-        href="/img/favicons/android-icon-192x192.png"
+        rel='icon'
+        type='image/png'
+        sizes='192x192'
+        href='/img/favicons/android-icon-192x192.png'
       />
       <link
-        rel="icon"
-        type="image/png"
-        sizes="32x32"
-        href="/img/favicons/favicon-32x32.png"
+        rel='icon'
+        type='image/png'
+        sizes='32x32'
+        href='/img/favicons/favicon-32x32.png'
       />
       <link
-        rel="icon"
-        type="image/png"
-        sizes="96x96"
-        href="/img/favicons/favicon-96x96.png"
+        rel='icon'
+        type='image/png'
+        sizes='96x96'
+        href='/img/favicons/favicon-96x96.png'
       />
       <link
-        rel="icon"
-        type="image/png"
-        sizes="16x16"
-        href="/img/favicons/favicon-16x16.png"
+        rel='icon'
+        type='image/png'
+        sizes='16x16'
+        href='/img/favicons/favicon-16x16.png'
       />
       <meta
-        name="msapplication-TileImage"
-        content="/img/favicons/ms-icon-144x144.png"
+        name='msapplication-TileImage'
+        content='/img/favicons/ms-icon-144x144.png'
       />
     </>
-  )
+  );
 }
 
 export const query = graphql`
@@ -131,4 +131,4 @@ export const query = graphql`
       }
     }
   }
-`
+`;

src/settings/main.json

@@ -1,5 +1,9 @@
 {
   "nav": [
+    {
+      "name": "Example Blog",
+      "permalink": "/blog/"
+    },
     {
       "name": "Documentation",
       "permalink": "https://github.com/clean-commit/gatsby-starter-henlo"