@conduction/docusaurus-preset 3.18.0 → 3.20.0

package/package.json

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

package/src/components/PullQuote/PullQuote.jsx

@@ -0,0 +1,84 @@
+/**
+ * <PullQuote />
+ *
+ * Editorial emphasis for long-form prose. Lifts one or two load-
+ * bearing sentences out of an opinion piece, product page, or
+ * academy post into an orange-bordered cobalt panel. Optional
+ * attribution slot turns the pull-quote into a citable position.
+ *
+ * Use sparingly. One to three per page; on the sentences that
+ * carry the argument. The hero variant is for a single citable
+ * thesis near the top of the post.
+ *
+ * Variants:
+ *   - "default" — orange-knvb left border, cobalt-50 fill,
+ *     italic cobalt body. Drop into MDX between paragraphs.
+ *   - "hero"    — larger (28px), no italics, eyebrow hex bullet.
+ *     Use once per page for the thesis statement.
+ *   - "compact" — smaller (16px), tighter padding. For sidebars
+ *     or dense layouts.
+ *
+ * Usage:
+ *
+ *   <PullQuote>
+ *     You buy a suite. You use a workspace. You inhabit a platform.
+ *   </PullQuote>
+ *
+ *   <PullQuote
+ *     attribution="Ruben van der Linde"
+ *     role="CTO Conduction"
+ *   >
+ *     Nextcloud-as-platform is true today in every structural sense
+ *     that matters.
+ *   </PullQuote>
+ *
+ *   <PullQuote
+ *     variant="hero"
+ *     eyebrow="The thesis"
+ *     attribution="Ruben van der Linde"
+ *     role="CTO Conduction"
+ *   >
+ *     Tomorrow's functionality will not be built by vendors. It will
+ *     be built by users with AI. In that world, scale wins.
+ *   </PullQuote>
+ *
+ * Mirrors preview/components/pull-quote.html.
+ */
+
+import React from 'react';
+import styles from './PullQuote.module.css';
+
+export default function PullQuote({
+  children,
+  attribution,
+  role,
+  variant = 'default',
+  eyebrow,
+  className,
+}) {
+  const composed = [
+    styles.quote,
+    variant === 'hero' && styles.hero,
+    variant === 'compact' && styles.compact,
+    className,
+  ].filter(Boolean).join(' ');
+
+  return (
+    <blockquote className={composed}>
+      {variant === 'hero' && eyebrow && (
+        <span className={styles.eyebrow}>
+          <span className={styles.eyebrowHex} aria-hidden="true" />
+          {eyebrow}
+        </span>
+      )}
+      {typeof children === 'string' ? <p>{children}</p> : children}
+      {(attribution || role) && (
+        <cite className={styles.cite}>
+          {attribution && <span className={styles.citeName}>{attribution}</span>}
+          {attribution && role && ', '}
+          {role}
+        </cite>
+      )}
+    </blockquote>
+  );
+}

package/src/components/PullQuote/PullQuote.module.css

@@ -0,0 +1,78 @@
+/**
+ * <PullQuote /> styles. Editorial emphasis for long-form prose:
+ * opinion pieces, product pages, academy blog posts. Orange-knvb
+ * left border, cobalt-50 fill, italic cobalt body, code-font cite.
+ *
+ * Mirrors preview/components/pull-quote.html and lifts the
+ * cg-pullquote pattern from conduction.nl/commonground into a
+ * reusable component.
+ */
+
+.quote {
+  position: relative;
+  border-left: 4px solid var(--c-orange-knvb);
+  background: var(--c-cobalt-50);
+  padding: var(--space-5) var(--space-6);
+  margin: var(--space-7) 0;
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+  font-family: var(--conduction-typography-font-family-body);
+  font-size: 22px;
+  font-weight: 500;
+  color: var(--c-blue-cobalt);
+  line-height: 1.4;
+  font-style: italic;
+}
+
+.quote p { margin: 0; }
+.quote p + p { margin-top: var(--space-3); }
+
+.cite {
+  display: block;
+  margin-top: var(--space-4);
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.06em;
+  color: var(--c-cobalt-700);
+}
+
+.citeName {
+  color: var(--c-cobalt-900);
+}
+
+/* Hero variant — larger, eyebrow hex, no italics. For one citable
+   position statement near the top of an opinion piece. */
+.hero {
+  font-size: 28px;
+  font-style: normal;
+  padding: var(--space-7) var(--space-8);
+}
+
+.eyebrow {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 400;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--c-cobalt-700);
+  margin-bottom: var(--space-4);
+}
+
+.eyebrowHex {
+  width: 10px;
+  height: 12px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-orange-knvb);
+}
+
+/* Compact variant — sidebar pull-out, lighter weight. */
+.compact {
+  font-size: 16px;
+  padding: var(--space-4) var(--space-5);
+}

package/src/components/SetupSteps/SetupSteps.jsx

@@ -0,0 +1,81 @@
+/**
+ * <SetupSteps /> + <SetupStep />
+ *
+ * Vertical numbered-step list for docs setup/install/walkthrough
+ * sections and editorial action prompts. A small orange hex with a
+ * white number sits on the left of each row; bold title + one short
+ * body paragraph sit on the right.
+ *
+ * Distinct from <HowSteps />, which renders a 3-up card row for
+ * marketing surfaces (How install works, How to get help, …).
+ * SetupSteps lives in body prose where steps are sequential and
+ * detailed, and the list reads top to bottom.
+ *
+ * Numbers are auto-assigned in document order. Pass `start` to
+ * resume after a break (e.g. a continued procedure split across
+ * sections).
+ *
+ * Usage:
+ *
+ *   <SetupSteps title="Setup" lede="Numbered steps you read top to bottom.">
+ *     <SetupStep title="Add an xWiki source">
+ *       Open *Integrations → Sources → New source*, paste the base URL.
+ *     </SetupStep>
+ *     <SetupStep title="Pick the spaces to index">
+ *       Per source, choose one or more xWiki spaces.
+ *     </SetupStep>
+ *     <SetupStep title="Verify">
+ *       Open the app's chat sidebar and ask a matching question.
+ *     </SetupStep>
+ *   </SetupSteps>
+ *
+ *   // Editorial / action-prompt use, no h2 above the list:
+ *   <SetupSteps title={null}>
+ *     <SetupStep title="Call Nextcloud by its proper name.">
+ *       In tenders, in policy documents, in architecture diagrams.
+ *     </SetupStep>
+ *     ...
+ *   </SetupSteps>
+ *
+ * Mirrors preview/components/setup-steps.html.
+ */
+
+import React, {Children, cloneElement, isValidElement} from 'react';
+import styles from './SetupSteps.module.css';
+
+export function SetupStep({number, title, children, className}) {
+  const composed = [styles.row, className].filter(Boolean).join(' ');
+  return (
+    <div className={composed}>
+      {number != null && <div className={styles.num}>{number}</div>}
+      {/* div not p: MDX may wrap inline children in its own <p>,
+          which would be invalid nested inside another <p>. */}
+      <div className={styles.body}>
+        {title && <span className={styles.bodyTitle}>{title}</span>}
+        {children}
+      </div>
+    </div>
+  );
+}
+
+export default function SetupSteps({
+  title,
+  lede,
+  start = 1,
+  children,
+  className,
+}) {
+  const numbered = Children.map(children, (child, i) => {
+    if (!isValidElement(child)) return child;
+    if (child.props.number != null) return child;
+    return cloneElement(child, {number: start + i});
+  });
+  const composed = [styles.wrap, className].filter(Boolean).join(' ');
+  return (
+    <section className={composed}>
+      {title && <h2 className={styles.title}>{title}</h2>}
+      {lede && <p className={styles.lede}>{lede}</p>}
+      {numbered}
+    </section>
+  );
+}

package/src/components/SetupSteps/SetupSteps.module.css

@@ -0,0 +1,82 @@
+/**
+ * <SetupSteps /> + <SetupStep /> styles. Vertical numbered-row
+ * pattern for docs setup/install/walkthrough sections and editorial
+ * action lists. Small orange hex with a white number on the left,
+ * bold title + one short body paragraph on the right.
+ *
+ * Distinct from <HowSteps /> which is a 3-up card row for marketing
+ * surfaces. SetupSteps lives inside body prose, so steps stack
+ * vertically and read like sentences in a list.
+ *
+ * Mirrors preview/components/setup-steps.html.
+ */
+
+.wrap {
+  margin: var(--space-7) 0;
+  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: 16px;
+  line-height: 1.6;
+  color: var(--c-cobalt-700);
+  margin: 0 0 var(--space-5);
+  max-width: 60ch;
+}
+
+.row {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--space-4);
+  margin: var(--space-4) 0;
+}
+
+.num {
+  width: 36px;
+  height: 42px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-orange-knvb);
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-weight: 600;
+  flex-shrink: 0;
+}
+
+.body {
+  font-size: 14px;
+  line-height: 1.55;
+  color: var(--c-cobalt-700);
+}
+
+.body strong,
+.bodyTitle {
+  display: block;
+  margin-bottom: 4px;
+  color: var(--c-cobalt-900);
+  font-size: 17px;
+  font-weight: 600;
+}
+
+.body p {
+  margin: 0;
+}
+
+.body code {
+  background: var(--c-cobalt-50);
+  padding: 1px 6px;
+  border-radius: 3px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 13px;
+  color: var(--c-cobalt-900);
+}

package/src/components/index.js

@@ -48,6 +48,7 @@ export {default as ReferenceCard, ReferenceGrid} from './ReferenceCard/Reference
 export {default as PairCard, PairRow} from './PairCard/PairCard.jsx';
 export {default as FeatureList, FeatureItem} from './FeatureList/FeatureList.jsx';
 export {default as HowSteps, HowStep} from './HowSteps/HowSteps.jsx';
+export {default as SetupSteps, SetupStep} from './SetupSteps/SetupSteps.jsx';
 export {default as FAQ, FAQItem} from './FAQ/FAQ.jsx';
 export {default as EmployeeCard, TeamGrid} from './EmployeeCard/EmployeeCard.jsx';
 export {default as DetailHero} from './DetailHero/DetailHero.jsx';
@@ -133,6 +134,7 @@ export {
    patterns that academy tutorials kept duplicating. Designed for use
    inside an MDX academy post body. */
 export {default as HexCard} from './HexCard/HexCard.jsx';
+export {default as PullQuote} from './PullQuote/PullQuote.jsx';
 export {default as Outcomes, Outcome} from './Outcomes/Outcomes.jsx';
 export {default as Prerequisites, PrerequisiteItem} from './Prerequisites/Prerequisites.jsx';
 export {default as Troubleshooting, TroubleshootingItem} from './Troubleshooting/Troubleshooting.jsx';