chore: Enable experimental CSP support

astro.config.mjs

@@ -6,6 +6,23 @@ import rehypeSlug from "rehype-slug";
 export default defineConfig({
   site: "https://sentry.engineering",
   output: "static",
+  experimental: {
+    csp: {
+      scriptDirective: {
+        resources: ["'self'", "https://plausible.io"],
+        hashes: [
+          "sha256-t7UDmDY4iklZOU6hhoaa4oMgQfLaBBT9DlTNiRW7xE0=", // Theme init
+          "sha256-p7WGvXPfCjOpbo9APNa4AJgj/jO9xZr9aBlEFVcuKUM=", // Plausible init
+          "sha256-sVlNBziRgfCssLPd9yhI6q2CTDvIhhkPyoUn5B+G1HI=", // Theme toggle
+          "sha256-m+TqEPNJoIsN5pFYeHFt2az1Myng7rZ6Y/9yJIokBrk=", // Post list search
+        ],
+      },
+      styleDirective: {
+        resources: ["'self'", "'unsafe-inline'"],
+      },
+      directives: ["connect-src 'self' https://plausible.io"],
+    },
+  },
   integrations: [sitemap()],
   image: {
     service: {

src/components/PostList.astro

@@ -29,7 +29,7 @@ const postsWithMeta = posts.map((post) => {
 })
 ---
 
-<div id={listId}>
+<div id={listId} data-post-list-id={listId}>
   <div class="space-y-4 pb-8 pt-10">
     <div class="flex items-center justify-between">
       <h1 class="text-xs font-normal uppercase tracking-widest text-gray-400 dark:text-gray-500">
@@ -66,7 +66,7 @@ const postsWithMeta = posts.map((post) => {
   </div>
 
   <ul class="flex flex-col gap-px" data-post-list>
-    <li class="text-sm text-[#5b6270] dark:text-[#8a8a8a]" data-empty style={postsWithMeta.length === 0 ? '' : 'display: none;'}>
+    <li class:list={['text-sm text-[#5b6270] dark:text-[#8a8a8a]', { hidden: postsWithMeta.length > 0 }]} data-empty>
       No posts found.
     </li>
     {
@@ -136,9 +136,9 @@ const postsWithMeta = posts.map((post) => {
   </div>
 )}
 
-<script define:vars={{ listId }}>
-  const root = document.getElementById(listId)
-  if (root) {
+<script is:inline>
+  document.querySelectorAll('[data-post-list-id]').forEach((root) => {
+    const listId = root.getAttribute('data-post-list-id')
     const input = root.querySelector('[data-search-input]')
     const items = Array.from(root.querySelectorAll('[data-post-item]'))
     const emptyState = root.querySelector('[data-empty]')
@@ -152,23 +152,23 @@ const postsWithMeta = posts.map((post) => {
         for (const item of items) {
           const haystack = item.getAttribute('data-search-content') ?? ''
           const isMatch = query.length === 0 || haystack.includes(query)
-          item.style.display = isMatch ? '' : 'none'
+          item.classList.toggle('hidden', !isMatch)
           if (isMatch) {
             visible += 1
           }
         }
 
         if (emptyState) {
-          emptyState.style.display = visible === 0 ? '' : 'none'
+          emptyState.classList.toggle('hidden', visible > 0)
         }
 
         if (pagination) {
-          pagination.style.display = query.length === 0 ? '' : 'none'
+          pagination.classList.toggle('hidden', query.length > 0)
         }
       }
 
       input.addEventListener('input', update)
       update()
     }
-  }
+  })
 </script>

src/layouts/BaseLayout.astro

@@ -43,12 +43,6 @@ const footerLinks = [
     <link rel="icon" type="image/png" sizes="16x16" href="/static/favicons/favicon-16x16.png" />
     <link rel="apple-touch-icon" sizes="180x180" href="/static/favicons/apple-touch-icon.png" />
     <link rel="manifest" href="/site.webmanifest" />
-    <link rel="preconnect" href="https://fonts.googleapis.com" />
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-    <link
-      href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"
-      rel="stylesheet"
-    />
     <script is:inline>
       (() => {
         try {

src/styles/tailwind.css

@@ -2,3 +2,51 @@
 @plugin "@tailwindcss/typography";
 
 @custom-variant dark (&:where(.dark, .dark *));
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Light.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Italic.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
+}
+
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
+}