blog v2

- proper Gatsby v3 update - migration from sass to tailwindcss - fonts from fontsource - layout & style improve - removed client-side analytics - ...
charlesvdv · May 29, 2021 · e28c226 · e28c226
1 parent 54698b1
commit e28c226
Show file tree

Hide file tree

Showing 47 changed files with 1,604 additions and 1,897 deletions.
diff --git a/.prettierignore b/.prettierignore
@@ -2,3 +2,4 @@
 package.json
 package-lock.json
 public
+*.md
diff --git a/.prettierrc b/.prettierrc
@@ -1,7 +1,8 @@
 {
   "endOfLine": "lf",
   "semi": false,
-  "singleQuote": false,
+  "singleQuote": true,
+  "jsxSingleQuote": true,
   "tabWidth": 2,
   "trailingComma": "es5"
 }
diff --git a/README.md b/README.md
@@ -1,3 +1 @@
-[![Netlify Status](https://api.netlify.com/api/v1/badges/c8d5fbfe-53af-4bed-b2c4-f3d533d4e35e/deploy-status)](https://app.netlify.com/sites/tender-wescoff-25bea4/deploys)
-
-:rocket: continiously building... 
+:rocket: continiously building...
diff --git a/gatsby-browser.js b/gatsby-browser.js
@@ -1,21 +1,6 @@
-exports.onRouteUpdate = ({ location }) => {
-    runAnalytics(location)
-}
+import './src/styles/global.css'
 
-function runAnalytics(location) {
-    if (window.location.hostname !== 'vandevoorde.me') {
-        return
-    }
-
-    if (window.goatcounter == null) {
-        window.setTimeout(runAnalytics, 500)
-        return
-    }
-
-    window.goatcounter.vars = {no_onload: true}
-    window.counter = 'https://vandevoorde.goatcounter.com/count'
-
-    window.goatcounter.count({
-        page: location.pathname + location.search + location.hash,
-    });
-}
+import '@fontsource/fira-sans/300.css'
+import '@fontsource/fira-sans/400.css'
+import '@fontsource/fira-sans/400-italic.css'
+import '@fontsource/fira-sans/700.css'
diff --git a/gatsby-config.js b/gatsby-config.js
@@ -1,38 +1,75 @@
 module.exports = {
   siteMetadata: {
-    title: `Charles Vandevoorde`,
-    description: `Personal website of Charles Vandevoorde`,
-    author: `Charles Vandevoorde`,
-    siteUrl: `https://vandevoorde.me`
+    title: 'Charles Vandevoorde',
+    description: 'Personal website of Charles Vandevoorde',
+    author: 'Charles Vandevoorde',
+    siteUrl: 'https://vandevoorde.me',
   },
   plugins: [
-    `gatsby-plugin-react-helmet`,
+    'gatsby-plugin-react-helmet',
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-source-filesystem',
       options: {
-        name: `images`,
-        path: `${__dirname}/src/images`,
-      },
-    },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        name: `blogpost`,
+        name: 'blogpost',
         path: `${__dirname}/src/pages/blog`,
       },
     },
+    'gatsby-transformer-remark',
     {
-      resolve: `gatsby-source-filesystem`,
+      resolve: 'gatsby-plugin-feed',
       options: {
-        name: `assets`,
-        path: `${__dirname}/src/assets`,
+        query: `
+          {
+            site {
+              siteMetadata {
+                title
+                description
+                siteUrl
+                site_url: siteUrl
+              }
+            }
+          }
+        `,
+        feeds: [
+          {
+            serialize: ({ query: { site, allMarkdownRemark } }) => {
+              return allMarkdownRemark.nodes.map((node) => {
+                return Object.assign({}, node.frontmatter, {
+                  description: node.frontmatter.description,
+                  date: node.frontmatter.date,
+                  url: site.siteMetadata.siteUrl + node.fields.slug,
+                  guid: site.siteMetadata.siteUrl + node.fields.slug,
+                  custom_elements: [{ 'content:encoded': node.html }],
+                })
+              })
+            },
+            query: `
+              {
+                allMarkdownRemark(sort: {order: DESC, fields: frontmatter___date}, filter: {frontmatter: {draft: {ne: true}}}) {
+                  nodes {
+                    excerpt
+                    html
+                    frontmatter {
+                      title
+                      date
+                      description
+                    }
+                    fields {
+                      slug
+                    }
+                  }
+                }
+              }
+            `,
+            output: '/rss.xml',
+          },
+        ],
       },
     },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
-    `gatsby-plugin-sass`,
-    `gatsby-background-image`,
-    `gatsby-transformer-remark`,
-    `gatsby-plugin-sitemap`,
+    'gatsby-plugin-image',
+    'gatsby-transformer-sharp',
+    'gatsby-plugin-sharp',
+    'gatsby-plugin-sitemap',
+    'gatsby-plugin-postcss',
   ],
 }
diff --git a/gatsby-node.js b/gatsby-node.js
@@ -1,46 +1,46 @@
 const { createFilePath } = require(`gatsby-source-filesystem`)
-const path = require("path")
+const path = require('path')
 
 exports.onCreateNode = ({ node, getNode, actions }) => {
-    if (node.internal.type === 'MarkdownRemark') {
-        createMarkdownNode(node, getNode, actions)
-    }
+  if (node.internal.type === 'MarkdownRemark') {
+    createMarkdownNode(node, getNode, actions)
+  }
 }
 
 exports.createPages = async ({ graphql, actions }) => {
-    await createBlogPages(graphql, actions)
+  await createBlogPages(graphql, actions)
 }
 
 function createMarkdownNode(node, getNode, actions) {
-    const slug = createFilePath({ node, getNode, basePath: 'src/blog' })
-    actions.createNodeField({
-        node,
-        name: 'slug',
-        value: `/blog${slug}`,
-    })
+  const slug = createFilePath({ node, getNode, basePath: 'src/blog' })
+  actions.createNodeField({
+    node,
+    name: 'slug',
+    value: `/blog${slug}`,
+  })
 }
 
 async function createBlogPages(graphql, actions) {
-    const result = await graphql(`
-        query {
-            allMarkdownRemark {
-                edges {
-                    node {
-                        fields {
-                            slug
-                        }
-                    }
-                }
+  const result = await graphql(`
+    query {
+      allMarkdownRemark {
+        edges {
+          node {
+            fields {
+              slug
             }
+          }
         }
-    `)
-    result.data.allMarkdownRemark.edges.forEach(({ node }) => {
-        actions.createPage({
-            path: node.fields.slug,
-            component: path.resolve('./src/templates/blogpost.js'),
-            context: {
-                slug: node.fields.slug,
-            }
-        })        
+      }
+    }
+  `)
+  result.data.allMarkdownRemark.edges.forEach(({ node }) => {
+    actions.createPage({
+      path: node.fields.slug,
+      component: path.resolve('./src/templates/blogpost.js'),
+      context: {
+        slug: node.fields.slug,
+      },
     })
-}
+  })
+}
diff --git a/gatsby-ssr.js b/gatsby-ssr.js
@@ -1,7 +0,0 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/ssr-apis/
- */
-
-// You can delete this file if you're not using it

diff --git a/package.json b/package.json
@@ -5,26 +5,31 @@
   "version": "0.1.0",
   "author": "Charles Vandevoorde <charles@vandevoorde.me>",
   "dependencies": {
-    "gatsby": "^3.3.0",
-    "gatsby-background-image": "^1.5.1",
-    "gatsby-image": "^3.3.0",
-    "gatsby-plugin-manifest": "^3.3.0",
-    "gatsby-plugin-offline": "^4.3.0",
-    "gatsby-plugin-react-helmet": "^4.3.0",
-    "gatsby-plugin-sass": "^4.3.0",
-    "gatsby-plugin-sharp": "^3.3.0",
-    "gatsby-plugin-sitemap": "^3.3.0",
-    "gatsby-source-filesystem": "^3.3.0",
-    "gatsby-transformer-remark": "^4.0.0",
-    "gatsby-transformer-sharp": "^3.3.0",
-    "node-sass": "^5.0.0",
+    "@fontsource/fira-code": "^4.3.0",
+    "@fontsource/fira-sans": "^4.3.0",
+    "@tailwindcss/typography": "^0.4.1",
+    "autoprefixer": "^10.2.6",
+    "gatsby": "^3.6.0",
+    "gatsby-plugin-feed": "^3.6.0",
+    "gatsby-plugin-image": "^1.6.0",
+    "gatsby-plugin-manifest": "^3.6.0",
+    "gatsby-plugin-offline": "^4.6.0",
+    "gatsby-plugin-postcss": "^4.6.0",
+    "gatsby-plugin-react-helmet": "^4.6.0",
+    "gatsby-plugin-sharp": "^3.6.0",
+    "gatsby-plugin-sitemap": "^4.2.0",
+    "gatsby-source-filesystem": "^3.6.0",
+    "gatsby-transformer-remark": "^4.3.0",
+    "gatsby-transformer-sharp": "^3.6.0",
+    "postcss": "^8.3.0",
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "react-helmet": "^6.1.0"
+    "react-helmet": "^6.1.0",
+    "tailwindcss": "^2.1.2"
   },
   "devDependencies": {
-    "prettier": "^2.2.1"
+    "prettier": "^2.3.0"
   },
   "keywords": [
     "gatsby"

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/assets/fonts/HKGrotesk-Bold.woff2 b/src/assets/fonts/HKGrotesk-Bold.woff2
diff --git a/src/assets/fonts/HKGrotesk-BoldItalic.woff2 b/src/assets/fonts/HKGrotesk-BoldItalic.woff2
diff --git a/src/assets/fonts/HKGrotesk-Italic.woff2 b/src/assets/fonts/HKGrotesk-Italic.woff2
diff --git a/src/assets/fonts/HKGrotesk-Light.woff2 b/src/assets/fonts/HKGrotesk-Light.woff2
diff --git a/src/assets/fonts/HKGrotesk-LightItalic.woff2 b/src/assets/fonts/HKGrotesk-LightItalic.woff2
diff --git a/src/assets/fonts/HKGrotesk-Medium.woff2 b/src/assets/fonts/HKGrotesk-Medium.woff2
diff --git a/src/assets/fonts/HKGrotesk-MediumItalic.woff2 b/src/assets/fonts/HKGrotesk-MediumItalic.woff2
diff --git a/src/assets/fonts/HKGrotesk-Regular.woff2 b/src/assets/fonts/HKGrotesk-Regular.woff2
diff --git a/src/assets/fonts/HKGrotesk-SemiBold.woff2 b/src/assets/fonts/HKGrotesk-SemiBold.woff2
diff --git a/src/assets/fonts/HKGrotesk-SemiBoldItalic.woff2 b/src/assets/fonts/HKGrotesk-SemiBoldItalic.woff2
diff --git a/src/components/analytics.js b/src/components/analytics.js
diff --git a/src/components/background-image-index.js b/src/components/background-image-index.js
diff --git a/src/components/base-layout.js b/src/components/base-layout.js
@@ -0,0 +1,49 @@
+import React from 'react'
+import { useStaticQuery, graphql, Link } from 'gatsby'
+
+const BaseLayout = ({ children, className }) => {
+  const data = useStaticQuery(graphql`
+    query SiteTitleQuery {
+      site {
+        siteMetadata {
+          title
+        }
+      }
+    }
+  `)
+
+  return (
+    <div
+      className='grid grid-cols-3 gap-4 mx-2 my-8 md:mx-8 md:my-12'
+      style={{ gridTemplateColumns: '1fr minmax(min-content, 60rem) 1fr' }}
+    >
+      <div className='relative col-start-2 2xl:col-start-1 2xl:row-start-1 2xl:col-span-1 2xl:h-32'>
+        <Link
+          to='/'
+          className='2xl:absolute 2xl:bottom-1/3 2xl:right-0 text-3xl 2xl:text-4xl font-semibold'
+        >
+          {data.site.siteMetadata.title}
+        </Link>
+      </div>
+
+      <div className='relative col-start-2 2xl:col-start-2 2xl:row-start-1 2xl:col-span-1 2xl:h-32'>
+        <div className='2xl:absolute 2xl:bottom-1/3 space-x-6 text-xl font-mono'>
+          <Link to='/about' className=''>
+            about/
+          </Link>
+          <Link to='/blog' className=''>
+            blog/
+          </Link>
+        </div>
+      </div>
+
+      <main
+        className={`col-start-2 2xl:col-start-2 2xl:row-start-2 2xl:col-span-1 ${className}`}
+      >
+        {children}
+      </main>
+    </div>
+  )
+}
+
+export default BaseLayout