Max/m3y54m_Embedded-Engineering-Roadmap
1
0
Fork 0
mirror of https://github.com/m3y54m/Embedded-Engineering-Roadmap.git synced 2026-10-10 08:18:16 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(site): add PDF and PNG download buttons for the rendered roadmap

Browse Source 
Shown only when the CI-rendered files exist next to the site; on phones they replace the Print button.
This commit is contained in:
Meysam Parvizi
2026-10-10 01:15:05 +02:00
committed by Meysam
parent c9bc31d3fc
commit cc34538ad2
3 changed files with 38 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/app.js
+5
View File
@@ -599,6 +599,11 @@ function wireGlobal() {
});
for (const tab of els.tabs) tab.addEventListener('click', () => setView(tab.dataset.view));
document.getElementById('print').addEventListener('click', () => window.print());
// The PDF and PNG are rendered by CI next to the deployed site; local previews don't have them.
for (const link of document.querySelectorAll('[data-download]')) {
fetch(link.getAttribute('href'), { method: 'HEAD', cache: 'no-cache' })
.then((response) => { link.hidden = !response.ok; }, () => {});
}
// Printing always produces the diagram, whatever view is open.
let viewBeforePrint = null;
window.addEventListener('beforeprint', () => {
site/index.html
+6
View File
@@ -38,6 +38,12 @@
<button type="button" id="print" class="icon-btn" aria-label="Print or save the roadmap as PDF" title="Print or save as PDF (A4)">
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M7 9V3h10v6M7 17H5a2 2 0 0 1-2-2v-4a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2v4a2 2 0 0 1-2 2h-2M7 14h10v7H7z" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
</button>
<a class="icon-btn text-btn" href="Embedded-Engineering-Roadmap.pdf" download data-download hidden title="Download the roadmap as PDF (A4)">
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M12 4v11m0 0-4.5-4.5M12 15l4.5-4.5M5 19h14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>PDF
</a>
<a class="icon-btn text-btn" href="Embedded-Engineering-Roadmap.png" download data-download hidden title="Download the roadmap as PNG image">
<svg viewBox="0 0 24 24" width="16" height="16" aria-hidden="true"><path d="M12 4v11m0 0-4.5-4.5M12 15l4.5-4.5M5 19h14" fill="none" stroke="currentColor" stroke-width="1.9" stroke-linecap="round" stroke-linejoin="round"/></svg>PNG
</a>
<button type="button" id="theme" class="icon-btn" aria-label="Switch color theme" title="Switch color theme">
<svg viewBox="0 0 24 24" width="18" height="18" aria-hidden="true"><path d="M12 3a9 9 0 1 0 9 9A7 7 0 0 1 12 3Z" fill="currentColor"/></svg>
</button>
site/styles.css
+27
View File
@@ -351,6 +351,16 @@ button {
background: var(--chip-hover);
}
.text-btn {
width: auto;
grid-auto-flow: column;
gap: 6px;
padding: 0 11px;
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
/* Layout */
.layout {
@@ -1109,6 +1119,23 @@ button {
.brand-text {
display: none;
}
.actions {
gap: 6px;
}
/* Phones get the PDF download instead of printing. */
#print {
display: none;
}
.text-btn {
padding: 0 9px;
}
.text-btn svg {
display: none;
}
}
@media (prefers-reduced-motion: reduce) {