@forwardimpact/pathway 0.1.0

package/app/slide-main.js

@@ -0,0 +1,360 @@
+/**
+ * Slide View Main Entry Point
+ *
+ * Initializes the slide viewer application with routing and data loading.
+ */
+
+import { createSlideRouter } from "./lib/router-slides.js";
+import { setData, getState } from "./lib/state.js";
+import { loadAllData } from "./lib/yaml-loader.js";
+import { span, a } from "./lib/render.js";
+import { generateAllJobs } from "./model/derivation.js";
+import { sortTracksByType } from "./formatters/track/shared.js";
+
+// Import slide renderers
+import { renderChapterSlide } from "./slides/chapter.js";
+import { renderOverviewSlide } from "./slides/overview.js";
+import { renderSkillSlide } from "./slides/skill.js";
+import { renderBehaviourSlide } from "./slides/behaviour.js";
+import { renderDriverSlide } from "./slides/driver.js";
+import { renderDisciplineSlide } from "./slides/discipline.js";
+import { renderGradeSlide } from "./slides/grade.js";
+import { renderTrackSlide } from "./slides/track.js";
+import { renderJobSlide } from "./slides/job.js";
+import { renderInterviewSlide } from "./slides/interview.js";
+import { renderProgressSlide } from "./slides/progress.js";
+import { renderSlideIndex } from "./slides/index.js";
+
+/**
+ * Get slide content container
+ * @returns {HTMLElement}
+ */
+function getSlideContent() {
+  return document.getElementById("slide-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 error slide
+ * @param {string} title
+ * @param {string} message
+ */
+function renderError(title, message) {
+  const container = getSlideContent();
+  container.innerHTML = `
+    <div class="slide-error">
+      <h1>${title}</h1>
+      <p>${message}</p>
+      <a href="#/">← Back to Index</a>
+    </div>
+  `;
+  hideLoading();
+}
+
+/**
+ * Render content to slide container
+ * @param {HTMLElement|string} content
+ */
+function renderSlide(content) {
+  const container = getSlideContent();
+  container.innerHTML = "";
+
+  if (typeof content === "string") {
+    container.innerHTML = content;
+  } else if (content instanceof HTMLElement) {
+    container.appendChild(content);
+  }
+
+  hideLoading();
+}
+
+const router = createSlideRouter({
+  onNotFound: (path) =>
+    renderError("Slide Not Found", `No slide found for path: ${path}`),
+  renderError,
+});
+
+/**
+ * Set up routes
+ */
+function setupRoutes() {
+  // Index
+  router.on("/", () => {
+    renderSlideIndex({ render: renderSlide, data: getState().data });
+  });
+
+  // Chapters
+  router.on("/chapter/:chapter", (params) => {
+    renderChapterSlide({ render: renderSlide, data: getState().data, params });
+  });
+
+  // Overviews
+  router.on("/overview/:chapter", (params) => {
+    renderOverviewSlide({ render: renderSlide, data: getState().data, params });
+  });
+
+  // Skills
+  router.on("/skill/:id", (params) => {
+    renderSkillSlide({ render: renderSlide, data: getState().data, params });
+  });
+
+  // Behaviours
+  router.on("/behaviour/:id", (params) => {
+    renderBehaviourSlide({
+      render: renderSlide,
+      data: getState().data,
+      params,
+    });
+  });
+
+  // Drivers
+  router.on("/driver/:id", (params) => {
+    renderDriverSlide({ render: renderSlide, data: getState().data, params });
+  });
+
+  // Disciplines
+  router.on("/discipline/:id", (params) => {
+    renderDisciplineSlide({
+      render: renderSlide,
+      data: getState().data,
+      params,
+    });
+  });
+
+  // Grades
+  router.on("/grade/:id", (params) => {
+    renderGradeSlide({ render: renderSlide, data: getState().data, params });
+  });
+
+  // Tracks
+  router.on("/track/:id", (params) => {
+    renderTrackSlide({ render: renderSlide, data: getState().data, params });
+  });
+
+  // Jobs
+  router.on("/job/:discipline/:track/:grade", (params) => {
+    renderJobSlide({ render: renderSlide, data: getState().data, params });
+  });
+
+  // Interviews
+  router.on("/interview/:discipline/:track/:grade", (params) => {
+    renderInterviewSlide({
+      render: renderSlide,
+      data: getState().data,
+      params,
+    });
+  });
+
+  // Progress
+  router.on("/progress/:discipline/:track/:grade", (params) => {
+    renderProgressSlide({ render: renderSlide, data: getState().data, params });
+  });
+}
+
+/**
+ * Build slide order from data for navigation
+ * @param {Object} data
+ * @returns {{ order: string[], boundaries: number[] }}
+ */
+function buildSlideOrder(data) {
+  const order = ["/"];
+  const boundaries = [];
+
+  // Disciplines
+  if (data.disciplines && data.disciplines.length > 0) {
+    boundaries.push(order.length);
+    order.push("/chapter/discipline");
+    order.push("/overview/discipline");
+    data.disciplines.forEach((d) => order.push(`/discipline/${d.id}`));
+  }
+
+  // Tracks
+  if (data.tracks && data.tracks.length > 0) {
+    boundaries.push(order.length);
+    order.push("/chapter/track");
+    order.push("/overview/track");
+    sortTracksByType(data.tracks).forEach((t) => order.push(`/track/${t.id}`));
+  }
+
+  // Grades
+  if (data.grades && data.grades.length > 0) {
+    boundaries.push(order.length);
+    order.push("/chapter/grade");
+    order.push("/overview/grade");
+    data.grades.forEach((g) => order.push(`/grade/${g.id}`));
+  }
+
+  // Skills
+  if (data.skills && data.skills.length > 0) {
+    boundaries.push(order.length);
+    order.push("/chapter/skill");
+    order.push("/overview/skill");
+    data.skills.forEach((s) => order.push(`/skill/${s.id}`));
+  }
+
+  // Behaviours
+  if (data.behaviours && data.behaviours.length > 0) {
+    boundaries.push(order.length);
+    order.push("/chapter/behaviour");
+    order.push("/overview/behaviour");
+    data.behaviours.forEach((b) => order.push(`/behaviour/${b.id}`));
+  }
+
+  // Drivers
+  if (data.drivers && data.drivers.length > 0) {
+    boundaries.push(order.length);
+    order.push("/chapter/driver");
+    order.push("/overview/driver");
+    data.drivers.forEach((d) => order.push(`/driver/${d.id}`));
+  }
+
+  // Jobs
+  const jobs = generateAllJobs({
+    disciplines: data.disciplines,
+    grades: data.grades,
+    tracks: data.tracks,
+    skills: data.skills,
+    behaviours: data.behaviours,
+    validationRules: data.framework.validationRules,
+  });
+  if (jobs && jobs.length > 0) {
+    boundaries.push(order.length);
+    order.push("/chapter/job");
+    order.push("/overview/job");
+    jobs.forEach((job) =>
+      order.push(`/job/${job.discipline.id}/${job.track.id}/${job.grade.id}`),
+    );
+  }
+
+  return { order, boundaries };
+}
+
+/**
+ * Update navigation UI to show current position
+ */
+function updateNavUI() {
+  const idx = router.currentIndex();
+  const total = router.totalSlides();
+  const prevBtn = document.getElementById("prev-slide");
+  const nextBtn = document.getElementById("next-slide");
+  const prevChapterBtn = document.getElementById("prev-chapter");
+  const nextChapterBtn = document.getElementById("next-chapter");
+  const indicator = document.getElementById("slide-indicator");
+
+  if (indicator) {
+    indicator.textContent = total > 0 ? `${idx + 1} / ${total}` : "";
+  }
+  if (prevBtn) {
+    prevBtn.disabled = idx <= 0;
+  }
+  if (nextBtn) {
+    nextBtn.disabled = idx >= total - 1 || idx < 0;
+  }
+  if (prevChapterBtn) {
+    prevChapterBtn.disabled = idx <= 0;
+  }
+  if (nextChapterBtn) {
+    nextChapterBtn.disabled = idx >= total - 1 || idx < 0;
+  }
+}
+
+/**
+ * Set up navigation UI event handlers
+ */
+function setupNavUI() {
+  const prevBtn = document.getElementById("prev-slide");
+  const nextBtn = document.getElementById("next-slide");
+  const prevChapterBtn = document.getElementById("prev-chapter");
+  const nextChapterBtn = document.getElementById("next-chapter");
+
+  if (prevBtn) {
+    prevBtn.addEventListener("click", () => router.prev());
+  }
+  if (nextBtn) {
+    nextBtn.addEventListener("click", () => router.next());
+  }
+  if (prevChapterBtn) {
+    prevChapterBtn.addEventListener("click", () => router.prevChapter());
+  }
+  if (nextChapterBtn) {
+    nextChapterBtn.addEventListener("click", () => router.nextChapter());
+  }
+
+  window.addEventListener("hashchange", updateNavUI);
+  updateNavUI();
+}
+
+/**
+ * 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} - Slide 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 slide viewer
+ */
+async function init() {
+  showLoading();
+
+  try {
+    // Load data
+    const data = await loadAllData();
+    setData(data);
+
+    // Populate brand header
+    populateBrandHeader(data.framework);
+
+    // Set up routes
+    setupRoutes();
+
+    // Build slide order and set up navigation
+    const { order, boundaries } = buildSlideOrder(data);
+    router.setSlideOrder(order, boundaries);
+    setupNavUI();
+    router.startKeyboardNav();
+
+    // Start router
+    router.start();
+  } catch (error) {
+    console.error("Failed to initialize slide viewer:", error);
+    renderError("Initialization Error", error.message);
+  }
+}
+
+// Start the application
+init();

package/app/slides/behaviour.js

@@ -0,0 +1,38 @@
+/**
+ * Behaviour Slide View
+ *
+ * Printer-friendly view of a behaviour.
+ */
+
+import { div, h1, p } from "../lib/render.js";
+import { behaviourToDOM } from "../formatters/index.js";
+
+/**
+ * Render behaviour slide
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ * @param {Object} params.params
+ */
+export function renderBehaviourSlide({ render, data, params }) {
+  const behaviour = data.behaviours.find((b) => b.id === params.id);
+
+  if (!behaviour) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Behaviour Not Found"),
+        p({}, `No behaviour found with ID: ${params.id}`),
+      ),
+    );
+    return;
+  }
+
+  render(
+    behaviourToDOM(behaviour, {
+      drivers: data.drivers,
+      framework: data.framework,
+      showBackLink: false,
+    }),
+  );
+}

package/app/slides/chapter.js

@@ -0,0 +1,82 @@
+/**
+ * Chapter Slide View
+ *
+ * Displays chapter cover slides for each section.
+ */
+
+import { div, h1, p, span } from "../lib/render.js";
+
+/**
+ * Render chapter slide
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ * @param {Object} params.params
+ */
+export function renderChapterSlide({ render, data, params }) {
+  const { chapter } = params;
+  const { framework } = data;
+
+  const chapterConfig = {
+    driver: {
+      title: framework.entityDefinitions.driver.title,
+      emoji: framework.entityDefinitions.driver.emoji,
+      description: framework.entityDefinitions.driver.description,
+    },
+    skill: {
+      title: framework.entityDefinitions.skill.title,
+      emoji: framework.entityDefinitions.skill.emoji,
+      description: framework.entityDefinitions.skill.description,
+    },
+    behaviour: {
+      title: framework.entityDefinitions.behaviour.title,
+      emoji: framework.entityDefinitions.behaviour.emoji,
+      description: framework.entityDefinitions.behaviour.description,
+    },
+    discipline: {
+      title: framework.entityDefinitions.discipline.title,
+      emoji: framework.entityDefinitions.discipline.emoji,
+      description: framework.entityDefinitions.discipline.description,
+    },
+    grade: {
+      title: framework.entityDefinitions.grade.title,
+      emoji: framework.entityDefinitions.grade.emoji,
+      description: framework.entityDefinitions.grade.description,
+    },
+    track: {
+      title: framework.entityDefinitions.track.title,
+      emoji: framework.entityDefinitions.track.emoji,
+      description: framework.entityDefinitions.track.description,
+    },
+    job: {
+      title: framework.entityDefinitions.job.title,
+      emoji: framework.entityDefinitions.job.emoji,
+      description: framework.entityDefinitions.job.description,
+    },
+  };
+
+  const config = chapterConfig[chapter];
+
+  if (!config) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Chapter Not Found"),
+        p({}, `No chapter found with ID: ${chapter}`),
+      ),
+    );
+    return;
+  }
+
+  const slide = div(
+    { className: "slide chapter-cover" },
+    h1(
+      { className: "chapter-title" },
+      config.emoji ? `${config.emoji} ` : "",
+      span({ className: "gradient-text" }, config.title),
+    ),
+    p({ className: "chapter-description" }, config.description.trim()),
+  );
+
+  render(slide);
+}

package/app/slides/discipline.js

@@ -0,0 +1,40 @@
+/**
+ * Discipline Slide View
+ *
+ * Printer-friendly view of a discipline.
+ */
+
+import { div, h1, p } from "../lib/render.js";
+import { disciplineToDOM } from "../formatters/index.js";
+
+/**
+ * Render discipline slide
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ * @param {Object} params.params
+ */
+export function renderDisciplineSlide({ render, data, params }) {
+  const discipline = data.disciplines.find((d) => d.id === params.id);
+
+  if (!discipline) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Discipline Not Found"),
+        p({}, `No discipline found with ID: ${params.id}`),
+      ),
+    );
+    return;
+  }
+
+  render(
+    disciplineToDOM(discipline, {
+      skills: data.skills,
+      behaviours: data.behaviours,
+      framework: data.framework,
+      showBackLink: false,
+      showBehaviourModifiers: false,
+    }),
+  );
+}

package/app/slides/driver.js

@@ -0,0 +1,39 @@
+/**
+ * Driver Slide View
+ *
+ * Printer-friendly view of a driver.
+ */
+
+import { div, h1, p } from "../lib/render.js";
+import { driverToDOM } from "../formatters/index.js";
+
+/**
+ * Render driver slide
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ * @param {Object} params.params
+ */
+export function renderDriverSlide({ render, data, params }) {
+  const driver = data.drivers.find((d) => d.id === params.id);
+
+  if (!driver) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Driver Not Found"),
+        p({}, `No driver found with ID: ${params.id}`),
+      ),
+    );
+    return;
+  }
+
+  render(
+    driverToDOM(driver, {
+      skills: data.skills,
+      behaviours: data.behaviours,
+      framework: data.framework,
+      showBackLink: false,
+    }),
+  );
+}

package/app/slides/grade.js

@@ -0,0 +1,32 @@
+/**
+ * Grade Slide View
+ *
+ * Printer-friendly view of a grade.
+ */
+
+import { div, h1, p } from "../lib/render.js";
+import { gradeToDOM } from "../formatters/index.js";
+
+/**
+ * Render grade slide
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ * @param {Object} params.params
+ */
+export function renderGradeSlide({ render, data, params }) {
+  const grade = data.grades.find((g) => g.id === params.id);
+
+  if (!grade) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Grade Not Found"),
+        p({}, `No grade found with ID: ${params.id}`),
+      ),
+    );
+    return;
+  }
+
+  render(gradeToDOM(grade, { framework: data.framework, showBackLink: false }));
+}