feat: initial commit

app/books/bg/page.tsx

@@ -1,6 +1,7 @@
 import fs from "fs";
 import path from "path";
 import Link from "next/link";
+import { ExtractedVerseCount } from "../extracted-verse-count";
 
 type ChapterInfo = {
   number: number;
@@ -17,10 +18,7 @@ type Intro = {
 };
 
 export default function BgPage() {
-  const introPath = path.join(
-    process.cwd(),
-    "app/lib/books/bg/intro.json"
-  );
+  const introPath = path.join(process.cwd(), "app/lib/books/bg/intro.json");
   const intro: Intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));
 
   return (
@@ -28,10 +26,10 @@ export default function BgPage() {
       <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-8">
         <div className="max-w-3xl mx-auto">
           <Link
-            href="/"
+            href="/books"
             className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
           >
-            &larr; Home
+            &larr; Books
           </Link>
           <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-100">
             {intro.title}
@@ -58,7 +56,7 @@ export default function BgPage() {
                   </p>
                 </div>
                 <span className="text-sm text-zinc-400 shrink-0 ml-4">
-                  {ch.totalVerses} verses
+                  <ExtractedVerseCount count={ch.totalVerses} />
                 </span>
               </Link>
             </li>

app/books/extracted-verse-count.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import { useState, useRef, useEffect } from "react";
+
+const TOOLTIP_TEXT =
+  "This is the number of extracted verse entries from Śrīla Prabhupāda's original translations and purports. Some consecutive verses are merged into a single entry (e.g. Texts 16–18), so the actual verse count in the original manuscript may differ.";
+
+export function ExtractedVerseCount({
+  count,
+  label = "verses",
+  className = "",
+}: {
+  count: number;
+  label?: string;
+  className?: string;
+}) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef<HTMLSpanElement>(null);
+
+  useEffect(() => {
+    if (!open) return;
+    function handleClick(e: MouseEvent) {
+      if (ref.current && !ref.current.contains(e.target as Node)) {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open]);
+
+  return (
+    <span ref={ref} className={`inline-flex items-center gap-1 ${className}`}>
+      <span>
+        {count.toLocaleString()} {label}
+      </span>
+      <span className="relative inline-flex">
+        <button
+          type="button"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+            setOpen((v) => !v);
+          }}
+          onMouseEnter={() => setOpen(true)}
+          onMouseLeave={() => setOpen(false)}
+          className="inline-flex items-center justify-center w-4 h-4 rounded-full border border-current opacity-50 hover:opacity-80 transition-opacity text-[10px] leading-none font-semibold"
+          aria-label="About verse count"
+        >
+          i
+        </button>
+        {open && (
+          <span className="absolute bottom-full left-1/2 -translate-x-1/2 mb-2 w-64 px-3 py-2 rounded-lg bg-zinc-900 dark:bg-zinc-700 text-white text-xs leading-relaxed shadow-lg z-50 pointer-events-none">
+            {TOOLTIP_TEXT}
+            <span className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-zinc-900 dark:border-t-zinc-700" />
+          </span>
+        )}
+      </span>
+    </span>
+  );
+}

app/books/page.tsx

@@ -0,0 +1,122 @@
+import fs from "fs";
+import path from "path";
+import Link from "next/link";
+import { ExtractedVerseCount } from "./extracted-verse-count";
+
+type BookInfo = {
+  slug: string;
+  title: string;
+  author: string;
+  description: string;
+  totalVerses: number;
+  href: string;
+};
+
+function loadBooks(): BookInfo[] {
+  const booksDir = path.join(process.cwd(), "app/lib/books");
+  const books: BookInfo[] = [];
+
+  // Bhagavad-gītā
+  const bgIntroPath = path.join(booksDir, "bg", "intro.json");
+  if (fs.existsSync(bgIntroPath)) {
+    const bg = JSON.parse(fs.readFileSync(bgIntroPath, "utf-8"));
+    const totalVerses = bg.chapters.reduce(
+      (sum: number, ch: { totalVerses: number }) => sum + ch.totalVerses,
+      0,
+    );
+    books.push({
+      slug: "bg",
+      title: bg.title,
+      author: bg.author,
+      description: `${bg.totalChapters} chapters`,
+      totalVerses,
+      href: "/books/bg",
+    });
+  }
+
+  // Śrīmad-Bhāgavatam
+  const sbIntroPath = path.join(booksDir, "sb", "intro.json");
+  if (fs.existsSync(sbIntroPath)) {
+    const sb = JSON.parse(fs.readFileSync(sbIntroPath, "utf-8"));
+    const totalChapters = sb.cantos.reduce(
+      (sum: number, c: { totalChapters: number }) => sum + c.totalChapters,
+      0,
+    );
+    const totalVerses = sb.cantos.reduce(
+      (sum: number, c: { chapters: { totalVerses: number }[] }) =>
+        sum +
+        c.chapters.reduce(
+          (s: number, ch: { totalVerses: number }) => s + ch.totalVerses,
+          0,
+        ),
+      0,
+    );
+    books.push({
+      slug: "sb",
+      title: sb.title,
+      author: sb.author,
+      description: `${sb.totalCantos} cantos, ${totalChapters} chapters`,
+      totalVerses,
+      href: "/books/sb",
+    });
+  }
+
+  return books;
+}
+
+export default function BooksPage() {
+  const books = loadBooks();
+
+  return (
+    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
+      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-8">
+        <div className="max-w-3xl mx-auto">
+          <Link
+            href="/"
+            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
+          >
+            &larr; Home
+          </Link>
+          <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-100">
+            Books
+          </h1>
+          <p className="mt-1 text-zinc-500 dark:text-zinc-400">
+            Structured verse-by-verse editions with Devanagari, transliteration,
+            synonyms, translation &amp; purports
+          </p>
+        </div>
+      </header>
+
+      <main className="max-w-3xl mx-auto px-6 py-8">
+        <div className="grid gap-4">
+          {books.map((book) => (
+            <Link
+              key={book.slug}
+              href={book.href}
+              className="block bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden hover:border-amber-400 dark:hover:border-zinc-600 hover:shadow-md transition-all"
+            >
+              <div className="px-6 py-5">
+                <h2 className="text-xl font-bold text-zinc-900 dark:text-zinc-100">
+                  {book.title}
+                </h2>
+                <p className="mt-1 text-sm text-zinc-500 dark:text-zinc-400">
+                  {book.author}
+                </p>
+                <div className="mt-3 flex items-center gap-3 text-sm">
+                  <span className="inline-flex items-center rounded-full bg-amber-100 dark:bg-zinc-800 px-3 py-0.5 text-amber-700 dark:text-amber-400 font-medium">
+                    {book.description}
+                  </span>
+                  <ExtractedVerseCount
+                    count={book.totalVerses}
+                    label="extracted verses"
+                    className="text-zinc-400 dark:text-zinc-500"
+                  />
+                </div>
+              </div>
+            </Link>
+          ))}
+        </div>
+      </main>
+    </div>
+  );
+}

app/books/sb/[canto]/[chapter]/page.tsx

@@ -0,0 +1,207 @@
+import fs from "fs";
+import path from "path";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { VerseIndex } from "./verse-index";
+
+type Synonym = {
+  word: string;
+  meanings: string[];
+};
+
+type Verse = {
+  book_title: string;
+  canto: number;
+  chapter: number;
+  verse: number;
+  verse_end?: number | null;
+  reference: string;
+  devanagari: string;
+  transliteration: string;
+  synonyms: Synonym[];
+  translation: string;
+  purport: string[];
+};
+
+type ChapterInfo = {
+  number: number;
+  title: string;
+  totalVerses: number;
+};
+
+type CantoInfo = {
+  number: number;
+  title: string;
+  totalChapters: number;
+  chapters: ChapterInfo[];
+};
+
+type Intro = {
+  book: string;
+  title: string;
+  author: string;
+  totalCantos: number;
+  cantos: CantoInfo[];
+};
+
+function getChapterVerses(canto: string, chapter: string): Verse[] {
+  const dir = path.join(
+    process.cwd(),
+    "app/lib/books/sb/cantos",
+    canto.padStart(2, "0"),
+    "chapters",
+    chapter.padStart(2, "0"),
+    "verses",
+  );
+  if (!fs.existsSync(dir)) return [];
+
+  return fs
+    .readdirSync(dir)
+    .filter((f) => f.endsWith(".json"))
+    .sort((a, b) => {
+      const na = parseInt(a);
+      const nb = parseInt(b);
+      return na - nb;
+    })
+    .map((f) => JSON.parse(fs.readFileSync(path.join(dir, f), "utf-8")));
+}
+
+function getCantoAndChapterInfo(
+  canto: string,
+  chapter: string,
+): { cantoInfo: CantoInfo; chapterInfo: ChapterInfo } | null {
+  const introPath = path.join(process.cwd(), "app/lib/books/sb/intro.json");
+  const intro: Intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));
+  const cantoInfo = intro.cantos.find(
+    (c) => c.number === parseInt(canto),
+  );
+  if (!cantoInfo) return null;
+  const chapterInfo = cantoInfo.chapters.find(
+    (ch) => ch.number === parseInt(chapter),
+  );
+  if (!chapterInfo) return null;
+  return { cantoInfo, chapterInfo };
+}
+
+export default async function SbChapterPage({
+  params,
+}: {
+  params: Promise<{ canto: string; chapter: string }>;
+}) {
+  const { canto, chapter } = await params;
+  const info = getCantoAndChapterInfo(canto, chapter);
+  if (!info) notFound();
+
+  const { cantoInfo, chapterInfo } = info;
+
+  const verses = getChapterVerses(canto, chapter);
+  if (verses.length === 0) notFound();
+
+  const verseList = verses.map((v) => ({
+    verse: v.verse,
+    verse_end: v.verse_end ?? undefined,
+    reference: v.reference,
+  }));
+
+  return (
+    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
+      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-6 sticky top-0 z-20">
+        <div className="max-w-5xl mx-auto">
+          <Link
+            href={`/books/sb/${canto}`}
+            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
+          >
+            &larr; Canto {cantoInfo.number}: {cantoInfo.title}
+          </Link>
+          <h1 className="mt-2 text-2xl font-bold text-zinc-900 dark:text-zinc-100">
+            Chapter {chapter}: {chapterInfo.title}
+          </h1>
+        </div>
+      </header>
+
+      <div className="w-full md:max-w-5xl mx-auto flex">
+        {/* Left sidebar — verse index */}
+        <VerseIndex verses={verseList} chapter={chapter} />
+
+        {/* Main content */}
+        <main className="flex-1 min-w-0 px-6 py-8 space-y-12">
+          {verses.map((verse) => (
+            <article
+              key={verse.reference}
+              id={`verse-${verse.verse}`}
+              className="bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden scroll-mt-24"
+            >
+              {/* Header */}
+              <div className="px-6 py-3 bg-amber-100 dark:bg-zinc-800 border-b border-amber-200 dark:border-zinc-700">
+                <span className="text-sm font-semibold text-amber-700 dark:text-amber-400">
+                  {verse.reference}
+                </span>
+              </div>
+
+              <div className="px-6 py-5 space-y-5">
+                {/* Devanagari */}
+                <div className="text-center">
+                  <p className="text-xl leading-relaxed text-red-800 dark:text-red-400 whitespace-pre-line font-serif">
+                    {verse.devanagari}
+                  </p>
+                </div>
+
+                {/* Transliteration */}
+                <div className="text-center">
+                  <p className="text-base italic text-zinc-700 dark:text-zinc-300 whitespace-pre-line">
+                    {verse.transliteration}
+                  </p>
+                </div>
+
+                {/* Synonyms */}
+                {verse.synonyms.length > 0 && (
+                  <div>
+                    <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
+                      Synonyms
+                    </h3>
+                    <p className="text-sm text-zinc-600 dark:text-zinc-400 leading-relaxed">
+                      {verse.synonyms.map((s, i) => (
+                        <span key={i}>
+                          <span className="italic text-zinc-800 dark:text-zinc-200">
+                            {s.word}
+                          </span>
+                          —{s.meanings.join(", ")}
+                          {i < verse.synonyms.length - 1 ? "; " : "."}
+                        </span>
+                      ))}
+                    </p>
+                  </div>
+                )}
+
+                {/* Translation */}
+                <div>
+                  <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
+                    Translation
+                  </h3>
+                  <p
+                    className="text-base text-zinc-900 dark:text-zinc-100 leading-relaxed font-medium"
+                    dangerouslySetInnerHTML={{ __html: verse.translation }}
+                  />
+                </div>
+
+                {/* Purport */}
+                {verse.purport.length > 0 && (
+                  <div>
+                    <h3 className="text-xs font-bold uppercase tracking-wider text-amber-600 dark:text-amber-500 mb-2">
+                      Purport
+                    </h3>
+                    <div className="text-sm text-zinc-700 dark:text-zinc-300 leading-relaxed space-y-3">
+                      {verse.purport.map((p, i) => (
+                        <p key={i} dangerouslySetInnerHTML={{ __html: p }} />
+                      ))}
+                    </div>
+                  </div>
+                )}
+              </div>
+            </article>
+          ))}
+        </main>
+      </div>
+    </div>
+  );
+}

app/books/sb/[canto]/[chapter]/verse-index.tsx

@@ -0,0 +1,62 @@
+"use client";
+
+import { useEffect, useState } from "react";
+
+type VerseEntry = {
+  verse: number;
+  verse_end?: number;
+  reference: string;
+};
+
+export function VerseIndex({
+  verses,
+  chapter,
+}: {
+  verses: VerseEntry[];
+  chapter: string;
+}) {
+  const [activeVerse, setActiveVerse] = useState<number | null>(null);
+
+  useEffect(() => {
+    const observer = new IntersectionObserver(
+      (entries) => {
+        for (const entry of entries) {
+          if (entry.isIntersecting) {
+            const id = entry.target.id;
+            const num = parseInt(id.replace("verse-", ""));
+            if (!isNaN(num)) setActiveVerse(num);
+          }
+        }
+      },
+      { rootMargin: "-20% 0px -60% 0px" },
+    );
+
+    const articles = document.querySelectorAll("article[id^='verse-']");
+    articles.forEach((el) => observer.observe(el));
+
+    return () => observer.disconnect();
+  }, []);
+
+  return (
+    <aside className="hidden lg:block w-48 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-amber-600 dark:text-amber-500 mb-3 px-2">
+        Verses
+      </h2>
+      <nav className="grid grid-cols-3 gap-0.5">
+        {verses.map((v) => (
+          <a
+            key={v.verse}
+            href={`#verse-${v.verse}`}
+            className={`px-2 py-1 rounded text-sm text-center transition-colors ${
+              activeVerse === v.verse
+                ? "bg-amber-200 dark:bg-amber-900/40 text-amber-900 dark:text-amber-300 font-medium"
+                : "text-zinc-600 dark:text-zinc-400 hover:bg-amber-100 dark:hover:bg-zinc-800 hover:text-zinc-900 dark:hover:text-zinc-200"
+            }`}
+          >
+            {v.verse_end ? `${v.verse}–${v.verse_end}` : v.verse}
+          </a>
+        ))}
+      </nav>
+    </aside>
+  );
+}

app/books/sb/[canto]/page.tsx

@@ -0,0 +1,95 @@
+import fs from "fs";
+import path from "path";
+import Link from "next/link";
+import { notFound } from "next/navigation";
+import { ExtractedVerseCount } from "../../extracted-verse-count";
+
+type ChapterInfo = {
+  number: number;
+  title: string;
+  totalVerses: number;
+};
+
+type CantoInfo = {
+  number: number;
+  title: string;
+  totalChapters: number;
+  chapters: ChapterInfo[];
+};
+
+type Intro = {
+  book: string;
+  title: string;
+  author: string;
+  totalCantos: number;
+  cantos: CantoInfo[];
+};
+
+function getIntro(): Intro {
+  const introPath = path.join(process.cwd(), "app/lib/books/sb/intro.json");
+  return JSON.parse(fs.readFileSync(introPath, "utf-8"));
+}
+
+export default async function CantoPage({
+  params,
+}: {
+  params: Promise<{ canto: string }>;
+}) {
+  const { canto } = await params;
+  const cantoNum = parseInt(canto);
+  const intro = getIntro();
+
+  const cantoInfo = intro.cantos.find((c) => c.number === cantoNum);
+  if (!cantoInfo) notFound();
+
+  const totalVerses = cantoInfo.chapters.reduce(
+    (sum, ch) => sum + ch.totalVerses,
+    0,
+  );
+
+  return (
+    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
+      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-8">
+        <div className="max-w-3xl mx-auto">
+          <Link
+            href="/books/sb"
+            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
+          >
+            &larr; Śrīmad-Bhāgavatam
+          </Link>
+          <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-100">
+            Canto {cantoInfo.number}: {cantoInfo.title}
+          </h1>
+          <p className="mt-1 text-zinc-500 dark:text-zinc-400">
+            {cantoInfo.totalChapters} chapters ·{" "}
+            <ExtractedVerseCount count={totalVerses} label="extracted verses" />
+          </p>
+        </div>
+      </header>
+      <main className="max-w-3xl mx-auto px-6 py-8">
+        <ul className="divide-y divide-amber-200 dark:divide-zinc-800 bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden">
+          {cantoInfo.chapters.map((ch) => (
+            <li key={ch.number}>
+              <Link
+                href={`/books/sb/${cantoNum}/${ch.number}`}
+                className="flex items-center justify-between px-5 py-4 hover:bg-amber-50 dark:hover:bg-zinc-800 transition-colors"
+              >
+                <div>
+                  <span className="text-sm text-amber-600 dark:text-amber-500 font-medium">
+                    Chapter {ch.number}
+                  </span>
+                  <p className="font-medium text-zinc-900 dark:text-zinc-100">
+                    {ch.title}
+                  </p>
+                </div>
+                <span className="text-sm text-zinc-400 shrink-0 ml-4">
+                  <ExtractedVerseCount count={ch.totalVerses} />
+                </span>
+              </Link>
+            </li>
+          ))}
+        </ul>
+      </main>
+    </div>
+  );
+}

app/books/sb/page.tsx

@@ -0,0 +1,85 @@
+import fs from "fs";
+import path from "path";
+import Link from "next/link";
+import { ExtractedVerseCount } from "../extracted-verse-count";
+
+type ChapterInfo = {
+  number: number;
+  title: string;
+  totalVerses: number;
+};
+
+type CantoInfo = {
+  number: number;
+  title: string;
+  totalChapters: number;
+  chapters: ChapterInfo[];
+};
+
+type Intro = {
+  book: string;
+  title: string;
+  author: string;
+  totalCantos: number;
+  cantos: CantoInfo[];
+};
+
+export default function SbPage() {
+  const introPath = path.join(process.cwd(), "app/lib/books/sb/intro.json");
+  const intro: Intro = JSON.parse(fs.readFileSync(introPath, "utf-8"));
+
+  return (
+    <div className="min-h-screen bg-amber-50 dark:bg-zinc-950">
+      <header className="border-b border-amber-200 dark:border-zinc-800 bg-white dark:bg-zinc-900 px-6 py-8">
+        <div className="max-w-3xl mx-auto">
+          <Link
+            href="/books"
+            className="text-sm text-amber-600 hover:text-amber-800 dark:text-zinc-400 dark:hover:text-zinc-100"
+          >
+            &larr; Books
+          </Link>
+          <h1 className="mt-3 text-3xl font-bold text-zinc-900 dark:text-zinc-100">
+            {intro.title}
+          </h1>
+          <p className="mt-1 text-zinc-500 dark:text-zinc-400">
+            {intro.author}
+          </p>
+        </div>
+      </header>
+      <main className="max-w-3xl mx-auto px-6 py-8">
+        <ul className="divide-y divide-amber-200 dark:divide-zinc-800 bg-white dark:bg-zinc-900 rounded-lg border border-amber-200 dark:border-zinc-800 overflow-hidden">
+          {intro.cantos.map((canto) => {
+            const totalVerses = canto.chapters.reduce(
+              (sum, ch) => sum + ch.totalVerses,
+              0,
+            );
+            return (
+              <li key={canto.number}>
+                <Link
+                  href={`/books/sb/${canto.number}`}
+                  className="flex items-center justify-between px-5 py-4 hover:bg-amber-50 dark:hover:bg-zinc-800 transition-colors"
+                >
+                  <div>
+                    <span className="text-sm text-amber-600 dark:text-amber-500 font-medium">
+                      Canto {canto.number}
+                    </span>
+                    <p className="font-medium text-zinc-900 dark:text-zinc-100">
+                      {canto.title}
+                    </p>
+                  </div>
+                  <span className="text-sm text-zinc-400 shrink-0 ml-4">
+                    {canto.totalChapters} chapters ·{" "}
+                    <ExtractedVerseCount
+                      count={totalVerses}
+                      label="extracted verses"
+                    />
+                  </span>
+                </Link>
+              </li>
+            );
+          })}
+        </ul>
+      </main>
+    </div>
+  );
+}