From 6f34ca46526eb169b0ca63dbd4f7e8befbc3b7fb Mon Sep 17 00:00:00 2001
From: Jamie Pine <ijamespine@me.com>
Date: Wed, 15 Jun 2022 15:06:08 -0700
Subject: [PATCH] (fix) landing: react helmet

---
 apps/landing/src/pages/blog/post.page.tsx     | 69 ++++++++++---------
 apps/landing/src/pages/index.page.tsx         | 17 +++++
 .../src/renderer/_default.page.server.tsx     | 46 +++++--------
 3 files changed, 72 insertions(+), 60 deletions(-)

diff --git a/apps/landing/src/pages/blog/post.page.tsx b/apps/landing/src/pages/blog/post.page.tsx
index 516495c4a..9532e12c2 100644
--- a/apps/landing/src/pages/blog/post.page.tsx
+++ b/apps/landing/src/pages/blog/post.page.tsx
@@ -15,46 +15,49 @@ function MarkdownPage({ post }: { post: PostOrPage }) {
 	console.log(post);
 
 	return (
-		<div className="container max-w-4xl p-4 m-auto mt-8 mb-20 prose lg:prose-xs dark:prose-invert">
+		<>
 			<Helmet>
 				<title>{post?.title} - Spacedrive Blog</title>
 				<meta name="description" content={post?.excerpt} />
 				<meta property="og:title" content={post?.title} />
 				<meta property="og:description" content={post?.excerpt} />
 				<meta property="og:image" content={post?.feature_image as string} />
+				<meta name="author" content={post?.primary_author?.name || 'Spacedrive Technology Inc.'} />
 			</Helmet>
-			{post && (
-				<>
-					<figure>
-						<figcaption
-							dangerouslySetInnerHTML={{ __html: post.feature_image_caption as any }}
-						></figcaption>
-						<img src={post?.feature_image as string} alt="" className="rounded-xl" />
-					</figure>
-					<section className="flex flex-wrap gap-4 px-8 -mx-8 rounded-xl">
-						<div className="flex-grow">
-							<h1 className="m-0 text-2xl leading-snug sm:leading-normal sm:text-4xl">
-								{post?.title}
-							</h1>
-							<p className="m-0 mt-2">
-								by <b>{post?.primary_author?.name}</b> &middot;{' '}
-								{new Date(post?.published_at ?? '').toLocaleDateString()}
-							</p>
-						</div>
-						<div className="flex flex-wrap gap-2">
-							{post?.tags?.map((tag: Tag) => {
-								return <BlogTag tag={tag} />;
-							})}
-						</div>
-					</section>
-					<article
-						id="content"
-						className="text-lg"
-						dangerouslySetInnerHTML={{ __html: post.html as string }}
-					></article>
-				</>
-			)}
-		</div>
+			<div className="container max-w-4xl p-4 m-auto mt-8 mb-20 prose lg:prose-xs dark:prose-invert">
+				{post && (
+					<>
+						<figure>
+							<figcaption
+								dangerouslySetInnerHTML={{ __html: post.feature_image_caption as any }}
+							></figcaption>
+							<img src={post?.feature_image as string} alt="" className="rounded-xl" />
+						</figure>
+						<section className="flex flex-wrap gap-4 px-8 -mx-8 rounded-xl">
+							<div className="flex-grow">
+								<h1 className="m-0 text-2xl leading-snug sm:leading-normal sm:text-4xl">
+									{post?.title}
+								</h1>
+								<p className="m-0 mt-2">
+									by <b>{post?.primary_author?.name}</b> &middot;{' '}
+									{new Date(post?.published_at ?? '').toLocaleDateString()}
+								</p>
+							</div>
+							<div className="flex flex-wrap gap-2">
+								{post?.tags?.map((tag: Tag) => {
+									return <BlogTag tag={tag} />;
+								})}
+							</div>
+						</section>
+						<article
+							id="content"
+							className="text-lg"
+							dangerouslySetInnerHTML={{ __html: post.html as string }}
+						></article>
+					</>
+				)}
+			</div>
+		</>
 	);
 }
 
diff --git a/apps/landing/src/pages/index.page.tsx b/apps/landing/src/pages/index.page.tsx
index b95a67f23..433fce17f 100644
--- a/apps/landing/src/pages/index.page.tsx
+++ b/apps/landing/src/pages/index.page.tsx
@@ -1,5 +1,6 @@
 import clsx from 'clsx';
 import React, { Suspense, useEffect, useState } from 'react';
+import { Helmet } from 'react-helmet';
 
 import { ReactComponent as Info } from '@sd/interface/assets/svg/info.svg';
 
@@ -79,6 +80,22 @@ function Page() {
 
 	return (
 		<>
+			<Helmet>
+				<title>Spacedrive — A file manager from the future.</title>
+				<meta
+					name="description"
+					content="Combine your drives and clouds into one database that you can organize and explore from any device. Designed for creators, hoarders and the painfully disorganized."
+				/>
+				<meta
+					property="og:image"
+					content="https://raw.githubusercontent.com/spacedriveapp/.github/main/profile/spacedrive_icon.png"
+				/>
+				<meta
+					name="keywords"
+					content="files,file manager,spacedrive,file explorer,vdfs,distributed filesystem,cas,content addressable storage,virtual filesystem,photos app, video organizer,video encoder,tags,tag based filesystem"
+				/>
+				<meta name="author" content="Spacedrive Technology Inc." />
+			</Helmet>
 			<div className="mt-22 lg:mt-28" id="content" aria-hidden="true" />
 			<div className="mt-24 lg:mt-5" />
 			<NewBanner
diff --git a/apps/landing/src/renderer/_default.page.server.tsx b/apps/landing/src/renderer/_default.page.server.tsx
index 1efda8f00..e9b6ea759 100644
--- a/apps/landing/src/renderer/_default.page.server.tsx
+++ b/apps/landing/src/renderer/_default.page.server.tsx
@@ -1,5 +1,6 @@
 import React from 'react';
 import ReactDOMServer from 'react-dom/server';
+import { Helmet } from 'react-helmet';
 import { dangerouslySkipEscape, escapeInject } from 'vite-plugin-ssr';
 import type { PageContextBuiltIn } from 'vite-plugin-ssr';
 
@@ -18,38 +19,29 @@ async function render(pageContext: PageContextBuiltIn & PageContext) {
 		</App>
 	);
 
+	const helmet = Helmet.renderStatic();
+
 	// See https://vite-plugin-ssr.com/head
 	const { documentProps } = pageContext;
-	const title = (documentProps && documentProps.title) || 'Vite SSR app';
-	const desc = (documentProps && documentProps.description) || 'App using Vite + vite-plugin-ssr';
 
-	const documentHtml = escapeInject`<!DOCTYPE html>
-    <html lang="en" class="dark">
-      <head>
-		<meta charset="UTF-8" />
-		<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
-		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
-		<title>Spacedrive — A file manager from the future.</title>
-		<meta
-			name="description"
-			content="Combine your drives and clouds into one database that you can organize and explore from any device. Designed for creators, hoarders and the painfully disorganized."
-		/>
-		<meta
-			name="og:image"
-			content="https://raw.githubusercontent.com/spacedriveapp/.github/main/profile/spacedrive_icon.png"
-		/>
-		<meta name="theme-color" content="#E751ED" media="not screen" />
-		<meta
-			name="keywords"
-			content="files,file manager,spacedrive,file explorer,vdfs,distributed filesystem,cas,content addressable storage,virtual filesystem,photos app, video organizer,video encoder,tags,tag based filesystem"
-		/>
-		<meta name="author" content="Spacedrive Technology Inc." />
-		<meta name="robots" content="index, follow" />
-      </head>
-      <body>
+	const documentHtml = escapeInject`
+		<!DOCTYPE html>
+    <html lang="en" class="dark" ${dangerouslySkipEscape(helmet.htmlAttributes.toString())}>
+    <head>
+			<meta charset="UTF-8" />
+			<link rel="icon" type="image/svg+xml" href="/favicon.ico" />
+			<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+			<meta name="theme-color" content="#E751ED" media="not screen" />
+			<meta name="robots" content="index, follow" />
+			${dangerouslySkipEscape(helmet.title.toString())}
+			${dangerouslySkipEscape(helmet.meta.toString())}
+			${dangerouslySkipEscape(helmet.link.toString())}
+    </head>
+      <body ${dangerouslySkipEscape(helmet.bodyAttributes.toString())}>
         <div id="page-view">${dangerouslySkipEscape(pageHtml)}</div>
       </body>
-    </html>`;
+    </html>
+		`;
 
 	return {
 		documentHtml,