Add guided API journey flow page and app components

.node-version

@@ -0,0 +1 @@
+22.12.0

.nvmrc

@@ -0,0 +1 @@
+22.12.0

README.md

@@ -9,6 +9,12 @@ This repository contains the source for the APIOps Cycles documentation site bui
 - **Node.js 22** or newer
 - npm
 
+If you use `nvm`, this repo now includes `.nvmrc` (and `.node-version`) pinned to `22.12.0`, so you can switch quickly with:
+
+```bash
+nvm use
+```
+
 Install dependencies once with:
 
 ```bash
@@ -150,4 +156,4 @@ Please make sure the site builds (`npm run build`) before submitting a pull requ
 
 ## License
 
-All content in this repository is provided under the CC BY-SA 4.0 license unless noted otherwise.
+All content in this repository is provided under the CC BY-SA 4.0 license unless noted otherwise.

scripts/generate-method-pages.mjs

@@ -13,6 +13,7 @@ const snippetDir = path.join(rootDir, 'node_modules/apiops-cycles-method-data/sr
 const defaultLocale = 'en';
 const defaultLocaleDir = path.join(dataDir, defaultLocale);
 const docsDir = path.join(rootDir, 'src/content/docs');
+const generatedDataDir = path.join(rootDir, 'src/data/generated');
 const cacheFile = path.join(__dirname, '.method-checksums.json');
 
 const baseLabels = {
@@ -562,6 +563,7 @@ async function generate() {
     requiredEntryChecksByStationId: stationCriteria,
     criteriaLabelsById: criteriaMap,
     resourcesById,
+    stationStateById,
   } = deriveStationRuntimeState(stationsData, stationCriteriaData, criteriaData, resourcesData);
 
   const resourceMap = {};
@@ -584,6 +586,13 @@ async function generate() {
   for (const ln of linesData.lines.items) {
     lineMap[ln.id] = ln;
   }
+  const stationLinesById = {};
+  for (const line of linesData.lines.items) {
+    for (const stationId of line.stations || []) {
+      if (!stationLinesById[stationId]) stationLinesById[stationId] = [];
+      stationLinesById[stationId].push(line.id);
+    }
+  }
 
   const nextStationCriteria = {};
   const coreItems = stationsData['core-stations'].items;
@@ -606,6 +615,56 @@ async function generate() {
     stationMap[station.id] = station;
   }
 
+  const journeyRuntime = {
+    stationIdsInOrder,
+    stationStateById,
+    criteriaLabelsById: criteriaMap,
+    stationMetaById: Object.fromEntries(
+      orderedStations.map((station) => [
+        station.id,
+        {
+          id: station.id,
+          title: translate(station.title, baseLabels),
+          slug: station.slug,
+          stationType: stationsData['core-stations'].items.some((item) => item.id === station.id)
+            ? 'core'
+            : 'suburb',
+        },
+      ])
+    ),
+    resourcesById: Object.fromEntries(
+      Object.values(resourceMap).map((resource) => [
+        resource.id,
+        {
+          id: resource.id,
+          title: translate(resource.title, baseLabels),
+          description: resource.description ? translate(resource.description, baseLabels) : '',
+          category: resource.category,
+          canvas: resource.canvas || null,
+          slug: resource.slug,
+        },
+      ])
+    ),
+    stationLinesById,
+    lineMetaById: Object.fromEntries(
+      linesData.lines.items.map((line) => [
+        line.id,
+        {
+          id: line.id,
+          title: translate(line.title, baseLabels),
+          slug: line.slug,
+          color: line.color || '#000000',
+        },
+      ])
+    ),
+  };
+
+  await ensureDir(generatedDataDir);
+  await fsPromises.writeFile(
+    path.join(generatedDataDir, 'journey-runtime.json'),
+    JSON.stringify(journeyRuntime, null, 2) + '\n'
+  );
+
   let regenerate = false;
   if (
     cache['stations.json'] !== newCache['stations.json'] ||

src/components/app/ArtifactPanel.astro

@@ -0,0 +1,98 @@
+---
+import CanvasCreator from '../CanvasCreator.astro';
+import MaterialIcon from '../MaterialIcon.astro';
+
+interface Artifact {
+  name: string;
+  description: string;
+  canvasUrl: string;
+}
+
+interface Props {
+  artifacts: Artifact[];
+  previewCanvasId?: string;
+}
+
+const { artifacts, previewCanvasId } = Astro.props as Props;
+---
+
+<section class="app-card">
+  <header class="app-card__header">
+    <MaterialIcon name="edit-document-outline" class="app-card__icon" />
+    <div>
+      <p class="app-card__eyebrow">Step 4</p>
+      <h2>Required artifacts and canvas links</h2>
+    </div>
+  </header>
+
+  <div class="artifact-grid">
+    {artifacts.map((artifact) => (
+      <article>
+        <h3>{artifact.name}</h3>
+        <p>{artifact.description}</p>
+        <a href={artifact.canvasUrl} target="_blank" rel="noreferrer">Open canvas</a>
+      </article>
+    ))}
+  </div>
+
+  {
+    previewCanvasId && (
+      <div class="canvas-preview">
+        <p class="canvas-preview__title">Live canvas preview</p>
+        <CanvasCreator canvasId={previewCanvasId} />
+      </div>
+    )
+  }
+</section>
+
+<style>
+  .app-card {
+    border: 1px solid var(--sl-color-hairline);
+    border-radius: 0.75rem;
+    padding: 1rem;
+    background: var(--sl-color-bg-nav);
+    margin-bottom: 1rem;
+  }
+
+  .app-card__header {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.75rem;
+  }
+
+  .app-card__icon {
+    width: 1.4rem;
+    height: 1.4rem;
+    color: var(--sl-color-text-accent);
+  }
+
+  .artifact-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
+    gap: 0.75rem;
+  }
+
+  .artifact-grid article {
+    border: 1px solid var(--sl-color-hairline);
+    border-radius: 0.6rem;
+    padding: 0.75rem;
+    background: color-mix(in srgb, var(--sl-color-accent-low) 30%, transparent);
+  }
+
+  h2,
+  h3,
+  p {
+    margin-top: 0;
+  }
+
+  .canvas-preview {
+    margin-top: 1rem;
+    border-top: 1px solid var(--sl-color-hairline);
+    padding-top: 1rem;
+  }
+
+  .canvas-preview__title {
+    font-weight: 600;
+  }
+</style>