@k11k/better-blocks-astro-renderer 0.4.0 → 0.5.0

package/README.md

@@ -147,6 +147,31 @@ const { blocks } = Astro.props;
 <BlocksRenderer content={blocks} blocks={{ callout: MyCallout }} />
 ```
 
+### Details / Summary (Collapsible)
+
+Block-level `details` nodes render a native, keyboard-accessible `<details>` / `<summary>` disclosure with **zero client-side JavaScript** &mdash; the open/closed state is handled entirely by the browser. The `summary` field is the plain-text label, the optional `defaultOpen` boolean maps to the HTML `open` attribute (honored on initial render so screen readers get the correct state), and `children` are block-level content (paragraphs, lists, tables, images, and nested `details`) rendered after the summary. The default markup carries stable `bb-details` and `bb-details-summary` classes.
+
+A small **scoped `<style>`** ships with the component (still zero client-side JavaScript): a GitHub-inspired card with a rotating disclosure marker. Retheme it from your own CSS via the `--bb-details-*` custom properties (`--bb-details-border`, `--bb-details-bg`, `--bb-details-summary-bg`, `--bb-details-marker`) without replacing the markup:
+
+```css
+.bb-details {
+  --bb-details-border: #c8c8c8;
+  --bb-details-summary-bg: #eee;
+}
+```
+
+To replace the markup entirely, override the `details` block. It receives `summary` and `defaultOpen`; the nested children arrive via `<slot />`:
+
+```astro
+---
+import { BlocksRenderer } from '@k11k/better-blocks-astro-renderer';
+import MyDetails from '../components/MyDetails.astro';
+const { blocks } = Astro.props;
+---
+
+<BlocksRenderer content={blocks} blocks={{ details: MyDetails }} />
+```
+
 ## Supported Blocks
 
 | Block                           | Default element      | Source                      |
@@ -165,6 +190,7 @@ const { blocks } = Astro.props;
 | `math` (inline/block)           | `<span>` / `<div>`   | Better Blocks               |
 | `diagram` (mermaid)             | `<div>` (inline SVG) | Better Blocks               |
 | `callout` (admonition)          | `<aside>`            | Better Blocks               |
+| `details` (collapsible)         | `<details>`          | Better Blocks               |
 
 ### Block properties
 
@@ -186,6 +212,8 @@ const { blocks } = Astro.props;
 | `value`       | math                      | LaTeX source rendered with KaTeX                      |
 | `format`      | diagram                   | `mermaid` (the only supported diagram format)         |
 | `value`       | diagram                   | Mermaid source, pre-rendered to SVG on the server     |
+| `summary`     | details                   | Plain-text label for the `<summary>`                  |
+| `defaultOpen` | details                   | Open on initial render (HTML `open` attribute)        |
 
 ## Supported Modifiers
 

package/index.ts

@@ -24,6 +24,7 @@ export type {
   DiagramNode,
   CalloutNode,
   CalloutVariant,
+  DetailsNode,
   TextAlign,
   StyleValue,
   CustomBlocksConfig,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@k11k/better-blocks-astro-renderer",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Astro renderer for Strapi v5 Blocks content with full Better Blocks plugin support — colors, tables, to-do lists, media embeds, alignment, and more. Native Astro components, zero client-side JavaScript.",
   "type": "module",
   "types": "./index.ts",

package/src/Block.astro

@@ -6,6 +6,7 @@ import Table from './Table.astro';
 import Math from './Math.astro';
 import Diagram from './Diagram.astro';
 import Callout from './Callout.astro';
+import Details from './Details.astro';
 import { getBlockStyle, getPlainText } from './utils';
 
 interface Props {
@@ -160,3 +161,5 @@ const EmbedComp = blocks?.['media-embed'] as any;
 {block.type === 'diagram' && <Diagram node={block} blocks={blocks} />}
 
 {block.type === 'callout' && <Callout node={block} blocks={blocks} modifiers={modifiers} />}
+
+{block.type === 'details' && <Details node={block} blocks={blocks} modifiers={modifiers} />}

package/src/Callout.astro

@@ -16,7 +16,7 @@ interface Props {
 const { node, blocks, modifiers } = Astro.props;
 
 // GitHub-style alert metadata: default label and octicon path. Accent colors
-// live in the scoped <style> below so they can adapt to dark mode.
+// live in the scoped <style> below (GitHub light palette, matching the React renderer).
 const VARIANTS: Record<CalloutVariant, { label: string; icon: string }> = {
   note: {
     label: 'Note',
@@ -73,6 +73,8 @@ const CalloutComp = blocks?.callout as any;
 <style>
   .bb-callout {
     border-left: 0.25rem solid var(--bb-callout-accent, #0969da);
+    /* Subtle accent-tinted background (~8% opacity) to match the editor preview. */
+    background-color: color-mix(in srgb, var(--bb-callout-accent, #0969da) 8%, transparent);
     padding: 0.5rem 1rem;
     margin: 1rem 0;
   }
@@ -80,9 +82,13 @@ const CalloutComp = blocks?.callout as any;
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin: 0 0 0.25rem;
+    /* GitHub spacing: tight title line with a 1rem gap before the body. */
+    line-height: 1;
+    margin: 0 0 1rem;
     font-weight: 600;
-    color: var(--bb-callout-accent, #0969da);
+    /* GitHub's caution variant uses a slightly different title color than its
+       accent/border, so allow an optional per-variant title override. */
+    color: var(--bb-callout-title-color, var(--bb-callout-accent, #0969da));
   }
   .bb-callout-icon {
     width: 16px;
@@ -90,14 +96,18 @@ const CalloutComp = blocks?.callout as any;
     flex: none;
     fill: currentColor;
   }
-  .bb-callout-body > :first-child {
+  /* Collapse the body's outer margins so the content sits flush within the
+     callout padding (top/bottom balanced). :global is required because the body
+     blocks are rendered by other components and don't carry this component's
+     scoped id, so a plain scoped selector would never match them. */
+  .bb-callout-body > :global(:first-child) {
     margin-top: 0;
   }
-  .bb-callout-body > :last-child {
+  .bb-callout-body > :global(:last-child) {
     margin-bottom: 0;
   }
 
-  /* Light-mode accents (GitHub palette) */
+  /* Accent colors (GitHub light palette) — matches the React renderer. */
   .bb-callout-note {
     --bb-callout-accent: #0969da;
   }
@@ -112,24 +122,6 @@ const CalloutComp = blocks?.callout as any;
   }
   .bb-callout-caution {
     --bb-callout-accent: #cf222e;
-  }
-
-  /* Dark-mode accents adapt automatically */
-  @media (prefers-color-scheme: dark) {
-    .bb-callout-note {
-      --bb-callout-accent: #4493f8;
-    }
-    .bb-callout-tip {
-      --bb-callout-accent: #3fb950;
-    }
-    .bb-callout-important {
-      --bb-callout-accent: #ab7df8;
-    }
-    .bb-callout-warning {
-      --bb-callout-accent: #d29922;
-    }
-    .bb-callout-caution {
-      --bb-callout-accent: #f85149;
-    }
+    --bb-callout-title-color: #d1242f;
   }
 </style>

package/src/Details.astro

@@ -0,0 +1,84 @@
+---
+import type { DetailsNode, CustomBlocksConfig, CustomModifiersConfig } from './types';
+import Block from './Block.astro';
+
+interface Props {
+  node: DetailsNode;
+  blocks?: CustomBlocksConfig;
+  modifiers?: CustomModifiersConfig;
+}
+
+const { node, blocks, modifiers } = Astro.props;
+
+const DetailsComp = blocks?.details as any;
+---
+
+{
+  DetailsComp ? (
+    <DetailsComp summary={node.summary} defaultOpen={node.defaultOpen}>
+      {node.children.map((child) => (
+        <Block block={child} blocks={blocks} modifiers={modifiers} />
+      ))}
+    </DetailsComp>
+  ) : (
+    <details class="bb-details" open={node.defaultOpen}>
+      <summary class="bb-details-summary">{node.summary}</summary>
+      <div class="bb-details-body">
+        {node.children.map((child) => (
+          <Block block={child} blocks={blocks} modifiers={modifiers} />
+        ))}
+      </div>
+    </details>
+  )
+}
+
+<style>
+  /* GitHub-inspired collapsible. Zero client-side JavaScript — the open/closed
+     state is handled natively by the <details>/<summary> elements. */
+  .bb-details {
+    border: 1px solid var(--bb-details-border, #d0d7de);
+    border-radius: 6px;
+    margin: 1rem 0;
+    background: var(--bb-details-bg, #fff);
+  }
+  .bb-details-summary {
+    cursor: pointer;
+    padding: 0.5rem 1rem;
+    font-weight: 600;
+    list-style: none;
+    border-radius: 6px;
+    background: var(--bb-details-summary-bg, #f6f8fa);
+  }
+  /* Hide the browser's native disclosure triangle and draw our own that
+     rotates when the disclosure is open. */
+  .bb-details-summary::-webkit-details-marker {
+    display: none;
+  }
+  .bb-details-summary::before {
+    content: '\25B8';
+    display: inline-block;
+    margin-right: 0.5rem;
+    color: var(--bb-details-marker, #57606a);
+    transition: transform 0.15s ease;
+  }
+  .bb-details[open] > .bb-details-summary::before {
+    transform: rotate(90deg);
+  }
+  .bb-details[open] > .bb-details-summary {
+    border-bottom: 1px solid var(--bb-details-border, #d0d7de);
+    border-radius: 6px 6px 0 0;
+  }
+  /* Inset the body content. Collapse the body's outer margins so it sits flush
+     within the box (top/bottom balanced). :global is required because the body
+     blocks are rendered by other components and don't carry this component's
+     scoped id. */
+  .bb-details-body {
+    padding: 0.5rem 1rem;
+  }
+  .bb-details-body > :global(:first-child) {
+    margin-top: 0;
+  }
+  .bb-details-body > :global(:last-child) {
+    margin-bottom: 0;
+  }
+</style>

package/src/types.ts

@@ -144,6 +144,13 @@ export type CalloutNode = {
   children: BlockNode[];
 };
 
+export type DetailsNode = {
+  type: 'details';
+  summary: string;
+  defaultOpen?: boolean;
+  children: BlockNode[];
+};
+
 export type BlockNode =
   | ParagraphNode
   | HeadingNode
@@ -156,7 +163,8 @@ export type BlockNode =
   | MediaEmbedNode
   | MathNode
   | DiagramNode
-  | CalloutNode;
+  | CalloutNode
+  | DetailsNode;
 
 export type BlocksContent = BlockNode[];
 
@@ -196,6 +204,7 @@ export type AstroComponentFactory = (...args: any[]) => any;
  * - `math` — `{ formula: string; inline: boolean }`
  * - `diagram` — `{ code: string; format: 'mermaid' }`
  * - `callout` — `{ variant: CalloutVariant; title?: string }` (children via `<slot />`)
+ * - `details` — `{ summary: string; defaultOpen?: boolean }` (children via `<slot />`)
  */
 export type CustomBlocksConfig = Partial<{
   paragraph: AstroComponentFactory;
@@ -215,6 +224,7 @@ export type CustomBlocksConfig = Partial<{
   math: AstroComponentFactory;
   diagram: AstroComponentFactory;
   callout: AstroComponentFactory;
+  details: AstroComponentFactory;
 }>;
 
 /**