Added cards to show latest announcements in cards on the starting page.

Added pinned indicator on the index page cards

Author: jgebal

README.md

@@ -50,7 +50,7 @@ How it works:
 
 Controlling what is shown:
 
-- To keep a post on the home page, add `pin: true` to its front matter. It also stays at the top of the Announcements page. Remove the flag when it should drop off.
+- To keep a post on the home page, add `pin: true` to its front matter. Its card is shown first with the same pin badge as on the Announcements page, and the post also stays at the top of the Announcements page. Pinned posts count towards `COUNT`. Remove the flag when it should drop off.
 - To control the card text, add a `description:` to the post front matter.
 - The number of cards (`COUNT`), summary length (`SUMMARY_LENGTH`) and category icons (`ICONS`) are set at the top of [hooks/latest_posts.py](hooks/latest_posts.py). Icons use the [Material icon](https://squidfunk.github.io/mkdocs-material/reference/icons-emojis/) shortcode syntax.
 

docs/announcements/posts/2026/2026-08-14-next-chapter-for-utPLSQL.md

@@ -5,6 +5,7 @@ date:
   created: 2026-08-12
 categories:
   - "news"
+pin: true
 ---
 
 ## Looking back

docs/announcements/posts/2026/2026-09-25_incorporation_of_utPLSQL.md

@@ -5,6 +5,7 @@ date:
   created: 2026-09-25
 categories:
   - "news"
+pin: true
 ---
 
 # Incorporation of utPLSQL

docs/stylesheets/extra.css

@@ -40,3 +40,9 @@
 [data-md-color-scheme="slate"] .latest-posts__more {
     color: var(--md-primary-fg-color);
 }
+
+/* Material's pin badge (md-pin) is a flex item on the Announcements page - align it inline here */
+.latest-posts__meta .md-pin {
+    display: inline-block;
+    vertical-align: middle;
+}

hooks/latest_posts.py

@@ -75,10 +75,12 @@ def _card(post, link):
     icon = next((ICONS[c] for c in categories if c in ICONS), DEFAULT_ICON)
     created = post.config.date.created
     date = f"{created:%B} {created.day}, {created.year}"
+    # Same pin badge as on the Announcements page (Material's `md-pin`)
+    pin = '<span class="md-pin"></span> · ' if post.config.pin else ""
     return (
         f"-   {icon}{{ .lg .middle }} __[{post.meta['title']}]({link})__\n\n"
         f"    ---\n\n"
-        f'    <span class="latest-posts__meta">{date} · {" · ".join(categories)}</span>\n\n'
+        f'    <span class="latest-posts__meta">{pin}{date} · {" · ".join(categories)}</span>\n\n'
         f"    {_summary(post)}\n\n"
         f'    <span class="latest-posts__more">Read more :octicons-arrow-right-24:</span>\n'
     )