use contentlayer instead of next-mdx-remote (railwayapp#215)

* use contentlayer instead of next-mdx-remote

* pesky package removal

* yarn.lock again

Author: nebulatgs

.gitignore

@@ -39,3 +39,4 @@ yarn-error.log*
 # dynamically generated files
 public/sitemap*.xml
 public/robots.txt
+.contentlayer

contentlayer.config.ts

@@ -0,0 +1,29 @@
+import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import remarkAutoLinkHeadings from "remark-autolink-headings";
+import remarkGfm from "remark-gfm";
+import remarkSlug from "remark-slug";
+
+const Page = defineDocumentType(() => ({
+  name: "Page",
+  filePathPattern: `**/*.md`,
+  contentType: "mdx",
+  fields: {
+    title: {
+      type: "string",
+      description: "The title of the page",
+      required: true,
+    },
+  },
+  computedFields: {
+    url: {
+      type: "string",
+      resolve: doc => `/${doc._raw.flattenedPath}`,
+    },
+  },
+}));
+
+export default makeSource({
+  contentDirPath: "src/docs",
+  documentTypes: [Page],
+  mdx: { remarkPlugins: [remarkSlug, remarkAutoLinkHeadings, remarkGfm] },
+});

next.config.js

@@ -1,5 +1,7 @@
+const { withContentlayer } = require("next-contentlayer");
+
 /** @type {import('next').NextConfig} */
-const nextConfig = {
+const nextConfig = withContentlayer({
   reactStrictMode: true,
   images: {
     domains: [
@@ -18,6 +20,6 @@ const nextConfig = {
       },
     ];
   },
-};
+});
 
 module.exports = nextConfig;

package.json

@@ -20,14 +20,14 @@
     "@prisma/client": "4.10.1",
     "@radix-ui/react-scroll-area": "^1.0.2",
     "@tailwindcss/typography": "^0.5.9",
+    "contentlayer": "^0.3.0",
     "copy-to-clipboard": "^3.3.1",
     "dayjs": "^1.10.4",
     "fathom-client": "^3.1.0",
     "fuse.js": "^6.4.6",
-    "gray-matter": "^4.0.3",
     "nanostores": "^0.7.4",
     "next": "13.2.1",
-    "next-mdx-remote": "^4.3.0",
+    "next-contentlayer": "^0.3.0",
     "next-seo": "^5.15.0",
     "next-themes": "^0.2.1",
     "prismjs": "^1.29.0",

src/components/Sidebar.tsx

@@ -49,7 +49,7 @@ const SidebarContent: React.FC = () => {
   } = useRouter();
 
   const prefixedSlug = useMemo(
-    () => (slug ? `/${(slug as string[])?.join("/")}` : undefined),
+    () => (slug ? `/${(slug as string[] | undefined)?.join("/")}` : undefined),
     [slug],
   );
 

src/layouts/DocsLayout.tsx

@@ -28,7 +28,7 @@ export const DocsLayout: React.FC<PropsWithChildren<Props>> = ({
   } = useRouter();
 
   const prefixedSlug = useMemo(
-    () => `/${(slug as string[]).join("/")}`,
+    () => `/${(slug as string[] | undefined)?.join("/")}`,
     [slug],
   );
   const gitHubFileLink = useMemo(

src/pages/[...slug].tsx

@@ -1,19 +1,11 @@
 import { Banner, PriorityBoardingBanner } from "@/components/Banner";
 import { CodeBlock } from "@/components/CodeBlock";
 import Layout from "@/mdxLayouts/index";
-import { FrontMatter } from "@/types";
-import { postFilePaths, POSTS_PATH } from "@/utils/mdxUtils";
-import fs from "fs";
-import matter from "gray-matter";
-import { GetStaticProps } from "next";
-import { MDXRemote, MDXRemoteProps } from "next-mdx-remote";
-import { serialize } from "next-mdx-remote/serialize";
+import { allPages, Page } from "contentlayer/generated";
+import { GetStaticPaths, GetStaticProps } from "next";
+import { useMDXComponent } from "next-contentlayer/hooks";
 import { default as NextImage, ImageProps } from "next/legacy/image";
 import Link from "next/link";
-import path from "path";
-import remarkAutolinkHeadings from "remark-autolink-headings";
-import remarkGfm from "remark-gfm";
-import remarkSlug from "remark-slug";
 
 const Image = (props: ImageProps) => (
   <a
@@ -34,46 +26,38 @@ const components = {
   PriorityBoardingBanner,
 };
 
-export default function PostPage({
-  source,
-  frontMatter,
-}: {
-  source: Omit<MDXRemoteProps, "components">;
-  frontMatter: FrontMatter;
-}) {
+export default function PostPage({ page }: { page: Page }) {
+  const MDXContent = useMDXComponent(page.body.code);
+
   return (
-    <Layout frontMatter={frontMatter}>
-      <MDXRemote {...source} components={components} />
+    <Layout
+      frontMatter={{
+        title: page.title,
+      }}
+    >
+      <MDXContent components={components} />
     </Layout>
   );
 }
 
 export const getStaticProps: GetStaticProps = async ({ params }) => {
-  const postFilePath = path.join(
-    POSTS_PATH,
-    `${(params?.slug as string[]).join("/")}.md`,
+  const page = allPages.find(
+    page =>
+      page._raw.flattenedPath ===
+      (params?.slug as string[] | undefined)?.join("/"),
   );
-  const source = fs.readFileSync(postFilePath);
-
-  const { content, data } = matter(source);
 
-  const mdxSource = await serialize(content, {
-    // Optionally pass remark/rehype plugins
-    mdxOptions: {
-      remarkPlugins: [remarkAutolinkHeadings, remarkSlug, remarkGfm],
-      rehypePlugins: [],
-    },
-    scope: data,
-  });
   return {
     props: {
-      source: mdxSource,
-      frontMatter: data,
+      page,
     },
   };
 };
 
-export const getStaticPaths = async () => {
-  const paths = postFilePaths.map(path => path.replace(/\.mdx?$/, ""));
-  return { paths, fallback: false };
+export const getStaticPaths: GetStaticPaths = async () => {
+  const paths = allPages.map(page => page.url);
+  return {
+    paths,
+    fallback: false,
+  };
 };

src/types.ts

@@ -1,7 +1,5 @@
 export interface FrontMatter {
   title: string;
-  id: string;
-  wordCount: number;
 }
 
 export type ISidebarContent = ISidebarSection[];

tsconfig.json

@@ -16,7 +16,8 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@/*": ["./src/*"]
+      "@/*": ["./src/*"],
+      "contentlayer/generated": ["./.contentlayer/generated"]
     }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],