set metadata across the site

Signed-off-by: Xe Iaso <me@xeiaso.net>

app/about/page.tsx

@@ -4,6 +4,12 @@ import { Button } from "@/components/ui/Button";
 import { allAuthors } from "@/.content-collections/generated";
 import Image from "next/image";
 import Link from "next/link";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "About Us",
+  description: "Learn more about the team behind Techaro!",
+};
 
 const TeamMember = ({
   name,

app/blog.rss/route.ts

@@ -21,6 +21,7 @@ const createFeed = () => {
     language: "en",
     favicon: `${baseUrl}/favicon.ico`,
     copyright: `All rights reserved ${new Date().getFullYear()}, Techaro Computing Canada`,
+    generator: "Techaro.lol www",
     author: {
       name: "Techaro Staff",
       email: "staff@techaro.lol",

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

@@ -76,5 +76,14 @@ export function generateMetadata({ params }: { params: PageParams }) {
   return {
     title: page.title,
     description: page.summary,
+    authors: [
+      {
+        name: page.author?.displayName,
+      },
+    ],
+    openGraph: {
+      //@ts-ignore
+      images: page.image !== null ? [page.imageURL] : [],
+    },
   } satisfies Metadata;
 }

app/blog/page.tsx

@@ -1,5 +1,12 @@
 import { allPosts } from "content-collections";
 import Image from "next/image";
+import { IconRss } from "@tabler/icons-react";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "Techaro Blog",
+  description: "What have we been up to?",
+};
 
 export default function Posts() {
   return (
@@ -11,6 +18,13 @@ export default function Posts() {
           </div>
         </header>
 
+        <div className="max-w-7xl sm:px-6 lg:px-8 mx-auto mt-4">
+          <h2 className="text-3xl font-medium">All posts</h2>
+          <a href="/blog.rss">
+            <IconRss size={16} className="inline-block" /> Follow on RSS!
+          </a>
+        </div>
+
         <div className="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8 grid grid-cols-1 4xl:grid-cols-3">
           {allPosts.map((post) => (
             <div key={post._meta.path}>

app/contact/page.jsx

@@ -1,16 +1,11 @@
-"use client";
+import ContactForm from "@/components/contact-form";
 
-import React, { useState } from 'react';
+export const metadata = {
-import contactForm from '@/actions/contact';
+    title: "Contact Us",
+    description: "Need our help? Get in touch!",
+};
 
 const ContactPage = () => {
-    const [message, setMessage] = useState(null);
-
-    const callback = async (formData) => {
-        await contactForm(formData);
-        setMessage("Our intrepid team of code monkeys will be looking at this as soon as possible!");
-    }
-
     return (
         <>
             <header className="bg-white shadow">
@@ -30,29 +25,8 @@ const ContactPage = () => {
 
                     <div className="pb-4">
                         <h2 className="text-xl font-semibold mb-4">Contact Form</h2>
-                        <form className="space-y-4" action={callback}>
+                        <noscript className="my-2">Enable JavaScript to use the contact form. It's 2024. Give up.</noscript>
-                            <div>
+                        <ContactForm />
-                                <label htmlFor="name" className="block mb-1">Name</label>
-                                <input type="text" id="name" name="name" className="w-full px-3 py-2 border rounded" required />
-                            </div>
-                            <div>
-                                <label htmlFor="email" className="block mb-1">Email</label>
-                                <input type="email" id="email" name="email" className="w-full px-3 py-2 border rounded" required />
-                            </div>
-                            <div>
-                                <label htmlFor="message" className="block mb-1">Message</label>
-                                <textarea id="message" name="message" rows="4" className="w-full px-3 py-2 border rounded" required></textarea>
-                            </div>
-                            <button type="submit" className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">Send Message</button>
-                            {message !== null && (
-                                <>
-                                    <div className="p-4 bg-gray-200">
-                                        <p className="text-xl">Thanks!</p>
-                                        <p className="p-4">{message}</p>
-                                    </div>
-                                </>
-                            )}
-                        </form>
                     </div>
                 </div>
             </div>

app/globals.css

@@ -6,7 +6,12 @@ html {
   font-family: var(--font-inter);
 }
 
-h1 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
   font-family: var(--font-podkova);
 }
 

app/layout.tsx

@@ -4,6 +4,7 @@ import "./globals.css";
 import React from "react";
 import Link from "next/link";
 import { Button } from "@/components/ui/Button";
+import Head from "next/head";
 
 const inter = Inter({
   subsets: ["latin"],
@@ -18,8 +19,19 @@ const podkova = Podkova({
 });
 
 export const metadata: Metadata = {
-  title: "Techaro Computing Canada",
+  title: {
+    default: "Techaro Computing Canada",
+    template: "%s | Techaro",
+  },
+  openGraph: {
+    locale: "en-US",
+  },
   description: "Your one-stop shop for all your computing needs.",
+  alternates: {
+    types: {
+      "application/rss+xml": "/blog.rss",
+    },
+  },
 };
 
 export default function RootLayout({
@@ -29,6 +41,14 @@ export default function RootLayout({
 }>) {
   return (
     <html lang="en">
+      <Head>
+        <link
+          rel="alternate"
+          type="application/rss+xml"
+          title="RSS"
+          href="/blog.rss"
+        />
+      </Head>
       <body
         className={`${inter.variable} ${podkova.variable} ${inter.className}`}
       >

app/services/page.jsx

@@ -3,6 +3,11 @@ import Link from 'next/link';
 import { Cpu, Database, Cloud, Shield, Users, TrendingUp } from 'lucide-react';
 import { Button } from '@/components/ui/Button';
 
+export const metadata = {
+    title: "Services",
+    description: "Sample everything that Techaro has to offer"
+};
+
 const ServiceCard = ({ icon: Icon, title, description }) => (
     <div className="bg-white overflow-hidden shadow rounded-lg">
         <div className="px-4 py-5 sm:p-6">

components/contact-form.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import React, { useState } from "react";
+import contactForm from "@/actions/contact";
+
+export default function ContactForm() {
+  const [message, setMessage] = useState<string | null>(null);
+
+  const callback = async (formData: FormData) => {
+    await contactForm(formData);
+    setMessage(
+      "Our intrepid team of code monkeys will be looking at this as soon as possible!"
+    );
+  };
+
+  return (
+    <>
+      <form className="space-y-4" action={callback}>
+        <div>
+          <label htmlFor="name" className="block mb-1">
+            Name
+          </label>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            className="w-full px-3 py-2 border rounded"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="email" className="block mb-1">
+            Email
+          </label>
+          <input
+            type="email"
+            id="email"
+            name="email"
+            className="w-full px-3 py-2 border rounded"
+            required
+          />
+        </div>
+        <div>
+          <label htmlFor="message" className="block mb-1">
+            Message
+          </label>
+          <textarea
+            id="message"
+            name="message"
+            rows={4}
+            className="w-full px-3 py-2 border rounded"
+            required
+          ></textarea>
+        </div>
+        <button
+          type="submit"
+          className="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+        >
+          Send Message
+        </button>
+        {message !== null && (
+          <>
+            <div className="p-4 bg-gray-200">
+              <p className="text-xl">Thanks!</p>
+              <p className="p-4">{message}</p>
+            </div>
+          </>
+        )}
+      </form>
+    </>
+  );
+}