From 26bddb156a4c085b1d107b6cf76813487af1495a Mon Sep 17 00:00:00 2001
From: oppiliappan <me@oppi.li>
Date: Wed, 1 Jul 2026 10:05:42 +0100
Subject: [PATCH] wip: micro vm announcement

Signed-off-by: oppiliappan <me@oppi.li>
---
 .../timeline/fragments/announcements.html     | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/appview/pages/templates/timeline/fragments/announcements.html b/appview/pages/templates/timeline/fragments/announcements.html
index 2584294a..902fd238 100644
--- a/appview/pages/templates/timeline/fragments/announcements.html
+++ b/appview/pages/templates/timeline/fragments/announcements.html
@@ -5,7 +5,7 @@
       Announcements
     </h3>
     <div class="flex flex-col p-0 bg-white dark:bg-gray-800 divide-y divide-gray-200 dark:divide-gray-700">
-      {{ template "vouchAnnouncement" . }}
+      {{ template "microvmAnnouncement" . }}
       {{ if .RecentBlogPosts }}
         {{ template "recentBlogPosts" . }}
       {{ end }}
@@ -25,6 +25,30 @@
   </div>
 {{ end }}
 
+{{ define "microvmAnnouncement" }}
+<div class="relative overflow-hidden bg-gradient-to-b from-amber-50 to-amber-100 dark:from-amber-900 dark:to-amber-950 rounded-sm p-4">
+  <div class="relative z-10">
+    <p class="font-semibold text-amber-800 dark:text-amber-100 mb-1">MicroVM powered CI</p>
+    <p class="text-amber-700 dark:text-amber-300">
+      Spindles now support a new engine: <span class="font-mono text-sm">microvm</span>! You can
+      now build containers, run services like postgres, or use
+      non-nixos images on CI.
+    </p>
+    <div class="mt-3">
+      <a class="no-underline inline-flex items-center gap-1 text-sm font-medium text-amber-700 dark:text-amber-200 hover:text-amber-900 dark:hover:text-amber-100 hover:underline" href="https://docs.tangled.org/spindle/microvm">
+        Read more
+      </a>
+    </div>
+  </div>
+  <div class="pointer-events-none absolute -bottom-8 -right-16 size-48
+    [--ci-gradient-from:theme(colors.amber.100)] dark:[--ci-gradient-from:theme(colors.amber.800)]
+    [--ci-gradient-to:theme(colors.amber.200)] dark:[--ci-gradient-to:theme(colors.amber.900)]"
+       style="background: linear-gradient(to bottom, var(--ci-gradient-from), var(--ci-gradient-to));
+              -webkit-mask: url('/static/icons/cpu.svg') center/contain no-repeat;
+              mask: url('/static/icons/cpu.svg') center/contain no-repeat;"></div>
+</div>
+{{ end }}
+
 {{ define "vouchAnnouncement" }}
 <div class="relative overflow-hidden bg-gradient-to-b from-indigo-50 to-indigo-100 dark:from-indigo-900 dark:to-indigo-950 rounded-sm p-4">
   <div class="relative z-10">
-- 
2.51.2