create-eziwiki 0.1.0

package/template/app/page.tsx

@@ -0,0 +1,34 @@
+import { PageTransition } from '@/components/markdown/PageTransition';
+
+/**
+ * Home page - shows empty state for New Tab
+ */
+export default function Home() {
+  return (
+    <PageTransition>
+      <div className="flex flex-col items-center justify-center min-h-[60vh] text-center px-4">
+        <div className="max-w-md">
+          <svg
+            className="w-20 h-20 mx-auto mb-6 text-gray-300 dark:text-gray-700"
+            fill="none"
+            stroke="currentColor"
+            viewBox="0 0 24 24"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={1.5}
+              d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"
+            />
+          </svg>
+          <h2 className="text-2xl font-semibold text-gray-900 dark:text-gray-100 mb-3">
+            Welcome to Documentation
+          </h2>
+          <p className="text-gray-600 dark:text-gray-400">
+            Select a page from the sidebar to get started, or click the + button to open a new tab.
+          </p>
+        </div>
+      </div>
+    </PageTransition>
+  );
+}

package/template/app/robots.ts

@@ -0,0 +1,20 @@
+import { MetadataRoute } from 'next';
+import { payload } from '@/payload/config';
+import { fileUrl } from '@/lib/basePath';
+
+/**
+ * Generate robots.txt file
+ * Controls how search engines crawl and index the site
+ *
+ * @returns Robots configuration
+ */
+export default function robots(): MetadataRoute.Robots {
+  return {
+    rules: {
+      userAgent: '*',
+      allow: '/',
+      disallow: ['/api/', '/_next/'],
+    },
+    sitemap: fileUrl('/sitemap.xml', payload.global.baseUrl),
+  };
+}

package/template/app/sitemap.ts

@@ -0,0 +1,48 @@
+import { MetadataRoute } from 'next';
+import { getSite } from '@/lib/site';
+import { docPathToUrl } from '@/lib/navigation/url';
+import { pageUrl } from '@/lib/basePath';
+
+/**
+ * Generates the sitemap for every published page.
+ *
+ * Entries are derived from the content registry rather than from navigation,
+ * so documents reachable only by direct link are still discoverable. Pages
+ * marked `hidden` are excluded — they are deliberately unlisted, and
+ * advertising them in the sitemap would defeat that.
+ *
+ * Under the `hash` URL strategy the emitted URLs are hashes, which search
+ * engines can crawl but which carry no descriptive value; the `path` strategy
+ * is the one to use if organic search matters.
+ *
+ * @returns Sitemap entries for the home page and all visible content
+ */
+export default function sitemap(): MetadataRoute.Sitemap {
+  const { global, urlMap, docPaths, hiddenPaths } = getSite();
+  const lastModified = new Date();
+
+  const homeEntry: MetadataRoute.Sitemap[0] = {
+    url: pageUrl('', global.baseUrl),
+    lastModified,
+    changeFrequency: 'weekly',
+    priority: 1,
+  };
+
+  const contentEntries = docPaths.flatMap((path): MetadataRoute.Sitemap => {
+    if (hiddenPaths.has(path)) return [];
+
+    const url = docPathToUrl(urlMap, path);
+    if (!url) return [];
+
+    return [
+      {
+        url: pageUrl(url, global.baseUrl),
+        lastModified,
+        changeFrequency: 'weekly',
+        priority: 0.8,
+      },
+    ];
+  });
+
+  return [homeEntry, ...contentEntries];
+}

package/template/components/ThemeToggle.tsx

@@ -0,0 +1,77 @@
+'use client';
+
+import { useEffect, useState } from 'react';
+
+interface ThemeToggleProps {
+  className?: string;
+}
+
+export function ThemeToggle({ className = 'w-5 h-5' }: ThemeToggleProps) {
+  const [theme, setTheme] = useState<'light' | 'dark'>('light');
+
+  useEffect(() => {
+    // Get initial theme from localStorage or system preference
+    const stored = localStorage.getItem('theme') as 'light' | 'dark' | null;
+    if (stored) {
+      setTheme(stored);
+      document.documentElement.classList.toggle('dark', stored === 'dark');
+    } else {
+      const prefersDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+      const initialTheme = prefersDark ? 'dark' : 'light';
+      setTheme(initialTheme);
+      document.documentElement.classList.toggle('dark', prefersDark);
+    }
+  }, []);
+
+  const toggleTheme = () => {
+    const newTheme = theme === 'dark' ? 'light' : 'dark';
+    setTheme(newTheme);
+    localStorage.setItem('theme', newTheme);
+    document.documentElement.classList.toggle('dark', newTheme === 'dark');
+  };
+
+  return (
+    <button
+      onClick={toggleTheme}
+      className="p-2 rounded-md text-gray-600 dark:text-gray-400 hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors"
+      aria-label={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+      title={`Switch to ${theme === 'dark' ? 'light' : 'dark'} mode`}
+    >
+      {theme === 'dark' ? (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={className}
+        >
+          <circle cx="12" cy="12" r="5" />
+          <line x1="12" y1="1" x2="12" y2="3" />
+          <line x1="12" y1="21" x2="12" y2="23" />
+          <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+          <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+          <line x1="1" y1="12" x2="3" y2="12" />
+          <line x1="21" y1="12" x2="23" y2="12" />
+          <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+          <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+        </svg>
+      ) : (
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          strokeWidth="2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+          className={className}
+        >
+          <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+        </svg>
+      )}
+    </button>
+  );
+}

package/template/components/graph/GraphView.tsx

@@ -0,0 +1,156 @@
+'use client';
+
+import React, { useMemo, useState } from 'react';
+import { useRouter } from 'next/navigation';
+import { bounds, layout, type LayoutEdge } from '@/lib/graph/layout';
+
+/**
+ * Renders the document link graph as an interactive SVG.
+ *
+ * The layout is computed once from a deterministic seed, so the graph looks the
+ * same on every visit — a graph that rearranges itself each time is hard to
+ * build any familiarity with. Hovering a node dims everything it is not
+ * connected to, which is the only practical way to read a dense graph.
+ */
+
+/** A node as supplied by the server. */
+export interface GraphViewNode {
+  path: string;
+  title: string;
+  url: string;
+  degree: number;
+}
+
+interface GraphViewProps {
+  nodes: GraphViewNode[];
+  edges: LayoutEdge[];
+}
+
+/** Nominal layout area; the SVG viewBox scales the result to fit. */
+const AREA = { width: 900, height: 640 };
+
+/** Node radius bounds, interpolated by link count. */
+const MIN_RADIUS = 5;
+const MAX_RADIUS = 14;
+
+export function GraphView({ nodes, edges }: GraphViewProps) {
+  const router = useRouter();
+  const [hovered, setHovered] = useState<string | null>(null);
+
+  const positions = useMemo(() => {
+    const settled = layout(
+      nodes.map((node) => node.path),
+      edges,
+      AREA,
+    );
+
+    return new Map(settled.map((node) => [node.id, node]));
+  }, [nodes, edges]);
+
+  const box = useMemo(() => bounds([...positions.values()]), [positions]);
+
+  const maxDegree = useMemo(() => Math.max(1, ...nodes.map((node) => node.degree)), [nodes]);
+
+  /** Paths connected to the hovered node, including itself. */
+  const connected = useMemo(() => {
+    if (!hovered) return null;
+
+    const set = new Set<string>([hovered]);
+    for (const edge of edges) {
+      if (edge.from === hovered) set.add(edge.to);
+      if (edge.to === hovered) set.add(edge.from);
+    }
+    return set;
+  }, [hovered, edges]);
+
+  if (nodes.length === 0) {
+    return (
+      <p className="py-16 text-center text-sm text-gray-500 dark:text-gray-400">
+        No pages to graph yet.
+      </p>
+    );
+  }
+
+  return (
+    <div className="overflow-hidden rounded-lg border border-gray-200 bg-gray-50 dark:border-gray-800 dark:bg-gray-900">
+      <svg
+        viewBox={`${box.x} ${box.y} ${box.width} ${box.height}`}
+        className="h-[70vh] w-full"
+        role="img"
+        aria-label={`Link graph of ${nodes.length} pages and ${edges.length} links`}
+      >
+        <g>
+          {edges.map((edge, index) => {
+            const from = positions.get(edge.from);
+            const to = positions.get(edge.to);
+            if (!from || !to) return null;
+
+            const active = !connected || (connected.has(edge.from) && connected.has(edge.to));
+
+            return (
+              <line
+                key={`${edge.from}->${edge.to}-${index}`}
+                x1={from.x}
+                y1={from.y}
+                x2={to.x}
+                y2={to.y}
+                className="stroke-gray-300 dark:stroke-gray-700"
+                strokeWidth={active ? 1.4 : 0.6}
+                opacity={active ? 0.9 : 0.15}
+              />
+            );
+          })}
+        </g>
+
+        <g>
+          {nodes.map((node) => {
+            const position = positions.get(node.path);
+            if (!position) return null;
+
+            const radius =
+              MIN_RADIUS + (MAX_RADIUS - MIN_RADIUS) * Math.sqrt(node.degree / maxDegree);
+            const active = !connected || connected.has(node.path);
+
+            return (
+              <g
+                key={node.path}
+                transform={`translate(${position.x}, ${position.y})`}
+                opacity={active ? 1 : 0.2}
+                className="cursor-pointer"
+                onMouseEnter={() => setHovered(node.path)}
+                onMouseLeave={() => setHovered(null)}
+                onClick={() => router.push(node.url)}
+                onKeyDown={(event) => {
+                  if (event.key === 'Enter' || event.key === ' ') {
+                    event.preventDefault();
+                    router.push(node.url);
+                  }
+                }}
+                role="link"
+                tabIndex={0}
+                aria-label={node.title}
+              >
+                <circle
+                  r={radius}
+                  className={
+                    hovered === node.path
+                      ? 'fill-blue-500 stroke-white dark:stroke-gray-900'
+                      : 'fill-blue-400/80 stroke-white dark:fill-blue-500/70 dark:stroke-gray-900'
+                  }
+                  strokeWidth={1.5}
+                />
+                <text
+                  y={radius + 12}
+                  textAnchor="middle"
+                  className="pointer-events-none fill-gray-700 text-[11px] dark:fill-gray-300"
+                >
+                  {node.title}
+                </text>
+              </g>
+            );
+          })}
+        </g>
+      </svg>
+    </div>
+  );
+}

package/template/components/layout/Backlinks.tsx

@@ -0,0 +1,42 @@
+import Link from 'next/link';
+import { CornerUpLeft } from 'lucide-react';
+import type { GraphNode } from '@/lib/graph/build';
+
+/**
+ * Lists the pages that link to the current one.
+ *
+ * Backlinks are what turn a set of documents into a wiki: they show how a page
+ * is reached and what context it sits in, which forward links alone never
+ * reveal. Computed at build time, so this is a plain server component.
+ */
+export function Backlinks({ links }: { links: GraphNode[] }) {
+  if (links.length === 0) return null;
+
+  return (
+    <section
+      aria-labelledby="backlinks-heading"
+      className="mt-16 border-t border-gray-200 pt-6 dark:border-gray-800"
+    >
+      <h2
+        id="backlinks-heading"
+        className="mb-3 flex items-center gap-2 text-xs font-semibold uppercase tracking-wide text-gray-500 dark:text-gray-400"
+      >
+        <CornerUpLeft className="h-3.5 w-3.5" />
+        Linked from {links.length} {links.length === 1 ? 'page' : 'pages'}
+      </h2>
+
+      <ul className="flex flex-wrap gap-2">
+        {links.map((link) => (
+          <li key={link.path}>
+            <Link
+              href={link.url}
+              className="inline-block rounded-md border border-gray-200 px-2.5 py-1 text-sm text-gray-700 no-underline transition-colors hover:border-gray-300 hover:bg-gray-50 dark:border-gray-800 dark:text-gray-300 dark:hover:border-gray-700 dark:hover:bg-gray-800/50"
+            >
+              {link.title}
+            </Link>
+          </li>
+        ))}
+      </ul>
+    </section>
+  );
+}

package/template/components/layout/Breadcrumb.tsx

@@ -0,0 +1,88 @@
+'use client';
+
+import React from 'react';
+import { usePathname } from 'next/navigation';
+import Link from 'next/link';
+import { NavigationItem } from '@/lib/payload/types';
+import { useUrlMap } from '@/components/providers/UrlMapProvider';
+
+interface BreadcrumbProps {
+  navigation: NavigationItem[];
+}
+
+/**
+ * Build breadcrumb trail by finding the path through navigation tree
+ */
+function buildBreadcrumbTrail(
+  items: NavigationItem[],
+  targetPath: string,
+  trail: Array<{ name: string; path?: string }> = [],
+): Array<{ name: string; path?: string }> | null {
+  for (const item of items) {
+    if (item.path === targetPath) {
+      return [...trail, { name: item.name, path: item.path }];
+    }
+
+    if (item.children) {
+      const found = buildBreadcrumbTrail(item.children, targetPath, [
+        ...trail,
+        { name: item.name, path: item.path },
+      ]);
+      if (found) return found;
+    }
+  }
+
+  return null;
+}
+
+export function Breadcrumb({ navigation }: BreadcrumbProps) {
+  const pathname = usePathname();
+  const { href: urlFor, toPath } = useUrlMap();
+
+  // Home page - don't show breadcrumb
+  if (pathname === '/') {
+    return null;
+  }
+
+  const currentPath = toPath(pathname);
+
+  if (!currentPath) {
+    return null;
+  }
+
+  const trail = buildBreadcrumbTrail(navigation, currentPath);
+
+  if (!trail || trail.length === 0) {
+    return null;
+  }
+
+  return (
+    <nav className="flex items-center gap-2 text-sm text-gray-600 dark:text-gray-400">
+      {trail.map((item, index) => (
+        <React.Fragment key={index}>
+          {index > 0 && (
+            <svg
+              className="w-3.5 h-3.5 flex-shrink-0"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
+            </svg>
+          )}
+
+          {index === trail.length - 1 || !item.path ? (
+            <span className="font-medium text-gray-900 dark:text-gray-100">{item.name}</span>
+          ) : (
+            <Link
+              href={urlFor(item.path)}
+              className="hover:text-gray-900 dark:hover:text-gray-100 transition-colors"
+            >
+              {item.name}
+            </Link>
+          )}
+        </React.Fragment>
+      ))}
+    </nav>
+  );
+}