Configured lint, moved svg out of images

hellotham · Oct 8, 2021 · e173b5b · e173b5b
1 parent 55153f3
commit e173b5b
Show file tree

Hide file tree

Showing 56 changed files with 438 additions and 333 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,37 +1,36 @@
 module.exports = {
-    parser: `@typescript-eslint/parser`,
-    extends: [
-      "plugin:@typescript-eslint/recommended",
-      "plugin:prettier/recommended",
-      "prettier/@typescript-eslint",
+  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
+  },
+  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": [
+      1,
+      "double",
+      {
+        avoidEscape: true,
+      },
     ],
-    plugins: ["@typescript-eslint", "prettier"],
-    parserOptions: {
-      ecmaVersion: 2018, // Allows for the parsing of modern ECMAScript features
-      sourceType: "module", // Allows for the use of imports
-    },
-    env: {
-      browser: true,
-      node: true,
-    },
-    rules: {
-      quotes: "off",
-      "@typescript-eslint/quotes": [
-        2,
-        "backtick",
-        {
-          avoidEscape: true,
-        },
-      ],
-      indent: ["error", 2, { SwitchCase: 1 }],
-      "prettier/prettier": [
-        "error",
-        {
-          trailingComma: "es5",
-          semi: false,
-          singleQuote: false,
-          printWidth: 120,
-        },
-      ],
-    },
-  }
+    indent: ["error", 2, { SwitchCase: 1 }],
+    "prettier/prettier": [
+      "error",
+      {
+        arrowParens: "avoid",
+        trailingComma: "es5",
+        semi: false,
+        singleQuote: false,
+        printWidth: 120,
+      },
+    ],
+  },
+}
diff --git a/.prettierrc b/.prettierrc
@@ -1,4 +1,7 @@
 {
   "arrowParens": "avoid",
-  "semi": false
+  "trailingComma": "es5",
+  "semi": false,
+  "singleQuote": false,
+  "printWidth": 120
 }
diff --git a/frontmatter.json b/frontmatter.json
@@ -0,0 +1,3 @@
+{
+  "$schema": "https://frontmatter.codes/frontmatter.schema.json"
+}
diff --git 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
@@ -1,56 +1,57 @@
 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: "Hello Tham",
+      url: "https://hellotham.com",
+      summary: "a boutique management and strategy consulting company",
     },
-    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/`,
+    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/",
     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`,
+      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",
       options: {
         path: `${__dirname}/src/pages/`,
-        ignore: [ "__generated__/*" ],
-      }
+        ignore: ["__generated__/*"],
+      },
     },
     {
       resolve: "gatsby-plugin-page-creator",
@@ -59,42 +60,40 @@ module.exports = {
       },
     },
     {
-      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` },
-        ],
-        remarkPlugins: [
-          { resolve: `remark-slug` },
-          { resolve: `@mapbox/rehype-prism` },
+          { resolve: "gatsby-remark-copy-linked-files" },
+          { resolve: "gatsby-remark-smartypants" },
         ],
+        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",
     // this (optional) plugin enables Progressive Web App + Offline functionality
     // To learn more, visit: https://gatsby.dev/offline
     // `gatsby-plugin-offline`,

diff --git a/gatsby-node.js b/gatsby-node.js
@@ -5,17 +5,18 @@
  */
 
 // const fs = require(`fs`)
-const path = require(`path`)
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require("path")
 
 exports.onCreateWebpackConfig = ({ actions }) => {
   actions.setWebpackConfig({
     resolve: {
       alias: {
-          "@": path.resolve(__dirname, "src")
-      }
-    }
-  });
-};
+        "@": path.resolve(__dirname, "src"),
+      },
+    },
+  })
+}
 
 // exports.createSchemaCustomization = ({ actions }) => {
 //   const { createTypes } = actions
@@ -28,4 +29,4 @@ exports.onCreateWebpackConfig = ({ actions }) => {
 //       image: File @fileByRelativePath
 //     }
 //   `)
-// }
+// }
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "gatsby-plugin-offline": "^4.14.0",
     "gatsby-plugin-page-creator": "^3.14.0",
     "gatsby-plugin-react-helmet": "^4.14.0",
+    "gatsby-plugin-robots-txt": "^1.6.10",
     "gatsby-plugin-sharp": "^3.14.0",
     "gatsby-plugin-svgr-svgo": "^1.2.2",
     "gatsby-remark-copy-linked-files": "^4.11.0",

diff --git a/src/components/PostHero.tsx b/src/components/PostHero.tsx
@@ -11,18 +11,8 @@ interface PostHeroProps {
   tags?: string[]
 }
 
-const PostHero = ({
-  title,
-  description,
-  author,
-  date,
-  image,
-  tags,
-}: PostHeroProps) => (
-  <div
-    className="mb-4 md:mb-0 w-full max-w-screen-xl mx-auto relative"
-    style={{ height: "24em" }}
-  >
+const PostHero = ({ title, description, author, date, image, tags }: PostHeroProps) => (
+  <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={{
@@ -36,11 +26,9 @@ const PostHero = ({
       className="absolute left-0 top-0 w-full h-full z-0 object-cover"
     />
     <div className="p-4 absolute bottom-0 left-0 z-20">
-      {tags ? <Tags tags={tags} /> : ''}
+      {tags ? <Tags tags={tags} /> : ""}
       <h2 className="text-4xl font-bold text-white leading-tight">{title}</h2>
-      <h2 className="text-xl font-medium italic text-pink-200">
-        {description}
-      </h2>
+      <h2 className="text-xl font-medium italic text-pink-200">{description}</h2>
       {author ? (
         <div className="flex mt-3">
           <StaticImage

diff --git a/src/components/blogcard.tsx b/src/components/blogcard.tsx
@@ -9,40 +9,30 @@ import Tags from "@/components/tags"
 interface BlogCardProps {
   href: string
   title: string
-  description?: string
-  author?: string
-  date?: string
-  image?: ImageDataLike
-  tags?: string[]
+  description: string
+  author: string
+  date: string
+  image: ImageDataLike
+  tags: string[]
 }
 
-const BlogCard = ({
-  href,
-  title,
-  description,
-  author,
-  date,
-  image,
-  tags
-}: BlogCardProps) => {
+const BlogCard = ({ href, title, description, author, date, image, tags }: BlogCardProps) => {
   return (
     <section className="p-4 md:w-1/2 lg:w-1/3">
       <Link to={href}>
         <a>
           <div className="h-full border-1 border-pink-200 bg-white rounded-lg shadow-xl overflow-hidden p-2">
             <div className="relative w-full h-48 bg-white rounded-lg overflow-hidden group-hover:opacity-75 aspect-w-3 aspect-h-2 sm:h-40">
               <GatsbyImage
-                image={getImage(image!)!}
+                image={getImage(image)!}
                 loading="eager"
                 alt={title + " featured image"}
                 imgClassName="w-full h-full object-center object-cover"
               />
             </div>
             <div className="p-6">
-              {tags ? <Tags tags={tags} /> : ''}
-              <h1 className="title-font text-2xl font-bold text-rosely10 hover:text-rosely9 mt-2">
-                {title}
-              </h1>
+              {tags ? <Tags tags={tags} /> : ""}
+              <h1 className="title-font text-2xl font-bold text-rosely10 hover:text-rosely9 mt-2">{title}</h1>
               <div className="flex items-center flex-wrap ">
                 <span className="text-rosely1 mr-3 inline-flex items-center leading-none text-xs pr-3 py-1 border-r-2 border-rosely7">
                   <CalendarIcon className="w-4 h-4 mr-1" />

diff --git a/src/components/bloghero.tsx b/src/components/bloghero.tsx
@@ -17,10 +17,5 @@ export default function BlogHero() {
     }
   `)
 
-  return (
-    <PostHero
-      title="Blog Posts"
-      image={getImage(imagequery.allFile.nodes[0])!}
-    />
-  )
+  return <PostHero title="Blog Posts" image={getImage(imagequery.allFile.nodes[0])!} />
 }