metadata, singequote, jsonld

.eslintrc.js

@@ -1,34 +1,34 @@
 module.exports = {
-  parser: "@typescript-eslint/parser",
-  extends: ["plugin:@typescript-eslint/recommended", "plugin:prettier/recommended"],
-  plugins: ["@typescript-eslint", "prettier"],
+  parser: '@typescript-eslint/parser',
+  extends: ['plugin:@typescript-eslint/recommended', 'plugin:prettier/recommended'],
+  plugins: ['@typescript-eslint', 'prettier'],
   parserOptions: {
     ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-    sourceType: "module", // Allows for the use of imports
+    sourceType: 'module', // Allows for the use of imports
   },
   env: {
     browser: true,
     node: true,
   },
   rules: {
-    "@typescript-eslint/explicit-module-boundary-types": "off",
-    "@typescript-eslint/no-non-null-assertion": "off",
-    quotes: "off",
-    "@typescript-eslint/quotes": [
+    '@typescript-eslint/explicit-module-boundary-types': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    quotes: 'off',
+    '@typescript-eslint/quotes': [
       1,
-      "double",
+      'single',
       {
         avoidEscape: true,
       },
     ],
-    indent: ["error", 2, { SwitchCase: 1 }],
-    "prettier/prettier": [
-      "error",
+    indent: ['error', 2, { SwitchCase: 1 }],
+    'prettier/prettier': [
+      'error',
       {
-        arrowParens: "avoid",
-        trailingComma: "es5",
+        arrowParens: 'avoid',
+        trailingComma: 'es5',
         semi: false,
-        singleQuote: false,
+        singleQuote: true,
         printWidth: 120,
       },
     ],

README.md

@@ -9,10 +9,13 @@ This is the Hello Tham Corporate Website Static Web App built using the followin
 - [TailwindCSS](https://tailwindcss.com) and [TailwindUI](https://tailwindui.com)
 - [HeroIcons](https://heroicons.com/)
 - [HeadlessUI](https://headlessui.dev/)
-- [unDraw](https://undraw.co/)
+- [unDraw](https://undraw.co/) for illustrations
 - [MDX](https://mdxjs.com/) and [Markdown](https://www.markdownguide.org/)
 - [ESLint](https://eslint.org)for type-checking
 - [SendGrid](https://sendgrid.com/) email delivery
+- [Schema.org](https://schema.org/) and [JSON for Linking Data](https://json-ld.org/)
+- [Open Graph](https://ogp.me/) used by [Facebook](https://developers.facebook.com/docs/sharing/webmasters/#markup)
+- [Twitter Cards](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/abouts-cards)
 
 It follows the [JAMstack architecture](https://jamstack.org) by using Git as a single source of truth, and is deployed on Gatsby Cloud.
 

gatsby-browser.js

@@ -3,4 +3,4 @@
  *
  * See: https://www.gatsbyjs.com/docs/browser-apis/
  */
-import "./src/styles/global.css"
+import './src/styles/global.css'

gatsby-config.js

@@ -1,102 +1,105 @@
 module.exports = {
   siteMetadata: {
-    title: "Hello Tham",
+    title: 'Hello Tham',
     author: {
-      name: "Hello Tham",
-      url: "https://hellotham.com",
-      summary: "a boutique management and strategy consulting company",
+      name: 'Chris Tham',
+      url: 'https://christham.net',
+      summary: 'Founder of Hello Tham',
     },
     description:
-      "Hello Tham is a boutique management consulting firm. We deliver consulting services to clients around the world. We specialise in Business and IT strategies, operating models, strategic roadmaps, enterprise architecture, analytics and business process design. We also assist our clients in implementing our recommendations, models and strategies.",
-    siteUrl: "https://hellotham.com/",
+      'Hello Tham is a boutique management consulting firm. We specialise in Business and IT strategies, operating models, strategic roadmaps, enterprise architecture, analytics and business process design.',
+    siteUrl: 'https://hellotham.com/',
+    location: 'Sydney, NSW, Australia',
     social: {
-      facebook: "https://www.facebook.com/HelloThamCom",
-      instagram: "https://www.instagram.com/HelloThamCom/",
-      twitter: "https://twitter.com/HelloThamCom",
-      linkedin: "https://www.linkedin.com/company/17950469",
-      github: "https://github.com/hellotham",
+      email: 'mailto:[email protected]',
+      phone: 'tel:+61413008577',
+      facebook: 'https://www.facebook.com/HelloThamCom',
+      instagram: 'https://www.instagram.com/HelloThamCom/',
+      twitter: 'https://twitter.com/HelloThamCom',
+      linkedin: 'https://www.linkedin.com/company/17950469',
+      github: 'https://github.com/hellotham',
     },
   },
   plugins: [
-    "gatsby-plugin-svgr-svgo",
-    "gatsby-plugin-postcss",
-    "gatsby-plugin-react-helmet",
-    "gatsby-plugin-mdx-source-name",
-    "gatsby-plugin-image",
+    'gatsby-plugin-svgr-svgo',
+    'gatsby-plugin-postcss',
+    'gatsby-plugin-react-helmet',
+    'gatsby-plugin-mdx-source-name',
+    'gatsby-plugin-image',
     {
-      resolve: "gatsby-source-filesystem",
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: "images",
+        name: 'images',
         path: `${__dirname}/src/images`,
       },
     },
-    "gatsby-transformer-sharp",
-    "gatsby-plugin-sharp",
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-sharp',
     {
-      resolve: "gatsby-source-filesystem",
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: "pages",
+        name: 'pages',
         path: `${__dirname}/src/pages/`,
       },
     },
     {
-      resolve: "gatsby-source-filesystem",
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: "posts",
+        name: 'posts',
         path: `${__dirname}/src/posts/`,
       },
     },
     {
-      resolve: "gatsby-plugin-page-creator",
+      resolve: 'gatsby-plugin-page-creator',
       options: {
         path: `${__dirname}/src/pages/`,
-        ignore: ["__generated__/*"],
+        ignore: ['__generated__/*'],
       },
     },
     {
-      resolve: "gatsby-plugin-page-creator",
+      resolve: 'gatsby-plugin-page-creator',
       options: {
         path: `${__dirname}/src/posts`,
       },
     },
     {
-      resolve: "gatsby-plugin-mdx",
+      resolve: 'gatsby-plugin-mdx',
       options: {
         // defaultLayouts: {
         //   posts: require.resolve("./src/templates/mdx-template.tsx"),
         //   default: require.resolve("./src/templates/mdx-template.tsx"),
         // },
-        extensions: [".mdx", ".md"],
+        extensions: ['.mdx', '.md'],
         gatsbyRemarkPlugins: [
           {
-            resolve: "gatsby-remark-images",
+            resolve: 'gatsby-remark-images',
             options: {
               maxWidth: 2048,
               linkImagesToOriginal: false,
             },
           },
-          { resolve: "gatsby-remark-copy-linked-files" },
-          { resolve: "gatsby-remark-smartypants" },
+          { resolve: 'gatsby-remark-copy-linked-files' },
+          { resolve: 'gatsby-remark-smartypants' },
         ],
-        remarkPlugins: [{ resolve: "remark-slug" }, { resolve: "@mapbox/rehype-prism" }],
+        remarkPlugins: [{ resolve: 'remark-slug' }, { resolve: '@mapbox/rehype-prism' }],
       },
     },
     {
-      resolve: "gatsby-plugin-manifest",
+      resolve: 'gatsby-plugin-manifest',
       options: {
-        name: "Hello Tham",
-        short_name: "HelloTham",
-        start_url: "/",
-        background_color: "#ffffff",
-        theme_color: "#660099",
-        display: "minimal-ui",
-        icon: "src/images/logo.png", // This path is relative to the root of the site.
+        name: 'Hello Tham',
+        short_name: 'HelloTham',
+        start_url: '/',
+        background_color: '#ffffff',
+        theme_color: '#660099',
+        display: 'minimal-ui',
+        icon: 'src/images/logo.png', // This path is relative to the root of the site.
       },
     },
-    "gatsby-plugin-robots-txt",
-    "gatsby-plugin-sitemap",
+    'gatsby-plugin-robots-txt',
+    'gatsby-plugin-sitemap',
     {
-      resolve: "gatsby-plugin-feed-mdx",
+      resolve: 'gatsby-plugin-feed-mdx',
       options: {
         query: `
           {
@@ -116,9 +119,9 @@ module.exports = {
                 return Object.assign({}, edge.node.frontmatter, {
                   description: edge.node.frontmatter.description,
                   date: edge.node.frontmatter.date,
-                  url: site.siteMetadata.siteUrl + "/post" + edge.node.slug,
-                  guid: site.siteMetadata.siteUrl + "/post" + edge.node.slug,
-                  custom_elements: [{ "content:encoded": edge.node.html }],
+                  url: site.siteMetadata.siteUrl + '/post' + edge.node.slug,
+                  guid: site.siteMetadata.siteUrl + '/post' + edge.node.slug,
+                  custom_elements: [{ 'content:encoded': edge.node.html }],
                 })
               })
             },
@@ -142,8 +145,8 @@ module.exports = {
                 }
               }
             `,
-            output: "/rss.xml",
-            title: "Hello Tham",
+            output: '/rss.xml',
+            title: 'Hello Tham',
             // optional configuration to insert feed reference in pages:
             // if `string` is used, it will be used to create RegExp and then test if pathname of
             // current page satisfied this regular expression;
@@ -156,6 +159,6 @@ module.exports = {
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // "gatsby-plugin-offline",
-    "gatsby-plugin-gatsby-cloud",
+    'gatsby-plugin-gatsby-cloud',
   ],
 }

gatsby-node.js

@@ -6,13 +6,13 @@
  */
 
 // const fs = require(`fs`)
-const path = require("path")
+const path = require('path')
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       alias: {
-        "@": path.resolve(__dirname, "src"),
+        '@': path.resolve(__dirname, 'src'),
       },
     },
   })
@@ -31,10 +31,10 @@ exports.createSchemaCustomization = ({ actions }) => {
   `)
 }
 
-const _ = require("lodash")
+const _ = require('lodash')
 exports.createPages = async ({ actions, graphql, reporter }) => {
   const { createPage } = actions
-  const tagTemplate = path.resolve("src/templates/tag-template.tsx")
+  const tagTemplate = path.resolve('src/templates/tag-template.tsx')
   const result = await graphql(`
     {
       tagsGroup: allMdx(limit: 2000) {
@@ -46,7 +46,7 @@ exports.createPages = async ({ actions, graphql, reporter }) => {
   `)
   // handle errors
   if (result.errors) {
-    reporter.panicOnBuild("Error while running GraphQL query.")
+    reporter.panicOnBuild('Error while running GraphQL query.')
     return
   }
   // Extract tag data from query

package.json

@@ -57,7 +57,9 @@
     "react-dom": "^17.0.2",
     "react-helmet": "^6.1.0",
     "react-hook-form": "^7.17.2",
-    "remark-slug": "^7.0.0"
+    "react-schemaorg": "^2.0.0",
+    "remark-slug": "^7.0.0",
+    "schema-dts": "^1.0.0"
   },
   "devDependencies": {
     "@types/mdx-js__react": "^1.5.4",

package3.json

@@ -8,14 +8,7 @@
     "url": "https://github.com/ChristineTham/hellotham-gatsby/issues"
   },
   "homepage": "https://hellotham.com",
-  "keywords": [
-    "gatsby",
-    "typescript",
-    "MDX",
-    "Prism",
-    "TailwindCSS",
-    "blog"
-  ],
+  "keywords": ["gatsby", "typescript", "MDX", "Prism", "TailwindCSS", "blog"],
   "license": "0BSD",
   "main": "n/a",
   "repository": {

src/api/sendgrid.js

@@ -1,5 +1,5 @@
 // eslint-disable-next-line @typescript-eslint/no-var-requires
-const sendgrid = require("@sendgrid/mail")
+const sendgrid = require('@sendgrid/mail')
 //Your API Key from Sendgrid
 sendgrid.setApiKey(process.env.SENDGRID_API_KEY)
 const message = {
@@ -9,8 +9,8 @@ const message = {
 
 const handler = (req, res) => {
   try {
-    if (req.method !== "POST") {
-      res.json({ message: "Try a POST!" })
+    if (req.method !== 'POST') {
+      res.json({ message: 'Try a POST!' })
     }
 
     if (req.body) {
@@ -23,7 +23,7 @@ const handler = (req, res) => {
     return sendgrid.send(message).then(
       () => {
         res.status(200).json({
-          message: "I will send email",
+          message: 'I will send email',
         })
       },
       error => {
@@ -37,7 +37,7 @@ const handler = (req, res) => {
     )
   } catch (err) {
     console.log(err)
-    return res.status(500).json({ message: "There was an error", error: err })
+    return res.status(500).json({ message: 'There was an error', error: err })
   }
 }
 

src/components/PageHero.tsx

@@ -1,19 +1,19 @@
-import * as React from "react"
+import * as React from 'react'
 
 interface PageHeroProps {
   title: string
   description?: string
   image?: string
 }
 
-import defaultImage from "@/svg/undraw_design_components_9vy6-2.svg"
+import defaultImage from '@/svg/undraw/undraw_design_components_9vy6-2.svg'
 
 const PageHero = ({ title, description, image }: PageHeroProps) => (
-  <div className="mb-4 md:mb-0 w-full max-w-screen-xl mx-auto relative" style={{ height: "24em" }}>
+  <div className="mb-4 md:mb-0 w-full max-w-screen-xl mx-auto relative" style={{ height: '24em' }}>
     <div
       className="absolute left-0 bottom-0 w-full h-full z-10"
       style={{
-        backgroundImage: "linear-gradient(180deg,transparent,rgba(0,0,0,.7))",
+        backgroundImage: 'linear-gradient(180deg,transparent,rgba(0,0,0,.7))',
       }}
     ></div>
     <img