From 8aed27e44d3a460d863118dfb2eda0284543b969 Mon Sep 17 00:00:00 2001
From: Gabe Kangas <gabek@real-ity.com>
Date: Sat, 22 Oct 2022 16:51:05 -0700
Subject: [PATCH] Refactor server-rendered tags. Closes #2246

---
 .../ServerRenderedHydration.tsx               | 18 ++++---
 .../ServerRenderedMetadata.html               | 30 -----------
 web/components/layouts/Main.tsx               | 54 +++++++++++++------
 3 files changed, 49 insertions(+), 53 deletions(-)
 delete mode 100644 web/components/ServerRendered/ServerRenderedMetadata.html

diff --git a/web/components/ServerRendered/ServerRenderedHydration.tsx b/web/components/ServerRendered/ServerRenderedHydration.tsx
index 5eb3d8ce9..e0ada02a5 100644
--- a/web/components/ServerRendered/ServerRenderedHydration.tsx
+++ b/web/components/ServerRendered/ServerRenderedHydration.tsx
@@ -1,10 +1,14 @@
+/* eslint-disable react/no-danger */
 import { FC } from 'react';
 
-export type ServerRenderedHydrationProps = {
-  hydrationScript: string;
-};
-
-export const ServerRenderedHydration: FC<ServerRenderedHydrationProps> = ({ hydrationScript }) => (
-  // eslint-disable-next-line react/no-danger
-  <script dangerouslySetInnerHTML={{ __html: hydrationScript }} />
+export const ServerRenderedHydration: FC = () => (
+  <script
+    id="server-side-hydration"
+    dangerouslySetInnerHTML={{
+      __html: `
+	window.configHydration = {{.ServerConfigJSON}};
+	window.statusHydration = {{.StatusJSON}};
+	`,
+    }}
+  />
 );
diff --git a/web/components/ServerRendered/ServerRenderedMetadata.html b/web/components/ServerRendered/ServerRenderedMetadata.html
deleted file mode 100644
index d0e1ce2b1..000000000
--- a/web/components/ServerRendered/ServerRenderedMetadata.html
+++ /dev/null
@@ -1,30 +0,0 @@
-<meta name="description" content="{{.Summary}}" />
-
-<meta property="og:title" content="{{.Name}}" />
-<meta property="og:site_name" content="{{.Name}}" />
-<meta property="og:url" content="{{.RequestedURL}}" />
-<meta property="og:description" content="{{.Summary}}" />
-<meta property="og:type" content="video.other" />
-<meta property="video:tag" content="{{.TagsString}}" />
-
-<meta property="og:image" content="{{.Thumbnail}}" />
-<meta property="og:image:url" content="{{.Thumbnail}}" />
-<meta property="og:image:alt" content="{{.Image}}" />
-
-<meta property="og:video" content="{{.RequestedURL}}/embed/video" />
-<meta property="og:video:secure_url" content="{{.RequestedURL}}/embed/video" />
-<meta property="og:video:height" content="315" />
-<meta property="og:video:width" content="560" />
-<meta property="og:video:type" content="text/html" />
-<meta property="og:video:actor" content="{{.Name}}" />
-
-<meta property="twitter:title" content="{{.Name}}" />
-<meta property="twitter:url" content="{{.RequestedURL}}" />
-<meta property="twitter:description" content="{{.Summary}}" />
-<meta property="twitter:image" content="{{.Image}}" />
-<meta property="twitter:card" content="player" />
-<meta property="twitter:player" content="{{.RequestedURL}}/embed/video" />
-<meta property="twitter:player:width" content="560" />
-<meta property="twitter:player:height" content="315" />
-
-<title>{{.Name}}</title>
diff --git a/web/components/layouts/Main.tsx b/web/components/layouts/Main.tsx
index ebfa0672d..2718b4c83 100644
--- a/web/components/layouts/Main.tsx
+++ b/web/components/layouts/Main.tsx
@@ -17,11 +17,9 @@ import { ClientConfig } from '../../interfaces/client-config.model';
 import { DisplayableError } from '../../types/displayable-error';
 import { FatalErrorStateModal } from '../modals/FatalErrorStateModal/FatalErrorStateModal';
 import setupNoLinkReferrer from '../../utils/no-link-referrer';
-import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration';
 import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
+import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration';
 
-// @ts-ignore
-import ServerRenderedMetadata from '../ServerRendered/ServerRenderedMetadata.html';
 import Footer from '../ui/Footer/Footer';
 
 export const Main: FC = () => {
@@ -40,17 +38,10 @@ export const Main: FC = () => {
 
   const isProduction = process.env.NODE_ENV === 'production';
 
-  const hydrationScript = isProduction
-    ? `
-	window.statusHydration = {{.StatusJSON}};
-	window.configHydration = {{.ServerConfigJSON}};
-	`
-    : null;
-
   return (
     <>
       <Head>
-        {isProduction ?? ServerRenderedMetadata}
+        {isProduction && <ServerRenderedHydration />}
 
         <link rel="apple-touch-icon" sizes="57x57" href="/img/favicon/apple-icon-57x57.png" />
         <link rel="apple-touch-icon" sizes="60x60" href="/img/favicon/apple-icon-60x60.png" />
@@ -71,20 +62,51 @@ export const Main: FC = () => {
         <link rel="icon" type="image/png" sizes="96x96" href="/img/favicon/favicon-96x96.png" />
         <link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png" />
         <link rel="manifest" href="/manifest.json" />
-
         <link href="/api/auth/provider/indieauth" />
-
         <meta name="msapplication-TileColor" content="#ffffff" />
         <meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png" />
         <meta name="theme-color" content="#ffffff" />
 
-        <title>{name}</title>
+        {!isProduction && <title>{name}</title>}
+        {isProduction && <title>{'{{.Name}}'}</title>}
+
         <style>{customStyles}</style>
         <base target="_blank" />
-
-        {isProduction && <ServerRenderedHydration hydrationScript={hydrationScript} />}
       </Head>
 
+      {isProduction && (
+        <Head>
+          <meta name="description" content="{{.Summary}}" />
+
+          <meta property="og:title" content="{{.Name}}" />
+          <meta property="og:site_name" content="{{.Name}}" />
+          <meta property="og:url" content="{{.RequestedURL}}" />
+          <meta property="og:description" content="{{.Summary}}" />
+          <meta property="og:type" content="video.other" />
+          <meta property="video:tag" content="{{.TagsString}}" />
+
+          <meta property="og:image" content="{{.Thumbnail}}" />
+          <meta property="og:image:url" content="{{.Thumbnail}}" />
+          <meta property="og:image:alt" content="{{.Image}}" />
+
+          <meta property="og:video" content="{{.RequestedURL}}/embed/video" />
+          <meta property="og:video:secure_url" content="{{.RequestedURL}}/embed/video" />
+          <meta property="og:video:height" content="315" />
+          <meta property="og:video:width" content="560" />
+          <meta property="og:video:type" content="text/html" />
+          <meta property="og:video:actor" content="{{.Name}}" />
+
+          <meta property="twitter:title" content="{{.Name}}" />
+          <meta property="twitter:url" content="{{.RequestedURL}}" />
+          <meta property="twitter:description" content="{{.Summary}}" />
+          <meta property="twitter:image" content="{{.Image}}" />
+          <meta property="twitter:card" content="player" />
+          <meta property="twitter:player" content="{{.RequestedURL}}/embed/video" />
+          <meta property="twitter:player:width" content="560" />
+          <meta property="twitter:player:height" content="315" />
+        </Head>
+      )}
+
       <ClientConfigStore />
       <TitleNotifier />
       <Layout ref={layoutRef} style={{ minHeight: '100vh' }}>