fix(client): inject bootstrap tags to the top of head (#40804)

client/gatsby-ssr.js

@@ -32,3 +32,19 @@ export const onRenderBody = ({
   setHeadComponents(getheadTagComponents());
   setPostBodyComponents(getPostBodyComponents(pathname));
 };
+
+export const onPreRenderHTML = ({
+  getHeadComponents,
+  replaceHeadComponents
+}) => {
+  const headComponents = getHeadComponents();
+  headComponents.sort((x, y) => {
+    if (x.key === 'bootstrap-min-preload' || x.key === 'bootstrap-min') {
+      return -1;
+    } else if (y.key === 'bootstrap-min-preload' || y.key === 'bootstrap-min') {
+      return 1;
+    }
+    return 0;
+  });
+  replaceHeadComponents(headComponents);
+};

client/utils/tags.js

@@ -10,10 +10,10 @@ export const getheadTagComponents = () => {
     <link
       as='style'
       href={pathToBootstrap}
-      key='boostrap-min-preload'
+      key='bootstrap-min-preload'
       rel='preload'
     />,
-    <link href={pathToBootstrap} key='boostrap-min' rel='stylesheet' />,
+    <link href={pathToBootstrap} key='bootstrap-min' rel='stylesheet' />,
     <meta content='freeCodeCamp.org' key='og:title' name='og:title' />,
     <meta
       content={i18next.t('meta.social-description')}