mirror of
https://github.com/jakejarvis/jarv.is.git
synced 2025-09-16 19:15:34 -04:00
Migrate to app router (#2254)
This commit is contained in:
GitHub
67
app/notes/[slug]/page.module.css
Normal file
67
app/notes/[slug]/page.module.css
Normal file
@@ -0,0 +1,67 @@
|
||||
.meta {
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
font-size: 0.825em;
|
||||
line-height: 2.3;
|
||||
letter-spacing: 0.04em;
|
||||
color: var(--colors-medium);
|
||||
}
|
||||
|
||||
.meta .item {
|
||||
margin-right: 1.6em;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.meta .link {
|
||||
color: inherit !important;
|
||||
}
|
||||
|
||||
.meta .icon {
|
||||
display: inline;
|
||||
width: 1.2em;
|
||||
height: 1.2em;
|
||||
vertical-align: -0.2em;
|
||||
margin-right: 0.6em;
|
||||
}
|
||||
|
||||
.meta .tags {
|
||||
white-space: normal;
|
||||
display: inline-flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.meta .tag {
|
||||
text-transform: lowercase;
|
||||
white-space: nowrap;
|
||||
margin-right: 0.75em;
|
||||
}
|
||||
|
||||
.meta .tag:before {
|
||||
content: "\0023"; /* cosmetically hashtagify tags */
|
||||
padding-right: 0.125em;
|
||||
color: var(--colors-light);
|
||||
}
|
||||
.meta .tag:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin: 0.3em 0 0.5em -1px; /* misaligned left margin, super nitpicky */
|
||||
font-size: 2.1em;
|
||||
line-height: 1.3;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.title code {
|
||||
margin: 0 0.075em;
|
||||
}
|
||||
|
||||
.title .link {
|
||||
color: var(--colors-text) !important;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.title {
|
||||
font-size: 1.8em;
|
||||
}
|
||||
}
|
||||
178
app/notes/[slug]/page.tsx
Normal file
178
app/notes/[slug]/page.tsx
Normal file
@@ -0,0 +1,178 @@
|
||||
import * as runtime from "react/jsx-runtime";
|
||||
import { ErrorBoundary } from "react-error-boundary";
|
||||
import { evaluate } from "@mdx-js/mdx";
|
||||
import Content from "../../../components/Content";
|
||||
import Link from "../../../components/Link";
|
||||
import Time from "../../../components/Time";
|
||||
import HitCounter from "../../../components/HitCounter";
|
||||
import Comments from "../../../components/Comments";
|
||||
import { getPostSlugs, getPostData } from "../../../lib/helpers/posts";
|
||||
import * as mdxComponents from "../../../lib/helpers/mdx-components";
|
||||
import { metadata as defaultMetadata } from "../../layout";
|
||||
import config from "../../../lib/config";
|
||||
import { FiCalendar, FiTag, FiEdit, FiEye } from "react-icons/fi";
|
||||
import type { Metadata, Route } from "next";
|
||||
import type { Article, WithContext } from "schema-dts";
|
||||
|
||||
import styles from "./page.module.css";
|
||||
|
||||
// https://nextjs.org/docs/app/api-reference/functions/generate-static-params#disable-rendering-for-unspecified-paths
|
||||
export const dynamicParams = false;
|
||||
|
||||
export async function generateStaticParams() {
|
||||
const slugs = await getPostSlugs();
|
||||
|
||||
// map slugs into a static paths object required by next.js
|
||||
return slugs.map((slug: string) => ({
|
||||
slug,
|
||||
}));
|
||||
}
|
||||
|
||||
export async function generateMetadata({ params }: { params: Promise<{ slug: string }> }): Promise<Metadata> {
|
||||
const { slug } = await params;
|
||||
const { frontMatter } = await getPostData(slug);
|
||||
|
||||
return {
|
||||
title: frontMatter.title,
|
||||
description: frontMatter.description,
|
||||
openGraph: {
|
||||
...defaultMetadata.openGraph,
|
||||
title: frontMatter.title,
|
||||
url: `/notes/${slug}`,
|
||||
type: "article",
|
||||
authors: [config.authorName],
|
||||
tags: frontMatter.tags,
|
||||
publishedTime: frontMatter.date,
|
||||
modifiedTime: frontMatter.date,
|
||||
images: frontMatter.image
|
||||
? [{ url: frontMatter.image, alt: frontMatter.title }]
|
||||
: defaultMetadata.openGraph?.images,
|
||||
},
|
||||
alternates: {
|
||||
...defaultMetadata.alternates,
|
||||
canonical: `/notes/${slug}`,
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
export default async function Page({ params }: { params: Promise<{ slug: string }> }) {
|
||||
const { slug } = await params;
|
||||
const { frontMatter, markdown } = await getPostData(slug);
|
||||
|
||||
const jsonLd: WithContext<Article> = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "Article",
|
||||
name: frontMatter.title,
|
||||
description: frontMatter.description || config.longDescription,
|
||||
url: frontMatter.permalink,
|
||||
image: frontMatter.image,
|
||||
datePublished: frontMatter.date,
|
||||
dateModified: frontMatter.date,
|
||||
author: {
|
||||
"@type": "Person",
|
||||
name: config.authorName,
|
||||
url: defaultMetadata.metadataBase?.href || `https://${config.siteDomain}`,
|
||||
},
|
||||
};
|
||||
|
||||
const { remarkGfm, remarkSmartypants, rehypeSlug, rehypeUnwrapImages, rehypePrism } = await import(
|
||||
"../../../lib/helpers/remark-rehype-plugins"
|
||||
);
|
||||
|
||||
const { default: MDXContent } = await evaluate(markdown, {
|
||||
...runtime,
|
||||
remarkPlugins: [
|
||||
[remarkGfm, { singleTilde: false }],
|
||||
[
|
||||
remarkSmartypants,
|
||||
{
|
||||
quotes: true,
|
||||
dashes: "oldschool",
|
||||
backticks: false,
|
||||
ellipses: false,
|
||||
},
|
||||
],
|
||||
],
|
||||
rehypePlugins: [rehypeSlug, rehypeUnwrapImages, [rehypePrism, { ignoreMissing: true }]],
|
||||
});
|
||||
|
||||
return (
|
||||
<>
|
||||
<script type="application/ld+json" dangerouslySetInnerHTML={{ __html: JSON.stringify(jsonLd) }} />
|
||||
|
||||
<div className={styles.meta}>
|
||||
<div className={styles.item}>
|
||||
<Link href={`/notes/${frontMatter.slug}` as Route} underline={false} className={styles.link}>
|
||||
<FiCalendar className={styles.icon} />
|
||||
<Time date={frontMatter.date} format="MMMM D, YYYY" />
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{frontMatter.tags && (
|
||||
<div className={styles.item}>
|
||||
<FiTag className={styles.icon} />
|
||||
<span className={styles.tags}>
|
||||
{frontMatter.tags.map((tag) => (
|
||||
<span key={tag} title={tag} className={styles.tag} aria-label={`Tagged with ${tag}`}>
|
||||
{tag}
|
||||
</span>
|
||||
))}
|
||||
</span>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div className={styles.item}>
|
||||
<Link
|
||||
href={`https://github.com/${config.githubRepo}/blob/main/notes/${frontMatter.slug}.mdx`}
|
||||
title={`Edit "${frontMatter.title}" on GitHub`}
|
||||
underline={false}
|
||||
className={styles.link}
|
||||
>
|
||||
<FiEdit className={styles.icon} />
|
||||
<span>Improve This Post</span>
|
||||
</Link>
|
||||
</div>
|
||||
|
||||
{/* only count hits on production site */}
|
||||
{process.env.NEXT_PUBLIC_VERCEL_ENV === "production" && (
|
||||
<div
|
||||
className={styles.item}
|
||||
style={{
|
||||
// fix potential layout shift when number of hits loads
|
||||
minWidth: "7em",
|
||||
marginRight: 0,
|
||||
}}
|
||||
>
|
||||
{/* completely hide this block if anything goes wrong on the backend */}
|
||||
<ErrorBoundary fallback={null}>
|
||||
<FiEye className={styles.icon} />
|
||||
<HitCounter slug={`notes/${frontMatter.slug}`} />
|
||||
</ErrorBoundary>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<h1 className={styles.title}>
|
||||
<Link
|
||||
href={`/notes/${frontMatter.slug}` as Route}
|
||||
dangerouslySetInnerHTML={{ __html: frontMatter.htmlTitle || frontMatter.title }}
|
||||
underline={false}
|
||||
className={styles.link}
|
||||
/>
|
||||
</h1>
|
||||
|
||||
<Content>
|
||||
<MDXContent
|
||||
// @ts-ignore
|
||||
components={{ ...mdxComponents }}
|
||||
/>
|
||||
</Content>
|
||||
|
||||
{!frontMatter.noComments && (
|
||||
<div id="comments">
|
||||
<Comments title={frontMatter.title} />
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
51
app/notes/page.module.css
Normal file
51
app/notes/page.module.css
Normal file
@@ -0,0 +1,51 @@
|
||||
.section {
|
||||
font-size: 1.1em;
|
||||
line-height: 1.1;
|
||||
margin: 2.4em 0;
|
||||
}
|
||||
|
||||
.section:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
.section:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.year {
|
||||
font-size: 2.2em;
|
||||
font-weight: 700;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.list {
|
||||
list-style-type: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.post {
|
||||
display: flex;
|
||||
line-height: 1.75;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
.post:last-of-type {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.postDate {
|
||||
width: 5.25em;
|
||||
flex-shrink: 0;
|
||||
color: var(--colors-medium);
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.section {
|
||||
margin: 1.8em 0;
|
||||
}
|
||||
|
||||
.year {
|
||||
font-size: 2em;
|
||||
}
|
||||
}
|
||||
65
app/notes/page.tsx
Normal file
65
app/notes/page.tsx
Normal file
@@ -0,0 +1,65 @@
|
||||
import Content from "../../components/Content";
|
||||
import Link from "../../components/Link";
|
||||
import Time from "../../components/Time";
|
||||
import { getAllPosts } from "../../lib/helpers/posts";
|
||||
import config from "../../lib/config";
|
||||
import { metadata as defaultMetadata } from "../layout";
|
||||
import type { ReactElement } from "react";
|
||||
import type { Metadata, Route } from "next";
|
||||
import type { PostsByYear } from "../../types";
|
||||
|
||||
import styles from "./page.module.css";
|
||||
|
||||
export const metadata: Metadata = {
|
||||
title: "Notes",
|
||||
description: `Recent posts by ${config.authorName}.`,
|
||||
openGraph: {
|
||||
...defaultMetadata.openGraph,
|
||||
title: "Notes",
|
||||
url: "/notes",
|
||||
},
|
||||
alternates: {
|
||||
...defaultMetadata.alternates,
|
||||
canonical: "/notes",
|
||||
},
|
||||
};
|
||||
|
||||
export default async function Page() {
|
||||
// parse the year of each note and group them together
|
||||
const notes = await getAllPosts();
|
||||
const notesByYear: PostsByYear = {};
|
||||
|
||||
notes.forEach((note) => {
|
||||
const year = new Date(note.date).getUTCFullYear();
|
||||
(notesByYear[year] || (notesByYear[year] = [])).push(note);
|
||||
});
|
||||
|
||||
const sections: ReactElement[] = [];
|
||||
|
||||
Object.entries(notesByYear).forEach(([year, posts]) => {
|
||||
sections.push(
|
||||
<section className={styles.section} key={year}>
|
||||
<h2 className={styles.year}>{year}</h2>
|
||||
<ul className={styles.list}>
|
||||
{posts.map(({ slug, date, title, htmlTitle }) => (
|
||||
<li className={styles.post} key={slug}>
|
||||
<Time date={date} format="MMM D" className={styles.postDate} />
|
||||
<span>
|
||||
<Link href={`/notes/${slug}` as Route} dangerouslySetInnerHTML={{ __html: htmlTitle || title }} />
|
||||
</span>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
</section>
|
||||
);
|
||||
});
|
||||
|
||||
// grouped posts enter this component ordered chronologically -- we want reverse chronological
|
||||
const reversed = sections.reverse();
|
||||
|
||||
return (
|
||||
<>
|
||||
<Content>{reversed}</Content>
|
||||
</>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user