@conduction/docusaurus-preset 0.1.0

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

@@ -0,0 +1,84 @@
+/**
+ * <ContentCard /> styles. Mirrors .content-card and .content-grid in
+ * preview/components/academy.css.
+ */
+
+.grid { display: grid; gap: var(--space-6); }
+.cols-1 { grid-template-columns: 1fr; }
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+@media (max-width: 900px) {
+  .cols-2, .cols-3 { grid-template-columns: 1fr; }
+}
+
+.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: center;
+  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; }
+}
+
+.thumbPanel {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 184px;
+  border-radius: var(--radius-md);
+  position: relative;
+  overflow: hidden;
+}
+.panel-cobalt      { background: var(--c-blue-cobalt); }
+.panel-cobalt-dark { background: var(--c-cobalt-700); }
+.panel-cobalt-deep { background: var(--c-cobalt-900); }
+.panel-mint        { background: var(--c-mint-500); }
+.panel-orange      { background: var(--c-orange-knvb); }
+.panel-cobalt-50   { background: var(--c-cobalt-50); }
+
+.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;
+}
+
+.summary {
+  font-size: 14px;
+  color: var(--c-cobalt-700);
+  margin: 0;
+  line-height: 1.55;
+}
+
+.tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+  margin-top: 4px;
+}

package/src/components/ContentDetailHero/ContentDetailHero.jsx

@@ -0,0 +1,136 @@
+/**
+ * <ContentDetailHero />
+ *
+ * Header for individual academy posts. Crumb, content-type chip plus
+ * topical tags, h1 title, optional summary, author byline, optional
+ * duration label, then a 16:9 cover region with the honeycomb
+ * watermark and either a hex-thumb icon or a hero image inside.
+ *
+ * Distinct from <DetailHero /> (which is for app/solution/partner
+ * pages and has the 360px cobalt hex on the right). Academy detail
+ * pages want a wider headline and a full-width cover image; this
+ * component is built for that.
+ *
+ * Mirrors the .content-detail-hero section in
+ * preview/components/academy.html.
+ *
+ * Usage:
+ *
+ *   <ContentDetailHero
+ *     crumb={[{label: 'Academy', href: '/'}, {label: 'Guides', href: '/?type=guide'}, 'Install OpenCatalogi']}
+ *     contentType="guide"
+ *     tags={['OpenCatalogi', 'Install']}
+ *     title="Install OpenCatalogi in two minutes."
+ *     summary="From app store to first register, no terminal required."
+ *     author={{ name: 'Ruben van der Linde' }}
+ *     date="2026-05-05"
+ *     duration="12 min read"
+ *     cover={{ src: '/img/posts/install-opencatalogi.jpg', alt: 'Install screen' }}
+ *   />
+ *
+ * If `cover` is omitted, the cover region renders a single large
+ * pointy-top hex on the cobalt-900 ground. Pass `cover.icon` for a
+ * custom SVG instead of the default placeholder.
+ */
+
+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 styles from './ContentDetailHero.module.css';
+
+export default function ContentDetailHero({
+  crumb,
+  contentType,
+  contentTypeLabel,
+  tags = [],
+  title,
+  summary,
+  author,
+  date,
+  dateLabel,
+  duration,
+  locale,
+  cover,
+  className,
+}) {
+  const composed = [styles.hero, className].filter(Boolean).join(' ');
+
+  const typeLabel = contentTypeLabel
+    || (contentType && CONTENT_TYPE_LABELS[contentType])
+    || null;
+  const typeBullet = contentType
+    ? CONTENT_TYPE_BULLET_COLOR[contentType]
+    : undefined;
+
+  return (
+    <section className={composed}>
+      {Array.isArray(crumb) && crumb.length > 0 && (
+        <div className={styles.crumb}>
+          {crumb.map((c, i) => {
+            const last = i === crumb.length - 1;
+            const sep = !last
+              ? <span className={styles.sep} aria-hidden="true">/</span>
+              : null;
+            if (typeof c === 'string') {
+              return <React.Fragment key={i}>{c}{sep}</React.Fragment>;
+            }
+            return (
+              <React.Fragment key={i}>
+                {c.href
+                  ? <a href={c.href}>{c.label}</a>
+                  : <span>{c.label}</span>}
+                {sep}
+              </React.Fragment>
+            );
+          })}
+        </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>}
+      {summary && <p className={styles.summary}>{summary}</p>}
+
+      {(author || date || duration) && (
+        <div className={styles.meta}>
+          {(author || date) && (
+            <AuthorByline
+              name={author && author.name}
+              avatarSrc={author && author.avatarSrc}
+              initials={author && author.initials}
+              date={date}
+              dateLabel={dateLabel}
+              locale={locale}
+            />
+          )}
+          {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

@@ -0,0 +1,96 @@
+/**
+ * <ContentDetailHero /> styles. Mirrors .content-detail-hero in
+ * preview/components/academy.css.
+ */
+
+.hero {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-6);
+  padding: var(--space-12) 0 var(--space-8);
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.crumb {
+  display: flex;
+  gap: 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-400);
+  flex-wrap: wrap;
+}
+.crumb a {
+  color: var(--c-cobalt-700);
+  text-decoration: none;
+}
+.crumb a:hover { color: var(--c-blue-cobalt); }
+.crumb .sep { color: var(--c-cobalt-300); }
+
+.tags {
+  display: flex;
+  gap: 6px;
+  flex-wrap: wrap;
+}
+
+.title {
+  font-size: 44px;
+  font-weight: 700;
+  letter-spacing: -0.02em;
+  color: var(--c-cobalt-900);
+  margin: 0;
+  line-height: 1.1;
+  max-width: 24ch;
+}
+@media (max-width: 700px) { .title { font-size: 32px; } }
+
+.summary {
+  font-size: 18px;
+  color: var(--c-cobalt-700);
+  line-height: 1.55;
+  margin: 0;
+  max-width: 60ch;
+}
+
+.meta {
+  display: flex;
+  gap: var(--space-4);
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+.duration {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  color: var(--c-cobalt-400);
+}
+
+.cover {
+  width: 100%;
+  aspect-ratio: 16 / 9;
+  background: var(--c-cobalt-900);
+  border-radius: var(--radius-lg);
+  margin-top: var(--space-4);
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.coverImg {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.watermark {
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background-image: url('/img/honeycomb-scatter.svg');
+  background-size: 320px;
+  background-repeat: repeat;
+  opacity: 0.5;
+}

package/src/components/ContentTypeFilter/ContentTypeFilter.jsx

@@ -0,0 +1,103 @@
+/**
+ * <ContentTypeFilter />
+ *
+ * Top-of-page chip row that filters academy content by type. "All" is
+ * the default chip and is always present. Driven by a `?type=` query
+ * parameter so the filter survives reload and copy-paste.
+ *
+ * Mirrors the chip row in preview/components/academy.html.
+ *
+ * Modes:
+ *   - controlled: pass `value` (string | null) and `onChange` (fn)
+ *   - uncontrolled link mode: pass `hrefForType` (fn) to render <a>
+ *     chips with hrefs and let the surrounding page re-render on
+ *     navigation. Useful for static-site filtering via query string.
+ *
+ * Counts: pass `counts` keyed by type ({ blog: 18, guide: 9, ... })
+ * to render a small monospaced count next to each label. Pass a number
+ * to `allCount` for the "Everything" chip total. Counts are optional.
+ *
+ * Usage in MDX (uncontrolled, query-string driven):
+ *
+ *   <ContentTypeFilter
+ *     value={type}
+ *     hrefForType={(t) => t ? `?type=${t}` : '?'}
+ *     counts={{ blog: 18, guide: 9, 'case-study': 6, webinar: 5, tutorial: 4 }}
+ *   />
+ *
+ * Usage in JSX (controlled):
+ *
+ *   const [type, setType] = useState(null);
+ *   <ContentTypeFilter value={type} onChange={setType} />
+ */
+
+import React from 'react';
+import {
+  CONTENT_TYPES,
+  CONTENT_TYPE_PLURAL_LABELS,
+} from './contentTypes';
+import styles from './ContentTypeFilter.module.css';
+
+const ALL = '__all__';
+
+export default function ContentTypeFilter({
+  value = null,
+  onChange,
+  hrefForType,
+  counts,
+  allLabel = 'Everything',
+  allCount,
+  types = CONTENT_TYPES,
+  className,
+}) {
+  const isLinkMode = typeof hrefForType === 'function';
+
+  const renderChip = (key, label, count) => {
+    const active = (key === ALL && value == null) || key === value;
+    const composed = [
+      styles.chip,
+      active ? styles.active : null,
+    ].filter(Boolean).join(' ');
+
+    if (isLinkMode) {
+      return (
+        <a
+          key={key}
+          href={hrefForType(key === ALL ? null : key)}
+          className={composed}
+        >
+          <span className={styles.label}>{label}</span>
+          {typeof count === 'number' && (
+            <span className={styles.count}>{count}</span>
+          )}
+        </a>
+      );
+    }
+
+    return (
+      <button
+        key={key}
+        type="button"
+        className={composed}
+        onClick={() => onChange && onChange(key === ALL ? null : key)}
+        aria-pressed={active}
+      >
+        <span className={styles.label}>{label}</span>
+        {typeof count === 'number' && (
+          <span className={styles.count}>{count}</span>
+        )}
+      </button>
+    );
+  };
+
+  return (
+    <div className={[styles.row, className].filter(Boolean).join(' ')}>
+      {renderChip(ALL, allLabel, allCount)}
+      {types.map((t) =>
+        renderChip(t, CONTENT_TYPE_PLURAL_LABELS[t] || t, counts && counts[t])
+      )}
+    </div>
+  );
+}
+
+export {CONTENT_TYPES, CONTENT_TYPE_PLURAL_LABELS} from './contentTypes';

package/src/components/ContentTypeFilter/ContentTypeFilter.module.css

@@ -0,0 +1,60 @@
+/**
+ * <ContentTypeFilter /> styles. Mirrors .type-filter in
+ * preview/components/academy.css.
+ */
+
+.row {
+  display: flex;
+  gap: 8px;
+  flex-wrap: wrap;
+  align-items: center;
+}
+
+.chip {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  padding: 6px 14px;
+  border-radius: var(--radius-pill);
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  color: var(--c-cobalt-700);
+  font-family: var(--conduction-typography-font-family-body);
+  font-size: 13px;
+  font-weight: 500;
+  line-height: 1.4;
+  cursor: pointer;
+  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
+  text-decoration: none;
+}
+.chip:hover {
+  background: var(--c-cobalt-50);
+  border-color: var(--c-cobalt-200);
+  text-decoration: none;
+  color: var(--c-cobalt-700);
+}
+.chip:focus-visible {
+  outline: 2px solid var(--c-blue-cobalt);
+  outline-offset: 2px;
+}
+
+.chip.active {
+  background: var(--c-blue-cobalt);
+  border-color: var(--c-blue-cobalt);
+  color: white;
+}
+.chip.active:hover {
+  background: var(--c-cobalt-700);
+  border-color: var(--c-cobalt-700);
+  color: white;
+}
+
+.label { display: inline-block; }
+
+.count {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  color: var(--c-cobalt-400);
+  font-weight: 500;
+}
+.chip.active .count { color: var(--c-cobalt-200); }

package/src/components/ContentTypeFilter/contentTypes.js

@@ -0,0 +1,58 @@
+/**
+ * Single source of truth for the academy content-type taxonomy.
+ *
+ * Used by:
+ *   - <ContentTypeFilter /> for the chip row
+ *   - <ContentCard />        to render the type chip and pick a bullet colour
+ *   - <ContentDetailHero />  to render the type chip in the header
+ *   - schemas/academy/content.schema.json (mirrored in the JSON Schema)
+ *
+ * Content types correspond 1:1 with frontmatter `contentType:` values
+ * in academy MDX files. Extending this list here is enough to surface
+ * a new chip across every site that consumes the preset; the JSON
+ * Schema in /schemas/academy/content.schema.json must be updated in
+ * lockstep.
+ */
+
+export const CONTENT_TYPES = [
+  'blog',
+  'guide',
+  'case-study',
+  'webinar',
+  'tutorial',
+];
+
+export const CONTENT_TYPE_LABELS = {
+  'blog':       'Blog',
+  'guide':      'Guide',
+  'case-study': 'Case study',
+  'webinar':    'Webinar',
+  'tutorial':   'Tutorial',
+};
+
+/**
+ * Plural, sentence-case labels for the chip row. We use plural for
+ * the filter ("Blogs", "Case studies") because each chip filters a
+ * collection.
+ */
+export const CONTENT_TYPE_PLURAL_LABELS = {
+  'blog':       'Blogs',
+  'guide':      'Guides',
+  'case-study': 'Case studies',
+  'webinar':    'Webinars',
+  'tutorial':   'Tutorials',
+};
+
+/**
+ * Bullet (HexBullet) colour for the type chip. One token per type so
+ * a card's content-type pill is identifiable at a glance. Only one
+ * type uses KNVB orange (webinar), so the kit's "one orange accent
+ * per screen" rule still holds at landing scale.
+ */
+export const CONTENT_TYPE_BULLET_COLOR = {
+  'blog':       'var(--c-blue-cobalt)',
+  'guide':      'var(--c-mint-500)',
+  'case-study': 'var(--c-cobalt-700)',
+  'webinar':    'var(--c-orange-knvb)',
+  'tutorial':   'var(--c-cobalt-400)',
+};