LogalDeveloper/owncast
0
Fork 0
Code Activity

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

Browse Source
This commit is contained in:
Gabe Kangas
2022-10-20 19:39:10 -07:00
parent 521e12bd5c
commit 2c45b420e5
4 changed files with 40 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/components/ServerRendered/ServerRenderedMetadata.html Normal file
View File

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

34
web/components/ServerRendered/ServerRenderedMetadata.tsx
View File

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

7
web/components/layouts/Main.tsx
View File

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

5
web/next.config.js
View File

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