Merge pull request #85 from now-u/feature/open-graph

Expose metadata via `Metadata` variable

.eslintrc.cjs

@@ -32,6 +32,7 @@ module.exports = {
       },
     ],
     "@typescript-eslint/naming-convention": 1,
+    "@typescript-eslint/strict-boolean-expressions": "warn"
   },
   settings: {
     react: { version: "18.2.0" },

src/app/about/page.tsx

@@ -11,6 +11,19 @@ import LoudspeakerIcon from "@/assets/graphics/loudspeaker_icon.webp";
 import LightbulbIcon from "@/assets/graphics/lightbulb_icon.webp";
 
 import Image from "next/image";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "now-u | About Us",
+  openGraph: {
+    images: [
+      {
+        url: Elgars.src,
+        alt: "Picture of the founders – siblings James and Lizzie Elgar",
+      },
+    ],
+  }
+}
 
 const icons = [
   {
@@ -36,7 +49,6 @@ const icons = [
 const About = (): JSX.Element => {
   return (
     <>
-      <title>now-u | About Us</title>
       <div className="flex flex-col text-center">
         <Header
           title="About now&#8288;-&#8288;u"

src/app/blog/[slug]/page.tsx

@@ -5,10 +5,53 @@ import Image from "next/image";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faCircleExclamation, faUserCircle } from "@fortawesome/free-solid-svg-icons";
+import {
+  faCircleExclamation,
+  faUserCircle,
+} from "@fortawesome/free-solid-svg-icons";
+import type { Metadata, ResolvingMetadata } from "next";
 
 // NOTE: https://blog.openreplay.com/creating-a-markdown-blog-powered-by-next-js-in-under-an-hour
 
+interface MetadataProps {
+  params: Promise<{ slug: string }>;
+}
+
+export async function generateMetadata(
+  { params }: MetadataProps,
+  parent: ResolvingMetadata,
+): Promise<Metadata> {
+  const slug = (await params).slug;
+  const blog = await getPostBySlug(slug);
+
+  if (blog !== undefined) {
+    const author = blog.author?.full_name;
+    const headerImage = blog.headerImage;
+
+    return {
+      title: `${blog.title} - now-u Blog`,
+      description: blog.subtitle,
+      authors: author !== undefined ? [{ name: author }] : [],
+      openGraph: {
+        type: "article",
+        images: [
+          {
+            url: headerImage,
+          },
+        ],
+        locale: "en_GB",
+        publishedTime: blog.publishedDate,
+        modifiedTime: blog.updateDate,
+        expirationTime: blog.archiveDate,
+      },
+    };
+  } else {
+    return {
+      title: "Unknown Blog Post",
+    };
+  }
+}
+
 function AuthorTile(props: {
   name: string;
   description: string;
@@ -50,12 +93,11 @@ export default async function Page({
   if (blog === undefined) {
     notFound();
   }
-  const archiveDate: number = Date.parse(blog.archiveDate ?? "")
+  const archiveDate: number = Date.parse(blog.archiveDate ?? "");
   const blogIsArchived = isNaN(archiveDate) ? false : Date.now() > archiveDate;
 
   return (
     <>
-      <title>{`now-u | ${blog.title}`}</title>
 
       <div className="w-full flex flex-col items-center">
         <div className="w-full flex flex-col py-10 px-4 prose prose-gray">
@@ -65,13 +107,19 @@ export default async function Page({
           </Link>
 
           {/* Archived Warning Banner */}
-          { blogIsArchived &&
-          <div className="flex flex-row items-baseline gap-3 py-2 px-4 rounded-xl bg-carolina-blue text-white mt-4">
-            <FontAwesomeIcon icon={faCircleExclamation} className="translate-y-[3px]" />
-            <p className="m-0 font-bold">The article you are looking at is archived and possibly outdated!</p>
-          </div>
-          }
-
+          {blogIsArchived && (
+            <div className="flex flex-row items-baseline gap-3 py-2 px-4 rounded-xl bg-carolina-blue text-white mt-4">
+              <FontAwesomeIcon
+                icon={faCircleExclamation}
+                className="translate-y-[3px]"
+              />
+              <p className="m-0 font-bold">
+                The article you are looking at is archived and possibly
+                outdated!
+              </p>
+            </div>
+          )}
+
           <div className="">
             <Image
               src={blog.headerImage}

src/app/blog/page.tsx

@@ -4,6 +4,11 @@ import { Header } from "@/components/Header";
 import { BlogTile, type BlogTileProps } from "@/components/BlogTile";
 import { Newsletter } from "@/components/Newsletter";
 import { getBlogPosts } from "@/services/api";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Blog | now-u"
+}
 
 async function Blog(): Promise<JSX.Element> {
   const remotePosts = await getBlogPosts();
@@ -23,8 +28,6 @@ async function Blog(): Promise<JSX.Element> {
 
   return (
     <>
-      <title>now-u | Blog</title>
-
       <Header
         title="Blog"
         body="Find all the latest blog articles from now-u below"

src/app/blog/utils.ts

@@ -13,6 +13,7 @@ export interface Post {
   headerImage: string;
   readingTime: string;
   publishedDate: string;
+  updateDate: string;
   archiveDate?: string;
 }
 
@@ -39,6 +40,7 @@ export async function getPostBySlug(slug: string): Promise<Post | undefined> {
       headerImage: blog.header_image.url,
       readingTime: blog.reading_time.toString(),
       publishedDate: blog.release_at,
+      updateDate: blog.updated_at,
       archiveDate: blog.end_at ?? undefined
     }
   } else {

src/app/causes/page.tsx

@@ -4,6 +4,11 @@ import { Header } from "@/components/Header";
 import { Newsletter } from "@/components/Newsletter";
 import Image from "next/image";
 import { type Cause, getCauses } from "@/services/api";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Causes | now-u"
+}
 
 const CauseTile = (props: { cause: Cause }): JSX.Element => {
   const { header_image: headerImage, title } = props.cause;
@@ -34,8 +39,6 @@ export default async function CausesPage(): Promise<JSX.Element> {
 
   return (
     <>
-      <title>now-u | Causes</title>
-
       <div className="flex flex-col text-center">
         <Header
           title="Our Causes"

src/app/charity-partnership/page.tsx

@@ -7,13 +7,17 @@ import WhoShouldPartnerWithUsImage from "../../assets/partnership-page/who-shoul
 import PartnerIcon from "../../assets/partnership-page/icon-partner.svg";
 import CollaboratorIcon from "../../assets/partnership-page/icon-collaborator.svg";
 import AssociateIcon from "../../assets/partnership-page/icon-associate.svg";
-
 import { LinkButton } from "@/components/Button";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Charity Partnership | now-u"
+}
+
 
 export default function PartnershipPage(): React.ReactElement {
   return (
     <>
-      <title>now-u | Charity Partnership</title>
       <Header
         title="Charity Partnership"
         subtitle="Partner with now-u: Empower Change Together"

src/app/collaborations/page.tsx

@@ -2,15 +2,18 @@ import { Header } from "@/components/Header";
 import React from "react";
 import { PartnerCard } from "@/app/collaborations/PartnerCard";
 import { getOrganisations } from "@/services/api";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Collaborations | now-u"
+}
 
 const PartnersPage = async (): Promise<JSX.Element> => {
 
   const partners = await getOrganisations();
 
   return (
     <>
-      <title>now-u | Collaborations</title>
-
       <div className="text-center">
         <Header title="Collaborations" />
       </div>

src/app/faq/page.tsx

@@ -3,15 +3,18 @@ import Link from "next/link";
 import { Header } from "@/components/Header";
 import { getFaqs } from "@/services/api";
 import { FAQBlock } from "@/app/faq/FAQBlock";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "FAQs | now-u"
+}
 
 
 async function FAQPage(): Promise<JSX.Element> {
   const faqs = await getFaqs();
 
   return (
     <>
-      <title>now-u | FAQs</title>
-
       <Header title="FAQs" />
       <FAQBlock faqs={faqs} />
       <p className="text-center mb-10 text-3xl w-4/5 self-center">

src/app/get-in-touch/page.tsx

@@ -9,6 +9,11 @@ import {
 
 import { Header } from "@/components/Header";
 import { ContactTile } from "./ContactTile";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Get In Touch | now-u"
+}
 
 const contacts = [
   {
@@ -36,8 +41,6 @@ const contacts = [
 const GetInTouch = (): JSX.Element => {
   return (
     <>
-      <title>now-u | Get In Touch</title>
-
       <div className="text-center">
         <Header title="Get in Touch" />
       </div>

src/app/info/cookie-policy/page.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import fs from "fs";
 import md from "markdown-it";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Cookie Policy | now-u"
+}
 
 export default async function Page(): Promise<JSX.Element> {
   const cookiePolicyFile = fs.readFileSync(
@@ -10,8 +15,6 @@ export default async function Page(): Promise<JSX.Element> {
 
   return (
     <>
-      <title>{`now-u | Cookie Policy`}</title>
-
       <div className="max-w-prose prose mx-auto my-20 px-4">
         <h1>Cookie Policy</h1>
         <div

src/app/info/privacy-notice/page.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import fs from "fs";
 import md from "markdown-it";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Privacy Notice | now-u"
+}
 
 export default async function Page(): Promise<JSX.Element> {
   const privacyNoticeFile = fs.readFileSync(
@@ -10,8 +15,6 @@ export default async function Page(): Promise<JSX.Element> {
 
   return (
     <>
-      <title>{`now-u | Privacy Notice`}</title>
-
       <div className="max-w-prose prose mx-auto my-20 px-4">
         <h1>Privacy Notice</h1>
         <div

src/app/info/terms-and-conditions-for-users/page.tsx

@@ -1,6 +1,11 @@
 import React from "react";
 import fs from "fs";
 import md from "markdown-it";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Terms and Conditions for Users | now-u"
+}
 
 export default async function Page(): Promise<JSX.Element> {
   const termsFile = fs.readFileSync(
@@ -10,8 +15,6 @@ export default async function Page(): Promise<JSX.Element> {
 
   return (
     <>
-      <title>{`now-u | Terms and Conditions for Users`}</title>
-
       <div className="max-w-prose prose mx-auto my-20 px-4">
         <div
           id={"terms-and-conditions-for-users"}

src/app/layout.tsx

@@ -7,6 +7,8 @@ import { Footer } from "@/components/Footer";
 import { getRequiredEnvironmentVariable } from "@/utils/getRequiredEnvironmentVariable";
 import { Toaster } from "@/components/ui/toaster";
 import { ScrollHack } from "@/components/ScrollHack";
+import OGImage from "assets/graphics/og-image.png"
+import type { Metadata } from "next";
 
 const Analytics = lazy(async () => await import("@/components/Analytics"));
 
@@ -40,6 +42,21 @@ const ppPangram = localFont({
   variable: '--font-pppangram'
 })
 
+export const metadata: Metadata = {
+  metadataBase: new URL('https://www.now-u.com'),
+  title: "now-u",
+  description: "Learn more about this non-profit with a mission to inform, involve and inspire people to help tackle some of the world's most pressing social and environmental issues.",
+  openGraph: {
+    siteName: "now-u",
+    images: [
+      {
+        url: OGImage.src,
+      }
+    ],
+    type: "website"
+  }
+}
+
 interface RootLayoutProps {
   children: React.ReactNode;
 }

src/app/page.tsx

@@ -13,6 +13,12 @@ import GlobeIcon from "@/assets/graphics/globe_icon.webp";
 import Image from "next/image";
 import { AppStoreBadge, PlayStoreBadge } from "@/components/AppStoreBadge";
 import { Newsletter } from "@/components/Newsletter";
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Drive Changes | now-u"
+}
+
 
 const icons = [
   {
@@ -38,8 +44,6 @@ const icons = [
 function Home(): JSX.Element {
   return (
     <>
-      <title>now-u | Home</title>
-
       <div className="grid place-items-center">
         <div className="bg-gradient-to-b from-gradlight w-full to-graddark flex justify-around">
           <div className="max-w-screen-xl flex flex-col md:flex-row w-full place-items-center py-20 px-5">