set metadata across the site

Signed-off-by: Xe Iaso <me@xeiaso.net>
This commit is contained in:
Xe Iaso 2024-09-20 15:47:55 -04:00
parent 48f9009f99
commit b3920fc967
Signed by: xe
SSH Key Fingerprint: SHA256:7EWsWanxCI427bJ0t3CA6LyqXnkPajReCxkUhbpJULU
9 changed files with 142 additions and 36 deletions

View File

@ -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,

View File

@ -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",

View File

@ -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;
}

View File

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

View File

@ -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 (
<>
<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}>
<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>
<noscript className="my-2">Enable JavaScript to use the contact form. It's 2024. Give up.</noscript>
<ContactForm />
</div>
</div>
</div>

View File

@ -5,8 +5,13 @@
html {
font-family: var(--font-inter);
}
h1 {
h1,
h2,
h3,
h4,
h5,
h6 {
font-family: var(--font-podkova);
}

View File

@ -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}`}
>

View File

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

View File

@ -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>
</>
);
}