chore: add useKatex option

.gitattributes

@@ -2,4 +2,5 @@
 /.gitattributes export-ignore
 /.editorconfig export-ignore
 /.travis.yml export-ignore
-**/*.js.snap export-ignore
+**/*.js.snap export-ignore
+/static/css export-ignore

config.js

@@ -9,6 +9,7 @@ module.exports = {
   disqusShortname: '',
   postsPerPage: 4,
   googleAnalyticsId: 'UA-73379983-2',
+  useKatex: false,
   menu: [
     {
       label: 'Articles',

content/posts/2016-01-12---The-Origins-of-Social-Stationery-Lettering.md

@@ -45,16 +45,4 @@ Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac tu
 }
 ```
 
-### KaTeX Demo
-
-$$
-f_{\alpha}(x) = \dfrac{x^2}{(x^2+x_{max}-x)^\alpha}
-$$
-
-Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.
-
-$$
-\alpha = \dfrac{t}{t_{max}}*\dfrac{\log(v)}{\log(v_{max})}
-$$
-
 Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus.

gatsby-browser.js

@@ -1,5 +1,4 @@
 'use strict';
 
 require('./src/assets/scss/init.scss');
-
-exports.onClientEntry = () => {};
+require('./static/css/prismjs/theme.min.css');

gatsby-config.js

@@ -29,6 +29,13 @@ module.exports = {
         name: 'media'
       }
     },
+    {
+      resolve: 'gatsby-source-filesystem',
+      options: {
+        name: 'css',
+        path: `${__dirname}/static/css`
+      }
+    },
     {
       resolve: 'gatsby-source-filesystem',
       options: {
@@ -193,6 +200,6 @@ module.exports = {
         }
       }
     },
-    'gatsby-plugin-flow',
+    'gatsby-plugin-flow'
   ]
 };

gatsby-ssr.js

@@ -0,0 +1,3 @@
+'use strict';
+
+exports.onRenderBody = require('./gatsby/on-render-body.js');

gatsby/on-render-body.js

@@ -0,0 +1,22 @@
+'use strict';
+
+const React = require('react');
+const siteConfig = require('../config.js');
+
+// eslint-disable-next-line import/no-webpack-loader-syntax, import/no-unresolved
+const katexStylesheet = require('!css-loader!../static/css/katex/katex.min.css');
+
+const onRenderBody = ({ setHeadComponents }) => {
+  const { useKatex } = siteConfig;
+
+  if (useKatex) {
+    setHeadComponents([
+      React.createElement('style', {
+        key: 'katex-inline-stylesheet',
+        dangerouslySetInnerHTML: { __html: katexStylesheet.toString() }
+      })
+    ]);
+  }
+};
+
+module.exports = onRenderBody;

src/assets/scss/_base.scss

@@ -1,6 +1,4 @@
 @charset "UTF-8";
 
 @import "normalize-scss";
-@import "~katex/dist/katex.min.css";
-@import "~prismjs/themes/prism-solarizedlight.css";
 @import "base/generic";

static/css/prismjs/theme.min.css

@@ -0,0 +1 @@
+code[class*=language-],pre[class*=language-]{color:#657b83;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{background:#073642}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{background:#073642}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto;border-radius:.3em}:not(pre)>code[class*=language-],pre[class*=language-]{background-color:#fdf6e3}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#93a1a1}.token.punctuation{color:#586e75}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#268bd2}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string,.token.url{color:#2aa198}.token.entity{color:#657b83;background:#eee8d5}.token.atrule,.token.attr-value,.token.keyword{color:#859900}.token.class-name,.token.function{color:#b58900}.token.important,.token.regex,.token.variable{color:#cb4b16}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}