@conduction/docusaurus-preset 0.1.0

package/src/diagrams/cn-pipeline.js

@@ -0,0 +1,150 @@
+/**
+ * <cn-pipeline> — horizontal flow of prisms or hexes connected by arrows.
+ *
+ * The flattened cousin of cn-platform. Used in solution pages, how-
+ * it-works sections, and any sequence diagram where data moves
+ * left-to-right through a series of stages.
+ *
+ *   <cn-pipeline>
+ *     <cn-hex-prism family="coral">Source</cn-hex-prism>
+ *     <cn-hex-prism family="lavender">Process</cn-hex-prism>
+ *     <cn-hex-prism family="cobalt">Workspace</cn-hex-prism>
+ *     <cn-hex-prism family="mint">Sink</cn-hex-prism>
+ *   </cn-pipeline>
+ *
+ * The component reads its own light-DOM children, assigns each to a
+ * numbered slot, and inserts an arrow connector between consecutive
+ * pairs. Re-renders when children change.
+ *
+ * Slots
+ *   default  — pipeline stages, in left-to-right order
+ *   caption  — optional small text under the row
+ *
+ * Attributes
+ *   tone     — dotted | solid | dim   (default: dotted)
+ *              Arrow style.
+ *   align    — start | center | end   (default: center)
+ *              Vertical alignment of stages along the baseline.
+ */
+
+class CnPipeline extends HTMLElement {
+  static get observedAttributes() { return ['tone', 'align']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() {
+    this.render();
+    this._observer = new MutationObserver(() => this.render());
+    this._observer.observe(this, { childList: true });
+  }
+
+  disconnectedCallback() {
+    if (this._observer) this._observer.disconnect();
+  }
+
+  attributeChangedCallback() { if (this.shadowRoot) this.render(); }
+
+  render() {
+    const tone = this.getAttribute('tone') || 'dotted';
+    const align = this.getAttribute('align') || 'center';
+
+    /* Assign each light-DOM child a unique slot name so we can
+       interleave arrows between them in the shadow DOM. Skip the
+       caption slot. */
+    const stages = [...this.children].filter(
+      el => el.getAttribute('slot') !== 'caption'
+    );
+    stages.forEach((el, i) => { el.setAttribute('slot', `step-${i}`); });
+
+    const arrowDash = tone === 'solid' ? 'none'
+                    : tone === 'dim'    ? '2 4'
+                                        : '4 6';
+    const arrowColor = tone === 'dim' ? 'var(--c-cobalt-200)' : 'var(--c-cobalt-400)';
+
+    const arrowSvg = `
+      <svg class="arrow" viewBox="0 0 60 12" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+        <line x1="0" y1="6" x2="48" y2="6" stroke="${arrowColor}" stroke-width="1.5"
+              stroke-linecap="round"
+              ${arrowDash !== 'none' ? `stroke-dasharray="${arrowDash}"` : ''}/>
+        <polyline points="42,1 50,6 42,11" fill="none" stroke="${arrowColor}"
+                  stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    `.trim();
+
+    let pipelineMarkup = '';
+    for (let i = 0; i < stages.length; i++) {
+      pipelineMarkup += `<slot name="step-${i}"></slot>`;
+      if (i < stages.length - 1) {
+        pipelineMarkup += arrowSvg;
+      }
+    }
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--conduction-typography-font-family-body, system-ui, sans-serif);
+        }
+
+        .stage {
+          background: var(--c-cobalt-50);
+          border-radius: var(--radius-lg);
+          padding: var(--space-9) var(--space-7);
+          overflow-x: auto;
+        }
+
+        .row {
+          display: flex;
+          align-items: ${align === 'start' ? 'flex-start' : align === 'end' ? 'flex-end' : 'center'};
+          justify-content: center;
+          gap: var(--space-3);
+          flex-wrap: nowrap;
+          min-height: 200px;
+        }
+
+        .arrow {
+          width: 60px;
+          height: 12px;
+          flex-shrink: 0;
+        }
+
+        .caption {
+          margin-top: var(--space-5);
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: 11px;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--c-cobalt-400);
+          text-align: center;
+        }
+        ::slotted([slot="caption"]) {
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: 11px;
+          letter-spacing: 0.08em;
+          color: var(--c-cobalt-400);
+        }
+
+        @media (max-width: 700px) {
+          .row { flex-wrap: wrap; }
+          .arrow { transform: rotate(90deg); width: 40px; }
+        }
+      </style>
+
+      <div class="stage">
+        <div class="row">
+          ${pipelineMarkup}
+        </div>
+        <div class="caption"><slot name="caption"></slot></div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('cn-pipeline')) {
+  customElements.define('cn-pipeline', CnPipeline);
+}
+
+export { CnPipeline };

package/src/diagrams/cn-platform.js

@@ -0,0 +1,156 @@
+/**
+ * <cn-platform> — workspace-plus-orbiting-apps cluster.
+ *
+ * The canonical "what is ConNext" diagram: a Nextcloud workspace at
+ * the centre, six application prisms arranged in a hex ring around
+ * it. Used on landing pages, product overviews, ecosystem visuals.
+ *
+ * Slots
+ *   apex     — central element; required (typically a cobalt cn-hex-prism).
+ *              Same slot name as cn-domain-tree; "kernel" is a banned
+ *              word in the brand vocabulary, see identity/voice.html.
+ *   default  — orbiting apps; up to six, positioned in this order:
+ *              top-left, top-right, left, right, bottom-left, bottom-right
+ *   caption  — optional small text under the cluster
+ *
+ * Attributes
+ *   ground   — boolean; renders a soft platform shadow under the cluster
+ *   tone     — light | cobalt-50 | white       (default: cobalt-50)
+ *              Background of the surrounding stage.
+ *
+ * The component owns only layout + ground + optional connector ring.
+ * Each child element keeps its own styling, so the apex element can
+ * be a hex prism or a flat hex interchangeably.
+ */
+
+class CnPlatform extends HTMLElement {
+  static get observedAttributes() { return ['ground', 'tone']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() { this.render(); }
+  attributeChangedCallback() { if (this.shadowRoot) this.render(); }
+
+  render() {
+    const ground = this.hasAttribute('ground');
+    const tone = this.getAttribute('tone') || 'cobalt-50';
+
+    const stageBg = tone === 'white'
+      ? 'white'
+      : tone === 'light'
+      ? 'var(--c-cobalt-100)'
+      : 'var(--c-cobalt-50)';
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: block;
+          font-family: var(--conduction-typography-font-family-body, system-ui, sans-serif);
+        }
+
+        .stage {
+          position: relative;
+          background: ${stageBg};
+          border-radius: var(--radius-lg);
+          padding: var(--space-9) var(--space-7);
+          overflow: hidden;
+        }
+
+        .grid {
+          display: grid;
+          grid-template-columns: repeat(5, 1fr);
+          grid-template-rows: repeat(3, auto);
+          gap: var(--space-3) var(--space-4);
+          justify-items: center;
+          align-items: center;
+          position: relative;
+          z-index: 1;
+        }
+
+        /* Apex (workspace) sits dead centre */
+        ::slotted([slot="apex"]) {
+          grid-column: 3;
+          grid-row: 2;
+        }
+
+        /* Six orbiting apps — assigned by nth-child of the default slot */
+        ::slotted(*:not([slot])) {
+          /* default cells fall outside the grid; positioned per-index below */
+        }
+        ::slotted(:nth-child(1):not([slot])) { grid-column: 2; grid-row: 1; }
+        ::slotted(:nth-child(2):not([slot])) { grid-column: 4; grid-row: 1; }
+        ::slotted(:nth-child(3):not([slot])) { grid-column: 1; grid-row: 2; }
+        ::slotted(:nth-child(4):not([slot])) { grid-column: 5; grid-row: 2; }
+        ::slotted(:nth-child(5):not([slot])) { grid-column: 2; grid-row: 3; }
+        ::slotted(:nth-child(6):not([slot])) { grid-column: 4; grid-row: 3; }
+
+        ${ground ? `
+          .ground {
+            position: absolute;
+            bottom: 8%;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 80%;
+            height: 28px;
+            background: radial-gradient(ellipse at center,
+              rgba(33, 70, 139, 0.18) 0%,
+              transparent 70%);
+            z-index: 0;
+            pointer-events: none;
+          }
+        ` : ''}
+
+        .caption {
+          margin-top: var(--space-5);
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: 11px;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+          color: var(--c-cobalt-400);
+          text-align: center;
+        }
+        ::slotted([slot="caption"]) {
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: 11px;
+          letter-spacing: 0.08em;
+          color: var(--c-cobalt-400);
+        }
+
+        @media (max-width: 700px) {
+          .grid {
+            grid-template-columns: 1fr 1fr;
+            grid-template-rows: auto;
+          }
+          ::slotted([slot="apex"]) { grid-column: 1 / -1; grid-row: 1; }
+          ::slotted(:nth-child(1):not([slot])),
+          ::slotted(:nth-child(2):not([slot])),
+          ::slotted(:nth-child(3):not([slot])),
+          ::slotted(:nth-child(4):not([slot])),
+          ::slotted(:nth-child(5):not([slot])),
+          ::slotted(:nth-child(6):not([slot])) {
+            grid-column: auto;
+            grid-row: auto;
+          }
+        }
+      </style>
+
+      <div class="stage">
+        ${ground ? '<div class="ground"></div>' : ''}
+        <div class="grid">
+          <slot name="apex"></slot>
+          <slot></slot>
+        </div>
+        <div class="caption"><slot name="caption"></slot></div>
+      </div>
+    `;
+  }
+}
+
+if (!customElements.get('cn-platform')) {
+  customElements.define('cn-platform', CnPlatform);
+}
+
+export { CnPlatform };

package/src/diagrams/cn-side-box.js

@@ -0,0 +1,104 @@
+/**
+ * <cn-side-box> — the rectangle-feed-prism pattern.
+ *
+ * Hex prisms are "the system". Side-boxes are "what feeds it" or
+ * "what consumes it". The shape difference is the hierarchy.
+ *
+ *   <cn-side-box header="YOUR DATA">
+ *     <cn-side-row icon="..." label="Spreadsheets"/>
+ *     <cn-side-row icon="..." label="Databases"/>
+ *     <cn-side-row icon="..." label="REST & SOAP"/>
+ *     <cn-side-row icon="..." label="Legacy systems"/>
+ *   </cn-side-box>
+ *
+ * Slots
+ *   default  — rows of icon + label
+ *   footer   — optional "+ N more" line
+ *
+ * Attributes
+ *   header   — string; the small uppercase chip header
+ *   compact  — boolean; tighter row padding for dense diagrams
+ *   width    — sm (180px) | md (220px) | lg (260px)   (default: md)
+ */
+
+const WIDTHS = { sm: 180, md: 220, lg: 260 };
+
+class CnSideBox extends HTMLElement {
+  static get observedAttributes() { return ['header', 'compact', 'width']; }
+
+  constructor() {
+    super();
+    this.attachShadow({ mode: 'open' });
+  }
+
+  connectedCallback() { this.render(); }
+  attributeChangedCallback() { if (this.shadowRoot) this.render(); }
+
+  render() {
+    const header = this.getAttribute('header') || '';
+    const compact = this.hasAttribute('compact');
+    const widthAttr = this.getAttribute('width') || 'md';
+    const widthPx = WIDTHS[widthAttr] ? `${WIDTHS[widthAttr]}px` : widthAttr;
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        :host {
+          display: inline-block;
+          width: ${widthPx};
+          background: white;
+          border: 1px solid var(--c-cobalt-200);
+          border-radius: var(--radius-md);
+          padding: ${compact ? '10px 10px 12px' : '14px 14px 16px'};
+          font-family: var(--conduction-typography-font-family-body, system-ui, sans-serif);
+        }
+
+        .chip {
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: 10px;
+          letter-spacing: 0.16em;
+          text-transform: uppercase;
+          color: var(--c-cobalt-400);
+          margin-bottom: ${compact ? '8px' : '12px'};
+        }
+        .chip:empty { display: none; }
+
+        ::slotted(*) {
+          display: grid;
+          grid-template-columns: ${compact ? '20px' : '28px'} 1fr;
+          gap: ${compact ? '8px' : '12px'};
+          align-items: center;
+          padding: ${compact ? '4px 0' : '6px 0'};
+          font-size: ${compact ? '12px' : '13px'};
+          color: var(--c-cobalt-700);
+        }
+
+        ::slotted([slot="footer"]) {
+          margin-top: ${compact ? '6px' : '8px'};
+          padding-top: ${compact ? '6px' : '8px'};
+          border-top: 1px dashed var(--c-cobalt-200);
+          font-family: var(--conduction-typography-font-family-code, ui-monospace, monospace);
+          font-size: 11px;
+          color: var(--c-cobalt-400);
+          text-align: center;
+          display: block;
+        }
+      </style>
+
+      <div class="chip">${this._escape(header)}</div>
+      <slot></slot>
+      <slot name="footer"></slot>
+    `;
+  }
+
+  _escape(s) {
+    return String(s).replace(/[<>&"']/g, c => ({
+      '<': '&lt;', '>': '&gt;', '&': '&amp;', '"': '&quot;', "'": '&#39;'
+    }[c]));
+  }
+}
+
+if (!customElements.get('cn-side-box')) {
+  customElements.define('cn-side-box', CnSideBox);
+}
+
+export { CnSideBox };

package/src/diagrams/index.js

@@ -0,0 +1,28 @@
+/**
+ * @conduction/diagrams
+ *
+ * Brand-strict diagram primitives as web components.
+ * Importing this module registers every <cn-*> element on the page.
+ *
+ * Usage (no build step):
+ *   <script type="module" src="../diagrams/src/index.js"></script>
+ *   <cn-hex color="cobalt" size="lg">Connect</cn-hex>
+ *   <cn-hex-prism family="coral" size="lg">Catalogi</cn-hex-prism>
+ *
+ * Components:
+ *   <cn-hex>            — pointy-top hex primitive (label + icon)
+ *   <cn-hex-prism>      — 3D isometric prism, the atomic unit for platform diagrams
+ *   <cn-domain-tree>    — vertical apex-and-branches layout for domain maps
+ *   <cn-platform>       — workspace-plus-orbiting-apps cluster
+ *   <cn-pipeline>       — horizontal flow of stages connected by arrows
+ *   <cn-side-box>       — rectangle-feed-prism pattern for non-app surfaces
+ *   <cn-honeycomb-bg>   — honeycomb backdrop wrapper for hero scenes
+ */
+
+export * from './cn-hex.js';
+export * from './cn-hex-prism.js';
+export * from './cn-domain-tree.js';
+export * from './cn-platform.js';
+export * from './cn-pipeline.js';
+export * from './cn-side-box.js';
+export * from './cn-honeycomb-bg.js';

package/src/index.js

@@ -0,0 +1,183 @@
+/**
+ * @conduction/docusaurus-preset
+ *
+ * Brand-default Docusaurus 3 config helper. Sites import createConfig()
+ * and override only the parts that differ from the brand baseline.
+ *
+ *   // docusaurus.config.js
+ *   const { createConfig } = require('@conduction/docusaurus-preset');
+ *
+ *   module.exports = createConfig({
+ *     title: 'Conduction',
+ *     tagline: 'Open-source apps for the Nextcloud workspace.',
+ *     url: 'https://conduction.nl',
+ *     baseUrl: '/',
+ *   });
+ *
+ * createConfig() returns a complete Docusaurus config with brand tokens,
+ * the four-locale i18n block (nl/en/de/fr, NL default), Plex Mono +
+ * Figtree fonts, and Navbar / Footer scaffolding. Sites override any
+ * field by passing it in or merging after the call.
+ */
+
+const path = require('path');
+
+/**
+ * Brand-default i18n block. Nederlands at the URL root, others at /en/, /de/, /fr/.
+ */
+const I18N = {
+  defaultLocale: 'nl',
+  locales: ['nl', 'en', 'de', 'fr'],
+  localeConfigs: {
+    nl: { label: 'Nederlands', htmlLang: 'nl-NL', direction: 'ltr' },
+    en: { label: 'English',    htmlLang: 'en-GB', direction: 'ltr' },
+    de: { label: 'Deutsch',    htmlLang: 'de-DE', direction: 'ltr' },
+    fr: { label: 'Français',   htmlLang: 'fr-FR', direction: 'ltr' },
+  },
+};
+
+/**
+ * Brand-default navbar. Sites pass their own items[] and logo; the chrome
+ * styling (cobalt-on-white, Plex-Mono caption) is locked.
+ */
+const baseNavbar = (siteName) => ({
+  title: siteName,
+  logo: {
+    alt: `${siteName} avatar`,
+    src: 'img/logo.svg',
+    srcDark: 'img/logo-dark.svg',
+  },
+  items: [
+    { type: 'localeDropdown', position: 'right' },
+    { href: 'https://github.com/ConductionNL', label: 'GitHub', position: 'right' },
+  ],
+});
+
+/**
+ * Brand-default footer. Cobalt-900 panel with three-column link grid +
+ * the standard Conduction tells (KvK, BTW, EUPL/MIT licence).
+ */
+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()}`,
+});
+
+/**
+ * Build a complete Docusaurus config from a small set of site-specific opts.
+ *
+ * Required:
+ *   title, tagline, url, baseUrl
+ *
+ * Optional:
+ *   organizationName, projectName, navbar (deep-merged into base),
+ *   footer (replaces base), customCss[] (appended to brand.css),
+ *   plugins[], presets, i18n (overrides defaults)
+ */
+function createConfig(opts) {
+  if (!opts || !opts.title || !opts.url) {
+    throw new Error(
+      '@conduction/docusaurus-preset: createConfig() requires { title, tagline, url, baseUrl }'
+    );
+  }
+
+  /* brand.css is injected globally by the theme plugin (./theme.js) via
+     getClientModules(), so customCss carries site-specific CSS only. */
+  const customCss = opts.customCss || [];
+
+  return {
+    title: opts.title,
+    tagline: opts.tagline || '',
+    favicon: opts.favicon || 'img/favicon.svg',
+    url: opts.url,
+    baseUrl: opts.baseUrl || '/',
+    trailingSlash: true,
+
+    organizationName: opts.organizationName || 'ConductionNL',
+    projectName: opts.projectName || 'design-system',
+
+    onBrokenLinks: 'warn',
+    onBrokenMarkdownLinks: 'warn',
+
+    /* Two static roots, in increasing-precedence order:
+         1. preset's own ../static (lib/canal-footer, conduction-bg, hex-rain,
+            platform-diagram + brand img/favicon, logo, logo-dark, nextcloud-logo)
+         2. site's own static/ (CNAME, site-specific images, overrides)
+       Last wins per-file, so a site can drop its own /img/logo.svg into
+       static/img/logo.svg to override the brand default. */
+    staticDirectories: opts.staticDirectories || [
+      path.resolve(__dirname, '..', 'static'),
+      'static',
+    ],
+
+    i18n: opts.i18n || I18N,
+
+    presets: opts.presets || [
+      [
+        'classic',
+        {
+          docs: {
+            sidebarPath: './sidebars.js',
+            editUrl: opts.editUrl,
+          },
+          blog: opts.blog === false ? false : {
+            showReadingTime: true,
+            blogTitle: opts.title + ' blog',
+            blogDescription: 'Updates from Conduction',
+          },
+          theme: {
+            customCss,
+          },
+        },
+      ],
+    ],
+
+    /* Brand theme: registers ./theme/* swizzles (Navbar, Footer, …)
+       and auto-loads brand.css. Site-specific themes can be added by
+       passing themes: [...] in opts (this default is replaced wholesale). */
+    themes: opts.themes || [require.resolve('./theme.js')],
+
+    themeConfig: Object.assign(
+      {
+        colorMode: {
+          defaultMode: 'light',
+          disableSwitch: false,
+          respectPrefersColorScheme: true,
+        },
+        navbar: Object.assign(baseNavbar(opts.title), opts.navbar || {}),
+        footer: opts.footer || baseFooter(),
+      },
+      opts.themeConfig || {}
+    ),
+
+    plugins: opts.plugins || [],
+  };
+}
+
+module.exports = { createConfig, I18N, baseNavbar, baseFooter };