@conduction/docusaurus-preset 3.15.3 → 3.16.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.15.3",
+  "version": "3.16.0",
   "scripts": {
     "prepack": "node scripts/prepack-bundle-css.js"
   },

package/src/components/ContentCard/ContentCard.jsx

@@ -38,14 +38,41 @@
 
 import React from 'react';
 import HexThumbnail from '../primitives/HexThumbnail';
-import AuthorByline from '../primitives/AuthorByline';
 import Pill from '../primitives/Pill';
-import {
-  CONTENT_TYPE_LABELS,
-  CONTENT_TYPE_BULLET_COLOR,
-} from '../ContentTypeFilter/contentTypes';
+import {CONTENT_TYPE_LABELS} from '../ContentTypeFilter/contentTypes';
+import {AUDIENCE_SHORT_LABELS} from '../../data/audience';
 import styles from './ContentCard.module.css';
 
+function readOrWatch(_contentType, minutes) {
+  if (!minutes) return null;
+  /* No verb appended — the type line below the date (BLOG / TUTORIAL /
+     WEBINAR) already signals read vs. watch, and the extra word kept
+     wrapping to a second line on narrow card columns. */
+  return `${minutes} min`;
+}
+
+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 authorInitials(name) {
+  if (!name) return '';
+  return name
+    .split(/\s+/)
+    .filter(Boolean)
+    .slice(0, 2)
+    .map((part) => part.charAt(0))
+    .join('')
+    .toUpperCase();
+}
+
 export function ContentCardGrid({columns = 2, children, className}) {
   const composed = [
     styles.grid,
@@ -67,6 +94,12 @@ export default function ContentCard({
   locale,
   tags = [],
   thumbnail,
+  durationMinutes,
+  audience = [],
+  module: moduleSlug,
+  modulePosition,
+  moduleTotalParts,
+  moduleTitle,
   className,
   ...rest
 }) {
@@ -81,40 +114,66 @@ export default function ContentCard({
   const typeLabel = contentTypeLabel
     || (contentType && CONTENT_TYPE_LABELS[contentType])
     || null;
-  const typeBullet = contentType
-    ? CONTENT_TYPE_BULLET_COLOR[contentType]
-    : undefined;
+
+  /* Four-line meta block under the thumbnail:
+       1. Author name
+       2. Date · Read time
+       3. Type (TUTORIAL / BLOG / GUIDE)
+       4. Module title  N/M    (only when part of a module)
+     Each line is independently optional. */
+  const readWatch     = readOrWatch(contentType, durationMinutes);
+  const formattedDate = formatDate(date, locale);
+  const dateReadLine  = [formattedDate, readWatch].filter(Boolean).join(' · ');
+  const moduleLine    = moduleSlug
+    ? (modulePosition && moduleTotalParts
+        ? `${moduleTitle || moduleSlug} ${modulePosition}/${moduleTotalParts}`
+        : (moduleTitle || moduleSlug))
+    : null;
+
+  const authorName    = author && author.name;
+  const authorAvatar  = author && author.avatarSrc;
+  const initials      = (author && author.initials) || authorInitials(authorName);
 
   return (
     <Tag href={href} className={composed} {...rest}>
-      <div className={[styles.thumbPanel, panelToneClass].join(' ')}>
-        {thumbProps.src
-          ? <HexThumbnail size={thumbProps.size || 'md'} tone={thumbProps.tone || 'cobalt'} src={thumbProps.src} alt={thumbProps.alt} />
-          : <HexThumbnail size={thumbProps.size || 'md'} tone={thumbProps.tone || 'cobalt'}>{thumbProps.icon}</HexThumbnail>}
-      </div>
+      <div className={styles.leftCol}>
+        <div className={[styles.thumbPanel, panelToneClass].join(' ')}>
+          {thumbProps.src
+            ? <HexThumbnail size={thumbProps.size || 'md'} tone={thumbProps.tone || 'cobalt'} src={thumbProps.src} alt={thumbProps.alt} />
+            : <HexThumbnail size={thumbProps.size || 'md'} tone={thumbProps.tone || 'cobalt'}>{thumbProps.icon}</HexThumbnail>}
+        </div>
 
-      <div className={styles.body}>
-        {(author || date) && (
-          <AuthorByline
-            name={author && author.name}
-            avatarSrc={author && author.avatarSrc}
-            initials={author && author.initials}
-            date={date}
-            dateLabel={dateLabel}
-            locale={locale}
-          />
+        {(authorName || dateReadLine || typeLabel || moduleLine) && (
+          <div className={styles.metaStack}>
+            {(authorAvatar || initials) && (
+              <span className={styles.avatar} aria-hidden="true">
+                {authorAvatar
+                  ? <img src={authorAvatar} alt="" />
+                  : <span className={styles.avatarInitials}>{initials}</span>}
+              </span>
+            )}
+            <div className={styles.metaLines}>
+              {authorName    && <div className={styles.metaAuthor}>{authorName}</div>}
+              {dateReadLine  && <div className={styles.metaSub}>{dateReadLine}</div>}
+              {typeLabel     && <div className={styles.metaType}>{typeLabel}</div>}
+              {moduleLine    && <div className={styles.metaModule}>{moduleLine}</div>}
+            </div>
+          </div>
         )}
+      </div>
 
+      <div className={styles.body}>
         {title && <h3 className={styles.title}>{title}</h3>}
         {summary && <p className={styles.summary}>{summary}</p>}
 
-        {(typeLabel || tags.length > 0) && (
+        {audience.length > 0 && (
+          <div className={styles.audienceLine}>
+            For: {audience.map((a) => AUDIENCE_SHORT_LABELS[a] || a).join(', ')}
+          </div>
+        )}
+
+        {tags.length > 0 && (
           <div className={styles.tags}>
-            {typeLabel && (
-              <Pill bullet bulletColor={typeBullet}>
-                {typeLabel}
-              </Pill>
-            )}
             {tags.map((tag, i) => (
               <Pill key={i} bullet bulletColor="var(--c-cobalt-300)">{tag}</Pill>
             ))}

package/src/components/ContentCard/ContentCard.module.css

@@ -21,7 +21,7 @@
   text-decoration: none;
   color: inherit;
   transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
-  align-items: center;
+  align-items: stretch;
   font-family: var(--conduction-typography-font-family-body);
 }
 .card:hover {
@@ -32,8 +32,81 @@
   color: inherit;
 }
 
+.leftCol {
+  display: flex;
+  flex-direction: column;
+  min-height: 100%;
+}
+
+/* Four-line meta block under the thumbnail.
+   Layout: 32 px hex avatar on the left, four stacked lines on the
+   right. margin-top:auto pins the block to the bottom of the left
+   column so a tall right column doesn't leave it floating. */
+.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) {
   .card { grid-template-columns: 1fr; }
+  .metaStack { margin-top: 0; padding-top: var(--space-3); }
 }
 
 .thumbPanel {
@@ -76,9 +149,33 @@
   line-height: 1.55;
 }
 
-.tags {
+.meta {
   display: flex;
-  gap: 6px;
   flex-wrap: wrap;
-  margin-top: 4px;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-400);
+  text-transform: uppercase;
+  margin-top: 2px;
+}
+.metaBit  { white-space: nowrap; }
+.metaSep  { opacity: 0.6; }
+
+/* "For: MKB, Overheid, Developers" — replaces the audience pill row
+   so a card with multiple audiences doesn't fill the body with chips.
+   Matches the .metaSub typography so it reads as another meta line
+   rather than a heading. */
+.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;
 }
+
+.tags {
+  display: flex;
+  gap: 6px;

package/src/components/DownloadPanel/DownloadPanel.jsx

@@ -0,0 +1,69 @@
+/**
+ * <DownloadPanel />
+ *
+ * Split cobalt-800 panel with a pitch on the left and a cut-corner
+ * white card on the right. Modelled on the lead-capture specimen in
+ * preview/components.html (.download-panel) and re-homed in
+ * preview/components/download-panel.html.
+ *
+ * The card is form-less by default and renders a single primary
+ * CTA, KNVB-orange via Button tone="orange". The form variant from
+ * the kit can be reintroduced later by passing `card.children` and
+ * dropping the cta.
+ *
+ * Usage in MDX:
+ *
+ *   <DownloadPanel
+ *     title={<>This is not an app shelf.<br/>It is <span className="next-blue">Nextcloud</span> as a platform.</>}
+ *     lede="The sovereign-workplace bundles are the start, not the finish."
+ *     meta="Thinkpiece · 7 min · By Ruben van der Linde"
+ *     card={{
+ *       title: 'Want the full essay?',
+ *       cta: {label: 'Read the thinkpiece', href: '/academy/the-platform-moment'},
+ *     }}
+ *   />
+ */
+
+import React from 'react';
+import ConductionBg from '../ConductionBg/ConductionBg';
+import Button from '../primitives/Button';
+import styles from './DownloadPanel.module.css';
+
+export default function DownloadPanel({
+  title,
+  lede,
+  meta,
+  card,
+}) {
+  return (
+    <section className={styles.section}>
+      <div className={styles.inner}>
+        <div className={styles.panel}>
+          <ConductionBg />
+          <div className={styles.pitch}>
+            {title && <h3 className={styles.title}>{title}</h3>}
+            {lede && <p className={styles.lede}>{lede}</p>}
+            {meta && <p className={styles.meta}>{meta}</p>}
+          </div>
+          {card && (
+            <div className={styles.card}>
+              {card.title && <h4 className={styles.cardTitle}>{card.title}</h4>}
+              {card.body && <p className={styles.cardBody}>{card.body}</p>}
+              {card.children}
+              {card.cta && (
+                <Button
+                  variant="primary"
+                  tone="orange"
+                  href={card.cta.href}
+                  className={styles.cardCta}
+                >
+                  {card.cta.label}
+                </Button>
+              )}
+            </div>
+          )}
+        </div>
+      </div>
+    </section>
+  );
+}

package/src/components/DownloadPanel/DownloadPanel.module.css

@@ -0,0 +1,130 @@
+/**
+ * <DownloadPanel /> styles. Mirrors the .download-panel specimen
+ * in preview/components.html: cobalt-800 panel, 2-column grid with
+ * the pitch on the left and a white cut-corner card on the right.
+ *
+ * Button + ConductionBg carry their own styling; this module only
+ * owns the panel chrome (frame, pitch column, card chrome).
+ */
+
+/* Tinted band so the cobalt-800 panel reads as a deliberate break from
+   the surrounding white sections. Mirrors the Section primitive's
+   bg-tinted + sp-tight tokens exactly (cobalt-50 fill, hairline
+   borders top + bottom, 48px block padding) so the rhythm matches the
+   other tinted bands on /connext without inheriting Section's full
+   96px gutter, which left too much air around the panel itself. The
+   panel's own 56px internal padding already provides the breathing
+   room. */
+/* margin-top eats into the previous section's bottom padding so the
+   tinted band sits close to the previous section's last visible
+   content. PlatformOverview ships ~240px of structural-empty space
+   at the bottom of its diagram-grid (reserved for absolutely-
+   positioned `.desc` hover tooltips that anchor above their app
+   cards — they pop up, not down, so they don't intrude into this
+   zone). Pulling up by ~200px lands the band just below the c-bracket
+   flow line without clipping any visible content. Outer chrome only;
+   the panel's own 56px internal padding and grid layout are
+   untouched. */
+.section {
+  background: var(--c-cobalt-50);
+  border-top: 1px solid var(--c-cobalt-100);
+  border-bottom: 1px solid var(--c-cobalt-100);
+  margin-top: -200px;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.inner {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 24px 64px;
+}
+@media (max-width: 700px) {
+  .inner { padding: 24px 16px; }
+}
+
+.panel {
+  background: var(--c-cobalt-800);
+  color: white;
+  border-radius: var(--radius-xl);
+  padding: 56px;
+  display: grid;
+  grid-template-columns: 1fr 440px;
+  gap: 56px;
+  align-items: center;
+  position: relative;
+  overflow: hidden;
+  isolation: isolate;
+}
+@media (max-width: 900px) {
+  .panel {
+    grid-template-columns: 1fr;
+    gap: 40px;
+    padding: 40px;
+  }
+}
+
+.pitch,
+.card {
+  position: relative;
+  z-index: 1;
+}
+
+.title {
+  color: white;
+  font-size: 32px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  line-height: 1.2;
+  margin: 0 0 var(--space-5);
+}
+@media (max-width: 700px) {
+  .title { font-size: 24px; }
+}
+.title :global(.next-blue) { color: var(--c-nextcloud-cyan); }
+.title :global(.cg-yellow) { color: var(--c-commonground-yellow); }
+
+.lede {
+  color: rgba(255, 255, 255, 0.78);
+  font-size: 15px;
+  line-height: 1.6;
+  margin: 0 0 var(--space-4);
+  max-width: 520px;
+}
+
+.meta {
+  color: rgba(255, 255, 255, 0.55);
+  font-size: 13px;
+  line-height: 1.5;
+  margin: 0;
+  max-width: 520px;
+}
+
+.card {
+  background: white;
+  color: var(--conduction-color-text-default);
+  border-radius: var(--radius-lg);
+  padding: 36px;
+  clip-path: var(--clip-cut-tlbr-lg);
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-4);
+  align-items: flex-start;
+}
+
+.cardTitle {
+  font-size: 20px;
+  font-weight: 600;
+  margin: 0;
+  color: var(--c-blue-cobalt);
+  letter-spacing: -0.005em;
+}
+
+.cardBody {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--c-cobalt-700);
+  margin: 0;
+}
+
+.cardCta {
+  margin-top: var(--space-2);
+}

package/src/components/FeaturedCard/FeaturedCard.jsx

@@ -30,8 +30,15 @@ import React from 'react';
 import HexThumbnail from '../primitives/HexThumbnail';
 import HexBullet from '../primitives/HexBullet';
 import AuthorByline from '../primitives/AuthorByline';
+import {AUDIENCE_LABELS} from '../../data/audience';
 import styles from './FeaturedCard.module.css';
 
+function readOrWatch(contentType, minutes) {
+  if (!minutes) return null;
+  const verb = contentType === 'webinar' ? 'watch' : 'read';
+  return `${minutes} min ${verb}`;
+}
+
 export default function FeaturedCard({
   href,
   eyebrow,
@@ -44,8 +51,26 @@ export default function FeaturedCard({
   locale,
   thumbnail,
   accent = 'orange',
+  contentType,
+  durationMinutes,
+  audience = [],
+  module: moduleSlug,
+  modulePosition,
+  moduleTotalParts,
+  moduleTitle,
   className,
 }) {
+  const readWatch = readOrWatch(contentType, durationMinutes);
+  const moduleLabel = moduleSlug
+    ? (modulePosition && moduleTotalParts
+        ? `Part ${modulePosition} of ${moduleTotalParts}`
+        : (modulePosition ? `Part ${modulePosition}` : null))
+    : null;
+  const audienceLabel = audience.length > 0
+    ? audience.map((a) => AUDIENCE_LABELS[a] || a).join(' · ')
+    : null;
+  const metaBits = [readWatch, moduleLabel, moduleSlug ? (moduleTitle || moduleSlug) : null, audienceLabel]
+    .filter(Boolean);
   const Tag = href ? 'a' : 'div';
   const composed = [styles.card, className].filter(Boolean).join(' ');
   const thumbProps = thumbnail || {};
@@ -62,6 +87,17 @@ export default function FeaturedCard({
         {title && <h2 className={styles.title}>{title}</h2>}
         {lede && <p className={styles.lede}>{lede}</p>}
 
+        {metaBits.length > 0 && (
+          <div className={styles.metaBits}>
+            {metaBits.map((bit, i) => (
+              <React.Fragment key={i}>
+                {i > 0 && <span className={styles.metaSep} aria-hidden="true">·</span>}
+                <span className={styles.metaBit}>{bit}</span>
+              </React.Fragment>
+            ))}
+          </div>
+        )}
+
         {(author || date) && (
           <div className={styles.meta}>
             <AuthorByline

package/src/components/FeaturedCard/FeaturedCard.module.css

@@ -55,6 +55,21 @@
   max-width: 50ch;
 }
 
+.metaBits {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-200);
+  text-transform: uppercase;
+  margin-bottom: var(--space-4);
+}
+.metaBits .metaBit  { white-space: nowrap; }
+.metaBits .metaSep  { opacity: 0.6; }
+
 .meta { margin-bottom: var(--space-5); }
 
 .cta {