@forwardimpact/pathway 0.1.0

package/app/handout-main.js

@@ -0,0 +1,421 @@
+/**
+ * Handout View Main Entry Point
+ *
+ * Displays all slides of a category on a single page for printing handouts.
+ * Routes:
+ *   / - Index with links to all categories
+ *   /driver - All driver slides
+ *   /skill - All skill slides
+ *   /behaviour - All behaviour slides
+ *   /job - All discipline, track, and grade slides
+ */
+
+import { setData, getState } from "./lib/state.js";
+import { loadAllData } from "./lib/yaml-loader.js";
+import {
+  div,
+  h1,
+  p,
+  a,
+  ul,
+  li,
+  span,
+  heading1,
+  heading2,
+} from "./lib/render.js";
+
+// Import model functions
+import { getCapabilityOrder, getConceptEmoji } from "./model/levels.js";
+
+// Import formatters
+import {
+  driverToDOM,
+  skillToDOM,
+  behaviourToDOM,
+  disciplineToDOM,
+  gradeToDOM,
+  trackToDOM,
+} from "./formatters/index.js";
+import { sortTracksByType } from "./formatters/track/shared.js";
+
+/**
+ * Create a chapter cover page
+ * @param {Object} params
+ * @param {string} params.emoji - Chapter emoji
+ * @param {string} params.title - Chapter title
+ * @param {string} params.description - Chapter description
+ * @returns {HTMLElement}
+ */
+function createChapterCover({ emoji, title, description }) {
+  return div(
+    { className: "chapter-cover" },
+    h1(
+      { className: "chapter-title" },
+      emoji,
+      " ",
+      span({ className: "gradient-text" }, title),
+    ),
+    p({ className: "chapter-description" }, description.trim()),
+  );
+}
+
+/**
+ * Get handout content container
+ * @returns {HTMLElement}
+ */
+function getHandoutContent() {
+  return document.getElementById("handout-content");
+}
+
+/**
+ * Hide loading indicator
+ */
+function hideLoading() {
+  const loading = document.getElementById("slide-loading");
+  if (loading) {
+    loading.classList.add("hidden");
+  }
+}
+
+/**
+ * Show loading indicator
+ */
+function showLoading() {
+  const loading = document.getElementById("slide-loading");
+  if (loading) {
+    loading.classList.remove("hidden");
+  }
+}
+
+/**
+ * Render content to handout container
+ * @param {HTMLElement} content
+ */
+function renderHandout(content) {
+  const container = getHandoutContent();
+  container.innerHTML = "";
+  container.appendChild(content);
+  hideLoading();
+}
+
+/**
+ * Render the handout index page
+ * @param {Object} data
+ */
+function renderIndex(data) {
+  const { framework } = data;
+
+  const content = div(
+    { className: "slide slide-index" },
+    div(
+      { className: "page-header" },
+      heading1(
+        { className: "page-title" },
+        `${framework.emoji} ${framework.title} Handouts`,
+      ),
+      p(
+        { className: "page-description" },
+        "Printable handouts with all items in each category on a single page.",
+      ),
+    ),
+
+    div(
+      { className: "slide-section" },
+      heading2(
+        { className: "slide-section-title" },
+        "📄 ",
+        span({ className: "gradient-text" }, "Available Handouts"),
+      ),
+      ul(
+        { className: "related-list" },
+        li(
+          {},
+          a(
+            { href: "#/job" },
+            `${getConceptEmoji(framework, "job")} ${framework.entityDefinitions.job.title}`,
+          ),
+          " - ",
+          `${data.disciplines.length} disciplines, ${data.tracks.length} tracks, ${data.grades.length} grades`,
+        ),
+        li(
+          {},
+          a(
+            { href: "#/skill" },
+            `${getConceptEmoji(framework, "skill")} ${framework.entityDefinitions.skill.title}`,
+          ),
+          " - ",
+          `${data.skills.length} skill definitions`,
+        ),
+        li(
+          {},
+          a(
+            { href: "#/behaviour" },
+            `${getConceptEmoji(framework, "behaviour")} ${framework.entityDefinitions.behaviour.title}`,
+          ),
+          " - ",
+          `${data.behaviours.length} behaviour definitions`,
+        ),
+        li(
+          {},
+          a(
+            { href: "#/driver" },
+            `${getConceptEmoji(framework, "driver")} ${framework.entityDefinitions.driver.title}`,
+          ),
+          " - ",
+          `${data.drivers.length} driver definitions`,
+        ),
+      ),
+    ),
+  );
+
+  renderHandout(content);
+}
+
+/**
+ * Render all driver slides
+ * @param {Object} data
+ */
+function renderDriverHandout(data) {
+  const { framework } = data;
+
+  const slides = data.drivers.map((driver) => {
+    return driverToDOM(driver, {
+      skills: data.skills,
+      behaviours: data.behaviours,
+      framework: data.framework,
+      showBackLink: false,
+    });
+  });
+
+  const content = div(
+    {},
+    createChapterCover({
+      emoji: getConceptEmoji(framework, "driver"),
+      title: framework.entityDefinitions.driver.title,
+      description: framework.entityDefinitions.driver.description,
+    }),
+    ...slides,
+  );
+
+  renderHandout(content);
+}
+
+/**
+ * Render all skill slides
+ * @param {Object} data
+ */
+function renderSkillHandout(data) {
+  const { framework } = data;
+
+  // Get capability order from data
+  const capabilityOrder = getCapabilityOrder(data.capabilities);
+
+  // Sort skills by capability order, then by name within capability
+  const sortedSkills = [...data.skills].sort((a, b) => {
+    const aIndex = capabilityOrder.indexOf(a.capability);
+    const bIndex = capabilityOrder.indexOf(b.capability);
+    if (aIndex !== bIndex) {
+      return aIndex - bIndex;
+    }
+    return a.name.localeCompare(b.name);
+  });
+
+  const slides = sortedSkills.map((skill) => {
+    return skillToDOM(skill, {
+      disciplines: data.disciplines,
+      tracks: data.tracks,
+      drivers: data.drivers,
+      capabilities: data.capabilities,
+      showBackLink: false,
+    });
+  });
+
+  const content = div(
+    {},
+    createChapterCover({
+      emoji: getConceptEmoji(framework, "skill"),
+      title: framework.entityDefinitions.skill.title,
+      description: framework.entityDefinitions.skill.description,
+    }),
+    ...slides,
+  );
+
+  renderHandout(content);
+}
+
+/**
+ * Render all behaviour slides
+ * @param {Object} data
+ */
+function renderBehaviourHandout(data) {
+  const { framework } = data;
+
+  const slides = data.behaviours.map((behaviour) => {
+    return behaviourToDOM(behaviour, {
+      drivers: data.drivers,
+      framework: data.framework,
+      showBackLink: false,
+    });
+  });
+
+  const content = div(
+    {},
+    createChapterCover({
+      emoji: getConceptEmoji(framework, "behaviour"),
+      title: framework.entityDefinitions.behaviour.title,
+      description: framework.entityDefinitions.behaviour.description,
+    }),
+    ...slides,
+  );
+
+  renderHandout(content);
+}
+
+/**
+ * Render all job component slides (disciplines, grades, tracks)
+ * @param {Object} data
+ */
+function renderJobHandout(data) {
+  const { framework } = data;
+
+  const disciplineSlides = data.disciplines.map((discipline) => {
+    return disciplineToDOM(discipline, {
+      skills: data.skills,
+      behaviours: data.behaviours,
+      framework: data.framework,
+      showBackLink: false,
+      showBehaviourModifiers: false,
+    });
+  });
+
+  const gradeSlides = data.grades.map((grade) => {
+    return gradeToDOM(grade, {
+      framework: data.framework,
+      showBackLink: false,
+    });
+  });
+
+  const trackSlides = sortTracksByType(data.tracks).map((track) => {
+    return trackToDOM(track, {
+      skills: data.skills,
+      behaviours: data.behaviours,
+      disciplines: data.disciplines,
+      framework: data.framework,
+    });
+  });
+
+  const content = div(
+    {},
+    // Disciplines chapter
+    createChapterCover({
+      emoji: getConceptEmoji(framework, "discipline"),
+      title: framework.entityDefinitions.discipline.title,
+      description: framework.entityDefinitions.discipline.description,
+    }),
+    ...disciplineSlides,
+
+    // Tracks chapter
+    createChapterCover({
+      emoji: getConceptEmoji(framework, "track"),
+      title: framework.entityDefinitions.track.title,
+      description: framework.entityDefinitions.track.description,
+    }),
+    ...trackSlides,
+
+    // Grades chapter
+    createChapterCover({
+      emoji: getConceptEmoji(framework, "grade"),
+      title: framework.entityDefinitions.grade.title,
+      description: framework.entityDefinitions.grade.description,
+    }),
+    ...gradeSlides,
+  );
+
+  renderHandout(content);
+}
+
+/**
+ * Handle routing based on hash
+ */
+function handleRoute() {
+  const data = getState().data;
+  const hash = window.location.hash || "#/";
+  const path = hash.slice(1); // Remove #
+
+  switch (path) {
+    case "/":
+    case "":
+      renderIndex(data);
+      break;
+    case "/driver":
+      renderDriverHandout(data);
+      break;
+    case "/skill":
+      renderSkillHandout(data);
+      break;
+    case "/behaviour":
+      renderBehaviourHandout(data);
+      break;
+    case "/job":
+      renderJobHandout(data);
+      break;
+    default:
+      renderIndex(data);
+  }
+}
+
+/**
+ * Populate the page brand header with framework title and hashtag
+ * @param {Object} framework - Framework data from YAML
+ */
+function populateBrandHeader(framework) {
+  const header = document.getElementById("page-brand-header");
+  if (!header) return;
+
+  // Update document title
+  document.title = `${framework.title} - Handout View`;
+
+  header.innerHTML = "";
+  header.appendChild(
+    a(
+      { className: "brand-title", href: "#/" },
+      `${framework.emoji} ${framework.title}`,
+    ),
+  );
+  header.appendChild(span({ className: "brand-tag" }, framework.tag));
+  header.style.display = "";
+}
+
+/**
+ * Initialize the handout viewer
+ */
+async function init() {
+  showLoading();
+
+  try {
+    const data = await loadAllData();
+    setData(data);
+
+    // Populate brand header
+    populateBrandHeader(data.framework);
+
+    // Set up hash change listener
+    window.addEventListener("hashchange", handleRoute);
+
+    // Initial render
+    handleRoute();
+  } catch (error) {
+    console.error("Failed to initialize handout viewer:", error);
+    const container = getHandoutContent();
+    container.innerHTML = `
+      <div class="slide-error">
+        <h1>Initialization Error</h1>
+        <p>${error.message}</p>
+      </div>
+    `;
+    hideLoading();
+  }
+}
+
+// Start the application
+init();

package/app/handout.html

@@ -0,0 +1,21 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <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" />
+  </head>
+  <body class="slide-view handout-view">
+    <header
+      id="page-brand-header"
+      class="page-brand-header"
+      style="display: none"
+    ></header>
+    <div id="slide-loading" class="slide-loading">
+      <p>Loading...</p>
+    </div>
+    <main id="handout-content"></main>
+    <script type="module" src="handout-main.js"></script>
+  </body>
+</html>

package/app/index.html

@@ -0,0 +1,59 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Engineering Pathway</title>
+    <link rel="stylesheet" href="css/bundles/app.css" />
+  </head>
+  <body>
+    <div id="app">
+      <nav id="app-nav">
+        <div class="nav-brand">
+          <a href="#/">Engineering Pathway</a>
+          <span class="brand-tag">#BenchTools</span>
+        </div>
+        <button
+          class="nav-toggle"
+          id="nav-toggle"
+          aria-label="Toggle navigation"
+        >
+          <span></span>
+          <span></span>
+          <span></span>
+        </button>
+        <ul class="nav-links" id="nav-links">
+          <li><a href="#/discipline">Disciplines</a></li>
+          <li><a href="#/track">Tracks</a></li>
+          <li><a href="#/grade">Grades</a></li>
+          <li><a href="#/skill">Skills</a></li>
+          <li><a href="#/behaviour">Behaviours</a></li>
+          <li><a href="#/stage">Stages</a></li>
+          <li><a href="#/driver">Drivers</a></li>
+          <li><a href="#/job-builder" class="nav-cta">Build a Job</a></li>
+          <li><a href="#/agent-builder" class="nav-cta">Build an Agent</a></li>
+          <li><a href="#/interview-prep" class="nav-cta">Interview Prep</a></li>
+          <li>
+            <a href="#/career-progress" class="nav-cta">Career Progress</a>
+          </li>
+          <li>
+            <a href="#/self-assessment" class="nav-cta">Self-Assessment</a>
+          </li>
+        </ul>
+      </nav>
+
+      <main id="app-content">
+        <div class="loading">
+          <div class="loading-spinner"></div>
+          <p>Loading...</p>
+        </div>
+      </main>
+
+      <footer id="app-footer">
+        <p>Engineering Pathway</p>
+      </footer>
+    </div>
+
+    <script type="module" src="main.js"></script>
+  </body>
+</html>

package/app/lib/card-mappers.js

@@ -0,0 +1,173 @@
+/**
+ * Card Mapper Functions
+ *
+ * Reusable functions that map entities to card configurations.
+ * Used by both regular pages and overview slides.
+ */
+
+import { createBadge } from "../components/card.js";
+import { formatLevel } from "./render.js";
+import { getCapabilityEmoji } from "../model/levels.js";
+
+/**
+ * Map discipline to card config
+ * @param {Object} discipline
+ * @returns {Object}
+ */
+export function disciplineToCardConfig(discipline) {
+  return {
+    title: discipline.name,
+    description: discipline.truncatedDescription,
+    href: `/discipline/${discipline.id}`,
+    meta: [
+      createBadge(`${discipline.coreSkillsCount} core`, "primary"),
+      createBadge(
+        `${discipline.supportingSkillsCount} supporting`,
+        "secondary",
+      ),
+      createBadge(`${discipline.broadSkillsCount} broad`, "broad"),
+    ],
+  };
+}
+
+/**
+ * Map skill to card config
+ * @param {Object} skill
+ * @param {Array} capabilities
+ * @returns {Object}
+ */
+export function skillToCardConfig(skill, capabilities) {
+  return {
+    title: skill.name,
+    description: skill.truncatedDescription,
+    href: `/skill/${skill.id}`,
+    badges: [
+      createBadge(
+        formatCapability(skill.capability, capabilities),
+        skill.capability,
+      ),
+    ],
+  };
+}
+
+/**
+ * Map behaviour to card config
+ * @param {Object} behaviour
+ * @returns {Object}
+ */
+export function behaviourToCardConfig(behaviour) {
+  return {
+    title: behaviour.name,
+    description: behaviour.truncatedDescription,
+    href: `/behaviour/${behaviour.id}`,
+  };
+}
+
+/**
+ * Map driver to card config
+ * @param {Object} driver
+ * @returns {Object}
+ */
+export function driverToCardConfig(driver) {
+  return {
+    title: driver.name,
+    description: driver.truncatedDescription,
+    href: `/driver/${driver.id}`,
+    meta: [
+      createBadge(`${driver.contributingSkillsCount} skills`, "default"),
+      createBadge(
+        `${driver.contributingBehavioursCount} behaviours`,
+        "primary",
+      ),
+    ],
+  };
+}
+
+/**
+ * Map grade to card config (for timeline)
+ * @param {Object} grade
+ * @returns {Object}
+ */
+export function gradeToCardConfig(grade) {
+  return {
+    title: grade.displayName,
+    description: grade.scope || grade.truncatedDescription,
+    href: `/grade/${grade.id}`,
+    badges: [createBadge(grade.id, "default")],
+    meta: [
+      createBadge(
+        `Primary: ${formatLevel(grade.baseSkillLevels?.primary)}`,
+        "primary",
+      ),
+      createBadge(
+        `Secondary: ${formatLevel(grade.baseSkillLevels?.secondary)}`,
+        "secondary",
+      ),
+      createBadge(
+        `Broad: ${formatLevel(grade.baseSkillLevels?.broad)}`,
+        "broad",
+      ),
+    ],
+    yearsExperience: grade.yearsExperience,
+  };
+}
+
+/**
+ * Map track to card config
+ * @param {Object} track
+ * @returns {Object}
+ */
+export function trackToCardConfig(track) {
+  const badges = [];
+  if (track.isProfessional) {
+    badges.push(createBadge("Professional", "secondary"));
+  }
+  if (track.isManagement) {
+    badges.push(createBadge("Management", "default"));
+  }
+
+  return {
+    title: track.name,
+    description: track.truncatedDescription,
+    href: `/track/${track.id}`,
+    meta: badges,
+  };
+}
+
+/**
+ * Map job combination to card config
+ * @param {Object} job
+ * @returns {Object}
+ */
+export function jobToCardConfig(job) {
+  return {
+    title: job.title,
+    description: `${job.discipline.specialization || job.discipline.name} at ${job.grade.professionalTitle} level on ${job.track.name} track`,
+    href: `/job/${job.discipline.id}/${job.track.id}/${job.grade.id}`,
+    badges: [createBadge(job.grade.id, "default")],
+    meta: [createBadge(job.track.name, "secondary")],
+  };
+}
+
+/**
+ * Format capability for display
+ * @param {string} capability
+ * @param {Array} capabilities
+ * @returns {string}
+ */
+function formatCapability(capability, capabilities) {
+  const capabilityLabels = {
+    delivery: "Delivery",
+    scale: "Scale",
+    reliability: "Reliability",
+    data: "Data",
+    ai: "AI",
+    process: "Process",
+    business: "Business",
+    people: "People",
+    documentation: "Documentation",
+  };
+  const label = capabilityLabels[capability] || formatLevel(capability);
+  const emoji = getCapabilityEmoji(capabilities, capability);
+  return `${emoji} ${label}`;
+}