@md-meta-view/web 0.1.0

package/src/lib/search-params.test.ts

@@ -0,0 +1,163 @@
+import { describe, expect, it } from "vitest";
+import {
+  buildShareUrl,
+  searchParamsToTableState,
+  tableStateToSearchParams,
+} from "./search-params";
+
+describe("searchParamsToTableState", () => {
+  it("parses sort parameter", () => {
+    const state = searchParamsToTableState({ sort: "fm_date:desc" });
+
+    expect(state.sorting).toEqual([{ id: "fm_date", desc: true }]);
+  });
+
+  it("parses multiple sort parameters", () => {
+    const state = searchParamsToTableState({ sort: "fm_date:desc,fm_title:asc" });
+
+    expect(state.sorting).toEqual([
+      { id: "fm_date", desc: true },
+      { id: "fm_title", desc: false },
+    ]);
+  });
+
+  it("parses filter parameter", () => {
+    const state = searchParamsToTableState({ filter: "fm_category:testing" });
+
+    expect(state.columnFilters).toEqual([{ id: "fm_category", value: "testing" }]);
+  });
+
+  it("parses multiple filter parameters", () => {
+    const state = searchParamsToTableState({
+      filter: "fm_category:testing,fm_status:done",
+    });
+
+    expect(state.columnFilters).toEqual([
+      { id: "fm_category", value: "testing" },
+      { id: "fm_status", value: "done" },
+    ]);
+  });
+
+  it("handles filter values containing colons", () => {
+    const state = searchParamsToTableState({ filter: "fm_url:https://example.com" });
+
+    expect(state.columnFilters).toEqual([
+      { id: "fm_url", value: "https://example.com" },
+    ]);
+  });
+
+  it("parses global search parameter", () => {
+    const state = searchParamsToTableState({ q: "Next.js" });
+
+    expect(state.globalFilter).toBe("Next.js");
+  });
+
+  it("returns empty state for empty params", () => {
+    const state = searchParamsToTableState({});
+
+    expect(state.sorting).toEqual([]);
+    expect(state.columnFilters).toEqual([]);
+    expect(state.globalFilter).toBe("");
+  });
+});
+
+describe("tableStateToSearchParams", () => {
+  it("serializes sorting", () => {
+    const params = tableStateToSearchParams({
+      sorting: [{ id: "fm_date", desc: true }],
+      columnFilters: [],
+      globalFilter: "",
+    });
+
+    expect(params.sort).toBe("fm_date:desc");
+  });
+
+  it("serializes multiple sorts", () => {
+    const params = tableStateToSearchParams({
+      sorting: [
+        { id: "fm_date", desc: true },
+        { id: "fm_title", desc: false },
+      ],
+      columnFilters: [],
+      globalFilter: "",
+    });
+
+    expect(params.sort).toBe("fm_date:desc,fm_title:asc");
+  });
+
+  it("serializes column filters", () => {
+    const params = tableStateToSearchParams({
+      sorting: [],
+      columnFilters: [{ id: "fm_category", value: "testing" }],
+      globalFilter: "",
+    });
+
+    expect(params.filter).toBe("fm_category:testing");
+  });
+
+  it("serializes global filter", () => {
+    const params = tableStateToSearchParams({
+      sorting: [],
+      columnFilters: [],
+      globalFilter: "Next.js",
+    });
+
+    expect(params.q).toBe("Next.js");
+  });
+
+  it("omits empty values", () => {
+    const params = tableStateToSearchParams({
+      sorting: [],
+      columnFilters: [],
+      globalFilter: "",
+    });
+
+    expect(params.sort).toBeUndefined();
+    expect(params.filter).toBeUndefined();
+    expect(params.q).toBeUndefined();
+  });
+});
+
+describe("round-trip", () => {
+  it("preserves state through serialize/deserialize", () => {
+    const original = {
+      sorting: [
+        { id: "fm_date", desc: true },
+        { id: "fm_title", desc: false },
+      ],
+      columnFilters: [
+        { id: "fm_category", value: "testing" },
+        { id: "fm_status", value: "done" },
+      ],
+      globalFilter: "search term",
+    };
+
+    const params = tableStateToSearchParams(original);
+    const restored = searchParamsToTableState(params);
+
+    expect(restored).toEqual(original);
+  });
+});
+
+describe("buildShareUrl", () => {
+  const origin = "http://localhost:3000";
+
+  it("builds URL with all params", () => {
+    const url = buildShareUrl(
+      { sort: "fm_date:desc", filter: "fm_category:testing", q: "Next" },
+      origin,
+    );
+
+    expect(url).toContain("sort=fm_date%3Adesc");
+    expect(url).toContain("filter=fm_category%3Atesting");
+    expect(url).toContain("q=Next");
+  });
+
+  it("omits undefined params", () => {
+    const url = buildShareUrl({ sort: "fm_date:desc" }, origin);
+
+    expect(url).toContain("sort=");
+    expect(url).not.toContain("filter=");
+    expect(url).not.toContain("q=");
+  });
+});

package/src/lib/search-params.ts

@@ -0,0 +1,72 @@
+import type { ColumnFiltersState, SortingState } from "@tanstack/react-table";
+import type { TableState } from "@/components/data-table";
+
+export interface SearchParams {
+  sort?: string;
+  filter?: string;
+  q?: string;
+  file?: string;
+}
+
+export function searchParamsToTableState(search: SearchParams): TableState {
+  const sorting: SortingState = [];
+  if (search.sort) {
+    for (const part of search.sort.split(",")) {
+      const [id, dir] = part.split(":");
+      if (id) {
+        sorting.push({ id, desc: dir === "desc" });
+      }
+    }
+  }
+
+  const columnFilters: ColumnFiltersState = [];
+  if (search.filter) {
+    for (const part of search.filter.split(",")) {
+      const colonIdx = part.indexOf(":");
+      if (colonIdx > 0) {
+        const id = part.slice(0, colonIdx);
+        const value = part.slice(colonIdx + 1);
+        columnFilters.push({ id, value });
+      }
+    }
+  }
+
+  return {
+    sorting,
+    columnFilters,
+    globalFilter: search.q ?? "",
+  };
+}
+
+export function tableStateToSearchParams(state: TableState): SearchParams {
+  const params: SearchParams = {};
+
+  if (state.sorting.length > 0) {
+    params.sort = state.sorting
+      .map((s) => `${s.id}:${s.desc ? "desc" : "asc"}`)
+      .join(",");
+  }
+
+  if (state.columnFilters.length > 0) {
+    params.filter = state.columnFilters
+      .map((f) => `${f.id}:${f.value}`)
+      .join(",");
+  }
+
+  if (state.globalFilter) {
+    params.q = state.globalFilter;
+  }
+
+  return params;
+}
+
+export function buildShareUrl(
+  search: SearchParams,
+  origin = window.location.origin,
+): string {
+  const url = new URL(origin + "/");
+  if (search.sort) url.searchParams.set("sort", search.sort);
+  if (search.filter) url.searchParams.set("filter", search.filter);
+  if (search.q) url.searchParams.set("q", search.q);
+  return url.toString();
+}

package/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/src/main.tsx

@@ -0,0 +1,11 @@
+import { RouterProvider } from "@tanstack/react-router";
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import { router } from "@/lib/router";
+import "./index.css";
+
+createRoot(document.getElementById("root")!).render(
+  <StrictMode>
+    <RouterProvider router={router} />
+  </StrictMode>,
+);

package/src/routes/__root.tsx

@@ -0,0 +1,27 @@
+import { Outlet } from "@tanstack/react-router";
+import { ThemeToggle } from "@/components/theme-toggle";
+import { useMdData } from "@/hooks/use-md-data";
+
+export function RootLayout() {
+  const { loading } = useMdData();
+
+  if (loading) {
+    return (
+      <div className="flex min-h-screen items-center justify-center">
+        <p className="text-muted-foreground">Loading...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="h-screen bg-background flex flex-col">
+      <header className="border-b px-4 py-3 shrink-0 flex items-center justify-between">
+        <h1 className="text-lg font-bold">md-meta-view</h1>
+        <ThemeToggle />
+      </header>
+      <div className="flex-1 overflow-hidden">
+        <Outlet />
+      </div>
+    </div>
+  );
+}

package/src/routes/index.tsx

@@ -0,0 +1,131 @@
+import type { MdEntry } from "@md-meta-view/core";
+import { useNavigate, useSearch } from "@tanstack/react-router";
+import { useCallback, useMemo, useState } from "react";
+import { DataTable, type TableState } from "@/components/data-table";
+import { MarkdownView } from "@/components/markdown-view";
+import { Button } from "@/components/ui/button";
+import {
+  ResizableHandle,
+  ResizablePanel,
+  ResizablePanelGroup,
+} from "@/components/ui/resizable";
+import { useMdData } from "@/hooks/use-md-data";
+import {
+  buildShareUrl,
+  searchParamsToTableState,
+  tableStateToSearchParams,
+} from "@/lib/search-params";
+
+export function IndexPage() {
+  const { data } = useMdData();
+  const navigate = useNavigate();
+  const search = useSearch({ from: "/" });
+  const [copied, setCopied] = useState(false);
+
+  const tableState = useMemo(() => searchParamsToTableState(search), [search]);
+  const [selectedId, setSelectedId] = useState<string | null>(
+    search.file ?? null,
+  );
+  const selected = useMemo(() => {
+    if (!selectedId || !data) return null;
+    return (
+      data.entries.find(
+        (e) => e.id === selectedId || e.relativePath === selectedId,
+      ) ?? null
+    );
+  }, [selectedId, data]);
+
+  const handleTableStateChange = useCallback(
+    (state: TableState) => {
+      const params = tableStateToSearchParams(state);
+      navigate({
+        to: "/",
+        search: (prev) => ({
+          file: prev.file,
+          sort: params.sort,
+          filter: params.filter,
+          q: params.q,
+        }),
+        replace: true,
+      });
+    },
+    [navigate],
+  );
+
+  const handleCopyShareLink = useCallback(async () => {
+    const params = tableStateToSearchParams(tableState);
+    const url = buildShareUrl(params);
+    await navigator.clipboard.writeText(url);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  }, [tableState]);
+
+  if (!data || data.entries.length === 0) {
+    return (
+      <div className="flex h-full items-center justify-center">
+        <p className="text-muted-foreground">No markdown files found.</p>
+      </div>
+    );
+  }
+
+  const handleSelect = (entry: MdEntry) => {
+    setSelectedId(entry.id);
+    navigate({
+      to: "/",
+      search: (prev) => ({ ...prev, file: entry.id }),
+      replace: true,
+    });
+  };
+
+  const handleClose = () => {
+    setSelectedId(null);
+    navigate({
+      to: "/",
+      search: (prev) => ({ ...prev, file: undefined }),
+      replace: true,
+    });
+  };
+
+  const hasFilters =
+    tableState.sorting.length > 0 ||
+    tableState.columnFilters.length > 0 ||
+    tableState.globalFilter !== "";
+
+  return (
+    <ResizablePanelGroup orientation="horizontal" className="h-full">
+      <ResizablePanel defaultSize={selected ? 50 : 100} minSize={30}>
+        <div className="h-full overflow-auto p-4">
+          {hasFilters && (
+            <div className="mb-3 flex justify-end">
+              <Button
+                variant="outline"
+                size="sm"
+                onClick={handleCopyShareLink}
+              >
+                {copied ? "Copied!" : "Share View"}
+              </Button>
+            </div>
+          )}
+          <DataTable
+            entries={data.entries}
+            keys={data.keys}
+            onSelect={handleSelect}
+            selectedId={selected?.id}
+            tableState={tableState}
+            onTableStateChange={handleTableStateChange}
+          />
+        </div>
+      </ResizablePanel>
+      {selected && (
+        <>
+          <ResizableHandle withHandle />
+          <ResizablePanel defaultSize={50} minSize={20}>
+            <div className="h-full overflow-auto p-4">
+              <MarkdownView entry={selected} onClose={handleClose} />
+            </div>
+          </ResizablePanel>
+        </>
+      )}
+    </ResizablePanelGroup>
+  );
+}

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+  "compilerOptions": {
+    "target": "ES2023",
+    "useDefineForClassFields": true,
+    "lib": ["ES2023", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["src"]
+}

package/vite.config.ts

@@ -0,0 +1,14 @@
+import path from "node:path";
+import tailwindcss from "@tailwindcss/vite";
+import react from "@vitejs/plugin-react";
+import { defineConfig } from "vite";
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react(), tailwindcss()],
+  resolve: {
+    alias: {
+      "@": path.resolve(__dirname, "./src"),
+    },
+  },
+});