@k11k/better-blocks-astro-renderer 0.4.1 → 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.1",
+  "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/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;
 }>;
 
 /**