From 955b328e8a127daa855155c2397b6c8529a31532 Mon Sep 17 00:00:00 2001
From: mickasmt <sermont.mickael@hotmail.fr>
Date: Fri, 3 May 2024 00:04:13 +0200
Subject: [PATCH] refactor: update contentlayer (next 14 supported)

---
 README.md                                     |  2 --
 components/content/mdx-components.tsx         |  2 +-
 ...tlayer.config.js => contentlayer.config.ts | 19 ++++++++------
 next.config.js                                | 25 +++++++------------
 package.json                                  |  2 +-
 tsconfig.json                                 |  3 ++-
 6 files changed, 24 insertions(+), 29 deletions(-)
 rename contentlayer.config.js => contentlayer.config.ts (92%)

diff --git a/README.md b/README.md
index 64cacce6..8f5729cb 100644
--- a/README.md
+++ b/README.md
@@ -64,8 +64,6 @@ pnpm run dev
 >
 > After upgrade Auth.js to v5: `NEXTAUTH_URL` has removed from `.env.example`.
 
-> [!CAUTION]
-> Errors while the build if you update `remark-gfm` package.
 
 ## Roadmap
 
diff --git a/components/content/mdx-components.tsx b/components/content/mdx-components.tsx
index 57588e77..ca448730 100644
--- a/components/content/mdx-components.tsx
+++ b/components/content/mdx-components.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import NextImage, { ImageProps } from "next/image";
 import Link from "next/link";
-import { useMDXComponent } from "next-contentlayer/hooks";
+import { useMDXComponent } from "next-contentlayer2/hooks";
 
 import { cn } from "@/lib/utils";
 import { MdxCard } from "@/components/content/mdx-card";
diff --git a/contentlayer.config.js b/contentlayer.config.ts
similarity index 92%
rename from contentlayer.config.js
rename to contentlayer.config.ts
index 6fc80ac1..795374f6 100644
--- a/contentlayer.config.js
+++ b/contentlayer.config.ts
@@ -1,12 +1,15 @@
-import { defineDocumentType, makeSource } from "contentlayer/source-files";
+import {
+  ComputedFields,
+  defineDocumentType,
+  makeSource,
+} from "contentlayer2/source-files";
 import rehypeAutolinkHeadings from "rehype-autolink-headings";
 import rehypePrettyCode from "rehype-pretty-code";
 import rehypeSlug from "rehype-slug";
 import remarkGfm from "remark-gfm";
 import { visit } from "unist-util-visit";
 
-/** @type {import('contentlayer/source-files').ComputedFields} */
-const computedFields = {
+const defaultComputedFields: ComputedFields = {
   slug: {
     type: "string",
     resolve: (doc) => `/${doc._raw.flattenedPath}`,
@@ -34,7 +37,7 @@ export const Doc = defineDocumentType(() => ({
       default: true,
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export const Guide = defineDocumentType(() => ({
@@ -62,7 +65,7 @@ export const Guide = defineDocumentType(() => ({
       default: false,
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export const Post = defineDocumentType(() => ({
@@ -99,7 +102,7 @@ export const Post = defineDocumentType(() => ({
       required: true,
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export const Author = defineDocumentType(() => ({
@@ -123,7 +126,7 @@ export const Author = defineDocumentType(() => ({
       required: true,
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export const Page = defineDocumentType(() => ({
@@ -139,7 +142,7 @@ export const Page = defineDocumentType(() => ({
       type: "string",
     },
   },
-  computedFields,
+  computedFields: defaultComputedFields,
 }));
 
 export default makeSource({
diff --git a/next.config.js b/next.config.js
index a2d168b7..89f3e206 100644
--- a/next.config.js
+++ b/next.config.js
@@ -1,7 +1,4 @@
-// FIX: I changed .mjs to .js 
-// More info: https://github.com/shadcn-ui/taxonomy/issues/100#issuecomment-1605867844
-
-const { createContentlayerPlugin } = require("next-contentlayer");
+const { withContentlayer } = require("next-contentlayer2");
 
 import("./env.mjs");
 
@@ -12,26 +9,22 @@ const nextConfig = {
   images: {
     remotePatterns: [
       {
-        protocol: 'https',
-        hostname: 'avatars.githubusercontent.com',
+        protocol: "https",
+        hostname: "avatars.githubusercontent.com",
       },
       {
-        protocol: 'https',
-        hostname: 'lh3.googleusercontent.com',
+        protocol: "https",
+        hostname: "lh3.googleusercontent.com",
       },
       {
-        protocol: 'https',
-        hostname: 'randomuser.me'
-      }
+        protocol: "https",
+        hostname: "randomuser.me",
+      },
     ],
   },
   experimental: {
     serverComponentsExternalPackages: ["@prisma/client"],
   },
-}
-
-const withContentlayer = createContentlayerPlugin({
-  // Additional Contentlayer config options
-});
+};
 
 module.exports = withContentlayer(nextConfig);
diff --git a/package.json b/package.json
index 93d668d3..59fc66be 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "saas-starter",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "private": true,
   "author": {
     "name": "mickasmt",
diff --git a/tsconfig.json b/tsconfig.json
index e9ae1588..00e65b1e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -31,7 +31,8 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
-    ".contentlayer/generated"
+    ".contentlayer/generated",
+    "contentlayer.config.ts"
   ],
   "exclude": ["node_modules"]
 }