announcement: Add move to Docker 25 banner

Signed-off-by: Sayan Chowdhury <[email protected]>
Co-authored-by: Mathieu Tortuyaux <[email protected]>

content/releases/_index.md

@@ -2,6 +2,21 @@
 title: "Releases"
 date: 2018-04-17T17:32:59+02:00
 draft: false
+announcement: true
+announcement_bg: "#12172b"
+announcement_text_class: "text-light"
+announcement_title: "Move to Docker 25"
+announcement_message: "
+We will begin moving to **Docker 25** in the near future. Docker 25 and above **remove the devicemapper** storage driver. While new provisionings should not be affected by the change, long-lived nodes which use these back-ends will break after the update.
+
+*  We plan to introduce Docker 25 in the **Alpha release late July 2024**.
+
+*  We expect Docker 25 to **hit Stable in October 2024 the earliest**.
+
+
+Any nodes using the devicemapper storage driver will lose access to all docker state (local container images and stopped containers) after this update. Please *participate in Beta testing and run Beta canaries* if you suspect you might be affected.
+If you are reading this after Docker 25 hits stable in late 2024 and want to keep using Docker 24 while still updating to the latest OS release, please consider masking Docker 25 altogether and using the Docker 24 sysext from our [sysext-bakery](https://github.com/flatcar/sysext-bakery?tab=readme-ov-file#systemd-sysext).
+"
 channels:
   - name: stable
     title: Stable

themes/flatcar/layouts/partials/announcement_banner.html

@@ -0,0 +1,20 @@
+{{ if .Page.Param "announcement" }}
+<div lang="en" id="announcement" style="background-color:{{ .Page.Param "announcement_bg" }}">
+  <div class="row {{ .Page.Param "announcement_text_class" }}">
+  <div class="col-md-1 d-flex align-items-center justify-content-center">
+    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-exclamation-circle" viewBox="0 0 16 16">
+      <path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14m0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16"/>
+      <path d="M7.002 11a1 1 0 1 1 2 0 1 1 0 0 1-2 0M7.1 4.995a.905.905 0 1 1 1.8 0l-.35 3.507a.552.552 0 0 1-1.1 0z"/>
+    </svg>
+  </div>
+  <div class="col-md-11 border-left">
+    <div class="py-3 announcement main-section" data-nosnippet>
+      <h4 class="announcement">
+          {{ .Page.Param "announcement_title" | markdownify }}
+      </h4>
+      <p class="announcement">{{ .Page.Param "announcement_message" | markdownify }}</p>
+    </div>
+  </div>
+  </div>
+</div>
+{{ end }}

themes/flatcar/layouts/section/releases.html

@@ -70,6 +70,9 @@ <h5 class="d-inline">
             <h2>Release Notes</h2>
           </div>
 
+          <div class="w-100">
+            {{ partial "announcement_banner.html" . }}
+          </div>
           <div class="mt-3">
             <ul class="nav nav-tabs" id="release-tabs">
                 {{ range $i, $channel := $channels }}