kumidocs 0.20260313.3

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Foorack / Max Faxälv
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,21 @@
+# bun-react-tailwind-shadcn-template
+
+To install dependencies:
+
+```bash
+bun install
+```
+
+To start a development server:
+
+```bash
+bun dev
+```
+
+To run for production:
+
+```bash
+bun start
+```
+
+This project was created using `bun init` in bun v1.3.9. [Bun](https://bun.com) is a fast all-in-one JavaScript runtime.

package/bunfig.toml

@@ -0,0 +1,3 @@
+[serve.static]
+plugins = ["bun-plugin-tailwind"]
+env = "BUN_PUBLIC_*"

package/package.json

@@ -0,0 +1,84 @@
+{
+	"name": "kumidocs",
+	"version": "0.20260313.3",
+	"description": "A developer-focused wiki/docs platform with zero database — all content stored in Git.",
+	"license": "MIT",
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/Foorack/kumidocs.git"
+	},
+	"keywords": [
+		"wiki",
+		"docs",
+		"markdown",
+		"git",
+		"bun",
+		"self-hosted"
+	],
+	"publishConfig": {
+		"access": "public"
+	},
+	"files": [
+		"src",
+		"styles",
+		"bunfig.toml",
+		"tsconfig.json"
+	],
+	"type": "module",
+	"scripts": {
+		"dev": "bun --hot src/index.ts",
+		"start": "NODE_ENV=production bun src/index.ts",
+		"lint": "bunx prettier --check . && bunx eslint .",
+		"format": "bunx prettier --write .",
+		"ts": "bunx tsc --noEmit"
+	},
+	"dependencies": {
+		"@fluentui/react-icons": "2.0.320",
+		"@noble/hashes": "^2.0.1",
+		"@radix-ui/react-label": "2.1.8",
+		"@radix-ui/react-select": "2.2.6",
+		"@radix-ui/react-slot": "1.2.4",
+		"@streamdown/cjk": "^1.0.2",
+		"@streamdown/code": "^1.1.0",
+		"@streamdown/math": "^1.0.2",
+		"@tailwindcss/typography": "^0.5.19",
+		"@uiw/codemirror-extensions-langs": "^4.25.8",
+		"@uiw/codemirror-theme-github": "^4.25.8",
+		"@uiw/react-codemirror": "^4.25.8",
+		"class-variance-authority": "0.7.1",
+		"clsx": "2.1.1",
+		"cmdk": "1.1.1",
+		"diff": "^8.0.3",
+		"gray-matter": "4.0.3",
+		"html2canvas-pro": "^2.0.2",
+		"isomorphic-git": "1.37.3",
+		"jspdf": "^4.2.0",
+		"lucide-react": "0.577.0",
+		"minisearch": "7.2.0",
+		"next-themes": "0.4.6",
+		"radix-ui": "1.4.3",
+		"react": "19.2.4",
+		"react-diff-view": "^3.3.2",
+		"react-dom": "19.2.4",
+		"react-router-dom": "7.13.1",
+		"rehype-harden": "^1.1.8",
+		"sonner": "2.0.7",
+		"streamdown": "^2.4.0",
+		"tailwind-merge": "3.5.0"
+	},
+	"devDependencies": {
+		"@eslint/js": "10.0.1",
+		"@types/bun": "1.3.10",
+		"@types/react": "19.2.14",
+		"@types/react-dom": "19.2.3",
+		"country-flag-icons": "^1.6.15",
+		"eslint-plugin-erasable-syntax-only": "0.4.0",
+		"eslint-plugin-react": "^7.37.5",
+		"eslint-plugin-react-hooks": "^7.0.1",
+		"globals": "^17.4.0",
+		"prettier": "3.8.1",
+		"tailwindcss": "4.2.1",
+		"tw-animate-css": "1.4.0",
+		"typescript-eslint": "8.57.0"
+	}
+}

package/src/App.tsx

@@ -0,0 +1,97 @@
+import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
+import { useState } from 'react';
+import { TooltipProvider } from '@/components/ui/tooltip';
+import { ThemeProvider } from './store/theme';
+import { UserProvider, useUser } from './store/user';
+import { AppShell } from './components/layout/AppShell';
+import FilePage from './pages/FilePage';
+import NotFound from './pages/NotFound';
+import './index.css';
+import WelcomePage from './pages/WelcomePage';
+import ImageLibraryPage from './pages/ImageLibraryPage';
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogFooter,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Button } from '@/components/ui/button';
+import { Label } from '@/components/ui/label';
+
+function EmailSetupDialog() {
+	const { needsEmailSetup, setEmailAndRefetch } = useUser();
+	const [email, setEmail] = useState('');
+
+	function handleSubmit(e: React.SubmitEvent) {
+		e.preventDefault();
+		if (!email.includes('@')) return;
+		setEmailAndRefetch(email);
+	}
+
+	return (
+		<Dialog open={needsEmailSetup}>
+			<DialogContent className="sm:max-w-sm" showCloseButton={false}>
+				<DialogHeader>
+					<DialogTitle>Enter your email</DialogTitle>
+					<p className="text-sm text-muted-foreground">
+						No identity provider was detected. Enter your email to continue — it will be
+						stored as a local cookie.
+					</p>
+				</DialogHeader>
+				<form
+					onSubmit={(e) => {
+						handleSubmit(e);
+					}}
+				>
+					<div className="grid gap-3 py-2">
+						<Label htmlFor="email-input">Email</Label>
+						<Input
+							id="email-input"
+							type="email"
+							placeholder="you@example.com"
+							value={email}
+							onChange={(e) => {
+								setEmail(e.target.value);
+							}}
+							autoFocus
+							required
+						/>
+					</div>
+					<DialogFooter className="mt-2">
+						<Button type="submit" disabled={!email.includes('@')}>
+							Continue
+						</Button>
+					</DialogFooter>
+				</form>
+			</DialogContent>
+		</Dialog>
+	);
+}
+
+export function App() {
+	return (
+		<BrowserRouter>
+			<ThemeProvider>
+				<UserProvider>
+					<TooltipProvider delayDuration={300}>
+						<EmailSetupDialog />
+						<Routes>
+							<Route path="/" element={<Navigate to="/p/README.md" replace />} />{' '}
+							<Route element={<AppShell />}>
+								<Route path="/p/*" element={<FilePage />} />
+								<Route path="/i" element={<ImageLibraryPage />} />
+								<Route path="/i/:filename" element={<ImageLibraryPage />} />
+								<Route path="/welcome" element={<WelcomePage />} />
+								<Route path="*" element={<NotFound />} />
+							</Route>
+						</Routes>
+					</TooltipProvider>
+				</UserProvider>
+			</ThemeProvider>
+		</BrowserRouter>
+	);
+}
+
+export default App;

package/src/components/dialogs/NewPageDialog.tsx

@@ -0,0 +1,199 @@
+import { useState, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { toast } from 'sonner';
+import {
+	Dialog,
+	DialogContent,
+	DialogHeader,
+	DialogTitle,
+	DialogDescription,
+	DialogFooter,
+} from '../ui/dialog';
+import { Input } from '../ui/input';
+import { Label } from '../ui/label';
+import { Button } from '../ui/button';
+import { EmojiIcon } from '../ui/EmojiIcon';
+import type { MarkdownType } from '@/lib/types';
+
+interface NewPageDialogProps {
+	open: boolean;
+	onClose: () => void;
+	/** When set, the new page is placed under this directory (e.g. "docs/api"). */
+	parentDir?: string;
+	onCreated?: () => void;
+}
+
+function slugify(title: string): string {
+	return title
+		.toLowerCase()
+		.trim()
+		.replace(/\s+/g, '-')
+		.replace(/[^a-z0-9-_]/g, '')
+		.replace(/--+/g, '-')
+		.replace(/^-+|-+$/g, '');
+}
+
+export function NewPageDialog({ open, onClose, parentDir, onCreated }: NewPageDialogProps) {
+	const navigate = useNavigate();
+
+	const [title, setTitle] = useState('');
+	const [slug, setSlug] = useState('');
+	const [slugEdited, setSlugEdited] = useState(false);
+	const [pageType, setPageType] = useState<MarkdownType>('doc');
+	const [creating, setCreating] = useState(false);
+
+	// Auto-derive slug from title unless user has manually edited it (derived state, no effect needed)
+	const effectiveSlug = slugEdited ? slug : slugify(title);
+
+	const finalPath = effectiveSlug ? `${parentDir ? parentDir + '/' : ''}${effectiveSlug}.md` : '';
+
+	const handleCreate = useCallback(async () => {
+		const resolvedSlug = slugEdited ? slug : slugify(title);
+		if (!title.trim() || !resolvedSlug) return;
+		setCreating(true);
+
+		const slidesHeader = pageType === 'slide' ? '---\nslides: true\n---\n\n' : '';
+		const stub = `${slidesHeader}# ${title.trim()}\n`;
+
+		const res = await fetch('/api/file', {
+			method: 'POST',
+			headers: { 'Content-Type': 'application/json' },
+			body: JSON.stringify({ path: finalPath, content: stub }),
+		});
+
+		setCreating(false);
+
+		if (res.ok) {
+			toast.success('Page created');
+			onCreated?.();
+			onClose();
+			navigate(`/p/${finalPath}`)?.catch((err: unknown) => {
+				console.error('Navigation failed:', err);
+			});
+		} else if (res.status === 409) {
+			toast.error('A page at that path already exists.');
+		} else {
+			toast.error('Failed to create page');
+		}
+	}, [title, slug, slugEdited, pageType, finalPath, navigate, onCreated, onClose]);
+
+	const handleKeyDown = (e: React.KeyboardEvent) => {
+		if (e.key === 'Enter' && !creating && title.trim() && effectiveSlug) {
+			handleCreate().catch((err: unknown) => {
+				console.error('Failed to create page:', err);
+			});
+		}
+	};
+
+	return (
+		<Dialog
+			open={open}
+			onOpenChange={(v) => {
+				if (v) {
+					setTitle('');
+					setSlug('');
+					setSlugEdited(false);
+					setPageType('doc');
+					setCreating(false);
+				} else {
+					onClose();
+				}
+			}}
+		>
+			<DialogContent className="sm:max-w-md" onKeyDown={handleKeyDown}>
+				<DialogHeader>
+					<DialogTitle>New page</DialogTitle>
+					<DialogDescription>
+						{parentDir
+							? `Create a sub-page under "${parentDir}"`
+							: 'Create a new page at the root of the repository'}
+					</DialogDescription>
+				</DialogHeader>
+
+				<div className="grid gap-4 py-1">
+					{/* Page type selector */}
+					<div className="grid gap-1.5">
+						<Label>Type</Label>
+						<div className="flex gap-2">
+							<Button
+								type="button"
+								size="sm"
+								variant={pageType === 'doc' ? 'default' : 'outline'}
+								className="flex-1 h-8 text-xs gap-1.5"
+								onClick={() => {
+									setPageType('doc');
+								}}
+							>
+								<EmojiIcon fileType="doc" size={14} />
+								Markdown
+							</Button>
+							<Button
+								type="button"
+								size="sm"
+								variant={pageType === 'slide' ? 'default' : 'outline'}
+								className="flex-1 h-8 text-xs gap-1.5"
+								onClick={() => {
+									setPageType('slide');
+								}}
+							>
+								<EmojiIcon fileType="slide" size={14} />
+								Slides
+							</Button>
+						</div>
+					</div>
+
+					{/* Title */}
+					<div className="grid gap-1.5">
+						<Label htmlFor="np-title">Title</Label>
+						<Input
+							id="np-title"
+							autoFocus
+							value={title}
+							onChange={(e) => {
+								setTitle(e.target.value);
+							}}
+							placeholder="My new page"
+						/>
+					</div>
+
+					{/* Slug (editable) */}
+					<div className="grid gap-1.5">
+						<Label htmlFor="np-slug">Filename slug</Label>
+						<Input
+							id="np-slug"
+							value={effectiveSlug}
+							onChange={(e) => {
+								setSlug(e.target.value);
+								setSlugEdited(e.target.value !== '');
+							}}
+							placeholder="my-new-page"
+						/>
+					</div>
+
+					{/* Path preview */}
+					{finalPath && (
+						<p className="text-xs text-muted-foreground font-mono bg-muted rounded px-2 py-1.5 truncate">
+							{finalPath}
+						</p>
+					)}
+				</div>
+
+				<DialogFooter>
+					<Button variant="outline" onClick={onClose} disabled={creating}>
+						Cancel
+					</Button>
+					<Button
+						onClick={() => {
+							handleCreate().catch((err: unknown) => {
+								console.error('Failed to create page:', err);
+							});
+						}}
+						disabled={creating || !title.trim() || !effectiveSlug}
+					>
+						{creating ? 'Creating…' : 'Create'}
+					</Button>
+				</DialogFooter>
+			</DialogContent>
+		</Dialog>
+	);
+}

package/src/components/editor/CodeEditor.tsx

@@ -0,0 +1,90 @@
+import CodeMirror, { EditorView } from '@uiw/react-codemirror';
+import { loadLanguage, type LanguageName } from '@uiw/codemirror-extensions-langs';
+import { githubLight, githubDark } from '@uiw/codemirror-theme-github';
+import { useTheme } from '../../store/theme';
+
+interface CodeEditorProps {
+	value: string;
+	language: string; // raw file extension, e.g. "ts", "py", "json"
+	readOnly?: boolean;
+	onChange?: (value: string) => void;
+	onSave?: () => void;
+}
+
+// Map raw file extensions to @uiw/codemirror-extensions-langs language names.
+// Many extensions match directly (ts, js, py, rs, etc.), so only exceptions are listed.
+const EXT_TO_LANG: Record<string, string> = {
+	mjs: 'js',
+	cjs: 'js',
+	bash: 'sh',
+	zsh: 'sh',
+	fish: 'sh',
+	htm: 'html',
+	scss: 'sass',
+	yml: 'yaml',
+	jsonc: 'json',
+	gql: 'graphql',
+	kt: 'kotlin',
+	kts: 'kotlin',
+	tf: 'hcl',
+	tfvars: 'hcl',
+};
+
+function resolveLanguage(ext: string) {
+	const name = (EXT_TO_LANG[ext] ?? ext) as LanguageName;
+	try {
+		const lang = loadLanguage(name);
+		return lang ? [lang] : [];
+	} catch {
+		return [];
+	}
+}
+
+export function CodeEditor({
+	value,
+	language,
+	readOnly = false,
+	onChange,
+	onSave,
+}: CodeEditorProps) {
+	const { theme } = useTheme();
+
+	const extensions = [
+		...resolveLanguage(language),
+		EditorView.lineWrapping,
+		// Ctrl+S / Cmd+S save shortcut
+		...(onSave
+			? [
+					EditorView.domEventHandlers({
+						keydown(e) {
+							if ((e.ctrlKey || e.metaKey) && e.key === 's') {
+								e.preventDefault();
+								onSave();
+							}
+						},
+					}),
+				]
+			: []),
+	];
+
+	return (
+		<div className="h-full overflow-auto text-sm [&_.cm-editor]:h-full [&_.cm-scroller]:min-h-full [&_.cm-editor.cm-focused]:outline-none">
+			<CodeMirror
+				value={value}
+				height="100%"
+				theme={theme === 'dark' ? githubDark : githubLight}
+				extensions={extensions}
+				readOnly={readOnly}
+				basicSetup={{
+					lineNumbers: true,
+					foldGutter: true,
+					highlightActiveLine: !readOnly,
+					highlightSelectionMatches: true,
+					autocompletion: false,
+					closeBrackets: false,
+				}}
+				onChange={onChange}
+			/>
+		</div>
+	);
+}