Add monthly newsletter page

sites/main-site/src/components/BaseHead.astro

@@ -35,6 +35,11 @@ description = description?.replaceAll(/<[^>]*>?/g, "");
         <link rel="alternate" type="application/rss+xml" title="nf-core Blog" href="/blog/rss.xml" />
     )
 }
+{
+    Astro.url.pathname.includes("newsletter") && (
+        <link rel="alternate" type="application/rss+xml" title="nf-core Newsletter" href="/newsletter/rss.xml" />
+    )
+}
 <meta name="generator" content={Astro.generator} />
 <link rel="sitemap" href="/sitemap-index.xml" />
 

sites/main-site/src/components/navbar/Navbar.astro

@@ -167,6 +167,12 @@ if (onGoingEvents?.length > 0) {
                                 <BlogPostLabel timeSpan={blogPostTimeSpan} /></a
                             >
                         </li>
+                        <li class="">
+                            <a
+                                class="dropdown-item d-flex align-items-center justify-content-between"
+                                href="/newsletter/">Newsletter</a
+                            >
+                        </li>
                         <li><hr class="dropdown-divider" /></li>
                         <li>
                             <span class="dropdown-header">

sites/main-site/src/content.config.ts

@@ -78,7 +78,13 @@ const events = defineCollection({
             hackathonProjectListModals: z.string().optional(),
             youtubeEmbed: z.array(z.string().url()).optional().or(z.string().url()).optional(),
             hideExportButton: z.boolean().optional(),
+            headerImage: z.string().url().or(z.string().startsWith("/assets/images/events/")).optional(),
+            headerImageAlt: z.string().optional(),
         })
+        .refine(
+            (data) => !data.headerImage || data.headerImageAlt,
+            { message: "Please provide alt text for your `headerImage` in `headerImageAlt`." },
+        )
         .transform((data) => {
             // Create start and end date objects
             try {
@@ -293,8 +299,8 @@ const blog = defineCollection({
             title: z.string(),
             subtitle: z.string(),
             shortTitle: z.string().optional(),
-            headerImage: z.string().url().optional().or(z.string().startsWith("/assets/images/blog/")).optional(),
-            headerImageAlt: z.string().optional(),
+            headerImage: z.string().url().or(z.string().startsWith("/assets/images/blog/")),
+            headerImageAlt: z.string(),
             headerImageDim: z.array(z.number(), z.number()).optional(),
             label: z.array(z.string()),
             pubDate: z.date(),
@@ -311,10 +317,6 @@ const blog = defineCollection({
             maxHeadingDepth: z.number().optional(),
         })
         .refine((data) => {
-            // Check if headerImage is present but headerImageAlt is not
-            if (data.headerImage && !data.headerImageAlt) {
-                throw new Error("Please provide alt text for your `headerImage` in `headerImageAlt`.");
-            }
             // Check if headerImageDim is present but headerImage is not present or does not start with /assets/
             if (data.headerImageDim && (!data.headerImage || !data.headerImage.startsWith("/assets/"))) {
                 throw new Error(

sites/main-site/src/content/blog/2020/data_management.md

@@ -1,6 +1,8 @@
 ---
 title: Data management
 subtitle: How to plan your project, estimate resources, and share your results.
+headerImage: https://images.unsplash.com/photo-1558494949-ef010cbdcc31
+headerImageAlt: Server room with rows of data storage hardware
 pubDate: 2020-04-14T12:00:00+01:00
 authors:
   - "elinkronander"

sites/main-site/src/content/blog/2025/paper-v2.mdx

@@ -1,6 +1,8 @@
 ---
 title: "Empowering bioinformatics communities with Nextflow and nf-core"
 subtitle: "Next nf-core scientific article now published in Genome Biology!"
+headerImage: https://images.unsplash.com/photo-1532094349884-543bc11b234d
+headerImageAlt: Scientific journal article with data visualizations
 pubDate: 2025-08-06T12:00:00+01:00
 authors:
     - "maxulysse"

sites/main-site/src/content/blog/2026/configs-strict-syntax.mdx

@@ -1,6 +1,8 @@
 ---
 title: Making nf-core/configs strict syntax compliant
 subtitle: Announcement and recommendations for updating nf-core/configs Nextflow strict syntax compliant
+headerImage: https://images.unsplash.com/photo-1555949963-ff9fe0c870eb
+headerImageAlt: Code on a dark screen showing configuration syntax
 pubDate: 2026-03-05T09:00:00+01:00
 headerImage: https://images.unsplash.com/photo-1760548425425-e42e77fa38f1
 headerImageAlt: Image of code on a screen

sites/main-site/src/content/blog/2026/statement-on-ai.mdx

@@ -1,6 +1,8 @@
 ---
 title: "nf-core and AI"
 subtitle: "Core team statement on AI within nf-core"
+headerImage: "/assets/images/blog/statement-on-ai/maxime-pigeon.png"
+headerImageAlt: "Badly photoshopped image of a pigeon developing code on a laptop"
 pubDate: 2026-01-14T10:00:00+01:00
 headerImage: https://images.unsplash.com/photo-1718241905696-cb34c2c07bed
 headerImageAlt: Image of a pigeon developing code on a laptop, and Maxime Garcia giving a thumbs up from the laptop screen

sites/main-site/src/content/events/2026/hackathon-boston.mdx

@@ -2,6 +2,8 @@
 title: Hackathon - April 2026 (Boston)
 subtitle: An in-person hackathon held in Boston
 type: hackathon
+headerImage: /assets/images/events/2026/hackathon-boston/summit-2026-boston.png
+headerImageAlt: Nextflow Summit 2026 Boston promotional card
 announcement:
     start: 2026-03-20T09:00:00+01:00
 startDate: "2026-04-28"

sites/main-site/src/pages/newsletter/[year]/[month].astro

@@ -0,0 +1,153 @@
+---
+import PageLayout from "@layouts/PageLayout.astro";
+import { getCollection } from "astro:content";
+import pipelines_json from "@public/pipelines.json";
+import { getNewsletterStaticPathsData, getNewsletterContentData, getMonthName } from "@utils/newsletter";
+import type { NewsletterMonth } from "@utils/newsletter";
+import NewsletterContent from "@components/newsletter/NewsletterContent.astro";
+
+const images = import.meta.glob("/src/assets/**");
+export async function getStaticPaths() {
+    const pipelines = pipelines_json.remote_workflows;
+    const { months, allProposals } = await getNewsletterStaticPathsData(getCollection, pipelines);
+
+    return months.map(({ year, month }, index) => ({
+        params: {
+            year: String(year),
+            month: String(month).padStart(2, "0"),
+        },
+        props: {
+            year,
+            month,
+            allMonths: months,
+            allProposals,
+            prevMonth: months[index + 1] || null,
+            nextMonth: months[index - 1] || null,
+        },
+    }));
+}
+
+const { year, month, allMonths, allProposals, prevMonth, nextMonth } = Astro.props as {
+    year: number;
+    month: number;
+    allMonths: NewsletterMonth[];
+    allProposals: any[];
+    prevMonth: NewsletterMonth | null;
+    nextMonth: NewsletterMonth | null;
+};
+
+const pipelines = pipelines_json.remote_workflows;
+const contentData = await getNewsletterContentData(getCollection, pipelines, year, month, allProposals, images);
+
+function monthUrl(m: NewsletterMonth): string {
+    return `/newsletter/${m.year}/${String(m.month).padStart(2, "0")}`;
+}
+---
+
+<PageLayout
+    title={`Newsletter - ${contentData.monthName} ${year}`}
+    subtitle={`nf-core community newsletter for ${contentData.monthName} ${year}`}
+    mainpage_container={true}
+    subfooter={false}
+>
+    {/* ===== NAVIGATION (excluded from email) ===== */}
+    <nav class="mb-4 newsletter-nav">
+        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
+            {
+                prevMonth ? (
+                    <a href={monthUrl(prevMonth)} class="btn btn-outline-secondary btn-sm">
+                        &larr; {getMonthName(prevMonth.month)} {prevMonth.year}
+                    </a>
+                ) : (
+                    <span />
+                )
+            }
+
+            <div class="d-flex align-items-center gap-2">
+                <a href="/newsletter/rss.xml" class="btn btn-outline-secondary btn-sm" title="RSS Feed">
+                    <i class="fa-solid fa-rss"></i>
+                </a>
+                <a
+                    href={`${monthUrl({ year, month })}/email`}
+                    class="btn btn-outline-secondary btn-sm"
+                    title="Email HTML version"
+                >
+                    <i class="fa-solid fa-envelope"></i>
+                </a>
+                <select class="newsletter-month-select form-select form-select-sm w-auto">
+                    {
+                        allMonths.map((m) => (
+                            <option value={monthUrl(m)} selected={m.year === year && m.month === month}>
+                                {getMonthName(m.month)} {m.year}
+                            </option>
+                        ))
+                    }
+                </select>
+            </div>
+
+            {
+                nextMonth ? (
+                    <a href={monthUrl(nextMonth)} class="btn btn-outline-secondary btn-sm">
+                        {getMonthName(nextMonth.month)} {nextMonth.year} &rarr;
+                    </a>
+                ) : (
+                    <span />
+                )
+            }
+        </div>
+    </nav>
+
+    {/* ===== NEWSLETTER CONTENT ===== */}
+    <NewsletterContent data={contentData} />
+
+    {/* ===== BOTTOM NAVIGATION (excluded from email) ===== */}
+    <hr class="my-4" />
+    <nav class="mb-4">
+        <div class="d-flex justify-content-between align-items-center flex-wrap gap-2">
+            {
+                prevMonth ? (
+                    <a href={monthUrl(prevMonth)} class="btn btn-outline-secondary btn-sm">
+                        &larr; {getMonthName(prevMonth.month)} {prevMonth.year}
+                    </a>
+                ) : (
+                    <span />
+                )
+            }
+
+            <select class="newsletter-month-select form-select form-select-sm w-auto">
+                {
+                    allMonths.map((m) => (
+                        <option value={monthUrl(m)} selected={m.year === year && m.month === month}>
+                            {getMonthName(m.month)} {m.year}
+                        </option>
+                    ))
+                }
+            </select>
+
+            {
+                nextMonth ? (
+                    <a href={monthUrl(nextMonth)} class="btn btn-outline-secondary btn-sm">
+                        {getMonthName(nextMonth.month)} {nextMonth.year} &rarr;
+                    </a>
+                ) : (
+                    <span />
+                )
+            }
+        </div>
+    </nav>
+</PageLayout>
+
+<script>
+    document.querySelectorAll<HTMLSelectElement>(".newsletter-month-select").forEach((select) => {
+        select.addEventListener("change", () => {
+            window.location.href = select.value;
+        });
+    });
+</script>
+
+<style>
+    .newsletter-nav {
+        border-bottom: 1px solid var(--bs-border-color);
+        padding-bottom: 1rem;
+    }
+</style>

sites/main-site/src/pages/newsletter/[year]/[month]/email.astro

@@ -0,0 +1,68 @@
+---
+import { getCollection } from "astro:content";
+import pipelines_json from "@public/pipelines.json";
+import { getNewsletterStaticPathsData, getNewsletterContentData, getMonthName } from "@utils/newsletter";
+import NewsletterContent from "@components/newsletter/NewsletterContent.astro";
+
+const images = import.meta.glob("/src/assets/**");
+
+export async function getStaticPaths() {
+    const pipelines = pipelines_json.remote_workflows;
+    const { months, allProposals } = await getNewsletterStaticPathsData(getCollection, pipelines);
+
+    return months.map(({ year, month }) => ({
+        params: {
+            year: String(year),
+            month: String(month).padStart(2, "0"),
+        },
+        props: {
+            year,
+            month,
+            allProposals,
+        },
+    }));
+}
+
+const { year, month, allProposals } = Astro.props as {
+    year: number;
+    month: number;
+    allProposals: any[];
+};
+
+const pipelines = pipelines_json.remote_workflows;
+const monthName = getMonthName(month);
+const contentData = await getNewsletterContentData(getCollection, pipelines, year, month, allProposals, images);
+---
+
+<!doctype html>
+<html lang="en">
+    <head>
+        <meta charset="utf-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>nf-core Newsletter - {monthName} {year}</title>
+        <style>
+            body {
+                margin: 0;
+                padding: 20px;
+                background-color: #f5f5f5;
+                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+            }
+            @media (prefers-color-scheme: dark) {
+                body {
+                    background-color: #121212;
+                }
+            }
+            @media screen and (max-width: 600px) {
+                #newsletter-content .nl-col,
+                #newsletter-content .nl-blog-text,
+                #newsletter-content .nl-blog-img {
+                    max-width: 100% !important;
+                    display: block !important;
+                }
+            }
+        </style>
+    </head>
+    <body style="margin: 0; padding: 0;">
+        <NewsletterContent data={contentData} />
+    </body>
+</html>

sites/main-site/src/pages/newsletter/index.astro

@@ -0,0 +1,64 @@
+---
+import PageLayout from "@layouts/PageLayout.astro";
+import { getCollection } from "astro:content";
+import pipelines_json from "@public/pipelines.json";
+import { getNewsletterMonths, getMonthName } from "@utils/newsletter";
+
+let blogPosts = await getCollection("blog");
+blogPosts = blogPosts.filter((post) => new Date(post.data.pubDate) < new Date());
+
+let events = await getCollection("events");
+events = events.filter((e) => e.id.split("/").length === 2);
+
+const pipelines = pipelines_json.remote_workflows;
+const advisories = await getCollection("advisories");
+const months = getNewsletterMonths(blogPosts, events, pipelines, advisories);
+
+// Group by year
+const byYear = new Map<number, { year: number; month: number }[]>();
+for (const m of months) {
+    if (!byYear.has(m.year)) byYear.set(m.year, []);
+    byYear.get(m.year)!.push(m);
+}
+const years = [...byYear.keys()].sort((a, b) => b - a);
+
+// Latest newsletter for redirect
+const latest = months[0];
+---
+
+<PageLayout
+    title="nf-core Newsletter"
+    subtitle="Monthly community newsletters from nf-core"
+    mainpage_container={true}
+    subfooter={false}
+>
+    {
+        latest && (
+            <div class="alert alert-success mb-4">
+                <strong>Latest newsletter:</strong>
+                <a href={`/newsletter/${latest.year}/${String(latest.month).padStart(2, "0")}`}>
+                    {getMonthName(latest.month)} {latest.year}
+                </a>
+            </div>
+        )
+    }
+
+    {
+        years.map((year) => (
+            <div class="mb-4">
+                <h2>{year}</h2>
+                <div class="list-group">
+                    {byYear.get(year)!.map((m) => (
+                        <a
+                            href={`/newsletter/${m.year}/${String(m.month).padStart(2, "0")}`}
+                            class="list-group-item list-group-item-action d-flex justify-content-between align-items-center"
+                        >
+                            {getMonthName(m.month)} {m.year}
+                            <span class="badge bg-success rounded-pill">&rarr;</span>
+                        </a>
+                    ))}
+                </div>
+            </div>
+        ))
+    }
+</PageLayout>