hd-garden 0.9.2 → 0.9.4

package/app/bookshelf/[bookId]/page.tsx

@@ -0,0 +1,72 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { bookshelf } from "@garden/bookshelf";
+import { Bookshelf } from "../../components/bookshelf";
+import { pageAlternates } from "../../lib/page-alternates";
+import { siteConfig } from "../../site.config";
+import { isStaticPlaceholder, STATIC_PLACEHOLDER, staticParams } from "../../../ui/garden/static-params.mjs";
+import type { BookshelfBook } from "../../components/bookshelf/types";
+
+function hubBooks(): { shelfTitle: string; book: BookshelfBook }[] {
+  if (!bookshelf) return [];
+  const found: { shelfTitle: string; book: BookshelfBook }[] = [];
+  for (const row of bookshelf.catalog) {
+    for (const book of row.books) {
+      if ((book.posts?.length ?? 0) > 1) found.push({ shelfTitle: bookshelf.title, book });
+    }
+  }
+  return found;
+}
+
+export function generateStaticParams() {
+  return staticParams(
+    hubBooks().map(({ book }) => ({ bookId: book.id })),
+    { bookId: STATIC_PLACEHOLDER },
+  );
+}
+
+export async function generateMetadata({
+  params,
+}: {
+  params: Promise<{ bookId: string }>;
+}): Promise<Metadata> {
+  const { bookId } = await params;
+  const found = hubBooks().find((item) => item.book.id === bookId);
+  if (!found) return {};
+  return {
+    title: found.book.title,
+    description: found.book.posts?.find((post) => post.summary)?.summary,
+    alternates: pageAlternates(`/bookshelf/${found.book.id}`),
+  };
+}
+
+/** `/bookshelf/<id>` — one multi-note volume. Single-note books stay on the shelf. */
+export default async function BookHubPage({
+  params,
+}: {
+  params: Promise<{ bookId: string }>;
+}) {
+  const { bookId } = await params;
+  const found = hubBooks().find((item) => item.book.id === bookId);
+  if (!found || !bookshelf) {
+    if (isStaticPlaceholder(bookId)) return null;
+    notFound();
+  }
+  return (
+    <main className="sh-main bookshelf-page" id="content">
+      <header className="sh-head">
+        {bookshelf.eyebrow ? <p className="sh-kicker">{bookshelf.eyebrow}</p> : null}
+        <h1 id="sh-title">{bookshelf.title}</h1>
+        {bookshelf.description ? <p className="sh-deck">{bookshelf.description}</p> : null}
+      </header>
+      <Bookshelf
+        embedded
+        catalog={bookshelf.catalog}
+        notes={bookshelf.notes}
+        title={bookshelf.title}
+        eyebrow={bookshelf.eyebrow ?? siteConfig.name}
+        initialHub={found.book.id}
+      />
+    </main>
+  );
+}

package/app/bookshelf/load.mjs

@@ -13,7 +13,8 @@ export function bookshelfConfigPath(root = gardenSiteRoot()) {
 /**
  * The site shelf, or null when `content/bookshelf.yaml` is absent.
  * Absent means the package demo (click-test only). A file here is the live shelf:
- * each book's `post` is read from `content/posts` and turned into note HTML.
+ * each book's `post` or `posts` is read from `content/posts`. One note becomes
+ * the open-book HTML. Several notes stay on the book for `/bookshelf/<id>`.
  * `preparedPosts`, when passed, are the sync pipeline's posts (rewritten asset
  * URLs). Otherwise the markdown files are read directly.
  * Throws `BookshelfConfigError` when the file, a cover, or a post path is broken.
@@ -35,22 +36,33 @@ export function loadBookshelf(root = gardenSiteRoot(), preparedPosts) {
       title: post.title,
       description: post.description,
       cover: post.cover,
+      date: typeof post.date === "string" ? post.date : undefined,
       content: post.content,
     }))
     : readReferencedPosts(root, config);
   return bookshelfMountFromFile(config, sources);
 }
 
+function referencedPostPaths(book) {
+  if (Array.isArray(book.posts) && book.posts.length > 0) {
+    return book.posts
+      .map((entry) => (typeof entry === "string" ? entry : entry?.path))
+      .filter((path) => typeof path === "string" && path.trim());
+  }
+  return book.post ? [book.post] : [];
+}
+
 function readReferencedPosts(root, config) {
   const seen = new Set();
   const posts = [];
   for (const shelf of config.shelves) {
     for (const book of shelf.books) {
-      if (!book.post) continue;
-      const relative = normalizeBookshelfPostPath(book.post);
-      if (seen.has(relative)) continue;
-      seen.add(relative);
-      posts.push(readPost(root, relative));
+      for (const entry of referencedPostPaths(book)) {
+        const relative = normalizeBookshelfPostPath(entry);
+        if (seen.has(relative)) continue;
+        seen.add(relative);
+        posts.push(readPost(root, relative));
+      }
     }
   }
   return posts;
@@ -85,6 +97,7 @@ function readPost(root, postPath) {
     title: optionalString(data.title),
     description: optionalString(data.description),
     cover: optionalString(data.cover),
+    date: optionalDate(data.date),
     content: parsed.content,
   };
 }
@@ -94,3 +107,8 @@ function optionalString(value) {
   const trimmed = value.trim();
   return trimmed ? trimmed : undefined;
 }
+
+function optionalDate(value) {
+  if (value instanceof Date && !Number.isNaN(value.getTime())) return value.toISOString();
+  return optionalString(value);
+}

package/app/components/bookshelf/BookHub.tsx

@@ -0,0 +1,142 @@
+import Link from "next/link";
+import { siteHref } from "../../lib/site-href";
+import { ui } from "../../lib/i18n";
+import type { BookshelfBook, BookshelfBookPost, BookshelfNoteKind, BookshelfSource } from "./types";
+
+function day(value: string) {
+  const date = new Date(value);
+  if (Number.isNaN(date.getTime())) return value.slice(0, 10);
+  return new Intl.DateTimeFormat("en-CA", {
+    timeZone: "Asia/Shanghai",
+    year: "numeric",
+    month: "2-digit",
+    day: "2-digit",
+  }).format(date);
+}
+
+function kindLabel(kind: BookshelfNoteKind | undefined) {
+  const t = ui();
+  switch (kind) {
+    case "overview":
+      return t.bookHubOverview;
+    case "excerpt":
+      return t.bookHubExcerpt;
+    case undefined:
+      return "";
+    default: {
+      const unexpected: never = kind;
+      return unexpected;
+    }
+  }
+}
+
+function sourceHref(href: string) {
+  if (href.startsWith("/") && !href.startsWith("//")) return siteHref(href);
+  return href;
+}
+
+function isExternal(href: string) {
+  return /^(?:https?:)?\/\//iu.test(href);
+}
+
+/** Hub chips are Douban and PDF. The Chinese label is the zh shelf; English sites write Douban. */
+function isDoubanChip(label: string) {
+  return label === "豆瓣" || /^douban$/iu.test(label);
+}
+
+function hubSources(sources: readonly BookshelfSource[] | undefined) {
+  const list = sources ?? [];
+  const douban = list.filter((source) => isDoubanChip(source.label));
+  const pdf = list.filter((source) => /pdf/iu.test(source.label));
+  return [...douban, ...pdf];
+}
+
+function NoteCard({ entry }: { entry: BookshelfBookPost }) {
+  const t = ui();
+  const label = kindLabel(entry.kind);
+  const href = entry.href ?? siteHref(`/blog/${entry.path}`);
+  const when = entry.date ? day(entry.date) : "";
+  const count = entry.words ? t.wordCount(entry.words) : "";
+  return (
+    <Link className="book-hub-note" href={href}>
+      {label ? <p className="book-hub-note-label">{label}</p> : null}
+      <h3>{entry.title}</h3>
+      {entry.summary ? <p className="book-hub-note-sum">{entry.summary}</p> : null}
+      {when || count ? (
+        <p className="book-hub-note-meta">
+          {when}
+          {when && count ? " · " : null}
+          {count}
+        </p>
+      ) : null}
+    </Link>
+  );
+}
+
+function SourceChips({ sources }: { sources: readonly BookshelfSource[] }) {
+  const shown = hubSources(sources);
+  if (!shown.length) return null;
+  const t = ui();
+  return (
+    <div className="book-hub-sources">
+      {shown.map((source) => {
+        const href = sourceHref(source.href);
+        const external = isExternal(source.href);
+        const pdf = /pdf/iu.test(source.label);
+        return (
+          <span className="book-hub-source" key={`${source.label}\u0000${source.href}`}>
+            <a
+              className="book-hub-chip"
+              href={href}
+              {...(external ? { target: "_blank", rel: "noopener noreferrer" } : {})}
+            >
+              {source.label}
+              <span className="ext" aria-hidden="true">↗</span>
+            </a>
+            {pdf ? <span className="book-hub-source-note">{t.bookHubPdfNote}</span> : null}
+          </span>
+        );
+      })}
+    </div>
+  );
+}
+
+/** Book hub (本书). Multi-note volumes land here; a note card is a plain article link. */
+export function BookHub({ shelfTitle, book }: { shelfTitle: string; book: BookshelfBook }) {
+  const t = ui();
+  const jacket = typeof book.cover === "string" ? book.cover : "";
+  const posts = book.posts ?? [];
+  return (
+    <main className="sh-main book-hub" id="content">
+      <p className="book-hub-crumb">
+        <Link href={siteHref("/columns")}>{t.homeColumns}</Link>
+        <span aria-hidden="true"> · </span>
+        <Link href={siteHref("/bookshelf")}>{shelfTitle}</Link>
+        <span aria-hidden="true"> · </span>
+        <span aria-current="page">{t.bookHubCurrent}</span>
+      </p>
+
+      <section className="book-hub-card" aria-labelledby="book-hub-title">
+        {jacket ? (
+          <div className="book-hub-cover">
+            <img src={jacket} alt={t.coverLabel(book.title)} width={148} />
+          </div>
+        ) : null}
+        <div className="book-hub-meta">
+          <h1 id="book-hub-title">{book.title}</h1>
+          {book.author ? <p className="book-hub-author">{book.author}</p> : null}
+          <SourceChips sources={book.sources ?? []} />
+        </div>
+      </section>
+
+      <h2 className="book-hub-notes-head">{t.bookHubNotes}</h2>
+      <ul className="book-hub-notes">
+        {posts.map((entry) => (
+          <li key={entry.path}>
+            <NoteCard entry={entry} />
+          </li>
+        ))}
+      </ul>
+    </main>
+  );
+}

package/app/components/bookshelf/Bookshelf.tsx

@@ -12,9 +12,20 @@ function withNoteLinks(catalog: BookshelfShelf[] | undefined) {
   if (!catalog) return catalog;
   return catalog.map((row) => ({
     ...row,
-    books: row.books.map((book) =>
-      book.post ? { ...book, href: siteHref(`/blog/${book.post}`) } : book,
-    ),
+    books: row.books.map((book) => {
+      const posts = book.posts?.map((entry) => ({
+        ...entry,
+        href: siteHref(`/blog/${entry.path}`),
+      }));
+      const hub = book.hub ? siteHref(book.hub) : undefined;
+      if (!book.post && !posts?.length && !hub) return book;
+      return {
+        ...book,
+        ...(book.post ? { href: siteHref(`/blog/${book.post}`) } : {}),
+        ...(posts?.length ? { posts } : {}),
+        ...(hub ? { hub } : {}),
+      };
+    }),
   }));
 }
 
@@ -68,6 +79,7 @@ function shelfShell(brand: string, title: string) {
     <div class="note-view" id="noteView" hidden>
       <article class="note">
         <button type="button" class="back-btn" id="backBtn">← 返回书架</button>
+        <div class="hub-panel" id="hubPanel" hidden></div>
         <div class="note-hero">
           <div class="note-cover" id="noteCover"></div>
           <div class="note-meta">
@@ -90,7 +102,14 @@ function shelfShell(brand: string, title: string) {
 }
 
 /** Approved bookshelf. Pass `catalog` and `notes` for a site shelf; omit them for the package demo. */
-export function Bookshelf({ catalog, notes, title, eyebrow, embedded = false }: BookshelfProps) {
+export function Bookshelf({
+  catalog,
+  notes,
+  title,
+  eyebrow,
+  embedded = false,
+  initialHub,
+}: BookshelfProps) {
   const ref = useRef<HTMLDivElement>(null);
   useLayoutEffect(() => {
     const root = ref.current;
@@ -100,13 +119,18 @@ export function Bookshelf({ catalog, notes, title, eyebrow, embedded = false }:
       if (saved != null) window.scrollTo(0, saved);
     };
     applyScroll();
-    const unmount = mountBookshelf(root, { catalog: withNoteLinks(catalog), notes });
+    const unmount = mountBookshelf(root, {
+      catalog: withNoteLinks(catalog),
+      notes,
+      initialHub,
+      shelfHref: siteHref("/bookshelf"),
+    });
     const frame = window.requestAnimationFrame(applyScroll);
     return () => {
       window.cancelAnimationFrame(frame);
       unmount?.();
     };
-  }, [catalog, notes, title, eyebrow, embedded]);
+  }, [catalog, notes, title, eyebrow, embedded, initialHub]);
   return (
     <div
       className={embedded ? "bookshelf-demo is-site" : "bookshelf-demo"}

package/app/components/bookshelf/bookshelf.css

@@ -283,6 +283,7 @@
   overscroll-behavior-x: contain;
   scrollbar-width: none;
 }
+.bookshelf-demo .spines.has-jackets { gap: 10px; }
 .bookshelf-demo .spines::-webkit-scrollbar { display: none; }
 
 .bookshelf-demo .spine {
@@ -353,14 +354,29 @@
   transition: opacity 220ms var(--ease-motion);
 }
 
-/* Mode C: temporary expand on spine wall */
-/* resting spines: solid hue only; cover image only when expanded */
-/* Expanded / extracting face must not fall back to bk-* (#513688 etc.).
-   The jacket is .cover-art. A missing image stays cream shelf, not a shell pad. */
+/* Mode C: temporary expand on spine wall.
+   Demo spines (no .has-jacket) stay cloth until expand.
+   A real books[].cover is .has-jacket: the <img> is the face at rest,
+   on hover, and while extracting. bk-* must not paint a plate over it.
+   The old `.spine[class*="img-"] { background-image: none !important }`
+   was that plate. */
 .bookshelf-demo .spine.is-expanded,
-.bookshelf-demo .spine.is-extracting {
+.bookshelf-demo .spine.is-extracting,
+.bookshelf-demo .spine.has-jacket {
   background-color: transparent !important;
 }
+.bookshelf-demo .spine.has-jacket {
+  padding: 0;
+  writing-mode: horizontal-tb;
+  text-orientation: mixed;
+  letter-spacing: 0;
+  background-image: none;
+}
+.bookshelf-demo .spine.has-jacket > span {
+  opacity: 0 !important;
+  visibility: hidden !important;
+}
+.bookshelf-demo .spine > .cover-art,
 .bookshelf-demo .spine.is-expanded > .cover-art,
 .bookshelf-demo .spine.is-extracting > .cover-art {
   position: absolute;
@@ -374,33 +390,34 @@
   z-index: 1;
   border-radius: inherit;
 }
-.bookshelf-demo .spine[class*="img-"] {
+/* Demo catalog only: cloth at rest, jacket when the spine expands. */
+.bookshelf-demo .spine[class*="img-"]:not(.has-jacket) {
   background-image: none !important;
 }
-.bookshelf-demo .spine.is-expanded[class*="img-"] {
+.bookshelf-demo .spine.is-expanded[class*="img-"]:not(.has-jacket) {
   background-image: unset;
 }
-.bookshelf-demo .spine.is-expanded.img-clean-code { background-image: url("/covers/clean-code.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-refactoring { background-image: url("/covers/refactoring.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-design-patterns { background-image: url("/covers/design-patterns.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-pragmatic-programmer { background-image: url("/covers/pragmatic-programmer.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-continuous-delivery { background-image: url("/covers/continuous-delivery.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-phoenix-project { background-image: url("/covers/phoenix-project.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-mythical-man-month { background-image: url("/covers/mythical-man-month.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-tdd { background-image: url("/covers/tdd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-lean-startup { background-image: url("/covers/lean-startup.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-release-it { background-image: url("/covers/release-it.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-sre { background-image: url("/covers/sre.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-team-topologies { background-image: url("/covers/team-topologies.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-accelerate { background-image: url("/covers/accelerate.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-ddd { background-image: url("/covers/ddd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-microservices { background-image: url("/covers/microservices.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-eaa { background-image: url("/covers/eaa.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-ddia { background-image: url("/covers/ddia.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-fundamentals-sa { background-image: url("/covers/fundamentals-sa.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-implementing-ddd { background-image: url("/covers/implementing-ddd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-systems-performance { background-image: url("/covers/systems-performance.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-clean-architecture { background-image: url("/covers/clean-architecture.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-clean-code:not(.has-jacket) { background-image: url("/covers/clean-code.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-refactoring:not(.has-jacket) { background-image: url("/covers/refactoring.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-design-patterns:not(.has-jacket) { background-image: url("/covers/design-patterns.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-pragmatic-programmer:not(.has-jacket) { background-image: url("/covers/pragmatic-programmer.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-continuous-delivery:not(.has-jacket) { background-image: url("/covers/continuous-delivery.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-phoenix-project:not(.has-jacket) { background-image: url("/covers/phoenix-project.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-mythical-man-month:not(.has-jacket) { background-image: url("/covers/mythical-man-month.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-tdd:not(.has-jacket) { background-image: url("/covers/tdd.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-lean-startup:not(.has-jacket) { background-image: url("/covers/lean-startup.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-release-it:not(.has-jacket) { background-image: url("/covers/release-it.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-sre:not(.has-jacket) { background-image: url("/covers/sre.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-team-topologies:not(.has-jacket) { background-image: url("/covers/team-topologies.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-accelerate:not(.has-jacket) { background-image: url("/covers/accelerate.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-ddd:not(.has-jacket) { background-image: url("/covers/ddd.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-microservices:not(.has-jacket) { background-image: url("/covers/microservices.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-eaa:not(.has-jacket) { background-image: url("/covers/eaa.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-ddia:not(.has-jacket) { background-image: url("/covers/ddia.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-fundamentals-sa:not(.has-jacket) { background-image: url("/covers/fundamentals-sa.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-implementing-ddd:not(.has-jacket) { background-image: url("/covers/implementing-ddd.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-systems-performance:not(.has-jacket) { background-image: url("/covers/systems-performance.jpg") !important; }
+.bookshelf-demo .spine.is-expanded.img-clean-architecture:not(.has-jacket) { background-image: url("/covers/clean-architecture.jpg") !important; }
 
 .bookshelf-demo .spine.is-expanded {
   width: 100px;
@@ -435,7 +452,8 @@
     box-shadow var(--t-collapse) var(--ease-motion),
     background-size var(--t-collapse) var(--ease-motion);
 }
-/* C collapse: shrink while still "expanded" class — drop cover image to solid hue immediately, never flash a wide black plate */
+/* C collapse: shrink while still "expanded". Real jackets keep .cover-art.
+   Demo cloth may drop the expanded photo; it must not clear a .has-jacket. */
 .bookshelf-demo .spine.is-expanded.is-collapsing {
   width: 28px;
   height: 150px;
@@ -449,10 +467,18 @@
   box-shadow:
     inset -1px 0 0 rgba(255,255,255,0.12),
     inset 1px 0 0 rgba(0,0,0,0.18);
-  background-image: none !important;
   background-size: auto;
   z-index: 2;
 }
+.bookshelf-demo .spine.is-expanded.is-collapsing:not(.has-jacket) {
+  background-image: none !important;
+}
+.bookshelf-demo .spine.has-jacket.is-expanded.is-collapsing {
+  writing-mode: horizontal-tb;
+  padding: 0;
+  background-color: transparent !important;
+  background-image: none;
+}
 .bookshelf-demo .spine.is-expanded.is-collapsing.s-tall { width: 30px; height: 168px; }
 .bookshelf-demo .spine.is-expanded.is-collapsing.s-mid { width: 28px; height: 152px; }
 .bookshelf-demo .spine.is-expanded.is-collapsing.s-short { width: 24px; height: 136px; }
@@ -823,7 +849,24 @@
   opacity: 0 !important;
 }
 
-/* ux16: exact homeRect standing spine — full height, spine width, slides out/in */
+/* ux16: exact homeRect standing spine — full height, spine width, slides out/in.
+   A real jacket fills the slot. bk-* cloth is only the filler / demo label. */
+.bookshelf-demo .flyer.flyer-spine-slot.has-jacket {
+  background: none !important;
+  background-color: transparent !important;
+  box-shadow: none;
+  padding: 0;
+}
+.bookshelf-demo .flyer-spine-slot-img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  object-position: center bottom;
+  display: block;
+  border-radius: inherit;
+}
 .bookshelf-demo .flyer.flyer-spine-slot {
   position: fixed;
   margin: 0;
@@ -1161,35 +1204,6 @@
   .bookshelf-demo .s-tall { height: 148px; width: 26px; }
   .bookshelf-demo .s-mid { height: 134px; width: 24px; }
   .bookshelf-demo .s-short { height: 120px; width: 20px; }
-  /* resting spines: solid hue only; cover image only when expanded */
-.bookshelf-demo .spine[class*="img-"] {
-  background-image: none !important;
-}
-.bookshelf-demo .spine.is-expanded[class*="img-"] {
-  background-image: unset;
-}
-.bookshelf-demo .spine.is-expanded.img-clean-code { background-image: url("/covers/clean-code.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-refactoring { background-image: url("/covers/refactoring.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-design-patterns { background-image: url("/covers/design-patterns.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-pragmatic-programmer { background-image: url("/covers/pragmatic-programmer.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-continuous-delivery { background-image: url("/covers/continuous-delivery.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-phoenix-project { background-image: url("/covers/phoenix-project.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-mythical-man-month { background-image: url("/covers/mythical-man-month.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-tdd { background-image: url("/covers/tdd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-lean-startup { background-image: url("/covers/lean-startup.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-release-it { background-image: url("/covers/release-it.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-sre { background-image: url("/covers/sre.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-team-topologies { background-image: url("/covers/team-topologies.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-accelerate { background-image: url("/covers/accelerate.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-ddd { background-image: url("/covers/ddd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-microservices { background-image: url("/covers/microservices.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-eaa { background-image: url("/covers/eaa.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-ddia { background-image: url("/covers/ddia.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-fundamentals-sa { background-image: url("/covers/fundamentals-sa.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-implementing-ddd { background-image: url("/covers/implementing-ddd.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-systems-performance { background-image: url("/covers/systems-performance.jpg") !important; }
-.bookshelf-demo .spine.is-expanded.img-clean-architecture { background-image: url("/covers/clean-architecture.jpg") !important; }
-
 .bookshelf-demo .spine.is-expanded {
     width: 90px;
     height: 136px;
@@ -1328,6 +1342,10 @@ body:has(.bookshelf-demo.is-site) .sh-header .sh-word {
   text-underline-offset: 3px;
 }
 .bookshelf-demo .note-read[hidden] { display: none; }
+.bookshelf-demo .hub-panel[hidden] { display: none !important; }
+.bookshelf-demo .note-view.is-hub .note-hero,
+.bookshelf-demo .note-view.is-hub .note-body { display: none !important; }
+.bookshelf-demo .hub-panel .book-hub { width: 100%; padding: 0; }
 .bookshelf-demo.is-site .note-read { color: var(--blue); }
 @media (max-width: 820px) {
   .bookshelf-demo.is-site .note { padding: 16px 20px 64px; }