Merge pull request #190 from ruchernchong/189-rename-journals-to-notes

Rename Journals to Notes

app/journals/[slug]/page.tsx → app/notes/[slug]/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { allJournals } from "contentlayer/generated";
+import { allNotes } from "contentlayer/generated";
 import { Mdx } from "@/components/Mdx";
 import { StructuredData } from "@/components/StructuredData";
 import { Typography } from "@/components/Typography";
@@ -12,13 +12,13 @@ export const generateMetadata = async (props: {
   params: Params;
 }): Promise<Metadata> => {
   const params = await props.params;
-  const journal = allJournals.find((journal) => journal.slug === params.slug)!;
+  const note = allNotes.find((note) => note.slug === params.slug)!;
 
-  const title = journal.title;
-  const description = journal.title;
-  const publishedTime = journal.publishedAt;
+  const title = note.title;
+  const description = note.title;
+  const publishedTime = note.publishedAt;
   const images = `${BASE_URL}/og?title=${title}`;
-  const url = journal.url;
+  const url = note.url;
 
   return {
     title,
@@ -44,27 +44,27 @@ export const generateMetadata = async (props: {
 };
 
 export const generateStaticParams = () =>
-  allJournals.map(({ slug }) => ({ slug }));
+  allNotes.map(({ slug }) => ({ slug }));
 
-const JournalPage = async (props: { params: Params }) => {
+const NotePage = async (props: { params: Params }) => {
   const params = await props.params;
-  const journal = allJournals.find((journal) => journal.slug === params.slug);
+  const note = allNotes.find((note) => note.slug === params.slug);
 
-  if (!journal) {
+  if (!note) {
     return notFound();
   }
 
   return (
     <>
-      <StructuredData data={journal.structuredData} />
+      <StructuredData data={note.structuredData} />
       <article className="prose prose-invert mx-auto mb-16 max-w-4xl prose-a:text-pink-500 prose-img:rounded-2xl">
         <Typography variant="h1" className="text-center">
-          {journal.title}
+          {note.title}
         </Typography>
-        <Mdx code={journal.body.code} />
+        <Mdx code={note.body.code} />
       </article>
     </>
   );
 };
 
-export default JournalPage;
+export default NotePage;

app/journals/page.tsx → app/notes/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { allJournals } from "contentlayer/generated";
+import { allNotes } from "contentlayer/generated";
 import { format, formatISO, parseISO } from "date-fns";
 import globalMetadata from "@/app/metadata";
 import { openGraphImage, twitterImage } from "@/app/shared-metadata";
@@ -9,18 +9,18 @@ import { Typography } from "@/components/Typography";
 import { sortByLatest } from "@/lib/sortByLatest";
 import type { WebPage, WithContext } from "schema-dts";
 
-const title = `Journals`;
+const title = "Notes";
 const description =
   "A collection containing fun and interesting things I came across randomly.";
 
 export const metadata: Metadata = {
-  title: "Journals",
+  title,
   description,
   openGraph: {
     ...globalMetadata.openGraph,
     title,
     description,
-    url: "/journals",
+    url: "/notes",
     ...openGraphImage,
   },
   twitter: {
@@ -30,11 +30,11 @@ export const metadata: Metadata = {
     ...twitterImage,
   },
   alternates: {
-    canonical: "/journals",
+    canonical: "/notes",
   },
 };
 
-const JournalsPage = () => {
+const NotesPage = () => {
   const structuredData: WithContext<WebPage> = {
     "@context": "https://schema.org",
     "@type": "WebPage",
@@ -47,14 +47,14 @@ const JournalsPage = () => {
     <>
       <StructuredData data={structuredData} />
       <Typography variant="h1" className="mb-8">
-        Journals
+        Notes
       </Typography>
       <Typography variant="h2" className="mb-8">
         {description}
       </Typography>
       <div className="flex flex-col justify-center gap-8">
         <div className="flex flex-col gap-2">
-          {allJournals.sort(sortByLatest).map(({ title, publishedAt, url }) => {
+          {allNotes.sort(sortByLatest).map(({ title, publishedAt, url }) => {
             const formattedDate = format(parseISO(publishedAt), "dd MMM yyyy");
 
             return (
@@ -83,4 +83,4 @@ const JournalsPage = () => {
   );
 };
 
-export default JournalsPage;
+export default NotesPage;

components/Mdx.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import Image from "next/image";
-import { useMDXComponent } from "next-contentlayer/hooks";
+import { useMDXComponent } from "next-contentlayer2/hooks";
 import type { MDXComponents } from "mdx/types";
 import { ArrowUpRightIcon } from "@heroicons/react/16/solid";
 import { Typography } from "@/components/Typography";

config/index.ts

@@ -9,7 +9,7 @@ export const BASE_URL: string =
 export const navLinks: NavLink[] = [
   // { title: "Blog", href: "/blog" },
   { title: "About", href: "/about" },
-  { title: "Journals", href: "/journals" },
+  { title: "Notes", href: "/notes" },
   { title: "Projects", href: "/projects" },
   // { title: "Resume", href: "/resume" },
 ];

contentlayer.config.ts

@@ -1,4 +1,4 @@
-import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import { defineDocumentType, makeSource } from "contentlayer2/source-files";
 import type { BlogPosting, WithContext } from "schema-dts";
 import { BASE_URL } from "./config";
 import readingTime from "reading-time";
@@ -54,7 +54,7 @@ export const Post = defineDocumentType(() => ({
             name: "Ru Chern Chong",
             url: BASE_URL,
           },
-        } satisfies WithContext<BlogPosting>),
+        }) satisfies WithContext<BlogPosting>,
     },
     url: {
       type: "string",
@@ -63,9 +63,9 @@ export const Post = defineDocumentType(() => ({
   },
 }));
 
-export const Journal = defineDocumentType(() => ({
-  name: "Journal",
-  filePathPattern: "journals/**/*.mdx",
+export const Note = defineDocumentType(() => ({
+  name: "Note",
+  filePathPattern: "notes/**/*.mdx",
   contentType: "mdx",
   fields: {
     title: { type: "string", required: true },
@@ -76,54 +76,54 @@ export const Journal = defineDocumentType(() => ({
   computedFields: {
     slug: {
       type: "string",
-      resolve: (journal) => {
-        const [_, slug] = journal._raw.flattenedPath.split("/");
+      resolve: (note) => {
+        const [_, slug] = note._raw.flattenedPath.split("/");
         return slug;
       },
     },
     structuredData: {
       type: "json",
-      resolve: (journal) =>
+      resolve: (note) =>
         ({
           "@context": "https://schema.org",
           "@type": "BlogPosting",
-          headline: journal.title,
-          dateModified: journal.publishedAt,
-          datePublished: journal.publishedAt,
-          description: journal.title,
+          headline: note.title,
+          dateModified: note.publishedAt,
+          datePublished: note.publishedAt,
+          description: note.title,
           image: [
-            journal.image
-              ? encodeURI(`${BASE_URL}/${journal.image}`)
-              : encodeURI(`${BASE_URL}/og?title=${journal.title}`),
+            note.image
+              ? encodeURI(`${BASE_URL}/${note.image}`)
+              : encodeURI(`${BASE_URL}/og?title=${note.title}`),
           ],
-          url: `${BASE_URL}/${journal._raw.flattenedPath}`,
+          url: `${BASE_URL}/${note._raw.flattenedPath}`,
           author: {
             "@type": "Person",
             name: "Ru Chern Chong",
             url: BASE_URL,
           },
-        } satisfies WithContext<BlogPosting>),
+        }) satisfies WithContext<BlogPosting>,
     },
     url: {
       type: "string",
-      resolve: (journal) => `/${journal._raw.flattenedPath}`,
+      resolve: (note) => `/${note._raw.flattenedPath}`,
     },
   },
 }));
 
 export default makeSource({
   contentDirPath: "content",
-  documentTypes: [Post, Journal],
+  documentTypes: [Post, Note],
   mdx: {
     remarkPlugins: [remarkGfm, remarkUnwrapImages],
     rehypePlugins: [
       rehypeSlug,
-      [
-        rehypePrettyCode,
-        {
-          theme: "github-dark-dimmed",
-        } satisfies PrettyCodeOptions,
-      ],
+      // [
+      //   rehypePrettyCode,
+      //   {
+      //     theme: "github-dark-dimmed",
+      //   } satisfies PrettyCodeOptions,
+      // ],
       [
         rehypeAutolinkHeadings,
         {

next.config.ts

@@ -1,5 +1,5 @@
 import type { NextConfig } from "next";
-import { withContentlayer } from "next-contentlayer";
+import { withContentlayer } from "next-contentlayer2";
 
 const nextConfig: NextConfig = {
   reactStrictMode: true,

package.json

@@ -3,8 +3,8 @@
   "version": "1.4.2",
   "private": true,
   "scripts": {
-    "dev": "next dev --turbo",
-    "build": "next build",
+    "dev": "contentlayer2 dev & next dev --turbo",
+    "build": "contentlayer2 build && next build",
     "start": "next start",
     "lint": "next lint",
     "semantic-release": "semantic-release",
@@ -20,20 +20,21 @@
     "@vercel/og": "^0.0.27",
     "@vercel/speed-insights": "^1.0.9",
     "classnames": "^2.3.2",
-    "contentlayer": "^0.3.4",
+    "contentlayer2": "^0.5.3",
     "date-fns": "^4.1.0",
     "eslint": "8.31.0",
     "eslint-config-next": "13.4.2",
     "graphql": "^16.8.1",
+    "mdx-bundler": "^10.0.3",
     "next": "^15.0.2",
-    "next-contentlayer": "^0.3.4",
-    "react": "19.0.0-rc-603e6108-20241029",
-    "react-dom": "19.0.0-rc-603e6108-20241029",
+    "next-contentlayer2": "^0.5.3",
+    "react": "19.0.0-rc.1",
+    "react-dom": "19.0.0-rc.1",
     "reading-time": "^1.5.0",
-    "rehype-autolink-headings": "^6.1.1",
-    "rehype-pretty-code": "^0.10.2",
-    "rehype-slug": "^5.1.0",
-    "remark-gfm": "^3.0.1",
+    "rehype-autolink-headings": "^7.1.0",
+    "rehype-pretty-code": "^0.14.0",
+    "rehype-slug": "^6.0.0",
+    "remark-gfm": "^4.0.0",
     "remark-unwrap-images": "^4.0.0",
     "rss": "^1.2.2",
     "schema-dts": "^1.1.2",
@@ -52,8 +53,8 @@
     "@tailwindcss/typography": "^0.5.8",
     "@types/mdx": "^2.0.11",
     "@types/node": "^20.17.0",
-    "@types/react": "^18.3.0",
-    "@types/react-dom": "^18.3.0",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.1",
     "@types/rss": "^0.0.32",
     "@types/ws": "^8.5.12",
     "autoprefixer": "^10.4.13",