Add Payload CMS 3.0

.env.example

@@ -1,4 +1,20 @@
 NEXT_PUBLIC_BASE_URL=http://localhost:3000
+
+# Payload CMS Configuration
+PAYLOAD_SECRET=
+
+# Database Configuration
+DATABASE_URL=
+
+# AWS S3 Storage Configuration
+S3_BUCKET=
+S3_ACCESS_KEY_ID=
+S3_SECRET_ACCESS_KEY=
+S3_REGION=
+
+# GitHub Integration
 GH_ACCESS_TOKEN=
+
+# Redis Caching Configuration
 UPSTASH_REDIS_REST_URL=
 UPSTASH_REDIS_REST_TOKEN=

.gitignore

@@ -23,6 +23,4 @@
 *.tsbuildinfo
 next-env.d.ts
 
-# contentlayer
-.contentlayer
 .vercel

app/about/page.tsx → app/(blog)/about/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
-import globalMetadata from "@/app/metadata";
-import { openGraphImage, twitterImage } from "@/app/shared-metadata";
+import globalMetadata from "@/metadata";
+import { openGraphImage, twitterImage } from "@/shared-metadata";
 import { Author } from "@/components/Author";
 import Contributions from "@/components/Contributions";
 import Employment from "@/components/Employment";

components/Avatar.tsx → app/(blog)/components/Avatar.tsx

@@ -1,6 +1,6 @@
 import Image from "next/image";
-import avatar from "@/public/images/avatar.jpg";
-import avatarHover from "@/public/images/avatar-hover.jpg";
+import avatar from "../../../public/images/avatar.jpg";
+import avatarHover from "../../../public/images/avatar-hover.jpg";
 
 const Avatar = () => {
   return (

components/FeaturedPosts.tsx → app/(blog)/components/FeaturedPosts.tsx

@@ -2,10 +2,9 @@ import Link from "next/link";
 import { format, formatISO, parseISO } from "date-fns";
 import Card from "@/components/Card";
 import { Typography } from "@/components/Typography";
-import type { Post } from "contentlayer/generated";
 
 interface FeaturedPostsProps {
-  featuredPosts: Post[];
+  featuredPosts: never[];
 }
 
 const FeaturedPosts = ({ featuredPosts }: FeaturedPostsProps) => {

components/Footer.tsx → app/(blog)/components/Footer.tsx

@@ -4,7 +4,7 @@ import ExternalLink from "@/components/ExternalLink";
 import * as Icons from "@/components/Icons";
 import { BASE_URL, navLinks } from "@/config";
 import socials from "@/data/socials";
-import Icon from "@/app/icon.png";
+import Icon from "@/icon.png";
 
 export const Footer = () => {
   // Temporary removed links

components/Mdx.tsx → app/(blog)/components/Mdx.tsx

@@ -1,7 +1,6 @@
 import { Suspense } from "react";
 import Link from "next/link";
 import Image from "next/image";
-import { useMDXComponent } from "next-contentlayer2/hooks";
 import type { MDXComponents } from "mdx/types";
 import { ArrowUpRightIcon } from "@heroicons/react/16/solid";
 import { Typography } from "@/components/Typography";
@@ -94,12 +93,12 @@ const components: MDXComponents = {
   img: ImageComponent,
 };
 
-export const Mdx = ({ code }: { code: string }) => {
-  const Component = useMDXComponent(code);
-
-  return (
-    <div data-umami-event="mdx-content-view">
-      <Component components={components} />
-    </div>
-  );
-};
+// export const Mdx = ({ code }: { code: string }) => {
+//   const Component = useMDXComponent(code);
+//
+//   return (
+//     <div data-umami-event="mdx-content-view">
+//       <Component components={components} />
+//     </div>
+//   );
+// };

app/feed.xml/route.ts → app/(blog)/feed.xml/route.ts

@@ -1,6 +1,5 @@
 import RSS from "rss";
 import { NextResponse } from "next/server";
-import { allDocuments } from "contentlayer/generated";
 import { BASE_URL } from "@/config";
 
 export const GET = () => {
@@ -10,14 +9,14 @@ export const GET = () => {
     feed_url: `${BASE_URL}/feed.xml`,
   });
 
-  allDocuments.map(({ title, publishedAt, excerpt, url }) =>
-    feed.item({
-      title,
-      url: `${BASE_URL}${url}`,
-      date: publishedAt as string,
-      description: excerpt || title,
-    }),
-  );
+  // allDocuments.map(({ title, publishedAt, excerpt, url }) =>
+  //   feed.item({
+  //     title,
+  //     url: `${BASE_URL}${url}`,
+  //     date: publishedAt as string,
+  //     description: excerpt || title,
+  //   }),
+  // );
 
   return new NextResponse(feed.xml({ indent: true }), {
     headers: {

app/layout.tsx → app/(blog)/layout.tsx

@@ -9,7 +9,7 @@ import { SpeedInsights } from "@vercel/speed-insights/next";
 import { Footer } from "@/components/Footer";
 import { Header } from "@/components/Header";
 import { BASE_URL } from "@/config";
-import "@/app/globals.css";
+import "@/globals.css";
 
 const inter = Inter({ subsets: ["latin"] });
 

lib/stackoverflow.ts → app/(blog)/lib/stackoverflow.ts

@@ -17,7 +17,7 @@ export const getStackOverflowProfile =
     });
 
     const { items } = await fetch(
-      `${STACK_OVERFLOW_API_URL}/users/${USER_ID}?${params}`
+      `${STACK_OVERFLOW_API_URL}/users/${USER_ID}?${params}`,
     ).then((res) => res.json());
 
     return items[0];

app/notes/[slug]/page.tsx → app/(blog)/notes/[slug]/page.tsx

@@ -1,7 +1,6 @@
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
-import { allNotes } from "contentlayer/generated";
-import { Mdx } from "@/components/Mdx";
+// import { Mdx } from "@/components/Mdx";
 import { StructuredData } from "@/components/StructuredData";
 import { Typography } from "@/components/Typography";
 import { BASE_URL } from "@/config";
@@ -12,7 +11,7 @@ export const generateMetadata = async (props: {
   params: Params;
 }): Promise<Metadata> => {
   const params = await props.params;
-  const note = allNotes.find((note) => note.slug === params.slug)!;
+  const note = ([] as any).find((note: any) => note.slug === params.slug)!;
 
   const title = note.title;
   const description = `Notes on ${note.title}`;
@@ -43,12 +42,11 @@ export const generateMetadata = async (props: {
   };
 };
 
-export const generateStaticParams = () =>
-  allNotes.map(({ slug }) => ({ slug }));
+export const generateStaticParams = () => [].map(({ slug }) => ({ slug }));
 
 const NotePage = async (props: { params: Params }) => {
   const params = await props.params;
-  const note = allNotes.find((note) => note.slug === params.slug);
+  const note = ([] as any).find((note: any) => note.slug === params.slug);
 
   if (!note) {
     return notFound();
@@ -76,7 +74,7 @@ const NotePage = async (props: { params: Params }) => {
           data-umami-event="note-content-view"
           data-umami-event-title={note.title}
         >
-          <Mdx code={note.body.code} />
+          {/*<Mdx code={note.body.code} />*/}
         </div>
       </article>
     </>

app/notes/page.tsx → app/(blog)/notes/page.tsx

@@ -1,9 +1,8 @@
 import type { Metadata } from "next";
 import Link from "next/link";
-import { allNotes } from "contentlayer/generated";
 import { format, formatISO, parseISO } from "date-fns";
-import globalMetadata from "@/app/metadata";
-import { openGraphImage, twitterImage } from "@/app/shared-metadata";
+import globalMetadata from "@/metadata";
+import { openGraphImage, twitterImage } from "@/shared-metadata";
 import { StructuredData } from "@/components/StructuredData";
 import { Typography } from "@/components/Typography";
 import { sortByLatest } from "@/lib/sortByLatest";
@@ -44,7 +43,7 @@ const NotesPage = () => {
     url: `${BASE_URL}/notes`,
   };
 
-  const sortedNotes = allNotes.sort(sortByLatest);
+  const sortedNotes = [].sort(sortByLatest);
 
   return (
     <>

app/page.tsx → app/(blog)/page.tsx

@@ -1,14 +1,13 @@
-import { allPosts } from "contentlayer/generated";
 import type { WebSite, WithContext } from "schema-dts";
 import { Author } from "@/components/Author";
 import BlogPost from "@/components/BlogPost";
 import FeaturedPosts from "@/components/FeaturedPosts";
-import { StructuredData } from "@/components/StructuredData";
+import { StructuredData } from "./components/StructuredData";
 import { sortByLatest } from "@/lib/sortByLatest";
 import { BASE_URL } from "@/config";
 
 const HomePage = async () => {
-  const posts = allPosts.sort(sortByLatest);
+  const posts = [].sort(sortByLatest);
   const featuredPosts = posts.filter(({ featured }) => featured);
 
   const structuredData: WithContext<WebSite> = {

app/posts/[slug]/page.tsx → app/(blog)/posts/[slug]/page.tsx

@@ -1,11 +1,10 @@
 import type { Metadata } from "next";
 // import Link from "next/link";
 import { notFound } from "next/navigation";
-import { allPosts } from "contentlayer/generated";
 // import classNames from "classnames";
 import { format, formatISO, parseISO } from "date-fns";
 // import Card from "@/components/Card";
-import { Mdx } from "@/components/Mdx";
+// import { Mdx } from "@/components/Mdx";
 import { StructuredData } from "@/components/StructuredData";
 import { Typography } from "@/components/Typography";
 import { ViewCounter } from "@/components/ViewCounter";
@@ -17,14 +16,24 @@ import {
   InformationCircleIcon,
 } from "@heroicons/react/24/outline";
 import { truncate } from "@/utils/truncate";
+import { getPayload } from "payload";
+import config from "../../../../payload.config";
 
 type Params = Promise<{ slug: string }>;
 
 export const generateMetadata = async (props: {
   params: Params;
 }): Promise<Metadata> => {
   const params = await props.params;
-  const post = allPosts.find((post) => post.slug === params.slug)!;
+  const slug = params.slug;
+
+  const payload = await getPayload({ config });
+  const response = await payload.find({
+    collection: "posts",
+    draft: true,
+    where: { slug: { equals: slug } },
+  });
+  const post = response.docs[0];
 
   const title = post.title;
   const description = truncate(post.excerpt);
@@ -55,12 +64,27 @@ export const generateMetadata = async (props: {
   };
 };
 
-export const generateStaticParams = () =>
-  allPosts.map(({ slug }) => ({ slug }));
+export const generateStaticParams = async () => {
+  const payload = await getPayload({ config });
+  const response = await payload.find({ collection: "posts", draft: true });
+  const posts = response.docs;
+
+  return posts.map(({ slug }) => ({ slug }));
+};
 
 const PostPage = async (props: { params: Params }) => {
   const params = await props.params;
-  const post = allPosts.find((post) => post.slug === params.slug);
+  const slug = params.slug;
+
+  const payload = await getPayload({ config });
+  const response = await payload.find({
+    collection: "posts",
+    draft: false,
+    limit: 1,
+    where: { slug: { equals: slug } },
+  });
+
+  const post = response.docs[0];
 
   if (!post) {
     return notFound();
@@ -81,7 +105,7 @@ const PostPage = async (props: { params: Params }) => {
 
   return (
     <>
-      <StructuredData data={post.structuredData} />
+      {/*<StructuredData data={post.structuredData} />*/}
       <article className="prose prose-invert mx-auto mb-16 max-w-4xl prose-a:text-pink-500 prose-img:rounded-2xl">
         <div className="flex flex-col items-center gap-y-4 text-center">
           <div className="flex flex-col gap-x-2 text-gray-400 md:flex-row">
@@ -131,7 +155,7 @@ const PostPage = async (props: { params: Params }) => {
           data-umami-event="post-content-view"
           data-umami-event-slug={post.slug}
         >
-          <Mdx code={post.body.code} />
+          {/*<Mdx code={post.body.code} />*/}
         </div>
       </article>
       {/*<div className="mb-16 grid gap-y-4 md:grid-cols-2 md:gap-x-4">*/}

app/projects/page.tsx → app/(blog)/projects/page.tsx

@@ -1,6 +1,6 @@
 import type { Metadata } from "next";
-import globalMetadata from "@/app/metadata";
-import { openGraphImage, twitterImage } from "@/app/shared-metadata";
+import globalMetadata from "@/metadata";
+import { openGraphImage, twitterImage } from "@/shared-metadata";
 import { Chip } from "@/components/Chip";
 import { ItemOverlay } from "@/components/ItemOverlay";
 import { LinkWithIcon } from "@/components/LinkWithIcon";

app/sitemap.ts → app/(blog)/sitemap.ts

@@ -1,5 +1,4 @@
 import type { MetadataRoute } from "next";
-import { allDocuments } from "contentlayer/generated";
 import { BASE_URL, navLinks } from "@/config";
 
 const sitemap = (): MetadataRoute.Sitemap => {
@@ -14,11 +13,11 @@ const sitemap = (): MetadataRoute.Sitemap => {
         url: `${BASE_URL}${href}`,
         lastModified: formatLastModified(),
       })),
-    ...allDocuments.map(({ publishedAt, url }) => ({
-      url: `${BASE_URL}${url}`,
-      lastModified: formatLastModified(publishedAt),
-      changeFrequency: "daily",
-    })),
+    // ...allDocuments.map(({ publishedAt, url }) => ({
+    //   url: `${BASE_URL}${url}`,
+    //   lastModified: formatLastModified(publishedAt),
+    //   changeFrequency: "daily",
+    // })),
   ];
 };
 

app/(payload)/admin/[[...segments]]/not-found.tsx

@@ -0,0 +1,27 @@
+/* THIS FILE WAS GENERATED AUTOMATICALLY BY PAYLOAD. */
+/* DO NOT MODIFY IT BECAUSE IT COULD BE REWRITTEN AT ANY TIME. */
+import type { Metadata } from "next";
+
+import config from "@payload-config";
+import { NotFoundPage, generatePageMetadata } from "@payloadcms/next/views";
+import { importMap } from "../importMap";
+
+type Args = {
+  params: Promise<{
+    segments: string[];
+  }>;
+  searchParams: Promise<{
+    [key: string]: string | string[];
+  }>;
+};
+
+export const generateMetadata = ({
+  params,
+  searchParams,
+}: Args): Promise<Metadata> =>
+  generatePageMetadata({ config, params, searchParams });
+
+const NotFound = ({ params, searchParams }: Args) =>
+  NotFoundPage({ config, params, searchParams, importMap });
+
+export default NotFound;