From 4879d2660495e9f444dcbe4fcbc18aef293628f8 Mon Sep 17 00:00:00 2001
From: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com>
Date: Wed, 27 Jan 2021 16:47:01 +0300
Subject: [PATCH] fix(client): inject bootstrap tags to the top of head
 (#40804)

---
 client/gatsby-ssr.js | 16 ++++++++++++++++
 client/utils/tags.js |  4 ++--
 2 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/client/gatsby-ssr.js b/client/gatsby-ssr.js
index 041dda09346..86df37baead 100644
--- a/client/gatsby-ssr.js
+++ b/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);
+};
diff --git a/client/utils/tags.js b/client/utils/tags.js
index d502b11cad5..548705521cd 100644
--- a/client/utils/tags.js
+++ b/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')}