@tenphi/cookbook 0.31.4 → 0.32.0

package/dist/components.d.ts

@@ -1,4 +1,4 @@
 
-import { Callout, Card, CodeGroup, Logo, Preview, Steps, Tab, Tabs } from "@tenphi/renderer/components";
+import { Callout, Card, CardGrid, CodeGroup, Logo, Preview, Steps, Tab, Tabs } from "@tenphi/renderer/components";
 export type * from "@tenphi/renderer/components";
-export { Callout, Card, CodeGroup, Logo, Preview, Steps, Tab, Tabs };
+export { Callout, Card, CardGrid, CodeGroup, Logo, Preview, Steps, Tab, Tabs };

package/dist/components.js

@@ -1,3 +1,3 @@
 #!/usr/bin/env node
-import { Callout, Card, CodeGroup, Logo, Preview, Steps, Tab, Tabs } from "@tenphi/renderer/components";
-export { Callout, Card, CodeGroup, Logo, Preview, Steps, Tab, Tabs };
+import { Callout, Card, CardGrid, CodeGroup, Logo, Preview, Steps, Tab, Tabs } from "@tenphi/renderer/components";
+export { Callout, Card, CardGrid, CodeGroup, Logo, Preview, Steps, Tab, Tabs };

package/docs/authoring.mdx

@@ -8,6 +8,7 @@ sidebar:
 import {
   Callout,
   Card,
+  CardGrid,
   CodeGroup,
   Preview,
   Steps,
@@ -99,16 +100,26 @@ Each panel retains keyboard-accessible tabs and readable fallback content.
 Use a card to link to another page, or omit `href` to present a standalone
 summary. `href` is used as written: give a public URL, including any Astro
 `base`, or a `#fragment`. Unlike Markdown links, `.md` paths are not rewritten;
-`cookbook check-build` reports broken targets. `Steps` renders an ordered list;
-put ordinary `li` elements inside it.
+`cookbook check-build` reports broken targets. Wrap cards in `CardGrid` to show
+them in two equal-height columns on wider screens and a single column on narrow
+ones. `Steps` renders an ordered list; put ordinary `li` elements inside it.
 
 ```mdx
-import { Card, Steps } from "@tenphi/cookbook/components";
+import { Card, CardGrid, Steps } from "@tenphi/cookbook/components";
 
 <Card title="On-page navigation" href="#on-page-navigation">
   Offer a compact contents list on smaller screens.
 </Card>
 
+<CardGrid>
+  <Card title="Tabs" href="#tabs">
+    Switch between equivalent examples.
+  </Card>
+  <Card title="Code groups" href="#code-groups">
+    Show the same command for several package managers.
+  </Card>
+</CardGrid>
+
 <Steps>
   <li>Choose a content source.</li>
   <li>Configure the navigation.</li>
@@ -120,6 +131,15 @@ import { Card, Steps } from "@tenphi/cookbook/components";
   Offer a compact contents list on smaller screens.
 </Card>
 
+<CardGrid>
+  <Card title="Tabs" href="#tabs">
+    Switch between equivalent examples.
+  </Card>
+  <Card title="Code groups" href="#code-groups">
+    Show the same command for several package managers.
+  </Card>
+</CardGrid>
+
 <Steps>
   <li>Choose a content source.</li>
   <li>Configure the navigation.</li>
@@ -298,6 +318,7 @@ A `mermaid` fence renders a static, theme-aware diagram; see
 | `Callout`   | Optional `kind` (`note` by default, `tip`, `caution`, or `danger`) and `title`                                                                                                                  |
 | `CodeGroup` | Optional `label` (default "Code examples") and required `items`: `{ label, code, language? }[]`                                                                                                 |
 | `Card`      | Optional `title` and `href`; renders an article or link with slot content                                                                                                                       |
+| `CardGrid`  | Grid container for `Card` elements: one column on narrow screens, two equal-height columns from 40rem                                                                                           |
 | `Steps`     | Ordered list container; supply `li` elements                                                                                                                                                    |
 | `Logo`      | Optional `label`, `decorative`, and root `class`; renders the Cookbook mark                                                                                                                     |
 | `Preview`   | Required `title`; optional `html`, `css`, `javascript`, public-file `scripts`, minimum frame `height`, and overlay `buffer`; isolates examples in a sandboxed iframe that fits scripted content |

package/docs/component-styles.md

@@ -70,7 +70,7 @@ parts:
 | Code and diagrams             | `MarkdownCodeBlock`, `MarkdownInlineCode`, `SyntaxHighlight`, `CodeGroup`, `Mermaid`                                    |
 | Search                        | `SearchButton`, `Search`, `SearchResults`                                                                               |
 | Table of contents             | `TableOfContents`, `MobileTableOfContents`, `TableOfContentsLayout`                                                     |
-| Cards, notes, and tabs        | `Card`, `Callout`, `MarkdownAlert`, `Tabs`, `Tab`, `Steps`, `Preview`                                                   |
+| Cards, notes, and tabs        | `Card`, `CardGrid`, `Callout`, `MarkdownAlert`, `Tabs`, `Tab`, `Steps`, `Preview`                                       |
 | Home page hero                | `Hero`                                                                                                                  |
 | Page layout                   | `PageFrame`, `Layout`, `MainPane`                                                                                       |
 | Footer and page controls      | `Footer`, `Pagination`, `PageActions`, `ThemeSelect`                                                                    |
@@ -136,11 +136,12 @@ it stays complete when a surface changes.
 
 #### Authoring components
 
-* `Card`: `Heading2`, `Heading3`, `Paragraph`
+* `Card`: `Heading2`, `Heading3`, `Paragraph`, `Body`
+* `CardGrid`: `Card`
 * `Callout`: `Title`, `Body`
-* `CodeGroup`: `Caption`, `Pre`, `Code`
-* `Tab`: `Heading`, `HiddenHeading`
-* `Tabs`: `List`, `Button`, `SelectedButton`, `FocusedButton`
+* `CodeGroup`: `Caption`, `MarkdownCodeBlock`, `Pre`, `Code`
+* `Tab`: `Heading`, `HiddenHeading`, `Body`
+* `Tabs`: `List`, `Tab`, `Button`, `SelectedButton`, `FocusedButton`
 * `Steps`: `Item`, `Marker`
 * `Hero`: `Visual`, `DarkVisual`, `LightVisual`, `Stack`, `Copy`, `Title`, `Tagline`, `Actions`, `Action`, `HoverAction`, `PrimaryAction`, `SecondaryAction`, `MinimalAction`, `ActionIcon`
 * `Preview`: `Caption`, `Stage`, `Frame`, `Code`, `Summary`, `HoverSummary`, `ActiveSummary`, `Pre`
@@ -350,8 +351,8 @@ and accessibility utilities. `MainPane` and `MainContent` own the content
 layout. `Markdown` owns prose, lists, links, quotations, and disclosure
 anatomy. `Search` owns the dialog; `SearchResults` owns the search field and
 Pagefind results UI.
-`MarkdownAlert` styles rendered alert blockquotes; `Card`, `Callout`, and
-`Steps` style Cookbook components. `Callout` reads its colors from the root
+`MarkdownAlert` styles rendered alert blockquotes; `Card`, `CardGrid`,
+`Callout`, and `Steps` style Cookbook components. `Callout` reads its colors from the root
 `#callout-border`, `#callout-text`, and `#callout-surface` tokens, which change
 per kind through `[data-kind="tip"]`, `"caution"`, and `"danger"` states.
 
@@ -362,7 +363,11 @@ owning `blockMargin` consumes both tokens, and a surrounding prose/layout rule
 changes only the start token. For example, `Callout: { "$margin-block-end": "3x" }`
 changes the end spacing while retaining Markdown's spacing before the callout.
 Document foundations reset these tokens on every element to prevent inheritance
-into nested content. For content-panel padding, use `MainContent.Panel`'s
+into nested content. Markdown's spacing stops at component anatomy:
+`Tabs.Tab`, `Tab.Body`, `CodeGroup.MarkdownCodeBlock`, `Card.Body`, and
+`CardGrid.Card` reset both tokens, so tab panels, code under a caption, card
+bodies, and cards in a grid keep their component gaps. Set the start token on
+those sub-elements to add space back. For content-panel padding, use `MainContent.Panel`'s
 `$padding-block-start` and `$padding-block-end` tokens in the same way.
 
 ### Code blocks and syntax highlighting

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@tenphi/cookbook",
-  "version": "0.31.4",
+  "version": "0.32.0",
   "description": "Repository-native static documentation for Astro",
   "type": "module",
   "keywords": [
@@ -68,8 +68,8 @@
   "author": "Andrey Yamanov",
   "license": "MIT",
   "dependencies": {
-    "@tenphi/docs": "0.31.4",
-    "@tenphi/renderer": "0.31.4"
+    "@tenphi/docs": "0.32.0",
+    "@tenphi/renderer": "0.32.0"
   },
   "peerDependencies": {
     "astro": "^7.3.2"