Remove contentlayer

config/contentlayer/mdx.ts → config/mdx/index.ts

@@ -1,4 +1,4 @@
-import type { MDXOptions } from 'contentlayer/core';
+import type { SerializeOptions } from 'next-mdx-remote/dist/types';
 import { rehypeAccessibleEmojis } from 'rehype-accessible-emojis';
 import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 import rehypeSlug from 'rehype-slug';
@@ -7,13 +7,11 @@ import remarkSqueezeParagraphs from 'remark-squeeze-paragraphs';
 import remarkUnwrapImages from 'remark-unwrap-images';
 
 import { prettyCode } from './rehype/code';
-import imageMetadata from './rehype/image-metadata';
 import { toc } from './rehype/toc';
 
-const mdx: MDXOptions = {
+const mdx: SerializeOptions['mdxOptions'] = {
   remarkPlugins: [remarkGfm, remarkSqueezeParagraphs, remarkUnwrapImages],
   rehypePlugins: [
-    imageMetadata,
     rehypeSlug,
     rehypeAccessibleEmojis,
     // @ts-expect-error idk

config/contentlayer/rehype/code.ts → config/mdx/rehype/code.ts

@@ -12,10 +12,7 @@ const commentsCustomColor = (theme: 'light' | 'dark') => ({
 
 const getThemeJson = (theme: 'light' | 'dark'): JSON | string => {
   try {
-    const json = readFileSync(
-      `./config/contentlayer/themes/${theme}.json`,
-      'utf-8',
-    );
+    const json = readFileSync(`./config/mdx/themes/${theme}.json`, 'utf-8');
     const parsed = JSON.parse(json);
     return {
       ...parsed,

config/next/headers.js → config/next/headers.mjs

@@ -44,7 +44,7 @@ const securityHeaders = [
   },
 ];
 
-module.exports = [
+const headers = [
   {
     source: '/(.*)',
     headers: securityHeaders,
@@ -59,3 +59,5 @@ module.exports = [
     ],
   },
 ];
+
+export default headers;

config/next/redirects.js → config/next/redirects.mjs

@@ -6,7 +6,7 @@ const buildRedirect = (source, destination, permanent = false) => {
   };
 };
 
-module.exports = [
+const redirects = [
   /* Blog posts redirections */
   buildRedirect(
     '/blog/md-iconography-guidelines',
@@ -51,3 +51,5 @@ module.exports = [
     'https://umami.jahir.dev/share/uEOUfeOMI5kda1wn/jahir.dev',
   ),
 ];
+
+export default redirects;

next.config.js → next.config.mjs

@@ -1,14 +1,14 @@
 /* eslint-disable @typescript-eslint/no-var-requires */
-// NOTE
-// Do not change this file to .mjs
-// https://github.com/contentlayerdev/contentlayer/issues/313#issuecomment-1305424923
-const path = require('path');
+import path from 'path';
+import { fileURLToPath } from 'url';
 
-const million = require('million/compiler');
-const { withContentlayer } = require('next-contentlayer');
+import withPlaiceholder from '@plaiceholder/next';
+import million from 'million/compiler';
 
-const appHeaders = require('./config/next/headers');
-const redirects = require('./config/next/redirects');
+import appHeaders from './config/next/headers.mjs';
+import redirects from './config/next/redirects.mjs';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
 
 /**
  * @type {import('next').NextConfig}
@@ -49,6 +49,7 @@ const defaultNextConfig = {
     ],
     dangerouslyAllowSVG: true,
     contentSecurityPolicy: "default-src 'self'; script-src 'none'; sandbox;",
+    formats: ['image/avif', 'image/webp'],
   },
   headers: () => appHeaders,
   redirects: () => redirects,
@@ -59,7 +60,5 @@ const millionConfig = {
   auto: { rsc: true },
 };
 
-module.exports = million.next(
-  withContentlayer(defaultNextConfig),
-  millionConfig,
-);
+const config = million.next(withPlaiceholder(defaultNextConfig), millionConfig);
+export default config;

package.json

@@ -6,37 +6,38 @@
     "start": "next start",
     "lint": "next lint",
     "setup": "node ./scripts/setup.mjs",
-    "clean": "rimraf .next && rimraf dist && rimraf out && rimraf .contentlayer",
+    "clean": "rimraf .next && rimraf dist && rimraf out",
     "update-deps": "npx --yes npm-check-updates -u && yarn",
     "download-themes": "node ./scripts/download-themes.mjs",
-    "prune-code": "ts-prune -i '.next|.contentlayer|src/app'",
+    "prune-code": "ts-prune -i '.next|src/app'",
     "postinstall": "is-ci || husky install"
   },
   "dependencies": {
     "canvas-confetti": "^1.9.2",
     "medium-zoom": "^1.1.0",
-    "next": "^14.0.4",
+    "next": "^14.0.5-canary.56",
     "next-themes": "0.2.1",
     "react": "^18.2.0",
     "react-compare-image": "^3.4.0",
     "react-dom": "^18.2.0",
+    "server-only": "^0.0.1",
     "swr": "^2.2.4"
   },
   "devDependencies": {
     "@commitlint/cli": "^18.4.4",
     "@commitlint/config-conventional": "^18.4.4",
     "@jsdevtools/rehype-toc": "^3.0.2",
+    "@plaiceholder/next": "^3.0.0",
     "@planetscale/database": "^1.13.0",
     "@types/canvas-confetti": "^1.6.4",
-    "@types/node": "^20.10.8",
+    "@types/node": "^20.11.0",
     "@types/react": "^18.2.47",
     "@types/react-dom": "^18.2.18",
     "@types/xml": "^1.0.11",
     "@typescript-eslint/eslint-plugin": "^6.18.1",
     "@typescript-eslint/parser": "^6.18.1",
     "autoprefixer": "^10.4.16",
     "colord": "^2.9.3",
-    "contentlayer": "^0.3.4",
     "cssnano": "^6.0.3",
     "dotenv": "^16.3.1",
     "eslint": "^8.56.0",
@@ -48,10 +49,10 @@
     "kysely": "^0.27.2",
     "kysely-planetscale": "^1.4.0",
     "million": "^2.6.4",
-    "next-contentlayer": "^0.3.4",
+    "next-mdx-remote": "^4.4.1",
     "plaiceholder": "^3.0.0",
     "postcss": "^8.4.33",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.1",
     "react-twc": "^1.2.2",
     "reading-time": "^1.5.0",
     "rehype-accessible-emojis": "^0.3.2",
@@ -64,7 +65,7 @@
     "rimraf": "^5.0.5",
     "sass": "^1.69.7",
     "sharp": "^0.32.6",
-    "shikiji": "^0.9.18",
+    "shikiji": "^0.9.19",
     "tailwind-merge": "^2.2.0",
     "tailwindcss": "^3.4.1",
     "tailwindcss-hocus": "^0.0.7",
@@ -79,10 +80,5 @@
     "trailingComma": "all",
     "semi": true
   },
-  "packageManager": "[email protected]",
-  "overrides": {
-    "next-contentlayer": {
-      "next": "$next"
-    }
-  }
+  "packageManager": "[email protected]"
 }

scripts/download-themes.mjs

@@ -8,9 +8,7 @@ const darkThemeUrl =
   'https://raw.githubusercontent.com/fabian-hiller/vscode-pace-theme/main/themes/dark.json';
 
 const downloadThemeFile = async (light) => {
-  const filePath = `./config/contentlayer/themes/${
-    light ? 'light' : 'dark'
-  }.json`;
+  const filePath = `./config/mdx/themes/${light ? 'light' : 'dark'}.json`;
   try {
     if (existsSync(filePath)) return;
     const response = await fetch(light ? lightThemeUrl : darkThemeUrl);