Add Typescript, Upgrade some things and move to CircleCI (again) (#1591)

* Upgrade everything including node version

* Add very basic CircleCI File

* Push for CI

* Stop using my registry mirror, and setup fontawesome in CI

* Get font from Github Package manager

* Use me scoped typeface package from github registry

* Switch from using dokku based registry to using official ones

* Upgrade oswald and use less bold font to fix weird ffli issue

* Switch to typescript (without any real type checking yet

* Typescript some stuff

* Do some manualy typing but now its time for some plugins

* Use typescript for more config files

* Generate types from the GraphQL and fix a few type issues

* Fix most typescript errors only a few to go

* Ignore one more ts

* Add Procfile and only issue is repeated type now

* Yay find a config option that makes the names not conflict and therefor pass typescript

* Run Typescript in specs and try deploying

* Do token stuff in shared command now

* Make my own fake graphql template string thing so the ts type generator will pick it up but I still get a raw string out

* Use a cache for yarn deps

* Deploy only on master

* Fix yml formatting

.circleci/config.yml

@@ -0,0 +1,47 @@
+version: 2.1
+commands:
+  yarn-install:
+    steps:
+      - restore_cache:
+          keys:
+            # when lock file changes, use increasingly general patterns to restore cache
+            - yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
+            - yarn-packages-v1-{{ .Branch }}-
+            - yarn-packages-v1-
+      - run: "echo \"//npm.fontawesome.com/:_authToken=$FONTAWESOME_AUTH_TOKEN\" >> .npmrc"
+      - run: "echo \"//npm.pkg.github.com/:_authToken=$GITHUB_PACKAGE_TOKEN\" >> .npmrc"
+      - run: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - save_cache:
+          paths:
+            - ~/.cache/yarn
+          key: yarn-packages-v1-{{ .Branch }}-{{ checksum "yarn.lock" }}
+jobs:
+  test:
+    parallelism: 1
+    docker:
+      - image: circleci/node:14.0.0
+    steps:
+      - checkout
+      - yarn-install
+      - run: yarn test
+  deploy:
+    parallelism: 1
+    docker:
+      - image: circleci/node:14.0.0
+    steps:
+      - checkout
+      - yarn-install
+      - run: yarn build
+      - run: yarn deploy
+workflows:
+  version: 2.1
+  test_and_deploy:
+    jobs:
+      - test
+      - deploy:
+          requires:
+            - test
+          filters:
+            branches:
+              only:
+                - master

.node-version

@@ -1 +1 @@
-11.9.0
+14.0.0

.npmrc

@@ -1,3 +1,3 @@
 @fortawesome:registry=https://npm.fontawesome.com/
-registry=https://my-registry.dokku.coreyja.com/
+@coreyja:registry=https://npm.pkg.github.com
 always-auth=true

Procfile

@@ -0,0 +1,2 @@
+gatsby:         PORT=8000 yarn run develop
+graphql-types:  yarn run ggl-types:watch

codegen.yml

@@ -0,0 +1,24 @@
+overwrite: true
+schema: 'http://localhost:8000/___graphql'
+documents:
+  [
+    './src/**/*.tsx',
+    './src/**/*.ts',
+    './gatsby/**/*.ts',
+    './node_modules/gatsby-transformer-sharp/src/*.js',
+    './node_modules/gatsby-image/src/*.js',
+  ]
+generates:
+  src/types/generated.tsx:
+    plugins:
+      - 'typescript'
+      - 'typescript-operations'
+      - 'typescript-react-apollo'
+    config:
+      namingConvention: keep
+  ./schema.json:
+    plugins:
+      - 'introspection'
+hooks:
+  afterOneFileWrite:
+    - prettier --write

content/blog/ported-blog-to-gatsby/index.md

@@ -8,6 +8,7 @@ tags:
   - react
   - ramblings
 color: blue
+description: "I ported my blog to Gatsby 🎉"
 ---
 
 For a couple years now I've used the Middleman ruby framework to build my static blog site. I choose Middleman initially since it was a very similar environment to Rails, which I have more experience in. This definitely helped my get off the ground quickly!

gatsby-config.js

@@ -1,162 +1,6 @@
-module.exports = {
-  siteMetadata: {
-    title: `COREYJA`,
-    author: `Corey Alexander`,
-    description: `My personal blog`,
-    siteUrl: `https://coreyja.com`,
-    social: {
-      github: `coreyja`,
-      twitter: `coreyja_dev`
-    }
-  },
-  plugins: [
-    {
-      resolve: `gatsby-plugin-s3`,
-      options: {
-        bucketName: process.env.AWS_BUCKET,
-        protocol: process.env.AWS_PROTOCOL,
-        hostname: process.env.AWS_HOSTNAME
-      }
-    },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        path: `${__dirname}/content/blog`,
-        name: `blog`
-      }
-    },
-    {
-      resolve: `gatsby-source-filesystem`,
-      options: {
-        path: `${__dirname}/content/assets`,
-        name: `assets`
-      }
-    },
-    {
-      resolve: `gatsby-transformer-remark`,
-      options: {
-        plugins: [
-          {
-            resolve: `gatsby-remark-images`,
-            options: {
-              maxWidth: 2000,
-              withWebp: true,
-              tracedSVG: true
-            }
-          },
-          {
-            resolve: `gatsby-remark-responsive-iframe`,
-            options: {
-              wrapperStyle: `margin-bottom: 1.0725rem`
-            }
-          },
-          {
-            resolve: `gatsby-remark-prismjs`,
-            options: {
-              showLineNumbers: true
-            }
-          },
-          `gatsby-remark-copy-linked-files`,
-          `gatsby-remark-smartypants`,
-          {
-            resolve: "gatsby-remark-external-links",
-            options: {
-              target: "_blank",
-              rel: "noopener"
-            }
-          }
-        ]
-      }
-    },
-    `gatsby-transformer-sharp`,
-    `gatsby-plugin-sharp`,
-    `gatsby-plugin-sass`,
-    {
-      resolve: "gatsby-plugin-tags",
-      options: {
-        templatePath: `${__dirname}/src/templates/tag.js`
-      }
-    },
-    {
-      resolve: `gatsby-plugin-feed`,
-      options: {
-        query: `
-          {
-            site {
-              siteMetadata {
-                title
-                description
-                siteUrl
-                site_url: siteUrl
-              }
-            }
-          }
-        `,
-        feeds: [
-          {
-            serialize: ({ query: { site, allMarkdownRemark } }) => {
-              return allMarkdownRemark.edges.map(edge => {
-                return Object.assign({}, edge.node.frontmatter, {
-                  description: edge.node.excerpt,
-                  category: edge.node.fields.tags,
-                  date: edge.node.frontmatter.date,
-                  url: site.siteMetadata.siteUrl + edge.node.fields.slug,
-                  guid: site.siteMetadata.siteUrl + edge.node.fields.slug,
-                  custom_elements: [
-                    { "content:encoded": edge.node.html },
-                    { tags: edge.node.fields.tags.join(",") }
-                  ]
-                });
-              });
-            },
-            query: `
-              {
-                allMarkdownRemark(
-                  sort: { order: DESC, fields: [frontmatter___date] },
-                ) {
-                  edges {
-                    node {
-                      excerpt
-                      html
-                      fields {
-                        slug
-                        tags
-                      }
-                      frontmatter {
-                        title
-                        date
-                      }
-                    }
-                  }
-                }
-              }
-            `,
-            output: "/rss.xml",
-            title: "COREYJA RSS Feed"
-          }
-        ]
-      }
-    },
-    {
-      resolve: `gatsby-plugin-manifest`,
-      options: {
-        name: `Coreyja Blog`,
-        short_name: `coreyja Blog`,
-        start_url: `/`,
-        background_color: `#aa66cc`,
-        theme_color: `#aa66cc`,
-        display: `minimal-ui`,
-        icon: `content/assets/favicon.svg`
-      }
-    },
-    `gatsby-plugin-offline`,
-    `gatsby-plugin-react-helmet`,
-    {
-      resolve: `gatsby-plugin-typography`,
-      options: {
-        pathToConfigModule: `src/utils/typography`
-      }
-    },
-    `gatsby-plugin-sitemap`
-  ]
-};
+const { generateConfig } = require("gatsby-plugin-ts-config");
+
+module.exports = generateConfig({
+  configDir: "gatsby", // or wherever you would like to store your gatsby files
+  projectRoot: __dirname
+});

gatsby/gatsby-browser.ts

@@ -0,0 +1,7 @@
+// custom typefaces
+import "@coreyja/typeface-hack-nerd-font";
+import "@coreyja/typeface-alternate-gothic1";
+import "typeface-oswald";
+
+import "../src/styles/global.scss";
+import "../src/styles/code.scss";