feat(dl): charger les releases GitHub pour les downloads

p/assets/js/downloads.js

@@ -1,249 +1,116 @@
-document.addEventListener("DOMContentLoaded", () => {
+(() => {
-  const cards = Array.from(document.querySelectorAll(".download-card"));
+  const OWNER = "You-re-like-Windows-a-bitch";
-  const currentVersionLabel = document.querySelector("[data-current-version]");
+  const REPO = "ISO";
-  const archiveToggle = document.querySelector("[data-action-toggle-archive]");
+  const API_URL = `https://api.github.com/repos/${OWNER}/${REPO}/releases?per_page=6`;
-  const versionsArchive = document.querySelector("[data-versions-archive]");
+  const REPO_URL = `https://github.com/${OWNER}/${REPO}`;
+
+  const currentVersionNode = document.querySelector("[data-current-version]");
+  const currentVersionDateNode = document.querySelector("[data-current-version-date]");
+  const currentReleaseNoteNode = document.querySelector("[data-current-release-note]");
+  const latestDownloadNode = document.querySelector("[data-latest-download]");
   const versionsListNode = document.querySelector("[data-versions-list]");
-  const actionAdd = document.querySelector("[data-action-add]");
-  const actionEdit = document.querySelector("[data-action-edit]");
 
-  const VERSIONS_KEY = "fws:versions";
+  function formatDate(value) {
-
+    if (!value) return "";
-  const defaultVersions = [
+    const date = new Date(value);
-    { label: "1.0.2", url: "https://download.example.org/fws-1.0.2.iso", date: "2026-05-10" },
+    if (Number.isNaN(date.getTime())) return "";
-    { label: "1.0.1", url: "https://download.example.org/fws-1.0.1.iso", date: "2026-03-22" },
+    return date.toLocaleDateString("fr-FR", {
-    { label: "0.9.8", url: "https://download.example.org/fws-0.9.8.iso", date: "2025-12-05" },
+      year: "numeric",
-  ];
+      month: "long",
-
+      day: "numeric",
-  function loadVersions() {
+    });
-    try {
-      const raw = localStorage.getItem(VERSIONS_KEY);
-      if (!raw) return defaultVersions.slice();
-      const parsed = JSON.parse(raw);
-      if (!Array.isArray(parsed) || !parsed.length) return defaultVersions.slice();
-      return parsed;
-    } catch (e) {
-      return defaultVersions.slice();
-    }
   }
 
-  function saveVersions(list) {
+  function getDirectDownloadUrl(release) {
-    localStorage.setItem(VERSIONS_KEY, JSON.stringify(list));
+    if (release?.assets?.length) {
+      return release.assets[0].browser_download_url || release.assets[0].url || release.html_url || "#";
+    }
+    return release?.html_url || "#";
   }
 
-  let versions = loadVersions();
+  function getReleaseLabel(release) {
-  let currentVersion = versions[0];
+    return release.name || release.tag_name || "Sans nom";
-
-  function renderVersionsBar() {
-    if (currentVersionLabel) {
-      currentVersionLabel.textContent = `${currentVersion.label} ${currentVersion.date ? '— ' + currentVersion.date : ''}`.trim();
-    }
-    // update prominent latest download button
-    const latestBtn = document.querySelector('[data-latest-download]');
-    if (latestBtn) {
-      latestBtn.href = currentVersion.url || '#';
-    }
   }
 
-  function renderArchive() {
+  function renderReleaseList(releases) {
     if (!versionsListNode) return;
     versionsListNode.innerHTML = "";
-    versions.forEach((v, idx) => {
+
+    releases.slice(1, 6).forEach((release) => {
       const li = document.createElement("li");
       li.className = "version-item";
+
+      const versionLabel = getReleaseLabel(release);
+      const downloadUrl = getDirectDownloadUrl(release);
+      const published = formatDate(release.published_at);
+
       li.innerHTML = `
-        <strong>${v.label}</strong> <span class="version-meta">${v.date || ''}</span>
+        <div class="version-main">
-        <div class="version-actions">
+          <strong>${versionLabel}</strong>
-          <a class="button" href="${v.url}" target="_blank">Télécharger</a>
+          <span>${published ? `Publié le ${published}` : "Date inconnue"}</span>
-          <button class="button button-secondary copy-version" data-idx="${idx}">Copier</button>
+        </div>
-          <button class="button button-secondary make-latest" data-idx="${idx}">Faire dernière</button>
+        <div class="version-side">
-          <button class="button button-secondary edit-version" data-idx="${idx}">Modifier</button>
+          <a class="button button-secondary" href="${downloadUrl}" target="_blank" rel="noreferrer">Télécharger</a>
         </div>
       `;
+
       versionsListNode.appendChild(li);
     });
   }
 
-  function setCurrentToIndex(idx) {
+  async function loadReleases() {
-    const v = versions[idx];
+    if (currentVersionNode) currentVersionNode.textContent = "Chargement...";
-    if (!v) return;
-    versions.splice(idx, 1);
-    versions.unshift(v);
-    currentVersion = versions[0];
-    saveVersions(versions);
-    renderVersionsBar();
-    renderArchive();
-    applyLinksToCards();
-  }
 
-  function applyLinksToCards() {
-    cards.forEach((card) => {
-      const key = `fws:download:${card.dataset.key}`;
-      const btn = card.querySelector(".download-btn");
-      const copyBtn = card.querySelector(".copy-btn");
-      const stored = localStorage.getItem(key);
-      const finalUrl = stored || (currentVersion && currentVersion.url) || "#";
-      if (btn) btn.href = finalUrl;
-      if (btn) btn.dataset.link = finalUrl;
-      if (copyBtn) copyBtn.dataset.link = finalUrl;
-    });
-  }
-
-  function toast(message) {
-    const t = document.createElement("div");
-    t.className = "dl-toast";
-    t.textContent = message;
-    Object.assign(t.style, {
-      position: "fixed",
-      right: "1rem",
-      bottom: "1rem",
-      background: "rgba(2,6,23,0.9)",
-      color: "#fff",
-      padding: "0.6rem 0.9rem",
-      borderRadius: "6px",
-      boxShadow: "0 6px 20px rgba(2,6,23,0.5)",
-      zIndex: 9999,
-    });
-    document.body.appendChild(t);
-    setTimeout(() => t.remove(), 2200);
-  }
-
-  cards.forEach((card) => {
-    const key = `fws:download:${card.dataset.key}`;
-    const btn = card.querySelector(".download-btn");
-    const copyBtn = card.querySelector(".copy-btn");
-    const editBtn = card.querySelector(".edit-btn");
-
-    function setLink(url) {
-      if (!url) url = "#";
-      btn.href = url;
-      btn.dataset.link = url;
-      copyBtn.dataset.link = url;
-      localStorage.setItem(key, url);
-    }
-
-    const stored = localStorage.getItem(key);
-    if (stored) {
-      setLink(stored);
-    } else {
-      // apply global current version by default
-      if (currentVersion && currentVersion.url) {
-        setLink(currentVersion.url);
-      }
-    }
-
-    editBtn.addEventListener("click", () => {
-      const current = localStorage.getItem(key) || (currentVersion && currentVersion.url) || "";
-      const value = window.prompt("Collez l'URL de téléchargement pour ce fichier:", current);
-      if (value === null) return;
-      const trimmed = value.trim();
-      setLink(trimmed);
-      toast("Lien enregistré");
-    });
-
-    copyBtn.addEventListener("click", async () => {
-      const link = copyBtn.dataset.link || btn.href || "";
-      if (!link || link === "#") {
-        toast("Aucun lien défini — utilisez 'Modifier le lien'");
-        return;
-      }
     try {
-        await navigator.clipboard.writeText(link);
+      const response = await fetch(API_URL, {
-        toast("Lien copié dans le presse-papiers");
+        headers: {
-      } catch (e) {
+          Accept: "application/vnd.github+json",
-        window.prompt("Copiez manuellement ce lien:", link);
+        },
-      }
       });
 
-    btn.addEventListener("click", (ev) => {
+      if (!response.ok) {
-      const href = btn.getAttribute("href") || "";
+        throw new Error(`GitHub API ${response.status}`);
-      if (!href || href === "#") {
-        ev.preventDefault();
-        toast("Aucun lien configuré — cliquez sur 'Modifier le lien' pour en ajouter un");
-      }
-    });
-  });
-
-  // render versions UI
-  function toggleArchive() {
-    const expanded = archiveToggle.getAttribute("aria-expanded") === "true";
-    archiveToggle.setAttribute("aria-expanded", String(!expanded));
-    if (versionsArchive) versionsArchive.hidden = expanded;
       }
 
-  if (archiveToggle) {
+      const releases = await response.json();
-    archiveToggle.addEventListener("click", () => {
+      if (!Array.isArray(releases) || releases.length === 0) {
-      toggleArchive();
+        throw new Error("Aucune release trouvée");
-    });
       }
 
-  if (actionAdd) {
+      const latest = releases[0];
-    actionAdd.addEventListener("click", () => {
+      const latestLabel = getReleaseLabel(latest);
-      const label = window.prompt("Nom de la version (ex: 1.0.3):", "");
+      const latestDownloadUrl = getDirectDownloadUrl(latest);
-      if (!label) return;
+      const latestDate = formatDate(latest.published_at);
-      const url = window.prompt("URL de téléchargement pour cette version:", "");
-      if (!url) return;
-      const date = new Date().toISOString().slice(0, 10);
-      versions.unshift({ label: label.trim(), url: url.trim(), date });
-      saveVersions(versions);
-      currentVersion = versions[0];
-      renderVersionsBar();
-      renderArchive();
-      applyLinksToCards();
-      toast("Version ajoutée");
-    });
-  }
 
-  if (actionEdit) {
+      if (currentVersionNode) currentVersionNode.textContent = latestLabel;
-    actionEdit.addEventListener("click", () => {
+      if (currentVersionDateNode) currentVersionDateNode.textContent = latestDate ? ` · ${latestDate}` : "";
-      const url = window.prompt("Nouvelle URL pour la version actuelle:", currentVersion.url || "");
+      if (currentReleaseNoteNode) currentReleaseNoteNode.textContent = latest.body || "Release GitHub la plus récente.";
-      if (url === null) return;
+      if (latestDownloadNode) latestDownloadNode.href = latestDownloadUrl;
-      currentVersion.url = url.trim();
-      versions[0] = currentVersion;
-      saveVersions(versions);
-      renderVersionsBar();
-      applyLinksToCards();
-      toast("Version mise à jour");
-    });
-  }
 
-  // delegated events for archive list
+      renderReleaseList(releases);
+    } catch (error) {
+      if (currentVersionNode) currentVersionNode.textContent = "Impossible de charger les releases";
+      if (currentReleaseNoteNode) {
+        currentReleaseNoteNode.textContent = `Erreur: ${error.message}. Vérifie que le repo GitHub est public et qu'il expose des releases.`;
+      }
+      if (latestDownloadNode) {
+        latestDownloadNode.href = REPO_URL;
+      }
       if (versionsListNode) {
-    versionsListNode.addEventListener("click", (ev) => {
+        versionsListNode.innerHTML = `
-      const copyBtn = ev.target.closest(".copy-version");
+          <li class="version-item version-item-empty">
-      const makeBtn = ev.target.closest(".make-latest");
+            <div class="version-main">
-      const editBtn = ev.target.closest(".edit-version");
+              <strong>Impossible de charger les anciennes versions</strong>
-      if (copyBtn) {
+              <span>Ouvre le repo GitHub pour voir les releases.</span>
-        const idx = Number(copyBtn.dataset.idx);
+            </div>
-        const v = versions[idx];
+            <div class="version-side">
-        if (v && v.url) {
+              <a class="button button-secondary" href="${REPO_URL}" target="_blank" rel="noreferrer">Voir le repo</a>
-          navigator.clipboard.writeText(v.url).then(() => toast("Lien copié"), () => window.prompt("Copiez le lien:", v.url));
+            </div>
+          </li>
+        `;
       }
-        return;
     }
-      if (makeBtn) {
-        const idx = Number(makeBtn.dataset.idx);
-        setCurrentToIndex(idx);
-        toast("Version définie comme dernière");
-        return;
-      }
-      if (editBtn) {
-        const idx = Number(editBtn.dataset.idx);
-        const v = versions[idx];
-        if (!v) return;
-        const newUrl = window.prompt(`Nouvelle URL pour ${v.label}:`, v.url || "");
-        if (newUrl === null) return;
-        v.url = newUrl.trim();
-        versions[idx] = v;
-        saveVersions(versions);
-        renderArchive();
-        applyLinksToCards();
-        toast("Version modifiée");
-      }
-    });
   }
 
-  renderVersionsBar();
+  loadReleases();
-  renderArchive();
+})();
-  applyLinksToCards();
-});

p/assets/styles/main.css

@@ -1,16 +1,22 @@
-.versions-panel { margin-top: 1rem; padding: 0.9rem; border-radius: 0.75rem; background: rgba(255,255,255,0.02); border: 1px solid rgba(148,163,184,0.04); }
+.versions-panel { margin-top: 1rem; padding: 1rem; border-radius: 1rem; background: rgba(255,255,255,0.03); border: 1px solid rgba(148,163,184,0.08); }
 .latest-version h2 { margin: 0 0 0.35rem; }
 .latest-row { display:flex; justify-content: space-between; align-items:center; gap:1rem; }
-.latest-meta { color: var(--muted); }
+.latest-meta { color: var(--muted); font-size: 1.05rem; }
-.latest-actions { display:flex; gap:0.6rem; }
+.latest-actions { display:flex; gap:0.6rem; flex-wrap: wrap; }
+.latest-note { margin: 0.85rem 0 0; color: var(--muted); line-height: 1.6; }
 
-.versions-archive { margin-top: 0.8rem; }
+.versions-archive { margin-top: 1rem; }
-.versions-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:0.6rem; }
+.versions-list { list-style:none; margin:0; padding:0; display:grid; gap:0.75rem; }
-.version-item { display:flex; justify-content:space-between; align-items:center; padding:0.45rem 0.6rem; border-radius:0.45rem; background: rgba(2,6,23,0.02); }
+.version-item { display:flex; justify-content:space-between; align-items:center; gap:1rem; padding:0.8rem 0.9rem; border-radius:0.8rem; background: rgba(2,6,23,0.24); border: 1px solid rgba(148,163,184,0.08); }
-.version-item .version-actions { display:flex; gap:0.4rem; }
+.version-item-empty { opacity: 0.8; }
+.version-main { display:flex; flex-direction:column; gap:0.2rem; }
+.version-main a { color: #7dd3fc; text-decoration: none; width: fit-content; }
+.version-main a:hover { text-decoration: underline; }
+.version-side { display:flex; gap:0.5rem; flex-wrap: wrap; }
 
 @media (max-width: 880px) {
-  .latest-row { flex-direction: column; align-items: flex-start; gap:0.5rem; }
+  .latest-row, .version-item { flex-direction: column; align-items: flex-start; }
+  .version-side { width: 100%; }
 }
 
 @import "./var.css";

p/dl/index.html

@@ -11,96 +11,30 @@
       <section class="downloads">
         <header class="downloads-header">
           <h1>Téléchargements</h1>
-          <p>Choisissez votre image et collez le lien de téléchargement (ou utilisez ceux fournis). Les liens sont sauvegardés localement pour faciliter la gestion.</p>
+          <p>Dernière release GitHub en haut, les 5 précédentes dessous, avec un lien direct sur le premier fichier de chaque release.</p>
-
           <div class="versions-panel">
             <div class="latest-version">
               <h2>Dernière version</h2>
               <div class="latest-row">
-                <div class="latest-meta">Version <strong data-current-version>—</strong></div>
+                <div class="latest-meta">
+                  <strong data-current-version>Chargement...</strong>
+                  <span data-current-version-date></span>
+                </div>
                 <div class="latest-actions">
-                  <a class="button" data-latest-download href="#" target="_blank">Télécharger la dernière</a>
+                  <a class="button" data-latest-download href="#" target="_blank" rel="noreferrer">Télécharger</a>
-                  <button class="button button-secondary" data-action-edit>Modifier la version actuelle</button>
+                  <a class="button button-secondary" data-view-more href="https://github.com/You-re-like-Windows-a-bitch/ISO" target="_blank" rel="noreferrer">Voir plus</a>
                 </div>
               </div>
+              <p class="latest-note" data-current-release-note></p>
             </div>
 
-            <div class="versions-archive" data-versions-archive>
+            <div class="versions-archive">
-              <h3>Versions précédentes</h3>
+              <h3>5 versions précédentes</h3>
               <ul class="versions-list" data-versions-list></ul>
             </div>
-            <div class="version-admin">
-              <button class="button button-secondary" data-action-add>Ajouter une version</button>
-            </div>
           </div>
         </header>
 
-        <div class="download-grid">
-          <article class="download-card" data-key="cli">
-            <figure class="download-media"><img src="/p/assets/img/hero/install.png" alt="CLI"/></figure>
-            <div class="download-body">
-              <h3>CLI (Minimal)</h3>
-              <p>Image minimale sans environnement graphique, pour les installations serveur ou avancées.</p>
-              <div class="download-actions">
-                <a class="button download-btn" href="#" target="_blank">Télécharger</a>
-                <button class="button button-secondary copy-btn">Copier le lien</button>
-                <button class="button button-secondary edit-btn">Modifier le lien</button>
-              </div>
-            </div>
-          </article>
-
-          <article class="download-card" data-key="kde">
-            <figure class="download-media"><img src="/p/assets/img/hero/KDE.png" alt="KDE Plasma"/></figure>
-            <div class="download-body">
-              <h3>KDE Plasma</h3>
-              <p>Environnement complet, riche en fonctionnalités et personnalisable.</p>
-              <div class="download-actions">
-                <a class="button download-btn" href="#" target="_blank">Télécharger</a>
-                <button class="button button-secondary copy-btn">Copier le lien</button>
-                <button class="button button-secondary edit-btn">Modifier le lien</button>
-              </div>
-            </div>
-          </article>
-
-          <article class="download-card" data-key="gnome">
-            <figure class="download-media"><img src="/p/assets/img/hero/gnome.png" alt="GNOME"/></figure>
-            <div class="download-body">
-              <h3>GNOME</h3>
-              <p>Expérience épurée et orientée productivité, simple à prendre en main.</p>
-              <div class="download-actions">
-                <a class="button download-btn" href="#" target="_blank">Télécharger</a>
-                <button class="button button-secondary copy-btn">Copier le lien</button>
-                <button class="button button-secondary edit-btn">Modifier le lien</button>
-              </div>
-            </div>
-          </article>
-
-          <article class="download-card" data-key="xfce">
-            <figure class="download-media"><img src="/p/assets/img/hero/xfce.png" alt="XFCE"/></figure>
-            <div class="download-body">
-              <h3>XFCE</h3>
-              <p>Environnement léger et stable, adapté aux machines modestes.</p>
-              <div class="download-actions">
-                <a class="button download-btn" href="#" target="_blank">Télécharger</a>
-                <button class="button button-secondary copy-btn">Copier le lien</button>
-                <button class="button button-secondary edit-btn">Modifier le lien</button>
-              </div>
-            </div>
-          </article>
-
-          <article class="download-card" data-key="hyprland">
-            <figure class="download-media"><img src="/p/assets/img/hero/hyprland.png" alt="Hyprland"/></figure>
-            <div class="download-body">
-              <h3>Hyprland</h3>
-              <p>Tiling Wayland moderne, pensé pour les workflows clavier avancés.</p>
-              <div class="download-actions">
-                <a class="button download-btn" href="#" target="_blank">Télécharger</a>
-                <button class="button button-secondary copy-btn">Copier le lien</button>
-                <button class="button button-secondary edit-btn">Modifier le lien</button>
-              </div>
-            </div>
-          </article>
-        </div>
       </section>
     </main>