Separate release notes (#38693)

source/_includes/custom/news.html

@@ -1,23 +1,66 @@
-
 <!--  Left column begins -->
 <div class="grid__item one-third lap-one-half palm-one-whole">
 
-  <!-- Recent blog posts -->
+  {% assign releases_post_limit = 2 %}
+  {% assign blog_post_limit = 4 %}
+  <!-- Home Assistant updates posts -->
   <div class="recent-posts material-card text">
-    <h1>{% icon "mdi:newspaper-variant-multiple" %} Recent Blog Posts</h1>
+    <h2>{% icon "mdi:new-box" %} Release Notes</h2>
 
     <ol>
-      {% for post in site.posts limit: 4 %}
+      {% assign current = 0 %}
-        <li class="post" style="display: grid; font-size: 16px">
+
-          <a href="{{ post.url }}">{{ post.title }}</a>
+      {% for post in site.posts %}
-          <small class="blog-date">{{ post.date_formatted }}</small>
+        {% if post.categories contains "Release-Notes" %}
-        </li>
+          {% assign current = current | plus: 1 %}
+          
+          {% if current > releases_post_limit %}
+            {% break %}
+          {% endif %}
+
+          {% assign post_date = post.date | date: "%Y-%m-%d" %}
+          {% assign post_date_formatted = post_date | date: "%B %d, %Y" %}
+          {% assign post.date_formatted = post_date_formatted %}
+          <li class="post" style="display: grid; font-size: 16px">
+            <a href="{{ post.url }}">{{ post.title }}</a>
+            <small class="blog-date">{{ post.date_formatted }}</small>
+          </li>
+        {% endif %}       
       {% endfor %}
     </ol>
   </div>
 
+    <!-- Recent blog posts -->
+    <div class="recent-posts material-card text">
+      <h2>{% icon "mdi:newspaper-variant-multiple" %} Recent Blog Posts</h2>
+  
+      <ol>
+        {% assign current = 0 %}
+  
+        {% for post in site.posts %}
+          {% if post.categories contains "Release-Notes" %}    
+          {% else %}
+            {% assign current = current | plus: 1 %}
+            
+            {% if current > blog_post_limit %}
+              {% break %}
+            {% endif %}
+    
+            {% assign post_date = post.date | date: "%Y-%m-%d" %}
+            {% assign post_date_formatted = post_date | date: "%B %d, %Y" %}
+            {% assign post.date_formatted = post_date_formatted %}
+            <li class="post" style="display: grid; font-size: 16px">
+              <a href="{{ post.url }}">{{ post.title }}</a>
+              <small class="blog-date">{{ post.date_formatted }}</small>
+            </li>
+          {% endif %}
+        {% endfor %}
+      </ol>
+    </div>
+
   <!-- OHF notice -->
-  <a href="https://www.openhomefoundation.org/blog/announcing-the-open-home-foundation/" class="material-card highlight-blog-post">
+  <a href="https://www.openhomefoundation.org/blog/announcing-the-open-home-foundation/"
+    class="material-card highlight-blog-post">
     <div>
       <p class="lead">We are a non-profit and can't be sold or acquired.</p>
       <p>Home Assistant is a project by the Open Home Foundation.</p>
@@ -25,10 +68,7 @@
     <iconify-icon icon="mdi:chevron-right"></iconify-icon>
   </a>
 
-  <a
+  <a class="material-card highlight-blog-post" href="/blog/2016/01/19/perfect-home-automation/">
-    class="material-card highlight-blog-post"
-    href="/blog/2016/01/19/perfect-home-automation/"
-  >
     <p class="lead">Read our founder's vision for the perfect home automation</p>
     <iconify-icon icon="mdi:chevron-right"></iconify-icon>
   </a>
@@ -74,26 +114,22 @@
 
   <!-- All landing pages have a block. -->
   {% assign pages_by_date = site.pages | sort: "date" | reverse %} {% for
-    page in pages_by_date %} {% if page.layout == "landingpage" and
+  page in pages_by_date %} {% if page.layout == "landingpage" and
-    page.frontpage != false %}
+  page.frontpage != false %}
-    <a
+  <a class="material-card picture-promo" href="{{page.url}}" style="
-      class="material-card picture-promo"
-      href="{{page.url}}"
-      style="
           background-image: url({{page.frontpage_image | default:page.og_image}});
           background-size: cover;
           background-color: #41bdf5;
-        "
+        ">
-    >
+    <div class="caption">
-      <div class="caption">
+      <div>
-        <div>
+        <div class="title">
-          <div class="title">
+          {{page.title}}
-            {{page.title}}
-          </div>
-          <div class="subtitle">{{page.description}}</div>
         </div>
+        <div class="subtitle">{{page.description}}</div>
       </div>
-    </a>
+    </div>
+  </a>
   {% endif %} {% endfor %}
 
 </div>
@@ -104,15 +140,11 @@
 <div class="grid__item one-third lap-one-half palm-one-whole">
 
   <!-- State of the Open Home -->
-  <a
+  <a href="/blog/2025/04/16/state-of-the-open-home-recap/" class="material-card picture-promo" style="
-    href="/blog/2025/04/16/state-of-the-open-home-recap/"
-    class="material-card picture-promo"
-    style="
       background-image: url(/images/frontpage/feature-sotoh2025.jpg);
       background-size: cover;
       padding-top: 55%;
-    "
+    ">
-  >
     <div class="caption">
       <div>
         <div class="title">
@@ -126,15 +158,11 @@
   </a>
 
   <!-- Assist -->
-  <a
+  <a class="material-card picture-promo picture-top" href="/voice_control/" style="
-    class="material-card picture-promo picture-top"
-    href="/voice_control/"
-    style="
       background-image: url(/images/frontpage/feature-voice.jpg);
       background-size: cover;
       padding-bottom: 35%;
-    "
+    ">
-  >
     <div class="caption">
       <div>
         <div class="title">
@@ -149,11 +177,8 @@
   </a>
 
   <!-- Merch store -->
-  <a
+  <a class="material-card picture-promo" href="https://home-assistant-store.creator-spring.com/"
-    class="material-card picture-promo"
+    style="background-image: url(/images/merchandise/shirt-frontpage.jpg)">
-    href="https://home-assistant-store.creator-spring.com/"
-    style="background-image: url(/images/merchandise/shirt-frontpage.jpg)"
-  >
     <div class="caption">
       <div>
         <div class="title">