feat: initial implementation

Author: serhalp

README.md

@@ -1,75 +1,37 @@
-# Nuxt 3 Minimal Starter
+# Netlify Cache Inspector
 
-Look at the [Nuxt 3 documentation](https://nuxt.com/docs/getting-started/introduction) to learn more.
+Utility web app for inspecting and comparing cache headers for requests to Netlify sites
 
-## Setup
+## Development
 
-Make sure to install the dependencies:
+Install dependencies:
 
 ```bash
-# npm
-npm install
-
-# pnpm
 pnpm install
-
-# yarn
-yarn install
-
-# bun
-bun install
 ```
 
-## Development Server
+### Dev Server
 
 Start the development server on `http://localhost:3000`:
 
 ```bash
-# npm
-npm run dev
-
-# pnpm
 pnpm run dev
-
-# yarn
-yarn dev
-
-# bun
-bun run dev
 ```
 
-## Production
+### Production build
 
 Build the application for production:
 
 ```bash
-# npm
-npm run build
-
-# pnpm
 pnpm run build
-
-# yarn
-yarn build
-
-# bun
-bun run build
 ```
 
-Locally preview production build:
+### Locally preview of a production build
 
 ```bash
-# npm
-npm run preview
-
-# pnpm
 pnpm run preview
-
-# yarn
-yarn preview
-
-# bun
-bun run preview
 ```
 
-Check out the [deployment documentation](https://nuxt.com/docs/getting-started/deployment) for more information.
+## Deployment
+
+This site deploys automatically to Netlify.

app/app.vue

@@ -1,6 +1,35 @@
 <template>
-  <div>
-    <NuxtRouteAnnouncer />
-    <NuxtWelcome />
-  </div>
+  <NuxtRouteAnnouncer />
+
+  <header>
+    <h1>Netlify Cache Inspector</h1>
+
+    <p class="subheading">
+      Inspect and compare cache headers for requests to Netlify sites
+    </p>
+  </header>
+
+  <main>
+    <RequestForm />
+  </main>
 </template>
+
+<style>
+body {
+  /* Override weird default from Netlify Examples style */
+  text-align: left;
+}
+</style>
+<style scoped>
+header {
+  text-align: center;
+}
+
+.subheading {
+  font-size: 1.5em;
+}
+
+main {
+  margin-top: 3em;
+}
+</style>

app/components/RawCacheHeaders.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  cacheHeaders: Record<string, string>;
+}>();
+
+const id = useId();
+const el = useTemplateRef(id);
+const highlightJson = () => {
+  hljs.highlightElement(el.value);
+};
+onMounted(highlightJson);
+onUpdated(highlightJson);
+</script>
+
+<template>
+  <pre>
+    <code :ref="id" class="hljs language-json">{{ JSON.stringify(props.cacheHeaders, null, 2) }}</code>
+  </pre>
+</template>

app/components/RequestForm.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+const inputUrl = ref();
+const runs = ref([]);
+
+const inspectUrl = async (): void => {
+  if (!inputUrl.value.startsWith("http")) {
+    inputUrl.value = `https://${inputUrl.value}`;
+  }
+
+  try {
+    // Destructuring would be confusing, since the response body contains fields named `status` and
+    // `headers` (it's a request about a request...)
+    const responseBody = await $fetch(
+      `/api/inspect-url/${encodeURIComponent(inputUrl.value)}`,
+    );
+
+    runs.value.push({
+      url: inputUrl.value,
+      status: responseBody.status,
+      cacheHeaders: getCacheHeaders(responseBody.headers),
+      durationInMs: responseBody.durationInMs,
+    });
+  } catch (err) {
+    // TODO(serhalp) Proper error handling. ErrorBoundary?
+    console.error("Error fetching URL", err);
+    return;
+  }
+};
+</script>
+
+<template>
+  <div class="form">
+    <label class="url-input">
+      <strong>URL:</strong>
+      <input v-model.trim="inputUrl" @keyup.enter="inspectUrl()" />
+    </label>
+    <button @click="inspectUrl()">Inspect</button>
+  </div>
+
+  <!-- TODO(serhalp) Move this into another component. Wrong place. -->
+  <div class="flex-btwn">
+    <div v-for="run in runs">
+      <h3>{{ run.url }}</h3>
+      <small>HTTP {{ run.status }} ({{ run.durationInMs }} ms)</small>
+      <RawCacheHeaders :cacheHeaders="run.cacheHeaders" />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.form {
+  display: flex;
+  gap: 1em;
+  align-content: center;
+  align-items: center;
+}
+
+label {
+  display: flex;
+  gap: 1em;
+  align-content: center;
+  align-items: center;
+
+  >* {
+    /* Override default from Netlify Examples style to vertically center easily */
+    margin-bottom: 0;
+  }
+}
+
+.url-input {
+  flex: 1;
+}
+</style>

app/utils/getCacheHeaders.ts

@@ -0,0 +1,30 @@
+const CACHE_HEADER_NAMES = [
+  "Age",
+  "CDN-Cache-Control",
+  "Cache-Control",
+  "Cache-Status",
+  "Content-Encoding",
+  "Content-Type",
+  "Date",
+  "ETag",
+  "Netlify-CDN-Cache-Control",
+  "Vary",
+  "X-BB-Deploy-Id",
+  "X-BB-Gen",
+  "X-NF-Cache-Info",
+  "X-NF-Cache-Result",
+];
+
+export default function getCacheHeaders(headersObj: Record<string, string>) {
+  // Use a Headers instance for case insensitivity and multi-value handling
+  const headers = new Headers(headersObj);
+
+  // I'd rather avoid mutations here but it's really awkward to handle nil values otherwise
+  const cacheHeaders = new Headers();
+  for (const name of CACHE_HEADER_NAMES) {
+    const val = headers.get(name);
+    if (val != null) cacheHeaders.set(name, val);
+  }
+
+  return Object.fromEntries(cacheHeaders);
+}

eslint.config.mjs

@@ -0,0 +1,17 @@
+// @ts-check
+import withNuxt from "./.nuxt/eslint.config.mjs";
+
+export default withNuxt().override("nuxt/vue", {
+  rules: {
+    "vue/html-self-closing": [
+      "error",
+      {
+        html: {
+          // The default config here isn't compatible with prettier:
+          // https://github.com/vuejs/eslint-plugin-vue/issues/2232.
+          void: "always",
+        },
+      },
+    ],
+  },
+});

nuxt.config.ts

@@ -3,4 +3,51 @@ export default defineNuxtConfig({
   compatibilityDate: "2024-09-13",
   future: { compatibilityVersion: 4 },
   devtools: { enabled: true },
+
+  app: {
+    head: {
+      link: [
+        // See https://example-styles.netlify.app/.
+        {
+          rel: "preload",
+          href: "https://example-styles.netlify.app/fonts/PacaembuVar-latin.woff2",
+          as: "font",
+          type: "font/woff2",
+          crossorigin: "",
+        },
+        {
+          rel: "preload",
+          href: "https://example-styles.netlify.app/fonts/MulishVar-latin.woff2",
+          as: "font",
+          type: "font/woff2",
+          crossorigin: "",
+        },
+        {
+          rel: "stylesheet",
+          href: "https://example-styles.netlify.app/styles.css",
+        },
+        {
+          rel: "stylesheet",
+          href: "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/styles/default.min.css",
+        },
+      ],
+      script: [
+        {
+          src: "https://cdn.jsdelivr.net/gh/highlightjs/cdn-release@latest/build/highlight.min.js",
+        },
+        // TODO(serhalp) Check if this is really the idiomatic way to do this...
+        {
+          children: "hljs.highlightAll();",
+        },
+      ],
+    },
+  },
+
+  routeRules: {
+    "/": {
+      prerender: true,
+    },
+  },
+
+  modules: ["@nuxt/eslint"],
 });

package.json

@@ -1,17 +1,24 @@
 {
-  "name": "nuxt-app",
+  "name": "netlify-cache-inspector",
+  "description": "Inspect and compare cache headers for requests to Netlify sites",
   "private": true,
   "type": "module",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
-    "postinstall": "nuxt prepare"
+    "postinstall": "nuxt prepare",
+    "typecheck": "npx nuxi typecheck"
   },
   "dependencies": {
+    "@nuxt/eslint": "^0.5.7",
     "nuxt": "^3.13.0",
     "vue": "latest",
     "vue-router": "latest"
+  },
+  "devDependencies": {
+    "typescript": "^5.6.2",
+    "vue-tsc": "^2.1.6"
   }
 }