Software-Mac/spacedrive
Software-Mac/spacedrive
1
0
Fork 0
mirror of https://github.com/spacedriveapp/spacedrive synced 2024-07-04 13:23:28 +00:00
Code Issues Packages Projects Releases Wiki Activity

(fix) landing: react helmet

Browse source
This commit is contained in:
Jamie Pine 2022-06-15 15:06:08 -07:00
parent 021c19a0b2
commit 6f34ca4652
3 changed files with 72 additions and 60 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

69
apps/landing/src/pages/blog/post.page.tsx
View file

@ -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>
</>
);
}

17
apps/landing/src/pages/index.page.tsx
View file

@ -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

46
apps/landing/src/renderer/_default.page.server.tsx
View file

@ -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,