chore: content-collections (#1075)

.prettierignore

@@ -1 +1 @@
-**/.contentlayer
+**/.content-collections

apps/web/.gitignore

@@ -33,8 +33,8 @@ yarn-error.log*
 # vercel
 .vercel
 
-# contentlayer
-.contentlayer
+# content-collections
+.content-collections
 
 # Sentry Auth Token
 .sentryclirc

apps/web/content-collections.ts

@@ -0,0 +1,165 @@
+import { defineCollection, defineConfig } from "@content-collections/core";
+import { compileMDX } from "@content-collections/mdx";
+import readingTime from "reading-time";
+import rehypeAutolinkHeadings from "rehype-autolink-headings";
+import rehypePrettyCode from "rehype-pretty-code";
+import rehypeSlug from "rehype-slug";
+
+const autolinkHeadings = [
+  rehypeAutolinkHeadings,
+  {
+    behavior: "append",
+    headingProperties: {
+      className: "group",
+    },
+    properties: {
+      className: [
+        "no-underline group-hover:after:content-['#'] after:text-muted-foreground/30 after:hover:text-muted-foreground ml-1 after:p-1",
+      ],
+      "aria-hidden": "true",
+    },
+  },
+];
+
+const prettyCode = [
+  rehypePrettyCode,
+  {
+    theme: {
+      dark: "github-dark-dimmed",
+      light: "github-light",
+    },
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    onVisitLine(node: any) {
+      // Prevent lines from collapsing in `display: grid` mode, and
+      // allow empty lines to be copy/pasted
+      if (node.children.length === 0) {
+        node.children = [{ type: "text", value: " " }];
+      }
+    },
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    onVisitHighlightedLine(node: any) {
+      node.properties.className.push("highlighted");
+    },
+    // biome-ignore lint/suspicious/noExplicitAny: <explanation>
+    onVisitHighlightedWord(node: any) {
+      node.properties.className = ["word"];
+    },
+  },
+];
+
+const posts = defineCollection({
+  name: "Posts",
+  directory: "src/content/posts",
+  include: "**/*.mdx",
+  schema: (z) => ({
+    title: z.string(),
+    description: z.string(),
+    image: z.string(),
+    publishedAt: z.coerce.date(),
+    author: z.object({
+      name: z.string(),
+      url: z.string().optional(),
+      avatar: z.string().optional(),
+    }),
+  }),
+  transform: async (document, context) => {
+    const mdx = await compileMDX(context, document, {
+      // @ts-expect-error
+      rehypePlugins: [rehypeSlug, prettyCode, autolinkHeadings],
+    });
+    return {
+      ...document,
+      mdx,
+      slug: document._meta.fileName.replace(/\.mdx$/, ""),
+      readingTime: readingTime(document.content).text,
+    };
+  },
+});
+
+const legals = defineCollection({
+  name: "Legals",
+  directory: "src/content/legal",
+  include: "**/*.mdx",
+  schema: (z) => ({
+    title: z.string(),
+    updatedAt: z.string(),
+  }),
+  transform: async (document, context) => {
+    const mdx = await compileMDX(context, document, {
+      // @ts-expect-error
+      rehypePlugins: [rehypeSlug, prettyCode, autolinkHeadings],
+    });
+    return {
+      ...document,
+      mdx,
+      slug: document._meta.fileName.replace(/\.mdx$/, ""),
+    };
+  },
+});
+
+const faqs = defineCollection({
+  name: "FAQs",
+  directory: "src/content/faq",
+  include: "**/*.mdx",
+  schema: (z) => ({
+    title: z.string(),
+    order: z.number(),
+  }),
+  transform: async (document, context) => {
+    const mdx = await compileMDX(context, document, {
+      // @ts-expect-error
+      rehypePlugins: [rehypeSlug, prettyCode, autolinkHeadings],
+    });
+    return {
+      ...document,
+      mdx,
+      slug: document._meta.fileName.replace(/\.mdx$/, ""),
+    };
+  },
+});
+
+const changelogs = defineCollection({
+  name: "Changelogs",
+  directory: "src/content/changelog",
+  include: "**/*.mdx",
+  schema: (z) => ({
+    title: z.string(),
+    description: z.string(),
+    image: z.string(),
+    publishedAt: z.coerce.date(),
+  }),
+  transform: async (document, context) => {
+    const mdx = await compileMDX(context, document, {
+      // @ts-expect-error
+      rehypePlugins: [rehypeSlug, prettyCode, autolinkHeadings],
+    });
+    return {
+      ...document,
+      mdx,
+      slug: document._meta.fileName.replace(/\.mdx$/, ""),
+      readingTime: readingTime(document.content).text,
+    };
+  },
+});
+
+const unrelateds = defineCollection({
+  name: "Unrelateds",
+  directory: "src/content/unrelated",
+  include: "**/*.mdx",
+  schema: () => ({}),
+  transform: async (document, context) => {
+    const mdx = await compileMDX(context, document, {
+      // @ts-expect-error
+      rehypePlugins: [rehypeSlug, prettyCode, autolinkHeadings],
+    });
+    return {
+      ...document,
+      mdx,
+      slug: document._meta.fileName.replace(/\.mdx$/, ""),
+    };
+  },
+});
+
+export default defineConfig({
+  collections: [posts, legals, faqs, changelogs, unrelateds],
+});

apps/web/next.config.js

@@ -1,4 +1,4 @@
-const { withContentlayer } = require("next-contentlayer");
+const { withContentCollections } = require("@content-collections/next");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -59,7 +59,7 @@ const nextConfig = {
 const { withSentryConfig } = require("@sentry/nextjs");
 
 module.exports = withSentryConfig(
-  withContentlayer(nextConfig),
+  withContentCollections(nextConfig),
   {
     // For all available options, see:
     // https://github.com/getsentry/sentry-webpack-plugin#options

apps/web/package.json

@@ -56,14 +56,12 @@
     "clsx": "2.0.0",
     "cmdk": "1.0.0",
     "cobe": "0.6.3",
-    "contentlayer": "0.3.4",
     "date-fns": "2.30.0",
     "date-fns-tz": "2.0.0",
     "lucide-react": "0.279.0",
     "nanoid": "5.0.7",
     "next": "14.2.15",
     "next-auth": "5.0.0-beta.21",
-    "next-contentlayer": "0.3.4",
     "next-plausible": "3.12.0",
     "next-themes": "0.2.1",
     "nuqs": "1.19.1",
@@ -92,6 +90,9 @@
     "zod": "3.23.8"
   },
   "devDependencies": {
+    "@content-collections/core": "^0.7.2",
+    "@content-collections/mdx": "^0.2.0",
+    "@content-collections/next": "^0.2.3",
     "@headlessui/tailwindcss": "0.2.0",
     "@openstatus/tsconfig": "workspace:*",
     "@types/node": "20.14.8",

apps/web/src/app/(content)/_components/pagination.tsx

@@ -1,4 +1,4 @@
-import type { Changelog } from "contentlayer/generated";
+import type { Changelog } from "content-collections";
 import { ChevronLeft, ChevronRight } from "lucide-react";
 import Link from "next/link";
 

apps/web/src/app/(content)/blog/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { allPosts } from "contentlayer/generated";
+import { allPosts } from "content-collections";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
@@ -28,7 +28,7 @@ export async function generateMetadata({
   if (!post) {
     return;
   }
-  const { title, publishedAt: publishedTime, description, slug, image } = post;
+  const { title, publishedAt, description, slug, image } = post;
 
   return {
     ...defaultMetadata,
@@ -39,7 +39,7 @@ export async function generateMetadata({
       title,
       description,
       type: "article",
-      publishedTime,
+      publishedTime: publishedAt.toISOString(),
       url: `https://www.openstatus.dev/blog/${slug}`,
       images: [
         {

apps/web/src/app/(content)/blog/feed.xml/route.ts

@@ -1,4 +1,4 @@
-import { allPosts } from "contentlayer/generated";
+import { allPosts } from "content-collections";
 import RSS from "rss";
 
 export async function GET() {

apps/web/src/app/(content)/blog/page.tsx

@@ -11,7 +11,7 @@ import {
   PaginationContent,
   PaginationLink,
 } from "@openstatus/ui";
-import { allPosts } from "contentlayer/generated";
+import { allPosts } from "content-collections";
 import { Rss } from "lucide-react";
 import type { Metadata } from "next";
 import Link from "next/link";

apps/web/src/app/(content)/blog/search-params.ts

@@ -1,4 +1,4 @@
-import { allPosts } from "contentlayer/generated";
+import { allPosts } from "content-collections";
 import {
   createParser,
   createSearchParamsCache,

apps/web/src/app/(content)/changelog/[slug]/page.tsx

@@ -1,4 +1,4 @@
-import { allChangelogs } from "contentlayer/generated";
+import { allChangelogs } from "content-collections";
 import type { Metadata } from "next";
 import { notFound } from "next/navigation";
 
@@ -32,7 +32,7 @@ export async function generateMetadata({
     return;
   }
 
-  const { title, publishedAt: publishedTime, description, slug, image } = post;
+  const { title, publishedAt, description, slug, image } = post;
 
   return {
     ...defaultMetadata,
@@ -43,7 +43,7 @@ export async function generateMetadata({
       title,
       description,
       type: "article",
-      publishedTime,
+      publishedTime: publishedAt.toISOString(),
       url: `https://www.openstatus.dev/changelog/${slug}`,
       images: [
         {

apps/web/src/app/(content)/changelog/feed.xml/route.ts

@@ -1,4 +1,4 @@
-import { allChangelogs } from "contentlayer/generated";
+import { allChangelogs } from "content-collections";
 import RSS from "rss";
 
 export async function GET() {

apps/web/src/app/(content)/changelog/page.tsx

@@ -12,7 +12,7 @@ import {
   PaginationContent,
   PaginationLink,
 } from "@openstatus/ui";
-import { allChangelogs } from "contentlayer/generated";
+import { allChangelogs } from "content-collections";
 import { Rss } from "lucide-react";
 import type { Metadata } from "next";
 import {
@@ -70,7 +70,7 @@ export default function ChangelogClient({
             title={changelog.title}
             href={`./changelog/${changelog.slug}`}
           >
-            <Mdx code={changelog.body.code} />
+            <Mdx code={changelog.mdx} />
           </Timeline.Article>
         ))}
         <div className="grid grid-cols-1 gap-4 md:grid-cols-5 md:gap-6">

apps/web/src/app/(content)/changelog/search-params.ts

@@ -1,4 +1,4 @@
-import { allChangelogs } from "contentlayer/generated";
+import { allChangelogs } from "content-collections";
 import {
   createParser,
   createSearchParamsCache,

apps/web/src/app/(content)/features/monitoring/page.tsx

@@ -11,7 +11,7 @@ import { marketingProductPagesConfig } from "@/config/pages";
 import { type Region, flyRegions } from "@openstatus/db/src/schema/constants";
 import { Button } from "@openstatus/ui/src/components/button";
 import { Skeleton } from "@openstatus/ui/src/components/skeleton";
-import { allUnrelateds } from "contentlayer/generated";
+import { allUnrelateds } from "content-collections";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { Suspense } from "react";
@@ -128,7 +128,7 @@ export default function FeaturePage() {
         component={
           code ? (
             <Mdx
-              code={code.body.code}
+              code={code.mdx}
               className="max-w-none prose-pre:overflow-hidden"
             />
           ) : (

apps/web/src/app/about/page.tsx

@@ -1,4 +1,4 @@
-import { allUnrelateds } from "contentlayer/generated";
+import { allUnrelateds } from "content-collections";
 
 import { Separator } from "@openstatus/ui/src/components/separator";
 
@@ -37,7 +37,7 @@ export default function AboutPage() {
         <Shell className="mx-auto w-auto shadow sm:px-8 sm:py-8 md:px-12 md:py-12 dark:border-card-foreground/30">
           {story ? (
             <Mdx
-              code={story.body.code}
+              code={story.mdx}
               className="sm:prose-lg mx-auto prose-li:my-0"
             />
           ) : null}

apps/web/src/app/api/trpc/edge/[trpc]/route.ts

@@ -11,7 +11,6 @@ const handler = (req: NextRequest) =>
     endpoint: "/api/trpc/edge",
     router: edgeRouter,
     req: req,
-    // @ts-expect-error
     createContext: () => createTRPCContext({ req }),
     onError: ({ error }) => {
       console.log("Error in tRPC handler (edge)");

apps/web/src/app/api/trpc/lambda/[trpc]/route.ts

@@ -12,7 +12,6 @@ const handler = (req: NextRequest) =>
     endpoint: "/api/trpc/lambda",
     router: lambdaRouter,
     req: req,
-    // @ts-expect-error
     createContext: () => createTRPCContext({ req }),
     onError: ({ error }) => {
       console.log("Error in tRPC handler (lambda)");