Separate mdx, improve mdx styling.

Author: vLuckyyy

app/docs/[...slug]/page.tsx

@@ -2,23 +2,19 @@ import fs from "fs/promises";
 import path from "path";
 
 import matter from "gray-matter";
-import type { MDXComponents } from "mdx/types";
 import type { Metadata } from "next";
 import Link from "next/link";
 import { notFound } from "next/navigation";
 import { MDXRemote } from "next-mdx-remote/rsc";
 import { Suspense, cache } from "react";
 
+import { components, mdxOptions } from "@/components/mdx/mdx-components";
 import { DocsHeader } from "@/components/page/docs/content/DocsHeader";
 import { EditOnGitHub } from "@/components/page/docs/content/EditOnGitHub";
 import { ErrorBoundary } from "@/components/page/docs/content/ErrorBoundary";
 import { ReadingTime } from "@/components/page/docs/content/ReadingTime";
 import { ShortLink } from "@/components/page/docs/content/ShortLink";
 import { docsStructure } from "@/components/page/docs/sidebar-structure";
-import { components, mdxOptions } from "@/lib/mdx";
-
-export const dynamic = "force-static";
-export const revalidate = 5;
 
 interface DocMeta {
   title: string;
@@ -95,9 +91,9 @@ interface Props {
   }>;
 }
 
-export async function generateMetadata(props: Props): Promise<Metadata> {
-  const params = await props.params;
-  const doc = await getDocBySlug(params.slug);
+export async function generateMetadata({ params }: Props): Promise<Metadata> {
+  const resolvedParams = await params;
+  const doc = await getDocBySlug(resolvedParams.slug);
   if (!doc) {
     return {
       title: "Documentation Not Found",
@@ -142,14 +138,12 @@ export async function generateStaticParams() {
   }));
 }
 
-export default async function DocPage(props: Props) {
-  const params = await props.params;
-  const doc = await getDocBySlug(params.slug);
-  if (!doc) {
-    notFound();
-  }
+export default async function DocPage({ params }: Props) {
+  const resolvedParams = await params;
+  const doc = await getDocBySlug(resolvedParams.slug);
+  if (!doc) notFound();
 
-  const currentPath = "/docs/" + params.slug.join("/");
+  const currentPath = "/docs/" + resolvedParams.slug.join("/");
   const { prev, next } = getDocNavigation(currentPath);
 
   const category = docsStructure.find((item) => currentPath.startsWith(item.path))?.title;
@@ -165,7 +159,7 @@ export default async function DocPage(props: Props) {
             <>
               <ReadingTime content={doc.content} />
               <ShortLink path={currentPath} />
-              <EditOnGitHub filePath={params.slug.join("/")} />
+              <EditOnGitHub filePath={resolvedParams.slug.join("/")} />
             </>
           }
         />
@@ -176,7 +170,7 @@ export default async function DocPage(props: Props) {
           <Suspense fallback={<LoadingFallback />}>
             <MDXRemote
               source={doc.content}
-              components={components as MDXComponents}
+              components={components}
               options={{ mdxOptions }}
             />
           </Suspense>

app/docs/components.tsx

@@ -1,13 +1,11 @@
 import { Metadata } from "next";
 import { Poppins } from "next/font/google";
-import React from "react";
 
-import DocCopyEnhancer from "@/components/page/docs/code/DocCopyEnhancer";
 import SidebarWrapper from "@/components/page/docs/sidebar/SidebarWrapper";
 import Navbar from "@/components/page/header/Navbar";
 
 const poppins = Poppins({
-  weight: ["500"],
+  weight: "500",
   subsets: ["latin"],
   display: "swap",
   preload: true,
@@ -46,16 +44,12 @@ export default function DocsLayout({ children }: { children: React.ReactNode })
       <div className="mx-auto min-h-[calc(100vh-7rem)] max-w-screen-xl px-4 py-12 pt-36">
         <div className="flex flex-col gap-8 lg:flex-row">
           <SidebarWrapper />
-
-          <div className="flex min-w-0 flex-1 flex-col items-stretch">
+          <main className="flex min-w-0 flex-1 flex-col items-stretch">
             <div className="w-full" style={{ minHeight: "60vh" }}>
-              <DocCopyEnhancer />
               {children}
             </div>
-            <div id="docs-navigation-buttons" className="mt-12 flex w-full justify-between">
-              {/* Przyciski Next/Previous będą renderowane w page.tsx */}
-            </div>
-          </div>
+            {/* Możesz tutaj dodać globalne elementy np. nawigację */}
+          </main>
         </div>
       </div>
     </div>

app/docs/layout.tsx

@@ -1,8 +1,19 @@
 import { redirect } from "next/navigation";
+import { docsStructure } from "@/components/page/docs/sidebar-structure";
 
-export const dynamic = "force-static";
-export const revalidate = 5;
+function flattenDocs(structure: typeof docsStructure) {
+  return structure.flatMap(item =>
+    item.children?.length
+      ? item.children
+      : [{ title: item.title, path: item.path }]
+  );
+}
 
 export default function DocsPage() {
-  redirect("/docs/eternalcore/introduction");
+  const flatDocs = flattenDocs(docsStructure);
+  const firstDoc = flatDocs[0];
+  if (!firstDoc) {
+    return null;
+  }
+  redirect(firstDoc.path);
 }

app/docs/page.tsx

@@ -8,8 +8,7 @@ import { Analytics } from "@/components/Analytics";
 import "./prism-languages";
 import { CookieConsentModal } from "@/components/CookieConsentModal";
 import { CookiePreferencesMenu } from "@/components/CookiePreferencesMenu";
-import DocCopyEnhancer from "@/components/page/docs/code/DocCopyEnhancer";
-import Footer from "@/components/page/footer/Footer";
+import Footer from "@/components/footer/Footer";
 import Navbar from "@/components/page/header/Navbar";
 import { SpeedInsights } from "@/components/SpeedInsights";
 import { generateOgImageUrl } from "@/lib/og-utils";
@@ -131,7 +130,6 @@ export default function RootLayout({
           </main>
 
           <Footer />
-          <DocCopyEnhancer />
           <CookieConsentModal />
           <CookiePreferencesMenu />
           <Analytics />

app/layout.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 
 import { generateOgImageMetadata } from "@/components/OgImage";
 import Hero from "@/components/page/header/Hero";
-import Project from "@/components/page/projects/Projects";
+import Project from "@/components/projects/Projects";
 
 export const dynamic = "force-dynamic";
 export const fetchCache = "force-cache";

app/projects/page.tsx

@@ -2,7 +2,7 @@ import type { Metadata } from "next";
 
 import { generateOgImageMetadata } from "@/components/OgImage";
 import Hero from "@/components/page/header/Hero";
-import Team from "@/components/page/team/Team";
+import Team from "@/components/team/Team";
 
 export const metadata: Metadata = {
   title: "EternalCode.pl | Team",

app/team/page.tsx

@@ -2,7 +2,7 @@
 
 import { MDXRemote } from "next-mdx-remote/rsc";
 
-import { components } from "@/lib/mdx";
+import { components } from "@/components/mdx/mdx-components";
 
 interface BlogPostContentProps {
   content: string;
@@ -16,4 +16,4 @@ export default function BlogPostContent({ content }: BlogPostContentProps) {
       <MDXRemote source={content} components={components} />
     </div>
   );
-} 
+}

components/blog/BlogPostContent.tsx

@@ -121,7 +121,7 @@ export default function Footer() {
       <div className="mx-auto max-w-screen-xl px-4 py-8">
         <div className="md:flex md:justify-between">
           <div className="mb-6 flex flex-col items-center md:mb-0 md:items-start">
-            <Link href="/" className="flex items-center" aria-label="Go to homepage">
+            <Link href="/public" className="flex items-center" aria-label="Go to homepage">
               <Image
                 className="mr-3 h-8 w-auto text-white dark:invert"
                 alt="EternalCode Logo"

components/page/footer/Footer.tsx renamed to components/footer/Footer.tsx

@@ -0,0 +1,51 @@
+"use client";
+
+import { Copy, Check } from "lucide-react";
+import { memo, ReactNode, useState, useRef } from "react";
+
+interface CodeBlockProps {
+  children: ReactNode;
+  language?: string;
+  className?: string;
+}
+
+export const CodeBlock = memo(({ children, language, className }: CodeBlockProps) => {
+  const [copied, setCopied] = useState(false);
+  const preRef = useRef<HTMLPreElement>(null);
+
+  const copyToClipboard = async () => {
+    if (!preRef.current) return;
+    try {
+      const codeElement = preRef.current.querySelector('code');
+      const textToCopy = codeElement ? codeElement.textContent : preRef.current.innerText;
+      await navigator.clipboard.writeText(textToCopy || "");
+      setCopied(true);
+      setTimeout(() => setCopied(false), 1200);
+    } catch {
+      // silently ignore
+    }
+  };
+
+  return (
+    <pre
+      ref={preRef}
+      role="region"
+      aria-label={language ? `Code block in ${language}` : "Code block"}
+      className={`relative my-4 overflow-x-auto rounded-lg border border-neutral-700 bg-gray-900 p-4 font-mono text-sm text-neutral-200 ${className ?? ""}`}
+    >
+      <button
+        type="button"
+        onClick={copyToClipboard}
+        aria-label="Copy code to clipboard"
+        className="absolute right-4 top-3 z-10 flex items-center gap-1 rounded-md border border-gray-700 bg-gray-800 px-3 py-1 text-xs font-medium text-gray-300 opacity-70 transition hover:bg-gray-900 hover:text-white hover:opacity-100"
+      >
+        {copied ? <Check className="h-4 w-4 text-green-500" /> : <Copy className="h-4 w-4" />}
+        <span>{copied ? "Copied!" : "Copy"}</span>
+      </button>
+
+      {typeof children === "string" ? <code className="whitespace-pre">{children}</code> : children}
+    </pre>
+  );
+});
+
+CodeBlock.displayName = "CodeBlock";