pimhwang
/
owncast
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

Refactor server-rendered tags. Closes #2246

pull/2241/head
Gabe Kangas 3 years ago
parent
0ae4b542b4
commit
8aed27e44d
No known key found for this signature in database
GPG Key ID: 9A56337728BC81EA
3 changed files with 49 additions and 53 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 18
      web/components/ServerRendered/ServerRenderedHydration.tsx
  2. 30
      web/components/ServerRendered/ServerRenderedMetadata.html
  3. 54
      web/components/layouts/Main.tsx

18
web/components/ServerRendered/ServerRenderedHydration.tsx
Unescape View File

@ -1,10 +1,14 @@ @@ -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}};
`,
}}
/>
);

30
web/components/ServerRendered/ServerRenderedMetadata.html
Unescape View File

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

54
web/components/layouts/Main.tsx
Unescape View File

@ -17,11 +17,9 @@ import { ClientConfig } from '../../interfaces/client-config.model'; @@ -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 = () => { @@ -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 = () => { @@ -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' }}>

Write Preview
Loading…
Cancel
Save