next.config.ts

@@ -1,7 +1,14 @@
+import createMDX from "@next/mdx";
 import type { NextConfig } from "next";
 
 const nextConfig: NextConfig = {
   output: "standalone",
+  pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
 };
 
-export default nextConfig;
+const withMDX = createMDX({
+  // Add markdown plugins here, as desired
+});
+
+// Merge MDX config with Next.js config
+export default withMDX(nextConfig);

package.json

@@ -14,10 +14,15 @@
     "@lingui/core": "^5.1.2",
     "@lingui/macro": "^5.1.2",
     "@lingui/react": "^5.1.2",
+    "@mdx-js/loader": "^3.1.0",
+    "@mdx-js/react": "^3.1.0",
+    "@next/mdx": "^15.1.7",
     "@radix-ui/react-checkbox": "^1.1.4",
     "@radix-ui/react-dialog": "^1.1.5",
     "@radix-ui/react-label": "^2.1.2",
     "@radix-ui/react-slot": "^1.1.2",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/mdx": "^2.0.13",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "form-data": "^4.0.1",

src/app/[locale]/pages/[slug]/layout.tsx

@@ -0,0 +1,38 @@
+import { NavContainer } from "@/components/nav-container";
+import { getLocale, Lang } from "@/i18n/locales";
+import { translations } from "@/i18n/translations";
+
+export default async function MdxLayout({ children, params }: { children: React.ReactNode, params: Promise<{ locale: Lang }> }) {
+  const { locale } = await (params);
+  const currentLang = getLocale(locale);
+
+  const t = translations[currentLang];
+  return (
+    <div>
+      <NavContainer title={t.nav.title} >{null}</NavContainer>
+      <section className="container mx-auto px-4 py-10">
+        <div className="container mx-auto px-4 py-8">
+          <article
+            className="prose prose-invert max-w-none
+        prose-h1:font-press-start prose-h1:text-4xl md:prose-h1:text-5xl prose-h1:mb-8 prose-h1:text-center prose-h1:text-foreground
+        prose-h2:font-press-start prose-h2:text-2xl md:prose-h2:text-3xl prose-h2:text-foreground/80
+        prose-h3:font-press-start prose-h3:text-xl md:prose-h3:text-2xl prose-h3:text-foreground/60
+        prose-h4:font-press-start prose-h4:text-l md:prose-h4:text-xl prose-h4:text-foreground/40
+        prose-p:text-muted-foreground prose-p:leading-relaxed
+        prose-a:text-foreground prose-a:no-underline hover:prose-a:text-foreground/80 prose-a:transition-colors
+        prose-strong:text-foreground prose-strong:font-bold
+        prose-code:text-foreground prose-code:bg-muted/20 prose-code:px-1 prose-code:rounded
+        prose-pre:bg-muted/20 prose-pre:border prose-pre:border-muted
+        prose-img:rounded-lg prose-img:border prose-img:border-muted
+        prose-blockquote:border-primary prose-blockquote:text-muted-foreground
+        prose-ul:text-muted-foreground prose-ol:text-muted-foreground
+        prose-li:marker:text-foreground"
+          >
+            {children}
+          </article>
+        </div>
+      </section>
+    </div>
+  )
+}
+

src/app/[locale]/pages/[slug]/page.tsx

@@ -0,0 +1,29 @@
+import { getLocale, Lang } from "@/i18n/locales"
+import { notFound } from "next/navigation"
+
+export default async function Page({
+  params,
+}: {
+  params: Promise<{ slug: string, locale: Lang }>
+}) {
+  const { slug, locale } = await params
+  const currentLocale = getLocale(locale)
+
+  console.log(slug, locale)
+  try {
+    const path = `@/pages/${currentLocale}/${slug}.mdx`
+    const pagemodule = await import(path)
+    const Post = pagemodule.default
+
+    return <Post />
+  } catch (error) {
+    console.log(error)
+    notFound()
+  }
+}
+
+export function generateStaticParams() {
+  return [{ slug: 'privacy' }]
+}
+
+export const dynamicParams = false

src/globals.css

@@ -1,4 +1,5 @@
 @import "tailwindcss";
+@plugin "@tailwindcss/typography";
 
 @plugin 'tailwindcss-animate';
 

src/mdx-components.ts

@@ -0,0 +1,7 @@
+import type { MDXComponents } from "mdx/types";
+
+export function useMDXComponents(components: MDXComponents): MDXComponents {
+  return {
+    ...components,
+  };
+}

src/pages/en/privacy.mdx

@@ -0,0 +1,6 @@
+# Privacy policy
+
+You will see a privacy policy soon.
+It's just a placeholder for now.
+
+Return to the [homepage](/en/)

src/pages/pl/privacy.mdx

@@ -0,0 +1,6 @@
+# Polityka prywatności
+
+Tu w przyszłości pojawi się polityka prywatności na temat wydarzenia.
+W tym momencie po prostu trzymamy sobie stronę.
+
+Wróć do [strony głównej](/pl/)