wagtail · thibaudcolas · Dec 5, 2024 · Jun 13, 2022 · Jun 13, 2022 · Sep 16, 2022
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -6,44 +6,107 @@ import FooterSlackCTA from './FooterSlackCTA';
 import SubFooter from './SubFooter';
 import ThemeChanger from './ThemeChanger';
 
-const Layout = ({ title, children, lastPublishedAt }: LayoutProps) => (
-    <>
-        <Head>
-            <title>{title}</title>
-            <link rel="icon" href="/favicon.ico" />
-            <link
-                rel="preload"
-                href="/fonts/inter/inter-regular.woff2"
-                as="font"
-                crossOrigin=""
-            />
-            <link
-                rel="preload"
-                href="/fonts/inter/inter-bold.woff2"
-                as="font"
-                crossOrigin=""
-            />
-            <link
-                rel="preload"
-                href="/fonts/inter/inter-black.woff2"
-                as="font"
-                crossOrigin=""
-            />
-        </Head>
-        <div className={styles.container}>
-            <header className={styles.header}>
-                <HeadingSlackCTA />
-                <ThemeChanger />
-            </header>
-            <main className={styles.main}>
-                <div className={styles.content}>{children}</div>
-            </main>
-            <footer className={styles.footer}>
-                <FooterSlackCTA />
-                <SubFooter lastPublishedAt={lastPublishedAt} />
-            </footer>
-        </div>
-    </>
-);
+const Layout = ({ title, meta, lastPublishedAt, children }: LayoutProps) => {
+    const metaTitle = meta.seoTitle ? meta.seoTitle : title;
+    const metaDescription = meta.socialText
+        ? meta.socialText
+        : meta.searchDescription;
+    const metaURL = `https://areweheadlessyet.wagtail.org/${
+        meta.slug !== 'are-we-headless-yet' ? meta.slug : ''
+    }`;
+
+    return (
+        <>
+            <Head>
+                <title>{title}</title>
+                <meta name="description" content={meta.searchDescription} />
+                <meta
+                    name="viewport"
+                    content="width=device-width, initial-scale=1"
+                />
+
+                <meta property="og:type" content="website" />
+                <meta property="og:url" content={metaURL} />
+                <meta property="og:title" content={metaTitle} />
+                <meta property="og:description" content={metaDescription} />
+                <meta property="og:image" content={meta.socialImageUrl} />
+                <meta
+                    property="og:site_name"
+                    content="Are We Headless Yet - Wagtail CMS"
+                />
+                <meta property="twitter:card" content="summary_large_image" />
+                <meta property="twitter:url" content={metaURL} />
+                <meta property="twitter:title" content={metaTitle} />
+                <meta
+                    property="twitter:description"
+                    content={metaDescription}
+                />
+                <meta property="twitter:image" content={meta.socialImageUrl} />
+
+                <link
+                    rel="apple-touch-icon"
+                    sizes="180x180"
+                    href="/favicons/apple-touch-icon.png"
+                />
+                <link
+                    rel="icon"
+                    type="image/png"
+                    sizes="32x32"
+                    href="/favicons/favicon-32x32.png"
+                />
+                <link
+                    rel="icon"
+                    type="image/png"
+                    sizes="16x16"
+                    href="/favicons/favicon-16x16.png"
+                />
+                <link rel="manifest" href="/favicons/site.webmanifest" />
+                <link
+                    rel="mask-icon"
+                    href="/favicons/safari-pinned-tab.svg"
+                    color="#5bbad5"
+                />
+                <link rel="shortcut icon" href="/favicons/favicon.ico" />
+                <meta name="msapplication-TileColor" content="#2b5797" />
+                <meta
+                    name="msapplication-config"
+                    content="/favicons/browserconfig.xml"
+                />
+                <meta name="theme-color" content="#ffffff" />
+                <link
+                    rel="preload"
+                    href="/fonts/inter/inter-regular.woff2"
+                    as="font"
+                    crossOrigin=""
+                />
+                <link
+                    rel="preload"
+                    href="/fonts/inter/inter-bold.woff2"
+                    as="font"
+                    crossOrigin=""
+                />
+                <link
+                    rel="preload"
+                    href="/fonts/inter/inter-black.woff2"
+                    as="font"
+                    crossOrigin=""
+                />
+            </Head>
+            <div className={styles.container}>
+                <header className={styles.header}>
+                    <HeadingSlackCTA />
+                    <ThemeChanger />
+                </header>
+                <main className={styles.main}>
+                    <div className={styles.content}>{children}</div>
+                </main>
+                <footer className={styles.footer}>
+                    <FooterSlackCTA />
+                    <SubFooter lastPublishedAt={lastPublishedAt} />
+                </footer>
+            </div>
+        </>
+    );
+};
 
 export default Layout;
diff --git a/components/Layout/types.ts b/components/Layout/types.ts
@@ -1,6 +1,9 @@
+import { AreWeHeadlessYetPageMeta } from '../types';
+
 type LayoutProps = {
     title: string;
     lastPublishedAt: string;
+    meta: AreWeHeadlessYetPageMeta;
     children?: React.ReactNode;
 };
 

diff --git a/components/types.ts b/components/types.ts
@@ -7,9 +7,17 @@ export default interface StreamFieldBlock {
     id: string;
 }
 
+export interface AreWeHeadlessYetPageMeta {
+    slug: string;
+    searchDescription: string;
+    seoTitle?: string;
+    socialImageUrl?: string;
+    socialText?: string;
+}
+
 export interface AreWeHeadlessYetHomePage {
     id: number;
-    meta: { [key: string]: string | boolean | null };
+    meta: AreWeHeadlessYetPageMeta;
     title: string;
     lastPublishedAt: string;
     straplineIcon: IconChoice;
@@ -19,7 +27,7 @@ export interface AreWeHeadlessYetHomePage {
 
 export interface AreWeHeadlessYetTopicPage {
     id: number;
-    meta: { [key: string]: string | boolean | null };
+    meta: AreWeHeadlessYetPageMeta;
     title: string;
     lastPublishedAt: string;
     statusColor: StatusColorChoice;

diff --git a/pages/[slug].tsx b/pages/[slug].tsx
@@ -12,7 +12,11 @@ import TopicPageHero from '../components/TopicPageHero/TopicPageHero';
 import StreamField from '../components/StreamField';
 
 const TopicPage: NextPage<{ page: AreWeHeadlessYetTopicPage }> = ({ page }) => (
-    <Layout title={page.title} lastPublishedAt={page.lastPublishedAt}>
+    <Layout
+        title={page.title}
+        meta={page.meta}
+        lastPublishedAt={page.lastPublishedAt}
+    >
         <TopicPageHero {...page} />
         <StreamField body={page.body} className="container--topic-page" />
     </Layout>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -14,6 +14,7 @@ const Home: NextPage<{ page: AreWeHeadlessYetHomePage; topics: Topics }> = ({
 }) => (
     <Layout
         title="Are we headless yet? Yes! | Wagtail"
+        meta={page.meta}
         lastPublishedAt={page.lastPublishedAt}
     >
         <HomeHero icon={page.straplineIcon} text={page.straplineText} />

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/favicons/android-chrome-192x192.png b/public/favicons/android-chrome-192x192.png
diff --git a/public/favicons/apple-touch-icon.png b/public/favicons/apple-touch-icon.png
diff --git a/public/favicons/browserconfig.xml b/public/favicons/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/icons/mstile-150x150.png"/>
+            <TileColor>#2b5797</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/public/favicons/favicon-16x16.png b/public/favicons/favicon-16x16.png
diff --git a/public/favicons/favicon-32x32.png b/public/favicons/favicon-32x32.png
diff --git a/public/favicons/favicon.ico b/public/favicons/favicon.ico
diff --git a/public/favicons/mstile-150x150.png b/public/favicons/mstile-150x150.png
diff --git a/public/favicons/safari-pinned-tab.svg b/public/favicons/safari-pinned-tab.svg
diff --git a/public/favicons/site.webmanifest b/public/favicons/site.webmanifest
@@ -0,0 +1,14 @@
+{
+    "name": "AreWeHeadlessYet",
+    "short_name": "AreWeHeadlessYet",
+    "icons": [
+        {
+            "src": "/icons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}