refactor(docs): not found page & simplify folder structure

Author: krystxf

docs/next.config.mjs

@@ -4,20 +4,6 @@ import nextra from "nextra";
 const nextConfig = {
     // Configure `pageExtensions` to include markdown and MDX files
     pageExtensions: ["js", "jsx", "md", "mdx", "ts", "tsx"],
-    redirects: () => {
-        return [
-            {
-                source: "/privacy-policy",
-                destination: "/docs/legal/privacy-policy",
-                permanent: true,
-            },
-            {
-                source: "/terms-and-conditions",
-                destination: "/docs/legal/terms-and-conditions",
-                permanent: true,
-            },
-        ];
-    },
 };
 
 const withNextra = nextra({

docs/public/favicon.ico

@@ -0,0 +1,25 @@
+import { Button } from "@/components/Button";
+import Link from "next/link";
+
+const NotFoundPage = () => {
+    return (
+        <div className="flex h-screen w-full flex-col items-center justify-center gap-6 px-4">
+            <div className="space-y-2 text-center">
+                <h1 className="text-9xl font-bold">404</h1>
+                <p className="text-2xl font-medium">
+                    Oops, the page you&rsquo;re looking for cannot be found.
+                </p>
+            </div>
+            <div className="flex gap-4">
+                <Link href="/" legacyBehavior>
+                    <Button as="a">Landing page</Button>
+                </Link>
+                <Link href="/docs" legacyBehavior>
+                    <Button as="a">Documentation</Button>
+                </Link>
+            </div>
+        </div>
+    );
+};
+
+export default NotFoundPage;

docs/src/app/not-found.tsx

@@ -63,7 +63,11 @@ const LandingPage = () => {
 
                 <div className="rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-50">
                     <h2 className="mb-3 text-2xl font-semibold">Legal</h2>
-                    <a href="/privacy-policy" className="px-5" target="_blank">
+                    <a
+                        href="/docs/privacy-policy"
+                        className="px-5"
+                        target="_blank"
+                    >
                         <h3 className="group text-sm font-semibold">
                             Privacy policy
                             <span className="inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none">
@@ -72,7 +76,7 @@ const LandingPage = () => {
                         </h3>
                     </a>
                     <a
-                        href="/terms-and-conditions"
+                        href="/docs/terms-and-conditions"
                         className="px-5"
                         target="_blank"
                     >

docs/src/app/page.tsx

@@ -0,0 +1,30 @@
+import { MetadataRoute } from "next";
+
+const HOMEPAGE = "https://metro-now.vercel.app";
+
+const pages = [
+    "/",
+    "/docs",
+    "/docs/backend",
+    "/docs/privacy-policy",
+    "/docs/rest-api",
+    "/docs/terms-and-conditions",
+] as const satisfies string[];
+
+type PriorityByPage = {
+    [key in (typeof pages)[number]]?: number;
+};
+
+const priorityByPage: PriorityByPage = {
+    "/": 1,
+};
+
+const sitemap = (): MetadataRoute.Sitemap => {
+    return pages.map((url) => ({
+        url: `${HOMEPAGE}${String(url)}`,
+        lastModified: new Date(),
+        priority: priorityByPage[url] ?? 0.5,
+    }));
+};
+
+export default sitemap;

docs/src/app/sitemap.ts

@@ -0,0 +1,20 @@
+import type { ElementType, ComponentPropsWithoutRef } from "react";
+
+type Props = Exclude<ComponentPropsWithoutRef<"button">, "className"> & {
+    as: ElementType;
+};
+
+const Button = (props: Props) => {
+    const { children, className, as: Component = "button", ...rest } = props;
+
+    return (
+        <Component
+            className="inline-flex h-10 items-center justify-center rounded-md bg-gray-900 px-6 text-sm font-medium text-gray-50 shadow transition-colors hover:bg-gray-900/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-gray-950"
+            {...rest}
+        >
+            {children}
+        </Component>
+    );
+};
+
+export { Button };

docs/src/components/Button.tsx

@@ -3,17 +3,23 @@
         "title": "Docs",
         "type": "page"
     },
+
+    "api": {
+        "title": "API",
+        "type": "page",
+        "href": "/docs/rest-api"
+    },
     "legal": {
         "title": "Legal",
         "type": "menu",
         "items": {
             "about": {
                 "title": "Privacy policy",
-                "href": "/docs/legal/privacy-policy"
+                "href": "/docs/privacy-policy"
             },
             "contact": {
                 "title": "Terms & conditions",
-                "href": "/docs/legal/terms-and-conditions"
+                "href": "/docs/terms-and-conditions"
             }
         }
     }

docs/src/pages/_meta.json

@@ -5,5 +5,8 @@
     },
     "rest-api": "REST API",
     "backend": "Backend",
-    "legal": "Legal"
+    "-- Legal": {
+        "type": "separator",
+        "title": "Legal"
+    }
 }

docs/src/pages/docs/_meta.json

@@ -0,0 +1,60 @@
+# Backend
+
+[source code](https://github.com/krystxf/metro-now/tree/main/backend)
+
+Lightweight backend that provides data from [Golemio API](https://api.golemio.cz/pid/docs/openapi/#/%F0%9F%9A%8F%20PID%20Departure%20Boards/get_pid_departureboards).
+
+## Technologies
+
+### V1
+
+built with [Bun](https://github.com/oven-sh/bun)
+
+-   [WebSockets](https://developer.mozilla.org/en-US/docs/Web/API/WebSockets_API) endpoint
+
+**Setup**
+
+```bash
+# Clone the repository
+git clone https://github.com/krystxf/metro-now.git
+
+# Open the backend directory
+cd metro-now/backend/v1
+
+# Install dependencies
+bun install
+
+# Create a .env file
+cp .env.example .env
+
+# Edit the .env files with your own values
+
+# Start the backend
+bun start
+```
+
+### V2
+
+built with [Express.js](https://expressjs.com/)
+
+-   REST endpoint
+    **Setup**
+
+```bash
+# Clone the repository
+git clone https://github.com/krystxf/metro-now.git
+
+# Open the backend directory
+cd metro-now/backend/v2
+
+# Install dependencies
+pnpm install
+
+# Create a .env file
+cp .env.example .env
+
+# Edit the .env files with your own values
+
+# Start the backend
+pnpm run dev
+```

docs/src/pages/docs/backend.mdx

@@ -4,7 +4,7 @@ Backend gets data from [Golemio API](https://api.golemio.cz/pid/docs/openapi/) c
 
 ## Metro departures
 
-Wrapper for [Golemio departures API](https://api.golemio.cz/pid/docs/openapi/#/%F0%9F%9A%8F%20PID%20Departure%20Boards/get_pid_departureboards)
+[Golemio departures API](https://api.golemio.cz/pid/docs/openapi/#/%F0%9F%9A%8F%20PID%20Departure%20Boards/get_pid_departureboards)
 
 ```http
 GET https://api.metronow.dev/v1/metro/v1/metro/departures

docs/src/pages/docs/backend/_meta.json

@@ -2,9 +2,22 @@ import React from "react";
 
 const themeConfig = {
     logo: <strong>🚇 metro-now</strong>,
+    docsRepositoryBase: "https://github.com/krystxf/metro-now/tree/main/docs",
     project: {
         link: "https://github.com/krystxf/metro-now",
     },
+    editLink: {
+        text: "Edit this page on GitHub →",
+    },
+    footer: {
+        text: (
+            <div className="flex w-full sm:items-start pt-6">
+                <p className="text-xs">
+                    © {new Date().getFullYear()} metro-now
+                </p>
+            </div>
+        ),
+    },
 };
 
 export default themeConfig;