Observe fonts to prioritize content. Handle repeated visits with sessionStorage

package.json

@@ -98,6 +98,7 @@
     "yaml-frontmatter-loader": "0.0.3"
   },
   "dependencies": {
+    "fontfaceobserver": "^2.0.13",
     "preact": "^6.2.1",
     "preact-compat": "3.11.0",
     "prop-types": "^15.5.8",

src/components/Site/Site.jsx

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { Component } from 'react';
 import Interactive from 'antwar-interactive';
 import { GoogleAnalytics } from 'antwar-helpers';
+import FontFaceObserver from 'fontfaceobserver';
 import NotificationBar from '../NotificationBar/NotificationBar';
 import Navigation from '../Navigation/Navigation';
 import Footer from '../Footer/Footer';
@@ -19,45 +20,106 @@ import '../SidebarItem/SidebarItem.scss';
 import '../Logo/Logo.scss';
 import '../Dropdown/Dropdown.scss';
 
-export default props => {
-  // Retrieve section data
-  let sections = props.children.props.section.all()
-    .map(({ title, url, pages }) => ({
-      title,
-      url,
-      pages: pages.map(({ title, url }) => ({
-        title: title || url, // XXX: Title shouldn't be coming in as undefined
-        url
-      }))
-    }));
-
-  // Rename the root section ("webpack" => "Other") and push it to the end
-  let rootIndex = sections.findIndex(section => section.title === 'webpack');
-  let rootSection = sections.splice(rootIndex, 1)[0];
-  rootSection.title = 'Other';
-  sections.push(rootSection);
-
-  return (
-    <div id="site" className="site">
-      <Interactive
-        id="src/components/NotificationBar/NotificationBar.jsx"
-        component={ NotificationBar } />
-
-      <Interactive
-        id="src/components/Navigation/Navigation.jsx"
-        component={ Navigation }
-        sections={ sections }
-        pageUrl={ props.children.props.page.url } />
-
-      <Interactive
-        id="src/components/SidebarMobile/SidebarMobile.jsx"
-        component={ SidebarMobile }
-        sections={ sections } />
-
-      { props.children }
-      <Footer />
-
-      <GoogleAnalytics analyticsId="UA-46921629-2" />
-    </div>
-  );
-};
+export default class Site extends Component {
+  constructor(props) {
+    super(props);
+  }
+
+  componentDidMount() {
+    // load Source Sans Pro: 200, 400, 400i, 500
+    if (window.sessionStorage.getItem('ssp-loaded') === null) {
+      const ssp200 = new FontFaceObserver('Source Sans Pro', {
+        weight: 200
+      });
+
+      const ssp400 = new FontFaceObserver('Source Sans Pro', {
+        weight: 400
+      });
+
+      const ssp400i = new FontFaceObserver('Source Sans Pro', {
+      style: 'italic',
+        weight: 400
+      });
+
+      const ssp500 = new FontFaceObserver('Source Sans Pro', {
+        weight: 500
+      });
+
+      Promise.all([ ssp200.load(), ssp400.load(), ssp400i.load(), ssp500.load() ])
+      .then(() => {
+        document.documentElement.classList.add('ssp-loaded');
+        window.sessionStorage.setItem('ssp-loaded', true);
+      });
+    }
+
+    // load Source Code Pro: 400, 600
+    if (window.sessionStorage.getItem('scp-loaded') === null) {
+      const scp400 = new FontFaceObserver('Source Code Pro', {
+        weight: 400
+      });
+
+      const scp600 = new FontFaceObserver('Source Code Pro', {
+        weight: 600
+      });
+
+      Promise.all([ scp400.load(), scp600.load() ])
+      .then(() => {
+        document.documentElement.classList.add('scp-loaded');
+        window.sessionStorage.setItem('scp-loaded', true);
+      });
+    }
+
+    // load Geomanist: 600
+    const geo600 = new FontFaceObserver('Geomanist', {
+      weight: 600
+    });
+
+    geo600.load()
+      .then(() => {
+        document.documentElement.classList.add('geo-loaded');
+      });
+  }
+
+  render() {
+    // Retrieve section data
+    let sections = this.props.children.props.section.all()
+      .map(({ title, url, pages }) => ({
+        title,
+        url,
+        pages: pages.map(({ title, url }) => ({
+          title: title || url, // XXX: Title shouldn't be coming in as undefined
+          url
+        }))
+      }));
+
+    // Rename the root section ("webpack" => "Other") and push it to the end
+    let rootIndex = sections.findIndex(section => section.title === 'webpack');
+    let rootSection = sections.splice(rootIndex, 1)[0];
+    rootSection.title = 'Other';
+    sections.push(rootSection);
+
+    return (
+      <div id="site" className="site">
+        <Interactive
+          id="src/components/NotificationBar/NotificationBar.jsx"
+          component={ NotificationBar } />
+
+        <Interactive
+          id="src/components/Navigation/Navigation.jsx"
+          component={ Navigation }
+          sections={ sections }
+          pageUrl={ this.props.children.props.page.url } />
+
+        <Interactive
+          id="src/components/SidebarMobile/SidebarMobile.jsx"
+          component={ SidebarMobile }
+          sections={ sections } />
+
+        { this.props.children }
+        <Footer />
+
+        <GoogleAnalytics analyticsId="UA-46921629-2" />
+      </div>
+    );
+  }
+}

src/styles/index.scss

@@ -24,6 +24,10 @@ body {
   font: 400 getFontSize(0) $font-stack-body;
   color: getColor(elephant);
   @include fontantialias(true);
+
+  .ssp-loaded & {
+    font-family: $font-stack-body-loaded;
+  }
 }
 
 a {
@@ -87,4 +91,4 @@ details:focus, summary:focus{
 }
 
 @import './markdown';
-@import './homepage';
+@import './homepage';

src/styles/markdown.scss

@@ -21,6 +21,10 @@
     margin:1.5em 0 0.25em;
     color:getColor(fiord);
 
+    .geo-loaded & {
+      font-family: $font-stack-heading-loaded;
+    }
+
     &:first-child {
       margin-top: 0;
       line-height: 1;
@@ -261,6 +265,10 @@
     background-color: transparentize(getColor(fiord), 0.94);
     border-radius: 3px;
     text-shadow: 0 1px 0 transparentize(getColor(white), 0.4);
+
+    .scp-loaded & {
+      font-family: $font-stack-code-loaded;
+    }
   }
 
   a code {

src/styles/partials/_vars.scss

@@ -18,9 +18,13 @@ $screens: (
   medium: 768px
 );
 
-$font-stack-body: 'Source Sans Pro', -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-$font-stack-heading: Geomanist, sans-serif;
-$font-stack-code: 'Source Code Pro', Consolas, "Liberation Mono", Menlo, Courier, monospace;
+$font-stack-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+$font-stack-body-loaded: 'Source Sans Pro', sans-serif;
 
-$text-color-highlight: lighten(map-get($colors, denim), 5%);
+$font-stack-heading: Helvetica, sans-serif;
+$font-stack-heading-loaded: Geomanist, sans-serif;
+
+$font-stack-code: Consolas, "Liberation Mono", Menlo, Courier, monospace;
+$font-stack-code-loaded: 'Source Code Pro', monospace;
 
+$text-color-highlight: lighten(map-get($colors, denim), 5%);

template.ejs

@@ -8,7 +8,29 @@
     <meta name="theme-color" content="#2B3A42">
     <link rel="shortcut icon" href="/assets/favicon.ico">
 
-    <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:200,400,400i,500" rel="stylesheet">
+    <script>
+    /* store-css - https://github.com/jeremenichelli/store-css/ */ (function(f,d){"function"===typeof define&&define.amd?define(function(){return d()}):"object"===typeof exports?module.exports=d():f.store=d()})(this,function(){function f(){g&&console&&console.log.apply(console,arguments)}function d(c){this.onload=null;this.media=c.media?c.media:"all";f(this.href,"stylesheet loaded asynchronously");try{for(var d=this.sheet?this.sheet.cssRules:this.styleSheet.rules,b=d.length,a="",e=0;e<b;e++)a+=d[e].cssText;c.media&&(a="@media "+c.media+"{"+a+"}");c.storage&&window[c.storage+
+"Storage"].setItem(this.href,a)}catch(h){f("Stylesheet could not be saved for future visits",h)}}var k=document.getElementsByTagName("script")[0],g=!1;return{css:function(c,g){var b=document.createElement("link"),a="undefined"===typeof g?{}:g,e=a.ref?a.ref:k,h=null;b.rel="stylesheet";b.href=c;if(a.storage)try{h=window[a.storage+"Storage"].getItem(b.href)}catch(l){f("Stylesheet could not be retrieved from "+a.storage+"Storage",l)}h?(b=document.createElement("style"),b.textContent=h,e.parentNode.insertBefore(b,
+e),f(c,"stylesheet loaded from "+a.storage+"Storage")):(b.media="only x",a.crossOrigin&&(b.crossOrigin=a.crossOrigin),b.onload=d.bind(b,a),e.parentNode.insertBefore(b,e))},verbose:function(){g=!0}}});
+    </script>
+
+    <script>
+      window.store.css(
+        'https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600|Source+Sans+Pro:200,400,400i,500',
+        {
+          storage: 'session',
+          crossOrigin: true
+        }
+      );
+
+      if (window.sessionStorage.getItem('ssp-loaded') !== null) {
+        document.documentElement.classList.add('ssp-loaded');
+      }
+
+      if (window.sessionStorage.getItem('scp-loaded') !== null) {
+        document.documentElement.classList.add('scp-loaded');
+      }
+    </script>
 
     <link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
     <% for (var file in webpackConfig.template.cssFiles) { %>

yarn.lock

@@ -2445,6 +2445,10 @@ [email protected]:
     debug "^2.2.0"
     stream-consume "^0.1.0"
 
+fontfaceobserver@^2.0.13:
+  version "2.0.13"
+  resolved "https://registry.yarnpkg.com/fontfaceobserver/-/fontfaceobserver-2.0.13.tgz#47adbb343261eda98cb44db2152196ff124d3221"
+
 fontgen-loader@^0.2.1:
   version "0.2.1"
   resolved "https://registry.yarnpkg.com/fontgen-loader/-/fontgen-loader-0.2.1.tgz#b8ed6d9a798d5b055b80f1e21db4b04170b6f051"