Import server-rendered template as plain text + add title tag. Closes #2161

web/components/ServerRendered/ServerRenderedMetadata.html

@@ -0,0 +1,30 @@
+<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>

web/components/ServerRendered/ServerRenderedMetadata.tsx

@@ -1,34 +0,0 @@
-import { FC } from 'react';
-
-export const ServerRenderedMetadata: FC = () => (
-  <>
-    <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" />
-  </>
-);

web/components/layouts/Main.tsx

@@ -16,10 +16,12 @@ 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 { ServerRenderedMetadata } from '../ServerRendered/ServerRenderedMetadata';
 import { ServerRenderedHydration } from '../ServerRendered/ServerRenderedHydration';
 import { TitleNotifier } from '../TitleNotifier/TitleNotifier';
 
+// @ts-ignore
+import ServerRenderedMetadata from '../ServerRendered/ServerRenderedMetadata.html';
+
 export const Main: FC = () => {
   const clientConfig = useRecoilValue<ClientConfig>(clientConfigStateAtom);
   const { name, title, customStyles } = clientConfig;
@@ -45,7 +47,7 @@ export const Main: FC = () => {
   return (
     <>
       <Head>
-        {isProduction && <ServerRenderedMetadata />}
+        {isProduction ?? ServerRenderedMetadata}
 
         <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" />
@@ -73,6 +75,7 @@ export const Main: FC = () => {
         <meta name="msapplication-TileImage" content="/img/favicon/ms-icon-144x144.png" />
         <meta name="theme-color" content="#ffffff" />
 
+        <title>{name}</title>
         <style>{customStyles}</style>
         {isProduction && <ServerRenderedHydration hydrationScript={hydrationScript} />}
       </Head>

web/next.config.js

@@ -9,6 +9,11 @@ module.exports = withLess({
       use: ['@svgr/webpack'],
     });
 
+    config.module.rules.push({
+      test: /\.html/,
+      type: 'asset/source',
+    });
+
     return config;
   },
   async rewrites() {