@forwardimpact/pathway 0.1.0

package/app/slides/index.js

@@ -0,0 +1,198 @@
+/**
+ * Slide Index
+ *
+ * Shows a navigation index for all available slides.
+ */
+
+import { div, heading1, heading2, p, a, ul, li, span } from "../lib/render.js";
+import { getConceptEmoji } from "../model/levels.js";
+import { generateAllJobs } from "../model/derivation.js";
+
+/**
+ * Render the slide index
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ */
+export function renderSlideIndex({ render, data }) {
+  const { framework } = data;
+  const slide = div(
+    { className: "slide slide-index" },
+    div(
+      { className: "page-header" },
+      heading1(
+        { className: "page-title" },
+        `${framework.emoji} ${framework.title}`,
+      ),
+      p(
+        { className: "page-description" },
+        "Slide view for printing and presentations. Select a category below.",
+      ),
+    ),
+
+    // Disciplines
+    div(
+      { className: "slide-section" },
+      a(
+        { href: "#/overview/discipline" },
+        heading2(
+          { className: "slide-section-title" },
+          `${getConceptEmoji(data.framework, "discipline")} `,
+          span({ className: "gradient-text" }, "Disciplines"),
+        ),
+      ),
+      ul(
+        { className: "related-list" },
+        ...data.disciplines.map((discipline) =>
+          li(
+            {},
+            a(
+              { href: `#/discipline/${discipline.id}` },
+              discipline.specialization || discipline.name,
+            ),
+          ),
+        ),
+      ),
+    ),
+
+    // Tracks
+    div(
+      { className: "slide-section" },
+      a(
+        { href: "#/overview/track" },
+        heading2(
+          { className: "slide-section-title" },
+          `${getConceptEmoji(data.framework, "track")} `,
+          span({ className: "gradient-text" }, "Tracks"),
+        ),
+      ),
+      ul(
+        { className: "related-list" },
+        ...data.tracks.map((track) =>
+          li({}, a({ href: `#/track/${track.id}` }, track.name)),
+        ),
+      ),
+    ),
+
+    // Grades
+    div(
+      { className: "slide-section" },
+      a(
+        { href: "#/overview/grade" },
+        heading2(
+          { className: "slide-section-title" },
+          `${getConceptEmoji(data.framework, "grade")} `,
+          span({ className: "gradient-text" }, "Grades"),
+        ),
+      ),
+      ul(
+        { className: "related-list" },
+        ...data.grades.map((grade) =>
+          li(
+            {},
+            a(
+              { href: `#/grade/${grade.id}` },
+              `${grade.id} - ${grade.professionalTitle}`,
+            ),
+          ),
+        ),
+      ),
+    ),
+
+    // Skills
+    div(
+      { className: "slide-section" },
+      a(
+        { href: "#/overview/skill" },
+        heading2(
+          { className: "slide-section-title" },
+          `${getConceptEmoji(data.framework, "skill")} `,
+          span({ className: "gradient-text" }, "Skills"),
+        ),
+      ),
+      ul(
+        { className: "related-list" },
+        ...data.skills.map((skill) =>
+          li({}, a({ href: `#/skill/${skill.id}` }, skill.name)),
+        ),
+      ),
+    ),
+
+    // Behaviours
+    div(
+      { className: "slide-section" },
+      a(
+        { href: "#/overview/behaviour" },
+        heading2(
+          { className: "slide-section-title" },
+          `${getConceptEmoji(data.framework, "behaviour")} `,
+          span({ className: "gradient-text" }, "Behaviours"),
+        ),
+      ),
+      ul(
+        { className: "related-list" },
+        ...data.behaviours.map((behaviour) =>
+          li({}, a({ href: `#/behaviour/${behaviour.id}` }, behaviour.name)),
+        ),
+      ),
+    ),
+
+    // Drivers
+    div(
+      { className: "slide-section" },
+      a(
+        { href: "#/overview/driver" },
+        heading2(
+          { className: "slide-section-title" },
+          `${getConceptEmoji(data.framework, "driver")} `,
+          span({ className: "gradient-text" }, "Drivers"),
+        ),
+      ),
+      ul(
+        { className: "related-list" },
+        ...data.drivers.map((driver) =>
+          li({}, a({ href: `#/driver/${driver.id}` }, driver.name)),
+        ),
+      ),
+    ),
+
+    // Jobs
+    div(
+      { className: "slide-section" },
+      a(
+        { href: "#/overview/job" },
+        heading2(
+          { className: "slide-section-title" },
+          `${getConceptEmoji(data.framework, "job")} `,
+          span(
+            { className: "gradient-text" },
+            data.framework.entityDefinitions.job.title,
+          ),
+        ),
+      ),
+      ul(
+        { className: "related-list" },
+        ...generateAllJobs({
+          disciplines: data.disciplines,
+          grades: data.grades,
+          tracks: data.tracks,
+          skills: data.skills,
+          behaviours: data.behaviours,
+          validationRules: data.framework.validationRules,
+        }).map((job) =>
+          li(
+            {},
+            a(
+              {
+                href: `#/job/${job.discipline.id}/${job.track.id}/${job.grade.id}`,
+              },
+              job.title,
+            ),
+          ),
+        ),
+      ),
+    ),
+  );
+
+  render(slide);
+}

package/app/slides/interview.js

@@ -0,0 +1,58 @@
+/**
+ * Interview Slide View
+ *
+ * Printer-friendly view of interview questions.
+ */
+
+import { div, h1, p } from "../lib/render.js";
+import {
+  prepareInterviewDetail,
+  INTERVIEW_TYPES,
+} from "../formatters/interview/shared.js";
+import { interviewToDOM } from "../formatters/index.js";
+
+/**
+ * Render interview slide
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ * @param {Object} params.params
+ */
+export function renderInterviewSlide({ render, data, params }) {
+  const discipline = data.disciplines.find((d) => d.id === params.discipline);
+  const grade = data.grades.find((g) => g.id === params.grade);
+  const track = data.tracks.find((t) => t.id === params.track);
+
+  // Get interview type from URL query or default to full
+  const urlParams = new URLSearchParams(window.location.search);
+  const interviewType = urlParams.get("type") || "full";
+
+  const view = prepareInterviewDetail({
+    discipline,
+    grade,
+    track,
+    skills: data.skills,
+    behaviours: data.behaviours,
+    questions: data.questions,
+    interviewType,
+  });
+
+  if (!view) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Interview Not Found"),
+        p({}, "Invalid job combination or no questions available."),
+      ),
+    );
+    return;
+  }
+
+  const typeConfig = INTERVIEW_TYPES[interviewType];
+  render(
+    interviewToDOM(view, typeConfig, {
+      framework: data.framework,
+      showBackLink: false,
+    }),
+  );
+}

package/app/slides/job.js

@@ -0,0 +1,55 @@
+/**
+ * Job Slide View
+ *
+ * Printer-friendly view of a job definition.
+ */
+
+import { div, h1, p } from "../lib/render.js";
+import { prepareJobDetail } from "../model/job.js";
+import { jobToDOM } from "../formatters/index.js";
+
+/**
+ * Render job slide
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ * @param {Object} params.params
+ */
+export function renderJobSlide({ render, data, params }) {
+  const discipline = data.disciplines.find((d) => d.id === params.discipline);
+  const grade = data.grades.find((g) => g.id === params.grade);
+  const track = data.tracks.find((t) => t.id === params.track);
+
+  const view = prepareJobDetail({
+    discipline,
+    grade,
+    track,
+    skills: data.skills,
+    behaviours: data.behaviours,
+    drivers: data.drivers,
+    capabilities: data.capabilities,
+  });
+
+  if (!view) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Job Not Found"),
+        p({}, "Invalid job combination."),
+      ),
+    );
+    return;
+  }
+
+  render(
+    jobToDOM(view, {
+      showBackLink: false,
+      showTables: false,
+      showJobDescriptionHtml: true,
+      showJobDescriptionMarkdown: false,
+      discipline,
+      grade,
+      track,
+    }),
+  );
+}

package/app/slides/overview.js

@@ -0,0 +1,126 @@
+/**
+ * Overview Slide View
+ *
+ * Displays overview slides for each chapter with cards for all entities.
+ */
+
+import { div, h1, p, span } from "../lib/render.js";
+import { createCardList } from "../components/list.js";
+import {
+  disciplineToCardConfig,
+  skillToCardConfig,
+  behaviourToCardConfig,
+  driverToCardConfig,
+  gradeToCardConfig,
+  trackToCardConfig,
+  jobToCardConfig,
+} from "../lib/card-mappers.js";
+import { prepareDisciplinesList } from "../formatters/discipline/shared.js";
+import { prepareSkillsList } from "../formatters/skill/shared.js";
+import { prepareBehavioursList } from "../formatters/behaviour/shared.js";
+import { prepareDriversList } from "../formatters/driver/shared.js";
+import { prepareGradesList } from "../formatters/grade/shared.js";
+import { prepareTracksList } from "../formatters/track/shared.js";
+import { generateAllJobs } from "../model/derivation.js";
+
+/**
+ * Render overview slide
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ * @param {Object} params.params
+ */
+export function renderOverviewSlide({ 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,
+      entities: prepareDriversList(data.drivers).items,
+      mapper: driverToCardConfig,
+    },
+    skill: {
+      title: framework.entityDefinitions.skill.title,
+      emoji: framework.entityDefinitions.skill.emoji,
+      description: framework.entityDefinitions.skill.description,
+      entities: Object.values(
+        prepareSkillsList(data.skills, data.capabilities).groups,
+      ).flat(),
+      mapper: (skill) => skillToCardConfig(skill, data.capabilities),
+    },
+    behaviour: {
+      title: framework.entityDefinitions.behaviour.title,
+      emoji: framework.entityDefinitions.behaviour.emoji,
+      description: framework.entityDefinitions.behaviour.description,
+      entities: prepareBehavioursList(data.behaviours).items,
+      mapper: behaviourToCardConfig,
+    },
+    discipline: {
+      title: framework.entityDefinitions.discipline.title,
+      emoji: framework.entityDefinitions.discipline.emoji,
+      description: framework.entityDefinitions.discipline.description,
+      entities: prepareDisciplinesList(data.disciplines).items,
+      mapper: disciplineToCardConfig,
+    },
+    grade: {
+      title: framework.entityDefinitions.grade.title,
+      emoji: framework.entityDefinitions.grade.emoji,
+      description: framework.entityDefinitions.grade.description,
+      entities: prepareGradesList(data.grades).items,
+      mapper: gradeToCardConfig,
+    },
+    track: {
+      title: framework.entityDefinitions.track.title,
+      emoji: framework.entityDefinitions.track.emoji,
+      description: framework.entityDefinitions.track.description,
+      entities: prepareTracksList(data.tracks).items,
+      mapper: trackToCardConfig,
+    },
+    job: {
+      title: framework.entityDefinitions.job.title,
+      emoji: framework.entityDefinitions.job.emoji,
+      description: framework.entityDefinitions.job.description,
+      entities: generateAllJobs({
+        disciplines: data.disciplines,
+        grades: data.grades,
+        tracks: data.tracks,
+        skills: data.skills,
+        behaviours: data.behaviours,
+        validationRules: data.framework.validationRules,
+      }),
+      mapper: jobToCardConfig,
+    },
+  };
+
+  const config = chapterConfig[chapter];
+
+  if (!config) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Overview Not Found"),
+        p({}, `No overview found for chapter: ${chapter}`),
+      ),
+    );
+    return;
+  }
+
+  const slide = div(
+    { className: "slide overview-slide" },
+    div(
+      { className: "overview-header" },
+      h1(
+        { className: "overview-title" },
+        config.emoji ? `${config.emoji} ` : "",
+        span({ className: "gradient-text" }, config.title),
+      ),
+      p({ className: "overview-description" }, config.description.trim()),
+    ),
+    createCardList(config.entities, config.mapper, "No items found."),
+  );
+
+  render(slide);
+}

package/app/slides/progress.js

@@ -0,0 +1,83 @@
+/**
+ * Progress Slide View
+ *
+ * Printer-friendly view of career progression.
+ */
+
+import { div, h1, p } from "../lib/render.js";
+import {
+  prepareProgressDetail,
+  getDefaultTargetGrade,
+} from "../formatters/progress/shared.js";
+import { progressToDOM } from "../formatters/index.js";
+
+/**
+ * Render progress slide
+ * @param {Object} params
+ * @param {Function} params.render
+ * @param {Object} params.data
+ * @param {Object} params.params
+ */
+export function renderProgressSlide({ render, data, params }) {
+  const discipline = data.disciplines.find((d) => d.id === params.discipline);
+  const grade = data.grades.find((g) => g.id === params.grade);
+  const track = data.tracks.find((t) => t.id === params.track);
+
+  if (!discipline || !grade || !track) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Role Not Found"),
+        p({}, "Invalid role combination."),
+      ),
+    );
+    return;
+  }
+
+  // Get compare grade from URL query or default to next grade
+  const urlParams = new URLSearchParams(window.location.search);
+  const compareGradeId = urlParams.get("compare");
+
+  let targetGrade;
+  if (compareGradeId) {
+    targetGrade = data.grades.find((g) => g.id === compareGradeId);
+  } else {
+    targetGrade = getDefaultTargetGrade(grade, data.grades);
+  }
+
+  if (!targetGrade) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "No Progression Available"),
+        p({}, "No next grade available for this role."),
+      ),
+    );
+    return;
+  }
+
+  const view = prepareProgressDetail({
+    fromDiscipline: discipline,
+    fromGrade: grade,
+    fromTrack: track,
+    toDiscipline: discipline,
+    toGrade: targetGrade,
+    toTrack: track,
+    skills: data.skills,
+    behaviours: data.behaviours,
+    capabilities: data.capabilities,
+  });
+
+  if (!view) {
+    render(
+      div(
+        { className: "slide-error" },
+        h1({}, "Progression Error"),
+        p({}, "Unable to analyze progression."),
+      ),
+    );
+    return;
+  }
+
+  render(progressToDOM(view, { showBackLink: false }));
+}

package/app/slides/skill.js

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

package/app/slides/track.js

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

package/app/slides.html

@@ -0,0 +1,56 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Engineering Pathway - Slide View</title>
+    <link rel="stylesheet" href="css/bundles/slides.css" />
+  </head>
+  <body class="slide-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="slide-content"></main>
+    <nav id="slide-nav" class="slide-nav">
+      <button
+        id="prev-chapter"
+        class="slide-nav-btn slide-nav-chapter"
+        disabled
+        title="Previous Chapter"
+      >
+        ↑
+      </button>
+      <button
+        id="prev-slide"
+        class="slide-nav-btn slide-nav-chapter"
+        disabled
+        title="Previous"
+      >
+        ←
+      </button>
+      <span id="slide-indicator" class="slide-indicator"></span>
+      <button
+        id="next-slide"
+        class="slide-nav-btn slide-nav-chapter"
+        disabled
+        title="Next"
+      >
+        →
+      </button>
+      <button
+        id="next-chapter"
+        class="slide-nav-btn slide-nav-chapter"
+        disabled
+        title="Next Chapter"
+      >
+        ↓
+      </button>
+    </nav>
+    <script type="module" src="slide-main.js"></script>
+  </body>
+</html>