Fumadocs migration

.gitignore

@@ -1,2 +1,7 @@
 .next
 node_modules
+.source
+.open-next
+.dev.vars
+.wrangler
+cloudflare-env.d.ts

.nvmrc

@@ -0,0 +1 @@
+20

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

@@ -0,0 +1,48 @@
+import { source } from '@/lib/source';
+import {
+  DocsPage,
+  DocsBody,
+  DocsDescription,
+  DocsTitle,
+} from 'fumadocs-ui/page';
+import { notFound } from 'next/navigation';
+import { getMDXComponents } from '@/mdx-components';
+
+export default async function Page(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+
+  if (!page) notFound();
+
+  const MDX = page.data.body;
+
+  return (
+    <DocsPage toc={page.data.toc} full={page.data.full}>
+      <DocsTitle>{page.data.title}</DocsTitle>
+      <DocsDescription>{page.data.description}</DocsDescription>
+      <DocsBody>
+        <MDX components={getMDXComponents()} />
+      </DocsBody>
+    </DocsPage>
+  );
+}
+
+export async function generateStaticParams() {
+  return source.generateParams();
+}
+
+export async function generateMetadata(props: {
+  params: Promise<{ slug?: string[] }>;
+}) {
+  const params = await props.params;
+  const page = source.getPage(params.slug);
+
+  if (!page) notFound();
+
+  return {
+    title: page.data.title,
+    description: page.data.description,
+  };
+}

app/(docs)/layout.tsx

@@ -0,0 +1,25 @@
+import { source } from '@/lib/source';
+import { baseOptions } from '@/lib/layout.shared';
+import { DocsLayout } from 'fumadocs-ui/layouts/docs';
+import type { Metadata } from 'next';
+
+export const metadata: Metadata = {
+  title: {
+    template: '%s - Andronix Docs',
+    default: 'Andronix Documentation',
+  },
+};
+
+export default function RootDocsLayout({ children }: { children: React.ReactNode }) {
+  return (
+    <DocsLayout
+      {...baseOptions()}
+      tree={source.pageTree}
+      sidebar={{
+        defaultOpenLevel: 1,
+      }}
+    >
+      {children}
+    </DocsLayout>
+  );
+}

app/api/search/route.ts

@@ -0,0 +1,11 @@
+import { source } from '@/lib/source';
+import { createSearchAPI } from 'fumadocs-core/search/server';
+
+export const { GET } = createSearchAPI('advanced', {
+  indexes: source.getPages().map((page) => ({
+    title: page.data.title,
+    structuredData: page.data.structuredData,
+    id: page.url,
+    url: page.url,
+  })),
+});

app/global.css

@@ -0,0 +1,15 @@
+@import 'tailwindcss';
+@import 'fumadocs-ui/css/neutral.css';
+@import 'fumadocs-ui/css/preset.css';
+
+@theme {
+  /* Orange primary color for light mode */
+  --color-fd-primary: hsl(24.6, 95%, 53.1%); /* Orange-500 */
+  --color-fd-primary-foreground: hsl(0, 0%, 100%); /* White text */
+}
+
+.dark {
+  /* Orange primary color for dark mode */
+  --color-fd-primary: hsl(20.5, 90.2%, 48.2%); /* Orange-500 adjusted for dark */
+  --color-fd-primary-foreground: hsl(0, 0%, 100%); /* White text */
+}

app/layout.tsx

@@ -0,0 +1,64 @@
+import './global.css';
+import { RootProvider } from 'fumadocs-ui/provider';
+import { Banner } from 'fumadocs-ui/components/banner';
+import { Inter } from 'next/font/google';
+
+const inter = Inter({
+  subsets: ['latin'],
+});
+
+export const metadata = {
+  title: {
+    template: '%s - Andronix Docs',
+    default: 'Andronix Documentation',
+  },
+  description: 'Andronix lets you install Linux distributions like Ubuntu, Debian, and Manjaro on non-rooted Android devices. Read our documentation for step-by-step instructions.',
+  metadataBase: new URL('https://docs.andronix.app'),
+  openGraph: {
+    title: 'Andronix Documentation',
+    description: 'Andronix lets you install Ubuntu, Debian, and Manjaro on non-rooted Android devices. Our documentation provides step-by-step instructions and troubleshooting tips to help you set up your Linux environment quickly and easily. Experience the power of Linux on your mobile device with Andronix.',
+    url: 'https://docs.andronix.app/',
+    images: '/og.png',
+    type: 'website',
+  },
+  twitter: {
+    card: 'summary_large_image',
+    title: 'Andronix Documentation',
+    description: 'Andronix lets you install Ubuntu, Debian, and Manjaro on non-rooted Android devices. Our documentation provides step-by-step instructions and troubleshooting tips to help you set up your Linux environment quickly and easily. Experience the power of Linux on your mobile device with Andronix.',
+    images: '/og.png',
+  },
+};
+
+export default function Layout({ children }: { children: React.ReactNode }) {
+  return (
+    <html lang="en" className={inter.className} suppressHydrationWarning>
+      <body>
+        <Banner
+          id="android-12-fix"
+          variant="rainbow"
+          rainbowColors={[
+            'rgba(255,100,0, 0.5)',
+            'rgba(255,100,0, 0.5)',
+            'transparent',
+            'rgba(255,100,0, 0.5)',
+            'transparent',
+            'rgba(255,100,0, 0.5)',
+            'transparent',
+          ]}
+        >
+          <div className="flex flex-col sm:flex-row sm:items-center gap-1 sm:gap-2 text-center sm:text-left">
+            <span className="font-medium">🚨 Resolve <strong>Process completed (signal 9)</strong> error</span>
+            <span className="hidden sm:inline">→</span>
+            <a
+              href="/android-12/andronix-on-android-12-and-beyond"
+              className="underline hover:text-white transition-colors"
+            >
+              Read the fix
+            </a>
+          </div>
+        </Banner>
+        <RootProvider>{children}</RootProvider>
+      </body>
+    </html>
+  );
+}

build.sh

@@ -0,0 +1,17 @@
+#!/bin/bash
+# Cloudflare Pages build script
+# This ensures OpenNext is used instead of the deprecated next-on-pages
+
+echo "Building with OpenNext Cloudflare adapter..."
+npx opennextjs-cloudflare build
+
+# Restructure for Cloudflare Pages
+echo "Setting up Cloudflare Pages structure..."
+
+# Copy worker to root as _worker.js
+cp .open-next/worker.js .open-next/_worker.js
+
+# Move assets to root level (Cloudflare Pages serves from root)
+cp -r .open-next/assets/* .open-next/
+
+echo "Build complete!"

components/author.tsx

@@ -1,12 +1,12 @@
-export default function Authors({ date, children, by = "by" }) {
+export default function Authors({ date, children, by = "by" }: { date: string; children: React.ReactNode; by?: string }) {
     return (
         <div className="mt-4 mb-16 text-gray-500 text-sm">
             {date} {by} {children}
         </div>
     );
 }
 
-export function Author({ name, link }) {
+export function Author({ name, link }: { name: string; link: string }) {
     return (
         <span className="after:content-[','] last:after:content-['']">
       <a

components/badge.tsx

@@ -1,8 +1,11 @@
-export default function Badge({children}) {
-
-    return (
-        <div className={"rounded-full inline-flex text-sm bg-orange-700 bg-opacity-10 w-fit text-orange-400 px-2 py-0.5"}>
-            <p>{children}</p>
-        </div>
-    )
+export default function Badge({ children }: { children: React.ReactNode }) {
+  return (
+    <span
+      className={
+        "rounded-full inline-flex items-center text-sm dark:bg-orange-500/20 bg-opacity-10 dark:text-orange-400 px-2 py-0.5 ml-2 bg-orange-500/10 text-orange-600"
+      }
+    >
+      {children}
+    </span>
+  );
 }

components/blog_index.tsx

@@ -1,41 +1,71 @@
-import { getPagesUnderRoute } from "nextra/context";
 import Link from "next/link";
 
-export default function BlogIndex({ more = "Read more" }) {
-    return getPagesUnderRoute("/blog").reverse().map((page) => {
+interface BlogPost {
+    title: string;
+    slug: string;
+    description?: string;
+    date?: string;
+}
 
-        return (
-            <div key={page.route} className="mb-10">
-                <h3>
-                    <Link
-                        href={page.route}
-                        style={{ color: "inherit", textDecoration: "none" }}
-                        className="block font-semibold mt-8 text-2xl "
-                    >
-                        {/*@ts-ignore*/}
-                        {page.meta?.title || page.frontMatter?.title || page.name}
-                    </Link>
-                </h3>
-                <p className="opacity-80 mt-6 leading-7">
-                    {/*@ts-ignore*/}
-                    {page.frontMatter?.description}{" "}
-                    <span className="inline-block">
-            <Link
-                href={page.route}
-                className="text-[color:hsl(var(--nextra-primary-hue),100%,50%)] underline underline-offset-2 decoration-from-font"
-            >
-              {more + " →"}
-            </Link>
-          </span>
-                </p>
-                {/*@ts-ignore*/}
-                {page.frontMatter?.date ? (
-                    <p className="opacity-50 text-sm mt-6 leading-7">
-                        {/*@ts-ignore*/}
-                        {page.frontMatter.date}
+const blogPosts: BlogPost[] = [
+    {
+        title: "Calling for Andronix Maintainers",
+        slug: "andronix-maintainers",
+        description: "We are looking for maintainers for Andronix. If you are interested, please read this blog.",
+        date: "December 26, 2023"
+    },
+    {
+        title: "Andronix 7.0 - Refresh",
+        slug: "v7-0",
+        description: "Long time no-see, and here we are again. Andronix is getting updated to version 7.0.",
+        date: "January 17, 2023"
+    },
+    {
+        title: "Andronix 6.0 - A new beginning...",
+        slug: "v6-0",
+        description: "Andronix 6.0 is here. A new beginning for Andronix. Read more about the changes in this blog.",
+        date: "August 11, 2021"
+    },
+    {
+        title: "Andronix, Termux and F-Droid",
+        slug: "andronix-termux-and-f-droid",
+        description: "Information about migrating Termux from Google Play Store to F-Droid after the shut-down of Bintray, a package hosting service from Jfrog.",
+        date: "July 14, 2021"
+    }
+];
+
+export default function BlogIndex({ more = "Read more" }: { more?: string }) {
+    return (
+        <>
+            {blogPosts.map((post) => (
+                <div key={post.slug} className="mb-10">
+                    <h3>
+                        <Link
+                            href={`/blog/${post.slug}`}
+                            style={{ color: "inherit", textDecoration: "none" }}
+                            className="block font-semibold mt-8 text-2xl "
+                        >
+                            {post.title}
+                        </Link>
+                    </h3>
+                    <p className="opacity-80 mt-6 leading-7">
+                        {post.description}{" "}
+                        <span className="inline-block">
+                            <Link
+                                href={`/blog/${post.slug}`}
+                                className="text-primary underline underline-offset-2 decoration-from-font"
+                            >
+                                {more + " →"}
+                            </Link>
+                        </span>
                     </p>
-                ) : null}
-            </div>
-        );
-    });
-}
+                    {post.date && (
+                        <p className="opacity-50 text-sm mt-6 leading-7">
+                            {post.date}
+                        </p>
+                    )}
+                </div>
+            ))}
+        </>
+    );
+}

components/button.tsx

@@ -8,9 +8,9 @@ export default function AndronixButton({
                                        }: { link: string, children?: any, className?: string }) {
     return (
         <Link href={link}
-              className={`${className} px-3 flex space-x-2 my-4 items-center justify-center py-2 bg-orange-500 rounded-md w-fit cursor-pointer hover:scale-105 transform transition duration-200`}>
-            <span className={'text-bold text-white'}>{children}</span>
-            <FiChevronRight/>
+              className={`${className} inline-flex items-center gap-1 text-sm font-medium text-orange-600 dark:text-orange-400 hover:text-orange-700 dark:hover:text-orange-300 underline decoration-orange-600/30 dark:decoration-orange-400/30 underline-offset-4 hover:decoration-orange-600 dark:hover:decoration-orange-400 transition-colors`}>
+            <span>{children}</span>
+            <FiChevronRight className="w-4 h-4"/>
         </Link>
     )
 }