@conduction/docusaurus-preset 1.0.1 → 1.1.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "1.0.1",
+  "version": "1.1.1",
   "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,17 +91,6 @@ export default function ContentDetailHero({
         </div>
       )}
 
-      {(typeLabel || tags.length > 0) && (
-        <div className={styles.tags}>
-          {typeLabel && (
-            <Pill bullet bulletColor={typeBullet}>{typeLabel}</Pill>
-          )}
-          {tags.map((t, i) => (
-            <Pill key={i} bullet bulletColor="var(--c-cobalt-300)">{t}</Pill>
-          ))}
-        </div>
-      )}
-
       {title && <h1 className={styles.title}>{title}</h1>}
 
       <div className={styles.cover}>
@@ -117,6 +106,17 @@ export default function ContentDetailHero({
 
       {summary && <p className={styles.summary}>{summary}</p>}
 
+      {(typeLabel || tags.length > 0) && (
+        <div className={styles.tags}>
+          {typeLabel && (
+            <Pill bullet bulletColor={typeBullet}>{typeLabel}</Pill>
+          )}
+          {tags.map((t, i) => (
+            <Pill key={i} bullet bulletColor="var(--c-cobalt-300)">{t}</Pill>
+          ))}
+        </div>
+      )}
+
       {(author || date || duration) && (
         <div className={styles.meta}>
           {(author || date) && (

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';