JSX version, symlinked to jsx branch of apostrophe

modules/@apostrophecms/home-page/views/page.jsx

@@ -0,0 +1,26 @@
+// JSX equivalent of the home page template. Extends the project layout,
+// switches the body class, swaps in a chip-styled page title, and renders
+// the page's `main` area inside the home wrapper.
+
+export default function (data, { Extend, Area, __t }) {
+  return (
+    <Extend
+      templateName="layout.jsx"
+      bodyClass="home-page"
+      pageTitle={
+        <h1 className="home-title">
+          <span className="chip">{__t('project:homeTitle')}</span>
+        </h1>
+      }
+      main={
+        <div className="home">
+          <div className="content">
+            <div className="general-content">
+              <Area doc={data.page} name="main" />
+            </div>
+          </div>
+        </div>
+      }
+    />
+  );
+}

modules/@apostrophecms/layout-widget/views/widget.jsx

@@ -0,0 +1,38 @@
+// JSX equivalent of layout-widget. Renders a single area with grid CSS
+// custom properties driven by the widget's options.
+
+export default function (data, { Area }) {
+  const opts = data.options || {};
+  const managerOpts = (data.manager && data.manager.options) || {};
+  const columns = opts.columns || managerOpts.columns;
+  const gap = opts.gap || managerOpts.gap || '0';
+  const justify = opts.defaultCellHorizontalAlignment ||
+    managerOpts.defaultCellHorizontalAlignment || 'stretch';
+  const align = opts.defaultCellVerticalAlignment ||
+    managerOpts.defaultCellVerticalAlignment || 'stretch';
+
+  const aposStyle =
+    `--grid-columns: ${columns};` +
+    ` --grid-gap: ${gap};` +
+    ' --grid-rows: auto;' +
+    ' --mobile-grid-rows: auto;' +
+    ' --tablet-grid-rows: auto;' +
+    ` --justify-items: ${justify};` +
+    ` --align-items: ${align};`;
+
+  return (
+    <Area
+      doc={data.widget}
+      name="columns"
+      with={{
+        aposStyle,
+        aposClassName: 'layout-widget widget',
+        aposParentOptions: { ...opts, widgetId: data.widget._id },
+        aposAttrs: {
+          'tablet-auto': true,
+          'mobile-auto': true
+        }
+      }}
+    />
+  );
+}

modules/@apostrophecms/template/views/macros/icons.jsx

@@ -0,0 +1,181 @@
+// JSX equivalent of macros/icons.html. Each named export is a component
+// returning the same SVG markup as the corresponding Nunjucks macro.
+// The default export is a template-style entry point so the Apostrophe
+// `<Template templateName="@apostrophecms/template:macros/icons.jsx"
+// name="clock" />` form picks the icon by name.
+
+const baseAttrs = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  width: '24',
+  height: '24',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: '2',
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round'
+};
+
+export const clock = () => (
+  <svg {...baseAttrs} className="lucide lucide-clock3-icon lucide-clock-3">
+    <path d="M12 6v6h4" />
+    <circle cx="12" cy="12" r="10" />
+  </svg>
+);
+
+export const building = () => (
+  <svg {...baseAttrs} className="lucide lucide-hotel-icon lucide-hotel">
+    <path d="M10 22v-6.57" />
+    <path d="M12 11h.01" />
+    <path d="M12 7h.01" />
+    <path d="M14 15.43V22" />
+    <path d="M15 16a5 5 0 0 0-6 0" />
+    <path d="M16 11h.01" />
+    <path d="M16 7h.01" />
+    <path d="M8 11h.01" />
+    <path d="M8 7h.01" />
+    <rect x="4" y="2" width="16" height="20" rx="2" />
+  </svg>
+);
+
+export const landmark = () => (
+  <svg {...baseAttrs} className="lucide lucide-landmark-icon lucide-landmark">
+    <path d="M10 18v-7" />
+    <path d="M11.12 2.198a2 2 0 0 1 1.76.006l7.866 3.847c.476.233.31.949-.22.949H3.474c-.53 0-.695-.716-.22-.949z" />
+    <path d="M14 18v-7" />
+    <path d="M18 18v-7" />
+    <path d="M3 22h18" />
+    <path d="M6 18v-7" />
+  </svg>
+);
+
+export const cpu = () => (
+  <svg {...baseAttrs} className="lucide lucide-cpu-icon lucide-cpu">
+    <path d="M12 20v2" />
+    <path d="M12 2v2" />
+    <path d="M17 20v2" />
+    <path d="M17 2v2" />
+    <path d="M2 12h2" />
+    <path d="M2 17h2" />
+    <path d="M2 7h2" />
+    <path d="M20 12h2" />
+    <path d="M20 17h2" />
+    <path d="M20 7h2" />
+    <path d="M7 20v2" />
+    <path d="M7 2v2" />
+    <rect x="4" y="4" width="16" height="16" rx="2" />
+    <rect x="8" y="8" width="8" height="8" rx="1" />
+  </svg>
+);
+
+export const trophy = () => (
+  <svg {...baseAttrs} className="lucide lucide-trophy-icon lucide-trophy">
+    <path d="M10 14.66v1.626a2 2 0 0 1-.976 1.696A5 5 0 0 0 7 21.978" />
+    <path d="M14 14.66v1.626a2 2 0 0 0 .976 1.696A5 5 0 0 1 17 21.978" />
+    <path d="M18 9h1.5a1 1 0 0 0 0-5H18" />
+    <path d="M4 22h16" />
+    <path d="M6 9a6 6 0 0 0 12 0V3a1 1 0 0 0-1-1H7a1 1 0 0 0-1 1z" />
+    <path d="M6 9H4.5a1 1 0 0 1 0-5H6" />
+  </svg>
+);
+
+export const people = () => (
+  <svg {...baseAttrs} className="lucide lucide-users-round-icon lucide-users-round">
+    <path d="M18 21a8 8 0 0 0-16 0" />
+    <circle cx="10" cy="8" r="5" />
+    <path d="M22 20c0-3.37-2-6.5-4-8a5 5 0 0 0-.45-8.3" />
+  </svg>
+);
+
+export const earth = () => (
+  <svg {...baseAttrs} className="lucide lucide-earth-icon lucide-earth">
+    <path d="M21.54 15H17a2 2 0 0 0-2 2v4.54" />
+    <path d="M7 3.34V5a3 3 0 0 0 3 3a2 2 0 0 1 2 2c0 1.1.9 2 2 2a2 2 0 0 0 2-2c0-1.1.9-2 2-2h3.17" />
+    <path d="M11 21.95V18a2 2 0 0 0-2-2a2 2 0 0 1-2-2v-1a2 2 0 0 0-2-2H2.05" />
+    <circle cx="12" cy="12" r="10" />
+  </svg>
+);
+
+export const chart = () => (
+  <svg {...baseAttrs} className="lucide lucide-chart-no-axes-combined-icon lucide-chart-no-axes-combined">
+    <path d="M12 16v5" />
+    <path d="M16 14v7" />
+    <path d="M20 10v11" />
+    <path d="m22 3-8.646 8.646a.5.5 0 0 1-.708 0L9.354 8.354a.5.5 0 0 0-.707 0L2 15" />
+    <path d="M4 18v3" />
+    <path d="M8 14v7" />
+  </svg>
+);
+
+export const smartphone = () => (
+  <svg {...baseAttrs} className="lucide lucide-tablet-smartphone-icon lucide-tablet-smartphone">
+    <rect width="10" height="14" x="3" y="8" rx="2" />
+    <path d="M5 4a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v16a2 2 0 0 1-2 2h-2.4" />
+    <path d="M8 18h.01" />
+  </svg>
+);
+
+export const network = () => (
+  <svg {...baseAttrs} className="lucide lucide-network-icon lucide-network">
+    <rect x="16" y="16" width="6" height="6" rx="1" />
+    <rect x="2" y="16" width="6" height="6" rx="1" />
+    <rect x="9" y="2" width="6" height="6" rx="1" />
+    <path d="M5 16v-3a1 1 0 0 1 1-1h12a1 1 0 0 1 1 1v3" />
+    <path d="M12 12V8" />
+  </svg>
+);
+
+export const rocket = () => (
+  <svg {...baseAttrs} className="lucide lucide-rocket-icon lucide-rocket">
+    <path d="M4.5 16.5c-1.5 1.26-2 5-2 5s3.74-.5 5-2c.71-.84.7-2.13-.09-2.91a2.18 2.18 0 0 0-2.91-.09z" />
+    <path d="m12 15-3-3a22 22 0 0 1 2-3.95A12.88 12.88 0 0 1 22 2c0 2.72-.78 7.5-6 11a22.35 22.35 0 0 1-4 2z" />
+    <path d="M9 12H4s.55-3.03 2-4c1.62-1.08 5 0 5 0" />
+    <path d="M12 15v5s3.03-.55 4-2c1.08-1.62 0-5 0-5" />
+  </svg>
+);
+
+export const pkg = () => (
+  <svg {...baseAttrs} className="lucide lucide-package-open-icon lucide-package-open">
+    <path d="M12 22v-9" />
+    <path d="M15.17 2.21a1.67 1.67 0 0 1 1.63 0L21 4.57a1.93 1.93 0 0 1 0 3.36L8.82 14.79a1.655 1.655 0 0 1-1.64 0L3 12.43a1.93 1.93 0 0 1 0-3.36z" />
+    <path d="M20 13v3.87a2.06 2.06 0 0 1-1.11 1.83l-6 3.08a1.93 1.93 0 0 1-1.78 0l-6-3.08A2.06 2.06 0 0 1 4 16.87V13" />
+    <path d="M21 12.43a1.93 1.93 0 0 0 0-3.36L8.83 2.2a1.64 1.64 0 0 0-1.63 0L3 4.57a1.93 1.93 0 0 0 0 3.36l12.18 6.86a1.636 1.636 0 0 0 1.63 0z" />
+  </svg>
+);
+
+export const editor = () => (
+  <svg {...baseAttrs} className="lucide lucide-pencil-ruler-icon lucide-pencil-ruler">
+    <path d="M13 7 8.7 2.7a2.41 2.41 0 0 0-3.4 0L2.7 5.3a2.41 2.41 0 0 0 0 3.4L7 13" />
+    <path d="m8 6 2-2" />
+    <path d="m18 16 2-2" />
+    <path d="m17 11 4.3 4.3c.94.94.94 2.46 0 3.4l-2.6 2.6c-.94.94-2.46.94-3.4 0L11 17" />
+    <path d="M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" />
+    <path d="m15 5 4 4" />
+  </svg>
+);
+
+export const icons = {
+  clock,
+  building,
+  landmark,
+  cpu,
+  trophy,
+  people,
+  earth,
+  chart,
+  smartphone,
+  network,
+  rocket,
+  package: pkg,
+  editor
+};
+
+// Template-style entry point: `<Template templateName="@apostrophecms/template:macros/icons.jsx" name="clock" />`.
+// Returns the icon picked by `data.name`, or nothing when missing/unknown.
+export default function (data) {
+  if (!data || !data.name) {
+    return null;
+  }
+  const Icon = icons[data.name];
+  return Icon ? <Icon /> : null;
+}

modules/article-category/views/recent.jsx

@@ -0,0 +1,32 @@
+// JSX equivalent of article-category/views/recent.html. Renders a
+// trimmed-down article excerpt list using the article's `blurb` area.
+
+export default function (data, { Area, apos, __t }) {
+  const articles = data.articles || [];
+  if (articles.length === 0) {
+    return <p>{__t('project:noArticles')}</p>;
+  }
+  return (
+    <>
+      {articles.map((article) => (
+        <div key={article._id} className="article-excerpt">
+          {!article._url && (
+            <p className="meta">
+              <em>{__t('project:needArticleIndex')}</em>
+            </p>
+          )}
+          <h3>
+            <a href={article._url}>{article.title}</a>
+          </h3>
+          <article>
+            {!apos.area.isEmpty(article, 'blurb') ? (
+              <p className="article-blurb"><Area doc={article} name="blurb" /></p>
+            ) : (
+              <p className="placeholder">{__t('project:noSummary')}</p>
+            )}
+          </article>
+        </div>
+      ))}
+    </>
+  );
+}