interface:
  display_name: "Zero build frontend"
  short_description: "Zero-build frontend (React, Tailwind, vanilla JS)"

## Alpine.js 3.x, CSP-compatible client-side reactivity

Alpine.js is a minimal alternative to Vue/React for sprinkles of interactivity.
Use its dedicated [CSP build](https://alpinejs.dev/advanced/csp), which avoids
the standard build's `Function`-style evaluation and works without
`'unsafe-eval'`. Keep complex behavior in a same-origin external component file;
simple property and method references remain in `x-*` attributes.

```html
<script defer src="/js/alpine-components.js"></script>
<script defer src="/vendor/alpine-csp-3.15.12.min.js"></script>

<!-- Toggle visibility -->
<div x-data="togglePanel">
  <button @click="toggle">Toggle</button>
  <div x-show="open" x-transition>Content here</div>
</div>

<!-- Two-way binding + computed -->
<div x-data="nameForm">
  <input x-model="first" placeholder="First">
  <input x-model="last" placeholder="Last">
  <p x-text="fullName"></p>
</div>

<!-- Fetch on mount -->
<div x-data="itemList" x-init="load">
  <template x-for="item in items" :key="item.id">
    <li x-text="item.title"></li>
  </template>
</div>
```

```javascript
// public/js/alpine-components.js, loaded before the deferred CSP runtime
document.addEventListener('alpine:init', () => {
  Alpine.data('togglePanel', () => ({
    open: false,
    toggle() { this.open = !this.open; }
  }));

  Alpine.data('nameForm', () => ({
    first: '',
    last: '',
    get fullName() { return `Hello, ${this.first} ${this.last}`; }
  }));

  Alpine.data('itemList', () => ({
    items: [],
    async load() {
      const response = await fetch('/api/items');
      if (!response.ok) throw new Error('Item request failed');
      this.items = await response.json();
    }
  }));
});
```

Alpine pairs naturally with htmx: htmx swaps a server-rendered fragment in, Alpine handles whatever client-side state that fragment needs (open/close, optimistic toggles, form validation).

## Browser extension (Manifest V3)

### manifest.json

```json
{
  "manifest_version": 3,
  "name": "PocketLink",
  "version": "1.0.0",
  "description": "Create shortlinks from right-click context menu",

  "permissions": [
    "contextMenus",
    "storage",
    "activeTab",
    "scripting",
    "notifications",
    "offscreen"
  ],

  "background": {
    "service_worker": "background.js",
    "type": "module"
  },

  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },

  "options_page": "options.html",

  "icons": {
    "16": "icons/icon16.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}
```

### Service worker (background.js)

```javascript
// background.js - Service Worker

// Create context menu on install
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: 'create-shortlink',
    title: 'Create Shortlink',
    contexts: ['page', 'link']
  });
});

// Handle context menu click
chrome.contextMenus.onClicked.addListener(async (info, tab) => {
  if (info.menuItemId !== 'create-shortlink') return;

  const url = info.linkUrl || info.pageUrl;

  try {
    const shortUrl = await createShortlink(url);
    await copyToClipboard(shortUrl);
    showNotification('Shortlink Created', shortUrl);
  } catch (error) {
    showNotification('Error', error.message);
  }
});

async function createShortlink(longUrl) {
  const { apiToken } = await chrome.storage.sync.get('apiToken');
  if (!apiToken) throw new Error('API token not configured');

  const response = await fetch('https://api-ssl.bitly.com/v4/shorten', {
    method: 'POST',
    headers: {
      'Authorization': `Bearer ${apiToken}`,
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ long_url: longUrl })
  });

  if (!response.ok) throw new Error('API request failed');

  const data = await response.json();
  return data.link;
}

// Clipboard methods (three fallback strategies)

// Method 1: Offscreen API (preferred)
async function copyToClipboard(text) {
  try {
    await copyViaOffscreen(text);
  } catch {
    try {
      await copyViaContentScript(text);
    } catch {
      await copyViaPopup(text);
    }
  }
}

async function copyViaOffscreen(text) {
  await chrome.offscreen.createDocument({
    url: 'offscreen.html',
    reasons: ['CLIPBOARD'],
    justification: 'Copy shortlink to clipboard'
  });

  await chrome.runtime.sendMessage({ type: 'copy', text });
  await chrome.offscreen.closeDocument();
}

async function copyViaContentScript(text) {
  const [tab] = await chrome.tabs.query({ active: true, currentWindow: true });
  await chrome.scripting.executeScript({
    target: { tabId: tab.id },
    func: (text) => navigator.clipboard.writeText(text),
    args: [text]
  });
}

function showNotification(title, message) {
  chrome.notifications.create({
    type: 'basic',
    iconUrl: 'icons/icon48.png',
    title,
    message
  });
}
```

### Options page

```html
<!-- options.html -->
<!DOCTYPE html>
<html>
<head>
  <style>
    /* Inline CSS for extension compliance (no remote code) */
    body {
      font-family: system-ui, sans-serif;
      padding: 20px;
      max-width: 400px;
      margin: 0 auto;
    }
    h1 { font-size: 1.5rem; margin-bottom: 1rem; }
    label { display: block; margin-bottom: 0.5rem; font-weight: 500; }
    input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
      font-size: 14px;
    }
    button {
      margin-top: 1rem;
      padding: 10px 20px;
      background: #2dc8d2;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover { background: #25a8b0; }
    .status { margin-top: 1rem; padding: 10px; border-radius: 4px; }
    .success { background: #d4edda; color: #155724; }
    .error { background: #f8d7da; color: #721c24; }
  </style>
</head>
<body>
  <h1>PocketLink Settings</h1>

  <label for="apiToken">Bit.ly API Token</label>
  <input type="password" id="apiToken" placeholder="Enter your API token">

  <button id="save">Save Settings</button>

  <div id="status" class="status" style="display: none;"></div>

  <script src="options.js"></script>
</body>
</html>
```

```javascript
// options.js
document.addEventListener('DOMContentLoaded', async () => {
  const tokenInput = document.getElementById('apiToken');
  const saveButton = document.getElementById('save');
  const status = document.getElementById('status');

  // Load saved token
  const { apiToken } = await chrome.storage.sync.get('apiToken');
  if (apiToken) tokenInput.value = apiToken;

  saveButton.addEventListener('click', async () => {
    const token = tokenInput.value.trim();

    if (!token) {
      showStatus('Please enter an API token', 'error');
      return;
    }

    // Validate token by making test request
    try {
      const response = await fetch('https://api-ssl.bitly.com/v4/user', {
        headers: { 'Authorization': `Bearer ${token}` }
      });

      if (!response.ok) throw new Error('Invalid token');

      await chrome.storage.sync.set({ apiToken: token });
      showStatus('Settings saved successfully!', 'success');
    } catch {
      showStatus('Invalid API token', 'error');
    }
  });

  function showStatus(message, type) {
    status.textContent = message;
    status.className = `status ${type}`;
    status.style.display = 'block';
    setTimeout(() => { status.style.display = 'none'; }, 3000);
  }
});
```

## Picking a stack

Three current zero-build approaches, each with different trade-offs:

| Stack | When | Bundle size impact |
|---|---|---|
| **Vendored React + htm** | Component-heavy SPAs, existing React mental model, Tailwind styling | ~50 KB gzipped (React + ReactDOM + htm) |
| **htmx 2.x + server-rendered HTML** | CRUD apps, traditional MPA flow, want server-side state of truth | ~14 KB gzipped (htmx alone) |
| **Alpine.js 3.x + plain HTML** | Light interactivity sprinkled into mostly-static pages, no full SPA | ~15 KB gzipped (Alpine alone) |

You can mix htmx and Alpine.js in the same page, htmx handles server interactions, Alpine handles client-side UI state. Many production sites converge on this combo.

## Dependency policy

Zero-build means the deployed site does not compile code at request time. It
does not require fetching executable code from a third-party CDN on every page
load. Install exact packages, commit the lockfile, create local browser assets
once, commit those assets with checksums, and serve them under a CSP such as
`script-src 'self'`.

```bash
npm install --save-exact react@19.2.8 react-dom@19.2.8 htm@3.1.1 \
  lodash-es@4.18.1 htmx.org@2.0.10 @alpinejs/csp@3.15.12 \
  papaparse@5.5.4 \
  leaflet@1.9.4 leaflet.markercluster@1.5.3
npm install --save-dev --save-exact esbuild@0.28.1 \
  tailwindcss@4.3.3 @tailwindcss/cli@4.3.3
npm ci
npx @tailwindcss/cli -i ./src/input.css -o ./public/index.css --minify
```

Create one React entry so React and ReactDOM share the same bundled runtime:

```javascript
// src/vendor-entry.js
export { default as React } from 'react';
export { createRoot } from 'react-dom/client';
export { default as htm } from 'htm';
```

Build or copy the reviewed packages into the static directory, then record and
verify their hashes:

```bash
mkdir -p public/vendor
npx esbuild src/vendor-entry.js --bundle --format=esm --platform=browser \
  --outfile=public/vendor/react-runtime-19.2.8.mjs
npx esbuild lodash-es --bundle --format=esm --platform=browser \
  --outfile=public/vendor/lodash-es-4.18.1.mjs
cp node_modules/htmx.org/dist/htmx.min.js public/vendor/htmx-2.0.10.min.js
cp node_modules/@alpinejs/csp/dist/cdn.min.js public/vendor/alpine-csp-3.15.12.min.js
cp node_modules/papaparse/papaparse.min.js public/vendor/papaparse-5.5.4.min.js
cp node_modules/leaflet/dist/leaflet.js public/vendor/leaflet-1.9.4.js
cp node_modules/leaflet/dist/leaflet.css public/vendor/leaflet-1.9.4.css
cp -R node_modules/leaflet/dist/images public/vendor/images
cp node_modules/leaflet.markercluster/dist/leaflet.markercluster.js \
  public/vendor/leaflet.markercluster-1.5.3.js
cp node_modules/leaflet.markercluster/dist/MarkerCluster.css \
  public/vendor/MarkerCluster-1.5.3.css
cp node_modules/leaflet.markercluster/dist/MarkerCluster.Default.css \
  public/vendor/MarkerCluster.Default-1.5.3.css
find public/vendor -type f ! -name SHA256SUMS -print0 | sort -z | \
  xargs -0 sha256sum > public/vendor/SHA256SUMS
sha256sum -c public/vendor/SHA256SUMS
```

## Cache busting for deployments

```html
<!-- Manual versioning for static files -->
<link rel="stylesheet" href="styles.css?v=1.3.0">
<script src="app.js?v=1.3.0"></script>

<!-- Or use build timestamp -->
<script>
  const version = Date.now();
  document.write(`<link rel="stylesheet" href="styles.css?v=${version}">`);
</script>
```

## Deployment patterns

### Static hosting (FTP/SFTP)
```
# Directory structure for WordPress wp-content deployment
wp-content/
└── archive-explorer/
    ├── index.html
    ├── index.js
    ├── index.css
    ├── components/
    │   ├── Sidebar.js
    │   ├── RecordList.js
    │   └── RecordCard.js
    └── data/
        └── archive-data.json
```

### Path management for subdirectory deployment
```javascript
// constants.js

// Auto-detect base path from current URL
const getBasePath = () => {
  const path = window.location.pathname;
  const lastSlash = path.lastIndexOf('/');
  return path.substring(0, lastSlash + 1);
};

export const BASE_PATH = getBasePath();
export const DATA_URL = `${BASE_PATH}data/archive-data.json`;

// Usage
const response = await fetch(DATA_URL);
```

## Performance tips

- **Lazy load large JSON**: Parse incrementally or paginate
- **Use CSS containment**: `contain: layout style` on repeated elements
- **Debounce search input**: Wait 300ms after typing stops
- **Virtualize long lists**: Only render visible items
- **Preload local vendors**: `<link rel="modulepreload" href="/vendor/react-runtime-19.2.8.mjs">`

## ESM import maps

Import maps let you write `import x from 'react'` in a `<script type="module">` without a bundler, the browser resolves the bare specifier against the map. Stable in all major browsers since 2023.

```html
<script type="importmap">
{
  "imports": {
    "@app/runtime": "/vendor/react-runtime-19.2.8.mjs",
    "lodash-es": "/vendor/lodash-es-4.18.1.mjs",
    "@my-app/": "/src/"
  }
}
</script>
```

The trailing `/` form (`"@my-app/": "/src/"`) lets you import any file under
that local prefix. Import maps do not add integrity protection to a remote ESM
dependency graph: SRI on the first module cannot authenticate its transitive
imports. Keep the whole graph local and lockfile-verified.

## Google Sheets as database

### Fetching published CSV

Load the exact, lockfile-verified local build once before the application code:

```html
<script defer src="/vendor/papaparse-5.5.4.min.js"></script>
```

```javascript
// Google Sheets published as CSV
const SHEET_URL = 'https://docs.google.com/spreadsheets/d/e/SPREADSHEET_ID/pub?gid=0&single=true&output=csv';

async function loadFromSheets() {
  const response = await fetch(SHEET_URL);
  const csv = await response.text();

  // Parse with a locally vendored, lockfile-verified PapaParse build.
  const { data, errors } = Papa.parse(csv, {
    header: true,
    skipEmptyLines: true,
    transformHeader: (h) => h.trim().toLowerCase().replace(/\s+/g, '_')
  });

  if (errors.length > 0) {
    console.warn('CSV parsing errors:', errors);
  }

  return data;
}
```

### Real-time state with localStorage

```javascript
class DataManager {
  constructor(sheetUrl, cacheKey) {
    this.sheetUrl = sheetUrl;
    this.cacheKey = cacheKey;
    this.data = [];
    this.localState = this.loadLocalState();
  }

  loadLocalState() {
    const stored = localStorage.getItem(`${this.cacheKey}-state`);
    return stored ? JSON.parse(stored) : {};
  }

  saveLocalState() {
    localStorage.setItem(`${this.cacheKey}-state`, JSON.stringify(this.localState));
  }

  async refresh() {
    const response = await fetch(this.sheetUrl);
    const csv = await response.text();
    this.data = Papa.parse(csv, { header: true, skipEmptyLines: true }).data;

    // Merge with local state
    this.data.forEach(row => {
      const localData = this.localState[row.id];
      if (localData) {
        Object.assign(row, localData);
      }
    });

    return this.data;
  }

  updateLocal(id, updates) {
    this.localState[id] = { ...this.localState[id], ...updates };
    this.saveLocalState();

    // Update in-memory data too
    const item = this.data.find(d => d.id === id);
    if (item) Object.assign(item, updates);
  }
}

// Usage
const manager = new DataManager(SHEET_URL, 'volunteer-data');
await manager.refresh();

// Mark task as complete (stored locally)
manager.updateLocal('task-123', { completed: true, completed_at: new Date().toISOString() });
```

## htmx 2.x, server-rendered interactivity

htmx 2.0 (released June 2024) lets you add AJAX, WebSockets, and SSE to plain HTML through `hx-*` attributes. The server sends HTML fragments; the client swaps them in. No JS framework required.

```html
<script src="/vendor/htmx-2.0.10.min.js"></script>

<!-- Click button → POST to server → swap response into #result -->
<button hx-post="/api/clicked" hx-target="#result" hx-swap="innerHTML">
  Click me
</button>
<div id="result"></div>

<!-- Search-as-you-type with debounce -->
<input
  type="search"
  name="q"
  hx-get="/api/search"
  hx-trigger="input changed delay:300ms"
  hx-target="#results"
/>
<div id="results"></div>

<!-- Infinite scroll -->
<div hx-get="/api/items?page=2"
     hx-trigger="revealed"
     hx-swap="afterend">
  ...
</div>
```

htmx 2.x dropped IE support and tightened the API; if you're on htmx 1.x and don't need to migrate, 1.x still receives security patches. New code should target 2.x.

## Leaflet.js maps

### Basic map setup

```html
<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="/vendor/leaflet-1.9.4.css" />
  <link rel="stylesheet" href="/vendor/MarkerCluster-1.5.3.css" />
  <link rel="stylesheet" href="/vendor/MarkerCluster.Default-1.5.3.css" />
  <style>
    #map { height: 85vh; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>

  <script src="/vendor/leaflet-1.9.4.js"></script>
  <script src="/vendor/leaflet.markercluster-1.5.3.js"></script>
  <script src="js/app.js"></script>
</body>
</html>
```

### Map application with clustering

```javascript
// js/app.js

class MapApp {
  constructor() {
    this.map = null;
    this.markers = null;
    this.data = [];
    this.filters = {
      year: null,
      county: null,
      status: null
    };
  }

  async init() {
    this.setupMap();
    await this.loadData();
    this.renderMarkers();
    this.setupFilters();
  }

  setupMap() {
    // Initialize map centered on NJ
    this.map = L.map('map', {
      center: [40.0583, -74.4057],
      zoom: 8,
      scrollWheelZoom: false,  // Disable mouse wheel zoom
      zoomControl: false       // We'll add custom controls
    });

    // Add tile layer (CARTO Voyager)
    L.tileLayer('https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
      attribution: '&copy; OpenStreetMap, &copy; CARTO',
      maxZoom: 19
    }).addTo(this.map);

    // Add custom zoom control (top-right)
    L.control.zoom({ position: 'topright' }).addTo(this.map);

    // Initialize marker cluster group
    this.markers = L.markerClusterGroup({
      spiderfyOnMaxZoom: true,
      showCoverageOnHover: false,
      maxClusterRadius: 50,
      spiderLegPolylineOptions: { weight: 1.5, color: '#2dc8d2' }
    });

    this.map.addLayer(this.markers);
  }

  async loadData() {
    const response = await fetch('data/grantees.json');
    this.data = await response.json();
  }

  renderMarkers() {
    this.markers.clearLayers();

    const filtered = this.data.filter(item => {
      if (this.filters.year && item.year !== this.filters.year) return false;
      if (this.filters.county && item.county !== this.filters.county) return false;
      if (this.filters.status && item.status !== this.filters.status) return false;
      return true;
    });

    filtered.forEach(item => {
      if (!item.lat || !item.lng) return;

      const marker = L.marker([item.lat, item.lng], {
        icon: this.createIcon(item.status)
      });

      marker.bindPopup(this.createPopup(item));
      this.markers.addLayer(marker);
    });

    // Update count display
    document.getElementById('count').textContent = filtered.length;
  }

  createIcon(status) {
    const colors = {
      'Active': '#2dc8d2',
      'Completed': '#666666',
      'Pending': '#f34213'
    };

    return L.divIcon({
      html: `<div style="background: ${colors[status] || '#2dc8d2'}; width: 12px; height: 12px; border-radius: 50%; border: 2px solid white;"></div>`,
      className: 'custom-marker',
      iconSize: [16, 16],
      iconAnchor: [8, 8]
    });
  }

  createPopup(item) {
    return `
      <div class="popup-content">
        <h3 class="font-bold text-lg">${item.name}</h3>
        <p class="text-sm text-gray-600">${item.county} County</p>
        <p class="text-sm mt-2">${item.description || ''}</p>
        <div class="mt-2">
          <span class="px-2 py-1 text-xs rounded bg-gray-200">${item.status}</span>
          <span class="px-2 py-1 text-xs rounded bg-gray-200">${item.year}</span>
        </div>
        ${item.website ? `<a href="${item.website}" target="_blank" class="block mt-2 text-brand-primary">Visit Website →</a>` : ''}
      </div>
    `;
  }

  setupFilters() {
    // Year filter
    const years = [...new Set(this.data.map(d => d.year))].sort();
    const yearSelect = document.getElementById('year-filter');
    years.forEach(year => {
      const option = document.createElement('option');
      option.value = year;
      option.textContent = year;
      yearSelect.appendChild(option);
    });

    yearSelect.addEventListener('change', (e) => {
      this.filters.year = e.target.value || null;
      this.renderMarkers();
    });

    // Similar for county, status filters...
  }
}

// Initialize on load
document.addEventListener('DOMContentLoaded', () => {
  const app = new MapApp();
  app.init();
});
```

## React from a local ESM bundle

### Basic setup

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Zero-Build React App</title>

  <!-- Commit CSS generated by the pinned Tailwind CLI; never run a remote JIT. -->
  <link rel="stylesheet" href="index.css">

  <!-- Google Fonts -->
  <link href="https://fonts.googleapis.com/css2?family=Special+Elite&family=Roboto+Mono:wght@400;500;700&display=swap" rel="stylesheet">

</head>
<body>
  <div id="root"></div>

  <!-- The bundle is generated once from exact lockfile versions and committed. -->
  <script type="importmap">
  {
    "imports": {
      "@app/runtime": "/vendor/react-runtime-19.2.8.mjs"
    }
  }
  </script>

  <script type="module" src="index.js"></script>
</body>
</html>
```

### React with htm (no JSX, no build)

```javascript
// index.js
import { React, createRoot, htm } from '@app/runtime';

const { useState, useEffect, useRef } = React;

// Bind htm to React.createElement
const html = htm.bind(React.createElement);

// Components use html`` instead of JSX
function App() {
  const [records, setRecords] = useState([]);
  const [loading, setLoading] = useState(true);
  const [search, setSearch] = useState('');

  useEffect(() => {
    loadData();
  }, []);

  async function loadData() {
    try {
      const response = await fetch('data/archive-data.json');
      const data = await response.json();
      setRecords(data.records);
    } catch (error) {
      console.error('Failed to load data:', error);
    } finally {
      setLoading(false);
    }
  }

  const filtered = records.filter(r =>
    r.title.toLowerCase().includes(search.toLowerCase())
  );

  if (loading) {
    return html`<div class="flex items-center justify-center h-screen">
      <div class="animate-spin w-8 h-8 border-4 border-brand-primary border-t-transparent rounded-full"></div>
    </div>`;
  }

  return html`
    <div class="min-h-screen bg-gray-900 text-white">
      <header class="p-4 border-b border-gray-700">
        <h1 class="font-display text-2xl">Archive Explorer</h1>
        <input
          type="text"
          placeholder="Search records..."
          value=${search}
          onInput=${(e) => setSearch(e.target.value)}
          class="mt-2 w-full p-2 bg-gray-800 rounded border border-gray-600 focus:border-brand-primary outline-none"
        />
      </header>

      <main class="p-4">
        <${RecordList} records=${filtered} />
      </main>
    </div>
  `;
}

function RecordList({ records }) {
  return html`
    <div class="grid gap-4 md:grid-cols-2 lg:grid-cols-3">
      ${records.map(record => html`
        <${RecordCard} key=${record.id} record=${record} />
      `)}
    </div>
  `;
}

function RecordCard({ record }) {
  return html`
    <article class="p-4 bg-gray-800 rounded-lg border border-gray-700 hover:border-brand-primary transition-colors">
      <h2 class="font-display text-lg mb-2">${record.title}</h2>
      <p class="text-sm text-gray-400 mb-2">${record.publication_date}</p>
      <p class="text-sm line-clamp-3">${record.summary}</p>
      <div class="mt-2 flex flex-wrap gap-1">
        ${record.tags?.map(tag => html`
          <span key=${tag} class="px-2 py-1 text-xs bg-gray-700 rounded">${tag}</span>
        `)}
      </div>
    </article>
  `;
}

// Mount app
const root = createRoot(document.getElementById('root'));
root.render(html`<${App} />`);
```

## Data caching with localStorage

```javascript
// services/cacheService.js

const CACHE_TTL = 60 * 60 * 1000; // 1 hour

export function getCached(key) {
  const cached = localStorage.getItem(key);
  if (!cached) return null;

  try {
    const { data, timestamp } = JSON.parse(cached);
    if (Date.now() - timestamp > CACHE_TTL) {
      localStorage.removeItem(key);
      return null;
    }
    return data;
  } catch {
    localStorage.removeItem(key);
    return null;
  }
}

export function setCache(key, data) {
  localStorage.setItem(key, JSON.stringify({
    data,
    timestamp: Date.now()
  }));
}

export async function fetchWithCache(url, cacheKey) {
  // Check cache first
  const cached = getCached(cacheKey);
  if (cached) return cached;

  // Fetch fresh data
  const response = await fetch(url);
  const data = await response.json();

  // Cache for next time
  setCache(cacheKey, data);

  return data;
}

// Usage
const records = await fetchWithCache('data/archive-data.json', 'archive-records');
```