Replace Community news with a Featured module section

blog/odoo-20-community-is-here-and-it-feels-like-a-genuinely-polished-release.html

@@ -24,7 +24,7 @@
   <nav class="nav" aria-label="Sections">
     <a href="../index.html#tips">Tips</a>
     <a href="../index.html#blog">Blog</a>
-    <a href="../index.html#community">Community</a>
+    <a href="../index.html#featured">Modules</a>
     <a href="../index.html#ask">About</a>
   </nav>
 </header>

blog/paraguay-s-odoo-localization-is-updated-to-v19-and-that-matters-more-than-it-sou.html

@@ -24,7 +24,7 @@
   <nav class="nav" aria-label="Sections">
     <a href="../index.html#tips">Tips</a>
     <a href="../index.html#blog">Blog</a>
-    <a href="../index.html#community">Community</a>
+    <a href="../index.html#featured">Modules</a>
     <a href="../index.html#ask">About</a>
   </nav>
 </header>

css/site.css

@@ -898,3 +898,40 @@ html.js [data-rv].rv-in { opacity: 1; transform: none; }
 }
 .sponsor-foot a { color: rgba(246, 236, 218, 0.92); text-decoration-color: var(--oak); text-underline-offset: 3px; }
 .sponsor-foot a:hover { color: var(--sand); }
+
+/* ---------- featured module ---------- */
+.featured-card {
+  background: var(--tint);
+  border: 1px solid var(--rule);
+  border-radius: var(--r-box);
+  padding: clamp(20px, 3vw, 34px);
+  max-width: 46em;
+}
+.featured-kicker {
+  margin: 0 0 6px;
+  font-size: var(--step-xs);
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+  color: var(--oak);
+  font-weight: 600;
+}
+.featured-name {
+  margin: 0 0 10px;
+  font-family: var(--display);
+  font-weight: 600;
+  font-size: var(--step-h3);
+  letter-spacing: -0.01em;
+}
+.featured-name a { text-decoration: none; color: var(--ink); }
+.featured-name a:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 4px; }
+.featured-note { margin: 0 0 14px; color: var(--muted); font-size: var(--step-body); max-width: 38em; }
+.featured-branches { margin: 0; display: flex; gap: 8px; }
+.branch {
+  font-size: var(--step-xs);
+  letter-spacing: 0.08em;
+  padding: 3px 9px;
+  border-radius: 999px;
+  border: 1px solid var(--rule);
+  color: var(--muted);
+}
+.branch.is-on { border-color: var(--olive); color: var(--olive); }

index.html

@@ -28,7 +28,7 @@
     <a href="#welcome">Welcome</a>
     <a href="#tips">Tips</a>
     <a href="#blog">Blog</a>
-    <a href="#community">Community</a>
+    <a href="#featured">Modules</a>
     <a href="#ask">About</a>
   </nav>
   <a class="nav-cta" href="#ask">Ask a question</a>
@@ -88,7 +88,7 @@
     <header class="section-head">
       <span class="initial" aria-hidden="true">B</span>
       <h2 class="section-title" id="blog-title"><span class="kicker">Everything</span> <em>The OC Guy blog</em></h2>
-      <a class="more" href="#community">Community news</a>
+      <a class="more" href="#featured">Featured module</a>
     </header>
 
     <div class="feed-tools">
@@ -165,20 +165,22 @@
 
   </section>
 
-  <section class="section" id="community" aria-labelledby="community-title">
+  <section class="section featured" id="featured" aria-labelledby="featured-title">
     <header class="section-head">
-      <span class="initial" aria-hidden="true">C</span>
+      <span class="initial" aria-hidden="true">F</span>
-      <h2 class="section-title" id="community-title"><span class="kicker">The latest in</span> <em>Community news</em></h2>
+      <h2 class="section-title" id="featured-title"><span class="kicker">The latest in</span> <em>Featured module</em></h2>
-      <a class="more" href="https://github.com/OCA" target="_blank" rel="noopener">View all community news</a>
+      <a class="more" href="https://github.com/OCA" target="_blank" rel="noopener">All OCA modules</a>
     </header>
 
-    <div class="feed-tools">
+    <article class="featured-card">
-      <label class="sr-only" for="newsSearch">Search community news</label>
+      <p class="featured-kicker" id="featured-area">Utilities</p>
-      <input id="newsSearch" class="feed-search" type="search" placeholder="Search the news…" autocomplete="off">
+      <h3 class="featured-name"><a id="featured-link" href="https://github.com/OCA/mail/tree/18.0/mail_tracking" target="_blank" rel="noopener">Mail Tracker</a></h3>
-      <span class="feed-count"><span id="newsCount">0</span> posts</span>
+      <p class="featured-note" id="featured-note">Knows whether the invoice you sent was opened — without asking the client.</p>
-    </div>
+      <p class="featured-branches" id="featured-branches">
-
+        <span class="branch is-on">19.0</span>
-    <ul class="news" id="newsList" data-feed="news"></ul>
+        <span class="branch">20.0</span>
+      </p>
+    </article>
   </section>
 
   <section class="ask" id="ask" aria-labelledby="ask-title">

js/site.js

@@ -96,6 +96,22 @@
     });
   }
 
+  /* ---------- featured module: one editorial pick, status live from the feed ---------- */
+  var FEATURED = 'mail tracker';
+
+  function updateFeatured(rows) {
+    var link = document.getElementById('featured-link');
+    if (!link) return;
+    var hit = rows.filter(function (m) {
+      return String(m.name || '').toLowerCase().trim() === FEATURED;
+    })[0];
+    if (!hit) return;
+    if (hit.URL) link.href = hit.URL;
+    var branches = document.querySelectorAll('#featured-branches .branch');
+    if (branches[0]) branches[0].classList.toggle('is-on', !!hit.v19);
+    if (branches[1]) branches[1].classList.toggle('is-on', !!hit.v20);
+  }
+
   if (ocaBody) {
     fetch('https://n8n.odoo4projects.com/webhook/oc-guy/modules')
       .then(function (r) { if (!r.ok) throw new Error('http ' + r.status); return r.json(); })
@@ -104,6 +120,7 @@
                  : (Array.isArray(payload) ? payload : null);
         if (!rows || !rows.length) throw new Error('empty');
         renderOca(rows);
+        updateFeatured(rows);
       })
       .catch(function () {
         /* keep the snapshot already in the markup */

scripts/sync_posts.py

@@ -222,7 +222,7 @@ POST_PAGE = """<!DOCTYPE html>
   <nav class="nav" aria-label="Sections">
     <a href="../index.html#tips">Tips</a>
     <a href="../index.html#blog">Blog</a>
-    <a href="../index.html#community">Community</a>
+    <a href="../index.html#featured">Modules</a>
     <a href="../index.html#ask">About</a>
   </nav>
 </header>