move typekit id to env var

.env.sample

@@ -1,2 +1,3 @@
 GATSBY_GITHUB_TOKEN=your_token
-GATSBY_MAPBOX_ACCESS_TOKEN=
+GATSBY_MAPBOX_ACCESS_TOKEN=
+GATSBY_TYPEKIT_ID=xxx

.github/workflows/ci.yml

@@ -77,6 +77,7 @@ jobs:
       - run: npm run build
         env:
           GATSBY_GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          GATSBY_TYPEKIT_ID: ${{ secrets.GATSBY_TYPEKIT_ID }}
           GATSBY_MAPBOX_ACCESS_TOKEN: ${{ secrets.GATSBY_MAPBOX_ACCESS_TOKEN }}
 
       - uses: actions/upload-artifact@v1

config.js

@@ -18,7 +18,6 @@ module.exports = {
   },
   rss: '/feed.xml',
   jsonfeed: '/feed.json',
-  typekitID: 'msu4qap',
   itemsPerPage: 24,
   repoContentPath: 'https://github.com/kremalicious/blog/tree/main/content',
   menu: [

jest/__fixtures__/meta.json

@@ -15,7 +15,6 @@
         "bitcoin": "171qDmKEXm9YBgBLXyGjjPvopP5o9htQ1V",
         "ether": "0x339dbC44d39bf1961E385ed0Ae88FC6069b87Ea1"
       },
-      "typekitID": "msu4qap",
       "menu": [
         {
           "title": "Photos",

src/@types/Site.d.ts

@@ -20,7 +20,6 @@ export interface Site {
   siteDescription: string
   siteUrl: string
   author: Author
-  typekitID: string
   menu: MenuItem[]
   rss: string
   jsonfeed: string

src/components/atoms/Typekit.tsx

@@ -1,13 +1,12 @@
-import React, { ReactElement } from 'react'
+import React from 'react'
 import { Helmet } from 'react-helmet'
-import { useSiteMetadata } from '../../hooks/use-site-metadata'
 
-const TypekitScript = (typekitID: string) => (
+const TypekitScript = () => (
   <script>
     {`
         (function(d) {
             var config = {
-                kitId: '${typekitID}',
+                kitId: '${process.env.GATSBY_TYPEKIT_ID}',
                 scriptTimeout: 3000,
                 async: true
             },
@@ -17,15 +16,11 @@ const TypekitScript = (typekitID: string) => (
   </script>
 )
 
-export default function Typekit(): ReactElement {
-  const { typekitID } = useSiteMetadata()
-
-  return typekitID ? (
+export default function Typekit(): JSX.Element {
+  return (
     <Helmet>
-      <link rel="dns-prefetch" href="https://use.typekit.net/" />
-      <link rel="dns-prefetch" href="https://p.typekit.net/" />
-
-      {TypekitScript(typekitID)}
+      <link rel="preconnect" href="https://use.typekit.net" />
+      <TypekitScript />
     </Helmet>
-  ) : null
+  )
 }

src/hooks/use-site-metadata.ts

@@ -19,7 +19,6 @@ const query = graphql`
           bitcoin
           ether
         }
-        typekitID
         menu {
           title
           link