typekit component

data/meta.yml

@@ -23,6 +23,8 @@ availability:
 gpg: https://kretschmann.io/pub.gpg
 addressbook: /matthias-kretschmann.vcf
 
+typekitID: dtg3zui
+
 # Analytics tools
 googleanalytics: UA-1441794-4
 matomoUrl: https://analytics.kremalicious.com

scripts/deploy.sh

@@ -14,9 +14,9 @@ set -e;
 if [ "$TRAVIS_PULL_REQUEST" != "false" ] && [ "$TRAVIS_BRANCH" == "master" ]; then
 
     aws s3 sync \
-  --delete \
+      --delete \
-  --acl public-read \
+      --acl public-read \
-  ./public s3://"$AWS_S3_BUCKET_BETA"
+      ./public s3://"$AWS_S3_BUCKET_BETA"
 
 ##
 ## check for master push which is no pull request
@@ -24,9 +24,9 @@ if [ "$TRAVIS_PULL_REQUEST" != "false" ] && [ "$TRAVIS_BRANCH" == "master" ]; th
 elif [ "$TRAVIS_BRANCH" == "master" ] && [ "$TRAVIS_PULL_REQUEST" == "false" ] || [ "$TRAVIS" != true ]; then
 
   aws s3 sync \
-  --delete \
+    --delete \
-  --acl public-read \
+    --acl public-read \
-  ./public s3://"$AWS_S3_BUCKET"
+    ./public s3://"$AWS_S3_BUCKET"
 
   echo "---------------------------------------------"
   echo "         ✓ done deployment "

src/components/atoms/Head.jsx

@@ -2,9 +2,10 @@ import React, { Fragment } from 'react'
 import PropTypes from 'prop-types'
 import Helmet from 'react-helmet'
 import SEO from './SEO'
+import Typekit from './Typekit'
 
 const Head = ({ meta }) => {
-  const { title, tagline } = meta
+  const { title, tagline, typekitID } = meta
 
   return (
     <Fragment>
@@ -13,10 +14,10 @@ const Head = ({ meta }) => {
         titleTemplate={`%s // ${title.toLowerCase()} { ${tagline.toLowerCase()} }`}
       >
         <meta name="apple-mobile-web-app-title" content={title.toLowerCase()} />
-
-        <link rel="dns-prefetch" href="https://use.typekit.net/" />
-        <link rel="dns-prefetch" href="https://p.typekit.net/" />
       </Helmet>
+
+      {typekitID && <Typekit id={typekitID} />}
+
       <SEO meta={meta} />
     </Fragment>
   )

src/components/atoms/Typekit.js

@@ -0,0 +1,33 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Helmet from 'react-helmet'
+
+const TypekitScript = props => (
+  <script>
+    {`
+        (function(d) {
+            var config = {
+                kitId: '${props.id}',
+                scriptTimeout: 3000,
+                async: true
+            },
+            h=d.documentElement,t=setTimeout(function(){h.className=h.className.replace(/\bwf-loading\b/g,"")+" wf-inactive";},config.scriptTimeout),tk=d.createElement("script"),f=false,s=d.getElementsByTagName("script")[0],a;h.className+=" wf-loading";tk.src='https://use.typekit.net/'+config.kitId+'.js';tk.async=true;tk.onload=tk.onreadystatechange=function(){a=this.readyState;if(f||a&&a!="complete"&&a!="loaded")return;f=true;clearTimeout(t);try{Typekit.load(config)}catch(e){}};s.parentNode.insertBefore(tk,s)
+        })(document);
+    `}
+  </script>
+)
+
+const Typekit = props => (
+  <Helmet>
+    <link rel="dns-prefetch" href="https://use.typekit.net/" />
+    <link rel="dns-prefetch" href="https://p.typekit.net/" />
+
+    {TypekitScript(props)}
+  </Helmet>
+)
+
+export default Typekit
+
+TypekitScript.propTypes = {
+  id: PropTypes.string.isRequired
+}

src/layouts/index.jsx

@@ -104,6 +104,7 @@ export const query = graphql`
       }
       gpg
       addressbook
+      typekitID
     }
 
     # the package.json file

src/layouts/index.scss

@@ -1,5 +1,4 @@
 @import 'variables';
-@import url('https://use.typekit.net/#{$typekit}.css');
 
 *,
 *::before,
@@ -16,6 +15,11 @@ body {
 
 html {
     font-size: $font-size-root;
+
+    &.wf-loading,
+    &.wf-inactive {
+        font-size: $font-size-root - 2px;
+    }
 }
 
 body {

src/styles/_variables.scss

@@ -1,4 +1,3 @@
-$typekit: 'dtg3zui';
 $projectImageMaxWidth: 1200px;
 $easing: cubic-bezier(.75, 0, .08, 1);