fix: update glossary UI
This commit is contained in:
gosangam
@@ -0,0 +1,106 @@
|
||||
export const dynamic = "force-dynamic";
|
||||
|
||||
import type { Metadata } from "next";
|
||||
import { notFound } from "next/navigation";
|
||||
import { getAllGlossaryEntries } from "@/lib/api";
|
||||
import { buildOgMeta } from "@/lib/og";
|
||||
import { GlossaryClient } from "../glossary-client";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Diacritic → base letter mapping
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const DIACRITIC_TO_BASE: Record<string, string> = {
|
||||
Ā: "A", Ä: "A",
|
||||
Ī: "I", É: "I",
|
||||
Ū: "U", Ü: "U",
|
||||
Ṛ: "R", Ṝ: "R",
|
||||
Ś: "S", Ç: "S", Ṣ: "S",
|
||||
Ñ: "N", Ṇ: "N", Ṅ: "N",
|
||||
Ṭ: "T",
|
||||
Ḍ: "D",
|
||||
Ḥ: "H",
|
||||
};
|
||||
|
||||
function getBaseLetter(term: string): string {
|
||||
if (!term) return "?";
|
||||
const first = term[0].toUpperCase();
|
||||
return DIACRITIC_TO_BASE[first] || first;
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Metadata
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export async function generateMetadata({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ letter: string }>;
|
||||
}): Promise<Metadata> {
|
||||
const { letter } = await params;
|
||||
const l = letter.toUpperCase();
|
||||
return buildOgMeta({
|
||||
title: `Glossary — ${l}`,
|
||||
detail: `Sanskrit & Vedic terms starting with ${l}`,
|
||||
quote:
|
||||
"A comprehensive glossary of Sanskrit and Vedic terms from the books of Śrīla Prabhupāda.",
|
||||
});
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Page
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
export default async function GlossaryLetterPage({
|
||||
params,
|
||||
}: {
|
||||
params: Promise<{ letter: string }>;
|
||||
}) {
|
||||
const { letter: rawLetter } = await params;
|
||||
const activeLetter = rawLetter.toUpperCase();
|
||||
|
||||
// Validate — single letter A-Z
|
||||
if (!/^[A-Z]$/.test(activeLetter)) notFound();
|
||||
|
||||
// Fetch all entries (cached by Next.js request dedup within a single render)
|
||||
const allEntries = await getAllGlossaryEntries();
|
||||
|
||||
// Group all entries by base letter
|
||||
const byLetter: Record<string, typeof allEntries> = {};
|
||||
for (const entry of allEntries) {
|
||||
const base = getBaseLetter(entry.term);
|
||||
if (!byLetter[base]) byLetter[base] = [];
|
||||
byLetter[base].push(entry);
|
||||
}
|
||||
|
||||
// All available letters (sorted)
|
||||
const letters = Object.keys(byLetter).sort();
|
||||
|
||||
// Entries for the active letter
|
||||
const letterEntries = byLetter[activeLetter] || [];
|
||||
if (letterEntries.length === 0) notFound();
|
||||
|
||||
// Prepare client data — only the active letter's entries
|
||||
const clientEntries = letterEntries.map((e) => ({
|
||||
term: e.term,
|
||||
definition: e.definition,
|
||||
definition_html: e.definitionHtml,
|
||||
}));
|
||||
|
||||
// Letter counts for the nav
|
||||
const letterCounts: Record<string, number> = {};
|
||||
for (const [l, entries] of Object.entries(byLetter)) {
|
||||
letterCounts[l] = entries.length;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<GlossaryClient
|
||||
entries={clientEntries}
|
||||
activeLetter={activeLetter}
|
||||
letters={letters}
|
||||
letterCounts={letterCounts}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
+423
-246
@@ -1,11 +1,25 @@
|
||||
"use client";
|
||||
|
||||
import { useState, useMemo, useRef, useEffect } from "react";
|
||||
import { Search, X } from "lucide-react";
|
||||
import { useState, useMemo, useRef, useEffect, useCallback } from "react";
|
||||
import Link from "next/link";
|
||||
import { Search, X, Menu, ChevronLeft, ChevronRight } from "lucide-react";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Card, CardContent } from "@/components/ui/card";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button, buttonVariants } from "@/components/ui/button";
|
||||
import { ReadingSettings } from "@/components/reading-settings";
|
||||
import {
|
||||
Drawer,
|
||||
DrawerClose,
|
||||
DrawerContent,
|
||||
DrawerHeader,
|
||||
DrawerTitle,
|
||||
DrawerTrigger,
|
||||
} from "@/components/ui/drawer";
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Types
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
type GlossaryEntry = {
|
||||
term: string;
|
||||
@@ -13,42 +27,17 @@ type GlossaryEntry = {
|
||||
definition_html: string;
|
||||
};
|
||||
|
||||
type GlossaryData = {
|
||||
title: string;
|
||||
description: string;
|
||||
totalEntries: number;
|
||||
letters: string[];
|
||||
type Props = {
|
||||
entries: GlossaryEntry[];
|
||||
activeLetter: string;
|
||||
letters: string[];
|
||||
letterCounts: Record<string, number>;
|
||||
};
|
||||
|
||||
// Map diacritical first characters to base letters for grouping
|
||||
const DIACRITIC_TO_BASE: Record<string, string> = {
|
||||
Ā: "A",
|
||||
Ä: "A",
|
||||
Ī: "I",
|
||||
É: "I",
|
||||
Ū: "U",
|
||||
Ü: "U",
|
||||
Ṛ: "R",
|
||||
Ṝ: "R",
|
||||
Ś: "S",
|
||||
Ç: "S",
|
||||
Ṣ: "S",
|
||||
Ñ: "N",
|
||||
Ṇ: "N",
|
||||
Ṅ: "N",
|
||||
Ṭ: "T",
|
||||
Ḍ: "D",
|
||||
Ḥ: "H",
|
||||
};
|
||||
// ---------------------------------------------------------------------------
|
||||
// Normalize for search
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function getBaseLetter(term: string): string {
|
||||
if (!term) return "?";
|
||||
const first = term[0].toUpperCase();
|
||||
return DIACRITIC_TO_BASE[first] || first;
|
||||
}
|
||||
|
||||
// Normalize a string for search matching (strip diacritics, lowercase)
|
||||
function normalizeForSearch(text: string): string {
|
||||
return text
|
||||
.normalize("NFD")
|
||||
@@ -56,249 +45,437 @@ function normalizeForSearch(text: string): string {
|
||||
.toLowerCase();
|
||||
}
|
||||
|
||||
export function GlossaryClient({ data }: { data: GlossaryData }) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [activeLetter, setActiveLetter] = useState<string | null>(null);
|
||||
const letterRefs = useRef<Record<string, HTMLDivElement | null>>({});
|
||||
const scrollContainerRef = useRef<HTMLDivElement>(null);
|
||||
// ---------------------------------------------------------------------------
|
||||
// Letter Navigation — horizontal row matching disciples pattern
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const normalizedQuery = useMemo(() => normalizeForSearch(query), [query]);
|
||||
function LetterNav({
|
||||
letters,
|
||||
activeLetter,
|
||||
letterCounts,
|
||||
}: {
|
||||
letters: string[];
|
||||
activeLetter: string;
|
||||
letterCounts: Record<string, number>;
|
||||
}) {
|
||||
return (
|
||||
<nav className="flex flex-wrap gap-1 justify-center">
|
||||
{letters.map((letter) => {
|
||||
const count = letterCounts[letter] ?? 0;
|
||||
const isActive = letter === activeLetter;
|
||||
const isEmpty = count === 0;
|
||||
|
||||
// Group entries by letter
|
||||
const groupedEntries = useMemo(() => {
|
||||
const groups: Record<string, GlossaryEntry[]> = {};
|
||||
for (const entry of data.entries) {
|
||||
const letter = getBaseLetter(entry.term);
|
||||
if (!groups[letter]) groups[letter] = [];
|
||||
groups[letter].push(entry);
|
||||
}
|
||||
return groups;
|
||||
}, [data.entries]);
|
||||
|
||||
// Filtered entries
|
||||
const filteredGroups = useMemo(() => {
|
||||
if (!normalizedQuery) return groupedEntries;
|
||||
|
||||
const result: Record<string, GlossaryEntry[]> = {};
|
||||
for (const [letter, entries] of Object.entries(groupedEntries)) {
|
||||
const filtered = entries.filter((e) => {
|
||||
const normTerm = normalizeForSearch(e.term);
|
||||
const normDef = normalizeForSearch(e.definition);
|
||||
return (
|
||||
normTerm.includes(normalizedQuery) ||
|
||||
normDef.includes(normalizedQuery)
|
||||
<Link
|
||||
key={letter}
|
||||
href={`/glossary/${letter.toLowerCase()}`}
|
||||
className={cn(
|
||||
"relative flex flex-col items-center justify-center rounded-lg px-2.5 py-1.5 text-sm font-medium transition-colors min-w-9",
|
||||
isActive
|
||||
? "bg-primary text-primary-foreground shadow-sm"
|
||||
: isEmpty
|
||||
? "text-muted-foreground/40 cursor-default"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
<span className="leading-none">{letter}</span>
|
||||
</Link>
|
||||
);
|
||||
});
|
||||
if (filtered.length > 0) {
|
||||
result[letter] = filtered;
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}, [groupedEntries, normalizedQuery]);
|
||||
|
||||
const filteredCount = useMemo(
|
||||
() => Object.values(filteredGroups).reduce((sum, g) => sum + g.length, 0),
|
||||
[filteredGroups],
|
||||
})}
|
||||
</nav>
|
||||
);
|
||||
}
|
||||
|
||||
const sortedLetters = useMemo(
|
||||
() => Object.keys(filteredGroups).sort(),
|
||||
[filteredGroups],
|
||||
);
|
||||
// ---------------------------------------------------------------------------
|
||||
// Sidebar (desktop) — shows terms for active letter only
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
// Scroll to letter
|
||||
function scrollToLetter(letter: string) {
|
||||
setActiveLetter(letter);
|
||||
const el = letterRefs.current[letter];
|
||||
if (el) {
|
||||
el.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}
|
||||
}
|
||||
function TermSidebar({
|
||||
terms,
|
||||
activeTerm,
|
||||
filteredTerms,
|
||||
onSelectTerm,
|
||||
}: {
|
||||
terms: string[];
|
||||
activeTerm: string;
|
||||
filteredTerms: string[] | null;
|
||||
onSelectTerm: (term: string) => void;
|
||||
}) {
|
||||
const activeRef = useRef<HTMLButtonElement>(null);
|
||||
|
||||
// Track active letter on scroll via IntersectionObserver
|
||||
useEffect(() => {
|
||||
const observer = new IntersectionObserver(
|
||||
(entries) => {
|
||||
for (const entry of entries) {
|
||||
if (entry.isIntersecting) {
|
||||
const letter = entry.target.getAttribute("data-letter");
|
||||
if (letter) setActiveLetter(letter);
|
||||
}
|
||||
}
|
||||
},
|
||||
{ rootMargin: "-20% 0px -70% 0px" },
|
||||
);
|
||||
activeRef.current?.scrollIntoView({ block: "nearest" });
|
||||
}, [activeTerm]);
|
||||
|
||||
const sections = document.querySelectorAll("[data-letter]");
|
||||
sections.forEach((el) => observer.observe(el));
|
||||
|
||||
return () => observer.disconnect();
|
||||
}, [sortedLetters]);
|
||||
const displayTerms = filteredTerms ?? terms;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-6">
|
||||
{/* Search bar */}
|
||||
<div className="sticky top-0 z-10 bg-background py-4">
|
||||
<div className="relative">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder="Search glossary…"
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="pl-10 pr-10"
|
||||
/>
|
||||
{query && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2"
|
||||
onClick={() => setQuery("")}
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
<p className="mt-2 text-sm text-muted-foreground">
|
||||
{query
|
||||
? `${filteredCount.toLocaleString()} result${filteredCount !== 1 ? "s" : ""} for "${query}"`
|
||||
: `${data.totalEntries.toLocaleString()} entries`}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Letter navigation */}
|
||||
<div className="flex flex-wrap gap-1">
|
||||
{data.letters.map((letter) => {
|
||||
const hasResults = letter in filteredGroups;
|
||||
<aside className="hidden lg:block w-56 shrink-0 sticky top-[89px] self-start max-h-[calc(100vh-89px)] overflow-y-auto py-8 pr-4">
|
||||
<h2 className="text-xs font-bold uppercase tracking-wider text-muted-foreground mb-3 px-2">
|
||||
Terms
|
||||
</h2>
|
||||
<nav className="flex flex-col gap-0.5">
|
||||
{displayTerms.map((term) => {
|
||||
const isActive = term === activeTerm;
|
||||
return (
|
||||
<button
|
||||
key={letter}
|
||||
disabled={!hasResults}
|
||||
onClick={() => scrollToLetter(letter)}
|
||||
className={`inline-flex items-center justify-center size-8 rounded-md text-sm font-medium transition-colors ${
|
||||
activeLetter === letter
|
||||
? "bg-primary/10 text-primary"
|
||||
: hasResults
|
||||
? "text-foreground hover:bg-muted"
|
||||
: "text-muted-foreground/40 cursor-not-allowed"
|
||||
}`}
|
||||
key={term}
|
||||
ref={isActive ? activeRef : undefined}
|
||||
onClick={() => onSelectTerm(term)}
|
||||
className={cn(
|
||||
"px-2 py-1.5 rounded-md text-sm transition-colors truncate text-left",
|
||||
isActive
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
)}
|
||||
title={term}
|
||||
>
|
||||
{letter}
|
||||
{term}
|
||||
</button>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
{/* Entries grouped by letter */}
|
||||
<div ref={scrollContainerRef} className="space-y-8">
|
||||
{sortedLetters.length === 0 && (
|
||||
<div className="text-center py-12 text-muted-foreground">
|
||||
No entries match your search.
|
||||
</div>
|
||||
{displayTerms.length === 0 && (
|
||||
<p className="px-2 py-4 text-sm text-muted-foreground">No matches</p>
|
||||
)}
|
||||
</nav>
|
||||
</aside>
|
||||
);
|
||||
}
|
||||
|
||||
{sortedLetters.map((letter) => (
|
||||
<div
|
||||
key={letter}
|
||||
ref={(el) => {
|
||||
letterRefs.current[letter] = el;
|
||||
}}
|
||||
data-letter={letter}
|
||||
className="scroll-mt-40"
|
||||
>
|
||||
{/* Letter heading */}
|
||||
<div className="sticky top-[92px] md:top-[84px] z-5 bg-background py-2 border-b border-border mb-3">
|
||||
<Badge variant="secondary" className="text-base px-3 py-0.5">
|
||||
{letter}
|
||||
</Badge>
|
||||
<span className="ml-2 text-sm text-muted-foreground">
|
||||
{filteredGroups[letter].length} entr
|
||||
{filteredGroups[letter].length === 1 ? "y" : "ies"}
|
||||
</span>
|
||||
</div>
|
||||
// ---------------------------------------------------------------------------
|
||||
// Mobile drawer
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
{/* Entry cards */}
|
||||
<div className="space-y-2 px-1">
|
||||
{filteredGroups[letter].map((entry) => (
|
||||
<Card key={entry.term} size="sm">
|
||||
<CardContent className="py-3">
|
||||
<dt className="font-semibold text-foreground">
|
||||
{highlightMatch(entry.term, query)}
|
||||
</dt>
|
||||
<dd
|
||||
className="mt-1 text-base text-foreground leading-relaxed"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: query
|
||||
? highlightHtml(entry.definition_html, query)
|
||||
: entry.definition_html,
|
||||
}}
|
||||
/>
|
||||
</CardContent>
|
||||
</Card>
|
||||
))}
|
||||
</div>
|
||||
function TermMobileNav({
|
||||
terms,
|
||||
activeTerm,
|
||||
filteredTerms,
|
||||
onSelectTerm,
|
||||
activeLetter,
|
||||
}: {
|
||||
terms: string[];
|
||||
activeTerm: string;
|
||||
filteredTerms: string[] | null;
|
||||
onSelectTerm: (term: string) => void;
|
||||
activeLetter: string;
|
||||
}) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const displayTerms = filteredTerms ?? terms;
|
||||
|
||||
return (
|
||||
<Drawer open={open} onOpenChange={setOpen} direction="left">
|
||||
<DrawerTrigger
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline", size: "sm" }),
|
||||
"lg:hidden gap-1.5",
|
||||
)}
|
||||
>
|
||||
<Menu className="size-4" />
|
||||
<span className="hidden sm:inline">Terms</span>
|
||||
</DrawerTrigger>
|
||||
<DrawerContent direction="left" className="h-full">
|
||||
<DrawerHeader className="text-left border-b border-border pb-4 mb-2">
|
||||
<DrawerTitle>Glossary — {activeLetter}</DrawerTitle>
|
||||
</DrawerHeader>
|
||||
<nav className="overflow-y-auto px-4 pb-6 pt-2">
|
||||
<div className="flex flex-col gap-0.5">
|
||||
{displayTerms.map((term) => {
|
||||
const isActive = term === activeTerm;
|
||||
return (
|
||||
<DrawerClose key={term} asChild>
|
||||
<button
|
||||
onClick={() => {
|
||||
onSelectTerm(term);
|
||||
setOpen(false);
|
||||
}}
|
||||
className={cn(
|
||||
"px-2 py-2 rounded-md text-sm transition-colors truncate text-left",
|
||||
isActive
|
||||
? "bg-primary/10 text-primary font-medium"
|
||||
: "text-muted-foreground hover:bg-muted hover:text-foreground",
|
||||
)}
|
||||
>
|
||||
{term}
|
||||
</button>
|
||||
</DrawerClose>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
))}
|
||||
</nav>
|
||||
</DrawerContent>
|
||||
</Drawer>
|
||||
);
|
||||
}
|
||||
|
||||
// ---------------------------------------------------------------------------
|
||||
// Prev / Next nav — matches BbdNav pattern
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
function TermNav({
|
||||
prev,
|
||||
next,
|
||||
terms,
|
||||
activeTerm,
|
||||
filteredTerms,
|
||||
onSelectTerm,
|
||||
activeLetter,
|
||||
}: {
|
||||
prev: string | null;
|
||||
next: string | null;
|
||||
terms: string[];
|
||||
activeTerm: string;
|
||||
filteredTerms: string[] | null;
|
||||
onSelectTerm: (term: string) => void;
|
||||
activeLetter: string;
|
||||
}) {
|
||||
return (
|
||||
<div className="flex items-center justify-between gap-3">
|
||||
<div className="flex items-center gap-2">
|
||||
<TermMobileNav
|
||||
terms={terms}
|
||||
activeTerm={activeTerm}
|
||||
filteredTerms={filteredTerms}
|
||||
onSelectTerm={onSelectTerm}
|
||||
activeLetter={activeLetter}
|
||||
/>
|
||||
|
||||
{prev ? (
|
||||
<button
|
||||
onClick={() => onSelectTerm(prev)}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline", size: "sm" }),
|
||||
"gap-1.5",
|
||||
)}
|
||||
>
|
||||
<ChevronLeft className="size-4" />
|
||||
<span className="hidden sm:inline truncate max-w-[180px]">
|
||||
{prev}
|
||||
</span>
|
||||
<span className="sm:hidden">Previous</span>
|
||||
</button>
|
||||
) : (
|
||||
<div className="hidden lg:block" />
|
||||
)}
|
||||
</div>
|
||||
|
||||
{next ? (
|
||||
<button
|
||||
onClick={() => onSelectTerm(next)}
|
||||
className={cn(
|
||||
buttonVariants({ variant: "outline", size: "sm" }),
|
||||
"gap-1.5",
|
||||
)}
|
||||
>
|
||||
<span className="hidden sm:inline truncate max-w-[180px]">
|
||||
{next}
|
||||
</span>
|
||||
<span className="sm:hidden">Next</span>
|
||||
<ChevronRight className="size-4" />
|
||||
</button>
|
||||
) : (
|
||||
<div />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Highlight matching parts of plain text (for the term).
|
||||
*/
|
||||
function highlightMatch(text: string, query: string): React.ReactNode {
|
||||
if (!query) return text;
|
||||
// ---------------------------------------------------------------------------
|
||||
// Main component
|
||||
// ---------------------------------------------------------------------------
|
||||
|
||||
const normalizedText = normalizeForSearch(text);
|
||||
const normalizedQuery = normalizeForSearch(query);
|
||||
const index = normalizedText.indexOf(normalizedQuery);
|
||||
export function GlossaryClient({
|
||||
entries,
|
||||
activeLetter,
|
||||
letters,
|
||||
letterCounts,
|
||||
}: Props) {
|
||||
const [query, setQuery] = useState("");
|
||||
const [activeTermRaw, setActiveTerm] = useState(entries[0]?.term || "");
|
||||
const contentRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
if (index === -1) return text;
|
||||
// All term names
|
||||
const allTerms = useMemo(() => entries.map((e) => e.term), [entries]);
|
||||
|
||||
// Map the index in normalized text back to original text
|
||||
const before = text.slice(0, index);
|
||||
const match = text.slice(index, index + query.length);
|
||||
const after = text.slice(index + query.length);
|
||||
// Term → entry index map
|
||||
const termIndex = useMemo(() => {
|
||||
const map = new Map<string, number>();
|
||||
entries.forEach((e, i) => map.set(e.term, i));
|
||||
return map;
|
||||
}, [entries]);
|
||||
|
||||
// Search filter
|
||||
const searchResults = useMemo(() => {
|
||||
if (!query.trim()) return null;
|
||||
const q = normalizeForSearch(query.trim());
|
||||
return entries
|
||||
.filter((e) => {
|
||||
const normTerm = normalizeForSearch(e.term);
|
||||
const normDef = normalizeForSearch(e.definition);
|
||||
return normTerm.includes(q) || normDef.includes(q);
|
||||
})
|
||||
.map((e) => e.term);
|
||||
}, [entries, query]);
|
||||
|
||||
// Safe activeTerm — if search is active and current term isn't in results, use first result
|
||||
const activeTerm = useMemo(() => {
|
||||
if (
|
||||
searchResults &&
|
||||
searchResults.length > 0 &&
|
||||
!searchResults.includes(activeTermRaw)
|
||||
) {
|
||||
return searchResults[0];
|
||||
}
|
||||
return activeTermRaw;
|
||||
}, [searchResults, activeTermRaw]);
|
||||
|
||||
// Navigation list — search results or all terms
|
||||
const navList = useMemo(() => {
|
||||
return searchResults ?? allTerms;
|
||||
}, [searchResults, allTerms]);
|
||||
|
||||
// Prev / next within nav list
|
||||
const currentIdx = navList.indexOf(activeTerm);
|
||||
const prev = currentIdx > 0 ? navList[currentIdx - 1] : null;
|
||||
const next =
|
||||
currentIdx >= 0 && currentIdx < navList.length - 1
|
||||
? navList[currentIdx + 1]
|
||||
: null;
|
||||
|
||||
// Active entry data
|
||||
const activeEntry = useMemo(() => {
|
||||
const idx = termIndex.get(activeTerm);
|
||||
return idx !== undefined ? entries[idx] : null;
|
||||
}, [entries, termIndex, activeTerm]);
|
||||
|
||||
const handleSelectTerm = useCallback((term: string) => {
|
||||
setActiveTerm(term);
|
||||
contentRef.current?.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
{before}
|
||||
<mark className="bg-primary/20 text-foreground rounded-sm px-0.5">
|
||||
{match}
|
||||
</mark>
|
||||
{after}
|
||||
{/* Sticky header */}
|
||||
<header className="border-b border-border bg-card px-6 py-4 sticky top-0 z-20">
|
||||
<div className="max-w-5xl mx-auto flex items-start justify-between gap-4">
|
||||
<div className="flex-1 min-w-0">
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
← Home
|
||||
</Link>
|
||||
<h1 className="mt-3 text-2xl font-bold text-foreground">
|
||||
<span className="text-primary">Glossary: </span>
|
||||
{activeEntry?.term || activeLetter}
|
||||
</h1>
|
||||
</div>
|
||||
<div className="shrink-0 pt-1">
|
||||
<ReadingSettings />
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
{/* Letter navigation row */}
|
||||
<div className="border-b border-border bg-card px-6 py-3">
|
||||
<div className="max-w-5xl mx-auto">
|
||||
<LetterNav
|
||||
letters={letters}
|
||||
activeLetter={activeLetter}
|
||||
letterCounts={letterCounts}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Sidebar + Main */}
|
||||
<div className="max-w-5xl mx-auto flex">
|
||||
{/* Sidebar — terms for active letter */}
|
||||
<TermSidebar
|
||||
terms={allTerms}
|
||||
activeTerm={activeTerm}
|
||||
filteredTerms={searchResults}
|
||||
onSelectTerm={handleSelectTerm}
|
||||
/>
|
||||
|
||||
{/* Main content */}
|
||||
<main ref={contentRef} className="flex-1 min-w-0 px-6 py-8 space-y-8">
|
||||
{/* Search bar */}
|
||||
<div className="relative w-full">
|
||||
<Search className="absolute left-3 top-1/2 -translate-y-1/2 size-4 text-muted-foreground" />
|
||||
<Input
|
||||
type="text"
|
||||
placeholder={`Search within ${activeLetter}...`}
|
||||
value={query}
|
||||
onChange={(e) => setQuery(e.target.value)}
|
||||
className="pl-10 pr-10"
|
||||
/>
|
||||
{query && (
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="icon-xs"
|
||||
className="absolute right-2 top-1/2 -translate-y-1/2"
|
||||
onClick={() => setQuery("")}
|
||||
aria-label="Clear search"
|
||||
>
|
||||
<X className="size-3.5" />
|
||||
</Button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Top nav */}
|
||||
<TermNav
|
||||
prev={prev}
|
||||
next={next}
|
||||
terms={allTerms}
|
||||
activeTerm={activeTerm}
|
||||
filteredTerms={searchResults}
|
||||
onSelectTerm={handleSelectTerm}
|
||||
activeLetter={activeLetter}
|
||||
/>
|
||||
|
||||
{/* Search hint */}
|
||||
{searchResults && (
|
||||
<p className="text-sm text-muted-foreground">
|
||||
{searchResults.length === 0
|
||||
? "No entries match your search."
|
||||
: `${searchResults.length} result${searchResults.length !== 1 ? "s" : ""} for "${query}"`}
|
||||
</p>
|
||||
)}
|
||||
|
||||
{/* Single entry view */}
|
||||
{activeEntry ? (
|
||||
<Card>
|
||||
<CardContent className="py-8 px-6 sm:px-8">
|
||||
<div className="space-y-4">
|
||||
<h2 className="text-2xl font-bold text-foreground">
|
||||
{activeEntry.term}
|
||||
</h2>
|
||||
<div
|
||||
className="text-base text-foreground leading-relaxed"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: activeEntry.definition_html,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
) : (
|
||||
<div className="py-12 text-center text-muted-foreground">
|
||||
<p className="text-lg font-medium">No entry selected</p>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{/* Bottom nav */}
|
||||
<TermNav
|
||||
prev={prev}
|
||||
next={next}
|
||||
terms={allTerms}
|
||||
activeTerm={activeTerm}
|
||||
filteredTerms={searchResults}
|
||||
onSelectTerm={handleSelectTerm}
|
||||
activeLetter={activeLetter}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
* Highlight matching parts inside an HTML string (for definitions).
|
||||
* Only highlights within text nodes, not inside HTML tags.
|
||||
*/
|
||||
function highlightHtml(html: string, query: string): string {
|
||||
if (!query) return html;
|
||||
|
||||
const normalizedQuery = normalizeForSearch(query);
|
||||
if (!normalizedQuery) return html;
|
||||
|
||||
// Split by HTML tags, only highlight in text nodes
|
||||
const parts = html.split(/(<[^>]+>)/);
|
||||
return parts
|
||||
.map((part) => {
|
||||
// Skip HTML tags
|
||||
if (part.startsWith("<")) return part;
|
||||
|
||||
// Try to find and highlight match in text content
|
||||
const normalizedPart = normalizeForSearch(part);
|
||||
const index = normalizedPart.indexOf(normalizedQuery);
|
||||
if (index === -1) return part;
|
||||
|
||||
const before = part.slice(0, index);
|
||||
const match = part.slice(index, index + query.length);
|
||||
const after = part.slice(index + query.length);
|
||||
return `${before}<mark class="bg-primary/20 text-foreground rounded-sm px-0.5">${match}</mark>${after}`;
|
||||
})
|
||||
.join("");
|
||||
}
|
||||
|
||||
+4
-48
@@ -1,8 +1,5 @@
|
||||
import type { Metadata } from "next";
|
||||
import Link from "next/link";
|
||||
import { PageHeader } from "@/components/page-header";
|
||||
import { GlossaryClient } from "./glossary-client";
|
||||
import { getAllGlossaryEntries } from "@/lib/api";
|
||||
import { redirect } from "next/navigation";
|
||||
import { buildOgMeta } from "@/lib/og";
|
||||
|
||||
export function generateMetadata(): Metadata {
|
||||
@@ -14,48 +11,7 @@ export function generateMetadata(): Metadata {
|
||||
});
|
||||
}
|
||||
|
||||
export default async function GlossaryPage() {
|
||||
const entries = await getAllGlossaryEntries();
|
||||
|
||||
const letters = Array.from(
|
||||
new Set(
|
||||
entries
|
||||
.map((e) => e.term.charAt(0).toUpperCase())
|
||||
.filter((ch) => ch.length > 0),
|
||||
),
|
||||
).sort();
|
||||
|
||||
const data = {
|
||||
title: "Glossary",
|
||||
description:
|
||||
"Sanskrit and Bengali terms used in the books of His Divine Grace A.C. Bhaktivedanta Swami Prabhupāda.",
|
||||
totalEntries: entries.length,
|
||||
letters,
|
||||
entries: entries.map((e) => ({
|
||||
term: e.term,
|
||||
definition: e.definition,
|
||||
definition_html: e.definitionHtml,
|
||||
})),
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-background">
|
||||
<PageHeader>
|
||||
<Link
|
||||
href="/"
|
||||
className="text-sm text-muted-foreground hover:text-foreground transition-colors"
|
||||
>
|
||||
← Home
|
||||
</Link>
|
||||
<h1 className="mt-3 text-3xl font-bold text-foreground">
|
||||
{data.title}
|
||||
</h1>
|
||||
<p className="mt-1 text-muted-foreground">{data.description}</p>
|
||||
</PageHeader>
|
||||
|
||||
<main className="max-w-5xl mx-auto px-6 py-8">
|
||||
<GlossaryClient data={data} />
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
// Redirect /glossary to /glossary/a
|
||||
export default function GlossaryPage() {
|
||||
redirect("/glossary/a");
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user