generated from nhcarrigan/template
feat: set up announcements page
This commit is contained in:
Binary file not shown.
|
Before Width: | Height: | Size: 25 KiB |
@ -2,20 +2,33 @@
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
:root {
|
||||
--background: #ffffff;
|
||||
--foreground: #171717;
|
||||
* {
|
||||
font-family: "OpenDyslexic", monospace;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
--background: #0a0a0a;
|
||||
--foreground: #ededed;
|
||||
}
|
||||
h1 {
|
||||
@apply text-4xl;
|
||||
}
|
||||
|
||||
body {
|
||||
color: var(--foreground);
|
||||
background: var(--background);
|
||||
font-family: Arial, Helvetica, sans-serif;
|
||||
h2 {
|
||||
@apply text-2xl;
|
||||
}
|
||||
|
||||
a {
|
||||
@apply underline;
|
||||
}
|
||||
|
||||
li {
|
||||
@apply list-disc;
|
||||
@apply list-inside;
|
||||
@apply text-left;
|
||||
}
|
||||
|
||||
p {
|
||||
@apply text-justify;
|
||||
}
|
||||
@layer utilities {
|
||||
.text-balance {
|
||||
text-wrap: balance;
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,34 +1,64 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import { Inter } from "next/font/google";
|
||||
import Script from "next/script";
|
||||
import type { Metadata } from "next";
|
||||
import { Geist, Geist_Mono } from "next/font/google";
|
||||
import type { JSX, ReactNode } from "react";
|
||||
// eslint-disable-next-line import/no-unassigned-import -- Import global styles.
|
||||
import "./globals.css";
|
||||
|
||||
const geistSans = Geist({
|
||||
variable: "--font-geist-sans",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
// eslint-disable-next-line new-cap -- This is a function call.
|
||||
const inter = Inter({ subsets: [ "latin" ] });
|
||||
|
||||
const geistMono = Geist_Mono({
|
||||
variable: "--font-geist-mono",
|
||||
subsets: ["latin"],
|
||||
});
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Create Next App",
|
||||
description: "Generated by create next app",
|
||||
const metadata: Metadata = {
|
||||
description:
|
||||
"This page tells you everything you could ever want to know about Naomi and her consulting firm nhcarrigan.",
|
||||
openGraph: {
|
||||
images: "https://cdn.nhcarrigan.com/og-image.png",
|
||||
},
|
||||
title: "NHCarrigan Announcements",
|
||||
twitter: {
|
||||
card: "summary_large_image",
|
||||
images: "https://cdn.nhcarrigan.com/og-image.png",
|
||||
site: "@naomi_lgbt",
|
||||
},
|
||||
};
|
||||
|
||||
export default function RootLayout({
|
||||
/**
|
||||
* The top-level wrapper for the React application.
|
||||
* Handles mounting the shadow DOM.
|
||||
* @param opts - The rendering options.
|
||||
* @param opts.children - The children elements to render.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
const RootLayout = ({
|
||||
children,
|
||||
}: Readonly<{
|
||||
children: React.ReactNode;
|
||||
}>) {
|
||||
children: ReactNode;
|
||||
}>): JSX.Element => {
|
||||
return (
|
||||
<html lang="en">
|
||||
<body
|
||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
||||
>
|
||||
<Script
|
||||
async={true}
|
||||
defer={true}
|
||||
src="https://cdn.nhcarrigan.com/headers/index.js"
|
||||
strategy={"afterInteractive"}
|
||||
type="text/javascript"
|
||||
></Script>
|
||||
<link
|
||||
href="https://cdn.nhcarrigan.com/logo.png"
|
||||
rel="icon"
|
||||
sizes="any"
|
||||
/>
|
||||
<body className={inter.className}>
|
||||
{children}
|
||||
</body>
|
||||
</html>
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
export { metadata };
|
||||
export default RootLayout;
|
||||
|
||||
117
src/app/page.tsx
117
src/app/page.tsx
@ -1,101 +1,26 @@
|
||||
import Image from "next/image";
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { Rule } from "@/components/rule";
|
||||
import { getSortedPostsData } from "@/lib/posts";
|
||||
|
||||
export default function Home() {
|
||||
const posts = getSortedPostsData();
|
||||
return (
|
||||
<div className="grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20 font-[family-name:var(--font-geist-sans)]">
|
||||
<main className="flex flex-col gap-8 row-start-2 items-center sm:items-start">
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/next.svg"
|
||||
alt="Next.js logo"
|
||||
width={180}
|
||||
height={38}
|
||||
priority
|
||||
/>
|
||||
<ol className="list-inside list-decimal text-sm text-center sm:text-left font-[family-name:var(--font-geist-mono)]">
|
||||
<li className="mb-2">
|
||||
Get started by editing{" "}
|
||||
<code className="bg-black/[.05] dark:bg-white/[.06] px-1 py-0.5 rounded font-semibold">
|
||||
src/app/page.tsx
|
||||
</code>
|
||||
.
|
||||
</li>
|
||||
<li>Save and see your changes instantly.</li>
|
||||
</ol>
|
||||
|
||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
||||
<a
|
||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5"
|
||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
className="dark:invert"
|
||||
src="/vercel.svg"
|
||||
alt="Vercel logomark"
|
||||
width={20}
|
||||
height={20}
|
||||
/>
|
||||
Deploy now
|
||||
</a>
|
||||
<a
|
||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:min-w-44"
|
||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
Read our docs
|
||||
</a>
|
||||
</div>
|
||||
</main>
|
||||
<footer className="row-start-3 flex gap-6 flex-wrap items-center justify-center">
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/file.svg"
|
||||
alt="File icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Learn
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/window.svg"
|
||||
alt="Window icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Examples
|
||||
</a>
|
||||
<a
|
||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<Image
|
||||
aria-hidden
|
||||
src="/globe.svg"
|
||||
alt="Globe icon"
|
||||
width={16}
|
||||
height={16}
|
||||
/>
|
||||
Go to nextjs.org →
|
||||
</a>
|
||||
</footer>
|
||||
</div>
|
||||
<main>
|
||||
<h1>{"Announcements"}</h1>
|
||||
<p>{"This page documents all of our organisation's announcements, in reverse chronological order."}</p>
|
||||
{posts.map((post) => {
|
||||
return <div key={post.slug}>
|
||||
<Rule />
|
||||
<h2><a className="underline" href={`/post/${post.slug}`}>{post.data.title}</a></h2>
|
||||
<p className="italic text-center">{post.data.date.toLocaleDateString("en-GB",{ year: "numeric", month: "long", day: "numeric"})}</p>
|
||||
<p>{post.data.summary}</p>
|
||||
</div>;
|
||||
})}
|
||||
</main>
|
||||
);
|
||||
}
|
||||
|
||||
23
src/app/post/[slug]/page.tsx
Normal file
23
src/app/post/[slug]/page.tsx
Normal file
@ -0,0 +1,23 @@
|
||||
import { Rule } from "@/components/rule";
|
||||
import { getPostData } from "@/lib/posts";
|
||||
import Markdown from "react-markdown";
|
||||
import remarkGfm from "remark-gfm";
|
||||
|
||||
export default async function Page({
|
||||
params
|
||||
}: {
|
||||
params: Promise<{slug: string}>
|
||||
}) {
|
||||
const { slug } = await params;
|
||||
const post = getPostData(slug);
|
||||
return (
|
||||
<main>
|
||||
<h1>{post.data.title}</h1>
|
||||
<p className="italic text-center">{`Published ${post.data.date.toLocaleDateString("en-GB", { weekday: "long", year: "numeric", month: "long", day: "numeric"})}`}</p>
|
||||
<Rule />
|
||||
<Markdown remarkPlugins={[remarkGfm]}>{post.content}</Markdown>
|
||||
<Rule />
|
||||
<a href="/">{"← Back to home"}</a>
|
||||
</main>
|
||||
)
|
||||
}
|
||||
14
src/components/rule.tsx
Normal file
14
src/components/rule.tsx
Normal file
@ -0,0 +1,14 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
import type { JSX } from "react";
|
||||
|
||||
/**
|
||||
* Renders a customised horizontal rule.
|
||||
* @returns A JSX element.
|
||||
*/
|
||||
export const Rule = (): JSX.Element => {
|
||||
return <hr className="border-dashed border-2 border-[--primary-color]"></hr>;
|
||||
};
|
||||
58
src/lib/posts.ts
Normal file
58
src/lib/posts.ts
Normal file
@ -0,0 +1,58 @@
|
||||
/**
|
||||
* @copyright nhcarrigan
|
||||
* @license Naomi's Public License
|
||||
* @author Naomi Carrigan
|
||||
*/
|
||||
|
||||
import { readFileSync, readdirSync } from "node:fs";
|
||||
import { join } from "node:path";
|
||||
import matter from "gray-matter";
|
||||
|
||||
const postsDirectory = join(process.cwd(), "posts");
|
||||
|
||||
export const getSortedPostsData = () => {
|
||||
const fileNames = readdirSync(postsDirectory);
|
||||
const allPostsData = fileNames.map((fileName) => {
|
||||
const slug = fileName.replace(/\.md$/, "");
|
||||
const fullPath = join(postsDirectory, fileName);
|
||||
const fileContents = readFileSync(fullPath, "utf8");
|
||||
const matterResult = matter(fileContents) as unknown as {
|
||||
content: string;
|
||||
data: { title: string; date: string; summary: string };
|
||||
};
|
||||
return {
|
||||
slug: slug,
|
||||
data: {
|
||||
title: matterResult.data.title,
|
||||
date: new Date(matterResult.data.date),
|
||||
summary: matterResult.data.summary,
|
||||
},
|
||||
content: matterResult.content,
|
||||
};
|
||||
});
|
||||
return allPostsData.sort((a, b) => {
|
||||
if (a.data.date < b.data.date) {
|
||||
return 1;
|
||||
} else {
|
||||
return -1;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
export const getPostData = (slug: string) => {
|
||||
const fullPath = join(postsDirectory, slug + ".md");
|
||||
const fileContents = readFileSync(fullPath, "utf8");
|
||||
const matterResult = matter(fileContents) as unknown as {
|
||||
content: string;
|
||||
data: { title: string; date: string; summary: string };
|
||||
};
|
||||
return {
|
||||
slug: slug,
|
||||
data: {
|
||||
title: matterResult.data.title,
|
||||
date: new Date(matterResult.data.date),
|
||||
summary: matterResult.data.summary,
|
||||
},
|
||||
content: matterResult.content,
|
||||
};
|
||||
}
|
||||
Reference in New Issue
Block a user