doxla 0.5.2 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "doxla",
-  "version": "0.5.2",
+  "version": "0.6.0",
   "description": "Improve documentation discoverability within repos",
   "type": "module",
   "bin": {

package/src/app/src/components/IndexPage.tsx

@@ -14,7 +14,7 @@ interface IndexPageProps {
 }
 
 function getPreview(content: string): string {
-  // Strip the first heading and get the first non-empty paragraph
+  // Strip the first heading and get the first non-empty text paragraph
   const lines = content.split("\n");
   let foundHeading = false;
   const previewLines: string[] = [];
@@ -29,7 +29,14 @@ function getPreview(content: string): string {
       if (previewLines.length > 0) break;
       continue;
     }
-    previewLines.push(trimmed);
+    // Strip HTML tags in a loop to handle nested/malformed markup
+    let textOnly = trimmed;
+    while (/<[^>]+>/.test(textOnly)) {
+      textOnly = textOnly.replace(/<[^>]+>/g, "");
+    }
+    textOnly = textOnly.replace(/[<>]/g, "").trim();
+    if (textOnly === "") continue;
+    previewLines.push(textOnly);
   }
 
   const preview = previewLines.join(" ");

package/src/app/src/components/layout/Header.tsx

@@ -1,17 +1,20 @@
 import { useState } from "react";
 import { Search, Sun, Moon } from "lucide-react";
 import type { Theme } from "../../App";
+import type { DocFile } from "../../types/manifest";
 import { Input } from "../ui/Input";
 import { Button } from "../ui/Button";
+import { MobileNav } from "./MobileNav";
 import logoSrc from "../../assets/logo.svg";
 
 interface HeaderProps {
   repoName: string;
+  docs: DocFile[];
   theme: Theme;
   onToggleTheme: () => void;
 }
 
-export function Header({ repoName, theme, onToggleTheme }: HeaderProps) {
+export function Header({ repoName, docs, theme, onToggleTheme }: HeaderProps) {
   const [searchInput, setSearchInput] = useState("");
 
   const handleSearch = (e: React.FormEvent) => {
@@ -22,7 +25,9 @@ export function Header({ repoName, theme, onToggleTheme }: HeaderProps) {
   };
 
   return (
-    <header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b border-border bg-background px-6">
+    <header className="sticky top-0 z-10 flex h-14 items-center gap-4 border-b border-border bg-background px-4 sm:px-6">
+      <MobileNav docs={docs} />
+
       <a href="#/" className="flex items-center gap-2 font-semibold">
         <img src={logoSrc} alt="Doxla" className="h-5 w-5 object-contain" />
         <span>{repoName}</span>
@@ -36,10 +41,10 @@ export function Header({ repoName, theme, onToggleTheme }: HeaderProps) {
             placeholder="Search docs..."
             value={searchInput}
             onChange={(e) => setSearchInput(e.target.value)}
-            className="w-64 pl-9"
+            className="w-full sm:w-64 pl-9"
           />
         </div>
-        <Button type="submit" size="sm">
+        <Button type="submit" size="sm" className="hidden sm:inline-flex">
           Search
         </Button>
       </form>

package/src/app/src/components/layout/Layout.tsx

@@ -14,7 +14,7 @@ interface LayoutProps {
 export function Layout({ manifest, theme, onToggleTheme, children }: LayoutProps) {
   return (
     <div className="min-h-screen">
-      <Header repoName={manifest.repoName} theme={theme} onToggleTheme={onToggleTheme} />
+      <Header repoName={manifest.repoName} docs={manifest.docs} theme={theme} onToggleTheme={onToggleTheme} />
       <div className="flex">
         <Sidebar docs={manifest.docs} />
         <main className="flex-1 overflow-auto">

package/src/app/src/components/layout/MobileNav.tsx

@@ -0,0 +1,55 @@
+import { useState, useEffect } from "react";
+import { Menu } from "lucide-react";
+import { Button } from "../ui/Button";
+import {
+  Sheet,
+  SheetOverlay,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from "../ui/Sheet";
+import { ScrollArea } from "../ui/ScrollArea";
+import { FileTree } from "../FileTree";
+import type { DocFile } from "../../types/manifest";
+
+interface MobileNavProps {
+  docs: DocFile[];
+}
+
+export function MobileNav({ docs }: MobileNavProps) {
+  const [open, setOpen] = useState(false);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const close = () => setOpen(false);
+    window.addEventListener("hashchange", close);
+    return () => window.removeEventListener("hashchange", close);
+  }, [open]);
+
+  return (
+    <>
+      <Button
+        size="icon"
+        variant="ghost"
+        className="md:hidden"
+        onClick={() => setOpen(true)}
+        aria-label="Open navigation"
+      >
+        <Menu className="h-5 w-5" />
+      </Button>
+
+      <Sheet open={open} onClose={() => setOpen(false)}>
+        <SheetOverlay />
+        <SheetContent side="left" aria-label="Navigation menu">
+          <SheetHeader>
+            <SheetTitle>Documents</SheetTitle>
+          </SheetHeader>
+          <ScrollArea className="flex-1 px-3 pb-4">
+            <FileTree docs={docs} />
+          </ScrollArea>
+        </SheetContent>
+      </Sheet>
+    </>
+  );
+}

package/src/app/src/components/ui/Sheet.tsx

@@ -0,0 +1,131 @@
+import {
+  createContext,
+  useContext,
+  useEffect,
+  type ReactNode,
+} from "react";
+import { createPortal } from "react-dom";
+import { X } from "lucide-react";
+import { cn } from "../../lib/utils";
+
+interface SheetContextValue {
+  open: boolean;
+  onClose: () => void;
+}
+
+const SheetContext = createContext<SheetContextValue>({
+  open: false,
+  onClose: () => {},
+});
+
+interface SheetProps {
+  open: boolean;
+  onClose: () => void;
+  children: ReactNode;
+}
+
+export function Sheet({ open, onClose, children }: SheetProps) {
+  return (
+    <SheetContext.Provider value={{ open, onClose }}>
+      {children}
+    </SheetContext.Provider>
+  );
+}
+
+export function SheetOverlay() {
+  const { open, onClose } = useContext(SheetContext);
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      className="fixed inset-0 z-40 bg-black/60"
+      onClick={onClose}
+      aria-hidden="true"
+    />,
+    document.body
+  );
+}
+
+interface SheetContentProps {
+  side?: "left" | "right";
+  className?: string;
+  "aria-label"?: string;
+  children: ReactNode;
+}
+
+export function SheetContent({
+  side = "left",
+  className,
+  "aria-label": ariaLabel,
+  children,
+}: SheetContentProps) {
+  const { open, onClose } = useContext(SheetContext);
+
+  useEffect(() => {
+    if (!open) return;
+
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+
+    return () => {
+      document.body.style.overflow = prev;
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [open, onClose]);
+
+  if (!open) return null;
+
+  return createPortal(
+    <div
+      role="dialog"
+      aria-modal="true"
+      aria-label={ariaLabel}
+      className={cn(
+        "fixed top-0 z-50 flex h-full w-72 flex-col border-r border-border bg-background shadow-lg",
+        side === "left" ? "left-0" : "right-0",
+        className
+      )}
+    >
+      <button
+        onClick={onClose}
+        className="absolute right-3 top-3 rounded-sm p-1 text-muted-foreground hover:text-foreground"
+        aria-label="Close"
+      >
+        <X className="h-4 w-4" />
+      </button>
+      {children}
+    </div>,
+    document.body
+  );
+}
+
+export function SheetHeader({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div className={cn("px-4 pt-4 pb-2", className)}>{children}</div>
+  );
+}
+
+export function SheetTitle({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <h2 className={cn("text-sm font-semibold text-muted-foreground", className)}>
+      {children}
+    </h2>
+  );
+}