Skip to content
Snippets Groups Projects
Commit f8020a16 authored by xaralis's avatar xaralis
Browse files

feat: add og meta tags for better sharing experience

parent 2dd3c52f
Branches
No related tags found
No related merge requests found
Pipeline #1971 passed
...@@ -14556,6 +14556,17 @@ ...@@ -14556,6 +14556,17 @@
} }
} }
}, },
"react-helmet": {
"version": "6.1.0",
"resolved": "https://registry.npmjs.org/react-helmet/-/react-helmet-6.1.0.tgz",
"integrity": "sha512-4uMzEY9nlDlgxr61NL3XbKRy1hEkXmKNXhjbAIOVw5vcFrsdYbH2FEwcNyWvWinl103nXgzYNlns9ca+8kFiWw==",
"requires": {
"object-assign": "^4.1.1",
"prop-types": "^15.7.2",
"react-fast-compare": "^3.1.1",
"react-side-effect": "^2.1.0"
}
},
"react-intersection-observer": { "react-intersection-observer": {
"version": "8.31.0", "version": "8.31.0",
"resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.31.0.tgz", "resolved": "https://registry.npmjs.org/react-intersection-observer/-/react-intersection-observer-8.31.0.tgz",
...@@ -15017,6 +15028,11 @@ ...@@ -15017,6 +15028,11 @@
} }
} }
}, },
"react-side-effect": {
"version": "2.1.1",
"resolved": "https://registry.npmjs.org/react-side-effect/-/react-side-effect-2.1.1.tgz",
"integrity": "sha512-2FoTQzRNTncBVtnzxFOk2mCpcfxQpenBMbk5kSVBg5UcPqV9fRbgY2zhb7GTWWOlpFmAxhClBDlIq8Rsubz1yQ=="
},
"read-pkg": { "read-pkg": {
"version": "3.0.0", "version": "3.0.0",
"resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz", "resolved": "https://registry.npmjs.org/read-pkg/-/read-pkg-3.0.0.tgz",
......
public/favicon.ico

3.08 KiB

public/img/og.png

122 KiB

...@@ -17,6 +17,11 @@ ...@@ -17,6 +17,11 @@
<meta property="og:url" content="https://cf2021.pirati.cz/" /> <meta property="og:url" content="https://cf2021.pirati.cz/" />
<meta property="og:type" content="website" /> <meta property="og:type" content="website" />
<meta property="og:title" content="CF 2021" /> <meta property="og:title" content="CF 2021" />
<meta property="og:image" content="/img/og.png" />
<meta property="og:description" content="Oficiální stránka letošního ročníku Celostátního fóra České pirátské strany." />
<meta name="description" content="Oficiální stránka letošního ročníku Celostátního fóra České pirátské strany." />
<title>CF 2021 | Pirátská strana</title>
<!-- <!--
manifest.json provides metadata used when your web app is installed on a 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/ user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
...@@ -32,7 +37,6 @@ ...@@ -32,7 +37,6 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<link rel="stylesheet" href="%REACT_APP_STYLEGUIDE_URL%/css/styles.css" /> <link rel="stylesheet" href="%REACT_APP_STYLEGUIDE_URL%/css/styles.css" />
<title>CF 2021 | Pirátská strana</title>
<script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script> <script src="https://polyfill.io/v3/polyfill.min.js?features=IntersectionObserver"></script>
</head> </head>
<body class="h-screen"> <body class="h-screen">
......
public/logo192.png

5.22 KiB

public/logo512.png

9.44 KiB

{ {
"short_name": "React App", "short_name": "CF2021",
"name": "Create React App Sample", "name": "Celostátní fórum 2021",
"icons": [ "icons": [
{ {
"src": "favicon.ico", "src": "https://styleguide.pir-test.eu/latest/images/favicons/favicon-32x32.png",
"sizes": "64x64 32x32 24x24 16x16", "sizes": "32x32 24x24 16x16",
"type": "image/x-icon" "type": "image/x-icon"
}, },
{ {
"src": "logo192.png", "src": "https://styleguide.pir-test.eu/latest/images/favicons/favicon-96x96.png",
"type": "image/png", "sizes": "96x96 64x64",
"sizes": "192x192" "type": "image/x-icon"
}, },
{ {
"src": "logo512.png", "src": "https://styleguide.pir-test.eu/latest/images/favicons/favicon-196x196.png",
"type": "image/png", "type": "image/png",
"sizes": "512x512" "sizes": "192x192 196x196"
} }
], ],
"start_url": ".", "start_url": ".",
......
import React, { Suspense } from "react"; import React, { Suspense } from "react";
import { Helmet } from "react-helmet";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom"; import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import { KeycloakProvider } from "@react-keycloak/web"; import { KeycloakProvider } from "@react-keycloak/web";
import * as Sentry from "@sentry/react"; import * as Sentry from "@sentry/react";
...@@ -6,10 +7,10 @@ import * as Sentry from "@sentry/react"; ...@@ -6,10 +7,10 @@ import * as Sentry from "@sentry/react";
import { loadConfig } from "actions/global-info"; import { loadConfig } from "actions/global-info";
import { loadMe } from "actions/users"; import { loadMe } from "actions/users";
import { initializeWSChannel } from "actions/ws"; import { initializeWSChannel } from "actions/ws";
import Button from "components/Button";
import Footer from "components/Footer"; import Footer from "components/Footer";
import Navbar from "components/Navbar"; import Navbar from "components/Navbar";
import Home from "pages/Home"; import Home from "pages/Home";
import NotFound from "pages/NotFound";
import Program from "pages/Program"; import Program from "pages/Program";
import Protocol from "pages/Protocol"; import Protocol from "pages/Protocol";
import { AuthStore, PostStore } from "stores"; import { AuthStore, PostStore } from "stores";
...@@ -80,27 +81,23 @@ const LoadingComponent = ( ...@@ -80,27 +81,23 @@ const LoadingComponent = (
</div> </div>
); );
const NotFound = () => (
<article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-base lg:head-alt-lg mb-8">
404ka: tak tahle stránka tu není
</h1>
<p className="text-base lg:text-xl mb-8">
Dostal/a ses na takzvanou „<strong>čtyřystačtyřku</strong>“, což znamená,
že stránka, kterou jsi se pokusil/a navštívit, na tomhle webu není.
Zkontroluj, zda máš správný odkaz.
</p>
<Button routerTo="/" className="text-base lg:text-xl" hoverActive fullwidth>
Přejít na hlavní stránku
</Button>
</article>
);
const BaseApp = () => { const BaseApp = () => {
initializeWSChannel.read(); initializeWSChannel.read();
return ( return (
<Router> <Router>
<Helmet>
<title>CF 2021 | Pirátská strana</title>
<meta
name="description"
content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
/>
<meta property="og:title" content="CF 2021" />
<meta
property="og:description"
content="Oficiální stránka letošního ročníku on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
/>
</Helmet>
<Navbar /> <Navbar />
<Switch> <Switch>
<Route exact path="/" children={<Home />} /> <Route exact path="/" children={<Home />} />
......
...@@ -126,6 +126,7 @@ const Navbar = () => { ...@@ -126,6 +126,7 @@ const Navbar = () => {
<button <button
onClick={logout} onClick={logout}
className="text-grey-200 hover:text-white" className="text-grey-200 hover:text-white"
title="Odhlásit se"
> >
<i className="ico--log-out"></i> <i className="ico--log-out"></i>
</button> </button>
......
import React, { useEffect, useState } from "react"; import React, { useEffect, useState } from "react";
import { Helmet } from "react-helmet";
import Joyride, { EVENTS } from "react-joyride"; import Joyride, { EVENTS } from "react-joyride";
import ReactPlayer from "react-player/lazy"; import ReactPlayer from "react-player/lazy";
import useWindowSize from "@rooks/use-window-size"; import useWindowSize from "@rooks/use-window-size";
...@@ -109,6 +110,21 @@ const Home = () => { ...@@ -109,6 +110,21 @@ const Home = () => {
return ( return (
<> <>
<Helmet>
<title>Přímý přenos | CF 2021 | Pirátská strana</title>
<meta
name="description"
content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
/>
<meta
property="og:title"
content="Přímý přenos | CF 2021 | Pirátská strana"
/>
<meta
property="og:description"
content="Přímý přenos a diskuse z on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
/>
</Helmet>
<Joyride <Joyride
beaconComponent={Beacon} beaconComponent={Beacon}
continuous={true} continuous={true}
...@@ -259,8 +275,7 @@ const Home = () => { ...@@ -259,8 +275,7 @@ const Home = () => {
showAddPostCta={programEntry.discussionOpened} showAddPostCta={programEntry.discussionOpened}
/> />
{!programEntry.discussionOpened && {!programEntry.discussionOpened &&
isAuthenticated && (!isAuthenticated || (isAuthenticated && !user.isBanned)) && (
!user.isBanned && (
<p className="leading-normal"> <p className="leading-normal">
Rozprava je uzavřena - příspěvky teď nelze přidávat. Rozprava je uzavřena - příspěvky teď nelze přidávat.
</p> </p>
......
import React from "react";
import { Helmet } from "react-helmet";
import Button from "components/Button";
const NotFound = () => (
<>
<Helmet>
<title>404ka | CF 2021 | Pirátská strana</title>
<meta name="description" content="Tahle stránka tu není." />
<meta property="og:title" content="404ka | CF 2021 | Pirátská strana" />
<meta property="og:description" content="Tahle stránka tu není." />
</Helmet>
<article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-base lg:head-alt-lg mb-8">
404ka: tak tahle stránka tu není
</h1>
<p className="text-base lg:text-xl mb-8">
Dostal/a ses na takzvanou „<strong>čtyřystačtyřku</strong>“, což
znamená, že stránka, kterou jsi se pokusil/a navštívit, na tomhle webu
není. Zkontroluj, zda máš správný odkaz.
</p>
<Button
routerTo="/"
className="text-base lg:text-xl"
hoverActive
fullwidth
>
Přejít na hlavní stránku
</Button>
</article>
</>
);
export default NotFound;
import React from "react"; import React from "react";
import { Helmet } from "react-helmet";
import { Link } from "react-router-dom"; import { Link } from "react-router-dom";
import { format } from "date-fns"; import { format } from "date-fns";
...@@ -25,6 +26,22 @@ const Schedule = () => { ...@@ -25,6 +26,22 @@ const Schedule = () => {
); );
return ( return (
<>
<Helmet>
<title>Program zasedání | CF 2021 | Pirátská strana</title>
<meta
name="description"
content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
/>
<meta
property="og:title"
content="Program zasedání | CF 2021 | Pirátská strana"
/>
<meta
property="og:description"
content="Přečtěte si program on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
/>
</Helmet>
<article className="container container--default py-8 lg:py-24"> <article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-md lg:head-alt-lg mb-8">Program zasedání</h1> <h1 className="head-alt-md lg:head-alt-lg mb-8">Program zasedání</h1>
<div className="flex flex-col"> <div className="flex flex-col">
...@@ -98,6 +115,7 @@ const Schedule = () => { ...@@ -98,6 +115,7 @@ const Schedule = () => {
aktivován. Chcete pokračovat? aktivován. Chcete pokračovat?
</ModalConfirm> </ModalConfirm>
</article> </article>
</>
); );
}; };
......
import React, { useCallback, useState } from "react"; import React, { useCallback, useState } from "react";
import { Helmet } from "react-helmet";
import useInterval from "@rooks/use-interval"; import useInterval from "@rooks/use-interval";
import { loadProtocol } from "actions/global-info"; import { loadProtocol } from "actions/global-info";
...@@ -54,6 +55,22 @@ const Protocol = () => { ...@@ -54,6 +55,22 @@ const Protocol = () => {
}; };
return ( return (
<>
<Helmet>
<title>Zápis ze zasedání | CF 2021 | Pirátská strana</title>
<meta
name="description"
content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
/>
<meta
property="og:title"
content="Zápis ze zasedání | CF 2021 | Pirátská strana"
/>
<meta
property="og:description"
content="Interaktivní zápis z on-line zasedání Celostátního fóra České pirátské strany, 9. 1. 2021."
/>
</Helmet>
<article className="container container--default py-8 lg:py-24"> <article className="container container--default py-8 lg:py-24">
<h1 className="head-alt-md lg:head-alt-lg mb-8">Zápis z jednání</h1> <h1 className="head-alt-md lg:head-alt-lg mb-8">Zápis z jednání</h1>
...@@ -104,6 +121,7 @@ const Protocol = () => { ...@@ -104,6 +121,7 @@ const Protocol = () => {
</div> </div>
</div> </div>
</article> </article>
</>
); );
}; };
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment