--- import MainLayout from "../../layouts/MainLayout.astro"; import{getCollection}from "astro:content"; import FormattedDate from "../../components/FormattedDate.astro"; const posts = (await getCollection("blog")).sort((a,b) => b.data.pubDate.valueOf() - a.data.pubDate.valueOf(),); const featured = posts[0]; const rest = posts.slice(1); --- <MainLayout title="Blog — Arnaud Borderiou"> <div class="blog-page"> <section class="hero"> <p class="eyebrow">Archives</p> <h1>Blog</h1> <p class="intro"> Notes,réflexions et articles autour de la tech,du marketing et du numérique. </p> </section> <div class="filters"> <button class="filter-btn active" data-filter="tous">Tous</button> <button class="filter-btn" data-filter="tech">Tech</button> <button class="filter-btn" data-filter="voyage">Voyage</button> <button class="filter-btn" data-filter="marketing">Marketing</button> </div>{featured && (<a href={`/blog/${featured.id}/`} class="featured-card" data-category={featured.data.category?.toLowerCase() ?? ""} > <div class="featured-img"> {featured.data.heroImage ? <img src={featured.data.heroImage} alt={featured.data.title} /> : <div class="img-placeholder"></div>} {featured.data.category && (<span class={`badge badge-${featured.data.category.toLowerCase()}`}> {featured.data.category} </span>)} </div> <div class="featured-content"> <span class="post-date"><FormattedDate date={featured.data.pubDate} /></span> <h2>{featured.data.title}</h2> {featured.data.description && <p>{featured.data.description}</p>} <span class="read-more-link">Lire la suite →</span> </div> </a>)}<ul class="post-grid">{rest.map((post) => (<li class="post-card" data-category={post.data.category?.toLowerCase() ?? ""}> <a href={`/blog/${post.id}/`}> <div class="card-img"> {post.data.heroImage ? <img src={post.data.heroImage} alt={post.data.title} /> : <div class="img-placeholder"></div>} {post.data.category && (<span class={`badge badge-${post.data.category.toLowerCase()}`}> {post.data.category} </span>)} </div> <div class="card-body"> <p class="post-date"><FormattedDate date={post.data.pubDate} /></p> <h3 class="post-title">{post.data.title}</h3> {post.data.description && (<p class="post-description">{post.data.description}</p>)} <span class="read-more-link">Lire la suite →</span> </div> </a> </li>))}</ul> </div> </MainLayout> <style> .blog-page{font-family:"Source Sans 3",system-ui,sans-serif}.blog-page .hero{padding:2rem 0 1.5rem}.blog-page .eyebrow{font-size:.75rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:#e8572a;margin:0 0 .5rem;font-family:"Source Sans 3",system-ui,sans-serif}.blog-page .hero h1{font-size:2.5rem;font-weight:500;color:#1a3a4a;line-height:1.1;margin:0 0 .5rem;font-family:"Source Sans 3",system-ui,sans-serif}.blog-page .intro{font-size:1rem;color:#7a6b54;margin:0}.blog-page .filters{display:flex;gap:8px;flex-wrap:wrap;margin:1.5rem 0 2rem}.blog-page .filter-btn{padding:6px 18px;border-radius:20px;font-size:.85rem;border:1px solid #c9bfa8;background:transparent;color:#4a3c28;cursor:pointer;font-family:"Source Sans 3",system-ui,sans-serif;transition:background .15s,color .15s,border-color .15s}.blog-page .filter-btn.active{background:#1a3a4a;color:#f5f0e8;border-color:#1a3a4a}.blog-page .featured-card{display:grid;grid-template-columns:1fr 1fr;border-radius:14px;overflow:hidden;background:#fff;border:.5px solid #ddd5c5;margin-bottom:1.5rem;text-decoration:none!important;color:inherit!important;transition:border-color .2s}.blog-page .featured-card:hover{border-color:#e8572a;text-decoration:none!important}.blog-page .featured-img{position:relative;min-height:280px;background:#1a3a4a;overflow:hidden}.blog-page .featured-img img{width:100%;height:100%;object-fit:cover;display:block}.blog-page .img-placeholder{width:100%;height:100%;min-height:280px;background:#1a3a4a}.blog-page .featured-content{padding:2rem;display:flex;flex-direction:column;justify-content:center;gap:12px}.blog-page .featured-content h2{font-size:1.4rem;font-weight:500;color:#1a3a4a;line-height:1.3;margin:0;font-family:"Source Sans 3",system-ui,sans-serif}.blog-page .featured-content p{font-size:.9rem;color:#5a4e3c;line-height:1.6;margin:0}.blog-page .post-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1.25rem}.blog-page .post-card{border-radius:14px;overflow:hidden;background:#fff;border:.5px solid #ddd5c5;transition:border-color .2s}.blog-page .post-card:hover{border-color:#e8572a}.blog-page .post-card a{display:block;text-decoration:none!important;color:inherit!important}.blog-page .post-card a:hover{text-decoration:none!important}.blog-page .card-img{position:relative;height:180px;background:#c9bfa8;overflow:hidden}.blog-page .card-img img{width:100%;height:100%;object-fit:cover;display:block}.blog-page .card-img .img-placeholder{width:100%;height:100%;min-height:180px;background:#c9bfa8}.blog-page .card-body{padding:1.1rem 1.25rem 1.25rem}.blog-page .post-date{font-size:.8rem;color:#a8997e;margin:0 0 6px}.blog-page .post-title{font-size:1.05rem;font-weight:500;color:#1a3a4a;line-height:1.35;margin:0 0 8px;font-family:"Source Sans 3",system-ui,sans-serif}.blog-page .post-description{font-size:.875rem;color:#5a4e3c;line-height:1.55;margin:0}.blog-page .read-more-link{display:inline-block;margin-top:10px;font-size:.85rem;color:#e8572a!important;font-weight:500;text-decoration:none!important;border-bottom:none!important}.blog-page .badge{position:absolute;top:12px;left:12px;font-size:.7rem;font-weight:500;padding:3px 10px;border-radius:4px;letter-spacing:.05em;text-transform:uppercase;font-family:"Source Sans 3",system-ui,sans-serif}.blog-page .badge-tech{background:#ddeaf2;color:#1a3a4a}.blog-page .badge-voyage{background:#faeada;color:#8a4a1a}.blog-page .badge-marketing{background:#eaf2dd;color:#3a5a1a}.blog-page .hidden{display:none}@media(max-width:720px){.blog-page .hero h1{font-size:1.9rem}.blog-page .featured-card{grid-template-columns:1fr}.blog-page .featured-img{min-height:200px}.blog-page .post-grid{grid-template-columns:1fr}}</style> <script> const buttons = document.querySelectorAll<HTMLButtonElement>(".blog-page .filter-btn"); const featured = document.querySelector<HTMLElement>(".blog-page .featured-card"); const cards = document.querySelectorAll<HTMLElement>(".blog-page .post-card"); buttons.forEach((btn) => {btn.addEventListener("click",() => {buttons.forEach((b) => b.classList.remove("active")); btn.classList.add("active"); const filter = btn.dataset.filter ?? "tous"; if (featured) {const cat = featured.dataset.category ?? ""; featured.classList.toggle("hidden",filter !== "tous" && cat !== filter);} cards.forEach((card) => {const cat = card.dataset.category ?? ""; card.classList.toggle("hidden",filter !== "tous" && cat !== filter);});});}); </script>header[data-astro-cid-3ef6ksr2]{background:#1a3a4a;position:sticky;top:0;z-index:100}.header-inner[data-astro-cid-3ef6ksr2]{max-width:1100px;margin:0 auto;padding:0 2rem;height:80px;display:flex;align-items:center;justify-content:space-between}.brand[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:14px;text-decoration:none}.logo-circle[data-astro-cid-3ef6ksr2]{width:44px;height:44px;border-radius:50%;background:#f5f0e8;border:2px solid #4a7a8a;overflow:hidden;display:flex;align-items:center;justify-content:center;flex-shrink:0}.logo-circle[data-astro-cid-3ef6ksr2] img[data-astro-cid-3ef6ksr2]{width:100%;height:100%;object-fit:cover}.site-name[data-astro-cid-3ef6ksr2]{display:block;font-size:20px;font-weight:500;color:#f0f0f0;line-height:1.1}.site-sub[data-astro-cid-3ef6ksr2]{display:block;font-size:12px;color:#7aaabb;margin-top:2px}nav[data-astro-cid-3ef6ksr2]{display:flex;align-items:center;gap:8px}nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]{color:#a8c8d4;text-decoration:none;font-size:14px;padding:7px 16px;border-radius:6px;transition:background .15s}nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2]:hover{background:#ffffff14}nav[data-astro-cid-3ef6ksr2] a[data-astro-cid-3ef6ksr2][aria-current=page]{background:#e8572a;color:#fff;font-weight:500}.site-footer[data-astro-cid-sz7xmlte]{border-top:1px solid #D9D3C8;background:#ede8e0;padding:2rem 0;margin-top:auto}.footer-inner[data-astro-cid-sz7xmlte]{max-width:860px;margin:0 auto;padding:0 1.5rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}.footer-brand[data-astro-cid-sz7xmlte]{display:flex;flex-direction:column;gap:2px}.footer-name[data-astro-cid-sz7xmlte]{font-family:"Roboto Serif",Georgia,serif;font-size:.875rem;font-weight:500;color:#1a3a4a}.footer-copy[data-astro-cid-sz7xmlte]{font-family:Roboto,system-ui,sans-serif;font-size:.75rem;color:#9b9488}.footer-nav[data-astro-cid-sz7xmlte]{display:flex;align-items:center;gap:1.5rem}.footer-nav[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]{font-family:Roboto,system-ui,sans-serif;font-size:.875rem;color:#6b6560;text-decoration:none;transition:color .15s ease}.footer-nav[data-astro-cid-sz7xmlte] a[data-astro-cid-sz7xmlte]:hover{color:#e8714a;text-decoration:none}@media(max-width:640px){.footer-inner[data-astro-cid-sz7xmlte]{flex-direction:column;align-items:flex-start;gap:1rem;padding:0 1rem}.footer-nav[data-astro-cid-sz7xmlte]{gap:1rem;flex-wrap:wrap}}