🐛 (blog) Migrating to @next/mdx

baptisteArno · Oct 14, 2024 · 4c0d3fb · 4c0d3fb
1 parent bf09ce0
commit 4c0d3fb
Show file tree

Hide file tree

Showing 45 changed files with 1,165 additions and 587 deletions.
diff --git a/apps/landing-page/next.config.mjs b/apps/landing-page/next.config.mjs
@@ -1,3 +1,4 @@
+import createMDX from "@next/mdx";
 import { configureRuntimeEnv } from "next-runtime-env/build/configure.js";
 
 configureRuntimeEnv();
@@ -7,7 +8,8 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  transpilePackages: ["utils", "models"],
+  transpilePackages: ["@typebot.io/lib"],
+  pageExtensions: ["mdx", "ts", "tsx"],
   async redirects() {
     return [
       {
@@ -38,4 +40,6 @@ const nextConfig = {
   },
 };
 
-export default nextConfig;
+const withMDX = createMDX({});
+
+export default withMDX(nextConfig);
diff --git a/apps/landing-page/package.json b/apps/landing-page/package.json
@@ -15,17 +15,21 @@
     "@chakra-ui/react": "2.8.2",
     "@emotion/react": "11.11.4",
     "@emotion/styled": "11.11.5",
+    "@mdx-js/loader": "3.0.1",
+    "@mdx-js/react": "3.0.1",
+    "@next/mdx": "14.2.15",
     "@typebot.io/billing": "workspace:*",
+    "@typebot.io/env": "workspace:*",
     "@typebot.io/lib": "workspace:*",
     "@typebot.io/nextjs": "workspace:*",
     "@typebot.io/prisma": "workspace:*",
     "@typebot.io/typebot": "workspace:*",
-    "@typebot.io/env": "workspace:*",
+    "@types/mdx": "2.0.13",
     "aos": "2.3.4",
+    "fast-glob": "^3.3.2",
     "focus-visible": "5.2.0",
     "framer-motion": "11.1.7",
     "next": "14.2.13",
-    "next-mdx-remote": "4.4.1",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-tweet": "3.2.1",

diff --git a/apps/landing-page/src/app/blog/[slug]/Post.tsx b/apps/landing-page/src/app/blog/[slug]/Post.tsx
diff --git a/apps/landing-page/src/app/blog/[slug]/page.tsx b/apps/landing-page/src/app/blog/[slug]/page.tsx
diff --git a/...page/content/add-chatbot-to-wordpress.mdx → ...pp/blog/add-chatbot-to-wordpress/page.mdx b/...page/content/add-chatbot-to-wordpress.mdx → ...pp/blog/add-chatbot-to-wordpress/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'How to Add Chatbot in WordPress: Quick and Easy Way'
-description: 'Learn how to add a chatbot to your WordPress site using Typebot.'
-publishedAt: '2024-06-20'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "How to Add Chatbot in WordPress: Quick and Easy Way",
+  description:
+    "Learn how to add a chatbot to your WordPress site using Typebot",
+  postedAt: new Date("2024-06-20"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 Imagine having a virtual assistant that can engage with your website visitors 24/7. It could answer their questions, guide them through your products or services, and even capture leads. That's the power of chatbots. Adding one to your WordPress site is now simpler than ever.
 

diff --git a/...ing-page/content/ai-open-source-tools.mdx → ...rc/app/blog/ai-open-source-tools/page.mdx b/...ing-page/content/ai-open-source-tools.mdx → ...rc/app/blog/ai-open-source-tools/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Top 10 AI Open Source Tools for Your Business'
-summary: 'Discover top AI open source tools to boost your business. Learn how these innovative solutions can enhance operations, save costs, and drive growth. Explore now!'
-publishedAt: '2024-09-05'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Top 10 AI Open Source Tools for Your Business",
+  description:
+    "Disover top AI open source tools to boost your business. Learn how these innovative solutions can enhance operations, save costs, and drive growth. Explore now!",
+  postedAt: new Date("2024-09-05"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 **[Open-source](https://typebot.io/blog/open-source-chatbots) AI tools** offer powerful solutions without breaking the bank or sacrificing data control. These tools are changing how businesses innovate. From collaborative AI agents to local language models, this article explores the top 10 AI open source tools that can enhance your operations. Learn how these technologies are making new opportunities available for businesses of all sizes.
 

diff --git a/...ding-page/content/benefits-ai-chatbot.mdx → ...src/app/blog/benefits-ai-chatbot/page.mdx b/...ding-page/content/benefits-ai-chatbot.mdx → ...src/app/blog/benefits-ai-chatbot/page.mdx
@@ -1,8 +1,16 @@
----
-title: '16 Benefits of AI Chatbots that will Convince Skeptics'
-summary: 'Discover 16 game-changing benefits of AI chatbots that boost customer service, drive sales, and cut costs. Learn how to implement this powerful tool for your business success.'
-publishedAt: '2024-07-31'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "16 Benefits of AI Chatbots that will Convince Skeptics",
+  description:
+    "Discover 16 game-changing benefits of AI chatbots that boost customer service, drive sales, and cut costs. Learn how to implement this powerful tool for your business success.",
+  postedAt: new Date("2024-07-31"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 AI chatbots offer **round-the-clock customer service**, speak multiple languages, and learn from every interaction. These digital assistants don't just cut response times—they also help boost sales.
 

diff --git a/...ge/content/best-chatbot-for-wordpress.mdx → .../blog/best-chatbot-for-wordpress/page.mdx b/...ge/content/best-chatbot-for-wordpress.mdx → .../blog/best-chatbot-for-wordpress/page.mdx
@@ -1,8 +1,16 @@
----
-title: 'Top 10 Best Chatbot for Your Wordpress Website in 2024'
-summary: 'Discover the top 10 WordPress chatbot plugins to boost customer service, generate leads, and increase engagement. Find the best fit for your website'
-publishedAt: '2024-05-02'
----
+import Post from "@/features/blog/components/Post";
+import { generateMetadata } from "@/features/blog/helpers";
+
+export const post = {
+  title: "Top 10 Best Chatbot for Your Wordpress Website in 2024",
+  description:
+    "Discover the top 10 WordPress chatbot plugins to boost customer service, generate leads, and increase engagement. Find the best fit for your website",
+  postedAt: new Date("2024-05-02"),
+};
+
+export const metadata = generateMetadata(post);
+
+export default (props) => <Post post={post} {...props} />;
 
 **Seamless communication with customers is crucial for business success**. As more interactions move online, chatbots have emerged as a game-changer, enabling 24/7 support and personalized engagement.