From b3920fc967bad91064de9c4f8082dc4463de08ef Mon Sep 17 00:00:00 2001 From: Xe Iaso Date: Fri, 20 Sep 2024 15:47:55 -0400 Subject: [PATCH] set metadata across the site Signed-off-by: Xe Iaso --- app/about/page.tsx | 6 ++++ app/blog.rss/route.ts | 1 + app/blog/[...slug]/page.tsx | 9 +++++ app/blog/page.tsx | 14 ++++++++ app/contact/page.jsx | 40 ++++----------------- app/globals.css | 9 +++-- app/layout.tsx | 22 +++++++++++- app/services/page.jsx | 5 +++ components/contact-form.tsx | 72 +++++++++++++++++++++++++++++++++++++ 9 files changed, 142 insertions(+), 36 deletions(-) create mode 100644 components/contact-form.tsx diff --git a/app/about/page.tsx b/app/about/page.tsx index fd0fa9b..2de8aa3 100644 --- a/app/about/page.tsx +++ b/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, diff --git a/app/blog.rss/route.ts b/app/blog.rss/route.ts index 753acb6..7506436 100644 --- a/app/blog.rss/route.ts +++ b/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", diff --git a/app/blog/[...slug]/page.tsx b/app/blog/[...slug]/page.tsx index 47345cd..8612b0c 100644 --- a/app/blog/[...slug]/page.tsx +++ b/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; } diff --git a/app/blog/page.tsx b/app/blog/page.tsx index 1805805..7b25747 100644 --- a/app/blog/page.tsx +++ b/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() { +
+

All posts

+ + Follow on RSS! + +
+
{allPosts.map((post) => (
diff --git a/app/contact/page.jsx b/app/contact/page.jsx index 1ad980f..001793b 100644 --- a/app/contact/page.jsx +++ b/app/contact/page.jsx @@ -1,16 +1,11 @@ -"use client"; +import ContactForm from "@/components/contact-form"; -import React, { useState } from 'react'; -import contactForm from '@/actions/contact'; +export const metadata = { + 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 ( <>
@@ -30,29 +25,8 @@ const ContactPage = () => {

Contact Form

-
-
- - -
-
- - -
-
- - -
- - {message !== null && ( - <> -
-

Thanks!

-

{message}

-
- - )} -
+ +
diff --git a/app/globals.css b/app/globals.css index 152ba88..78cdd7a 100644 --- a/app/globals.css +++ b/app/globals.css @@ -5,8 +5,13 @@ html { font-family: var(--font-inter); } - -h1 { + +h1, +h2, +h3, +h4, +h5, +h6 { font-family: var(--font-podkova); } diff --git a/app/layout.tsx b/app/layout.tsx index cea8412..a72b691 100644 --- a/app/layout.tsx +++ b/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 ( + + + diff --git a/app/services/page.jsx b/app/services/page.jsx index f6d1d29..71da61a 100644 --- a/app/services/page.jsx +++ b/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 }) => (
diff --git a/components/contact-form.tsx b/components/contact-form.tsx new file mode 100644 index 0000000..be4e5c9 --- /dev/null +++ b/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(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 ( + <> +
+
+ + +
+
+ + +
+
+ + +
+ + {message !== null && ( + <> +
+

Thanks!

+

{message}

+
+ + )} +
+ + ); +}