Fix icons

gatsby-config.js

@@ -89,7 +89,7 @@ module.exports = {
             // allowed selectors defined in FontAwesome. Everything else in FA should be removed.
             extractor: class  {
               static extract(content) {
-                const selectors = [`file-alt`]
+                const selectors = [`fa-file-alt`]
                 const matches = content.match(/icon(Brand)?: ([a-zA-Z0-9_-]+)/);
                 if (matches) {
                   const isBrand = typeof matches[1] !== 'undefined';

src/components/Header.tsx

@@ -2,6 +2,7 @@ import React, { StatelessComponent, ReactElement } from 'react';
 import SearchBox from './SearchBox';
 import { Link, navigate } from 'gatsby';
 import logo from '../images/silverstripe-logo.svg';
+import useDocContext from '../hooks/useDocContext';
 import useHierarchy from '../hooks/useHierarchy';
 
 interface HeaderProps {
@@ -12,6 +13,7 @@ const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): React
     const { getNodes, getHomePage, getCurrentNode, getCurrentVersion } = useHierarchy();
     const home = getHomePage();
     const currentNode = getCurrentNode() || home;
+    const context = useDocContext();
 
     const handleNavigate = (e: any): void => {
       if (typeof window === 'undefined') {
@@ -32,7 +34,7 @@ const Header: StatelessComponent<HeaderProps> = ({ handleSidebarToggle }): React
       }
     };
 
-    const title = (currentNode && currentNode.category) === 'user' ? 'CMS Help' : 'CMS Docs';
+    const title = context === 'user' ? 'CMS Help' : 'CMS Docs';
 
     return (
     <header role="banner" className="header fixed-top">	    

src/components/SearchBox.tsx

@@ -2,6 +2,7 @@ import React from 'react'
 import { StatelessComponent, ReactElement, useEffect, useState } from 'react';
 import { navigateTo } from "gatsby-link"
 import useHierarchy from '../hooks/useHierarchy';
+import useDocContext from '../hooks/useDocContext';
 import { useStaticQuery, graphql } from 'gatsby';
 
 interface SearchBoxProps {
@@ -20,15 +21,7 @@ const autocompleteSelected = (e) => {
 const SearchBox: StatelessComponent<SearchBoxProps> = ({ identifier }): ReactElement|null => {
     const { getCurrentVersion } = useHierarchy();
     const [ isFocused, setFocus ] = useState(false);
-    const { site } = useStaticQuery(graphql`
+    const context = useDocContext();
-    query {
-      site {
-        siteMetadata {
-          context
-        }
-      }
-    }
-  `);
 
     useEffect(() => {
         if (typeof window === 'undefined') return;
@@ -45,7 +38,7 @@ const SearchBox: StatelessComponent<SearchBoxProps> = ({ identifier }): ReactEle
               algoliaOptions: {
                 facetFilters: [
                   `version:${getCurrentVersion()}`,
-                  //`context:${site.siteMetadata.context}`,
+                  //`context:${context}`,
                 ],
                 hitsPerPage: 5,
               },

src/hooks/useDocContext.ts

@@ -0,0 +1,17 @@
+import { graphql, useStaticQuery } from 'gatsby';
+
+const useDocContext = (): string => {
+    const result = useStaticQuery(graphql`
+    query {
+      site {
+        siteMetadata {
+          context
+        }
+      }
+    }
+  `);
+
+  return result.site.siteMetadata.context;
+};
+
+export default useDocContext;