Add draft flag for blog posts

src/content.config.ts

@@ -18,6 +18,8 @@ const blogCollection = defineCollection({
       })
       .optional(),
     tags: z.array(z.string()),
+    // Hidden from production builds, still visible in dev. See scripts/content.js.
+    draft: z.boolean().default(false),
   }),
 });
 

src/content/blog/css-container-queries-examples.mdx

@@ -4,6 +4,7 @@ pubDate: 2026-03-02
 author: "Yann"
 tags: ["css", "queries"]
 description: "Reading the specs and the nitty griddy details on MDN is great to get a solid understanding of container queries. But it's a lot faster to do if you got the gist of it through a few carefully selected examples that **show you** the basics."
+draft: true
 ---
 
 import CanIUse from "../../components/_CanIUse.astro";

src/pages/blog/[...slug].astro

@@ -1,9 +1,10 @@
 ---
-import { getCollection, render } from 'astro:content';
+import { render } from 'astro:content';
 import MarkdownPostLayout from '../../layouts/BlogPostLayout.astro';
+import { getBlogPosts } from '../../scripts/content.js';
 
 export async function getStaticPaths() {
-  const blogEntries = await getCollection('blog');
+  const blogEntries = await getBlogPosts();
   return blogEntries.map((entry) => ({
     params: { slug: entry.id },
     props: { entry },

src/pages/blog/index.astro

@@ -1,12 +1,12 @@
 ---
-import { getCollection } from 'astro:content';
 import { createMarkdownProcessor } from '@astrojs/markdown-remark';
+import { getBlogPosts } from '../../scripts/content.js';
 import BaseLayout from '../../layouts/BaseLayout.astro';
 import CardList from '../../components/CardList.astro';
 import Card from '../../components/Card.astro';
 
 const title = 'mCSS Blog';
-const allPosts = await getCollection('blog');
+const allPosts = await getBlogPosts();
 allPosts.sort((a, b) => b.data.pubDate.getTime() - a.data.pubDate.getTime());
 
 const md = await createMarkdownProcessor();

src/pages/blog/tags/[tag].astro

@@ -1,11 +1,12 @@
 ---
-import { getCollection, type CollectionEntry } from 'astro:content';
+import { type CollectionEntry } from 'astro:content';
 import { createMarkdownProcessor } from '@astrojs/markdown-remark';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 import { slugify } from '../../../scripts/utilities';
+import { getBlogPosts } from '../../../scripts/content.js';
 
 export async function getStaticPaths() {
-  const allPosts = await getCollection('blog');
+  const allPosts = await getBlogPosts();
 
   // Group by slug so tags that differ only in case or spacing share one page.
   // The first spelling encountered becomes the display name.

src/pages/blog/tags/index.astro

@@ -1,10 +1,10 @@
 ---
-import { getCollection } from 'astro:content';
 import BaseLayout from '../../../layouts/BaseLayout.astro';
 
 import Tags from '../../../components/Tags.astro';
+import { getBlogPosts } from '../../../scripts/content.js';
 
-const allPosts = await getCollection('blog');
+const allPosts = await getBlogPosts();
 const tags = [...new Set(allPosts.map((post) => post.data.tags).flat())];
 ---
 

src/pages/rss.xml.js

@@ -1,8 +1,8 @@
 import rss from "@astrojs/rss";
-import { getCollection } from "astro:content";
+import { getBlogPosts } from "../scripts/content.js";
 
 export async function GET(context) {
-  const blog = await getCollection("blog");
+  const blog = await getBlogPosts();
   return rss({
     title: "mCSS News",
     description: "Stay up to date with mCSS updates",

src/scripts/content.js

@@ -0,0 +1,18 @@
+// CONTENT HELPERS
+// Kept separate from utilities.js: this module imports `astro:content`, so it
+// must never be pulled into a client-side bundle.
+
+import { getCollection } from "astro:content";
+
+/**
+ * Blog posts, with drafts hidden in production builds and visible in dev.
+ * Always use this instead of getCollection("blog") so a draft cannot leak
+ * into a listing, a tag page, the RSS feed, or the sitemap.
+ *
+ * @returns {Promise<import("astro:content").CollectionEntry<"blog">[]>}
+ */
+export async function getBlogPosts() {
+  return getCollection("blog", ({ data }) =>
+    import.meta.env.PROD ? !data.draft : true,
+  );
+}