pr previews, vibed <Co-Authored-By: Claude Mythos <noreply@anthropic.com>

Author: JacobCoffee

.dockerignore

@@ -0,0 +1,8 @@
+node_modules
+dist
+.astro
+.git
+.github
+.vscode
+.claude
+Dockerfile

Dockerfile

@@ -0,0 +1,15 @@
+FROM node:26-slim AS build
+RUN npm install --global bun
+WORKDIR /app
+COPY package.json bun.lock ./
+RUN bun install --frozen-lockfile
+COPY . .
+ARG PR_PREVIEW=""
+ENV PR_PREVIEW=$PR_PREVIEW
+RUN bun run build
+
+FROM nginx:1.29-alpine
+COPY infra/nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist /usr/share/nginx/html
+USER nobody
+CMD ["nginx", "-g", "daemon off;"]

Makefile

@@ -32,6 +32,11 @@ dev: ## Start development server
 preview: ## Build and preview production locally
 	bun run preview
 
+.PHONY: pr-preview
+pr-preview: ## Build and serve the site as a PR preview locally
+	PR_PREVIEW=local bun run build
+	bun run preview
+
 ## Build
 
 .PHONY: build

Procfile

@@ -0,0 +1,2 @@
+web: nginx -g 'daemon off;'
+release: echo 'deployed'

astro.config.ts

@@ -8,6 +8,7 @@ import remarkPythonRefs from "./src/plugins/remark-python-refs";
 
 const isDev = process.env.NODE_ENV === "development" || process.argv.includes("dev");
 
+
 // Load redirects generated by the migration script
 let redirects: Record<string, string> = {};
 try {

infra/nginx.conf

@@ -0,0 +1,38 @@
+pid /tmp/nginx.pid;
+error_log /dev/stderr warn;
+
+events {
+  worker_connections 1024;
+}
+
+http {
+  include /etc/nginx/mime.types;
+  default_type application/octet-stream;
+  access_log /dev/stdout;
+
+  client_body_temp_path /tmp/client_temp;
+  proxy_temp_path /tmp/proxy_temp;
+  fastcgi_temp_path /tmp/fastcgi_temp;
+  uwsgi_temp_path /tmp/uwsgi_temp;
+  scgi_temp_path /tmp/scgi_temp;
+
+  gzip on;
+  gzip_types text/css application/javascript application/json image/svg+xml text/plain application/xml;
+
+  server {
+    listen unix:/var/run/cabotage/cabotage.sock;
+    root /usr/share/nginx/html;
+    index index.html;
+
+    location = /_health/ {
+      add_header Content-Type text/plain;
+      return 200 'OK';
+    }
+
+    error_page 404 /404.html;
+
+    location / {
+      try_files $uri $uri/ =404;
+    }
+  }
+}

src/components/BaseHead.astro

@@ -6,6 +6,7 @@ interface Props {
 }
 
 import { withBase, stripDescriptionLinks } from "../lib/utils";
+const isPrPreview = Boolean(process.env.PR_PREVIEW);
 const { title, description: rawDescription = "The official blog of the Python core development team.", image } = Astro.props;
 const description = stripDescriptionLinks(rawDescription);
 const baseUrl = import.meta.env.DEV ? Astro.url.origin : Astro.site;
@@ -38,6 +39,7 @@ const ogImage = image ? new URL(image, baseUrl) : new URL(withBase("/og-default.
 </script>
 
 <title>{title}</title>
+{isPrPreview && <meta name="robots" content="noindex" />}
 <meta name="description" content={description} />
 <meta name="generator" content={Astro.generator} />
 
@@ -56,5 +58,11 @@ const ogImage = image ? new URL(image, baseUrl) : new URL(withBase("/og-default.
 <meta name="twitter:image" content={ogImage} />
 
 <!-- Plausible Analytics -->
-<script is:inline defer data-domain="blog.python.org" src="https://analytics.python.org/js/script.hash.outbound-links.js"></script>
-<script is:inline>window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }</script>
+{
+  !isPrPreview && (
+    <>
+      <script is:inline defer data-domain="blog.python.org" src="https://analytics.python.org/js/script.hash.outbound-links.js" />
+      <script is:inline set:html={"window.plausible = window.plausible || function() { (window.plausible.q = window.plausible.q || []).push(arguments) }"} />
+    </>
+  )
+}

src/components/PreviewBanner.astro

@@ -0,0 +1,25 @@
+---
+const prNumber = process.env.PR_PREVIEW;
+const isPrLinked = Boolean(prNumber && /^\d+$/.test(prNumber));
+const prUrl = `https://github.com/python/python-insider-blog/pull/${prNumber}`;
+---
+
+{
+  prNumber && (
+    <div class="border-b border-amber-300 bg-amber-100 px-6 py-2 text-center text-sm text-amber-900 dark:border-amber-700 dark:bg-amber-950 dark:text-amber-200">
+      This is a preview of{" "}
+      {isPrLinked ? (
+        <a href={prUrl} class="font-semibold underline">
+          pull request #{prNumber}
+        </a>
+      ) : (
+        <span class="font-semibold">a work-in-progress build</span>
+      )}
+      {" "}— not the live site. Visit{" "}
+      <a href="https://blog.python.org" class="font-semibold underline">
+        blog.python.org
+      </a>
+      {" "}for the published blog.
+    </div>
+  )
+}

src/layouts/BaseLayout.astro

@@ -1,6 +1,7 @@
 ---
 import BaseHead from "../components/BaseHead.astro";
 import Header from "../components/Header.astro";
+import PreviewBanner from "../components/PreviewBanner.astro";
 import Footer from "../components/Footer.astro";
 import "../assets/styles/global.css";
 
@@ -20,6 +21,7 @@ const { title, description, image, fullWidth = false } = Astro.props;
     <BaseHead title={title} description={description} image={image} />
   </head>
   <body class="flex min-h-screen flex-col bg-[#fafaf9] text-[#1a1a2e] dark:bg-[#0f1117] dark:text-[#e4e4e7]">
+    <PreviewBanner />
     <Header />
     <main class:list={[
       "flex-1",

src/pages/og/[...slug].png.ts

@@ -8,6 +8,7 @@ import { getFonts } from "../../lib/og-fonts";
 export const prerender = true;
 
 export const getStaticPaths: GetStaticPaths = async () => {
+  if (process.env.PR_PREVIEW) return [];
   const posts = await getCollection("posts");
   return posts
     .filter((p) => p.data.published)