@conduction/docusaurus-preset 1.0.0 → 1.1.0

package/README.md

@@ -139,9 +139,18 @@ This is how product sites such as `mydash.conduction.nl/docs/...` adopt the bran
 
 ## Releasing
 
-Releases auto-publish on push to `main`. The [.github/workflows/publish-packages.yml](../.github/workflows/publish-packages.yml) workflow compares the version in this `package.json` against what's on `registry.npmjs.org`. Bump the version, push, the workflow publishes. No bump means no publish — the workflow exits cleanly. Tag pushes (`v*`) and manual `workflow_dispatch` runs (with an optional dry-run flag) are accepted for explicit republishes and emergency holds.
+Releases auto-publish on push to `main`, driven by [semantic-release](https://semantic-release.gitbook.io/) reading [conventional-commit](https://www.conventionalcommits.org/) messages. The [.github/workflows/publish-packages.yml](../.github/workflows/publish-packages.yml) workflow walks every commit since the last `@conduction/docusaurus-preset-v*` tag and decides what to ship:
 
-The diagram primitives ship inside the same tarball under `src/diagrams/`, so there is exactly one npm release per push.
+| Commit prefix | Release |
+| --- | --- |
+| `feat:` | minor bump |
+| `fix:` | patch bump |
+| `feat!:` or `BREAKING CHANGE:` footer | major bump |
+| anything else (`chore:`, `docs:`, `refactor:`, …) | no release |
+
+Path filtering via [semantic-release-monorepo](https://github.com/pmowrer/semantic-release-monorepo) restricts the commit scan to commits that touched files inside `docusaurus-preset/`. Edits to `preview/`, `sites/`, `brand/`, etc. never trigger a release. The diagram primitives ship inside the same tarball under `src/diagrams/`, so there is exactly one npm release per qualifying push.
+
+A manual `workflow_dispatch` is also accepted, with an optional `dry_run` flag that runs `semantic-release --dry-run` (no publish, no tag, no release) — useful for sanity-checking the next-version decision before merging a feature branch.
 
 **One-time setup**: configure the npm Trusted Publisher (OIDC) link.
 
@@ -159,16 +168,17 @@ That's it. There is no token to generate, no secret to install, no expiry to tra
 **Per release:**
 
 ```bash
-# Bump the preset version. The diagrams source ships inside the preset,
-# so there is one version to bump.
-$EDITOR docusaurus-preset/package.json   # "version": "0.2.0"
+# Make a change inside docusaurus-preset/ and commit with a conventional prefix.
+$EDITOR docusaurus-preset/src/components/Hero.jsx
 
-git add docusaurus-preset/package.json
-git commit -m "Bump @conduction/docusaurus-preset to 0.2.0"
-git push origin main   # the workflow detects the bump and publishes
+git add docusaurus-preset/src/components/Hero.jsx
+git commit -m "feat: add tagline slot to Hero"
+git push origin main   # semantic-release decides + publishes
 ```
 
-The workflow runs `npm publish --workspace @conduction/docusaurus-preset --access public`. Watch the run on the Actions tab. If it fails, fix the issue, bump the patch (`0.2.1`), push again — npm rejects re-publishing the same version, so a single failed run can't block a corrected re-bump.
+`package.json#version` on `main` stays stale on purpose — semantic-release uses the `@conduction/docusaurus-preset-v*` tag stream as its source of truth and bumps `package.json` in-place during the publish run without committing it back. The version on npm and the GitHub Releases page are authoritative; the field in `main`'s `package.json` only matters during a publish.
+
+If a publish fails mid-run, fix the issue and push another commit — `semantic-release` will retry the bump on the next run. npm rejects re-publishing the same version, so the next attempt picks the following patch.
 
 ## License
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "1.0.0",
+  "version": "1.1.0",
   "description": "Conduction brand preset for Docusaurus 3. Tokens, theme, navbar, footer, i18n config for nl/en/de/fr, and the React component library that powers conduction.nl and the Conduction product sites.",
   "main": "src/index.js",
   "exports": {

package/src/components/ContactCta/ContactCta.jsx

@@ -0,0 +1,74 @@
+/**
+ * <ContactCta />
+ *
+ * Soft tinted call-to-action panel for the bottom of academy
+ * tutorials, docs pages, or any long-form content. Two-column
+ * layout: title + body on the left, single primary action on the
+ * right. A subtle pointy-top hex motif decorates the right edge
+ * so the panel reads as a Conduction surface, not a generic blue
+ * box.
+ *
+ * Tone: cobalt-50 ground, cobalt-900 type, cobalt-700 body, KNVB
+ * orange reserved for the trailing arrow inside the CTA. One
+ * orange accent per screen rule still holds: this panel uses the
+ * orange only as a 12px arrow, never as the button fill.
+ *
+ * Distinct from <CtaBanner /> (cobalt-900 marketing footer with
+ * dual CTAs and centred type) and from <NewsletterCta /> (form,
+ * not a single button). Use ContactCta when:
+ *   - Reader has finished a tutorial and you want them to email
+ *   - You're at the end of a docs page and want them to read further
+ *   - You need a "talk to us" prompt that is calmer than the dark
+ *     CtaBanner but louder than a plain link
+ *
+ * Usage in MDX:
+ *
+ *   <ContactCta
+ *     title="Wil je meer weten?"
+ *     body="Mail ons. We helpen je in een halve dag op weg met je eigen Woo-publicatieflow."
+ *     cta={{ label: "Mail ons", href: "mailto:info@conduction.nl" }}
+ *   />
+ *
+ * Mirrors the .contact-cta section in
+ * preview/components/contact-cta.html.
+ */
+
+import React from 'react';
+import styles from './ContactCta.module.css';
+
+export default function ContactCta({
+  title,
+  body,
+  cta,
+  className,
+}) {
+  const composed = [styles.panel, className].filter(Boolean).join(' ');
+  return (
+    <aside className={composed}>
+      <span className={styles.hex1} aria-hidden="true" />
+      <span className={styles.hex2} aria-hidden="true" />
+      <span className={styles.hex3} aria-hidden="true" />
+
+      <div className={styles.copy}>
+        {title && <h3 className={styles.title}>{title}</h3>}
+        {body && <p className={styles.body}>{body}</p>}
+      </div>
+
+      {cta && (
+        <a
+          className={styles.button}
+          href={cta.href || '#'}
+          target={cta.href && /^https?:/.test(cta.href) ? '_blank' : undefined}
+          rel={cta.href && /^https?:/.test(cta.href) ? 'noreferrer noopener' : undefined}
+        >
+          <span>{cta.label}</span>
+          <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14"
+               fill="none" stroke="currentColor" strokeWidth="2"
+               strokeLinecap="round" strokeLinejoin="round">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+        </a>
+      )}
+    </aside>
+  );
+}

package/src/components/ContactCta/ContactCta.module.css

@@ -0,0 +1,121 @@
+.panel {
+  position: relative;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  gap: var(--space-6);
+  align-items: center;
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-7) var(--space-8);
+  margin: var(--space-10) 0 var(--space-6);
+  overflow: hidden;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+@media (max-width: 720px) {
+  .panel {
+    grid-template-columns: 1fr;
+    padding: var(--space-6);
+    gap: var(--space-4);
+  }
+}
+
+/* Decorative pointy-top hexes layered on the right edge. They sit
+   behind the copy via z-index 0 with the copy and button on z-index 1.
+   Pointy-top point-up only — never rotated, never flat-top. */
+.hex1,
+.hex2,
+.hex3 {
+  position: absolute;
+  background: var(--c-cobalt-100);
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  pointer-events: none;
+  z-index: 0;
+}
+
+.hex1 {
+  width: 220px;
+  height: 254px;
+  right: -60px;
+  top: -40px;
+  opacity: 0.7;
+}
+
+.hex2 {
+  width: 110px;
+  height: 127px;
+  right: 80px;
+  bottom: -30px;
+  opacity: 0.5;
+  background: var(--c-cobalt-200);
+}
+
+.hex3 {
+  width: 56px;
+  height: 65px;
+  right: 220px;
+  top: 18px;
+  opacity: 0.5;
+  background: var(--c-cobalt-200);
+}
+
+@media (max-width: 720px) {
+  .hex1 { right: -100px; top: -80px; }
+  .hex2, .hex3 { display: none; }
+}
+
+.copy {
+  position: relative;
+  z-index: 1;
+  display: grid;
+  gap: var(--space-2);
+  max-width: 60ch;
+}
+
+.title {
+  font-size: 24px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0;
+  line-height: 1.25;
+}
+
+.body {
+  font-size: 16px;
+  color: var(--c-cobalt-700);
+  line-height: 1.6;
+  margin: 0;
+}
+
+.button {
+  position: relative;
+  z-index: 1;
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 22px;
+  background: var(--c-blue-cobalt);
+  color: white;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  font-weight: 600;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  text-decoration: none;
+  border-radius: var(--radius-pill, 999px);
+  transition: background 120ms ease, transform 120ms ease, box-shadow 120ms ease;
+  white-space: nowrap;
+}
+
+.button:hover {
+  background: var(--c-cobalt-900);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 16px rgba(13, 36, 78, 0.18);
+  color: white;
+}
+
+.button svg {
+  color: var(--c-orange-knvb);
+}

package/src/components/ContentDetailHero/ContentDetailHero.jsx

@@ -91,6 +91,21 @@ export default function ContentDetailHero({
         </div>
       )}
 
+      {title && <h1 className={styles.title}>{title}</h1>}
+
+      <div className={styles.cover}>
+        <span className={styles.watermark} aria-hidden="true" />
+        {cover && cover.src
+          ? <img src={cover.src} alt={cover.alt || ''} className={styles.coverImg} />
+          : (
+            <HexThumbnail size="xl" tone={cover && cover.tone || 'cobalt'}>
+              {cover && cover.icon}
+            </HexThumbnail>
+          )}
+      </div>
+
+      {summary && <p className={styles.summary}>{summary}</p>}
+
       {(typeLabel || tags.length > 0) && (
         <div className={styles.tags}>
           {typeLabel && (
@@ -102,9 +117,6 @@ export default function ContentDetailHero({
         </div>
       )}
 
-      {title && <h1 className={styles.title}>{title}</h1>}
-      {summary && <p className={styles.summary}>{summary}</p>}
-
       {(author || date || duration) && (
         <div className={styles.meta}>
           {(author || date) && (
@@ -120,17 +132,6 @@ export default function ContentDetailHero({
           {duration && <span className={styles.duration}>{duration}</span>}
         </div>
       )}
-
-      <div className={styles.cover}>
-        <span className={styles.watermark} aria-hidden="true" />
-        {cover && cover.src
-          ? <img src={cover.src} alt={cover.alt || ''} className={styles.coverImg} />
-          : (
-            <HexThumbnail size="xl" tone={cover && cover.tone || 'cobalt'}>
-              {cover && cover.icon}
-            </HexThumbnail>
-          )}
-      </div>
     </section>
   );
 }

package/src/components/ContentDetailHero/ContentDetailHero.module.css

@@ -40,7 +40,6 @@
   color: var(--c-cobalt-900);
   margin: 0;
   line-height: 1.1;
-  max-width: 24ch;
 }
 @media (max-width: 700px) { .title { font-size: 32px; } }
 

package/src/components/NextSteps/NextSteps.jsx

@@ -0,0 +1,71 @@
+/**
+ * <NextSteps /> + <NextStep />
+ *
+ * Action-card row for the end of an academy tutorial. Replaces the
+ * ad-hoc "Volgende stap" h2 + bullet list pattern that was
+ * duplicated across tutorials.
+ *
+ * Each <NextStep/> is a clickable card with a short title, a
+ * one-line description, and a target href. The whole card is the
+ * link target so the entire tile is clickable. Use the optional
+ * `cta` prop to override the default "Read more" label.
+ *
+ * Usage:
+ *
+ *   <NextSteps title="Volgende stap" lede="Met deze vier modes kun je elk type document koppelen.">
+ *     <NextStep
+ *       href="/apps/opencatalogi"
+ *       title="Toon op een portaal"
+ *       cta="Bekijk OpenCatalogi"
+ *     >
+ *       Combineer publicaties met andere apps op een publiek portaal.
+ *     </NextStep>
+ *     <NextStep
+ *       href="/apps/docudesk"
+ *       title="Documenten lakken"
+ *       cta="Bekijk DocuDesk"
+ *     >
+ *       Anonimiseer privacygevoelige passages voor publicatie.
+ *     </NextStep>
+ *   </NextSteps>
+ *
+ * Mirrors the .next-steps section in
+ * preview/components/next-steps.html.
+ */
+
+import React from 'react';
+import styles from './NextSteps.module.css';
+
+export function NextStep({href, title, cta = 'Read more', children, className}) {
+  const composed = [styles.card, className].filter(Boolean).join(' ');
+  const Tag = href ? 'a' : 'div';
+  const props = href ? {href} : {};
+  return (
+    <Tag className={composed} {...props}>
+      {title && <div className={styles.title}>{title}</div>}
+      {children && <div className={styles.body}>{children}</div>}
+      {href && (
+        <div className={styles.cta}>
+          {cta}
+          <svg viewBox="0 0 24 24" aria-hidden="true" width="14" height="14"
+               fill="none" stroke="currentColor" strokeWidth="2"
+               strokeLinecap="round" strokeLinejoin="round">
+            <path d="M5 12h14M12 5l7 7-7 7"/>
+          </svg>
+        </div>
+      )}
+    </Tag>
+  );
+}
+
+export default function NextSteps({title = 'Next steps', lede, children, columns = 3, className}) {
+  const composed = [styles.section, className].filter(Boolean).join(' ');
+  const gridClass = [styles.grid, styles['cols-' + columns]].join(' ');
+  return (
+    <section className={composed}>
+      {title && <h2 className={styles.title}>{title}</h2>}
+      {lede && <p className={styles.lede}>{lede}</p>}
+      <div className={gridClass}>{children}</div>
+    </section>
+  );
+}

package/src/components/NextSteps/NextSteps.module.css

@@ -0,0 +1,89 @@
+.section {
+  margin: var(--space-10) 0 var(--space-8);
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0 0 var(--space-3);
+  line-height: 1.2;
+}
+
+.lede {
+  font-size: 17px;
+  color: var(--c-cobalt-700);
+  line-height: 1.6;
+  margin: 0 0 var(--space-5);
+}
+
+.grid {
+  display: grid;
+  gap: var(--space-4);
+}
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.cols-4 { grid-template-columns: repeat(4, 1fr); }
+
+@media (max-width: 800px) {
+  .cols-2, .cols-3, .cols-4 { grid-template-columns: 1fr; }
+}
+
+.card {
+  display: grid;
+  gap: var(--space-2);
+  padding: var(--space-5) var(--space-5) var(--space-4);
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-md);
+  text-decoration: none;
+  color: inherit;
+  transition: border-color 120ms ease, transform 120ms ease, box-shadow 120ms ease;
+}
+
+a.card:hover {
+  border-color: var(--c-cobalt-300);
+  transform: translateY(-1px);
+  box-shadow: 0 6px 20px rgba(13, 36, 78, 0.08);
+}
+
+.card .title {
+  font-size: 16px;
+  font-weight: 700;
+  color: var(--c-cobalt-900);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.card .body {
+  font-size: 14px;
+  color: var(--c-cobalt-700);
+  line-height: 1.55;
+}
+
+.card .body code {
+  background: var(--c-cobalt-100);
+  border-radius: 4px;
+  padding: 1px 5px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 13px;
+  color: var(--c-cobalt-900);
+}
+
+.cta {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--c-blue-cobalt);
+  margin-top: var(--space-1);
+}
+
+a.card:hover .cta {
+  color: var(--c-cobalt-900);
+}

package/src/components/Prerequisites/Prerequisites.jsx

@@ -0,0 +1,48 @@
+/**
+ * <Prerequisites /> + <PrerequisiteItem />
+ *
+ * Tinted card with a checklist of things the reader needs before
+ * starting an academy tutorial. Replaces the ad-hoc "What you need"
+ * h2 + bullet list pattern that was duplicated across tutorials.
+ *
+ * Each item renders with a small hex-bullet on the left so the list
+ * reads as a checklist instead of generic prose. The card uses the
+ * cobalt-50 tinted-surface tone, matching <FeatureList/> and
+ * <FAQ/> on academy pages.
+ *
+ * Usage:
+ *
+ *   <Prerequisites title="Wat je nodig hebt">
+ *     <PrerequisiteItem>
+ *       Een werkend Woo-register. Volg eerst <a href="...">Een Woo-register opzetten</a> als je dat nog niet hebt.
+ *     </PrerequisiteItem>
+ *     <PrerequisiteItem>Een publicatie-object met bekende UUID</PrerequisiteItem>
+ *     <PrerequisiteItem><code>curl</code>, basisauth, en een paar testbestanden</PrerequisiteItem>
+ *   </Prerequisites>
+ *
+ * Mirrors the .prerequisites section in
+ * preview/components/prerequisites.html.
+ */
+
+import React from 'react';
+import styles from './Prerequisites.module.css';
+
+export function PrerequisiteItem({children, className}) {
+  const composed = [styles.item, className].filter(Boolean).join(' ');
+  return (
+    <li className={composed}>
+      <span className={styles.bullet} aria-hidden="true" />
+      <span className={styles.body}>{children}</span>
+    </li>
+  );
+}
+
+export default function Prerequisites({title = 'What you need', children, className}) {
+  const composed = [styles.card, className].filter(Boolean).join(' ');
+  return (
+    <aside className={composed}>
+      {title && <h2 className={styles.title}>{title}</h2>}
+      <ul className={styles.list}>{children}</ul>
+    </aside>
+  );
+}

package/src/components/Prerequisites/Prerequisites.module.css

@@ -0,0 +1,64 @@
+.card {
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: var(--space-6) var(--space-7);
+  margin: var(--space-6) 0;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0 0 var(--space-3);
+  line-height: 1.3;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-2);
+}
+
+.item {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: var(--space-2);
+  align-items: start;
+  font-size: 16px;
+  line-height: 1.55;
+  color: var(--c-cobalt-700);
+}
+
+.bullet {
+  width: 14px;
+  height: 14px;
+  margin-top: 6px;
+  background: var(--c-cobalt-700);
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  flex-shrink: 0;
+}
+
+.body {
+  display: block;
+}
+
+.body a {
+  color: var(--c-blue-cobalt);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+.body a:hover { color: var(--c-cobalt-900); }
+
+.body code {
+  background: var(--c-cobalt-100);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 14px;
+  color: var(--c-cobalt-900);
+}

package/src/components/Troubleshooting/Troubleshooting.jsx

@@ -0,0 +1,57 @@
+/**
+ * <Troubleshooting /> + <TroubleshootingItem />
+ *
+ * Structured error-recovery list for academy tutorials. Replaces
+ * the ad-hoc "Probleemoplossing" h2 + bold-text pattern that was
+ * duplicated across tutorials.
+ *
+ * Each item pairs a `symptom` (the user-visible error or behaviour)
+ * with the body content (what to do about it). The symptom renders
+ * in a subtle warning-tinted slot on the left; the body fills the
+ * rest. Keep symptoms short and specific (literal error strings
+ * work best). Keep bodies under three sentences.
+ *
+ * Usage:
+ *
+ *   <Troubleshooting title="Probleemoplossing">
+ *     <TroubleshootingItem symptom="The uploaded file exceeds upload_max_filesize">
+ *       Verhoog <code>upload_max_filesize</code> en <code>post_max_size</code> in
+ *       <code>php.ini</code>, of stap over op Mode 4.
+ *     </TroubleshootingItem>
+ *     <TroubleshootingItem symptom="Bestand verschijnt niet in /files-lijst na MOVE">
+ *       Controleer dat de <code>Destination</code>-header naar <code>Open Registers/...</code> wijst.
+ *     </TroubleshootingItem>
+ *   </Troubleshooting>
+ *
+ * Mirrors the .troubleshooting section in
+ * preview/components/troubleshooting.html.
+ */
+
+import React from 'react';
+import styles from './Troubleshooting.module.css';
+
+export function TroubleshootingItem({symptom, children, className}) {
+  const composed = [styles.item, className].filter(Boolean).join(' ');
+  return (
+    <div className={composed}>
+      {symptom && (
+        <div className={styles.symptom}>
+          <span className={styles.icon} aria-hidden="true">!</span>
+          <code className={styles.symptomText}>{symptom}</code>
+        </div>
+      )}
+      <div className={styles.body}>{children}</div>
+    </div>
+  );
+}
+
+export default function Troubleshooting({title = 'Troubleshooting', lede, children, className}) {
+  const composed = [styles.section, className].filter(Boolean).join(' ');
+  return (
+    <section className={composed}>
+      {title && <h2 className={styles.title}>{title}</h2>}
+      {lede && <p className={styles.lede}>{lede}</p>}
+      <div className={styles.list}>{children}</div>
+    </section>
+  );
+}

package/src/components/Troubleshooting/Troubleshooting.module.css

@@ -0,0 +1,83 @@
+.section {
+  margin: var(--space-10) 0 var(--space-8);
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.title {
+  font-size: 28px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0 0 var(--space-3);
+  line-height: 1.2;
+}
+
+.lede {
+  font-size: 17px;
+  color: var(--c-cobalt-700);
+  line-height: 1.6;
+  margin: 0 0 var(--space-5);
+}
+
+.list {
+  display: grid;
+  gap: var(--space-3);
+}
+
+.item {
+  background: var(--c-cobalt-50);
+  border-left: 3px solid var(--c-orange-knvb);
+  border-radius: var(--radius-md);
+  padding: var(--space-4) var(--space-5);
+  display: grid;
+  gap: var(--space-2);
+}
+
+.symptom {
+  display: flex;
+  align-items: center;
+  gap: var(--space-2);
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px;
+  height: 20px;
+  background: var(--c-orange-knvb);
+  color: white;
+  font-family: var(--conduction-typography-font-family-display);
+  font-weight: 700;
+  font-size: 13px;
+  clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
+  flex-shrink: 0;
+}
+
+.symptomText {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 14px;
+  color: var(--c-cobalt-900);
+  background: transparent;
+  padding: 0;
+  font-weight: 600;
+  word-break: break-word;
+}
+
+.body {
+  font-size: 16px;
+  color: var(--c-cobalt-700);
+  line-height: 1.6;
+}
+
+.body code {
+  background: var(--c-cobalt-100);
+  border-radius: 4px;
+  padding: 1px 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 14px;
+  color: var(--c-cobalt-900);
+}
+
+.body p { margin: var(--space-2) 0 0; }
+.body p:first-child { margin-top: 0; }

package/src/components/index.js

@@ -94,3 +94,12 @@ export {
 export {default as NewsletterCta} from './NewsletterCta/NewsletterCta.jsx';
 export {default as RelatedPosts} from './RelatedPosts/RelatedPosts.jsx';
 export {default as ContentDetailHero} from './ContentDetailHero/ContentDetailHero.jsx';
+
+/* Tutorial-body components. Drop-in replacements for the ad-hoc
+   "What you need", "Troubleshooting", and "Next steps" h2 + bullet
+   patterns that academy tutorials kept duplicating. Designed for use
+   inside an MDX academy post body. */
+export {default as Prerequisites, PrerequisiteItem} from './Prerequisites/Prerequisites.jsx';
+export {default as Troubleshooting, TroubleshootingItem} from './Troubleshooting/Troubleshooting.jsx';
+export {default as NextSteps, NextStep} from './NextSteps/NextSteps.jsx';
+export {default as ContactCta} from './ContactCta/ContactCta.jsx';