@conduction/docusaurus-preset 3.15.3 → 3.16.1

package/src/components/ModuleCard/ModuleCard.jsx

@@ -0,0 +1,150 @@
+/**
+ * <ModuleCard />
+ *
+ * Composite card for an academy module (an ordered group of academy
+ * entries that share a `module:` slug). Mirrors <ContentCard/> so the
+ * two sit in the same academy grid without visually diverging. Left
+ * column carries thumbnail + four-line meta stack (curator, latest
+ * date · total min, MODULE · N PARTS, composite type summary). Right
+ * column is title + lede + audience line.
+ *
+ * Usage:
+ *
+ *   <ModuleCard
+ *     href="/academy/modules/deskdesk-tutorial"
+ *     title="Build a Nextcloud app on the Conduction stack"
+ *     lede="Four parts from blank Nextcloud to published app."
+ *     parts={4}
+ *     totalMinutes={95}
+ *     latestDate="2026-05-17"
+ *     curator={{ name: 'Ruben van der Linde', imageURL: '...' }}
+ *     audience={['developer']}
+ *     contentTypes={['tutorial']}
+ *   />
+ */
+
+import React from 'react';
+import HexThumbnail from '../primitives/HexThumbnail';
+import {AUDIENCE_SHORT_LABELS} from '../../data/audience';
+import {CONTENT_TYPE_PLURAL_LABELS} from '../ContentTypeFilter/contentTypes';
+import styles from './ModuleCard.module.css';
+
+function StackedHexIcon() {
+  /* Three pointy-top hexes layered to read as a stack/series. Uses
+     currentColor so the surrounding tone variant drives the stroke
+     colour (white on cobalt-deep, cobalt-700 on cobalt-50, etc.). */
+  const stroke = {fill: 'none', stroke: 'currentColor', strokeWidth: 1.4, strokeLinejoin: 'round'};
+  return (
+    <svg viewBox="0 0 24 24" aria-hidden="true" {...stroke}>
+      <path d="M6 4l5 2.5v5L6 14l-5-2.5v-5L6 4z" opacity="0.5" />
+      <path d="M12 7l5 2.5v5L12 17l-5-2.5v-5L12 7z" opacity="0.75" />
+      <path d="M18 10l5 2.5v5L18 20l-5-2.5v-5L18 10z" />
+    </svg>
+  );
+}
+
+function formatDate(date, locale = 'nl') {
+  if (!date) return null;
+  try {
+    const d = typeof date === 'string' ? new Date(date) : date;
+    if (Number.isNaN(d.getTime())) return null;
+    return d.toLocaleDateString(locale, {day: 'numeric', month: 'short', year: 'numeric'});
+  } catch (_) {
+    return null;
+  }
+}
+
+function initialsFrom(name) {
+  if (!name) return '';
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part.charAt(0))
+    .join('')
+    .toUpperCase();
+}
+
+export default function ModuleCard({
+  href,
+  title,
+  lede,
+  parts,
+  totalMinutes,
+  latestDate,
+  curator,
+  locale,
+  audience = [],
+  contentTypes = [],
+  className,
+  ...rest
+}) {
+  const Tag = href ? 'a' : 'div';
+  const composed = [styles.card, className].filter(Boolean).join(' ');
+
+  /* No verb after the duration — the type line (MODULE · N PARTS) and
+     the composite type summary below already signal whether this is
+     something the visitor reads or watches. Keeps the date line on a
+     single row in narrow columns. */
+  const totalLabel = typeof totalMinutes === 'number' ? `${totalMinutes} min` : null;
+  const dateLabel  = formatDate(latestDate, locale);
+  const dateReadLine = [dateLabel, totalLabel].filter(Boolean).join(' · ');
+
+  const partsLabel = typeof parts === 'number'
+    ? (parts === 1 ? '1 PART' : `${parts} PARTS`)
+    : null;
+  const typeLine = ['MODULE', partsLabel].filter(Boolean).join(' · ');
+
+  /* Composite content-type summary on line 4. For a single-type
+     module ("Tutorials") this is one word; mixed modules read
+     "Tutorials + Guides". Drops entirely when the module has no
+     content types resolved yet. */
+  const typeSummary = contentTypes.length > 0
+    ? contentTypes.map((ct) => CONTENT_TYPE_PLURAL_LABELS[ct] || ct).join(' + ')
+    : null;
+
+  const curatorName     = curator && curator.name;
+  const curatorAvatar   = curator && curator.imageURL;
+  const curatorInitials = (curator && initialsFrom(curator.name)) || '';
+
+  return (
+    <Tag href={href} className={composed} {...rest}>
+      <div className={styles.leftCol}>
+        <div className={styles.thumbPanel}>
+          <HexThumbnail size="md" tone="cobalt">
+            <StackedHexIcon />
+          </HexThumbnail>
+        </div>
+
+        {(curatorName || dateReadLine || typeLine || typeSummary) && (
+          <div className={styles.metaStack}>
+            {(curatorAvatar || curatorInitials) && (
+              <span className={styles.avatar} aria-hidden="true">
+                {curatorAvatar
+                  ? <img src={curatorAvatar} alt="" />
+                  : <span className={styles.avatarInitials}>{curatorInitials}</span>}
+              </span>
+            )}
+            <div className={styles.metaLines}>
+              {curatorName  && <div className={styles.metaAuthor}>{curatorName}</div>}
+              {dateReadLine && <div className={styles.metaSub}>{dateReadLine}</div>}
+              {typeLine     && <div className={styles.metaType}>{typeLine}</div>}
+              {typeSummary  && <div className={styles.metaModule}>{typeSummary}</div>}
+            </div>
+          </div>
+        )}
+      </div>
+
+      <div className={styles.body}>
+        {title && <h3 className={styles.title}>{title}</h3>}
+        {lede && <p className={styles.lede}>{lede}</p>}
+
+        {audience.length > 0 && (
+          <div className={styles.audienceLine}>
+            For: {audience.map((a) => AUDIENCE_SHORT_LABELS[a] || a).join(', ')}
+          </div>
+        )}
+      </div>
+    </Tag>
+  );
+}

package/src/components/ModuleCard/ModuleCard.module.css

@@ -0,0 +1,147 @@
+/* <ModuleCard /> styles. Mirror <ContentCard/> so a module composite
+   sits in the same academy grid without visually diverging. Same
+   column ratio, same hover, same bottom-pinned meta stack. The only
+   visual cue that distinguishes a module card is the stacked-hex
+   glyph in the thumbnail panel. */
+
+.card {
+  display: grid;
+  grid-template-columns: 200px 1fr;
+  gap: var(--space-6);
+  padding: var(--space-5);
+  background: var(--c-cobalt-50);
+  border-radius: var(--radius-lg);
+  text-decoration: none;
+  color: inherit;
+  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
+  align-items: stretch;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.card:hover {
+  background: white;
+  box-shadow: var(--shadow-2);
+  transform: translateY(-2px);
+  text-decoration: none;
+  color: inherit;
+}
+
+@media (max-width: 700px) {
+  .card { grid-template-columns: 1fr; }
+}
+
+.leftCol {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+.thumbPanel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 184px;
+  border-radius: var(--radius-md);
+  background: var(--c-cobalt-900);
+  color: white;
+  position: relative;
+  overflow: hidden;
+}
+
+.metaStack {
+  margin-top: auto;
+  padding-top: var(--space-4);
+  display: grid;
+  grid-template-columns: 32px 1fr;
+  gap: 10px;
+  align-items: start;
+}
+.avatar {
+  width: 32px;
+  height: 32px;
+  background: var(--c-cobalt-100);
+  color: var(--c-cobalt-700);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  font-weight: 600;
+  text-transform: uppercase;
+  flex-shrink: 0;
+  overflow: hidden;
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+}
+.avatar img { width: 100%; height: 100%; object-fit: cover; }
+.avatarInitials { line-height: 1; }
+
+.metaLines { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
+.metaAuthor {
+  font-size: 13px;
+  font-weight: 600;
+  color: var(--c-cobalt-900);
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+.metaSub {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-700);
+  line-height: 1.3;
+  white-space: nowrap;
+}
+.metaType {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-blue-cobalt);
+  line-height: 1.3;
+  margin-top: 2px;
+  font-weight: 600;
+}
+.metaModule {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-400);
+  line-height: 1.3;
+  overflow-wrap: anywhere;
+}
+
+@media (max-width: 700px) {
+  .metaStack { margin-top: 0; padding-top: var(--space-3); }
+}
+
+.body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-3);
+  min-width: 0;
+}
+
+.title {
+  font-size: 18px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0;
+  line-height: 1.3;
+}
+
+.lede {
+  font-size: 14px;
+  color: var(--c-cobalt-700);
+  margin: 0;
+  line-height: 1.55;
+}
+
+.audienceLine {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-700);
+  line-height: 1.4;
+  margin-top: 4px;
+}

package/src/components/ModulePage/ModulePage.jsx

@@ -0,0 +1,149 @@
+/**
+ * <ModulePage />
+ *
+ * Wrapper for per-module MDX index pages at /academy/modules/{slug}.
+ * Each module gets its own MDX file at
+ * `src/pages/academy/modules/{slug}.mdx` that imports this component,
+ * passes the module slug, and provides the hero + body copy as
+ * children. ModulePage handles the rest:
+ *
+ *   - Reads the module's parts from the `academy-modules` plugin's
+ *     globalData (slug, title, lede, ordered parts, audience, apps,
+ *     totals).
+ *   - Renders the hero (title + lede + meta line: parts count, total
+ *     duration, audience tier).
+ *   - Renders the editor-supplied MDX children below the hero (room
+ *     for "What you build", "Who this is for", "Prerequisites", etc.).
+ *   - Renders the ordered parts list at the bottom with one
+ *     <ContentCard/> per part.
+ *
+ * The site must register the `academy-modules` plugin in
+ * docusaurus.config.js for usePluginData('academy-modules') to
+ * return data. When the plugin is missing, ModulePage falls back to
+ * a "module not found" message rather than crashing.
+ *
+ * Usage (MDX):
+ *
+ *   import {ModulePage} from '@conduction/docusaurus-preset/components';
+ *
+ *   <ModulePage module="deskdesk-tutorial">
+ *     Hier hoort de marketing-lede van de module, korte zinnen,
+ *     niet langer dan een alinea of vier.
+ *   </ModulePage>
+ */
+
+import React from 'react';
+import {usePluginData} from '@docusaurus/useGlobalData';
+import ContentCard, {ContentCardGrid} from '../ContentCard/ContentCard.jsx';
+import {AUDIENCE_LABELS} from '../../data/audience';
+import {CONTENT_TYPE_LABELS} from '../ContentTypeFilter/contentTypes';
+import styles from './ModulePage.module.css';
+
+function defaultIconFor(contentType) {
+  const stroke = {strokeWidth: 1.6, fill: 'none', stroke: 'currentColor'};
+  switch (contentType) {
+    case 'tutorial':
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true" {...stroke}>
+          <path d="M4 7h16" /><path d="M4 12h16" /><path d="M4 17h10" />
+          <path d="M19 14v6" /><path d="M16 17l3 3 3-3" />
+        </svg>
+      );
+    case 'guide':
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true" {...stroke}>
+          <path d="M4 4h12a4 4 0 0 1 4 4v12H8a4 4 0 0 1-4-4V4z" />
+          <path d="M4 16a4 4 0 0 1 4-4h12" />
+        </svg>
+      );
+    case 'webinar':
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true" {...stroke}>
+          <circle cx="12" cy="12" r="9" />
+          <path d="M10 9l5 3-5 3z" fill="currentColor" stroke="none" />
+        </svg>
+      );
+    case 'case-study':
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true" {...stroke}>
+          <rect x="3" y="7" width="18" height="13" rx="1" />
+          <path d="M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2" />
+          <path d="M3 13h18" />
+        </svg>
+      );
+    case 'blog':
+    default:
+      return (
+        <svg viewBox="0 0 24 24" aria-hidden="true" {...stroke}>
+          <path d="M3 11l9-8 9 8" />
+          <path d="M5 10v10h14V10" />
+          <path d="M9 20v-6h6v6" />
+        </svg>
+      );
+  }
+}
+
+function partToCardProps(part) {
+  return {
+    href: part.permalink,
+    contentType: part.contentType,
+    title: part.title,
+    summary: part.summary,
+    date: part.date,
+    tags: [`Part ${part.modulePosition}`],
+    thumbnail: {icon: defaultIconFor(part.contentType), panelTone: 'cobalt-dark'},
+  };
+}
+
+export default function ModulePage({module: moduleSlug, children}) {
+  const data = usePluginData('academy-modules') || {};
+  const mod  = data.modules && data.modules[moduleSlug];
+
+  if (!mod) {
+    return (
+      <main className="marketing-page">
+        <div className={styles.notFound}>
+          <h1>Module not found</h1>
+          <p>No academy module with slug <code>{moduleSlug}</code> is registered. Check the module slug in this page's frontmatter.</p>
+        </div>
+      </main>
+    );
+  }
+
+  const metaBits = [];
+  metaBits.push(mod.parts.length === 1 ? '1 part' : `${mod.parts.length} parts`);
+  if (mod.totalMinutes) metaBits.push(`${mod.totalMinutes} min total`);
+  if (mod.contentTypes && mod.contentTypes.length === 1) {
+    metaBits.push(CONTENT_TYPE_LABELS[mod.contentTypes[0]] || mod.contentTypes[0]);
+  }
+
+  return (
+    <main className="marketing-page">
+      <header className={styles.hero}>
+        <div className={styles.eyebrow}>Module · academy</div>
+        <h1 className={styles.title}>{mod.title}</h1>
+        {mod.lede && <p className={styles.lede}>{mod.lede}</p>}
+
+        <div className={styles.metaRow}>
+          <span className={styles.metaBit}>{metaBits.join(' · ')}</span>
+          {mod.audience && mod.audience.length > 0 && (
+            <span className={styles.metaBit}>
+              {mod.audience.map((a) => AUDIENCE_LABELS[a] || a).join(' · ')}
+            </span>
+          )}
+        </div>
+      </header>
+
+      {children && <section className={styles.intro}>{children}</section>}
+
+      <section className={styles.parts}>
+        <h2 className={styles.partsTitle}>In this module</h2>
+        <ContentCardGrid columns={1}>
+          {mod.parts.map((part) => (
+            <ContentCard key={part.slug} {...partToCardProps(part)} />
+          ))}
+        </ContentCardGrid>
+      </section>
+    </main>
+  );
+}

package/src/components/ModulePage/ModulePage.module.css

@@ -0,0 +1,89 @@
+/**
+ * <ModulePage /> styles. Light surface, generous spacing — the page
+ * is a small landing, not an article. Echoes the ContentDetailHero
+ * structure without the hex visual (the parts-grid below carries the
+ * visual weight).
+ */
+
+.hero {
+  padding: var(--space-7) 0 var(--space-5);
+  max-width: 720px;
+}
+
+.eyebrow {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin-bottom: var(--space-3);
+}
+
+.title {
+  font-size: 36px;
+  font-weight: 700;
+  letter-spacing: -0.015em;
+  color: var(--c-cobalt-900);
+  line-height: 1.15;
+  margin: 0 0 var(--space-3);
+}
+
+.lede {
+  font-size: 18px;
+  color: var(--c-cobalt-700);
+  line-height: 1.55;
+  margin: 0 0 var(--space-4);
+}
+
+.metaRow {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--space-4);
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-400);
+  text-transform: uppercase;
+}
+
+.metaBit { white-space: nowrap; }
+
+.intro {
+  padding: var(--space-4) 0 var(--space-5);
+  max-width: 720px;
+  font-size: 16px;
+  color: var(--c-cobalt-700);
+  line-height: 1.7;
+}
+
+.parts {
+  padding: var(--space-5) 0 var(--space-7);
+}
+
+.partsTitle {
+  font-size: 22px;
+  font-weight: 700;
+  letter-spacing: -0.01em;
+  color: var(--c-cobalt-900);
+  margin: 0 0 var(--space-4);
+}
+
+.notFound {
+  padding: var(--space-7) 0;
+  max-width: 600px;
+}
+.notFound h1 {
+  font-size: 28px;
+  color: var(--c-cobalt-900);
+  margin-bottom: var(--space-3);
+}
+.notFound p {
+  color: var(--c-cobalt-700);
+  line-height: 1.6;
+}
+.notFound code {
+  background: var(--c-cobalt-50);
+  padding: 2px 6px;
+  border-radius: 4px;
+  font-family: var(--conduction-typography-font-family-code);
+}

package/src/components/PlatformOverview/PlatformOverview.module.css

@@ -5,11 +5,17 @@
 
 .section {
   background: white;
-  padding: 96px 64px;
+  /* Bottom padding deliberately lighter than top: the diagram's
+     orange-dashed flow lines around OpenBuilt extend visually below
+     the last text label, so the section already has ~80px of optical
+     trailing space from the diagram itself before any padding kicks
+     in. Top stays at 96px to keep the rhythm coming in from the
+     Hero / StatsStrip above. */
+  padding: 96px 64px 32px;
   font-family: var(--conduction-typography-font-family-body);
 }
 @media (max-width: 900px) {
-  .section { padding: 64px 24px; }
+  .section { padding: 64px 24px 24px; }
 }
 
 .inner {

package/src/components/index.js

@@ -30,6 +30,7 @@ export * from './primitives';
 export {default as Hero} from './Hero/Hero.jsx';
 export {default as StatsStrip} from './StatsStrip/StatsStrip.jsx';
 export {default as CtaBanner} from './CtaBanner/CtaBanner.jsx';
+export {default as DownloadPanel} from './DownloadPanel/DownloadPanel.jsx';
 export {default as PlatformOverview} from './PlatformOverview/PlatformOverview.jsx';
 export {default as AppsPreview, AppCard} from './AppsPreview/AppsPreview.jsx';
 
@@ -109,6 +110,23 @@ export {default as ContentDetailHero} from './ContentDetailHero/ContentDetailHer
 export {default as AppCrossLinks} from './AppCrossLinks/AppCrossLinks.jsx';
 export {APPS_REGISTRY, APP_SLUGS, APP_LABELS, getApp, getApps} from '../data/apps-registry';
 
+/* Academy modules — composite-card and per-module index page that
+   group a multi-part academy series (e.g. deskdesk-tutorial,
+   openwoo-getting-started) into one entity. ModuleCard renders on
+   the academy landing in place of the individual member cards;
+   ModulePage wraps /academy/modules/{slug}.mdx index pages. Both
+   read frontmatter from the consuming site's `academy-modules`
+   plugin via usePluginData('academy-modules'). */
+export {default as ModuleCard} from './ModuleCard/ModuleCard.jsx';
+export {default as ModulePage} from './ModulePage/ModulePage.jsx';
+export {
+  AUDIENCES,
+  AUDIENCE_LABELS,
+  AUDIENCE_PLURAL_LABELS,
+  AUDIENCE_BULLET_COLOR,
+  AUDIENCE_SHORT_LABELS,
+} from '../data/audience';
+
 /* 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

package/src/components/primitives/AuthorByline.module.css

@@ -13,9 +13,9 @@
 }
 
 .avatar {
-  width: 24px;
-  height: 24px;
-  border-radius: 50%;
+  width: 22px;
+  height: 25px;
+  clip-path: var(--hex-pointy-top);
   background: var(--c-cobalt-100);
   color: var(--c-cobalt-700);
   display: inline-flex;
@@ -31,6 +31,7 @@
   width: 100%;
   height: 100%;
   object-fit: cover;
+  display: block;
 }
 
 .name { font-weight: 500; }

package/src/data/audience.js

@@ -0,0 +1,60 @@
+/**
+ * @conduction/docusaurus-preset/data/audience
+ *
+ * Audience taxonomy for academy content. Mirrors the three tiers
+ * defined in design-system/CLAUDE.md and preview/identity/audience.html:
+ *
+ *   1. MKB-beslisser / IT-lead  (primary)
+ *   2. Overheid-beslisser       (secondary)
+ *   3. Developer / integrator   (tertiary)
+ *
+ * Used by:
+ *   - <ContentCard/>            renders the audience pill row
+ *   - <ModuleCard/>              same
+ *   - <FeaturedCard/>            same
+ *   - <ContentTypeFilter/>       when reused as the audience filter row
+ *   - schemas/academy/content.schema.json (mirrored as the audience enum)
+ */
+
+export const AUDIENCES = ['mkb', 'government', 'developer'];
+
+export const AUDIENCE_LABELS = {
+  mkb:        'Voor MKB',
+  government: 'Voor overheid',
+  developer:  'Voor developers',
+};
+
+/**
+ * Plural, sentence-case labels for the chip row. Identical to the
+ * singular labels because each one already reads as a collection target
+ * ("Voor MKB", "Voor developers"), unlike content types ("Blog" vs
+ * "Blogs"). Kept as a separate export for symmetry with
+ * CONTENT_TYPE_PLURAL_LABELS so call sites that switch between the two
+ * filter rows don't need a branch.
+ */
+export const AUDIENCE_PLURAL_LABELS = AUDIENCE_LABELS;
+
+/**
+ * Bullet (HexBullet) colour for the audience chip. We do NOT brand the
+ * audience pills with the orange accent — the "one orange per
+ * component" rule reserves orange for the page's single highlighted
+ * action. Audience uses three cobalt shades to give each tier a quiet
+ * differentiator without competing with the type chip.
+ */
+export const AUDIENCE_BULLET_COLOR = {
+  mkb:        'var(--c-blue-cobalt)',
+  government: 'var(--c-cobalt-700)',
+  developer:  'var(--c-cobalt-400)',
+};
+
+/**
+ * Short labels used when the "For: A, B, C" line composes the
+ * audience set into a single sentence (the layout that replaced the
+ * audience pill row on ContentCard / ModuleCard / FeaturedCard).
+ * Dropping the "Voor" prefix avoids duplicating the leading "For:".
+ */
+export const AUDIENCE_SHORT_LABELS = {
+  mkb:        'MKB',
+  government: 'Overheid',
+  developer:  'Developers',
+};