master <- develop

.eslintrc.js

@@ -0,0 +1,31 @@
+module.exports = {
+  env: {
+    browser: true,
+    es6: true,
+    node: true,
+  },
+  extends: [
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'prettier',
+    'prettier/@typescript-eslint',
+    'prettier/react',
+  ],
+  plugins: ['@typescript-eslint', 'react', 'react-hooks', 'prettier'],
+  parserOptions: {
+    ecmaVersion: 2018,
+    sourceType: 'module',
+    ecmaFeatures: {
+      jsx: true,
+    },
+  },
+  rules: {
+    'prettier/prettier': 'error',
+  },
+  settings: {
+    react: {
+      version: '16.13.0',
+    },
+  },
+}

.gitignore

@@ -4,4 +4,3 @@ public
 .DS_Store
 .intermediate-representation
 .cache
-.vscode

.prettierrc.js

@@ -0,0 +1,5 @@
+module.exports = {
+  trailingComma: 'es5',
+  semi: false,
+  singleQuote: true,
+}

.vscode/settings.json

@@ -0,0 +1,6 @@
+{
+  "editor.formatOnSave": false,
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  }
+}

gatsby-browser.js

@@ -0,0 +1,6 @@
+// Import all js dependencies.
+import 'jquery/dist/jquery.min.js'
+import 'popper.js/dist/popper.min'
+import 'bootstrap/js/dist/util'
+import 'bootstrap/js/dist/carousel'
+import 'bootstrap/js/dist/dropdown'

gatsby-config.js

@@ -1,3 +1,4 @@
+/* eslint-disable @typescript-eslint/camelcase */
 module.exports = {
   siteMetadata: {
     title: 'Gatstrap',
@@ -86,13 +87,20 @@ module.exports = {
         mergeCachingHeaders: true,
       },
     },
+    {
+      resolve: 'gatsby-plugin-graphql-codegen',
+      options: {
+        fileName: `types/graphql-types.d.ts`,
+      },
+    },
     'gatsby-plugin-catch-links',
     'gatsby-plugin-offline',
     'gatsby-plugin-react-helmet',
     'gatsby-plugin-sass',
     'gatsby-plugin-sharp',
     'gatsby-plugin-sitemap',
     'gatsby-plugin-twitter',
+    'gatsby-plugin-typescript',
     'gatsby-transformer-sharp',
   ],
 }

gatsby-node.js

@@ -1,6 +1,7 @@
-const each = require('lodash/each')
+/* eslint-disable @typescript-eslint/explicit-function-return-type */
+/* eslint-disable @typescript-eslint/no-var-requires */
 const path = require('path')
-const PostTemplate = path.resolve('./src/templates/index.js')
+const PostTemplate = path.resolve('./src/templates/template.tsx')
 
 exports.createPages = ({ graphql, actions }) => {
   const { createPage } = actions
@@ -10,7 +11,7 @@ exports.createPages = ({ graphql, actions }) => {
       graphql(
         `
           {
-            allFile(filter: { extension: { regex: "/md|js/" } }, limit: 1000) {
+            allFile(filter: { extension: { regex: "/md|tsx/" } }, limit: 1000) {
               edges {
                 node {
                   id
@@ -37,7 +38,7 @@ exports.createPages = ({ graphql, actions }) => {
         // Create blog posts & pages.
         const items = data.allFile.edges
         const posts = items.filter(({ node }) => /posts/.test(node.name))
-        each(posts, ({ node }) => {
+        posts.forEach(({ node }) => {
           if (!node.remark) return
           const { path } = node.remark.frontmatter
           createPage({
@@ -47,7 +48,7 @@ exports.createPages = ({ graphql, actions }) => {
         })
 
         const pages = items.filter(({ node }) => /page/.test(node.name))
-        each(pages, ({ node }) => {
+        pages.forEach(({ node }) => {
           if (!node.remark) return
           const { name } = path.parse(node.path)
           const PageTemplate = path.resolve(node.path)

package.json

@@ -1,62 +1,67 @@
 {
   "name": "gatsby-starter-bootstrap",
   "description": "Simple starter for Gatsby",
-  "version": "2.0.1",
+  "version": "3.0.0",
   "author": "Futoshi Iwashita <jaxx2104@gmail.com>",
   "dependencies": {
-    "gatsby": "2.22.15",
-    "gatsby-image": "2.4.5",
-    "gatsby-link": "2.4.3",
-    "gatsby-plugin-catch-links": "2.3.3",
-    "gatsby-plugin-feed": "2.5.3",
-    "gatsby-plugin-google-analytics": "2.3.2",
-    "gatsby-plugin-manifest": "2.4.9",
-    "gatsby-plugin-netlify": "2.3.3",
-    "gatsby-plugin-nprogress": "2.3.2",
-    "gatsby-plugin-offline": "3.2.7",
-    "gatsby-plugin-preact": "3.3.2",
-    "gatsby-plugin-react-helmet": "3.3.2",
+    "gatsby": "2.22.19",
+    "gatsby-image": "2.4.6",
+    "gatsby-link": "2.4.5",
+    "gatsby-plugin-catch-links": "2.3.4",
+    "gatsby-plugin-google-analytics": "2.3.3",
+    "gatsby-plugin-graphql-codegen": "^2.7.1",
+    "gatsby-plugin-manifest": "2.4.10",
+    "gatsby-plugin-netlify": "2.3.4",
+    "gatsby-plugin-offline": "3.2.8",
+    "gatsby-plugin-react-helmet": "3.3.3",
     "gatsby-plugin-sass": "^2.2.4",
-    "gatsby-plugin-sharp": "2.6.9",
-    "gatsby-plugin-sitemap": "2.4.3",
-    "gatsby-plugin-twitter": "2.3.2",
-    "gatsby-remark-copy-linked-files": "2.3.3",
-    "gatsby-remark-images": "3.3.8",
-    "gatsby-remark-prismjs": "3.5.2",
-    "gatsby-remark-responsive-iframe": "2.4.3",
-    "gatsby-remark-smartypants": "2.3.2",
-    "gatsby-source-filesystem": "2.3.8",
-    "gatsby-transformer-remark": "2.8.13",
-    "gatsby-transformer-sharp": "2.5.3"
+    "gatsby-plugin-sharp": "2.6.10",
+    "gatsby-plugin-sitemap": "2.4.4",
+    "gatsby-plugin-twitter": "2.3.3",
+    "gatsby-plugin-typescript": "^2.4.4",
+    "gatsby-remark-copy-linked-files": "2.3.4",
+    "gatsby-remark-images": "3.3.9",
+    "gatsby-remark-prismjs": "3.5.3",
+    "gatsby-remark-responsive-iframe": "2.4.4",
+    "gatsby-remark-smartypants": "2.3.3",
+    "gatsby-source-filesystem": "2.3.10",
+    "gatsby-transformer-remark": "2.8.14",
+    "gatsby-transformer-sharp": "2.5.4"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "1.2.28",
     "@fortawesome/free-brands-svg-icons": "5.13.0",
     "@fortawesome/free-solid-svg-icons": "5.13.0",
-    "@fortawesome/react-fontawesome": "0.1.9",
-    "animate.css": "3.7.2",
+    "@fortawesome/react-fontawesome": "0.1.10",
+    "@types/react-helmet": "^6.0.0",
+    "@typescript-eslint/eslint-plugin": "2.32.0",
+    "@typescript-eslint/parser": "2.32.0",
+    "animate.css": "4.1.0",
     "babel-eslint": "10.1.0",
     "bootstrap": "4.5.0",
     "emergence.js": "1.1.2",
-    "eslint": "6.8.0",
+    "eslint": "7.1.0",
     "eslint-config-prettier": "6.11.0",
     "eslint-plugin-prettier": "3.1.3",
     "eslint-plugin-react": "7.20.0",
+    "eslint-plugin-react-hooks": "^4.0.4",
     "font-awesome": "4.7.0",
-    "gh-pages": "2.2.0",
+    "gh-pages": "3.0.0",
     "husky": "4.2.5",
-    "lint-staged": "10.2.7",
-    "lodash": "4.17.15",
+    "jquery": "^3.5.1",
+    "lint-staged": "10.2.8",
     "modern-normalize": "0.6.0",
     "node-sass": "4.14.1",
+    "popper.js": "^1.16.1",
     "prettier": "2.0.5",
     "prismjs": "1.20.0",
     "react": "16.13.1",
     "react-dom": "16.13.1",
     "react-helmet": "6.0.0",
     "textlint": "11.6.3",
     "textlint-rule-preset-ja-spacing": "2.0.1",
-    "textlint-rule-preset-japanese": "4.0.4"
+    "textlint-rule-preset-japanese": "4.0.4",
+    "typescript": "^3.9.3"
   },
   "keywords": [
     "gatsby",
@@ -78,7 +83,7 @@
     "deploy": "gatsby build --prefix-paths && gh-pages -d public",
     "develop": "gatsby develop",
     "format": "prettier --write \"**/*.+(js|json|md)\" --ignore-path .gitignore",
-    "lint": "eslint --ext .js,.jsx --ignore-path .gitignore .",
+    "lint": "eslint --fix --ext .js,.jsx --ignore-path .gitignore .",
     "lint:text": "textlint src/pages/**/index.md",
     "lint:textfix": "textlint --fix src/pages/**/index.md",
     "test": "prettier --write \"**/*.+(js|jsx|json|css|scss)\""

src/components/adsense/adsense.tsx

@@ -0,0 +1,39 @@
+import React, { useEffect } from 'react'
+import './style.scss'
+
+interface Props {
+  clientId?: string | null
+  slotId: string
+  format: string
+}
+
+declare global {
+  interface Window {
+    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+    adsbygoogle: any
+  }
+}
+
+const Adsense: React.FC<Props> = ({ clientId, slotId, format }: Props) => {
+  useEffect(() => {
+    if (clientId) {
+      window.adsbygoogle = (window.adsbygoogle || []).push({})
+    }
+  }, [clientId])
+
+  return clientId ? (
+    <div className="ad">
+      <ins
+        className="adsbygoogle"
+        style={{ display: 'block' }}
+        data-ad-client={clientId}
+        data-ad-slot={slotId}
+        data-ad-format={format}
+      />
+    </div>
+  ) : (
+    <></>
+  )
+}
+
+export default Adsense

src/components/badge/badge.tsx

@@ -0,0 +1,16 @@
+import React from 'react'
+
+interface Props {
+  label: string
+  primary: boolean
+}
+
+const Badges: React.FC<Props> = ({ label, primary }: Props) => {
+  return (
+    <span className={`badge ${primary ? 'badge-primary' : 'badge-secondary'}`}>
+      {label}
+    </span>
+  )
+}
+
+export default Badges

src/components/button/button.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { Link } from 'gatsby'
+
+interface Props {
+  path: string
+  label: string
+  primary: boolean
+}
+
+const Button: React.FC<Props> = ({ path, label, primary }: Props) => {
+  return (
+    <Link className="readmore" to={path}>
+      <span
+        className={`btn btn-outline-primary btn-block ${
+          primary ? 'btn-outline-primary' : 'btn-outline-secondary'
+        }`}
+      >
+        {label}
+      </span>
+    </Link>
+  )
+}
+
+export default Button