From e851e2749b2d6f56f5fc80c21bc02ca42677fd2d Mon Sep 17 00:00:00 2001 From: Christine Tham Date: Tue, 12 Oct 2021 21:29:54 +1100 Subject: [PATCH] metadata, singequote, jsonld --- .eslintrc.js | 30 +-- README.md | 5 +- gatsby-browser.js | 2 +- gatsby-config.js | 103 +++++----- gatsby-node.js | 10 +- package.json | 4 +- package3.json | 9 +- src/api/sendgrid.js | 10 +- src/components/PageHero.tsx | 8 +- src/components/PostHero.tsx | 14 +- src/components/bloghero.tsx | 8 +- src/components/blogroll.tsx | 14 +- src/components/features.tsx | 20 +- src/components/findoutmore.tsx | 32 +-- src/components/footer.tsx | 39 ++-- src/components/header.tsx | 42 ++-- src/components/hero.tsx | 30 +-- src/components/json-ld.tsx | 192 ++++++++++++++++++ src/components/layout.tsx | 18 +- src/components/metadata.ts | 56 +++++ src/components/seo.tsx | 42 ++-- src/components/tags.tsx | 6 +- src/declarations.d.ts | 6 +- src/images/{ => site}/favicon-16x16.png | Bin src/images/{ => site}/favicon-32x32.png | Bin src/{svg => images/site}/favicon.ico | Bin .../logo-square.svg => images/site/logo.svg} | 0 src/pages/404.js | 6 +- src/pages/contactus.tsx | 73 +++---- src/pages/index.tsx | 14 +- src/pages/posts.tsx | 21 +- src/pages/tags.tsx | 18 +- src/pages/{mdx.fields__source}/{mdx.slug}.tsx | 38 +++- src/svg/icons/blog.svg | 15 ++ src/svg/{ => icons}/email.svg | 0 src/svg/{ => icons}/facebook.svg | 0 src/svg/icons/favicon.ico | Bin 0 -> 318 bytes src/svg/icons/gatsbyjs.svg | 17 ++ src/svg/icons/github.svg | 15 ++ src/svg/{ => icons}/instagram.svg | 0 src/svg/icons/jamstack.svg | 17 ++ src/svg/{ => icons}/linkedin.svg | 0 src/svg/icons/mdx.svg | 1 + src/svg/{ => icons}/phone.svg | 0 src/svg/icons/react.svg | 35 ++++ src/svg/icons/tailwindcss.svg | 4 + src/svg/{ => icons}/twitter.svg | 0 src/svg/icons/typescript.svg | 3 + src/svg/{ => logo}/hellotham logo.svg | 0 src/svg/{ => logo}/hellotham.svg | 0 .../logo-square.svg} | 0 src/svg/{ => logo}/logo-title.svg | 0 src/svg/{ => logo}/logo.svg | 0 src/svg/logo/safari-pinned-tab.svg | 12 ++ .../{ => undraw}/undraw_Add_post_re_174w.svg | 0 .../undraw_All_the_data_re_hh4w.svg | 0 .../undraw_In_progress_re_m1l6.svg | 0 src/svg/{ => undraw}/undraw_Logic_re_nyb4.svg | 0 .../undraw_Modern_professional_re_3b6l.svg | 0 .../{ => undraw}/undraw_Portfolio_re_qwm5.svg | 0 .../{ => undraw}/undraw_Team_page_re_cffb.svg | 0 .../{ => undraw}/undraw_Windows_re_uo4w.svg | 0 .../{ => undraw}/undraw_contact_us_15o2.svg | 0 .../undraw_design_components_9vy6-2.svg | 0 .../undraw_design_inspiration_fmjm.svg | 0 .../{ => undraw}/undraw_destinations_fpv7.svg | 0 .../undraw_features_overview_jg7a.svg | 0 .../{ => undraw}/undraw_ideas_flow_cy7b.svg | 0 .../undraw_informed_decision_p2lh.svg | 0 .../{ => undraw}/undraw_navigator_a479.svg | 0 .../{ => undraw}/undraw_our_solution_htvp.svg | 0 .../{ => undraw}/undraw_right_places_h9n3.svg | 0 .../undraw_through_the_park_lxnl.svg | 0 src/templates/mdx-template.tsx | 14 +- src/templates/tag-template.tsx | 18 +- tailwind.config.js | 8 +- yarn.lock | 10 + 77 files changed, 717 insertions(+), 322 deletions(-) create mode 100644 src/components/json-ld.tsx create mode 100644 src/components/metadata.ts rename src/images/{ => site}/favicon-16x16.png (100%) rename src/images/{ => site}/favicon-32x32.png (100%) rename src/{svg => images/site}/favicon.ico (100%) rename src/{svg/logo-square.svg => images/site/logo.svg} (100%) create mode 100644 src/svg/icons/blog.svg rename src/svg/{ => icons}/email.svg (100%) rename src/svg/{ => icons}/facebook.svg (100%) create mode 100644 src/svg/icons/favicon.ico create mode 100644 src/svg/icons/gatsbyjs.svg create mode 100644 src/svg/icons/github.svg rename src/svg/{ => icons}/instagram.svg (100%) create mode 100644 src/svg/icons/jamstack.svg rename src/svg/{ => icons}/linkedin.svg (100%) create mode 100644 src/svg/icons/mdx.svg rename src/svg/{ => icons}/phone.svg (100%) create mode 100644 src/svg/icons/react.svg create mode 100644 src/svg/icons/tailwindcss.svg rename src/svg/{ => icons}/twitter.svg (100%) create mode 100644 src/svg/icons/typescript.svg rename src/svg/{ => logo}/hellotham logo.svg (100%) rename src/svg/{ => logo}/hellotham.svg (100%) rename src/svg/{safari-pinned-tab.svg => logo/logo-square.svg} (100%) rename src/svg/{ => logo}/logo-title.svg (100%) rename src/svg/{ => logo}/logo.svg (100%) create mode 100644 src/svg/logo/safari-pinned-tab.svg rename src/svg/{ => undraw}/undraw_Add_post_re_174w.svg (100%) rename src/svg/{ => undraw}/undraw_All_the_data_re_hh4w.svg (100%) rename src/svg/{ => undraw}/undraw_In_progress_re_m1l6.svg (100%) rename src/svg/{ => undraw}/undraw_Logic_re_nyb4.svg (100%) rename src/svg/{ => undraw}/undraw_Modern_professional_re_3b6l.svg (100%) rename src/svg/{ => undraw}/undraw_Portfolio_re_qwm5.svg (100%) rename src/svg/{ => undraw}/undraw_Team_page_re_cffb.svg (100%) rename src/svg/{ => undraw}/undraw_Windows_re_uo4w.svg (100%) rename src/svg/{ => undraw}/undraw_contact_us_15o2.svg (100%) rename src/svg/{ => undraw}/undraw_design_components_9vy6-2.svg (100%) rename src/svg/{ => undraw}/undraw_design_inspiration_fmjm.svg (100%) rename src/svg/{ => undraw}/undraw_destinations_fpv7.svg (100%) rename src/svg/{ => undraw}/undraw_features_overview_jg7a.svg (100%) rename src/svg/{ => undraw}/undraw_ideas_flow_cy7b.svg (100%) rename src/svg/{ => undraw}/undraw_informed_decision_p2lh.svg (100%) rename src/svg/{ => undraw}/undraw_navigator_a479.svg (100%) rename src/svg/{ => undraw}/undraw_our_solution_htvp.svg (100%) rename src/svg/{ => undraw}/undraw_right_places_h9n3.svg (100%) rename src/svg/{ => undraw}/undraw_through_the_park_lxnl.svg (100%) diff --git a/.eslintrc.js b/.eslintrc.js index ddf7b71..c3c646b 100644 --- a/.eslintrc.js +++ b/.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, }, ], diff --git a/README.md b/README.md index 1ec31df..2df7282 100644 --- a/README.md +++ b/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. diff --git a/gatsby-browser.js b/gatsby-browser.js index ecbce39..4932814 100644 --- a/gatsby-browser.js +++ b/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' diff --git a/gatsby-config.js b/gatsby-config.js index 6d14454..a677f2c 100644 --- a/gatsby-config.js +++ b/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:info@hellotham.com', + 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', ], } diff --git a/gatsby-node.js b/gatsby-node.js index 773b28b..399d846 100644 --- a/gatsby-node.js +++ b/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 diff --git a/package.json b/package.json index 3d34245..49cf496 100644 --- a/package.json +++ b/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", diff --git a/package3.json b/package3.json index 3d34245..af1ab52 100644 --- a/package3.json +++ b/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": { diff --git a/src/api/sendgrid.js b/src/api/sendgrid.js index 31bde4a..3e7149f 100644 --- a/src/api/sendgrid.js +++ b/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 }) } } diff --git a/src/components/PageHero.tsx b/src/components/PageHero.tsx index be0b82f..b13f9d2 100644 --- a/src/components/PageHero.tsx +++ b/src/components/PageHero.tsx @@ -1,4 +1,4 @@ -import * as React from "react" +import * as React from 'react' interface PageHeroProps { title: string @@ -6,14 +6,14 @@ interface PageHeroProps { 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) => ( -
+
( -
+
- {tags ? : ""} + {tags ? : ''}

{title}

{description}

{author ? ( @@ -44,7 +44,7 @@ const PostHero = ({ title, description, author, date, image, tags }: PostHeroPro
) : ( - "" + '' )}
diff --git a/src/components/bloghero.tsx b/src/components/bloghero.tsx index ae06366..f860ecf 100644 --- a/src/components/bloghero.tsx +++ b/src/components/bloghero.tsx @@ -1,8 +1,8 @@ -import * as React from "react" -import { graphql, useStaticQuery } from "gatsby" -import { getImage } from "gatsby-plugin-image" +import * as React from 'react' +import { graphql, useStaticQuery } from 'gatsby' +import { getImage } from 'gatsby-plugin-image' -import PostHero from "@/components/PostHero" +import PostHero from '@/components/PostHero' export default function BlogHero() { const imagequery = useStaticQuery(graphql` diff --git a/src/components/blogroll.tsx b/src/components/blogroll.tsx index 1bfe9f7..2218e4f 100644 --- a/src/components/blogroll.tsx +++ b/src/components/blogroll.tsx @@ -1,10 +1,10 @@ -import * as React from "react" -import { graphql, Link, useStaticQuery } from "gatsby" +import * as React from 'react' +import { graphql, Link, useStaticQuery } from 'gatsby' -import { GatsbyImage, getImage, ImageDataLike } from "gatsby-plugin-image" -import { CalendarIcon, UserCircleIcon } from "@heroicons/react/outline" +import { GatsbyImage, getImage, ImageDataLike } from 'gatsby-plugin-image' +import { CalendarIcon, UserCircleIcon } from '@heroicons/react/outline' -import Tags from "@/components/tags" +import Tags from '@/components/tags' const query = graphql` query { @@ -62,12 +62,12 @@ const BlogRoll = ({ tag }: BlogRollProps) => {
- {node.frontmatter.tags ? : ""} + {node.frontmatter.tags ? : ''}

{node.frontmatter.title} diff --git a/src/components/features.tsx b/src/components/features.tsx index fab2407..7c8f8ac 100644 --- a/src/components/features.tsx +++ b/src/components/features.tsx @@ -1,26 +1,26 @@ -import * as React from "react" -import { MapIcon, SparklesIcon, PuzzleIcon, PresentationChartBarIcon } from "@heroicons/react/outline" +import * as React from 'react' +import { MapIcon, SparklesIcon, PuzzleIcon, PresentationChartBarIcon } from '@heroicons/react/outline' const features = [ { - name: "Business and IT Strategies", - description: "Business and IT strategy and plans, operating models, business process design and standardisation", + name: 'Business and IT Strategies', + description: 'Business and IT strategy and plans, operating models, business process design and standardisation', icon: SparklesIcon, }, { - name: "Enterprise Architecture", + name: 'Enterprise Architecture', description: - "Enterprise analysis, design, planning, and implementation for the successful development and execution of a strategy", + 'Enterprise analysis, design, planning, and implementation for the successful development and execution of a strategy', icon: PuzzleIcon, }, { - name: "Analytics and Data Science", - description: "Data discovery, analysis, deep and reinforced learning, insights and recommendations", + name: 'Analytics and Data Science', + description: 'Data discovery, analysis, deep and reinforced learning, insights and recommendations', icon: PresentationChartBarIcon, }, { - name: "Strategic Roadmaps", - description: "Aligning portfolio to strategy, business cases, project planning and initiation", + name: 'Strategic Roadmaps', + description: 'Aligning portfolio to strategy, business cases, project planning and initiation', icon: MapIcon, }, ] diff --git a/src/components/findoutmore.tsx b/src/components/findoutmore.tsx index 1719ba4..bbea8e2 100644 --- a/src/components/findoutmore.tsx +++ b/src/components/findoutmore.tsx @@ -1,30 +1,30 @@ -import * as React from "react" +import * as React from 'react' -import Partners from "@/svg/undraw_features_overview_jg7a.svg" -import Work from "@/svg/undraw_All_the_data_re_hh4w.svg" -import People from "@/svg/undraw_Team_page_re_cffb.svg" +import Partners from '@/svg/undraw/undraw_features_overview_jg7a.svg' +import Work from '@/svg/undraw/undraw_All_the_data_re_hh4w.svg' +import People from '@/svg/undraw/undraw_Team_page_re_cffb.svg' const callouts = [ { - name: "People", - description: "Find out more about our consultants", + name: 'People', + description: 'Find out more about our consultants', imageSrc: People, - imageAlt: "People drawing", - href: "/pages/consultants", + imageAlt: 'People drawing', + href: '/pages/consultants', }, { - name: "Partners", - description: "Find out more about our partners", + name: 'Partners', + description: 'Find out more about our partners', imageSrc: Partners, - imageAlt: "Partners drawing", - href: "/pages/partners", + imageAlt: 'Partners drawing', + href: '/pages/partners', }, { - name: "Achievements", - description: "Recent work we have performed for our clients", + name: 'Achievements', + description: 'Recent work we have performed for our clients', imageSrc: Work, - imageAlt: "Recent work drawing", - href: "/pages/work", + imageAlt: 'Recent work drawing', + href: '/pages/work', }, ] diff --git a/src/components/footer.tsx b/src/components/footer.tsx index 3f328b9..da33fef 100644 --- a/src/components/footer.tsx +++ b/src/components/footer.tsx @@ -1,25 +1,12 @@ -import { graphql, Link, useStaticQuery } from "gatsby" -import * as React from "react" +import * as React from 'react' +import { Link } from 'gatsby' -import HelloTham from "@/svg/hellotham.svg" +import useSiteMetadata from './metadata' +import HelloTham from '@/svg/logo/hellotham.svg' export default function Footer() { - const data = useStaticQuery(graphql` - query SiteTitleQuery { - site { - siteMetadata { - social { - facebook - instagram - twitter - linkedin - github - } - } - } - } - `) - const social = data.site.siteMetadata.social + const metadata = useSiteMetadata() + const social = metadata.social return (

diff --git a/src/components/header.tsx b/src/components/header.tsx index 05d2493..b249cf8 100644 --- a/src/components/header.tsx +++ b/src/components/header.tsx @@ -1,23 +1,23 @@ -import * as React from "react" +import * as React from 'react' -import { Disclosure } from "@headlessui/react" -import { MenuIcon, XIcon } from "@heroicons/react/outline" +import { Disclosure } from '@headlessui/react' +import { MenuIcon, XIcon } from '@heroicons/react/outline' -import Logo from "@/svg/logo.svg" -import HelloTham from "@/svg/hellotham.svg" +import Logo from '@/svg/logo/logo.svg' +import HelloTham from '@/svg/logo/hellotham.svg' const navigation = [ - { name: "Home", href: "/", current: true }, - { name: "About", href: "/pages/about", current: false }, - { name: "Services", href: "/pages/services", current: false }, - { name: "Consultants", href: "/pages/consultants", current: false }, - { name: "Partners", href: "/pages/partners", current: false }, - { name: "Achievements", href: "/pages/work", current: false }, - { name: "Blog", href: "/posts", current: false }, + { name: 'Home', href: '/', current: true }, + { name: 'About', href: '/pages/about', current: false }, + { name: 'Services', href: '/pages/services', current: false }, + { name: 'Consultants', href: '/pages/consultants', current: false }, + { name: 'Partners', href: '/pages/partners', current: false }, + { name: 'Achievements', href: '/pages/work', current: false }, + { name: 'Blog', href: '/posts', current: false }, ] function classNames(...classes: string[]) { - return classes.filter(Boolean).join(" ") + return classes.filter(Boolean).join(' ') } export default function Header() { @@ -51,11 +51,11 @@ export default function Header() { href={item.href} className={classNames( item.current - ? "bg-pink-200 text-pink-600" - : "text-purple-600 hover:bg-purple-200 hover:text-pink-600", - "px-3 py-2 rounded-md text-lg font-medium" + ? 'bg-pink-200 text-pink-600' + : 'text-purple-600 hover:bg-purple-200 hover:text-pink-600', + 'px-3 py-2 rounded-md text-lg font-medium' )} - aria-current={item.current ? "page" : undefined} + aria-current={item.current ? 'page' : undefined} > {item.name} @@ -74,11 +74,11 @@ export default function Header() { href={item.href} className={classNames( item.current - ? "bg-pink-200 text-pink-600" - : "text-purple-600 hover:bg-purple-200 hover:text-pink-600", - "block px-3 py-2 rounded-md text-base font-medium" + ? 'bg-pink-200 text-pink-600' + : 'text-purple-600 hover:bg-purple-200 hover:text-pink-600', + 'block px-3 py-2 rounded-md text-base font-medium' )} - aria-current={item.current ? "page" : undefined} + aria-current={item.current ? 'page' : undefined} > {item.name} diff --git a/src/components/hero.tsx b/src/components/hero.tsx index 19a8ae7..6cabd04 100644 --- a/src/components/hero.tsx +++ b/src/components/hero.tsx @@ -1,22 +1,22 @@ -import * as React from "react" +import * as React from 'react' -import { Fragment } from "react" -import { Popover, Transition } from "@headlessui/react" -import { MenuIcon, XIcon } from "@heroicons/react/outline" +import { Fragment } from 'react' +import { Popover, Transition } from '@headlessui/react' +import { MenuIcon, XIcon } from '@heroicons/react/outline' // Images (SVG) -import Logo from "@/svg/logo.svg" -import FeaturedImage from "@/svg/undraw_ideas_flow_cy7b.svg" -import HelloTham from "@/svg/hellotham.svg" -import { Link } from "gatsby" +import Logo from '@/svg/logo/logo.svg' +import FeaturedImage from '@/svg/undraw/undraw_ideas_flow_cy7b.svg' +import HelloTham from '@/svg/logo/hellotham.svg' +import { Link } from 'gatsby' const navigation = [ - { name: "About", href: "/pages/about" }, - { name: "Services", href: "/pages/services" }, - { name: "People", href: "/pages/consultants" }, - { name: "Partners", href: "/pages/partners" }, - { name: "Achievements", href: "/pages/work" }, - { name: "Blog", href: "/posts" }, + { name: 'About', href: '/pages/about' }, + { name: 'Services', href: '/pages/services' }, + { name: 'People', href: '/pages/consultants' }, + { name: 'Partners', href: '/pages/partners' }, + { name: 'Achievements', href: '/pages/work' }, + { name: 'Blog', href: '/posts' }, ] export default function Hero() { @@ -110,7 +110,7 @@ export default function Hero() {
Hello Tham logo

- Visualise Your{" "} + Visualise Your{' '} Future

diff --git a/src/components/json-ld.tsx b/src/components/json-ld.tsx new file mode 100644 index 0000000..da0fe0c --- /dev/null +++ b/src/components/json-ld.tsx @@ -0,0 +1,192 @@ +import * as React from 'react' + +import { Article, BreadcrumbList, ListItem, Organization, Person, WebSite } from 'schema-dts' +import { helmetJsonLdProp } from 'react-schemaorg' +import useSiteMetadata from '@/components/metadata' + +import Logo from '@/images/logo.png' +import { Helmet } from 'react-helmet' + +interface ArticleJsonLDProps { + lang?: string + title: string + description: string + type: string + date?: string + lastUpdated?: string + keywords?: string[] + image?: string + pathname?: string +} + +export default function ArticleJsonLD({ + lang = 'en', + title, + description, + type, + date, + lastUpdated, + keywords, + image, + pathname, +}: ArticleJsonLDProps) { + const metadata = useSiteMetadata() + const canonical = metadata.siteUrl + '/' + type + '/' + pathname + const email = metadata.social.email.replace('mailto:', '') + const year = lastUpdated ? parseInt(lastUpdated.slice(0, 4)) : 2021 + let itemList: ListItem[] = [ + { + '@type': 'ListItem', + item: { + '@id': metadata.siteUrl, + name: 'Homepage', + }, + position: 1, + }, + { + '@type': 'ListItem', + item: { + '@id': metadata.siteUrl + '/' + type, + name: type, + }, + position: 2, + }, + ] + if (type === 'posts' || type === 'pages') { + itemList = itemList.concat([ + { + '@type': 'ListItem', + item: { + '@id': canonical, + name: title, + }, + position: 3, + }, + ]) + } + + return ( + <> + {type == 'posts' || type == 'pages' ? ( + ({ + '@context': 'https://schema.org', + '@type': 'Article', + articleSection: type, + author: { + '@id': metadata.siteUrl, + }, + copyrightHolder: { + '@id': metadata.siteUrl, + }, + copyrightYear: year, + creativeWorkStatus: 'Published', + creator: { + '@id': metadata.siteUrl, + }, + dateCreated: date, + dateModified: lastUpdated, + datePublished: lastUpdated, + description: description, + headline: title, + keywords: keywords ? keywords.join(', ') : type, + image: { + '@type': 'ImageObject', + url: image, + }, + inLanguage: lang, + mainEntityOfPage: canonical, + name: title, + publisher: { + '@id': metadata.siteUrl, + }, + url: canonical, + }), + ]} + /> + ) : ( + '' + )} + ({ + '@context': 'https://schema.org', + '@type': 'WebSite', + about: { + '@id': metadata.siteUrl, + }, + audience: 'public', + abstract: metadata.description, + author: { + '@id': metadata.siteUrl, + }, + copyrightHolder: { + '@id': metadata.siteUrl, + }, + copyrightYear: year, + creator: { + '@id': metadata.siteUrl, + }, + description: metadata.description, + image: { + '@type': 'ImageObject', + url: image, + }, + inLanguage: 'en', + name: metadata.title, + publisher: { + '@id': metadata.siteUrl, + }, + url: metadata.siteUrl, + }), + helmetJsonLdProp({ + '@context': 'https://schema.org', + '@id': metadata.siteUrl, + '@type': 'Organization', + address: metadata.location, + contactPoint: { + '@type': 'ContactPoint', + email: email, + telephone: metadata.social.phone.replace('tel:', ''), + }, + description: metadata.description, + email: email, + founder: { + '@id': metadata.siteUrl + '/consultants#ChrisTham', + }, + location: metadata.location, + image: { + '@type': 'ImageObject', + url: image, + }, + logo: { + '@type': 'ImageObject', + url: Logo, + }, + name: metadata.title, + sameAs: Object.values(metadata.social), + url: metadata.siteUrl, + }), + helmetJsonLdProp({ + '@context': 'https://schema.org', + '@type': 'BreadcrumbList', + description: 'Breadcrumbs list', + itemListElement: itemList, + numberOfItems: type === 'posts' || type === 'pages' ? 3 : 2, + name: 'Breadcrumbs', + }), + helmetJsonLdProp({ + '@context': 'https://schema.org', + '@type': 'Person', + '@id': metadata.siteUrl + '/consultants#ChrisTham', + name: metadata.author.name, + worksFor: { + '@id': metadata.siteUrl, + }, + }), + ]} + /> + + ) +} diff --git a/src/components/layout.tsx b/src/components/layout.tsx index 1434d9c..d3615ac 100644 --- a/src/components/layout.tsx +++ b/src/components/layout.tsx @@ -5,28 +5,16 @@ * See: https://www.gatsbyjs.com/docs/use-static-query/ */ -import * as React from "react" +import * as React from 'react' -import Header from "./header" -import Footer from "./footer" +import Header from './header' +import Footer from './footer' interface LayoutProps { children: React.ReactNode } const Layout = ({ children }: LayoutProps) => { - // const data: any = useStaticQuery(graphql` - // query SiteTitleQuery { - // site { - // siteMetadata { - // title - // } - // } - // } - // `) - - // const siteTitle: string = data.site.siteMetadata?.title || `Title` - return ( <>

diff --git a/src/components/metadata.ts b/src/components/metadata.ts new file mode 100644 index 0000000..c34bc89 --- /dev/null +++ b/src/components/metadata.ts @@ -0,0 +1,56 @@ +import { graphql, useStaticQuery } from 'gatsby' + +export type SiteMetadataType = { + title: string + author: { + name: string + url: string + summary: string + } + description: string + siteUrl: string + location: string + social: { + email: string + phone: string + facebook: string + instagram: string + twitter: string + linkedin: string + github: string + } +} + +const useSiteMetadata = (): SiteMetadataType => { + const { site } = useStaticQuery( + graphql` + query SITE_METADATA_QUERY { + site { + siteMetadata { + title + author { + name + url + summary + } + description + siteUrl + location + social { + email + phone + facebook + instagram + twitter + linkedin + github + } + } + } + } + ` + ) + return site.siteMetadata +} + +export default useSiteMetadata diff --git a/src/components/seo.tsx b/src/components/seo.tsx index 7254307..10a5ec7 100644 --- a/src/components/seo.tsx +++ b/src/components/seo.tsx @@ -1,7 +1,7 @@ /* eslint-disable indent */ -import React from "react" -import Helmet from "react-helmet" -import { useStaticQuery, graphql } from "gatsby" +import React from 'react' +import Helmet from 'react-helmet' +import { useStaticQuery, graphql } from 'gatsby' interface SEOProps { description?: string @@ -19,7 +19,7 @@ interface SEOProps { title: string pathname?: string } -function SEO({ description = "", lang = "en", image, meta = [], keywords = [], title, pathname = "" }: SEOProps) { +function SEO({ description = '', lang = 'en', image, meta = [], keywords, title, pathname = '' }: SEOProps) { const data = useStaticQuery(detailsQuery) const metaDescription = description || data.site.siteMetadata.description const metaImage = image && image.src ? `${data.site.siteMetadata.siteUrl}${image.src}` : null @@ -33,38 +33,38 @@ function SEO({ description = "", lang = "en", image, meta = [], keywords = [], t }} title={title} titleTemplate={`%s | ${data.site.siteMetadata.title}`} - link={canonical ? [{ rel: "canonical", href: canonical }] : []} + link={canonical ? [{ rel: 'canonical', href: canonical }] : []} meta={[ { - name: "description", + name: 'description', content: metaDescription, }, { - property: "og:title", + property: 'og:title', content: title, }, { - property: "og:url", + property: 'og:url', content: metaUrl, }, { - property: "og:description", + property: 'og:description', content: metaDescription, }, { - property: "og:type", - content: "website", + property: 'og:type', + content: 'website', }, { - name: "twitter:creator", + name: 'twitter:creator', content: `@${data.site.siteMetadata.social.twitter}`, }, { - name: "twitter:title", + name: 'twitter:title', content: title, }, { - name: "twitter:description", + name: 'twitter:description', content: metaDescription, }, // { @@ -75,15 +75,15 @@ function SEO({ description = "", lang = "en", image, meta = [], keywords = [], t .concat( metaImage ? [ - { property: "og:image", content: metaImage }, - { property: "og:image:alt", content: title }, - { property: "og:image:width", content: image!.width }, - { property: "og:image:height", content: image!.height }, - { name: "twitter:card", content: "summary_large_image" }, + { property: 'og:image', content: metaImage }, + { property: 'og:image:alt', content: title }, + { property: 'og:image:width', content: image!.width }, + { property: 'og:image:height', content: image!.height }, + { name: 'twitter:card', content: 'summary_large_image' }, ] - : [{ name: "twitter:card", content: "summary" }] + : [{ name: 'twitter:card', content: 'summary' }] ) - .concat(keywords.length > 0 ? { name: "keywords", content: keywords.join(", ") } : []) + .concat(keywords && keywords.length > 0 ? { name: 'keywords', content: keywords.join(', ') } : []) .concat(meta)} /> ) diff --git a/src/components/tags.tsx b/src/components/tags.tsx index 92892f8..909ab70 100644 --- a/src/components/tags.tsx +++ b/src/components/tags.tsx @@ -1,6 +1,6 @@ -import * as React from "react" -import { Link } from "gatsby" -import kebabCase from "lodash/kebabCase" +import * as React from 'react' +import { Link } from 'gatsby' +import kebabCase from 'lodash/kebabCase' const Tags = ({ tags }: { tags: string[] }) => (
diff --git a/src/declarations.d.ts b/src/declarations.d.ts index aeb122a..af443c6 100644 --- a/src/declarations.d.ts +++ b/src/declarations.d.ts @@ -9,17 +9,17 @@ /* eslint-disable @typescript-eslint/no-explicit-any */ -declare module "*.svg" { +declare module '*.svg' { const content: any export default content } -declare module "*.png" { +declare module '*.png' { const value: any export default value } -declare module "*.jpg" { +declare module '*.jpg' { const value: any export default value } diff --git a/src/images/favicon-16x16.png b/src/images/site/favicon-16x16.png similarity index 100% rename from src/images/favicon-16x16.png rename to src/images/site/favicon-16x16.png diff --git a/src/images/favicon-32x32.png b/src/images/site/favicon-32x32.png similarity index 100% rename from src/images/favicon-32x32.png rename to src/images/site/favicon-32x32.png diff --git a/src/svg/favicon.ico b/src/images/site/favicon.ico similarity index 100% rename from src/svg/favicon.ico rename to src/images/site/favicon.ico diff --git a/src/svg/logo-square.svg b/src/images/site/logo.svg similarity index 100% rename from src/svg/logo-square.svg rename to src/images/site/logo.svg diff --git a/src/pages/404.js b/src/pages/404.js index b98b1ba..be0e036 100644 --- a/src/pages/404.js +++ b/src/pages/404.js @@ -1,7 +1,7 @@ -import * as React from "react" +import * as React from 'react' -import Layout from "../components/layout" -import Seo from "../components/seo" +import Layout from '../components/layout' +import Seo from '../components/seo' const NotFoundPage = () => ( diff --git a/src/pages/contactus.tsx b/src/pages/contactus.tsx index ae3cb8e..1a2e293 100644 --- a/src/pages/contactus.tsx +++ b/src/pages/contactus.tsx @@ -1,33 +1,26 @@ -import * as React from "react" -import { useForm } from "react-hook-form" -import { Fragment, useState } from "react" -import { Dialog, Transition } from "@headlessui/react" -import { CheckCircleIcon } from "@heroicons/react/outline" +import * as React from 'react' +import { useForm } from 'react-hook-form' +import { Fragment, useState } from 'react' +import { Dialog, Transition } from '@headlessui/react' +import { CheckCircleIcon } from '@heroicons/react/outline' -import Layout from "@/components/layout" -import Seo from "@/components/seo" +import useSiteMetadata from '@/components/metadata' +import Layout from '@/components/layout' +import Seo from '@/components/seo' -import PageHero from "@/components/PageHero" +import PageHero from '@/components/PageHero' -import Image from "@/svg/undraw_contact_us_15o2.svg" +import Image from '@/svg/undraw/undraw_contact_us_15o2.svg' -import Email from "@/svg/email.svg" -import Phone from "@/svg/phone.svg" -import LinkedIn from "@/svg/linkedin.svg" -import Facebook from "@/svg/facebook.svg" -import Instagram from "@/svg/instagram.svg" -import Twitter from "@/svg/twitter.svg" +import Email from '@/svg/icons/email.svg' +import Phone from '@/svg/icons/phone.svg' +import LinkedIn from '@/svg/icons/linkedin.svg' +import Facebook from '@/svg/icons/facebook.svg' +import Instagram from '@/svg/icons/instagram.svg' +import Twitter from '@/svg/icons/twitter.svg' +import Github from '@/svg/icons/github.svg' -const contactMethods = [ - { name: "Email", link: "mailto:info@hellotham.com", image: Email }, - { name: "Phone", link: "tel:+61413008577", image: Phone }, - { name: "LinkedIn", link: "https://www.linkedin.com/company/17950469", image: LinkedIn }, - { name: "Facebook", link: "https://www.facebook.com/HelloThamCom", image: Facebook }, - { name: "Instagram", link: "https://www.instagram.com/HelloThamCom/", image: Instagram }, - { name: "Twitter", link: "https://twitter.com/HelloThamCom", image: Twitter }, -] - -import OGImage from "../images/undraw_contact_us_15o2.png" +import OGImage from '../images/undraw_contact_us_15o2.png' export default function ContactUs() { const [open, setOpen] = useState(false) @@ -37,22 +30,33 @@ export default function ContactUs() { height: 1024, } + const metadata = useSiteMetadata() + + const contactMethods = [ + { name: 'Email', link: metadata.social.email, image: Email }, + { name: 'Phone', link: metadata.social.phone, image: Phone }, + { name: 'LinkedIn', link: metadata.social.linkedin, image: LinkedIn }, + { name: 'Facebook', link: metadata.social.facebook, image: Facebook }, + { name: 'Instagram', link: metadata.social.instagram, image: Instagram }, + { name: 'Twitter', link: metadata.social.twitter, image: Twitter }, + { name: 'Github', link: metadata.social.github, image: Github }, + ] const { register, handleSubmit, formState: { errors }, } = useForm() const onSubmit = (data: unknown) => { - fetch("/api/sendgrid", { - method: "POST", + fetch('/api/sendgrid', { + method: 'POST', body: JSON.stringify(data), headers: { - "content-type": "application/json", + 'content-type': 'application/json', }, }) .then(res => res.json()) .then(body => { - console.log("response from API:", body) + console.log('response from API:', body) setOpen(true) }) } @@ -86,6 +90,7 @@ export default function ContactUs() { {contactMethods.map(method => (

+ {/* */}  {method.name}:  {method.link} @@ -109,7 +114,7 @@ export default function ContactUs() { id="name" autoComplete="name" className="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" - {...register("name", { required: true, maxLength: 256 })} + {...register('name', { required: true, maxLength: 256 })} />

@@ -122,7 +127,7 @@ export default function ContactUs() { id="email" autoComplete="email" className="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" - {...register("email", { required: true, pattern: /^\S+@\S+$/i })} + {...register('email', { required: true, pattern: /^\S+@\S+$/i })} />
@@ -136,7 +141,7 @@ export default function ContactUs() { id="phone" autoComplete="tel" className="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" - {...register("phone", { + {...register('phone', { required: true, minLength: 6, maxLength: 12, @@ -153,7 +158,7 @@ export default function ContactUs() { id="subject" autoComplete="subject" className="mt-1 focus:ring-purple-500 focus:border-purple-500 block w-full shadow-sm sm:text-sm border-gray-300 rounded-md" - {...register("subject", { required: true, maxLength: 256 })} + {...register('subject', { required: true, maxLength: 256 })} />
@@ -166,7 +171,7 @@ export default function ContactUs() { rows={5} id="text" placeholder="Enter your message here." - {...register("text", { required: true })} + {...register('text', { required: true })} /> diff --git a/src/pages/index.tsx b/src/pages/index.tsx index c0d0773..7f174dd 100644 --- a/src/pages/index.tsx +++ b/src/pages/index.tsx @@ -1,12 +1,12 @@ -import * as React from "react" +import * as React from 'react' -import Hero from "@/components/hero" -import Features from "@/components/features" -import FindOutMore from "@/components/findoutmore" -import Footer from "@/components/footer" -import Seo from "@/components/seo" +import Hero from '@/components/hero' +import Features from '@/components/features' +import FindOutMore from '@/components/findoutmore' +import Footer from '@/components/footer' +import Seo from '@/components/seo' -import OGImage from "../images/undraw_ideas_flow_cy7b.png" +import OGImage from '../images/undraw_ideas_flow_cy7b.png' export default function Home() { const ogimage = { diff --git a/src/pages/posts.tsx b/src/pages/posts.tsx index 0eed4da..6a8b095 100644 --- a/src/pages/posts.tsx +++ b/src/pages/posts.tsx @@ -1,16 +1,23 @@ -import * as React from "react" +import * as React from 'react' -import Layout from "@/components/layout" -import Seo from "@/components/seo" -import PageHero from "@/components/PageHero" -import BlogRoll from "@/components/blogroll" +import Layout from '@/components/layout' +import Seo from '@/components/seo' +import PageHero from '@/components/PageHero' +import BlogRoll from '@/components/blogroll' -import Image from "@/svg/undraw_Add_post_re_174w.svg" +import Image from '@/svg/undraw/undraw_Add_post_re_174w.svg' +import OGImage from '../images/undraw_ideas_flow_cy7b.png' const BlogPage = () => { + const ogimage = { + src: OGImage, + width: 1342, + height: 1024, + } + return ( - +
diff --git a/src/pages/tags.tsx b/src/pages/tags.tsx index d116f04..6823142 100644 --- a/src/pages/tags.tsx +++ b/src/pages/tags.tsx @@ -1,19 +1,19 @@ -import React from "react" +import React from 'react' // Utilities -import kebabCase from "lodash/kebabCase" +import kebabCase from 'lodash/kebabCase' // Components -import Layout from "@/components/layout" -import Seo from "@/components/seo" +import Layout from '@/components/layout' +import Seo from '@/components/seo' // import { ImageDataLike } from "gatsby-plugin-image" // import BlogCard from "@/components/blogcard" -import PageHero from "@/components/PageHero" +import PageHero from '@/components/PageHero' -import Image from "@/svg/undraw_Windows_re_uo4w.svg" -import { Link, graphql } from "gatsby" +import Image from '@/svg/undraw/undraw_Windows_re_uo4w.svg' +import { Link, graphql } from 'gatsby' -import OGImage from "../images/undraw_Windows_re_uo4w.png" +import OGImage from '../images/undraw_Windows_re_uo4w.png' interface TagsProps { data: { @@ -54,7 +54,7 @@ const Tags = ({ data }: TagsProps) => {
{tag.fieldValue
diff --git a/src/pages/{mdx.fields__source}/{mdx.slug}.tsx b/src/pages/{mdx.fields__source}/{mdx.slug}.tsx index db3097b..57d32da 100644 --- a/src/pages/{mdx.fields__source}/{mdx.slug}.tsx +++ b/src/pages/{mdx.fields__source}/{mdx.slug}.tsx @@ -1,12 +1,13 @@ -import * as React from "react" -import { graphql } from "gatsby" -import { MDXRenderer } from "gatsby-plugin-mdx" -import { getImage, ImageDataLike } from "gatsby-plugin-image" -import { Link } from "gatsby" +import * as React from 'react' +import { graphql } from 'gatsby' +import { MDXRenderer } from 'gatsby-plugin-mdx' +import { getImage, ImageDataLike } from 'gatsby-plugin-image' +import { Link } from 'gatsby' -import Layout from "@/components/layout" -import Seo from "@/components/seo" -import PostHero from "@/components/PostHero" +import Layout from '@/components/layout' +import Seo from '@/components/seo' +import PostHero from '@/components/PostHero' +import ArticleJsonLD from '@/components/json-ld' const components = { Link } @@ -35,6 +36,9 @@ interface BlogPostProps { } slug: string body: string + fields: { + source: string + } } } } @@ -42,7 +46,6 @@ interface BlogPostProps { const BlogPost = ({ data }: BlogPostProps) => { const frontmatter = data.mdx.frontmatter const image = getImage(frontmatter.image as ImageDataLike) - const keywords = frontmatter.tags ? frontmatter.tags : [] return ( @@ -50,8 +53,18 @@ const BlogPost = ({ data }: BlogPostProps) => { title={frontmatter.title} description={frontmatter.description} image={(frontmatter.image as ResizeType).childImageSharp.resize} - keywords={keywords} - pathname={"/posts/" + data.mdx.slug} + keywords={frontmatter.tags} + pathname={'/posts/' + data.mdx.slug} + /> +
@@ -100,6 +113,9 @@ export const query = graphql` } slug body + fields { + source + } } } ` diff --git a/src/svg/icons/blog.svg b/src/svg/icons/blog.svg new file mode 100644 index 0000000..690de93 --- /dev/null +++ b/src/svg/icons/blog.svg @@ -0,0 +1,15 @@ + diff --git a/src/svg/email.svg b/src/svg/icons/email.svg similarity index 100% rename from src/svg/email.svg rename to src/svg/icons/email.svg diff --git a/src/svg/facebook.svg b/src/svg/icons/facebook.svg similarity index 100% rename from src/svg/facebook.svg rename to src/svg/icons/facebook.svg diff --git a/src/svg/icons/favicon.ico b/src/svg/icons/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..b07119bbcb77917323005b98e837071c8928b184 GIT binary patch literal 318 zcmZQzU<5(|0RbS%!l1#(z#zuJz@P!d0zj+)#2|4HXaJKC0wf0ld*Zh+tW>UM*ygo> z;b_%)hP8UF3|H6wXQ=eK!EkBO7lunqzA>Di`5K}a3mFOrVQFcpKu%a{plBG7krpl} z7@8Iu3giL>Lc>BqbZBZ=Xedw|Ob1GU=#Ws+(5a%SVWLcdrh$Q}p^2fQfuUkR8IZw1 Y)j$N{0L=m-AV`ByV0I`LCy^us051YOb^rhX literal 0 HcmV?d00001 diff --git a/src/svg/icons/gatsbyjs.svg b/src/svg/icons/gatsbyjs.svg new file mode 100644 index 0000000..9b22547 --- /dev/null +++ b/src/svg/icons/gatsbyjs.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/svg/icons/github.svg b/src/svg/icons/github.svg new file mode 100644 index 0000000..ba93748 --- /dev/null +++ b/src/svg/icons/github.svg @@ -0,0 +1,15 @@ + diff --git a/src/svg/instagram.svg b/src/svg/icons/instagram.svg similarity index 100% rename from src/svg/instagram.svg rename to src/svg/icons/instagram.svg diff --git a/src/svg/icons/jamstack.svg b/src/svg/icons/jamstack.svg new file mode 100644 index 0000000..0dbae10 --- /dev/null +++ b/src/svg/icons/jamstack.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/src/svg/linkedin.svg b/src/svg/icons/linkedin.svg similarity index 100% rename from src/svg/linkedin.svg rename to src/svg/icons/linkedin.svg diff --git a/src/svg/icons/mdx.svg b/src/svg/icons/mdx.svg new file mode 100644 index 0000000..342dd19 --- /dev/null +++ b/src/svg/icons/mdx.svg @@ -0,0 +1 @@ + diff --git a/src/svg/phone.svg b/src/svg/icons/phone.svg similarity index 100% rename from src/svg/phone.svg rename to src/svg/icons/phone.svg diff --git a/src/svg/icons/react.svg b/src/svg/icons/react.svg new file mode 100644 index 0000000..5592ebe --- /dev/null +++ b/src/svg/icons/react.svg @@ -0,0 +1,35 @@ + + + + + + + + + + + diff --git a/src/svg/icons/tailwindcss.svg b/src/svg/icons/tailwindcss.svg new file mode 100644 index 0000000..05c8c0f --- /dev/null +++ b/src/svg/icons/tailwindcss.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/svg/twitter.svg b/src/svg/icons/twitter.svg similarity index 100% rename from src/svg/twitter.svg rename to src/svg/icons/twitter.svg diff --git a/src/svg/icons/typescript.svg b/src/svg/icons/typescript.svg new file mode 100644 index 0000000..d27c12c --- /dev/null +++ b/src/svg/icons/typescript.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/svg/hellotham logo.svg b/src/svg/logo/hellotham logo.svg similarity index 100% rename from src/svg/hellotham logo.svg rename to src/svg/logo/hellotham logo.svg diff --git a/src/svg/hellotham.svg b/src/svg/logo/hellotham.svg similarity index 100% rename from src/svg/hellotham.svg rename to src/svg/logo/hellotham.svg diff --git a/src/svg/safari-pinned-tab.svg b/src/svg/logo/logo-square.svg similarity index 100% rename from src/svg/safari-pinned-tab.svg rename to src/svg/logo/logo-square.svg diff --git a/src/svg/logo-title.svg b/src/svg/logo/logo-title.svg similarity index 100% rename from src/svg/logo-title.svg rename to src/svg/logo/logo-title.svg diff --git a/src/svg/logo.svg b/src/svg/logo/logo.svg similarity index 100% rename from src/svg/logo.svg rename to src/svg/logo/logo.svg diff --git a/src/svg/logo/safari-pinned-tab.svg b/src/svg/logo/safari-pinned-tab.svg new file mode 100644 index 0000000..ffffa4d --- /dev/null +++ b/src/svg/logo/safari-pinned-tab.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + diff --git a/src/svg/undraw_Add_post_re_174w.svg b/src/svg/undraw/undraw_Add_post_re_174w.svg similarity index 100% rename from src/svg/undraw_Add_post_re_174w.svg rename to src/svg/undraw/undraw_Add_post_re_174w.svg diff --git a/src/svg/undraw_All_the_data_re_hh4w.svg b/src/svg/undraw/undraw_All_the_data_re_hh4w.svg similarity index 100% rename from src/svg/undraw_All_the_data_re_hh4w.svg rename to src/svg/undraw/undraw_All_the_data_re_hh4w.svg diff --git a/src/svg/undraw_In_progress_re_m1l6.svg b/src/svg/undraw/undraw_In_progress_re_m1l6.svg similarity index 100% rename from src/svg/undraw_In_progress_re_m1l6.svg rename to src/svg/undraw/undraw_In_progress_re_m1l6.svg diff --git a/src/svg/undraw_Logic_re_nyb4.svg b/src/svg/undraw/undraw_Logic_re_nyb4.svg similarity index 100% rename from src/svg/undraw_Logic_re_nyb4.svg rename to src/svg/undraw/undraw_Logic_re_nyb4.svg diff --git a/src/svg/undraw_Modern_professional_re_3b6l.svg b/src/svg/undraw/undraw_Modern_professional_re_3b6l.svg similarity index 100% rename from src/svg/undraw_Modern_professional_re_3b6l.svg rename to src/svg/undraw/undraw_Modern_professional_re_3b6l.svg diff --git a/src/svg/undraw_Portfolio_re_qwm5.svg b/src/svg/undraw/undraw_Portfolio_re_qwm5.svg similarity index 100% rename from src/svg/undraw_Portfolio_re_qwm5.svg rename to src/svg/undraw/undraw_Portfolio_re_qwm5.svg diff --git a/src/svg/undraw_Team_page_re_cffb.svg b/src/svg/undraw/undraw_Team_page_re_cffb.svg similarity index 100% rename from src/svg/undraw_Team_page_re_cffb.svg rename to src/svg/undraw/undraw_Team_page_re_cffb.svg diff --git a/src/svg/undraw_Windows_re_uo4w.svg b/src/svg/undraw/undraw_Windows_re_uo4w.svg similarity index 100% rename from src/svg/undraw_Windows_re_uo4w.svg rename to src/svg/undraw/undraw_Windows_re_uo4w.svg diff --git a/src/svg/undraw_contact_us_15o2.svg b/src/svg/undraw/undraw_contact_us_15o2.svg similarity index 100% rename from src/svg/undraw_contact_us_15o2.svg rename to src/svg/undraw/undraw_contact_us_15o2.svg diff --git a/src/svg/undraw_design_components_9vy6-2.svg b/src/svg/undraw/undraw_design_components_9vy6-2.svg similarity index 100% rename from src/svg/undraw_design_components_9vy6-2.svg rename to src/svg/undraw/undraw_design_components_9vy6-2.svg diff --git a/src/svg/undraw_design_inspiration_fmjm.svg b/src/svg/undraw/undraw_design_inspiration_fmjm.svg similarity index 100% rename from src/svg/undraw_design_inspiration_fmjm.svg rename to src/svg/undraw/undraw_design_inspiration_fmjm.svg diff --git a/src/svg/undraw_destinations_fpv7.svg b/src/svg/undraw/undraw_destinations_fpv7.svg similarity index 100% rename from src/svg/undraw_destinations_fpv7.svg rename to src/svg/undraw/undraw_destinations_fpv7.svg diff --git a/src/svg/undraw_features_overview_jg7a.svg b/src/svg/undraw/undraw_features_overview_jg7a.svg similarity index 100% rename from src/svg/undraw_features_overview_jg7a.svg rename to src/svg/undraw/undraw_features_overview_jg7a.svg diff --git a/src/svg/undraw_ideas_flow_cy7b.svg b/src/svg/undraw/undraw_ideas_flow_cy7b.svg similarity index 100% rename from src/svg/undraw_ideas_flow_cy7b.svg rename to src/svg/undraw/undraw_ideas_flow_cy7b.svg diff --git a/src/svg/undraw_informed_decision_p2lh.svg b/src/svg/undraw/undraw_informed_decision_p2lh.svg similarity index 100% rename from src/svg/undraw_informed_decision_p2lh.svg rename to src/svg/undraw/undraw_informed_decision_p2lh.svg diff --git a/src/svg/undraw_navigator_a479.svg b/src/svg/undraw/undraw_navigator_a479.svg similarity index 100% rename from src/svg/undraw_navigator_a479.svg rename to src/svg/undraw/undraw_navigator_a479.svg diff --git a/src/svg/undraw_our_solution_htvp.svg b/src/svg/undraw/undraw_our_solution_htvp.svg similarity index 100% rename from src/svg/undraw_our_solution_htvp.svg rename to src/svg/undraw/undraw_our_solution_htvp.svg diff --git a/src/svg/undraw_right_places_h9n3.svg b/src/svg/undraw/undraw_right_places_h9n3.svg similarity index 100% rename from src/svg/undraw_right_places_h9n3.svg rename to src/svg/undraw/undraw_right_places_h9n3.svg diff --git a/src/svg/undraw_through_the_park_lxnl.svg b/src/svg/undraw/undraw_through_the_park_lxnl.svg similarity index 100% rename from src/svg/undraw_through_the_park_lxnl.svg rename to src/svg/undraw/undraw_through_the_park_lxnl.svg diff --git a/src/templates/mdx-template.tsx b/src/templates/mdx-template.tsx index 8cc0cc8..4d5e625 100644 --- a/src/templates/mdx-template.tsx +++ b/src/templates/mdx-template.tsx @@ -1,12 +1,12 @@ -import * as React from "react" -import { MDXProvider } from "@mdx-js/react" -import { getImage, ImageDataLike } from "gatsby-plugin-image" +import * as React from 'react' +import { MDXProvider } from '@mdx-js/react' +import { getImage, ImageDataLike } from 'gatsby-plugin-image' -import Layout from "@/components/layout" -import Seo from "@/components/seo" -import PostHero from "@/components/PostHero" +import Layout from '@/components/layout' +import Seo from '@/components/seo' +import PostHero from '@/components/PostHero' -import { Link } from "gatsby" +import { Link } from 'gatsby' interface LayoutProps { pageContext: { diff --git a/src/templates/tag-template.tsx b/src/templates/tag-template.tsx index 90e8973..d55dea5 100644 --- a/src/templates/tag-template.tsx +++ b/src/templates/tag-template.tsx @@ -1,14 +1,14 @@ -import * as React from "react" +import * as React from 'react' -import Layout from "@/components/layout" -import Seo from "@/components/seo" -import PageHero from "@/components/PageHero" -import BlogRoll from "@/components/blogroll" +import Layout from '@/components/layout' +import Seo from '@/components/seo' +import PageHero from '@/components/PageHero' +import BlogRoll from '@/components/blogroll' -import Image from "@/svg/undraw_Add_post_re_174w.svg" -import { Link } from "gatsby" +import Image from '@/svg/undraw/undraw_Add_post_re_174w.svg' +import { Link } from 'gatsby' -import OGImage from "../images/undraw_Add_post_re_174w.png" +import OGImage from '../images/undraw_Add_post_re_174w.png' interface TagProps { pageContext: { @@ -27,7 +27,7 @@ const TagPage = ({ pageContext }: TagProps) => { const title = `Tag: ${tag}` return ( - +
diff --git a/tailwind.config.js b/tailwind.config.js index b87805e..96d38da 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,10 +1,10 @@ /* eslint-disable @typescript-eslint/no-var-requires */ // eslint-disable-next-line @typescript-eslint/no-unused-vars -const defaultTheme = require("tailwindcss/defaultTheme") +const defaultTheme = require('tailwindcss/defaultTheme') module.exports = { - mode: "jit", - purge: ["./src/**/*.{js,jsx,ts,tsx}"], + mode: 'jit', + purge: ['./src/**/*.{js,jsx,ts,tsx}'], darkMode: false, // or 'media' or 'class' theme: { extend: {}, @@ -12,5 +12,5 @@ module.exports = { variants: { extend: {}, }, - plugins: [require("@tailwindcss/typography"), require("@tailwindcss/forms"), require("@tailwindcss/aspect-ratio")], + plugins: [require('@tailwindcss/typography'), require('@tailwindcss/forms'), require('@tailwindcss/aspect-ratio')], } diff --git a/yarn.lock b/yarn.lock index 7ec02a6..a280c9a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -10997,6 +10997,11 @@ react-refresh@^0.9.0: resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.9.0.tgz#71863337adc3e5c2f8a6bfddd12ae3bfe32aafbf" integrity sha512-Gvzk7OZpiqKSkxsQvO/mbTN1poglhmAV7gR/DdIrRrSMXraRQQlfikRJOr3Nb9GTMPC5kof948Zy6jJZIFtDvQ== +react-schemaorg@^2.0.0: + version "2.0.0" + resolved "https://registry.yarnpkg.com/react-schemaorg/-/react-schemaorg-2.0.0.tgz#9d168816e3630382d366fbc5fc4c337617467dbb" + integrity sha512-UqciFKA203ewNjn0zC09uYKuJSvMD8L75L1s/cW4rc7cS64w8l7vaI3SYkuoI/nwCBkJRmOkSJedWDUZBlYZwg== + react-side-effect@^2.1.0: version "2.1.1" resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3" @@ -11684,6 +11689,11 @@ scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" +schema-dts@^1.0.0: + version "1.0.0" + resolved "https://registry.yarnpkg.com/schema-dts/-/schema-dts-1.0.0.tgz#60e8a0f2cef5e644c44c843b03d35b37a4423c01" + integrity sha512-9t8gnY3RW2CbpuvA0pIpcaHFXkJTeNnWR4uaWI+PiYSfpuEeMw+2Q0Gac6YTnQb1B8TR6/+G71gQWuSE7dq6Zw== + schema-utils@^2.6.5: version "2.7.1" resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-2.7.1.tgz#1ca4f32d1b24c590c203b8e7a50bf0ea4cd394d7"