npm - @md-meta-view/web - Versions diffs - 0.1.0 - Mend

@md-meta-view/web 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (25) hide show

package/components.json +25 -0
package/index.html +12 -0
package/package.json +54 -0
package/src/components/column-filter.tsx +70 -0
package/src/components/data-table.tsx +390 -0
package/src/components/markdown-view.tsx +104 -0
package/src/components/theme-toggle.tsx +21 -0
package/src/components/ui/badge.tsx +52 -0
package/src/components/ui/button.tsx +58 -0
package/src/components/ui/input.tsx +20 -0
package/src/components/ui/popover.tsx +88 -0
package/src/components/ui/resizable.tsx +48 -0
package/src/components/ui/table.tsx +114 -0
package/src/hooks/use-md-data.ts +71 -0
package/src/hooks/use-theme.ts +38 -0
package/src/index.css +131 -0
package/src/lib/router.ts +32 -0
package/src/lib/search-params.test.ts +163 -0
package/src/lib/search-params.ts +72 -0
package/src/lib/utils.ts +6 -0
package/src/main.tsx +11 -0
package/src/routes/__root.tsx +27 -0
package/src/routes/index.tsx +131 -0
package/tsconfig.json +24 -0
package/vite.config.ts +14 -0

package/components.json ADDED Viewed

@@ -0,0 +1,25 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "base-nova",
+  "rsc": false,
+  "tsx": true,
+  "tailwind": {
+    "config": "",
+    "css": "src/index.css",
+    "baseColor": "neutral",
+    "cssVariables": true,
+    "prefix": ""
+  },
+  "iconLibrary": "lucide",
+  "rtl": false,
+  "aliases": {
+    "components": "@/components",
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "menuColor": "default",
+  "menuAccent": "subtle",
+  "registries": {}
+}

package/index.html ADDED Viewed

@@ -0,0 +1,12 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>md-meta-view</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/package.json ADDED Viewed

@@ -0,0 +1,54 @@
+{
+  "name": "@md-meta-view/web",
+  "version": "0.1.0",
+  "description": "Web frontend for md-meta-view",
+  "type": "module",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/ShuntaToda/md-meta-view.git",
+    "directory": "packages/web"
+  },
+  "files": [
+    "src",
+    "index.html",
+    "vite.config.ts",
+    "components.json",
+    "tsconfig.json"
+  ],
+  "exports": {
+    "./package.json": "./package.json"
+  },
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@fontsource-variable/geist": "^5.2.8",
+    "@md-meta-view/core": "workspace:*",
+    "@tailwindcss/typography": "^0.5.19",
+    "@tanstack/react-router": "^1.168.8",
+    "@tanstack/react-table": "^8.21.3",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "dompurify": "^3.3.3",
+    "lucide-react": "^1.7.0",
+    "marked": "^17.0.5",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "react-resizable-panels": "^4.8.0",
+    "shadcn": "^4.1.1",
+    "tailwind-merge": "^3.5.0",
+    "tailwindcss": "^4.2.2",
+    "tw-animate-css": "^1.4.0"
+  },
+  "devDependencies": {
+    "@tailwindcss/vite": "^4.2.2",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
+    "typescript": "~5.9.3",
+    "vite": "^8.0.1"
+  }
+}

package/src/components/column-filter.tsx ADDED Viewed

@@ -0,0 +1,70 @@
+import type { MdEntry } from "@md-meta-view/core";
+import type { Column } from "@tanstack/react-table";
+import { useMemo } from "react";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
+interface ColumnFilterProps {
+  column: Column<MdEntry>;
+}
+function formatCellValue(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (Array.isArray(value)) return value.join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+export function ColumnFilter({ column }: ColumnFilterProps) {
+  const columnFilterValue = column.getFilterValue() as string | undefined;
+  const uniqueValues = useMemo(() => {
+    const values = new Set<string>();
+    for (const row of column.getFacetedRowModel().rows) {
+      const val = row.getValue(column.id);
+      if (val === null || val === undefined) continue;
+      if (Array.isArray(val)) {
+        for (const v of val) values.add(String(v));
+      } else {
+        values.add(formatCellValue(val));
+      }
+    }
+    return Array.from(values).sort();
+  }, [column]);
+  const isFewValues = uniqueValues.length <= 20;
+  return (
+    <fieldset
+      className="space-y-2 border-0 p-0 m-0"
+      onClick={(e) => e.stopPropagation()}
+      onKeyDown={(e) => e.stopPropagation()}
+    >
+      <Input
+        placeholder={`Filter ${column.id.replace("fm_", "")}...`}
+        value={columnFilterValue ?? ""}
+        onChange={(e) => column.setFilterValue(e.target.value || undefined)}
+        className="h-7 text-xs"
+      />
+      {isFewValues && uniqueValues.length > 0 && (
+        <div className="flex flex-wrap gap-1 max-h-32 overflow-auto">
+          {uniqueValues.map((value) => {
+            const isActive = columnFilterValue === value;
+            return (
+              <Badge
+                key={value}
+                variant={isActive ? "default" : "outline"}
+                className="text-xs cursor-pointer hover:bg-primary/80"
+                onClick={() => {
+                  column.setFilterValue(isActive ? undefined : value);
+                }}
+              >
+                {value || "(empty)"}
+              </Badge>
+            );
+          })}
+        </div>
+      )}
+    </fieldset>
+  );
+}

package/src/components/data-table.tsx ADDED Viewed

@@ -0,0 +1,390 @@
+import type { MdEntry } from "@md-meta-view/core";
+import {
+  type ColumnDef,
+  type ColumnFiltersState,
+  flexRender,
+  getCoreRowModel,
+  getFacetedRowModel,
+  getFacetedUniqueValues,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  type SortingState,
+  useReactTable,
+  type VisibilityState,
+} from "@tanstack/react-table";
+import { useMemo, useState } from "react";
+import { ColumnFilter } from "@/components/column-filter";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@/components/ui/popover";
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "@/components/ui/table";
+export interface TableState {
+  sorting: SortingState;
+  columnFilters: ColumnFiltersState;
+  globalFilter: string;
+}
+interface DataTableProps {
+  entries: MdEntry[];
+  keys: string[];
+  onSelect: (entry: MdEntry) => void;
+  selectedId?: string;
+  tableState?: TableState;
+  onTableStateChange?: (state: TableState) => void;
+}
+function formatCellValue(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (Array.isArray(value)) return value.join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+export function DataTable({
+  entries,
+  keys,
+  onSelect,
+  selectedId,
+  tableState,
+  onTableStateChange,
+}: DataTableProps) {
+  const [internalSorting, setInternalSorting] = useState<SortingState>([]);
+  const [internalColumnFilters, setInternalColumnFilters] =
+    useState<ColumnFiltersState>([]);
+  const [internalGlobalFilter, setInternalGlobalFilter] = useState("");
+  const [columnVisibility, setColumnVisibility] = useState<VisibilityState>({});
+  const sorting = tableState?.sorting ?? internalSorting;
+  const columnFilters = tableState?.columnFilters ?? internalColumnFilters;
+  const globalFilter = tableState?.globalFilter ?? internalGlobalFilter;
+  const updateState = (partial: Partial<TableState>) => {
+    const next = { sorting, columnFilters, globalFilter, ...partial };
+    if (onTableStateChange) {
+      onTableStateChange(next);
+    } else {
+      if (partial.sorting !== undefined) setInternalSorting(partial.sorting);
+      if (partial.columnFilters !== undefined)
+        setInternalColumnFilters(partial.columnFilters);
+      if (partial.globalFilter !== undefined)
+        setInternalGlobalFilter(partial.globalFilter);
+    }
+  };
+  const columns = useMemo<ColumnDef<MdEntry>[]>(() => {
+    const cols: ColumnDef<MdEntry>[] = [
+      {
+        accessorKey: "relativePath",
+        header: "File",
+        cell: ({ row }) => (
+          <span className="font-mono text-xs">{row.original.relativePath}</span>
+        ),
+      },
+    ];
+    for (const key of keys) {
+      cols.push({
+        id: `fm_${key}`,
+        accessorFn: (row) => row.frontmatter[key],
+        header: key,
+        cell: ({ getValue }) => {
+          const value = getValue();
+          const str = formatCellValue(value);
+          if (str.length > 60) {
+            return (
+              <span className="text-xs" title={str}>
+                {str.slice(0, 60)}...
+              </span>
+            );
+          }
+          return <span className="text-xs">{str}</span>;
+        },
+        filterFn: (row, columnId, filterValue) => {
+          const cellValue = formatCellValue(row.getValue(columnId));
+          return cellValue.toLowerCase().includes(filterValue.toLowerCase());
+        },
+        sortingFn: (rowA, rowB, columnId) => {
+          const a = formatCellValue(rowA.getValue(columnId));
+          const b = formatCellValue(rowB.getValue(columnId));
+          return a.localeCompare(b, "ja");
+        },
+      });
+    }
+    return cols;
+  }, [keys]);
+  const table = useReactTable({
+    data: entries,
+    columns,
+    state: {
+      sorting,
+      columnFilters,
+      columnVisibility,
+      globalFilter,
+    },
+    onSortingChange: (updater) => {
+      const next = typeof updater === "function" ? updater(sorting) : updater;
+      updateState({ sorting: next });
+    },
+    onColumnFiltersChange: (updater) => {
+      const next =
+        typeof updater === "function" ? updater(columnFilters) : updater;
+      updateState({ columnFilters: next });
+    },
+    onColumnVisibilityChange: setColumnVisibility,
+    onGlobalFilterChange: (value) => {
+      updateState({ globalFilter: value });
+    },
+    getCoreRowModel: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getFacetedRowModel: getFacetedRowModel(),
+    getFacetedUniqueValues: getFacetedUniqueValues(),
+    getPaginationRowModel: getPaginationRowModel(),
+    enableMultiSort: true,
+    initialState: {
+      pagination: {
+        pageSize: 50,
+      },
+    },
+  });
+  const activeFilterCount = columnFilters.length + (globalFilter ? 1 : 0);
+  return (
+    <div className="space-y-3">
+      {/* Toolbar */}
+      <div className="flex items-center gap-2 flex-wrap">
+        <Input
+          placeholder="Search all columns..."
+          value={globalFilter}
+          onChange={(e) => updateState({ globalFilter: e.target.value })}
+          className="max-w-xs h-8 text-sm"
+        />
+        {/* Column visibility toggle */}
+        <Popover>
+          <PopoverTrigger>
+            <Button variant="outline" size="sm" className="h-8">
+              Columns
+            </Button>
+          </PopoverTrigger>
+          <PopoverContent align="start" className="w-48 p-2">
+            <p className="text-xs font-medium text-muted-foreground mb-2">
+              Toggle columns
+            </p>
+            <div className="space-y-1">
+              {table
+                .getAllColumns()
+                .filter((col) => col.getCanHide())
+                .map((col) => (
+                  <label
+                    key={col.id}
+                    className="flex items-center gap-2 text-sm cursor-pointer hover:bg-muted/50 rounded px-1 py-0.5"
+                  >
+                    <input
+                      type="checkbox"
+                      checked={col.getIsVisible()}
+                      onChange={(e) => col.toggleVisibility(e.target.checked)}
+                      className="rounded"
+                    />
+                    {col.id.replace("fm_", "")}
+                  </label>
+                ))}
+            </div>
+          </PopoverContent>
+        </Popover>
+        {/* Clear filters */}
+        {activeFilterCount > 0 && (
+          <Button
+            variant="ghost"
+            size="sm"
+            className="h-8"
+            onClick={() => {
+              updateState({ columnFilters: [], globalFilter: "" });
+            }}
+          >
+            Clear filters
+            <Badge variant="secondary" className="ml-1 text-xs">
+              {activeFilterCount}
+            </Badge>
+          </Button>
+        )}
+        {/* Sort indicator */}
+        {sorting.length > 0 && (
+          <div className="flex items-center gap-1">
+            <span className="text-xs text-muted-foreground">Sort:</span>
+            {sorting.map((sort) => (
+              <Badge
+                key={sort.id}
+                variant="outline"
+                className="text-xs cursor-pointer"
+                onClick={() => {
+                  updateState({
+                    sorting: sorting.filter((s) => s.id !== sort.id),
+                  });
+                }}
+              >
+                {sort.id.replace("fm_", "")} {sort.desc ? "↓" : "↑"} ✕
+              </Badge>
+            ))}
+          </div>
+        )}
+      </div>
+      {/* Active column filters */}
+      {columnFilters.length > 0 && (
+        <div className="flex items-center gap-1 flex-wrap">
+          <span className="text-xs text-muted-foreground">Filters:</span>
+          {columnFilters.map((filter) => (
+            <Badge
+              key={filter.id}
+              variant="secondary"
+              className="text-xs cursor-pointer"
+              onClick={() => {
+                updateState({
+                  columnFilters: columnFilters.filter(
+                    (f) => f.id !== filter.id,
+                  ),
+                });
+              }}
+            >
+              {filter.id.replace("fm_", "")}: {String(filter.value)} ✕
+            </Badge>
+          ))}
+        </div>
+      )}
+      {/* Table */}
+      <div className="rounded-md border">
+        <Table>
+          <TableHeader>
+            {table.getHeaderGroups().map((headerGroup) => (
+              <TableRow key={headerGroup.id}>
+                {headerGroup.headers.map((header) => (
+                  <TableHead key={header.id} className="p-0">
+                    <div className="flex items-center">
+                      <button
+                        type="button"
+                        className="flex items-center gap-1 px-3 py-2 text-left hover:bg-muted/50 flex-1 cursor-pointer select-none"
+                        onClick={header.column.getToggleSortingHandler()}
+                      >
+                        {header.isPlaceholder
+                          ? null
+                          : flexRender(
+                              header.column.columnDef.header,
+                              header.getContext(),
+                            )}
+                        {{
+                          asc: " ↑",
+                          desc: " ↓",
+                        }[header.column.getIsSorted() as string] ?? null}
+                      </button>
+                      {header.column.getCanFilter() && (
+                        <Popover>
+                          <PopoverTrigger>
+                            <button
+                              type="button"
+                              className={`px-1.5 py-2 hover:bg-muted/50 cursor-pointer ${
+                                header.column.getFilterValue()
+                                  ? "text-primary"
+                                  : "text-muted-foreground"
+                              }`}
+                            >
+                              ▼
+                            </button>
+                          </PopoverTrigger>
+                          <PopoverContent className="w-60 p-3" align="start">
+                            <ColumnFilter column={header.column} />
+                          </PopoverContent>
+                        </Popover>
+                      )}
+                    </div>
+                  </TableHead>
+                ))}
+              </TableRow>
+            ))}
+          </TableHeader>
+          <TableBody>
+            {table.getRowModel().rows.length ? (
+              table.getRowModel().rows.map((row) => (
+                <TableRow
+                  key={row.id}
+                  className={`cursor-pointer hover:bg-muted/50 ${
+                    row.original.id === selectedId ? "bg-muted" : ""
+                  }`}
+                  onClick={() => onSelect(row.original)}
+                >
+                  {row.getVisibleCells().map((cell) => (
+                    <TableCell key={cell.id} className="py-2">
+                      {flexRender(
+                        cell.column.columnDef.cell,
+                        cell.getContext(),
+                      )}
+                    </TableCell>
+                  ))}
+                </TableRow>
+              ))
+            ) : (
+              <TableRow>
+                <TableCell
+                  colSpan={columns.length}
+                  className="h-24 text-center"
+                >
+                  No results.
+                </TableCell>
+              </TableRow>
+            )}
+          </TableBody>
+        </Table>
+      </div>
+      {/* Footer */}
+      <div className="flex items-center justify-between">
+        <span className="text-xs text-muted-foreground">
+          {table.getFilteredRowModel().rows.length} of {entries.length} file(s)
+        </span>
+        <div className="flex items-center gap-2">
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => table.previousPage()}
+            disabled={!table.getCanPreviousPage()}
+          >
+            Previous
+          </Button>
+          <span className="text-xs text-muted-foreground">
+            {table.getState().pagination.pageIndex + 1} / {table.getPageCount()}
+          </span>
+          <Button
+            variant="outline"
+            size="sm"
+            className="h-7 text-xs"
+            onClick={() => table.nextPage()}
+            disabled={!table.getCanNextPage()}
+          >
+            Next
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}

package/src/components/markdown-view.tsx ADDED Viewed

@@ -0,0 +1,104 @@
+import type { MdEntry } from "@md-meta-view/core";
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { useMemo, useState } from "react";
+import { Button } from "@/components/ui/button";
+import { Table, TableBody, TableCell, TableRow } from "@/components/ui/table";
+interface MarkdownViewProps {
+  entry: MdEntry;
+  onClose: () => void;
+}
+function formatValue(value: unknown): string {
+  if (value === null || value === undefined) return "";
+  if (Array.isArray(value)) return value.join(", ");
+  if (typeof value === "object") return JSON.stringify(value);
+  return String(value);
+}
+function renderInlineMd(text: string): string {
+  const html = marked.parseInline(text) as string;
+  return DOMPurify.sanitize(html);
+}
+function CopyableCell({ value }: { value: string }) {
+  const [copied, setCopied] = useState(false);
+  const html = useMemo(() => renderInlineMd(value), [value]);
+  const handleCopy = async () => {
+    await navigator.clipboard.writeText(value);
+    setCopied(true);
+    setTimeout(() => setCopied(false), 1500);
+  };
+  return (
+    <TableCell
+      className="text-xs cursor-pointer hover:bg-muted/50 relative group"
+      onClick={handleCopy}
+      title="Click to copy"
+    >
+      <div className="flex items-center gap-2">
+        <span
+          className="prose prose-xs dark:prose-invert [&_a]:text-primary [&_a]:underline"
+          dangerouslySetInnerHTML={{ __html: html }}
+        />
+        <span className="text-[10px] text-muted-foreground opacity-0 group-hover:opacity-100 transition-opacity shrink-0">
+          {copied ? "Copied!" : "Copy"}
+        </span>
+      </div>
+    </TableCell>
+  );
+}
+export function MarkdownView({ entry, onClose }: MarkdownViewProps) {
+  const [copied, setCopied] = useState(false);
+  const handleCopyLink = async () => {
+    const url = new URL(window.location.origin + "/");
+    url.searchParams.set("file", entry.id);
+    await navigator.clipboard.writeText(url.toString());
+    setCopied(true);
+    setTimeout(() => setCopied(false), 2000);
+  };
+  return (
+    <div className="space-y-6">
+      <div className="flex items-center justify-between">
+        <span className="font-mono text-sm text-muted-foreground truncate mr-2">
+          {entry.relativePath}
+        </span>
+        <div className="flex items-center gap-1 shrink-0">
+          <Button variant="outline" size="sm" onClick={handleCopyLink}>
+            {copied ? "Copied!" : "Copy Link"}
+          </Button>
+          <Button variant="ghost" size="sm" onClick={onClose}>
+            ✕
+          </Button>
+        </div>
+      </div>
+      {Object.keys(entry.frontmatter).length > 0 && (
+        <div className="rounded-md border">
+          <Table>
+            <TableBody>
+              {Object.entries(entry.frontmatter).map(([key, value]) => (
+                <TableRow key={key}>
+                  <TableCell className="font-medium text-muted-foreground w-32 text-xs">
+                    {key}
+                  </TableCell>
+                  <CopyableCell value={formatValue(value)} />
+                </TableRow>
+              ))}
+            </TableBody>
+          </Table>
+        </div>
+      )}
+      <div
+        className="prose prose-sm dark:prose-invert max-w-none"
+        dangerouslySetInnerHTML={{ __html: entry.html }}
+      />
+    </div>
+  );
+}

package/src/components/theme-toggle.tsx ADDED Viewed

@@ -0,0 +1,21 @@
+import { Button } from "@/components/ui/button";
+import { useTheme } from "@/hooks/use-theme";
+export function ThemeToggle() {
+  const { theme, setTheme } = useTheme();
+  const next =
+    theme === "light" ? "dark" : theme === "dark" ? "system" : "light";
+  const icon = theme === "light" ? "☀️" : theme === "dark" ? "🌙" : "💻";
+  return (
+    <Button
+      variant="ghost"
+      size="sm"
+      onClick={() => setTheme(next)}
+      title={`Theme: ${theme}`}
+    >
+      {icon}
+    </Button>
+  );
+}