Skip to content
This repository was archived by the owner on Sep 14, 2021. It is now read-only.

v7.0.0

Choose a tag to compare

View all tags
@michaeltaranto michaeltaranto released this 21 Jul 23:35
· 526 commits to master since this release
v7.0.0
09dd159

DO NOT USE FONT SNIPPET YET.

It has been identified that there is still a flash of invisible text (FOIT) issue with our font loading technique. We are working on a solution, in the mean time you can consume this version but please do not add the font snippet to your page templates yet.

Web Font Loading (Roboto)

Provides a mechanism for loading web fonts from localStorage. If it's not in the localStorage on page render it will download the font, base64 encode it and put it in storage for next full page render.

  • <SeekApp /> has Roboto defined as primary font family.
  • .classicFontStack() mixin available for components needing to maintain legacy font stack, eg. <Header />.
  • Ensure you are using and instance of ExtractTextPlugin in your webpack client render config to avoid incorrect css output.
  • Ensure you are not defining your own externals in your webpack config. This allows the style guide to manage what resources are marked as external.

Migration guide:

Candidate Header to continue using legacy font

  • If using the common SEEK candidate header, eg. <Header />, it must maintain legacy font stack for now for consistent experience across products.
// eg. Header.less 
.root {
+  .classicFontStack();
  ...
}

Client side webpack configuration changes

  • Create an instance of ExtractTextPlugin to be used through your client bundle.
// eg. webpack.client.config.js
const ExtractTextPlugin = require('extract-text-webpack-plugin');
+ const extractStyles = new ExtractTextPlugin('style.css');

module.exports = decorateClientConfig(config, {
-  extractTextPlugin: ExtractTextPlugin,
+  extractTextPlugin: extractStyles,
  ...,
  module: {
    loaders: [
-      { test: /\.less$/, include: srcPaths, loader: ExtractTextPlugin.extract('style', 'css!less') }
+      { test: /\.less$/, include: srcPaths, loader: extractStyles.extract('style', 'css!less') }
    ]
  },
  plugins: [
-    new ExtractTextPlugin('style.css')
+    extractStyles
  ]
});

Server side webpack configuration changes

  • If server config contains style guide externals, remove them.
// eg. webpack.server.config.js
const decorateServerConfig = config => decorateConfig(config, {
-  externals: [
-    nodeExternals({
-      whitelist: [
-        'seek-style-guide/react'
-      ]
-    })
-  ],
  ...
});

Including the font bundle in your static files bundle

  • Import the fonts bundle in client bootstrap file to have them included in the output directory. This will see them published with the rest of your static assets.
// eg. client.js
+ require('seek-style-guide/fonts/bundle');

Rendering the font loading snippet server side

  • If your app is server rendered, import the snippet server-side and pass the snippet to your template
// eg. server-render.js
+ import template from './index.ejs';
+ import { renderFontSnippet } from 'seek-style-guide/fonts';

+ const fontSnippet = renderFontSnippet({
+   baseHref: 'http://my.path.to.static.cdn.assets',  // normally an environment variable in your project
+ });

template({
  html,
  ...,
+ fontSnippet
})

Rendering the font loading snippet client side

  • If your app is client rendered, also import the font snippet. Be sure to pass the evaluate flag through to run the code immediately. Only required for apps without a dynamic server component
// eg. client.js
+ import { renderFontSnippet } from 'seek-style-guide/fonts';

+ const fontSnippet = renderFontSnippet({
+   baseHref: 'http://my.path.to.static.cdn.assets',  // normally an environment variable in your project
+   evaluate: true
+ });

Update your page template with the font snippet

  • Add font snippet into your template. This must be before your css file!
<!-- eg. index.ejs -->
<head>
  ...
+ <%- fontSnippet %>
  <link rel="stylesheet" href="app.css">
</head>
Assets 2
Loading