From 4c0d3fb7cb941d21b50ee22c9a52a34c4cf6c5f1 Mon Sep 17 00:00:00 2001 From: Baptiste Arnaud Date: Mon, 14 Oct 2024 16:59:21 +0200 Subject: [PATCH] :bug: (blog) Migrating to @next/mdx --- apps/landing-page/next.config.mjs | 8 +- apps/landing-page/package.json | 8 +- .../landing-page/src/app/blog/[slug]/Post.tsx | 191 ---------- .../landing-page/src/app/blog/[slug]/page.tsx | 67 ---- .../blog/add-chatbot-to-wordpress/page.mdx} | 18 +- .../app/blog/ai-open-source-tools/page.mdx} | 18 +- .../app/blog/benefits-ai-chatbot/page.mdx} | 18 +- .../blog/best-chatbot-for-wordpress/page.mdx} | 18 +- .../app/blog/best-crm-for-shopify/page.mdx} | 18 +- .../best-marketing-chatgpt-prompts/page.mdx} | 18 +- .../app/blog/best-whatsapp-chatbot/page.mdx} | 18 +- .../app/blog/chatbot-best-practices/page.mdx} | 18 +- .../blog/chatbot-com-alternatives/page.mdx} | 18 +- .../blog/chatbot-script-examples/page.mdx} | 18 +- .../app/blog/chatfuel-alternatives/page.mdx} | 18 +- .../blog/create-whatsapp-chatbot/page.mdx} | 18 +- .../page.mdx} | 18 +- .../app/blog/ecommerce-chatbot/page.mdx} | 18 +- .../app/blog/example/page.mdx} | 15 +- .../app/blog/landbot-alternative/page.mdx} | 18 +- .../blog/lead-generation-chatbot/page.mdx} | 18 +- .../app/blog/manychat-alternatives/page.mdx} | 18 +- .../app/blog/open-source-chatbots/page.mdx} | 18 +- apps/landing-page/src/app/blog/page.tsx | 33 +- .../app/blog/react-chatbot/page.mdx} | 324 ++++++++-------- .../train-chatbot-on-your-own-data/page.mdx} | 18 +- .../blog/typebot-is-now-fair-source/page.mdx} | 18 +- .../blog/upsell-using-ai-chatbot/page.mdx} | 30 +- .../app/blog/webflow-chatbot/page.mdx} | 18 +- .../blog/webflow-popup-contact-form/page.mdx} | 26 +- .../blog/whatsapp-business-benefits/page.mdx} | 18 +- .../[slug] => features/blog/assets}/tweet.css | 0 .../src/features/blog/components/Header.tsx | 40 ++ .../src/features/blog/components/Post.tsx | 48 +++ .../blog/components}/Posts.tsx | 24 +- .../blog/components}/Table.tsx | 0 .../blog/components}/Tweet.tsx | 2 +- .../blog/components/chakraClientComponents.ts | 5 + .../landing-page/src/features/blog/helpers.ts | 26 ++ apps/landing-page/src/features/blog/types.ts | 10 + apps/landing-page/src/mdx-components.tsx | 135 +++++++ bun.lockb | Bin 1067936 -> 1084120 bytes packages/embeds/nextjs/tsup.config.ts | 5 +- packages/embeds/react/src/Standard.tsx | 2 + yarn.lock | 357 +++++++++++++++++- 45 files changed, 1165 insertions(+), 587 deletions(-) delete mode 100644 apps/landing-page/src/app/blog/[slug]/Post.tsx delete mode 100644 apps/landing-page/src/app/blog/[slug]/page.tsx rename apps/landing-page/{content/add-chatbot-to-wordpress.mdx => src/app/blog/add-chatbot-to-wordpress/page.mdx} (96%) rename apps/landing-page/{content/ai-open-source-tools.mdx => src/app/blog/ai-open-source-tools/page.mdx} (96%) rename apps/landing-page/{content/benefits-ai-chatbot.mdx => src/app/blog/benefits-ai-chatbot/page.mdx} (94%) rename apps/landing-page/{content/best-chatbot-for-wordpress.mdx => src/app/blog/best-chatbot-for-wordpress/page.mdx} (98%) rename apps/landing-page/{content/best-crm-for-shopify.mdx => src/app/blog/best-crm-for-shopify/page.mdx} (96%) rename apps/landing-page/{content/best-marketing-chatgpt-prompts.mdx => src/app/blog/best-marketing-chatgpt-prompts/page.mdx} (97%) rename apps/landing-page/{content/best-whatsapp-chatbot.mdx => src/app/blog/best-whatsapp-chatbot/page.mdx} (96%) rename apps/landing-page/{content/chatbot-best-practices.mdx => src/app/blog/chatbot-best-practices/page.mdx} (97%) rename apps/landing-page/{content/chatbot-com-alternatives.mdx => src/app/blog/chatbot-com-alternatives/page.mdx} (96%) rename apps/landing-page/{content/chatbot-script-examples.mdx => src/app/blog/chatbot-script-examples/page.mdx} (97%) rename apps/landing-page/{content/chatfuel-alternatives.mdx => src/app/blog/chatfuel-alternatives/page.mdx} (95%) rename apps/landing-page/{content/create-whatsapp-chatbot.mdx => src/app/blog/create-whatsapp-chatbot/page.mdx} (97%) rename apps/landing-page/{content/customer-success-manager-job-description.mdx => src/app/blog/customer-success-manager-job-description/page.mdx} (97%) rename apps/landing-page/{content/ecommerce-chatbot.mdx => src/app/blog/ecommerce-chatbot/page.mdx} (97%) rename apps/landing-page/{content/example.mdx => src/app/blog/example/page.mdx} (74%) rename apps/landing-page/{content/landbot-alternative.mdx => src/app/blog/landbot-alternative/page.mdx} (93%) rename apps/landing-page/{content/lead-generation-chatbot.mdx => src/app/blog/lead-generation-chatbot/page.mdx} (96%) rename apps/landing-page/{content/manychat-alternatives.mdx => src/app/blog/manychat-alternatives/page.mdx} (95%) rename apps/landing-page/{content/open-source-chatbots.mdx => src/app/blog/open-source-chatbots/page.mdx} (96%) rename apps/landing-page/{content/react-chatbot.mdx => src/app/blog/react-chatbot/page.mdx} (74%) rename apps/landing-page/{content/train-chatbot-on-your-own-data.mdx => src/app/blog/train-chatbot-on-your-own-data/page.mdx} (96%) rename apps/landing-page/{content/typebot-is-now-fair-source.mdx => src/app/blog/typebot-is-now-fair-source/page.mdx} (91%) rename apps/landing-page/{content/upsell-using-ai-chatbot.mdx => src/app/blog/upsell-using-ai-chatbot/page.mdx} (96%) rename apps/landing-page/{content/webflow-chatbot.mdx => src/app/blog/webflow-chatbot/page.mdx} (95%) rename apps/landing-page/{content/webflow-popup-contact-form.mdx => src/app/blog/webflow-popup-contact-form/page.mdx} (94%) rename apps/landing-page/{content/whatsapp-business-benefits.mdx => src/app/blog/whatsapp-business-benefits/page.mdx} (95%) rename apps/landing-page/src/{app/blog/[slug] => features/blog/assets}/tweet.css (100%) create mode 100644 apps/landing-page/src/features/blog/components/Header.tsx create mode 100644 apps/landing-page/src/features/blog/components/Post.tsx rename apps/landing-page/src/{app/blog => features/blog/components}/Posts.tsx (66%) rename apps/landing-page/src/{app/blog/[slug] => features/blog/components}/Table.tsx (100%) rename apps/landing-page/src/{app/blog/[slug] => features/blog/components}/Tweet.tsx (96%) create mode 100644 apps/landing-page/src/features/blog/components/chakraClientComponents.ts create mode 100644 apps/landing-page/src/features/blog/helpers.ts create mode 100644 apps/landing-page/src/features/blog/types.ts create mode 100644 apps/landing-page/src/mdx-components.tsx diff --git a/apps/landing-page/next.config.mjs b/apps/landing-page/next.config.mjs index e5b77c0deb..58f34ff08e 100644 --- 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 index 75bee9025e..8df063bc6f 100644 --- 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 deleted file mode 100644 index 155812fa7f..0000000000 --- a/apps/landing-page/src/app/blog/[slug]/Post.tsx +++ /dev/null @@ -1,191 +0,0 @@ -/* eslint-disable jsx-a11y/alt-text */ -"use client"; - -import { EndCta } from "@/components/Homepage/EndCta"; -import { Link } from "@chakra-ui/next-js"; -import { - Alert, - AlertIcon, - AlertTitle, - Heading, - Stack, - Text, -} from "@chakra-ui/react"; -import { Standard } from "@typebot.io/nextjs"; -import { MDXRemote, type MDXRemoteSerializeResult } from "next-mdx-remote"; -import Image from "next/image"; -import { highlight } from "sugar-high"; -import { Table } from "./Table"; -import { Tweet } from "./Tweet"; - -type Props = { - metadata: { - title: string; - publishedAt: string; - }; - mdxSource: MDXRemoteSerializeResult; -}; - -export const Post = ({ metadata, mdxSource }: Props) => ( - - - {metadata.title} - {formatDate(metadata.publishedAt)} - - - , - h2: (props) => , - h3: (props) => , - h4: (props) => , - h5: (props) => , - h6: (props) => , - code: ({ children, ...props }) => { - if (!props.className || props.className?.includes("md")) - return {children}; - const hightlightedCode = highlight(children?.toString() ?? ""); - return ( - - ); - }, - // eslint-disable-next-line @typescript-eslint/no-explicit-any - link: (props: any) => , - Image: (props) => ( - - ), - Callout: ({ children, title, ...props }) => ( - - - {title ? {title} : null} - {children} - - ), - Tweet, - Typebot: (props) => ( - - ), - Youtube: ({ id }: { id: string }) => ( -
-
-