@conduction/docusaurus-preset 1.1.0 → 1.2.0

package/README.md

@@ -11,7 +11,7 @@ Source lives inside the [design-system monorepo](https://github.com/ConductionNL
 - **Brand CSS** — tokens (cobalt palette, KNVB orange, Plex Mono, hex clip-paths, Common Ground yellow) auto-applied to Docusaurus's Infima theme variables. Navbar, footer, sidebar, buttons, code blocks all inherit the brand without a single swizzle.
 - **i18n config** — four locales pinned: NL default at the URL root, EN/DE/FR at `/en/`, `/de/`, `/fr/`. `htmlLang` per locale, `trailingSlash: true`, locale dropdown ready.
 - **Brand-default navbar** — locale-dropdown + GitHub link. Sites override `items[]` for site-specific navigation.
-- **Brand-default footer** — three-column link grid + Conduction-tells (KvK, BTW, address). Sites override per page or globally.
+- **Brand-default footer** — three-column link grid + Conduction-tells (KvK, BTW, address). Per-property override: pass `footer: { links: [...] }` to swap columns and inherit the brand copyright unchanged. Spread `baseFooterLinks()` to keep one or two brand columns alongside site-specific ones.
 - **Sensible defaults** — `trailingSlash`, `onBrokenLinks: 'warn'`, `respectPrefersColorScheme`, dark-mode brand mapping.
 
 ## Usage
@@ -59,7 +59,7 @@ The function returns a complete Docusaurus config with brand defaults pre-applie
 | `projectName` |  | `'design-system'` | GitHub repo. |
 | `i18n` |  | nl / en / de / fr, NL default | Override the brand-default i18n block. |
 | `navbar` |  | locale dropdown + GitHub | Merged into the brand-default navbar object. |
-| `footer` |  | three-column link grid | Replaces the brand-default footer. |
+| `footer` |  | three-column link grid + KvK/BTW copyright | Per-property fallback: any of `style` / `links` / `copyright` you omit keeps the brand default. Pass `footer: { links: [...] }` to swap columns and inherit the brand copyright. |
 | `customCss` |  | `[]` | Site-specific CSS, appended to `brand.css`. |
 | `presets` |  | `[['classic', …]]` | Replaces the default preset list. |
 | `plugins` |  | `[]` | Docusaurus plugins. |
@@ -67,7 +67,23 @@ The function returns a complete Docusaurus config with brand defaults pre-applie
 | `editUrl` |  | undefined | Edit-this-doc link. |
 | `blog` |  | enabled | Set `false` to disable the blog plugin. |
 
-Also exported: `I18N`, `baseNavbar(siteName)`, `baseFooter()` for sites that want to compose manually.
+Also exported: `I18N`, `baseNavbar(siteName)`, `baseFooter()`, `baseFooterLinks()`, `baseFooterCopyright()` for sites that want to compose manually. Common pattern on a product page: pass site-specific columns plus the Conduction column from the brand default:
+
+```js
+const { createConfig, baseFooterLinks } = require('@conduction/docusaurus-preset');
+
+module.exports = createConfig({
+  // …
+  footer: {
+    links: [
+      { title: 'MyProduct', items: [/* …site links */] },
+      // Spread the brand "Conduction" column to keep the corporate anchor.
+      ...baseFooterLinks().filter((c) => c.title === 'Conduction'),
+    ],
+    // copyright: omitted -> brand KvK/BTW/IBAN inherits.
+  },
+});
+```
 
 ## Brand CSS exports
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "1.1.0",
+  "version": "1.2.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.module.css

@@ -8,7 +8,7 @@
   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);
+  margin: var(--space-12) 0 var(--space-8);
   overflow: hidden;
   font-family: var(--conduction-typography-font-family-body);
 }

package/src/components/Outcomes/Outcomes.jsx

@@ -0,0 +1,54 @@
+/**
+ * <Outcomes /> + <Outcome />
+ *
+ * Sibling to <Prerequisites />, intended for the *top* of academy
+ * tutorials. Lists the concrete things the reader will have built,
+ * learned, or achieved by the end of the tutorial. Goes right after
+ * the lede paragraph and before <Prerequisites />, so the reader
+ * scans:
+ *   - "What am I going to walk away with?" (Outcomes)
+ *   - "What do I need before I start?"     (Prerequisites)
+ *   - the actual tutorial body
+ *
+ * Visual: tinted card identical to <Prerequisites />, but each item
+ * uses an orange checkmark glyph (achievement) instead of the orange
+ * hex bullet (need). Same tone, distinct semantics.
+ *
+ * Usage:
+ *
+ *   <Outcomes title="Wat je leert">
+ *     <Outcome>Hoe je het canonieke Woo-register importeert</Outcome>
+ *     <Outcome>Hoe je een publicatie aanmaakt en koppelt aan een TOOI-categorie</Outcome>
+ *     <Outcome>Welke API-aanroepen hoort bij elk van de stappen</Outcome>
+ *   </Outcomes>
+ *
+ * Mirrors the .outcomes section in
+ * preview/components/outcomes.html.
+ */
+
+import React from 'react';
+import styles from './Outcomes.module.css';
+
+export function Outcome({children, className}) {
+  const composed = [styles.item, className].filter(Boolean).join(' ');
+  return (
+    <li className={composed}>
+      <svg className={styles.check} viewBox="0 0 24 24" aria-hidden="true"
+           fill="none" stroke="currentColor" strokeWidth="3"
+           strokeLinecap="round" strokeLinejoin="round">
+        <path d="M5 13l4 4L19 7"/>
+      </svg>
+      <span className={styles.body}>{children}</span>
+    </li>
+  );
+}
+
+export default function Outcomes({title = "What you'll learn", 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/Outcomes/Outcomes.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-8) 0;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.title {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0 0 var(--space-4);
+  line-height: 1.25;
+}
+
+.list {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+  display: grid;
+  gap: var(--space-3);
+  max-width: none;
+}
+
+.item {
+  display: grid;
+  grid-template-columns: 22px 1fr;
+  gap: var(--space-3);
+  align-items: start;
+  font-size: 16px;
+  line-height: 1.55;
+  color: var(--c-cobalt-700);
+}
+
+.check {
+  width: 22px;
+  height: 22px;
+  margin-top: 2px;
+  color: var(--c-orange-knvb);
+  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/Prerequisites/Prerequisites.module.css

@@ -3,7 +3,7 @@
   border: 1px solid var(--c-cobalt-100);
   border-radius: var(--radius-lg);
   padding: var(--space-6) var(--space-7);
-  margin: var(--space-6) 0;
+  margin: var(--space-10) 0;
   font-family: var(--conduction-typography-font-family-body);
 }
 
@@ -38,7 +38,7 @@
   width: 14px;
   height: 14px;
   margin-top: 6px;
-  background: var(--c-cobalt-700);
+  background: var(--c-orange-knvb);
   clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
   flex-shrink: 0;
 }

package/src/components/index.js

@@ -99,6 +99,7 @@ export {default as ContentDetailHero} from './ContentDetailHero/ContentDetailHer
    "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 Outcomes, Outcome} from './Outcomes/Outcomes.jsx';
 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';

package/src/index.js

@@ -54,39 +54,64 @@ const baseNavbar = (siteName) => ({
 });
 
 /**
- * Brand-default footer. Cobalt-900 panel with three-column link grid +
- * the standard Conduction tells (KvK, BTW, EUPL/MIT licence).
+ * Brand-default footer columns (the "links" array).
+ *
+ * Three corporate columns rendered on the cobalt-900 footer panel.
+ * Sites override these wholesale by passing `footer.links` to
+ * createConfig(); a site that wants to keep just one brand column
+ * (e.g. only "Conduction" on a product-page footer) can spread the
+ * filtered output of this function into their own array. The other
+ * footer fields (style, copyright) keep their brand defaults
+ * independently.
+ */
+const baseFooterLinks = () => [
+  {
+    title: 'Product',
+    items: [
+      { label: 'ConNext', href: 'https://conduction.nl/connext' },
+      { label: 'Common Ground', href: 'https://conduction.nl/commonground' },
+      { label: 'App store', href: 'https://apps.conduction.nl/' },
+      { label: 'Common Ground hosting', href: 'https://commonground.nu/' },
+    ],
+  },
+  {
+    title: 'Conduction',
+    items: [
+      { label: 'About', href: 'https://conduction.nl/about' },
+      { label: 'Open source', href: 'https://conduction.nl/about#opensource' },
+      { label: 'Team', href: 'https://conduction.nl/about#team' },
+      { label: 'ISO', href: 'https://conduction.nl/iso' },
+    ],
+  },
+  {
+    title: 'Documentatie',
+    items: [
+      { label: 'Brand book', href: 'https://connext.conduction.nl/' },
+      { label: 'Diagram set', href: 'https://connext.conduction.nl/diagrams/' },
+    ],
+  },
+];
+
+/**
+ * Brand-default footer copyright string. KvK + BTW + IBAN + address are
+ * the legal anchor that every Conduction-branded site needs to render
+ * regardless of which product-specific columns the footer shows above
+ * it. Sites override this only for non-Conduction surfaces (rare); on
+ * product pages it inherits unchanged.
+ */
+const baseFooterCopyright = () =>
+  `Conduction B.V. · KvK 76741850 · BTW NL860784241B01 · IBAN NL51 ABNA 0868951550 · Lauriergracht 14h, 1016 RR Amsterdam · ${new Date().getFullYear()}`;
+
+/**
+ * Brand-default footer (full object). Backward-compatible shim for
+ * older sites that called `baseFooter()` directly; new callers should
+ * compose with `baseFooterLinks` / `baseFooterCopyright` so per-property
+ * overrides keep working.
  */
 const baseFooter = () => ({
   style: 'dark',
-  links: [
-    {
-      title: 'Product',
-      items: [
-        { label: 'ConNext', href: 'https://conduction.nl/connext' },
-        { label: 'Common Ground', href: 'https://conduction.nl/commonground' },
-        { label: 'App store', href: 'https://apps.conduction.nl/' },
-        { label: 'Common Ground hosting', href: 'https://commonground.nu/' },
-      ],
-    },
-    {
-      title: 'Conduction',
-      items: [
-        { label: 'About', href: 'https://conduction.nl/about' },
-        { label: 'Open source', href: 'https://conduction.nl/about#opensource' },
-        { label: 'Team', href: 'https://conduction.nl/about#team' },
-        { label: 'ISO', href: 'https://conduction.nl/iso' },
-      ],
-    },
-    {
-      title: 'Documentatie',
-      items: [
-        { label: 'Brand book', href: 'https://connext.conduction.nl/' },
-        { label: 'Diagram set', href: 'https://connext.conduction.nl/diagrams/' },
-      ],
-    },
-  ],
-  copyright: `Conduction B.V. · KvK 76741850 · BTW NL860784241B01 · IBAN NL51 ABNA 0868951550 · Lauriergracht 14h, 1016 RR Amsterdam · ${new Date().getFullYear()}`,
+  links: baseFooterLinks(),
+  copyright: baseFooterCopyright(),
 });
 
 /**
@@ -97,8 +122,11 @@ const baseFooter = () => ({
  *
  * Optional:
  *   organizationName, projectName, navbar (deep-merged into base),
- *   footer (replaces base), customCss[] (appended to brand.css),
- *   plugins[], presets, i18n (overrides defaults)
+ *   footer (per-property fallback: any of style/links/copyright the
+ *     site omits keeps its brand default — pass `footer: { links: [...] }`
+ *     to swap columns while inheriting the KvK/BTW copyright),
+ *   customCss[] (appended to brand.css), plugins[], presets,
+ *   i18n (overrides defaults)
  */
 function createConfig(opts) {
   if (!opts || !opts.title || !opts.url) {
@@ -171,7 +199,19 @@ function createConfig(opts) {
           respectPrefersColorScheme: true,
         },
         navbar: Object.assign(baseNavbar(opts.title), opts.navbar || {}),
-        footer: opts.footer || baseFooter(),
+        /* Per-property fallback so a site can override one slice of the
+           footer (e.g. just `links`) and inherit the rest from the brand.
+           Previously `opts.footer` replaced the whole footer wholesale,
+           which forced sites to copy the KvK/BTW copyright string just to
+           swap columns. */
+        footer: (() => {
+          const f = opts.footer || {};
+          return {
+            style:     f.style     || 'dark',
+            links:     f.links     || baseFooterLinks(),
+            copyright: f.copyright || baseFooterCopyright(),
+          };
+        })(),
       },
       opts.themeConfig || {}
     ),
@@ -180,4 +220,11 @@ function createConfig(opts) {
   };
 }
 
-module.exports = { createConfig, I18N, baseNavbar, baseFooter };
+module.exports = {
+  createConfig,
+  I18N,
+  baseNavbar,
+  baseFooter,
+  baseFooterLinks,
+  baseFooterCopyright,
+};