From 85667902af094a206b0d9c5247a77409fb806171 Mon Sep 17 00:00:00 2001
From: Matthias Kretschmann <m@kretschmann.io>
Date: Sun, 12 Sep 2021 23:16:30 +0200
Subject: [PATCH] move typekit id to env var

---
 .env.example                                  |  1 +
 content/meta.yml                              |  2 --
 src/components/atoms/HostnameCheck.module.css |  2 +-
 src/components/atoms/Typekit.jsx              | 10 +++-------
 src/hooks/use-meta.js                         |  1 -
 tests/__fixtures__/meta.json                  |  1 -
 6 files changed, 5 insertions(+), 12 deletions(-)

diff --git a/.env.example b/.env.example
index 52643eb..f1fc489 100644
--- a/.env.example
+++ b/.env.example
@@ -1 +1,2 @@
 GATSBY_GITHUB_TOKEN=xxx
+GATSBY_TYPEKIT_ID=xxx
\ No newline at end of file
diff --git a/content/meta.yml b/content/meta.yml
index a965f76..8365a1e 100644
--- a/content/meta.yml
+++ b/content/meta.yml
@@ -13,8 +13,6 @@
   addressbook: /matthias-kretschmann.vcf
   bugs: https://github.com/kremalicious/portfolio/issues/new
 
-  typekitID: dtg3zui
-
   # Analytics tools
   matomoUrl: https://analytics.kremalicious.com
   matomoSite: 2
diff --git a/src/components/atoms/HostnameCheck.module.css b/src/components/atoms/HostnameCheck.module.css
index 6237e17..8a2a06a 100644
--- a/src/components/atoms/HostnameCheck.module.css
+++ b/src/components/atoms/HostnameCheck.module.css
@@ -5,7 +5,7 @@
   padding: calc(var(--spacer) / 3);
   font-size: var(--font-size-small);
   font-weight: bold;
-  background: var(--brand-light);
+  background: var(--box-background-color);
 }
 
 .hostnameInfo p {
diff --git a/src/components/atoms/Typekit.jsx b/src/components/atoms/Typekit.jsx
index 0f1a7c7..cb46290 100644
--- a/src/components/atoms/Typekit.jsx
+++ b/src/components/atoms/Typekit.jsx
@@ -1,13 +1,12 @@
 import React from 'react'
 import { Helmet } from 'react-helmet'
-import { useMeta } from '../../hooks/use-meta'
 
-const TypekitScript = (typekitID) => (
+const TypekitScript = () => (
   <script>
     {`
         (function(d) {
             var config = {
-                kitId: '${typekitID}',
+                kitId: '${process.env.GATSBY_TYPEKIT_ID}',
                 scriptTimeout: 3000,
                 async: true
             },
@@ -18,13 +17,10 @@ const TypekitScript = (typekitID) => (
 )
 
 export default function Typekit() {
-  const { typekitID } = useMeta()
-
   return (
     <Helmet>
       <link rel="preconnect" href="https://use.typekit.net" />
-
-      {TypekitScript(typekitID)}
+      <TypekitScript />
     </Helmet>
   )
 }
diff --git a/src/hooks/use-meta.js b/src/hooks/use-meta.js
index e44c69e..a7c199b 100644
--- a/src/hooks/use-meta.js
+++ b/src/hooks/use-meta.js
@@ -18,7 +18,6 @@ const query = graphql`
       }
       gpg
       addressbook
-      typekitID
       matomoUrl
       matomoSite
       allowedHosts
diff --git a/tests/__fixtures__/meta.json b/tests/__fixtures__/meta.json
index 2d5c37d..f64abb2 100644
--- a/tests/__fixtures__/meta.json
+++ b/tests/__fixtures__/meta.json
@@ -19,7 +19,6 @@
     "gpg": "https://kretschmann.io/pub.gpg",
     "addressbook": "/matthias-kretschmann.vcf",
     "bugs": "https://github.com/kremalicious/portfolio/issues",
-    "typekitID": "dtg3zui",
     "matomoUrl": "https://analytics.kremalicious.com",
     "matomoSite": 2,
     "allowedHosts": [