Extract fontawesome

gatsby-browser.js

@@ -1,6 +1,6 @@
 require("prismjs/themes/prism-okaidia.css");
 require("./src/theme/assets/scss/theme.scss");
-require('./src/theme/assets/fontawesome/js/all.js');
+require('./src/theme/assets/fontawesome/css/all.css');
 require('./src/theme/assets/search/algolia.css');
 const smoothScroll = require('smooth-scroll');
 const Layout = require('./src/components/Layout').default;

gatsby-config.js

@@ -1,3 +1,5 @@
+const path = require('path');
+
 module.exports = {
   siteMetadata: {
     title: `SilverStripe Documentation`,
@@ -39,7 +41,14 @@ module.exports = {
       resolve: 'gatsby-transformer-remark',
       options: {
         plugins: [
-          'gatsby-remark-prismjs',
+          {
+            resolve: `gatsby-remark-prismjs`,
+            options: {
+              aliases: {
+                ss: 'html',
+              }
+            }
+          },
           `gatsby-remark-copy-linked-files`,
           {
             resolve: `gatsby-remark-images`,
@@ -63,13 +72,40 @@ module.exports = {
         printRejected: false,
         whitelist: ['algolia-autocomplete'],
         ignore: ['prismjs/','docsearch.js/', 'src/theme/assets/search/algolia.css'],
-        //purgeOnly : ['components/', '/main.css', 'bootstrap/'],
-      }
+        content: [
+          path.join(process.cwd(), '.cache/gatsby-source-git/**/*.md'),
+        ],
+        extractors: [,
+          {
+            extractor: class {
+              static extract(content) {
+                return content.match(/[A-Za-z0-9-_:\/]+/g) || [];
+              }
+            },
+            extensions: ['js', 'ts', 'jsx', 'tsx', 'md', 'mdx']            
+          },          
+          {
+            extractor: class  {
+              static extract(content) {
+                const selectors = [`file-alt`]
+                const matches = content.match(/icon(Brand)?: ([a-zA-Z0-9_-]+)/);    
+                if (matches) {
+                  const isBrand = typeof matches[1] !== 'undefined';
+                  selectors.push(isBrand ? `fab` : `fas`);
+                  selectors.push(`fa-${matches[2]}`);
+                }
+                return selectors;
+              }
+            },
+            extensions: ['md']
+          },
+        ]
+      },
     },
     {
       resolve: `gatsby-plugin-offline`,
       options: {
-        precachePages: [`/en/4/developer_guides/*`],
+        precachePages: [`/en/4/developer_guides/**`],
       },      
     }   
   ],

gatsby-ssr.js

@@ -7,8 +7,9 @@ exports.wrapPageElement = ({ element, props }) => {
 
 exports.onRenderBody = ({ setPostBodyComponents }) => {
     setPostBodyComponents([
-    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />,
-    process.env.NODE_ENV === 'production' && <script dangerouslySetInnerHTML={{
+    <script key='docsearch' type="text/javascript" src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js" />,
+    process.env.NODE_ENV === 'production' && 
+    <script key='ga' dangerouslySetInnerHTML={{
         __html: `
 		(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
             (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

package.json

@@ -34,6 +34,7 @@
     "prop-types": "^15.7.2",
     "react": "^16.11.0",
     "react-dom": "^16.11.0",
+    "react-fontawesome": "^1.7.1",
     "react-helmet": "^5.2.1",
     "react-spring": "^8.0.27",
     "resize-observer-polyfill": "^1.5.1",

yarn.lock

@@ -10373,7 +10373,7 @@ prompts@^2.2.1:
     kleur "^3.0.3"
     sisteransi "^1.0.3"
 
-prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
+prop-types@^15.5.10, prop-types@^15.5.4, prop-types@^15.5.6, prop-types@^15.5.8, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.7.2"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.7.2.tgz#52c41e75b8c87e72b9d9360e0206b99dcbffa6c5"
   integrity sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==
@@ -10639,6 +10639,13 @@ react-fast-compare@^2.0.2:
   resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
   integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
 
+react-fontawesome@^1.7.1:
+  version "1.7.1"
+  resolved "https://registry.yarnpkg.com/react-fontawesome/-/react-fontawesome-1.7.1.tgz#f74f5a338fef3ee3b379820109c1cba47290f035"
+  integrity sha512-kottReWW1I9Uupub6A5YX4VK7qfpFnEjAcm5zB4Aepst7iofONT27GJYdTcRsj7q5uQu9PXBL7GsxAFKANNUVg==
+  dependencies:
+    prop-types "^15.5.6"
+
 react-helmet@^5.2.1:
   version "5.2.1"
   resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-5.2.1.tgz#16a7192fdd09951f8e0fe22ffccbf9bb3e591ffa"