diff --git a/site/app.js b/site/app.js
new file mode 100644
index 0000000..8bd03f5
--- /dev/null
+++ b/site/app.js
@@ -0,0 +1,663 @@
+import { parseRoadmap, renderInline, TYPES } from './parser.js';
+import { linkDiagram } from './diagram.js';
+import { createMapView } from './mapview.js';
+import { CREDITS, IMPORTANCE, areaDots, areaLabel, h, plural } from './dom.js';
+
+const SOURCES = [
+ 'README.md',
+ '../README.md',
+ 'https://raw.githubusercontent.com/m3y54m/Embedded-Engineering-Roadmap/master/README.md',
+];
+const REPO_URL = 'https://github.com/m3y54m/Embedded-Engineering-Roadmap';
+const reducedMotion = window.matchMedia('(prefers-reduced-motion: reduce)');
+const narrowScreen = window.matchMedia('(max-width: 960px)');
+
+const els = {
+ diagram: document.getElementById('diagram'),
+ outline: document.getElementById('outline'),
+ panel: document.getElementById('panel'),
+ status: document.getElementById('status'),
+ search: document.getElementById('search'),
+ results: document.getElementById('search-results'),
+ theme: document.getElementById('theme'),
+ tabs: [...document.querySelectorAll('[data-view]')],
+};
+
+const state = {
+ data: null,
+ selected: null,
+ includeSub: null,
+ filters: { types: new Set(), beginner: false, gem: false },
+ results: [],
+ active: -1,
+};
+
+// ---------- small helpers ----------
+
+const normalize = (text) => text.normalize('NFKD').replace(/[\u0300-\u036f]/g, '').toLowerCase();
+
+function* descendants(node) {
+ yield node;
+ for (const child of node.children) yield* descendants(child);
+}
+
+function store(key, value) {
+ try {
+ if (value === undefined) return localStorage.getItem(key);
+ localStorage.setItem(key, value);
+ } catch {
+ // Storage can be unavailable (private mode, blocked cookies); preferences just won't persist.
+ }
+ return null;
+}
+
+// ---------- colors ----------
+
+function assignHues(data) {
+ const [first, ...rest] = data.groups;
+ const start = rest.length ? first.topics : [];
+ const learning = rest.length ? rest.flatMap((g) => g.topics) : data.root.children;
+ start.forEach((t, i) => { t.hue = 168 + (start.length > 1 ? (i * 40) / (start.length - 1) : 0); });
+ learning.forEach((t, i) => { t.hue = (214 + (i * 300) / Math.max(1, learning.length)) % 360; });
+ data.root.children.forEach((top, index) => {
+ top.index = index;
+ for (const n of descendants(top)) n.top = top;
+ });
+}
+
+function colorOf(node) {
+ if (!node.top) return 'var(--accent)';
+ const dark = document.documentElement.dataset.theme !== 'light';
+ const step = Math.min(node.depth - 1, 3);
+ const alt = node.top.index % 2;
+ const light = dark ? [54, 44, 37, 32][step] + alt * 7 : [62, 73, 81, 87][step] - alt * 6;
+ const sat = dark ? [70, 56, 46, 40][step] : [72, 64, 56, 50][step];
+ return `hsl(${node.top.hue.toFixed(1)} ${sat}% ${light}%)`;
+}
+
+function swatch(node) {
+ const el = h('span', { class: 'swatch', 'aria-hidden': 'true' });
+ el.style.background = colorOf(node);
+ return el;
+}
+
+function truncate(text, max) {
+ if (text.length <= max) return text;
+ return max < 4 ? '' : `${text.slice(0, max - 1).trimEnd()}…`;
+}
+
+// ---------- navigation ----------
+
+function navigate(node, { push = true, resource = null, reveal = false } = {}) {
+ if (state.selected !== node) state.includeSub = null;
+ state.selected = node;
+ if (resource) resetFilters(false);
+ if (state.mapView) state.mapView.select(node === state.data.root ? null : node);
+ renderPanel(node);
+ syncOutline();
+ if (resource) revealResource(resource);
+ const root = state.data.root;
+ document.title = node === root ? 'Embedded Engineering Roadmap · Explorer' : `${node.title} · Embedded Engineering Roadmap`;
+ if (push) {
+ const hash = node === root ? '#/' : `#/${node.slug}`;
+ if (location.hash !== hash) history.pushState(null, '', hash);
+ }
+ if (reveal && narrowScreen.matches) openSheet(true);
+}
+
+function routeFromHash() {
+ const slug = decodeURIComponent(location.hash.replace(/^#\/?/, ''));
+ navigate((slug && state.data.bySlug.get(slug)) || state.data.root, { push: false });
+}
+
+// ---------- details panel ----------
+
+function section(title, ...content) {
+ return h('section', { class: 'panel-section' }, title ? h('h3', {}, title) : null, ...content);
+}
+
+function crumbs(node) {
+ const chain = [];
+ for (let n = node.parent; n; n = n.parent) chain.unshift(n);
+ if (!chain.length) return null;
+ const root = state.data.root;
+ return h('nav', { class: 'crumbs', 'aria-label': 'Topic path' }, chain.flatMap((n, i) => [
+ i ? h('span', { 'aria-hidden': 'true' }, '›') : null,
+ h('button', { type: 'button', onclick: () => navigate(n) }, n === root ? 'Overview' : n.title),
+ ]));
+}
+
+function description(blocks) {
+ const wrap = h('div', { class: 'desc' });
+ for (const block of blocks) {
+ if (block.type === 'p') {
+ const p = h('p');
+ p.innerHTML = renderInline(block.text);
+ wrap.append(p);
+ } else {
+ const ul = h('ul');
+ for (const item of block.items) {
+ const li = h('li');
+ li.innerHTML = renderInline(item);
+ ul.append(li);
+ }
+ wrap.append(ul);
+ }
+ }
+ return wrap;
+}
+
+function topicChips(nodes) {
+ return h('div', { class: 'chips' }, nodes.map((n) => h('button', {
+ type: 'button',
+ class: 'chip-btn',
+ onclick: () => navigate(n, { reveal: true }),
+ }, swatch(n), n.title, h('span', { class: 'n' }, n.total))));
+}
+
+function related(node) {
+ const items = [...node.links]
+ .sort((a, b) => b.weight - a.weight)
+ .map((link) => {
+ const other = link.source === node ? link.target : link.source;
+ const reasons = [];
+ if (link.shared.length) reasons.push(plural(link.shared.length, 'shared resource'));
+ const outgoing = link.mentions.filter((m) => m.topic === node);
+ const incoming = link.mentions.filter((m) => m.topic !== node);
+ if (outgoing.length) reasons.push(`mentioned here: “${truncate(outgoing[0].text, 60)}”`);
+ else if (incoming.length) reasons.push(`mentions this topic: “${truncate(incoming[0].text, 60)}”`);
+ const title = [...link.shared.map((s) => `Shared: ${s}`), ...link.mentions.map((m) => `${m.topic.title}: ${m.text}`)].join('\n');
+ return h('li', {}, h('button', { type: 'button', title, onclick: () => navigate(other, { reveal: true }) },
+ swatch(other),
+ h('span', {}, other.title),
+ h('span', { class: 'why' }, reasons.join(' · '))));
+ });
+ return h('ul', { class: 'related' }, items);
+}
+
+function passes(r) {
+ const f = state.filters;
+ return (!f.types.size || f.types.has(r.type)) && (!f.beginner || r.beginner) && (!f.gem || r.gem);
+}
+
+function resetFilters(rerender = true) {
+ state.filters = { types: new Set(), beginner: false, gem: false };
+ if (rerender) rerenderPanel();
+}
+
+function filterBar(entries) {
+ const f = state.filters;
+ const present = Object.keys(TYPES).filter((type) => entries.some((r) => r.type === type));
+ const button = (label, pressed, onclick) => h('button', { type: 'button', class: 'filter', 'aria-pressed': String(pressed), onclick }, label);
+ const active = f.types.size || f.beginner || f.gem;
+ const hasBeginner = entries.some((r) => r.beginner);
+ const hasGem = entries.some((r) => r.gem);
+ if (present.length < 2 && !hasBeginner && !hasGem && !active) return null;
+ return h('div', { class: 'filters', role: 'group', 'aria-label': 'Filter resources' },
+ present.length > 1 ? present.map((type) => button(`${TYPES[type].icon} ${TYPES[type].label}`, f.types.has(type), () => {
+ if (f.types.has(type)) f.types.delete(type);
+ else f.types.add(type);
+ rerenderPanel();
+ })) : null,
+ hasBeginner ? button('👶 Beginner', f.beginner, () => { f.beginner = !f.beginner; rerenderPanel(); }) : null,
+ hasGem ? button('💎 Essential', f.gem, () => { f.gem = !f.gem; rerenderPanel(); }) : null,
+ active ? h('button', { type: 'button', class: 'filter reset', onclick: () => resetFilters() }, 'Clear filters') : null);
+}
+
+function resourceItem(r) {
+ const type = TYPES[r.type];
+ return h('li', { class: 'res', 'data-url': r.url },
+ h('span', { class: 'res-icon', title: type.label, 'aria-label': type.label, role: 'img' }, type.icon),
+ h('div', { class: 'res-body' },
+ h('a', { class: 'res-title', href: r.url, target: '_blank', rel: 'noopener noreferrer' }, r.title),
+ h('div', { class: 'res-meta' },
+ h('span', {}, r.domain),
+ r.beginner ? h('span', { class: 'badge beginner' }, 'Beginner') : null,
+ r.gem ? h('span', { class: 'badge gem' }, 'Essential') : null),
+ r.note ? h('p', { class: 'res-note' }, r.note) : null,
+ r.sharedWith.length ? h('div', { class: 'res-also' }, 'Also listed in ', r.sharedWith.flatMap((t, i) => [
+ i ? ', ' : null,
+ h('button', { type: 'button', class: 'link-btn', onclick: () => navigate(t, { reveal: true }) }, t.title),
+ ])) : null));
+}
+
+function resources(node) {
+ const hasSub = node.children.length > 0 && node.total > node.resources.length;
+ const include = hasSub && (state.includeSub ?? node.resources.length === 0);
+ const groups = include
+ ? [...descendants(node)].filter((n) => n.resources.length).map((n) => ({ node: n, list: n.resources }))
+ : [{ node, list: node.resources }];
+ const all = groups.flatMap((g) => g.list);
+ const shown = all.filter(passes).length;
+
+ const sec = h('section', { class: 'panel-section' },
+ h('div', { class: 'res-head' },
+ h('h3', {}, 'Resources'),
+ h('span', { class: 'count' }, shown === all.length ? plural(all.length, 'item') : `${shown} of ${all.length}`)));
+ if (hasSub) {
+ const box = h('input', { type: 'checkbox', checked: include });
+ box.addEventListener('change', () => {
+ state.includeSub = box.checked;
+ rerenderPanel();
+ });
+ sec.append(h('label', { class: 'toggle' }, box, `Include subtopics (${plural(node.total, 'resource')})`));
+ }
+ if (!all.length) {
+ sec.append(h('p', { class: 'empty' }, 'This topic only groups its subtopics. Pick one above.'));
+ return sec;
+ }
+ const filters = filterBar(all);
+ if (filters) sec.append(filters);
+ if (!shown) {
+ sec.append(h('div', { class: 'empty' }, 'No resources match these filters. ',
+ h('button', { type: 'button', class: 'link-btn', onclick: () => resetFilters() }, 'Clear filters')));
+ return sec;
+ }
+ for (const group of groups) {
+ const list = group.list.filter(passes);
+ if (!list.length) continue;
+ if (include) {
+ sec.append(h('div', { class: 'res-group' },
+ h('button', { type: 'button', onclick: () => navigate(group.node, { reveal: true }) }, group.node.title)));
+ }
+ sec.append(h('ul', { class: 'res-list' }, list.map(resourceItem)));
+ }
+ return sec;
+}
+
+function areaSummary() {
+ const boxes = state.plan ? state.plan.boxes.filter((b) => !b.header) : [];
+ const count = (test) => boxes.filter(test).length;
+ const tile = (areas, n, label) => h('div', { class: 'stat' }, areaDots(areas), h('b', {}, n), h('span', {}, label));
+ return h('div', { class: 'stats areas' },
+ tile(['SOFTWARE'], count((b) => b.areas.length === 1 && b.areas[0] === 'SOFTWARE'), 'Software only'),
+ tile(['SOFTWARE', 'HARDWARE'], count((b) => b.areas.includes('SOFTWARE') && b.areas.includes('HARDWARE') && !b.areas.includes('SOFT SKILLS')), 'Software ∩ Hardware'),
+ tile(['HARDWARE'], count((b) => b.areas.length === 1 && b.areas[0] === 'HARDWARE'), 'Hardware only'));
+}
+
+function overview(root) {
+ const { stats, groups } = state.data;
+ return [
+ section(null, description(root.description)),
+ section(null, h('div', { class: 'stats' },
+ h('div', { class: 'stat' }, h('b', {}, stats.topics), h('span', {}, 'topics')),
+ h('div', { class: 'stat' }, h('b', {}, stats.resources), h('span', {}, 'resources')),
+ h('div', { class: 'stat' }, h('b', {}, stats.links), h('span', {}, 'connections')))),
+ state.plan ? section('Diagram topics by area', areaSummary()) : null,
+ ...groups.map((g) => section(g.title, topicChips(g.topics))),
+ section('How to explore', h('ul', { class: 'howto' },
+ h('li', {}, 'Map follows the roadmap diagram: topics sit in Software, Hardware or both, and are colored by importance.'),
+ h('li', {}, 'Use the Areas chips to highlight a single area or only the Software ∩ Hardware cross-section.'),
+ h('li', {}, 'Hover or select a topic to see lines to the topics it shares resources with (solid) or is mentioned by (dotted).'),
+ h('li', {}, 'Outline lists every topic of the README; use it to browse topics that are not on the map.'),
+ h('li', {}, 'Press ', h('kbd', {}, '/'), ' to search topics and resources.'))),
+ section(null, h('p', { class: 'res-note' }, 'Built from the ',
+ h('a', { href: `${REPO_URL}#readme`, target: '_blank', rel: 'noopener noreferrer' }, 'roadmap README'),
+ ' and the map definition in the repository.')),
+ section('Credits', credits()),
+ ].filter(Boolean);
+}
+
+function credits() {
+ const external = (href, ...children) => h('a', { href, target: '_blank', rel: 'noopener noreferrer' }, ...children);
+ const build = state.build;
+ return h('div', { class: 'credits' },
+ h('img', { class: 'credits-logo', src: 'assets/logo.svg', alt: '', width: 48, height: 48 }),
+ h('div', { class: 'credits-body' },
+ h('p', {}, 'Creator & maintainer: ', external(CREDITS.authorUrl, h('strong', {}, CREDITS.author))),
+ build ? h('p', {}, 'Revision ', h('strong', {}, build.version), ` · last update ${build.date}`) : null,
+ h('p', {}, 'Licensed under the ', external(CREDITS.licenseUrl, CREDITS.licenseName), '.'),
+ external(CREDITS.licenseUrl, h('img', { class: 'credits-badge', src: 'assets/cc-by-sa.svg', alt: CREDITS.license, width: 88, height: 31 }))));
+}
+
+function renderPanel(node) {
+ const root = state.data.root;
+ const panel = els.panel;
+ panel.replaceChildren();
+ panel.append(h('header', { class: 'panel-head' },
+ h('button', { type: 'button', class: 'icon-btn sheet-close', 'aria-label': 'Close details', onclick: () => openSheet(false) }, '✕'),
+ crumbs(node),
+ h('h2', { class: 'panel-title' },
+ node.icon ? h('span', { class: 'title-icon', 'aria-hidden': 'true' }, node.icon) : node === root ? null : swatch(node),
+ node === root ? 'Embedded Engineering Roadmap' : node.title),
+ node === root ? null : h('div', { class: 'meta' },
+ node.areas && node.areas.length ? h('span', { class: 'pill area-pill' }, areaDots(node.areas), areaLabel(node.areas)) : null,
+ node.importance ? h('span', { class: `pill imp-pill ${node.importance}` }, IMPORTANCE[node.importance]) : null,
+ h('span', { class: 'pill' }, plural(node.total, 'resource')),
+ node.children.length ? h('span', { class: 'pill' }, plural(node.children.length, 'subtopic')) : null,
+ node.links.length ? h('span', { class: 'pill' }, `${node.links.length} connected`) : null)));
+
+ if (node === root) {
+ panel.append(...overview(root));
+ return;
+ }
+ if (node.description.length) panel.append(section('About', description(node.description)));
+ if (node.children.length) panel.append(section('Subtopics', topicChips(node.children)));
+ if (node.links.length) panel.append(section('Connected topics', related(node)));
+ panel.append(resources(node));
+}
+
+function rerenderPanel() {
+ const top = els.panel.scrollTop;
+ renderPanel(state.selected);
+ els.panel.scrollTop = top;
+}
+
+function revealResource(resource) {
+ const item = [...els.panel.querySelectorAll('.res')].find((li) => li.dataset.url === resource.url);
+ if (!item) return;
+ item.scrollIntoView({ block: 'center', behavior: reducedMotion.matches ? 'auto' : 'smooth' });
+ item.classList.remove('flash');
+ void item.offsetWidth;
+ item.classList.add('flash');
+}
+
+function openSheet(open) {
+ els.panel.classList.toggle('open', open);
+ if (open) els.panel.focus({ preventScroll: true });
+}
+
+// ---------- outline view ----------
+
+function buildOutline() {
+ const { groups, stats } = state.data;
+ const item = (node) => {
+ const button = h('button', {
+ type: 'button',
+ class: 'tree-btn',
+ 'data-id': node.id,
+ onclick: (e) => {
+ e.preventDefault();
+ navigate(node, { reveal: true });
+ },
+ }, swatch(node), h('span', { class: 'tree-title' }, node.title),
+ node.areas && node.areas.length ? areaDots(node.areas) : null,
+ h('span', { class: 'tree-count' }, node.total));
+ if (!node.children.length) return h('li', {}, button);
+ const details = h('details', {}, h('summary', {}, button), h('ul', { class: 'tree' }, node.children.map(item)));
+ return h('li', {}, details);
+ };
+ els.outline.replaceChildren(
+ h('h2', {}, 'All topics'),
+ h('p', { class: 'res-note' }, `${stats.topics} topics and ${stats.resources} resources. Select a topic to see its details; use the arrows to expand.`),
+ ...groups.map((g) => h('section', { class: 'outline-group' }, h('h3', {}, g.title), h('ul', { class: 'tree' }, g.topics.map(item)))),
+ );
+}
+
+function syncOutline() {
+ for (const btn of els.outline.querySelectorAll('.tree-btn[aria-current]')) btn.removeAttribute('aria-current');
+ const btn = state.selected && els.outline.querySelector(`.tree-btn[data-id="${CSS.escape(state.selected.id)}"]`);
+ if (!btn) return;
+ btn.setAttribute('aria-current', 'true');
+ for (let el = btn.parentElement; el && el !== els.outline; el = el.parentElement) {
+ if (el.tagName === 'DETAILS') el.open = true;
+ }
+}
+
+const VIEWS = ['map', 'list'];
+
+function setView(view) {
+ if (!VIEWS.includes(view) || (view === 'map' && !state.mapView)) view = state.mapView ? 'map' : 'list';
+ els.diagram.hidden = view !== 'map';
+ els.outline.hidden = view !== 'list';
+ for (const tab of els.tabs) {
+ tab.setAttribute('aria-selected', String(tab.dataset.view === view));
+ if (tab.dataset.view === 'map') tab.hidden = !state.mapView;
+ }
+ store('roadmap-view', view);
+ if (view === 'map') state.mapView.show();
+ if (view === 'list') {
+ syncOutline();
+ const current = els.outline.querySelector('.tree-btn[aria-current]');
+ if (current) current.scrollIntoView({ block: 'center' });
+ }
+}
+
+// ---------- search ----------
+
+function buildIndex() {
+ state.index = {
+ topics: state.data.topics.map((node) => ({
+ node,
+ title: normalize(node.title),
+ text: normalize([node.title, ...node.path].join(' ')),
+ })),
+ resources: state.data.topics.flatMap((node) => node.resources.map((r) => ({
+ node,
+ r,
+ text: normalize(`${r.title} ${r.domain}`),
+ }))),
+ };
+}
+
+function runSearch(query) {
+ const tokens = normalize(query).split(/\s+/).filter(Boolean);
+ if (!tokens.length) return [];
+ const match = (entry) => tokens.every((t) => entry.text.includes(t));
+ const topics = state.index.topics
+ .filter(match)
+ .map((e) => ({ ...e, score: e.title.startsWith(tokens[0]) ? 0 : e.title.includes(tokens[0]) ? 1 : 2 }))
+ .sort((a, b) => a.score - b.score || a.node.depth - b.node.depth)
+ .slice(0, 6)
+ .map((e) => ({ kind: 'topic', node: e.node }));
+ const seen = new Set();
+ const resourceHits = state.index.resources
+ .filter((e) => match(e) && !seen.has(e.r.url) && seen.add(e.r.url))
+ .slice(0, 8)
+ .map((e) => ({ kind: 'resource', node: e.node, r: e.r }));
+ return [...topics, ...resourceHits];
+}
+
+function renderResults() {
+ const box = els.results;
+ const query = els.search.value.trim();
+ box.replaceChildren();
+ if (!query) {
+ closeResults();
+ return;
+ }
+ const results = state.results;
+ if (!results.length) {
+ box.append(h('div', { class: 'result-empty' }, `No topics or resources match “${query}”.`));
+ }
+ let lastKind = '';
+ results.forEach((res, i) => {
+ if (res.kind !== lastKind) {
+ box.append(h('div', { class: 'result-group', role: 'presentation' }, res.kind === 'topic' ? 'Topics' : 'Resources'));
+ lastKind = res.kind;
+ }
+ const isTopic = res.kind === 'topic';
+ const option = h('div', {
+ id: `result-${i}`,
+ class: 'result',
+ role: 'option',
+ 'aria-selected': String(i === state.active),
+ },
+ isTopic ? swatch(res.node) : h('span', { 'aria-hidden': 'true' }, TYPES[res.r.type].icon),
+ h('div', { class: 'result-main' },
+ h('div', { class: 'result-title' }, isTopic ? res.node.title : res.r.title, isTopic && res.node.areas && res.node.areas.length ? areaDots(res.node.areas) : null),
+ h('div', { class: 'result-sub' }, isTopic
+ ? (res.node.path.length ? res.node.path.join(' › ') : plural(res.node.total, 'resource'))
+ : `${res.r.domain} · ${res.node.title}`)));
+ option.addEventListener('pointerdown', (e) => {
+ e.preventDefault();
+ choose(i);
+ });
+ box.append(option);
+ });
+ box.hidden = false;
+ els.search.setAttribute('aria-expanded', 'true');
+ els.search.setAttribute('aria-activedescendant', state.active >= 0 ? `result-${state.active}` : '');
+}
+
+function closeResults() {
+ els.results.hidden = true;
+ els.search.setAttribute('aria-expanded', 'false');
+ els.search.removeAttribute('aria-activedescendant');
+ state.active = -1;
+}
+
+function choose(index) {
+ const res = state.results[index];
+ if (!res) return;
+ closeResults();
+ els.search.value = '';
+ els.search.blur();
+ if (res.kind === 'topic') navigate(res.node, { reveal: true });
+ else navigate(res.node, { resource: res.r, reveal: true });
+}
+
+function wireSearch() {
+ els.search.addEventListener('input', () => {
+ state.results = runSearch(els.search.value);
+ state.active = state.results.length ? 0 : -1;
+ renderResults();
+ });
+ els.search.addEventListener('keydown', (e) => {
+ const count = state.results.length;
+ if (e.key === 'ArrowDown' && count) {
+ e.preventDefault();
+ state.active = (state.active + 1) % count;
+ renderResults();
+ document.getElementById(`result-${state.active}`)?.scrollIntoView({ block: 'nearest' });
+ } else if (e.key === 'ArrowUp' && count) {
+ e.preventDefault();
+ state.active = (state.active - 1 + count) % count;
+ renderResults();
+ document.getElementById(`result-${state.active}`)?.scrollIntoView({ block: 'nearest' });
+ } else if (e.key === 'Enter') {
+ e.preventDefault();
+ choose(state.active >= 0 ? state.active : 0);
+ } else if (e.key === 'Escape') {
+ e.stopPropagation();
+ if (els.search.value) {
+ els.search.value = '';
+ closeResults();
+ } else {
+ els.search.blur();
+ }
+ }
+ });
+ els.search.addEventListener('focus', () => {
+ if (els.search.value.trim()) renderResults();
+ });
+ els.search.addEventListener('blur', () => window.setTimeout(closeResults, 120));
+}
+
+// ---------- theme, loading, startup ----------
+
+function applyTheme(theme) {
+ document.documentElement.dataset.theme = theme;
+ if (!state.data) return;
+ buildOutline();
+ syncOutline();
+ rerenderPanel();
+}
+
+async function loadMarkdown() {
+ for (const source of SOURCES) {
+ try {
+ const response = await fetch(source, { cache: 'no-cache' });
+ if (!response.ok) continue;
+ const text = await response.text();
+ if (text.includes('# Embedded Systems Engineering Roadmap')) return text;
+ } catch {
+ // Try the next source.
+ }
+ }
+ throw new Error('README.md could not be loaded');
+}
+
+async function loadMap() {
+ try {
+ const response = await fetch('map.json', { cache: 'no-cache' });
+ return response.ok ? await response.json() : null;
+ } catch {
+ return null;
+ }
+}
+
+// Revision and date, written by CI next to the deployed site; absent in local previews.
+async function loadBuild() {
+ try {
+ const response = await fetch('build.json', { cache: 'no-cache' });
+ return response.ok ? await response.json() : null;
+ } catch {
+ return null;
+ }
+}
+
+function isTyping(el) {
+ return el instanceof HTMLElement && (el.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(el.tagName));
+}
+
+function wireGlobal() {
+ els.theme.addEventListener('click', () => {
+ const next = document.documentElement.dataset.theme === 'light' ? 'dark' : 'light';
+ store('roadmap-theme', next);
+ applyTheme(next);
+ });
+ for (const tab of els.tabs) tab.addEventListener('click', () => setView(tab.dataset.view));
+ document.getElementById('print').addEventListener('click', () => window.print());
+ // Printing always produces the diagram, whatever view is open.
+ let viewBeforePrint = null;
+ window.addEventListener('beforeprint', () => {
+ if (!state.mapView) return;
+ viewBeforePrint = store('roadmap-view');
+ setView('map');
+ state.mapView.prepareForPrint();
+ });
+ window.addEventListener('afterprint', () => {
+ if (state.mapView) state.mapView.afterPrint();
+ if (viewBeforePrint && viewBeforePrint !== 'map') setView(viewBeforePrint);
+ viewBeforePrint = null;
+ });
+ window.addEventListener('popstate', () => routeFromHash());
+ document.addEventListener('keydown', (e) => {
+ if (isTyping(e.target) || e.metaKey || e.ctrlKey || e.altKey) return;
+ if (e.key === '/') {
+ e.preventDefault();
+ els.search.focus();
+ } else if (e.key === 'Escape') {
+ if (els.panel.classList.contains('open')) openSheet(false);
+ else if (state.selected && state.selected.parent) navigate(state.selected.parent);
+ }
+ });
+}
+
+async function init() {
+ applyTheme(store('roadmap-theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'));
+ let markdown;
+ const diagramRequest = loadMap();
+ const buildRequest = loadBuild();
+ try {
+ markdown = await loadMarkdown();
+ } catch {
+ els.status.replaceChildren('The roadmap could not be loaded. ',
+ h('a', { href: `${REPO_URL}#readme` }, 'Read it on GitHub instead'), '.');
+ return;
+ }
+ state.data = parseRoadmap(markdown);
+ assignHues(state.data);
+ const diagram = await diagramRequest;
+ state.build = await buildRequest;
+ if (diagram) {
+ state.plan = linkDiagram(diagram, state.data);
+ state.mapView = createMapView({
+ root: els.diagram,
+ plan: state.plan,
+ data: state.data,
+ build: state.build,
+ onSelect: (topic) => navigate(topic, { reveal: true }),
+ });
+ }
+ buildOutline();
+ buildIndex();
+ wireSearch();
+ wireGlobal();
+ els.status.hidden = true;
+ routeFromHash();
+ setView(store('roadmap-view') || 'map');
+}
+
+init();
diff --git a/site/assets/cc-by-sa.svg b/site/assets/cc-by-sa.svg
new file mode 100644
index 0000000..f850297
--- /dev/null
+++ b/site/assets/cc-by-sa.svg
@@ -0,0 +1,199 @@
+
+
+
diff --git a/site/assets/logo.svg b/site/assets/logo.svg
new file mode 100644
index 0000000..cefe34c
--- /dev/null
+++ b/site/assets/logo.svg
@@ -0,0 +1,10 @@
+
diff --git a/site/diagram.js b/site/diagram.js
new file mode 100644
index 0000000..63980b8
--- /dev/null
+++ b/site/diagram.js
@@ -0,0 +1,144 @@
+// Links the topics drawn on the map (map.json) to README topics, so every topic knows
+// which areas (Software, Hardware, Soft skills) it sits in and how important the map marks it.
+
+// Map labels whose README heading is worded differently.
+const ALIASES = {
+ 'ADC / DAC': ['ADC', 'DAC'],
+ 'Buildroot / Yocto': ['Buildroot', 'Yocto'],
+ 'TDD & Unit Testing': ['Test Driven Development (TDD)', 'Unit Testing'],
+ 'Threading / Parallelism': ['Multithreading & Parallel Processing'],
+ 'Device Drivers': ['Linux Device Drivers'],
+ 'Real-Time OS': ['Real-Time Operating Systems'],
+ 'Interfaces & Protocols': ['Interfaces, Protocols & Communication Technologies'],
+ Basic: ['Basic Protocols'],
+ 'High-Speed': ['High-Speed Protocols'],
+ Wireless: ['Wireless Protocols'],
+ Industrial: ['Industrial Protocols'],
+ Automotive: ['Automotive Protocols'],
+ Network: ['Network Protocols / Socket Programming'],
+ 'TCP/IP': ['Network Protocols / Socket Programming'],
+ UDP: ['Network Protocols / Socket Programming'],
+ Cellular: ['Cellular Communication'],
+ MQTT: ['CoAP & MQTT'],
+ CoAP: ['CoAP & MQTT'],
+ 'LTE-M / 5G': ['LTE-M & NB-IoT'],
+ 'NB-IoT': ['LTE-M & NB-IoT'],
+ 'Basic Math & Calculus': ['Basic Calculus'],
+ 'SDLC Models': ['Software Development Life Cycle (SDLC) Models'],
+ 'Version Control': ['Version Control Systems'],
+ AUTOSAR: ['AUTOSAR Architecture'],
+ // Drawn on the map but without their own README section: open the protocol family instead.
+ Profinet: ['Industrial Protocols'],
+ LIN: ['Automotive Protocols'],
+ MOST: ['Automotive Protocols'],
+ FlexRay: ['Automotive Protocols'],
+ UWB: ['Wireless Protocols'],
+};
+
+export const AREA_ORDER = ['SOFTWARE', 'HARDWARE', 'SOFT SKILLS'];
+export const IMPORTANCE_LEVELS = ['required', 'recommended', 'possible'];
+const RANK = { required: 3, recommended: 2, possible: 1 };
+
+const key = (text) => text.normalize('NFKC').toLowerCase().replace(/\s+/g, ' ').trim();
+
+function topicIndex(topics) {
+ const index = new Map();
+ const add = (k, topic) => {
+ if (k && !index.has(k)) index.set(k, topic);
+ };
+ const byDepth = [...topics].sort((a, b) => a.depth - b.depth);
+ for (const t of byDepth) add(key(t.title), t);
+ for (const t of byDepth) {
+ const base = t.title.replace(/\s*\([^)]*\)\s*/g, ' ').trim();
+ add(key(base), t);
+ const inner = t.title.match(/\(([^)]+)\)/);
+ if (inner && /^[A-Z0-9-]{2,6}$/.test(inner[1])) add(key(inner[1]), t);
+ add(key(base.split(' / ')[0]), t);
+ }
+ return index;
+}
+
+export function linkDiagram(map, data) {
+ const index = topicIndex(data.topics);
+ const softSkills = data.topics.find((t) => t.depth === 1 && key(t.title) === 'soft skills');
+ const resolve = (text, areas = []) => {
+ if (ALIASES[text]) return ALIASES[text].map((title) => index.get(key(title))).filter(Boolean);
+ const topic = index.get(key(text));
+ if (topic) return [topic];
+ if (softSkills && areas.includes('SOFT SKILLS')) return [softSkills];
+ return [];
+ };
+
+ // A cluster's areas are those of the band it sits in; a group's are the areas all its clusters share.
+ const clusterAreas = new Map();
+ const clusters = {};
+ const boxes = [];
+ for (const band of map.bands) {
+ for (const [cluster, spec] of Object.entries(band.clusters)) {
+ clusterAreas.set(cluster, band.areas);
+ clusters[cluster] = { header: spec.header, caption: spec.caption, per: spec.per };
+ if (spec.header) boxes.push({ text: spec.header, importance: null, areas: band.areas, cluster, header: true });
+ for (const [text, importance] of spec.topics) boxes.push({ text, importance, areas: band.areas, cluster, header: false });
+ }
+ }
+ boxes.forEach((b, i) => Object.assign(b, { id: `box-${i}`, topics: resolve(b.text, b.areas) }));
+ const regions = Object.entries(map.groups).map(([name, clusters]) => {
+ const areas = AREA_ORDER.filter((a) => clusters.every((c) => (clusterAreas.get(c) || []).includes(a)));
+ return { name, clusters, areas, topics: resolve(name) };
+ });
+
+ const boxOf = new Map();
+ for (const t of data.topics) {
+ t.areas = [];
+ t.importance = null;
+ t.boxes = [];
+ }
+ for (const box of boxes) {
+ for (const t of box.topics) {
+ t.boxes.push(box);
+ if (!boxOf.has(t)) boxOf.set(t, box);
+ for (const area of box.areas) if (!t.areas.includes(area)) t.areas.push(area);
+ if (box.importance && (!t.importance || RANK[box.importance] > RANK[t.importance])) t.importance = box.importance;
+ }
+ }
+ for (const region of regions) {
+ for (const t of region.topics) {
+ for (const area of region.areas) if (!t.areas.includes(area)) t.areas.push(area);
+ }
+ }
+ // Subtopics that are not drawn in the diagram inherit the areas of their closest drawn ancestor.
+ for (const t of data.topics) {
+ if (!t.areas.length) for (let p = t.parent; p && !t.areas.length; p = p.parent) t.areas = [...(p.areas || [])];
+ t.areas.sort((a, b) => AREA_ORDER.indexOf(a) - AREA_ORDER.indexOf(b));
+ }
+
+ // The box that stands for a topic on the map: its own, or the closest ancestor's.
+ const boxFor = (topic) => {
+ for (let t = topic; t; t = t.parent) if (boxOf.has(t)) return boxOf.get(t);
+ return null;
+ };
+
+ const pairs = new Map();
+ for (const link of data.links) {
+ const a = boxFor(link.source);
+ const b = boxFor(link.target);
+ if (!a || !b || a === b) continue;
+ const [p, q] = a.id < b.id ? [a, b] : [b, a];
+ const id = `${p.id}|${q.id}`;
+ if (!pairs.has(id)) pairs.set(id, { a: p, b: q, weight: 0, shared: 0, links: [] });
+ const pair = pairs.get(id);
+ pair.weight += link.weight;
+ pair.shared += link.shared.length;
+ pair.links.push(link);
+ }
+
+ return {
+ regions,
+ clusters,
+ boxes,
+ boxFor,
+ connections: [...pairs.values()],
+ unmatched: boxes.filter((b) => !b.header && !b.topics.length).map((b) => b.text),
+ invalid: boxes.filter((b) => !b.header && !IMPORTANCE_LEVELS.includes(b.importance)).map((b) => `${b.text}: ${b.importance}`),
+ };
+}
diff --git a/site/dom.js b/site/dom.js
new file mode 100644
index 0000000..86ce686
--- /dev/null
+++ b/site/dom.js
@@ -0,0 +1,57 @@
+// DOM helpers shared by the views.
+
+export const SVG_NS = 'http://www.w3.org/2000/svg';
+
+export const plural = (n, word) => `${n} ${word}${n === 1 ? '' : 's'}`;
+
+export const CREDITS = {
+ author: 'Meysam Parvizi',
+ authorUrl: 'https://github.com/m3y54m',
+ repo: 'github.com/m3y54m/Embedded-Engineering-Roadmap',
+ license: 'CC BY-SA 4.0',
+ licenseName: 'Creative Commons Attribution-ShareAlike 4.0 International License',
+ licenseUrl: 'https://creativecommons.org/licenses/by-sa/4.0/',
+};
+
+export const GITHUB_MARK = 'M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.01 8.01 0 0 0 16 8c0-4.42-3.58-8-8-8Z';
+
+export function h(tag, props = {}, ...children) {
+ const el = document.createElement(tag);
+ for (const [key, value] of Object.entries(props)) {
+ if (value == null || value === false) continue;
+ if (key === 'class') el.className = value;
+ else if (key.startsWith('on')) el.addEventListener(key.slice(2), value);
+ else el.setAttribute(key, value === true ? '' : value);
+ }
+ for (const child of children.flat(Infinity)) {
+ if (child == null || child === false || child === '') continue;
+ el.append(child instanceof Node ? child : document.createTextNode(String(child)));
+ }
+ return el;
+}
+
+export function svg(tag, attrs = {}, parent = null) {
+ const el = document.createElementNS(SVG_NS, tag);
+ for (const [key, value] of Object.entries(attrs)) if (value != null) el.setAttribute(key, value);
+ if (parent) parent.append(el);
+ return el;
+}
+
+export const AREAS = {
+ SOFTWARE: { label: 'Software', cls: 'sw' },
+ HARDWARE: { label: 'Hardware', cls: 'hw' },
+ 'SOFT SKILLS': { label: 'Soft skills', cls: 'ss' },
+};
+
+export const IMPORTANCE = {
+ required: 'Required',
+ recommended: 'Recommended',
+ possible: 'Possibility',
+};
+
+export const areaClass = (area) => (AREAS[area] ? AREAS[area].cls : 'xx');
+export const areaLabel = (areas) => areas.map((a) => (AREAS[a] ? AREAS[a].label : a)).join(' ∩ ');
+
+export function areaDots(areas) {
+ return h('span', { class: 'area-dots', 'aria-hidden': 'true' }, areas.map((a) => h('i', { class: `dot ${areaClass(a)}` })));
+}
diff --git a/site/fonts/OFL.txt b/site/fonts/OFL.txt
new file mode 100644
index 0000000..26ff1f5
--- /dev/null
+++ b/site/fonts/OFL.txt
@@ -0,0 +1,93 @@
+Copyright 2019 The Sofia Sans Project Authors (https://github.com/lettersoup/Sofia-Sans)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+https://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.
diff --git a/site/fonts/SofiaSansSemiCondensed.woff2 b/site/fonts/SofiaSansSemiCondensed.woff2
new file mode 100644
index 0000000..d4c51c9
Binary files /dev/null and b/site/fonts/SofiaSansSemiCondensed.woff2 differ
diff --git a/site/index.html b/site/index.html
new file mode 100644
index 0000000..affd77d
--- /dev/null
+++ b/site/index.html
@@ -0,0 +1,64 @@
+
+
+
+
+
+
+ Embedded Engineering Roadmap · Explorer
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Loading roadmap…
+
+
+
+
+
+
+
+ Embedded Engineering Roadmap
+ Interactive explorer
+
+
+
+