@forwardimpact/pathway 0.1.0 → 0.3.0

package/app/formatters/stage/dom.js

@@ -5,6 +5,7 @@
 import { div, h2, p, a, span, ul, li } from "../../lib/render.js";
 import { createBackLink } from "../../components/nav.js";
 import { prepareStageDetail, getStageEmoji } from "./shared.js";
+import { createJsonLdScript, stageToJsonLd } from "../json-ld.js";
 
 /**
  * Format stage detail as DOM elements
@@ -20,6 +21,8 @@ export function stageToDOM(stage, { stages = [], showBackLink = true } = {}) {
 
   return div(
     { className: "detail-page stage-detail" },
+    // JSON-LD structured data
+    createJsonLdScript(stageToJsonLd(stage)),
     // Header
     div(
       { className: "page-header" },
@@ -27,28 +30,10 @@ export function stageToDOM(stage, { stages = [], showBackLink = true } = {}) {
       div(
         { className: "page-title-row" },
         span({ className: "page-title" }, `${emoji} ${view.name}`),
-        span({ className: `badge ${view.modeClassName}` }, view.modeBadge),
       ),
       p({ className: "page-description" }, view.description),
     ),
 
-    // Tools section
-    view.tools.length > 0
-      ? div(
-          { className: "section section-detail" },
-          h2({ className: "section-title" }, "Available Tools"),
-          div(
-            { className: "tool-badges" },
-            ...view.tools.map((tool) =>
-              span(
-                { className: "badge badge-tool", title: tool.label },
-                `${tool.icon} ${tool.label}`,
-              ),
-            ),
-          ),
-        )
-      : null,
-
     // Entry/Exit Criteria
     view.entryCriteria.length > 0 || view.exitCriteria.length > 0
       ? div(

package/app/formatters/stage/microdata.js

@@ -0,0 +1,110 @@
+/**
+ * Stage formatting for microdata HTML output
+ *
+ * Generates clean, class-less HTML with microdata aligned with stages.schema.json
+ * RDF vocab: https://schema.forwardimpact.team/rdf/
+ */
+
+import {
+  openTag,
+  prop,
+  metaTag,
+  linkTag,
+  section,
+  ul,
+  escapeHtml,
+  htmlDocument,
+} from "../microdata-shared.js";
+import { prepareStagesList, prepareStageDetail } from "./shared.js";
+
+/**
+ * Format stage list as microdata HTML
+ * @param {Array} stages - Raw stage entities
+ * @returns {string} HTML with microdata
+ */
+export function stageListToMicrodata(stages) {
+  const { items } = prepareStagesList(stages);
+
+  const content = items
+    .map((stage) => {
+      const handoffText =
+        stage.handoffs.length > 0
+          ? `→ ${stage.handoffs.map((h) => h.target).join(", ")}`
+          : "";
+      return `${openTag("article", { itemtype: "Stage", itemid: `#${stage.id}` })}
+${prop("h2", "name", `${stage.emoji || ""} ${stage.name}`)}
+${prop("p", "description", stage.truncatedDescription)}
+${handoffText ? `<p>Handoffs: ${handoffText}</p>` : ""}
+</article>`;
+    })
+    .join("\n");
+
+  return htmlDocument(
+    "Stages",
+    `<main>
+<h1>Stages</h1>
+${content}
+</main>`,
+  );
+}
+
+/**
+ * Format stage detail as microdata HTML
+ * @param {Object} stage - Raw stage entity
+ * @returns {string} HTML with microdata
+ */
+export function stageToMicrodata(stage) {
+  const view = prepareStageDetail(stage);
+
+  if (!view) return "";
+
+  const sections = [];
+
+  // Entry criteria
+  if (view.entryCriteria.length > 0) {
+    const criteriaItems = view.entryCriteria.map((c) => escapeHtml(c));
+    sections.push(
+      section("Entry Criteria", ul(criteriaItems, "entryCriteria"), 2),
+    );
+  }
+
+  // Constraints
+  if (view.constraints.length > 0) {
+    const constraintItems = view.constraints.map((c) => escapeHtml(c));
+    sections.push(
+      section("Constraints", ul(constraintItems, "constraints"), 2),
+    );
+  }
+
+  // Exit criteria
+  if (view.exitCriteria.length > 0) {
+    const exitItems = view.exitCriteria.map((c) => escapeHtml(c));
+    sections.push(section("Exit Criteria", ul(exitItems, "exitCriteria"), 2));
+  }
+
+  // Handoffs - using Handoff itemtype
+  if (view.handoffs.length > 0) {
+    const handoffItems = view.handoffs.map(
+      (
+        h,
+      ) => `${openTag("article", { itemtype: "Handoff", itemprop: "handoffs" })}
+${linkTag("targetStage", `#${h.target}`)}
+<p><strong>${prop("span", "label", h.label)}</strong> → ${escapeHtml(h.target)}</p>
+${prop("p", "prompt", h.prompt)}
+</article>`,
+    );
+    sections.push(section("Handoffs", handoffItems.join("\n"), 2));
+  }
+
+  const body = `<main>
+${openTag("article", { itemtype: "Stage", itemid: `#${view.id}` })}
+${prop("h1", "name", view.name)}
+${metaTag("id", view.id)}
+${stage.emoji ? metaTag("emoji", stage.emoji) : ""}
+${prop("p", "description", view.description)}
+${sections.join("\n")}
+</article>
+</main>`;
+
+  return htmlDocument(view.name, body);
+}

package/app/formatters/stage/shared.js

@@ -6,19 +6,6 @@
 
 import { truncate } from "../shared.js";
 
-/**
- * Tool display configuration
- * @type {Object<string, {icon: string, label: string}>}
- */
-const TOOL_CONFIG = {
-  search: { icon: "🔍", label: "Search" },
-  fetch: { icon: "🌐", label: "Fetch" },
-  codebase: { icon: "📂", label: "Codebase" },
-  read: { icon: "📖", label: "Read" },
-  edit: { icon: "✏️", label: "Edit" },
-  terminal: { icon: "💻", label: "Terminal" },
-};
-
 /**
  * @typedef {Object} StageListItem
  * @property {string} id
@@ -26,7 +13,6 @@ const TOOL_CONFIG = {
  * @property {string} emoji
  * @property {string} description
  * @property {string} truncatedDescription
- * @property {Array<{id: string, icon: string, label: string}>} tools
  * @property {Array<{target: string, label: string}>} handoffs
  */
 
@@ -38,18 +24,12 @@ const TOOL_CONFIG = {
  */
 export function prepareStagesList(stages, descriptionLimit = 150) {
   const items = stages.map((stage) => {
-    const tools = stage.availableTools || [];
     return {
       id: stage.id,
       name: stage.name,
       emoji: stage.emoji,
       description: stage.description,
       truncatedDescription: truncate(stage.description, descriptionLimit),
-      tools: tools.map((toolId) => ({
-        id: toolId,
-        icon: TOOL_CONFIG[toolId]?.icon || "🔧",
-        label: TOOL_CONFIG[toolId]?.label || toolId,
-      })),
       handoffs: (stage.handoffs || []).map((h) => ({
         target: h.targetStage,
         label: h.label,
@@ -65,7 +45,6 @@ export function prepareStagesList(stages, descriptionLimit = 150) {
  * @property {string} id
  * @property {string} name
  * @property {string} description
- * @property {Array<{id: string, icon: string, label: string}>} tools
  * @property {string[]} constraints
  * @property {string[]} entryCriteria
  * @property {string[]} exitCriteria
@@ -78,16 +57,10 @@ export function prepareStagesList(stages, descriptionLimit = 150) {
  * @returns {StageDetailView}
  */
 export function prepareStageDetail(stage) {
-  const tools = stage.availableTools || [];
   return {
     id: stage.id,
     name: stage.name,
     description: stage.description,
-    tools: tools.map((toolId) => ({
-      id: toolId,
-      icon: TOOL_CONFIG[toolId]?.icon || "🔧",
-      label: TOOL_CONFIG[toolId]?.label || toolId,
-    })),
     constraints: stage.constraints || [],
     entryCriteria: stage.entryCriteria || [],
     exitCriteria: stage.exitCriteria || [],

package/app/formatters/track/dom.js

@@ -4,12 +4,9 @@
 
 import { div, h1, p } from "../../lib/render.js";
 import { createBackLink } from "../../components/nav.js";
-import { createBadge, createStatCard } from "../../components/card.js";
+import { createStatCard } from "../../components/card.js";
 import { createStatsGrid } from "../../components/grid.js";
-import {
-  createDetailSection,
-  createLinksList,
-} from "../../components/detail.js";
+import { createDetailSection } from "../../components/detail.js";
 import {
   createJobBuilderButton,
   createInterviewPrepButton,
@@ -20,22 +17,7 @@ import {
 } from "../../components/modifier-table.js";
 import { getConceptEmoji } from "../../model/levels.js";
 import { prepareTrackDetail } from "./shared.js";
-
-/**
- * Get track type badge(s)
- * @param {Object} view
- * @returns {HTMLElement[]}
- */
-function getTrackTypeBadges(view) {
-  const badges = [];
-  if (view.isProfessional) {
-    badges.push(createBadge("Professional", "secondary"));
-  }
-  if (view.isManagement) {
-    badges.push(createBadge("Management", "default"));
-  }
-  return badges;
-}
+import { createJsonLdScript, trackToJsonLd } from "../json-ld.js";
 
 /**
  * Format track detail as DOM elements
@@ -80,12 +62,13 @@ export function trackToDOM(
 
   return div(
     { className: "detail-page track-detail" },
+    // JSON-LD structured data
+    createJsonLdScript(trackToJsonLd(track)),
     // Header
     div(
       { className: "page-header" },
       createBackLink("/track", "← Back to Tracks"),
       h1({ className: "page-title" }, `${emoji} `, view.name),
-      div({ className: "page-meta" }, ...getTrackTypeBadges(view)),
       p(
         { className: "text-muted", style: "margin-top: 0.5rem" },
         view.description,
@@ -97,14 +80,6 @@ export function trackToDOM(
       ),
     ),
 
-    // Valid disciplines (if restricted)
-    view.validDisciplines.length > 0
-      ? createDetailSection({
-          title: "Valid Disciplines",
-          content: createLinksList(view.validDisciplines, "/discipline"),
-        })
-      : null,
-
     // Matching weights (stat cards)
     track.matchingWeights
       ? createDetailSection({

package/app/formatters/track/markdown.js

@@ -18,10 +18,7 @@ export function trackListToMarkdown(tracks, framework) {
   const lines = [`# ${emoji} Tracks`, ""];
 
   for (const track of items) {
-    const types = [];
-    if (track.isProfessional) types.push("Professional");
-    if (track.isManagement) types.push("Management");
-    lines.push(`- **${track.name}**: ${types.join(", ")}`);
+    lines.push(`- **${track.name}**`);
   }
   lines.push("");
 
@@ -44,19 +41,8 @@ export function trackToMarkdown(
 ) {
   const view = prepareTrackDetail(track, { skills, behaviours, disciplines });
 
-  const types = [];
-  if (view.isProfessional) types.push("Professional");
-  if (view.isManagement) types.push("Management");
-
   const emoji = framework ? getConceptEmoji(framework, "track") : "🛤️";
-  const lines = [
-    `# ${emoji} ${view.name}`,
-    "",
-    `**Type**: ${types.join(", ")}`,
-    "",
-    view.description,
-    "",
-  ];
+  const lines = [`# ${emoji} ${view.name}`, "", view.description, ""];
 
   // Skill modifiers - show expanded skills for capabilities
   if (view.skillModifiers.length > 0) {
@@ -92,14 +78,5 @@ export function trackToMarkdown(
     lines.push("");
   }
 
-  // Valid disciplines
-  if (view.validDisciplines.length > 0) {
-    lines.push("## Valid Disciplines", "");
-    for (const d of view.validDisciplines) {
-      lines.push(`- ${d.name}`);
-    }
-    lines.push("");
-  }
-
   return lines.join("\n");
 }

package/app/formatters/track/microdata.js

@@ -0,0 +1,111 @@
+/**
+ * Track formatting for microdata HTML output
+ *
+ * Generates clean, class-less HTML with microdata aligned with track.schema.json
+ * RDF vocab: https://schema.forwardimpact.team/rdf/
+ */
+
+import {
+  openTag,
+  prop,
+  metaTag,
+  linkTag,
+  section,
+  ul,
+  escapeHtml,
+  htmlDocument,
+} from "../microdata-shared.js";
+import { prepareTracksList, prepareTrackDetail } from "./shared.js";
+
+/**
+ * Format track list as microdata HTML
+ * @param {Array} tracks - Raw track entities
+ * @returns {string} HTML with microdata
+ */
+export function trackListToMicrodata(tracks) {
+  const { items } = prepareTracksList(tracks);
+
+  const content = items
+    .map((track) => {
+      return `${openTag("article", { itemtype: "Track", itemid: `#${track.id}` })}
+${prop("h2", "name", track.name)}
+</article>`;
+    })
+    .join("\n");
+
+  return htmlDocument(
+    "Tracks",
+    `<main>
+<h1>Tracks</h1>
+${content}
+</main>`,
+  );
+}
+
+/**
+ * Format track detail as microdata HTML
+ * @param {Object} track - Raw track entity
+ * @param {Object} context - Additional context
+ * @param {Array} context.skills - All skills
+ * @param {Array} context.behaviours - All behaviours
+ * @param {Array} context.disciplines - All disciplines
+ * @returns {string} HTML with microdata
+ */
+export function trackToMicrodata(track, { skills, behaviours, disciplines }) {
+  const view = prepareTrackDetail(track, { skills, behaviours, disciplines });
+
+  if (!view) return "";
+
+  const sections = [];
+
+  // Skill modifiers - using SkillModifier itemtype with targetCapability
+  if (view.skillModifiers.length > 0) {
+    const modifierItems = view.skillModifiers.map((m) => {
+      const modifierStr = m.modifier > 0 ? `+${m.modifier}` : `${m.modifier}`;
+
+      if (m.isCapability && m.skills && m.skills.length > 0) {
+        // Capability with expanded skills
+        const skillLinks = m.skills
+          .map(
+            (s) => `<a href="#${escapeHtml(s.id)}">${escapeHtml(s.name)}</a>`,
+          )
+          .join(", ");
+        return `${openTag("div", { itemtype: "SkillModifier", itemprop: "skillModifiers" })}
+${linkTag("targetCapability", `#${m.id}`)}
+<strong>${escapeHtml(m.name)} Capability</strong> (${openTag("span", { itemprop: "modifierValue" })}${modifierStr}</span>)
+<p>${skillLinks}</p>
+</div>`;
+      } else {
+        // Individual skill or capability without skills
+        return `${openTag("span", { itemtype: "SkillModifier", itemprop: "skillModifiers" })}
+${linkTag("targetCapability", `#${m.id}`)}
+<strong>${escapeHtml(m.name)}</strong>: ${openTag("span", { itemprop: "modifierValue" })}${modifierStr}</span>
+</span>`;
+      }
+    });
+    sections.push(section("Skill Modifiers", modifierItems.join("\n"), 2));
+  }
+
+  // Behaviour modifiers - using BehaviourModifier itemtype
+  if (view.behaviourModifiers.length > 0) {
+    const modifierItems = view.behaviourModifiers.map((b) => {
+      const modifierStr = b.modifier > 0 ? `+${b.modifier}` : `${b.modifier}`;
+      return `${openTag("span", { itemtype: "BehaviourModifier", itemprop: "behaviourModifiers" })}
+${linkTag("targetBehaviour", `#${b.id}`)}
+<a href="#${escapeHtml(b.id)}">${escapeHtml(b.name)}</a>: ${openTag("span", { itemprop: "modifierValue" })}${modifierStr}</span>
+</span>`;
+    });
+    sections.push(section("Behaviour Modifiers", ul(modifierItems), 2));
+  }
+
+  const body = `<main>
+${openTag("article", { itemtype: "Track", itemid: `#${view.id}` })}
+${prop("h1", "name", view.name)}
+${metaTag("id", view.id)}
+${prop("p", "description", view.description)}
+${sections.join("\n")}
+</article>
+</main>`;
+
+  return htmlDocument(view.name, body);
+}

package/app/formatters/track/shared.js

@@ -8,43 +8,12 @@ import { isCapability, getSkillsByCapability } from "../../model/modifiers.js";
 import { truncate } from "../shared.js";
 
 /**
- * Sort tracks by type: professional tracks first, then management tracks.
- * Within each type, preserves original order.
+ * Sort tracks alphabetically by name.
  * @param {Array} tracks - Raw track entities
  * @returns {Array} Sorted tracks array
  */
-export function sortTracksByType(tracks) {
-  return [...tracks].sort((a, b) => {
-    const aFlags = getTrackTypeFlags(a);
-    const bFlags = getTrackTypeFlags(b);
-
-    // Professional tracks come first
-    if (aFlags.isProfessional && !bFlags.isProfessional) return -1;
-    if (!aFlags.isProfessional && bFlags.isProfessional) return 1;
-
-    // Preserve original order within same type
-    return 0;
-  });
-}
-
-/**
- * Determine track type flags from track data.
- *
- * Logic: Only one flag needs to be explicitly set to true; the other defaults to false.
- * - If isManagement: true → management track (isProfessional = false)
- * - If isProfessional: true (or neither set) → professional track (isManagement = false)
- *
- * @param {Object} track
- * @param {boolean} [track.isProfessional] - Whether this is a professional/IC track
- * @param {boolean} [track.isManagement] - Whether this is a management track
- * @returns {{isProfessional: boolean, isManagement: boolean}}
- */
-export function getTrackTypeFlags(track) {
-  // Management takes precedence if explicitly set to true
-  const isManagement = track.isManagement === true;
-  // Professional is true if management is not true (default behavior)
-  const isProfessional = !isManagement && track.isProfessional !== false;
-  return { isProfessional, isManagement };
+export function sortTracksByName(tracks) {
+  return [...tracks].sort((a, b) => a.name.localeCompare(b.name));
 }
 
 /**
@@ -53,8 +22,6 @@ export function getTrackTypeFlags(track) {
  * @property {string} name
  * @property {string} description
  * @property {string} truncatedDescription
- * @property {boolean} isProfessional
- * @property {boolean} isManagement
  */
 
 /**
@@ -64,16 +31,13 @@ export function getTrackTypeFlags(track) {
  * @returns {{ items: TrackListItem[] }}
  */
 export function prepareTracksList(tracks, descriptionLimit = 120) {
-  const sortedTracks = sortTracksByType(tracks);
+  const sortedTracks = sortTracksByName(tracks);
   const items = sortedTracks.map((track) => {
-    const { isProfessional, isManagement } = getTrackTypeFlags(track);
     return {
       id: track.id,
       name: track.name,
       description: track.description,
       truncatedDescription: truncate(track.description, descriptionLimit),
-      isProfessional,
-      isManagement,
     };
   });
 
@@ -101,11 +65,8 @@ export function prepareTracksList(tracks, descriptionLimit = 120) {
  * @property {string} id
  * @property {string} name
  * @property {string} description
- * @property {boolean} isProfessional
- * @property {boolean} isManagement
  * @property {SkillModifierRow[]} skillModifiers
  * @property {BehaviourModifierRow[]} behaviourModifiers
- * @property {Array<{id: string, name: string}>} validDisciplines
  */
 
 /**
@@ -114,14 +75,12 @@ export function prepareTracksList(tracks, descriptionLimit = 120) {
  * @param {Object} context - Additional context
  * @param {Array} context.skills - All skills
  * @param {Array} context.behaviours - All behaviours
- * @param {Array} context.disciplines - All disciplines
+ * @param {Array} context.disciplines - All disciplines (unused but kept for API compatibility)
  * @returns {TrackDetailView|null}
  */
-export function prepareTrackDetail(track, { skills, behaviours, disciplines }) {
+export function prepareTrackDetail(track, { skills, behaviours }) {
   if (!track) return null;
 
-  const { isProfessional, isManagement } = getTrackTypeFlags(track);
-
   // Build skill modifiers
   const skillModifiers = track.skillModifiers
     ? Object.entries(track.skillModifiers).map(([key, modifier]) => {
@@ -160,22 +119,11 @@ export function prepareTrackDetail(track, { skills, behaviours, disciplines }) {
       )
     : [];
 
-  // Get valid disciplines
-  const validDisciplines = track.validDisciplines
-    ? track.validDisciplines
-        .map((id) => disciplines.find((d) => d.id === id))
-        .filter(Boolean)
-        .map((d) => ({ id: d.id, name: d.specialization || d.name }))
-    : [];
-
   return {
     id: track.id,
     name: track.name,
     description: track.description,
-    isProfessional,
-    isManagement,
     skillModifiers,
     behaviourModifiers,
-    validDisciplines,
   };
 }

package/app/handout-main.js

@@ -36,7 +36,7 @@ import {
   gradeToDOM,
   trackToDOM,
 } from "./formatters/index.js";
-import { sortTracksByType } from "./formatters/track/shared.js";
+import { sortTracksByName } from "./formatters/track/shared.js";
 
 /**
  * Create a chapter cover page
@@ -271,6 +271,17 @@ function renderBehaviourHandout(data) {
   renderHandout(content);
 }
 
+/**
+ * Sort disciplines by type (professional first, then management)
+ * @param {Array} disciplines - Raw discipline entities
+ * @returns {Array} - Sorted disciplines
+ */
+function sortDisciplinesByType(disciplines) {
+  const professional = disciplines.filter((d) => !d.isManagement);
+  const management = disciplines.filter((d) => d.isManagement);
+  return [...professional, ...management];
+}
+
 /**
  * Render all job component slides (disciplines, grades, tracks)
  * @param {Object} data
@@ -278,7 +289,10 @@ function renderBehaviourHandout(data) {
 function renderJobHandout(data) {
   const { framework } = data;
 
-  const disciplineSlides = data.disciplines.map((discipline) => {
+  // Sort disciplines by type: professional first, then management
+  const sortedDisciplines = sortDisciplinesByType(data.disciplines);
+
+  const disciplineSlides = sortedDisciplines.map((discipline) => {
     return disciplineToDOM(discipline, {
       skills: data.skills,
       behaviours: data.behaviours,
@@ -295,7 +309,7 @@ function renderJobHandout(data) {
     });
   });
 
-  const trackSlides = sortTracksByType(data.tracks).map((track) => {
+  const trackSlides = sortTracksByName(data.tracks).map((track) => {
     return trackToDOM(track, {
       skills: data.skills,
       behaviours: data.behaviours,
@@ -314,21 +328,21 @@ function renderJobHandout(data) {
     }),
     ...disciplineSlides,
 
-    // Tracks chapter
-    createChapterCover({
-      emoji: getConceptEmoji(framework, "track"),
-      title: framework.entityDefinitions.track.title,
-      description: framework.entityDefinitions.track.description,
-    }),
-    ...trackSlides,
-
-    // Grades chapter
+    // Grades chapter (moved before Tracks)
     createChapterCover({
       emoji: getConceptEmoji(framework, "grade"),
       title: framework.entityDefinitions.grade.title,
       description: framework.entityDefinitions.grade.description,
     }),
     ...gradeSlides,
+
+    // Tracks chapter (moved after Grades)
+    createChapterCover({
+      emoji: getConceptEmoji(framework, "track"),
+      title: framework.entityDefinitions.track.title,
+      description: framework.entityDefinitions.track.description,
+    }),
+    ...trackSlides,
   );
 
   renderHandout(content);

package/app/handout.html

@@ -5,6 +5,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Engineering Pathway - Handout View</title>
     <link rel="stylesheet" href="css/bundles/handout.css" />
+    <script type="importmap">
+      {
+        "imports": {
+          "mustache": "https://esm.sh/mustache@4.2.0"
+        }
+      }
+    </script>
   </head>
   <body class="slide-view handout-view">
     <header