meta stuff for discord embeds

This commit is contained in:
Erik 2022-03-22 15:03:50 +02:00
parent d23e4ccef4
commit b1d0a82d25
No known key found for this signature in database
GPG Key ID: FEFF4B220DDF5589
5 changed files with 40 additions and 7 deletions

View File

@ -13,6 +13,7 @@
"@testing-library/user-event": "^13.5.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-helmet": "^6.1.0",
"react-router-dom": "^6.2.2",
"react-scripts": "5.0.0",
"web-vitals": "^2.1.4"

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 KiB

After

Width:  |  Height:  |  Size: 114 KiB

View File

@ -4,12 +4,12 @@
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta name="theme-color" content="#ffafff" />
<meta
name="description"
content="Web site created using create-react-app"
content="Navy's homepage 😎"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<!-- <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" /> -->
<!--
manifest.json provides metadata used when your web app is installed on a
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
@ -24,7 +24,7 @@
work correctly both with client-side routing and a non-root public URL.
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>React App</title>
<title>Corgi Corner</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>

View File

@ -1,7 +1,10 @@
import React, { useEffect, useRef, useState } from 'react';
import { useLocation, useNavigate } from 'react-router-dom';
import { Helmet } from 'react-helmet';
import '../css/Media.css';
const thumbnailBase = '/api/thumbnails/';
const ClipEntry = ({ name, filename, uploader, thumbnail, duration, clickHandler }) => {
const _uploader = `${ uploader.tag } (${ uploader.id })`;
@ -22,7 +25,7 @@ const ClipEntry = ({ name, filename, uploader, thumbnail, duration, clickHandler
<p> <strong>Length</strong>: {duration}</p>
</div>
</div>
<img className='thumbnail shadow' alt='Thumbnail' src={`/api/thumbnails/${thumbnail}`}/>
<img className='thumbnail shadow' alt='Thumbnail' src={`${thumbnailBase}${thumbnail}`}/>
</div>
);
@ -30,11 +33,20 @@ const ClipEntry = ({ name, filename, uploader, thumbnail, duration, clickHandler
const VideoPlayer = ({ refF, video }) => {
const { filename, name } = video;
const { filename, name, thumbnail } = video;
const source = `/api/clips/${filename}`;
return (
<div ref={refF} className='video-popup shadow'>
<Helmet>
<meta property='og:url' content={window.location.href} />
<meta property='og:image' content={`${thumbnailBase}${thumbnail}`} />
<meta property='og:video:type' content='text/html' />
<meta property='og:video:url' content={source} />
<meta property='og:type' content='video.other' />
</Helmet>
<div>
<h1 className='no-margin no-padding'>
{name}

View File

@ -6909,7 +6909,7 @@ prompts@^2.0.1, prompts@^2.4.2:
kleur "^3.0.3"
sisteransi "^1.0.5"
prop-types@^15.8.1:
prop-types@^15.7.2, prop-types@^15.8.1:
version "15.8.1"
resolved "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz"
integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@ -7041,6 +7041,21 @@ react-error-overlay@^6.0.10:
resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.10.tgz"
integrity sha512-mKR90fX7Pm5seCOfz8q9F+66VCc1PGsWSBxKbITjfKVQHMNF2zudxHnMdJiB1fRCb+XsbQV9sO9DCkgsMQgBIA==
react-fast-compare@^3.1.1:
version "3.2.0"
resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-3.2.0.tgz#641a9da81b6a6320f270e89724fb45a0b39e43bb"
integrity sha512-rtGImPZ0YyLrscKI9xTpV8psd6I8VAtjKCzQDlzyDvqJA8XOW78TXYQwNRNd8g8JZnDu8q9Fu/1v4HPAVwVdHA==
react-helmet@^6.1.0:
version "6.1.0"
resolved "https://registry.yarnpkg.com/react-helmet/-/react-helmet-6.1.0.tgz#a750d5165cb13cf213e44747502652e794468726"
integrity sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==
dependencies:
object-assign "^4.1.1"
prop-types "^15.7.2"
react-fast-compare "^3.1.1"
react-side-effect "^2.1.0"
react-is@^16.13.1:
version "16.13.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
@ -7126,6 +7141,11 @@ react-scripts@5.0.0:
optionalDependencies:
fsevents "^2.3.2"
react-side-effect@^2.1.0:
version "2.1.1"
resolved "https://registry.yarnpkg.com/react-side-effect/-/react-side-effect-2.1.1.tgz#66c5701c3e7560ab4822a4ee2742dee215d72eb3"
integrity sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ==
react@^17.0.2:
version "17.0.2"
resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"