Migrate codebase to Typescript and CSS Modules

.eslintrc.json

@@ -28,20 +28,22 @@
       { "prefixWithI": "always" }
     ],
     "no-tabs": "error",
-    "react/prop-types": "off", // Props should be described as TS types
-    "@typescript-eslint/explicit-function-return-type": "off",
-    "@typescript-eslint/no-var-requires": "warn"
+    "react/prop-types": "off" // Props should be described as TS types
   },
   "overrides": [
     {
       "files": [
-        "src/utils/**/*.?(js|ts)",
+        "src/utils/shared/*.?(js|ts)",
+        "src/gatsby/**/*.js",
+        "src/components/PageWrapper/index.js",
         "scripts/**/*.js",
         "src/server/**/*.js",
+        "plugins/**/*.js",
         "gatsby-*.js"
       ],
       "rules": {
-        "@typescript-eslint/no-var-requires": "off"
+        "@typescript-eslint/no-var-requires": "off",
+        "@typescript-eslint/explicit-function-return-type": "off"
       }
     }
   ]

.github/ISSUE_TEMPLATE/bug_report.md

@@ -1,5 +1,4 @@
 ---
 name: Bug or improvement report
 about: Create a report to help us improve
-
 ---

.github/ISSUE_TEMPLATE/feature_request.md

@@ -1,5 +1,4 @@
 ---
 name: Feature request
 about: Suggest an idea for this project
-
 ---

.prettierignore

@@ -1,2 +1,3 @@
 .cache/
+.github
 public/

.prettierrc

@@ -1,5 +1,6 @@
 {
   "semi": false,
+  "arrowParens": "avoid",
   "singleQuote": true,
   "trailingComma": "none",
   "printWidth": 80,

.stylelintrc

@@ -9,7 +9,7 @@
       "ignoreProperties": ["composes"]
     }],
     "selector-pseudo-class-no-unknown": [true, {
-      "ignorePseudoClasses": ["global"]
+      "ignorePseudoClasses": ["global", "local"]
     }],
     "at-rule-no-unknown": [true, {
       "ignoreAtRules": ["mixin"]

config/postcss/media.js

@@ -7,6 +7,7 @@ const screens = {
 }
 
 module.exports = {
+  screens,
   customMedia: {
     '--xxs-scr': `(max-width: ${screens.phone}px)`,
     '--xs-scr': `(max-width: ${screens.phablet}px)`,

config/postcss/mixins.js

@@ -1,3 +1,5 @@
+const { customMedia } = require('./media')
+
 const focus = {
   '&:focus': {
     color: 'var(--color-orange)',
@@ -75,6 +77,31 @@ module.exports = {
       'font-size': '16px',
       'line-height': '25px'
     },
+    columns: {
+      display: 'flex',
+      'flex-direction': 'row',
+      'flex-flow': 'wrap',
+      'justify-content': 'space-between',
+
+      [`@media ${customMedia['--sm-scr']}`]: {
+        'flex-direction': 'row'
+      },
+
+      [`@media ${customMedia['--xs-scr']}`]: {
+        'justify-content': 'center'
+      }
+    },
+    column: {
+      'flex-basis': '33.3%',
+
+      [`@media ${customMedia['--sm-scr']}`]: {
+        'flex-basis': '50%'
+      },
+
+      [`@media ${customMedia['--xs-scr']}`]: {
+        'flex-basis': '100%'
+      }
+    },
     link: {
       'text-decoration': 'none',
       color: 'var(--color-blue)',

config/prismjs/dvc-hook.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/no-var-requires */
 /* eslint-env node */
 
 const Prism = require('prismjs')

content/docs/command-reference/move.md

@@ -140,8 +140,8 @@ $ tree
 
 ## Example: change an imported directory name and location
 
-Let's try the same with an entire directory imported from an external <abbd>DVC
-repository</abbd> with `dvc import`. Note that, as in the previous cases, the
+Let's try the same with an entire directory imported from an external <abbr>DVC
+repository</abbr> with `dvc import`. Note that, as in the previous cases, the
 DVC-file is also moved.
 
 ```dvc

gatsby-config.js

@@ -30,7 +30,6 @@ const plugins = [
     }
   },
   'gatsby-plugin-postcss',
-  'gatsby-plugin-styled-components',
   'gatsby-plugin-react-helmet',
   'gatsby-plugin-sitemap',
   'gatsby-plugin-twitter',
@@ -60,7 +59,6 @@ const plugins = [
           },
           resolve: 'gatsby-remark-prismjs'
         },
-        'gatsby-remark-copy-linked-files',
         {
           resolve: 'gatsby-remark-smartypants',
           options: {
@@ -74,6 +72,7 @@ const plugins = [
           }
         },
         'gatsby-remark-relative-images',
+        'gatsby-remark-copy-linked-files',
         {
           resolve: 'gatsby-remark-external-links'
         },