From cc34538ad2ba549f3604a2fce579e599afd51c21 Mon Sep 17 00:00:00 2001
From: Meysam Parvizi <meysam.parvizi.ir@gmail.com>
Date: Sat, 10 Oct 2026 01:09:15 +0200
Subject: [PATCH] feat(site): add PDF and PNG download buttons for the rendered
 roadmap

Shown only when the CI-rendered files exist next to the site; on phones they replace the Print button.
---
 site/app.js     |  5 +++++
 site/index.html |  6 ++++++
 site/styles.css | 27 +++++++++++++++++++++++++++
 3 files changed, 38 insertions(+)

diff --git a/site/app.js b/site/app.js
index 8bd03f5..149a017 100644
--- a/site/app.js
+++ b/site/app.js
@@ -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', () => {
diff --git a/site/index.html b/site/index.html
index affd77d..24a61bf 100644
--- a/site/index.html
+++ b/site/index.html
@@ -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>
diff --git a/site/styles.css b/site/styles.css
index bc65a48..77da515 100644
--- a/site/styles.css
+++ b/site/styles.css
@@ -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) {