Annoncer sur l'accueil ce que le wiki vient de publier
Entre l'agenda et les services, une section « Le wiki, fraîchement mis à jour » liste les six dernières pages créées ou modifiées, datées en clair — « hier », « il y a 3 jours », « le 14 septembre » — avec une pastille « Nouveau » pour les pages récentes. Les données viennent de https://wiki.alpinux.org/derniers-articles.json, écrit à chaque build du wiki (dépôt alpinux-wiki, branche accueil-derniers-articles). Un article simplement déplacé n'y figure pas : seules les modifications de contenu comptent. Si le wiki est injoignable, la section reste masquée et le reste de la page ne bouge pas. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01Ae3qPEPRrNkEY5LwcTTKc1
This commit is contained in:
Cédrix
parent
ef644001d2
commit
676646f612
1 changed files with 142 additions and 0 deletions
142
home/index.html
142
home/index.html
|
|
@ -486,6 +486,72 @@
|
|||
opacity: .6;
|
||||
}
|
||||
|
||||
/* ── Wiki : dernières mises à jour ──────────────────────────── */
|
||||
#wiki-section { margin-bottom: 3rem; }
|
||||
|
||||
.wiki-list {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.wiki-card {
|
||||
background: #fff;
|
||||
border-radius: 10px;
|
||||
padding: 1.1rem 1.3rem;
|
||||
box-shadow: 0 2px 10px rgba(26,107,191,.08);
|
||||
border-left: 4px solid #9fc5e8;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
position: relative;
|
||||
transition: transform .15s, box-shadow .15s;
|
||||
}
|
||||
|
||||
.wiki-card:hover {
|
||||
transform: translateY(-3px);
|
||||
box-shadow: 0 6px 20px rgba(26,107,191,.18);
|
||||
}
|
||||
|
||||
.wiki-card:hover .wiki-title { color: #1a6bbf; }
|
||||
|
||||
.wiki-when {
|
||||
font-size: .78rem;
|
||||
font-weight: 700;
|
||||
color: #7a8ba0;
|
||||
letter-spacing: .06em;
|
||||
text-transform: uppercase;
|
||||
margin-bottom: .3rem;
|
||||
}
|
||||
|
||||
.wiki-title {
|
||||
font-size: 1rem;
|
||||
font-weight: 600;
|
||||
line-height: 1.35;
|
||||
padding-right: 4.2rem;
|
||||
}
|
||||
|
||||
.wiki-badge {
|
||||
position: absolute;
|
||||
top: .7rem; right: .7rem;
|
||||
background: #f5a623;
|
||||
color: #fff;
|
||||
font-size: .68rem;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: .06em;
|
||||
padding: .15rem .5rem;
|
||||
border-radius: 3px;
|
||||
}
|
||||
|
||||
.wiki-more {
|
||||
margin-top: 1rem;
|
||||
font-size: .88rem;
|
||||
}
|
||||
|
||||
.wiki-more a { color: #1a6bbf; text-decoration: none; }
|
||||
.wiki-more a:hover { text-decoration: underline; }
|
||||
|
||||
/* ── Services ───────────────────────────────────────────────── */
|
||||
.services {
|
||||
display: grid;
|
||||
|
|
@ -624,6 +690,14 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<section id="wiki-section" hidden>
|
||||
<h2 class="section-title">Le wiki, fraîchement mis à jour</h2>
|
||||
<div class="wiki-list" id="wiki-list"></div>
|
||||
<p class="wiki-more">
|
||||
<a href="https://wiki.alpinux.org">Parcourir tout le wiki →</a>
|
||||
</p>
|
||||
</section>
|
||||
|
||||
<h2 class="section-title">Nos services</h2>
|
||||
<div class="services">
|
||||
<a href="https://wiki.alpinux.org" class="service-card">
|
||||
|
|
@ -1083,5 +1157,73 @@
|
|||
document.addEventListener('DOMContentLoaded', load);
|
||||
})();
|
||||
</script>
|
||||
|
||||
<!-- ── Wiki : dernières pages créées ou modifiées ───────────────────── -->
|
||||
<script>
|
||||
(function () {
|
||||
var URL_JSON = 'https://wiki.alpinux.org/derniers-articles.json';
|
||||
var NB_MAX = 6; /* articles affichés sur l'accueil */
|
||||
|
||||
/* Le wiki date ses pages avec l'horodatage du commit qui a touché leur contenu :
|
||||
un article déplacé ou renommé n'apparaît donc pas ici. */
|
||||
|
||||
function echappe(texte) {
|
||||
var d = document.createElement('div');
|
||||
d.textContent = texte;
|
||||
return d.innerHTML;
|
||||
}
|
||||
|
||||
function quand(iso) {
|
||||
var d = new Date(iso);
|
||||
if (isNaN(d)) return '';
|
||||
var jour = new Date(d.getFullYear(), d.getMonth(), d.getDate());
|
||||
var auj = new Date();
|
||||
auj.setHours(0, 0, 0, 0);
|
||||
var jours = Math.round((auj - jour) / 86400000);
|
||||
|
||||
if (jours <= 0) return "aujourd'hui";
|
||||
if (jours === 1) return 'hier';
|
||||
if (jours < 7) return 'il y a ' + jours + ' jours';
|
||||
if (jours < 14) return 'la semaine dernière';
|
||||
|
||||
var opts = { day: 'numeric', month: 'long' };
|
||||
if (d.getFullYear() !== auj.getFullYear()) opts.year = 'numeric';
|
||||
return 'le ' + d.toLocaleDateString('fr-FR', opts);
|
||||
}
|
||||
|
||||
function carte(article) {
|
||||
var a = document.createElement('a');
|
||||
a.className = 'wiki-card';
|
||||
a.href = article.url;
|
||||
a.innerHTML =
|
||||
(article.nouveau ? '<span class="wiki-badge">Nouveau</span>' : '') +
|
||||
'<div class="wiki-when">' +
|
||||
(article.nouveau ? 'publié ' : 'mis à jour ') + echappe(quand(article.date)) +
|
||||
'</div>' +
|
||||
'<div class="wiki-title">' + echappe(article.titre) + '</div>';
|
||||
return a;
|
||||
}
|
||||
|
||||
async function charger() {
|
||||
var articles;
|
||||
try {
|
||||
var r = await fetch(URL_JSON, { cache: 'no-cache' });
|
||||
if (!r.ok) return;
|
||||
articles = (await r.json()).articles;
|
||||
} catch (_) { return; } /* wiki injoignable : la section reste masquée */
|
||||
|
||||
if (!Array.isArray(articles) || !articles.length) return;
|
||||
|
||||
var liste = document.getElementById('wiki-list');
|
||||
articles.slice(0, NB_MAX).forEach(function (article) {
|
||||
if (article && article.url && article.titre) liste.appendChild(carte(article));
|
||||
});
|
||||
|
||||
if (liste.children.length) document.getElementById('wiki-section').hidden = false;
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', charger);
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue