From 0a9b448c3bfdd51a11bc706ea790841724ba9601 Mon Sep 17 00:00:00 2001
From: Julien <juliencaron@protonmail.com>
Date: Sat, 17 Sep 2022 15:05:45 +0200
Subject: [PATCH] refactor: move google head tags to gatsby-ssr

---
 website/gatsby-ssr.ts          | 15 -------------
 website/gatsby-ssr.tsx         | 40 ++++++++++++++++++++++++++++++++++
 website/src/components/seo.tsx | 17 ---------------
 website/tsconfig.json          |  2 +-
 4 files changed, 41 insertions(+), 33 deletions(-)
 delete mode 100644 website/gatsby-ssr.ts
 create mode 100644 website/gatsby-ssr.tsx

diff --git a/website/gatsby-ssr.ts b/website/gatsby-ssr.ts
deleted file mode 100644
index 0f11ab85..00000000
--- a/website/gatsby-ssr.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-/**
- * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
- *
- * See: https://www.gatsbyjs.org/docs/ssr-apis/
- */
-
-import { GatsbySSR } from 'gatsby'
-
-export const onRenderBody: GatsbySSR['onRenderBody'] = ({
-  setHtmlAttributes,
-}) => {
-  setHtmlAttributes({ lang: 'en' })
-}
-
-export { default as wrapPageElement } from './src/libs/wrapPageElement'
diff --git a/website/gatsby-ssr.tsx b/website/gatsby-ssr.tsx
new file mode 100644
index 00000000..471d42f0
--- /dev/null
+++ b/website/gatsby-ssr.tsx
@@ -0,0 +1,40 @@
+/**
+ * Implement Gatsby's SSR (Server Side Rendering) APIs in this file.
+ *
+ * See: https://www.gatsbyjs.org/docs/ssr-apis/
+ */
+
+import React, { Fragment } from 'react'
+
+import { GatsbySSR } from 'gatsby'
+
+const GoogleAdsTag = (
+  <script
+    key="google-ads"
+    async
+    src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5817566022458684"
+    crossOrigin="anonymous"
+  />
+)
+
+const GoogleFontTag = (
+  <Fragment key="google-fonts">
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link
+      rel="preconnect"
+      href="https://fonts.gstatic.com"
+      crossOrigin="true"
+    />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&family=Fira+Sans:wght@300;400;700&display=swap"
+      rel="stylesheet"
+    />
+  </Fragment>
+)
+
+export const onRenderBody: GatsbySSR['onRenderBody'] = props => {
+  props.setHtmlAttributes({ lang: 'en' })
+  props.setHeadComponents([GoogleAdsTag, GoogleFontTag])
+}
+
+export { default as wrapPageElement } from './src/libs/wrapPageElement'
diff --git a/website/src/components/seo.tsx b/website/src/components/seo.tsx
index a8f94972..d4de0566 100644
--- a/website/src/components/seo.tsx
+++ b/website/src/components/seo.tsx
@@ -51,23 +51,6 @@ const SEO: FC<SEOProps> = ({ title = '', description = '', children }) => {
       <meta property="og:url" content={seo.url} />
 
       {children}
-
-      <script
-        async
-        src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-5817566022458684"
-        crossOrigin="anonymous"
-      ></script>
-
-      <link rel="preconnect" href="https://fonts.googleapis.com" />
-      <link
-        rel="preconnect"
-        href="https://fonts.gstatic.com"
-        crossOrigin="true"
-      />
-      <link
-        href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400&family=Fira+Sans:wght@300;400;700&display=swap"
-        rel="stylesheet"
-      />
     </>
   )
 }
diff --git a/website/tsconfig.json b/website/tsconfig.json
index d6334019..e7a7db06 100644
--- a/website/tsconfig.json
+++ b/website/tsconfig.json
@@ -18,6 +18,6 @@
     }
   },
 
-  "include": ["./src/**/*", "./gatsby-*.ts"],
+  "include": ["src/**/*", "gatsby-*.ts", "gatsby-ssr.tsx"],
   "exclude": ["node_modules", "public", ".cache", "generated"]
 }