Release

.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" },

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "src/assets/fonts"]
+	path = src/assets/fonts
+	url = https://github.com/now-u/now-u-fonts.git

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 { 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,24 +93,50 @@ export default async function Page({
   if (blog === undefined) {
     notFound();
   }
+  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">
           <Link className="underline text-orange font-bold" href={"/blog"}>
             {" "}
             {"< "} Back{" "}
           </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>
+          )}
+
+          <div className="">
+            <Image
+              src={blog.headerImage}
+              alt="Blog Header Image"
+              className="object-cover w-full h-64 m-0 rounded-lg mt-4 my-2"
+              width={448}
+              height={252}
+            />
+          </div>
           <div className="mt-4">
-            <h1 className="text-3xl">{blog.title}</h1>
+            <h1 className="text-3xl mb-2">{blog.title}</h1>
             {blog.subtitle !== "" && (
-              <p className="text-gray-500">{blog.subtitle}</p>
+              <p className="text-gray-500 mt-0">{blog.subtitle}</p>
             )}
           </div>
-          <hr className="my-0"/>
+          <hr className="m-0" />
+          {/* Divider */}
           <div
             dangerouslySetInnerHTML={{ __html: md().render(blog.content) }}
           />

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,8 @@ export interface Post {
   headerImage: string;
   readingTime: string;
   publishedDate: string;
+  updateDate: string;
+  archiveDate?: string;
 }
 
 /**
@@ -37,7 +39,9 @@ export async function getPostBySlug(slug: string): Promise<Post | undefined> {
       },
       headerImage: blog.header_image.url,
       readingTime: blog.reading_time.toString(),
-      publishedDate: blog.release_at
+      publishedDate: blog.release_at,
+      updateDate: blog.updated_at,
+      archiveDate: blog.end_at ?? undefined
     }
   } else {
     return undefined

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"}