From 62d59cb88eb736154b4c50cc091fb6ee7bbf76e4 Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Mon, 08 Jun 2026 10:59:24 +0000
Subject: [PATCH] appview/timeline: process recent blog posts and show on timeline

Signed-off-by: oppiliappan <me@oppi.li>
---
 appview/pages/pages.go | 8 ++++++++
 appview/timeline/router.go | 13 ++++++++-----
 appview/pages/templates/timeline/timeline.html | 8 +++++---
 appview/pages/templates/timeline/fragments/announcements.html | 69 ++++++++++++++++++++++++++++++++++++++++++---------------------------
 appview/pages/templates/timeline/fragments/timeline.html | 19 +++++++++++++++++++
 5 file(s) changed, 82 insertion(s)(+), 35 deletion(s)(-)

diff --git a/appview/pages/pages.go b/appview/pages/pages.go
--- a/appview/pages/pages.go
+++ b/appview/pages/pages.go
@@ -407,6 +407,13 @@
 	Pull  *models.Pull
 }
 
+type BlogPost struct {
+	Slug     string
+	Title    string
+	Subtitle string
+	Date     time.Time
+}
+
 type TimelineParams struct {
 	LoggedInUser     *oauth.MultiAccountUser
 	Timeline         []models.TimelineGroup
@@ -417,6 +424,7 @@
 	Notifications    []*models.NotificationWithEntity
 	Recents          []RecentItem
 	FollowingOnly    bool
+	RecentBlogPosts  []BlogPost
 	// ShowNewsletter controls whether the newsletter widget/CTA is rendered.
 	// For logged-in users it reflects their newsletter_preferences row; for
 	// anonymous visitors it is always true (dismissal falls back to
diff --git a/appview/timeline/router.go b/appview/timeline/router.go
--- a/appview/timeline/router.go
+++ b/appview/timeline/router.go
@@ -7,6 +7,7 @@
 	"net/http"
 	"os"
 	"strings"
+	"time"
 
 	"github.com/adrg/frontmatter"
 	"github.com/go-chi/chi/v5"
@@ -17,10 +18,11 @@
 )
 
 type postMeta struct {
-	Slug  string `yaml:"slug"`
-	Title string `yaml:"title"`
-	Date  string `yaml:"date"`
-	Draft bool   `yaml:"draft"`
+	Slug     string `yaml:"slug"`
+	Title    string `yaml:"title"`
+	Subtitle string `yaml:"subtitle"`
+	Date     string `yaml:"date"`
+	Draft    bool   `yaml:"draft"`
 }
 
 type Timeline struct {
@@ -99,7 +101,8 @@
 
 	result := make([]pages.BlogPost, len(posts))
 	for i, p := range posts {
-		result[i] = pages.BlogPost{Slug: p.Slug, Title: p.Title, Date: p.Date}
+		t, _ := time.Parse("2006-01-02", p.Date)
+		result[i] = pages.BlogPost{Slug: p.Slug, Title: p.Title, Subtitle: p.Subtitle, Date: t}
 	}
 	return result
 }
diff --git a/appview/pages/templates/timeline/timeline.html b/appview/pages/templates/timeline/timeline.html
--- a/appview/pages/templates/timeline/timeline.html
+++ b/appview/pages/templates/timeline/timeline.html
@@ -32,15 +32,17 @@
         </div>
         {{ end }}
 
-        {{ template "timeline/fragments/announcements" . }}
+        {{ template "timeline/fragments/trending" . }}
+
+        <div class="hidden md:block">
+          {{ template "timeline/fragments/announcements" . }}
+        </div>
 
         {{ if and .LoggedInUser .VouchSuggestions }}
         <div class="hidden md:block">
             {{ template "timeline/fragments/vouchSuggestions" . }}
         </div>
         {{ end }}
-
-        {{ template "timeline/fragments/trending" . }}
     </div>
 </div>
 
diff --git a/appview/pages/templates/timeline/fragments/announcements.html b/appview/pages/templates/timeline/fragments/announcements.html
--- a/appview/pages/templates/timeline/fragments/announcements.html
+++ b/appview/pages/templates/timeline/fragments/announcements.html
@@ -4,37 +4,52 @@
       {{ i "megaphone" "size-4 flex-shrink-0" }}
       Announcements
     </h3>
-    <div class="flex flex-col gap-3 p-2 bg-white dark:bg-gray-800">
+    <div class="flex flex-col p-0 bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
       {{ template "vouchAnnouncement" . }}
+      {{ if .RecentBlogPosts }}
+        {{ template "recentBlogPosts" . }}
+      {{ end }}
     </div>
   </div>
 {{ end }}
 
-{{ define "vouchAnnouncement" }}
-  <div class="relative overflow-hidden border border-indigo-200 dark:border-indigo-700 bg-gradient-to-b from-white to-indigo-50 dark:from-indigo-950 dark:to-indigo-900 rounded-sm p-6">
-<div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(165,180,252,0.35),transparent_70%)] dark:bg-[radial-gradient(ellipse_at_bottom_left,rgba(99,102,241,0.2),transparent_70%)]"></div>
-    <div class="relative z-10">
-      <p class="font-semibold text-indigo-800 dark:text-indigo-300 mb-1">Build a web of trust</p>
-      <p class="text-indigo-700 dark:text-indigo-400">
-        Vouch for trustworthy users that make open-source a better place. Visit a user's
-        profile to vouch for them.
-      </p>
-
-      <div class="mt-3 flex items-center justify-between">
-        <a class="mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="https://blog.tangled.org/vouching">
-          Read more
-        </a>
-        {{ if and .LoggedInUser .VouchSuggestions }}
-          <a class="md:hidden mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="/{{ .LoggedInUser.Did }}?tab=vouches">
-            View suggestions {{ i "arrow-right" "size-3.5" }}
-          </a>
-        {{ end }}
-      </div>
-
-    </div>
-
-    <div class="pointer-events-none absolute -bottom-8 -right-16 text-indigo-200 dark:text-indigo-700 opacity-60">
-      {{ i "shield-plus" "size-48" }}
-    </div>
+{{ define "recentBlogPosts" }}
+  <div class="flex flex-col hidden md:block">
+    {{ range .RecentBlogPosts }}
+      <a href="https://blog.tangled.org/{{ .Slug }}" class="text-sm no-underline hover:no-underline hover:bg-gray-100/50 dark:hover:bg-gray-700/50 overflow-hidden p-4 flex flex-col gap-0.5">
+        <span class="truncate text-xs text-gray-500 dark:text-gray-400">{{ .Date.Format "January 2, 2006" }}</span>
+        <span class="truncate dark:text-white">{{ .Title }}</span>
+        {{ if .Subtitle }}<span class="line-clamp-1 text-sm text-gray-500 dark:text-gray-400">{{ .Subtitle }}</span>{{ end }}
+      </a>
+    {{ end }}
   </div>
+{{ end }}
+
+{{ define "vouchAnnouncement" }}
+<div class="relative overflow-hidden bg-gradient-to-b from-white to-indigo-50 dark:from-indigo-950 dark:to-indigo-900 rounded-sm p-4">
+  <div class="pointer-events-none absolute inset-0 bg-[radial-gradient(ellipse_at_bottom_left,rgba(165,180,252,0.35),transparent_70%)] dark:bg-[radial-gradient(ellipse_at_bottom_left,rgba(99,102,241,0.2),transparent_70%)]"></div>
+  <div class="relative z-10">
+    <p class="font-semibold text-indigo-800 dark:text-indigo-300 mb-1">Build a web of trust</p>
+    <p class="text-indigo-700 dark:text-indigo-400">
+    Vouch for trustworthy users that make open-source a better place. Visit a user's
+    profile to vouch for them.
+    </p>
+
+    <div class="mt-3 flex items-center justify-between">
+      <a class="mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="https://blog.tangled.org/vouching">
+        Read more
+      </a>
+      {{ if and .LoggedInUser .VouchSuggestions }}
+      <a class="md:hidden mt-3 no-underline inline-flex items-center gap-1 text-sm font-medium text-indigo-700 dark:text-indigo-300 hover:text-indigo-900 dark:hover:text-indigo-100 hover:underline" href="/{{ .LoggedInUser.Did }}?tab=vouches">
+        View suggestions {{ i "arrow-right" "size-3.5" }}
+      </a>
+      {{ end }}
+    </div>
+
+  </div>
+
+  <div class="pointer-events-none absolute -bottom-8 -right-16 text-indigo-200 dark:text-indigo-700 opacity-60">
+    {{ i "shield-plus" "size-48" }}
+  </div>
+</div>
 {{ end }}
diff --git a/appview/pages/templates/timeline/fragments/timeline.html b/appview/pages/templates/timeline/fragments/timeline.html
--- a/appview/pages/templates/timeline/fragments/timeline.html
+++ b/appview/pages/templates/timeline/fragments/timeline.html
@@ -35,6 +35,7 @@
           {{ end }}
         </div>
 
+        {{ if .Timeline }}
         <div class="flex flex-col gap-4">
           {{ range $i, $g := .Timeline }}
             <div class="relative">
@@ -54,6 +55,24 @@
             </div>
           {{ end }}
         </div>
+        {{ else }}
+          <div class="px-4 py-8 text-sm text-center text-gray-400 dark:text-gray-500 border border-gray-200 dark:border-gray-700 rounded-sm ">
+            <div class="w-10 h-10 mx-auto mb-3 text-gray-300 dark:text-gray-600">
+              {{ if .FollowingOnly }}
+                {{ i "user-round-x" "size-10" }}
+              {{ else }}
+                {{ i "radio" "size-10" }}
+              {{ end }}
+            </div>
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+              {{ if .FollowingOnly }}
+                Follow some users to see their activity here.
+              {{ else }}
+                Nothing here yet.
+              {{ end }}
+            </p>
+          </div>
+        {{ end }}
     </div>
 {{ end }}
 

--
tangled.sh