@conduction/docusaurus-preset 0.1.0

package/src/components/DetailHero/DetailHero.module.css

@@ -0,0 +1,154 @@
+/**
+ * <DetailHero /> styles. Mirrors the .head pattern in preview/pages/
+ * app-detail.html, solution-page.html, partner-detail.html.
+ */
+
+.head {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 24px 64px 56px;
+  font-family: var(--conduction-typography-font-family-body);
+}
+
+.crumb {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 12px;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin-bottom: 24px;
+}
+.crumb a { color: var(--c-cobalt-400); text-decoration: none; }
+.crumb a:hover { color: var(--c-orange-knvb); }
+.sep { margin: 0 8px; color: var(--c-cobalt-200); }
+
+.headInner {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 48px;
+  align-items: center;
+}
+.withIllustration .headInner {
+  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
+  gap: 64px;
+}
+@media (max-width: 900px) {
+  .withIllustration .headInner { grid-template-columns: 1fr; }
+}
+
+.badgeRow {
+  display: flex;
+  gap: 16px;
+  align-items: center;
+  margin-bottom: 20px;
+  flex-wrap: wrap;
+}
+
+.badge {
+  display: inline-flex;
+  align-items: center;
+  gap: 6px;
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: var(--c-cobalt-700);
+}
+.versionBadge { color: var(--c-cobalt-400); }
+
+.downloadsBadge {
+  color: var(--c-blue-cobalt);
+  background: var(--c-cobalt-50);
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-sm);
+  padding: 4px 10px;
+  letter-spacing: 0.04em;
+}
+.downloadIcon {
+  width: 12px;
+  height: 12px;
+  fill: none;
+  stroke: currentColor;
+  stroke-width: 2;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+
+.title {
+  font-size: 64px;
+  font-weight: 700;
+  letter-spacing: -0.025em;
+  line-height: 1.05;
+  margin: 0 0 20px;
+  color: var(--c-cobalt-900);
+  display: flex;
+  align-items: center;
+  gap: 22px;
+  flex-wrap: wrap;
+}
+@media (max-width: 1100px) { .title { font-size: 52px; } }
+@media (max-width: 700px)  { .title { font-size: 40px; gap: 14px; } }
+.title :global(.next-blue) { color: var(--c-nextcloud-blue); }
+.titleText { display: inline-block; }
+
+/* Leading hex inline with the H1. Sized to roughly cap-height × 1.3
+   of the title so it reads as a typographic-scale mark, not a separate
+   illustration. */
+.titleIcon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 80px;
+  height: 92px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-blue-cobalt);
+  color: white;
+  flex-shrink: 0;
+}
+.titleIcon svg {
+  width: 38px;
+  height: 38px;
+  stroke: currentColor;
+  stroke-width: 1.6;
+  fill: none;
+  stroke-linecap: round;
+  stroke-linejoin: round;
+}
+@media (max-width: 1100px) {
+  .titleIcon { width: 64px; height: 74px; }
+  .titleIcon svg { width: 30px; height: 30px; }
+}
+@media (max-width: 700px) {
+  .titleIcon { width: 48px; height: 55px; }
+  .titleIcon svg { width: 22px; height: 22px; }
+}
+
+.tagline {
+  font-size: 22px;
+  line-height: 1.5;
+  color: var(--c-cobalt-700);
+  max-width: 60ch;
+  margin: 0 0 32px;
+}
+.tagline :global(.next-blue) { color: var(--c-nextcloud-blue); }
+
+.actions {
+  display: flex;
+  gap: 14px;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
+/* Right-side illustration slot. Holds an <AppMock>, a custom JSX
+   diagram, or any other panel a page wants to show next to its
+   title. Sized to balance the left copy column without dominating. */
+.illustration {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  width: 100%;
+}
+.illustration > * { width: 100%; max-width: 560px; }
+@media (max-width: 900px) {
+  .illustration { justify-content: flex-start; }
+}

package/src/components/Diagrams/Diagrams.jsx

@@ -0,0 +1,148 @@
+/**
+ * Thin React wrappers for the framework-agnostic diagram web
+ * components in @conduction/diagrams: <cn-hex>, <cn-hex-prism>,
+ * <cn-platform>, <cn-domain-tree>, etc.
+ *
+ * Why React wrappers around already-working web components?
+ *   - Type-checked prop names (no remembering "size" vs "scale")
+ *   - Lazy-imports the runtime so MDX pages don't have to remember
+ *     the @conduction/diagrams import in <Hero/>'s useEffect
+ *   - Auto-conversion of camelCase props to dashed HTML attributes
+ *     where needed (e.g. brandColor → brand-color)
+ *
+ * Slot-based content (icon, label, etc.) is passed through as
+ * children with `slot="..."` attributes, so callers compose like
+ * regular React components.
+ *
+ * Usage in MDX:
+ *
+ *   import {Hex, HexPrism} from '@conduction/docusaurus-preset/components';
+ *
+ *   <Hex color="cobalt" size="md" variant="solid">
+ *     <span slot="kicker">DATA</span>
+ *     OpenRegister
+ *   </Hex>
+ *
+ *   <HexPrism family="coral" size="lg" state="hover">
+ *     <span slot="kicker">CATALOG</span>
+ *     OpenCatalogi
+ *   </HexPrism>
+ *
+ * The runtime is lazy-loaded once, then customElements.define guards
+ * keep subsequent imports a no-op. If the package isn't installed
+ * (non-Conduction sites), the import fails silently and the elements
+ * render as plain unknown HTML, which the browser tolerates.
+ */
+
+import React, {useEffect} from 'react';
+import useIsBrowser from '@docusaurus/useIsBrowser';
+
+let runtimeImported = false;
+function ensureRuntime() {
+  if (typeof window === 'undefined' || runtimeImported) return;
+  runtimeImported = true;
+  import('../../diagrams/index.js').catch(() => {
+    /* Side-effect import that registers every <cn-*> custom element.
+       In rare environments where dynamic import fails (e.g. an old SSR
+       runtime), fall back to plain unknown-element rendering. */
+    runtimeImported = false;
+  });
+}
+
+/* Lazy-runtime hook shared by every diagram wrapper. */
+function useDiagramRuntime() {
+  const isBrowser = useIsBrowser();
+  useEffect(() => { if (isBrowser) ensureRuntime(); }, [isBrowser]);
+}
+
+/* Strip undefined props before forwarding so we don't emit empty
+   attributes on the custom element. */
+function attrs(obj) {
+  const out = {};
+  for (const [k, v] of Object.entries(obj)) {
+    if (v === undefined || v === null || v === false) continue;
+    out[k] = v;
+  }
+  return out;
+}
+
+/* ============================================================
+   <Hex /> wraps <cn-hex>
+   Observed: color, size, variant, layout, interactive
+   ============================================================ */
+export function Hex({color, size, variant, layout, interactive, children, ...rest}) {
+  useDiagramRuntime();
+  return (
+    <cn-hex {...attrs({color, size, variant, layout, interactive: interactive ? '' : undefined})} {...rest}>
+      {children}
+    </cn-hex>
+  );
+}
+
+/* ============================================================
+   <HexPrism /> wraps <cn-hex-prism>
+   Observed: family, size, state
+   ============================================================ */
+export function HexPrism({family, size, state, children, ...rest}) {
+  useDiagramRuntime();
+  return (
+    <cn-hex-prism {...attrs({family, size, state})} {...rest}>
+      {children}
+    </cn-hex-prism>
+  );
+}
+
+/* ============================================================
+   <Platform /> wraps <cn-platform>
+   Slot-based: a centre apex + surrounding hexes/prisms as children.
+   Optional ground={true} adds the cobalt ground line. The component's
+   own attributes are loose; pass through verbatim.
+   ============================================================ */
+export function Platform({ground, children, ...rest}) {
+  useDiagramRuntime();
+  return (
+    <cn-platform {...attrs({ground: ground ? '' : undefined})} {...rest}>
+      {children}
+    </cn-platform>
+  );
+}
+
+/* ============================================================
+   <DomainTree /> wraps <cn-domain-tree>
+   Pass children with slot="apex" / slot="branch" / slot="leaf" to
+   build the hierarchy.
+   ============================================================ */
+export function DomainTree({children, ...rest}) {
+  useDiagramRuntime();
+  return <cn-domain-tree {...rest}>{children}</cn-domain-tree>;
+}
+
+/* ============================================================
+   <Pipeline /> wraps <cn-pipeline>  (note: NOT the layout-grid
+   <Pipeline/> from components/Pipeline; this one is the SVG-driven
+   web-component version).
+   Re-exported as DiagramPipeline to avoid the name collision; if
+   you import it, alias on use.
+   ============================================================ */
+export function DiagramPipeline({children, ...rest}) {
+  useDiagramRuntime();
+  return <cn-pipeline {...rest}>{children}</cn-pipeline>;
+}
+
+/* ============================================================
+   <SideBox /> wraps <cn-side-box>
+   ============================================================ */
+export function SideBox({children, ...rest}) {
+  useDiagramRuntime();
+  return <cn-side-box {...rest}>{children}</cn-side-box>;
+}
+
+/* ============================================================
+   <HoneycombBg /> wraps <cn-honeycomb-bg>
+   Honeycomb-pattern background as a web component (alongside the
+   React <ConductionBg/>; this one is for plain-HTML surfaces).
+   ============================================================ */
+export function HoneycombBg(props) {
+  useDiagramRuntime();
+  return <cn-honeycomb-bg {...props} />;
+}

package/src/components/EmployeeCard/EmployeeCard.jsx

@@ -0,0 +1,127 @@
+/**
+ * <EmployeeCard /> + <TeamGrid />
+ *
+ * Person-card pattern from preview/components/employee-cards.html.
+ * Three variants:
+ *   - compact: row card for dense team grids (avatar + name + role + links)
+ *   - photo:   centered photo card for /about (large hex avatar + bio + links)
+ *   - detail:  spotlight card with the cobalt-50 corner-hex for /about/team
+ *
+ * The avatar is a 44x50 (compact) or 72x83 (large) pointy-top hex.
+ * Pass `initials` for an avatar-fill, or `photo` for a photographed person.
+ *
+ * Usage:
+ *
+ *   <TeamGrid columns={3}>
+ *     <EmployeeCard
+ *       variant="compact"
+ *       name="Ruben van der Linde"
+ *       role="Founder · Architect"
+ *       initials="RV"
+ *       avatarColor="var(--c-blue-cobalt)"
+ *       links={[
+ *         {label: 'email', href: 'mailto:ruben@conduction.nl', icon: 'mail'},
+ *         {label: 'github', href: 'https://github.com/...', icon: 'github'},
+ *       ]}
+ *     />
+ *   </TeamGrid>
+ */
+
+import React from 'react';
+import styles from './EmployeeCard.module.css';
+
+const ICONS = {
+  mail: <svg viewBox="0 0 24 24"><rect x="3" y="5" width="18" height="14" rx="2"/><path d="M3 7l9 6 9-6"/></svg>,
+  github: <svg viewBox="0 0 24 24"><path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"/></svg>,
+  linkedin: <svg viewBox="0 0 24 24"><path d="M16 8a6 6 0 0 1 6 6v7h-4v-7a2 2 0 0 0-4 0v7h-4v-7a6 6 0 0 1 6-6z"/><rect x="2" y="9" width="4" height="12"/><circle cx="4" cy="4" r="2"/></svg>,
+  phone: <svg viewBox="0 0 24 24"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72c.13.96.37 1.9.72 2.81a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45c.91.35 1.85.59 2.81.72A2 2 0 0 1 22 16.92z"/></svg>,
+};
+
+export function TeamGrid({columns = 3, children, className}) {
+  const composed = [styles.grid, styles['cols-' + columns], className].filter(Boolean).join(' ');
+  return <div className={composed}>{children}</div>;
+}
+
+export default function EmployeeCard({
+  variant = 'compact',
+  name,
+  role,
+  initials,
+  photo,
+  avatarColor,
+  bio,
+  apps = [],
+  links = [],
+  className,
+}) {
+  if (variant === 'photo') {
+    return (
+      <div className={[styles.cardPhoto, className].filter(Boolean).join(' ')}>
+        <div className={styles.avatarLarge} style={!photo ? {background: avatarColor || 'var(--c-blue-cobalt)'} : undefined}>
+          {photo ? <img src={photo} alt={name} /> : initials}
+        </div>
+        {name && <div className={styles.name}>{name}</div>}
+        {role && <div className={styles.role}>{role}</div>}
+        {bio && <p className={styles.bio}>{bio}</p>}
+        {links.length > 0 && (
+          <div className={styles.contacts}>
+            {links.map((l, i) => (
+              <a key={i} href={l.href} aria-label={l.label}>{ICONS[l.icon] || l.label}</a>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  if (variant === 'detail') {
+    return (
+      <div className={[styles.cardDetail, className].filter(Boolean).join(' ')}>
+        <div className={styles.avatarLarge} style={!photo ? {background: avatarColor || 'var(--c-blue-cobalt)'} : undefined}>
+          {photo ? <img src={photo} alt={name} /> : initials}
+        </div>
+        <div>
+          {name && <div className={styles.name}>{name}</div>}
+          {role && <div className={styles.role}>{role}</div>}
+        </div>
+        {bio && <p className={styles.bio}>{bio}</p>}
+        {apps.length > 0 && (
+          <div>
+            <div className={styles.appsLabel}>Apps I work on</div>
+            <div className={styles.appsList}>
+              {apps.map((a, i) => <span key={i} className={styles.appPill}>{a}</span>)}
+            </div>
+          </div>
+        )}
+        {links.length > 0 && (
+          <div className={styles.contactsInline}>
+            {links.map((l, i) => (
+              <a key={i} href={l.href}>{ICONS[l.icon]}{l.label}</a>
+            ))}
+          </div>
+        )}
+      </div>
+    );
+  }
+
+  /* default: compact */
+  const Tag = links.length > 0 && links[0].href ? 'a' : 'div';
+  return (
+    <Tag href={Tag === 'a' ? links[0].href : undefined} className={[styles.cardCompact, className].filter(Boolean).join(' ')}>
+      <div className={styles.avatar} style={!photo ? {background: avatarColor || 'var(--c-blue-cobalt)'} : undefined}>
+        {photo ? <img src={photo} alt={name} /> : initials}
+      </div>
+      <div className={styles.info}>
+        {name && <div className={styles.name}>{name}</div>}
+        {role && <div className={styles.role}>{role}</div>}
+      </div>
+      {links.length > 0 && (
+        <div className={styles.linksRow}>
+          {links.map((l, i) => (
+            <a key={i} href={l.href} aria-label={l.label}>{ICONS[l.icon]}</a>
+          ))}
+        </div>
+      )}
+    </Tag>
+  );
+}

package/src/components/EmployeeCard/EmployeeCard.module.css

@@ -0,0 +1,144 @@
+/**
+ * <EmployeeCard /> styles. Mirrors employee-cards.css scoped per variant.
+ */
+
+.grid { display: grid; gap: 16px; font-family: var(--conduction-typography-font-family-body); }
+.cols-2 { grid-template-columns: repeat(2, 1fr); }
+.cols-3 { grid-template-columns: repeat(3, 1fr); }
+.cols-4 { grid-template-columns: repeat(4, 1fr); }
+@media (max-width: 900px) { .grid { grid-template-columns: 1fr; } }
+
+/* avatar shapes shared across variants */
+.avatar, .avatarLarge {
+  clip-path: var(--hex-pointy-top);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  font-weight: 700;
+  flex-shrink: 0;
+  letter-spacing: -0.01em;
+  overflow: hidden;
+  background: var(--c-blue-cobalt);
+  font-family: var(--conduction-typography-font-family-body);
+}
+.avatar { width: 44px; height: 50px; font-size: 16px; }
+.avatarLarge { width: 72px; height: 83px; font-size: 24px; }
+.avatar img, .avatarLarge img { width: 100%; height: 100%; object-fit: cover; display: block; }
+
+/* Compact variant */
+.cardCompact {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 20px;
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  box-shadow: var(--shadow-1);
+  transition: all 160ms ease;
+  text-decoration: none;
+  color: inherit;
+}
+.cardCompact:hover {
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-2);
+  border-color: var(--c-cobalt-200);
+  text-decoration: none;
+  color: inherit;
+}
+.info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
+.name { font-size: 15px; font-weight: 600; color: var(--c-blue-cobalt); line-height: 1.2; }
+.role { font-family: var(--conduction-typography-font-family-code); font-size: 11px; color: var(--c-cobalt-400); letter-spacing: 0.05em; }
+.linksRow { display: flex; gap: 8px; flex-shrink: 0; }
+.linksRow a {
+  width: 26px; height: 26px;
+  border-radius: var(--radius-sm);
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: all 140ms ease;
+}
+.linksRow a:hover { background: var(--c-blue-cobalt); color: white; }
+.linksRow svg { width: 13px; height: 13px; stroke: currentColor; strokeWidth: 2; fill: none; }
+
+/* Photo variant */
+.cardPhoto {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 28px 24px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 12px;
+  box-shadow: var(--shadow-1);
+  font-family: var(--conduction-typography-font-family-body);
+}
+.cardPhoto .name { font-size: 19px; font-weight: 700; color: var(--c-cobalt-900); }
+.cardPhoto .role { font-size: 13px; color: var(--c-cobalt-700); font-family: var(--conduction-typography-font-family-body); letter-spacing: 0; max-width: 28ch; }
+.bio { font-size: 14px; color: var(--c-cobalt-700); line-height: 1.6; margin: 8px 0 0; max-width: 36ch; }
+
+.contacts { display: flex; gap: 10px; margin-top: 10px; }
+.contacts a {
+  width: 32px; height: 32px;
+  border-radius: var(--radius-sm);
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+  display: inline-flex; align-items: center; justify-content: center;
+  transition: all 140ms ease;
+}
+.contacts a:hover { background: var(--c-blue-cobalt); color: white; }
+.contacts svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
+
+/* Detail variant */
+.cardDetail {
+  background: white;
+  border: 1px solid var(--c-cobalt-100);
+  border-radius: var(--radius-lg);
+  padding: 32px;
+  box-shadow: var(--shadow-1);
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  position: relative;
+  overflow: hidden;
+  font-family: var(--conduction-typography-font-family-body);
+}
+.cardDetail::before {
+  content: "";
+  position: absolute;
+  top: 0; right: 0;
+  width: 140px; height: 160px;
+  clip-path: var(--hex-pointy-top);
+  background: var(--c-cobalt-50);
+  transform: translate(40px, -50px);
+  z-index: 0;
+}
+.cardDetail > * { position: relative; z-index: 1; }
+.cardDetail .name { font-size: 20px; font-weight: 700; color: var(--c-cobalt-900); }
+.cardDetail .role { font-size: 13px; }
+.appsLabel {
+  font-family: var(--conduction-typography-font-family-code);
+  font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
+  color: var(--c-cobalt-400);
+  margin-bottom: 8px;
+}
+.appsList { display: flex; gap: 6px; flex-wrap: wrap; }
+.appPill {
+  background: var(--c-cobalt-50);
+  color: var(--c-cobalt-700);
+  padding: 4px 10px;
+  border-radius: var(--radius-pill);
+  font-size: 12px;
+  font-family: var(--conduction-typography-font-family-code);
+}
+.contactsInline { display: flex; flex-wrap: wrap; gap: 16px; }
+.contactsInline a {
+  display: inline-flex; align-items: center; gap: 6px;
+  font-size: 13px; color: var(--c-cobalt-700);
+  text-decoration: none;
+}
+.contactsInline a:hover { color: var(--c-blue-cobalt); }
+.contactsInline svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }

package/src/components/ExternalAppShelf/ExternalAppShelf.jsx

@@ -0,0 +1,61 @@
+/**
+ * <ExternalAppShelf />
+ *
+ * Card grid for external open-source apps that Conduction integrates
+ * into the Nextcloud workspace as ExApps. Each card carries the
+ * project's brand-coloured logo tile + name + a one-sentence
+ * description + an outbound link. Used on /connext to show the
+ * "we don't own these projects, we provide the interface" story.
+ *
+ * Usage in MDX:
+ *
+ *   <ExternalAppShelf
+ *     apps={[
+ *       {
+ *         name: 'OpenTalk',
+ *         brandColor: '#00485C',
+ *         desc: 'Open-source video conferencing.',
+ *         href: 'https://opentalk.eu/',
+ *         icon: <svg viewBox="0 0 24 24">...</svg>,
+ *       },
+ *       ...
+ *     ]}
+ *   />
+ *
+ * The grid is responsive (auto-fill, min 240px). Each card lifts on
+ * hover, the brand-colour wash on the icon tile bleeds slightly into
+ * the card on hover so the brand reads as the primary identifier.
+ */
+
+import React from 'react';
+import styles from './ExternalAppShelf.module.css';
+
+export default function ExternalAppShelf({apps = [], className}) {
+  return (
+    <div className={[styles.shelf, className].filter(Boolean).join(' ')}>
+      {apps.map((app, i) => {
+        const Tag = app.href ? 'a' : 'div';
+        const linkProps = app.href
+          ? {href: app.href, target: '_blank', rel: 'noopener noreferrer'}
+          : {};
+        return (
+          <Tag
+            key={i}
+            className={[styles.card, app.href && styles.linked].filter(Boolean).join(' ')}
+            {...linkProps}
+          >
+            <div className={styles.iconTile} style={{background: app.brandColor || 'var(--c-cobalt-700)'}}>
+              <span className={styles.icon} aria-hidden="true">{app.icon}</span>
+            </div>
+            <div className={styles.body}>
+              <h3 className={styles.name}>{app.name}</h3>
+              {app.meta && <span className={styles.meta}>{app.meta}</span>}
+              {app.desc && <p className={styles.desc}>{app.desc}</p>}
+            </div>
+            {app.href && <span className={styles.arrow} aria-hidden="true">↗</span>}
+          </Tag>
+        );
+      })}
+    </div>
+  );
+}