chore: rewire blog and RSS feed for 11ty

eleventy.config.js

@@ -1,3 +1,5 @@
+import { feedPlugin } from "@11ty/eleventy-plugin-rss";
+
 const byTitle = (a, b) => a.data.title.localeCompare(b.data.title);
 
 export default async function (eleventyConfig) {
@@ -8,16 +10,49 @@ export default async function (eleventyConfig) {
   eleventyConfig.addWatchTarget("src/styles/");
 
   // Keeps the same directory structure.
-  eleventyConfig.addPassthroughCopy("src/_redirects");
-  eleventyConfig.addPassthroughCopy("src/favicon.ico");
-  eleventyConfig.addPassthroughCopy("**/*.jpg");
-  eleventyConfig.addPassthroughCopy("**/*.jpeg");
-  eleventyConfig.addPassthroughCopy("**/*.png");
-  eleventyConfig.addPassthroughCopy("**/*.svg");
+  eleventyConfig
+    .addPassthroughCopy("src/_redirects")
+    .addPassthroughCopy("src/favicon.ico")
+    .addPassthroughCopy("**/*.jpg")
+    .addPassthroughCopy("**/*.jpeg")
+    .addPassthroughCopy("**/*.png")
+    .addPassthroughCopy("**/*.svg")
+    .addPassthroughCopy("src/blog/pretty-atom-feed.xsl"); //
 
   eleventyConfig.addPassthroughCopy("src/assets/");
 
-  eleventyConfig.addCollection("jobs", (collectionApi) => {
-    return collectionApi.getFilteredByGlob("src/jobs/*.md").sort(byTitle);
+  eleventyConfig.addCollection("jobs", (collectionsApi) => {
+    return collectionsApi.getFilteredByGlob("src/jobs/*.md").sort(byTitle);
+  });
+
+  // ensure draft blog posts are omitted from the RSS feed
+  eleventyConfig.addCollection("publishedPosts", (collectionsApi) => {
+    return collectionsApi.getFilteredByTag("posts").filter((post) => !post.data.draft);
+  });
+
+  // draft blog posts are rendered locally, but not in production builds
+  eleventyConfig.addPreprocessor("drafts", "*", (data, content) => {
+    if (data.draft) {
+      data.title = `${data.title} (draft)`;
+    }
+
+    if (data.draft && process.env.ELEVENTY_RUN_MODE === "build") {
+      return false;
+    }
+  });
+
+  // RSS feed - example https://github.com/11ty/eleventy-base-blog/
+  eleventyConfig.addPlugin(feedPlugin, {
+    type: "atom",
+    outputPath: "/blog/feed.xml",
+    stylesheet: "pretty-atom-feed.xsl",
+    collection: { limit: 20, name: "publishedPosts" },
+    metadata: {
+      language: "en",
+      title: "Compiler’s Blog",
+      subtitle:
+        "Software built by humans, for humans, in LA. Compiler is a woman-owned software consultancy that’s passionate about making government tech solutions easy-to-use and accessible for all.",
+      base: "https://compiler.la/blog/",
+    },
   });
 }

package.json

@@ -8,6 +8,7 @@
   "private": true,
   "devDependencies": {
     "@11ty/eleventy": "^3.0.0",
+    "@11ty/eleventy-plugin-rss": "^3.0.0",
     "@shopify/prettier-plugin-liquid": "^1.10.2",
     "prettier": "^3.8.1"
   },

src/_layouts/blog_post.liquid

@@ -8,10 +8,10 @@ layout: default
 <article class="blog_post">
   <div class="row">
     <div class="col-md-6 d-flex offset-md-3 text-center flex-column justify-content-center py-md-5 my-md-5 my-2">
-      <h1 class="d-inline-block mb-3">{{ page.title }}</h1>
-      <span class="secondary-sans-serif-xs">{{ page.subtitle }}</span>
-      <span class="fs-7 fw-500 text-primary pt-4 mt-3">By {{ page.author }}</span>
-      <time class="fs-7 text-info" datetime="{{ page.date }}">{{ page.date | date: '%B %d, %Y' }}</time>
+      <h1 class="d-inline-block mb-3">{{ title }}</h1>
+      <span class="secondary-sans-serif-xs">{{ subtitle }}</span>
+      <span class="fs-7 fw-500 text-primary pt-4 mt-3">By {{ author }}</span>
+      <time class="fs-7 text-info" datetime="{{ date }}">{{ date | date: '%B %d, %Y' }}</time>
     </div>
   </div>
   <div class="bg-w-100 position-relative bg-white">

src/blog.html → src/blog.liquid

@@ -3,7 +3,6 @@
 description: An inside look at Compiler’s internal projects, interests and our client projects.
 title: Compiler’s Blog
 ---
-
 <div class="row blog">
   <div class="col-md-10 offset-md-1">
     <span class="pill d-inline-block mb-4">Blog</span>
@@ -15,22 +14,22 @@ <h1 class="mb-2">Our blog</h1>
       class="mw-100 mh-100"
       src="/assets/blog/compiler-team-photo-for-blog.jpg"
       alt="A group photograph of many members of the Compiler team at a winery in California."
-    />
+    >
   </div>
   <div class="col-md-6 offset-md-3">
     <!-- Home Post List -->
-    {% for post in site.posts %}
-    <article class="post-preview">
-      <a
-        class="h3 post-title text-white text-decoration-underline d-inline-block mb-2"
-        href="{{ post.url | prepend: site.baseurl | replace: '//', '/' }}"
-      >
-        {{ post.title }}
-      </a>
-      <p class="font-monospace fw-boldest text-info mb-4">By {{ post.author }}</p>
-      <p class="post-subtitle text-info mb-3">{{ post.excerpt }}</p>
-      <p class="text-info fine-print">{{ post.date | date: '%B %d, %Y' }}</p>
-    </article>
+    {% for post in collections.posts reversed %}
+      <article class="post-preview">
+        <a
+          class="h3 post-title text-white text-decoration-underline d-inline-block mb-2"
+          href="{{ post.data.page.url }}"
+        >
+          {{ post.data.title }}
+        </a>
+        <p class="font-monospace fw-boldest text-info mb-4">By {{ post.data.author }}</p>
+        <p class="post-subtitle text-info mb-3">{{ post.data.excerpt }}</p>
+        <p class="text-info fine-print">{{ post.data.date | date: '%B %d, %Y' }}</p>
+      </article>
     {% endfor %}
   </div>
 </div>

src/_drafts/2023-09-01-first-post.md → src/blog/2023-09-01-first-post.md

@@ -1,12 +1,12 @@
 ---
-layout: blog_post
 title: "How to write a Compiler blog post"
 subtitle: "Follow these instructions to learn how to write a blog post, include images, blockquotes and more."
 description: "Follow these instructions to learn how to write a blog post, include images, blockquotes and more."
 author: Laney Mangan
 excerpt: "Learn how to write a blog post, include images, blockquotes and more."
 date: 2023-09-24T19:03:13+0200
 categories: compiler
+draft: true
 ---
 
 ## First thing’s first

src/_posts/2023-12-13-gift-guide.md → src/blog/2023-12-13-gift-guide.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "Compiler’s 2023 Holiday Gift Guide"
 subtitle: "Searching for that perfect gift for the public service enthusiast in your life? Compiler’s got you covered! Here is this year’s round-up of our favorite transit-related gift ideas.
 <br><br><p><em>P.S. If you didn’t make the holiday cut off this year, we think these make great gifts year-round!</em></p>"

src/_posts/2023-12-23-welcome.md → src/blog/2023-12-23-welcome.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "Welcome to the Compiler blog!"
 subtitle: "What you can expect from our blog"
 description: "What you can expect from our blog"

src/_posts/2024-01-24-devcontainer-platform-agnostic-team.md → src/blog/2024-01-24-devcontainer-platform-agnostic-team.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "How to support a platform-agnostic engineering team with VS Code Dev Containers"
 subtitle: "Learn from the Compiler Engineering team, which has been using VS Code Dev Containers daily across Windows, Linux and Mac on all of their projects."
 description: "Learn from the Compiler Engineering team, which has been using VS Code Dev Containers daily across Windows, Linux and Mac on all of their projects."

src/_posts/2024-03-11-transportation-round-up.md → src/blog/2024-03-11-transportation-round-up.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "The Compiler Team's Transportation Round-up"
 subtitle: "Our favorite transit stories from the past year"
 description: "Our favorite transit stories from the past year"

src/_posts/2024-03-22-Civic-Tech-Career-Resources.md → src/blog/2024-03-22-Civic-Tech-Career-Resources.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "Civic Tech Career Resources"
 subtitle: "Our most used resources for navigating a career in Civic Tech"
 description: "Our most used resources for navigating a career in Civic Tech"

src/_posts/2024-04-12-open-source-development.md → src/blog/2024-04-12-open-source-development.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "Driving Progress: The Crucial Role of Open Source in Public Transportation Technology"
 subtitle:
 description: "Learn from the Compiler Team about the benefits of open source development"

src/_posts/2024-05-17-Parental-Leave-Policy.md → src/blog/2024-05-17-Parental-Leave-Policy.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "Creating Compiler's Parental Leave Policy"
 subtitle: "How a small, scrappy, California-based LLC created parental leave and wage replacement policies for its remote, multi-state team."
 description: "How a small, scrappy, California-based LLC created parental leave and wage replacement policies for its remote, multi-state team."

src/_posts/2024-06-14-Tales-From-TCamp.md → src/blog/2024-06-14-Tales-From-TCamp.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "Tales from Transportation Camp"
 subtitle: "The Compiler Team's key takeaways from UCLA's 2024 Transportation Camp LA."
 description: "The Compiler Team's key takeaways from UCLA's 2024 Transportation Camp LA."

src/_posts/2024-09-20-employee-spotlight-angela.md → src/blog/2024-09-20-employee-spotlight-angela.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "Employee Spotlight: Angela"
 subtitle: "Get to know our Compiler team member, Angela Tran."
 description: "Get to know our Compiler team member, Angela Tran."

src/_posts/2024-11-01-static-sites-at-compiler.md → src/blog/2024-11-01-static-sites-at-compiler.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "How Compiler Approaches Static Sites"
 subtitle: "Learn how the Engineering team combines older and reliable static site frameworks with new build tools and an open source approach to craft memorable and functional content-driven sites."
 description: "Learn how the Engineering team combines older and reliable static site frameworks with new build tools and an open source approach to craft memorable and functional content-driven sites."

src/_posts/2025-08-08-employee-spotlight-adam.md → src/blog/2025-08-08-employee-spotlight-adam.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "Employee Spotlight: Adam"
 subtitle: "Get to know our Compiler team member, Adam Linder."
 description: "Get to know our Compiler team member, Adam Linder."

src/_posts/2025-12-12-case-study-cdt.md → src/blog/2025-12-12-case-study-cdt.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "Case Study: Strengthening California’s Digital Disaster Recovery"
 subtitle: "Supporting the California Department of Technology During the 2025 Wildfire Emergency"
 description: "Supporting the California Department of Technology During the 2025 Wildfire Emergency"

src/_posts/2026-04-03-remix-case-study.md → src/blog/2026-04-03-remix-case-study.md

@@ -1,5 +1,4 @@
 ---
-layout: blog_post
 title: "How Compiler Research Transformed Scheduling for Smaller Transit Agencies"
 subtitle: "Learn how Compiler transformed smaller transit agency scheduling with a research-backed pilot of Remix by Via."
 description: "Learn how Compiler transformed smaller transit agency scheduling with a research-backed pilot of Remix by Via."

src/blog/blog.11tydata.js

@@ -0,0 +1,8 @@
+// /blog/:year/:slug/
+const permalink = ({ page: { date, fileSlug } }) => `/blog/${date.getFullYear()}/${fileSlug}/`;
+
+export default {
+  layout: "blog_post",
+  permalink,
+  tags: ["posts"],
+};

src/blog/pretty-atom-feed.xsl

@@ -0,0 +1,87 @@
+<?xml version="1.0" encoding="utf-8"?>
+<!--
+
+# Pretty Atom Feed (v3)
+
+Based on "Pretty RSS Feed": https://github.com/genmon/aboutfeeds/issues/26
+
+Styles an Atom feed, making it friendly for humans viewers, and adds a link
+to aboutfeeds.com for new user onboarding. See it in action:
+
+https://nicolas-hoizey.com/feeds/all.xml
+
+-->
+<xsl:stylesheet
+    version="3.0"
+    xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
+    xmlns:atom="http://www.w3.org/2005/Atom">
+  <xsl:output method="html" version="4.0" encoding="UTF-8" indent="yes"/>
+  <xsl:template match="/">
+    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
+      <head>
+        <meta charset="utf-8"/>
+        <meta name="viewport" content="width=device-width, initial-scale=1"/>
+        <title><xsl:value-of select="atom:feed/atom:title"/></title>
+        <style type="text/css">*{box-sizing:border-box}body{background-color:#fff;color:#24292e;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";line-height:1.5}a{color:#0366d6;text-decoration:none}a:hover{text-decoration:underline}.container{max-width:40rem;margin:1rem auto;padding:1rem}nav{margin-top:2rem;margin-bottom:2rem}p{margin-top:0;margin-bottom:1rem}h1,h2,h3{margin-top:0;margin-bottom:1rem;font-weight:600;line-height:1.25}h1{padding-bottom:.3em;font-size:2em}h1 svg{padding-right:.25rem;vertical-align:text-bottom;width:1.2em;height:1.2em}h2{margin-top:1.5rem;padding-bottom:.3em;font-size:1.5em;border-bottom:1px solid #eaecef}h3{font-size:1.25em;margin-bottom:0}.about{background-color:#fff5b1;margin:.25rem -.25rem;padding:.25rem}header{padding-top:2rem;padding-bottom:2rem}.item{padding-bottom:2rem}.gray{color:#586069}</style>
+      </head>
+      <body>
+        <nav class="container">
+          <p class="about">
+            <strong>This is a web feed,</strong> also known as an RSS or Atom feed.<br /><strong>Subscribe</strong> by copying the URL from the address bar into your newsreader.
+          </p>
+          <p class="gray">
+            Visit <a href="https://aboutfeeds.com">About Feeds</a> to get started with newsreaders and subscribing. It’s free.
+          </p>
+        </nav>
+        <div class="container">
+          <header>
+            <h1>
+              <svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 256 256">
+                <defs>
+                  <linearGradient x1="0.085" y1="0.085" x2="0.915" y2="0.915" id="RSSg">
+                    <stop offset="0.0" stop-color="#E3702D"/><stop offset="0.1071" stop-color="#EA7D31"/>
+                    <stop offset="0.3503" stop-color="#F69537"/><stop offset="0.5" stop-color="#FB9E3A"/>
+                    <stop offset="0.7016" stop-color="#EA7C31"/><stop offset="0.8866" stop-color="#DE642B"/>
+                    <stop offset="1.0" stop-color="#D95B29"/>
+                  </linearGradient>
+                </defs>
+                <rect width="256" height="256" rx="55" ry="55" x="0"  y="0"  fill="#CC5D15"/>
+                <rect width="246" height="246" rx="50" ry="50" x="5"  y="5"  fill="#F49C52"/>
+                <rect width="236" height="236" rx="47" ry="47" x="10" y="10" fill="url(#RSSg)"/>
+                <circle cx="68" cy="189" r="24" fill="#FFF"/>
+                <path d="M160 213h-34a82 82 0 0 0 -82 -82v-34a116 116 0 0 1 116 116z" fill="#FFF"/>
+                <path d="M184 213A140 140 0 0 0 44 73 V 38a175 175 0 0 1 175 175z" fill="#FFF"/>
+              </svg>
+             <xsl:value-of select="atom:feed/atom:title"/>
+            </h1>
+            <p><xsl:value-of select="atom:feed/atom:subtitle"/></p>
+            <p>This preview only shows titles, but the actual feed contains the full content.</p>
+            <a>
+              <xsl:attribute name="href">
+                <xsl:value-of select="/atom:feed/atom:link[not(@rel)]/@href"/>
+              </xsl:attribute>
+              Visit Website &#x2192;
+            </a>
+          </header>
+          <h2>Recent Items</h2>
+          <xsl:apply-templates select="atom:feed/atom:entry" />
+        </div>
+      </body>
+    </html>
+  </xsl:template>
+  <xsl:template match="atom:feed/atom:entry">
+    <div class="item">
+      <h3>
+        <a>
+          <xsl:attribute name="href">
+            <xsl:value-of select="atom:link/@href"/>
+          </xsl:attribute>
+          <xsl:value-of select="atom:title"/>
+        </a>
+      </h3>
+      <small class="gray">
+        Published: <xsl:value-of select="atom:updated" />
+      </small>
+    </div>
+  </xsl:template>
+</xsl:stylesheet>