@conduction/docusaurus-preset 3.18.0 → 3.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@conduction/docusaurus-preset",
-  "version": "3.18.0",
+  "version": "3.19.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/index.js

@@ -133,6 +133,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';