ez-reads 1.0.0

package/src/generator.mjs

@@ -0,0 +1,656 @@
+import { fileURLToPath } from 'url';
+import path from 'path';
+import fs from 'fs-extra';
+import { execSync } from 'child_process';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const TEMPLATE_DIR = path.resolve(__dirname, '..', 'template');
+
+/**
+ * Build a static site for a paper into output/<slug>/
+ * Preserves all previously generated sites.
+ * Regenerates the output/index.html library page after each build.
+ *
+ * @returns {{ slug, siteDir, sitePath, indexPath }}
+ */
+export async function generateSite(distilledData, outputDir) {
+  const slug = makeSlug(distilledData.title);
+  const siteDir = path.join(outputDir, slug);
+  const tmpDir = path.join(outputDir, '.tmp-build');
+
+  try {
+    // Remove previous version of the same paper (if re-running) and stale temp dir
+    await fs.remove(siteDir);
+    await fs.remove(tmpDir);
+
+    // Copy template into a temp build directory
+    await fs.copy(TEMPLATE_DIR, tmpDir);
+
+    // Inject the distilled paper data (with Groq API key for chat assistant)
+    const buildData = { ...distilledData };
+    if (process.env.GROQ_API_KEY) {
+      buildData.groqApiKey = process.env.GROQ_API_KEY;
+    }
+    const dataPath = path.join(tmpDir, 'src', 'data', 'paper.json');
+    await fs.writeJson(dataPath, buildData, { spaces: 2 });
+
+    // Download figure images into public/ so Vite includes them in the build
+    if (distilledData.figures?.length > 0) {
+      const figDir = path.join(tmpDir, 'public', 'figures');
+      await fs.ensureDir(figDir);
+
+      // Migrate legacy data: re-fetch original figure URLs from ArXiv
+      // for figures that only have local relative paths (from previous builds)
+      const needsMigration = distilledData.figures.some(
+        (f) => !f.originalUrl && f.url && !f.url.startsWith('http')
+      );
+      if (needsMigration && distilledData.url) {
+        try {
+          const { fetchPaper } = await import('./fetcher.mjs');
+          const freshPaper = await fetchPaper(distilledData.url);
+          if (freshPaper.figures?.length > 0) {
+            const freshMap = new Map(freshPaper.figures.map((f) => [f.id, f.url]));
+            for (const fig of distilledData.figures) {
+              if (!fig.originalUrl && freshMap.has(fig.id)) {
+                fig.originalUrl = freshMap.get(fig.id);
+              }
+            }
+          }
+        } catch (_) {
+          // If re-fetch fails, figures will just be missing
+        }
+      }
+
+      for (const fig of distilledData.figures) {
+        // Determine the remote URL to download from
+        const remoteUrl = fig.originalUrl || fig.url;
+        if (!remoteUrl || !remoteUrl.startsWith('http')) continue;
+
+        // Preserve the original remote URL so rebuilds can re-download
+        if (!fig.originalUrl) {
+          fig.originalUrl = remoteUrl;
+        }
+
+        try {
+          const res = await fetch(remoteUrl, {
+            headers: { 'User-Agent': 'ez-reads/1.0' },
+            redirect: 'follow',
+          });
+          if (!res.ok) continue;
+          const ext = path.extname(new URL(remoteUrl).pathname) || '.png';
+          const filename = `${fig.id}${ext}`;
+          const buffer = Buffer.from(await res.arrayBuffer());
+          await fs.writeFile(path.join(figDir, filename), buffer);
+          fig.url = `./figures/${filename}`;
+        } catch (_) {
+          // Fall back to remote URL if download fails
+          fig.url = remoteUrl;
+        }
+      }
+
+      // Re-write paper.json with updated local figure URLs
+      buildData.figures = distilledData.figures;
+      await fs.writeJson(dataPath, buildData, { spaces: 2 });
+    }
+
+    // Install dependencies & build static site
+    execSync('npm install', {
+      cwd: tmpDir,
+      stdio: 'pipe',
+      timeout: 120_000,
+    });
+
+    execSync('npm run build', {
+      cwd: tmpDir,
+      stdio: 'pipe',
+      timeout: 60_000,
+    });
+
+    // Move built dist/ into the permanent output/<slug>/ folder
+    await fs.copy(path.join(tmpDir, 'dist'), siteDir);
+
+    // Post-process the built HTML:
+    // 1. Strip "crossorigin" attrs so the page works via file:// protocol
+    // 2. Set the <title> to the actual paper title
+    const builtHtml = path.join(siteDir, 'index.html');
+    let html = await fs.readFile(builtHtml, 'utf-8');
+    html = html.replace(/\s+crossorigin/g, '');
+    if (distilledData.title) {
+      html = html.replace(/<title>[^<]*<\/title>/, `<title>${distilledData.title}</title>`);
+    }
+    await fs.writeFile(builtHtml, html, 'utf-8');
+
+    // Save metadata alongside the built site (used by the index page)
+    await fs.writeJson(path.join(siteDir, 'meta.json'), {
+      title: distilledData.title || 'Untitled Paper',
+      authors: distilledData.authors || [],
+      tldr: distilledData.tldr || '',
+      url: distilledData.url || '',
+      slug,
+      color_theme: distilledData.color_theme || { primary: '#2563eb', accent: '#f59e0b' },
+      publishedDate: distilledData.publishedDate || null,
+      generatedAt: new Date().toISOString(),
+    }, { spaces: 2 });
+
+    // Save the full paper data so the site can be rebuilt later
+    await fs.writeJson(path.join(siteDir, 'data.json'), distilledData, { spaces: 2 });
+
+  } finally {
+    // Always clean up the temp build directory
+    await fs.remove(tmpDir);
+  }
+
+  // Regenerate the library index page
+  const indexPath = path.join(outputDir, 'index.html');
+  await generateIndex(outputDir, indexPath);
+
+  return {
+    slug,
+    siteDir,
+    sitePath: path.join(siteDir, 'index.html'),
+    indexPath,
+  };
+}
+
+/**
+ * Rebuild a single paper site from its saved data.json.
+ * Reads data.json from the paper's output directory, rebuilds the site,
+ * and regenerates the library index.
+ */
+export async function rebuildSite(slug, outputDir) {
+  const siteDir = path.join(outputDir, slug);
+  const dataPath = path.join(siteDir, 'data.json');
+
+  if (!await fs.pathExists(dataPath)) {
+    throw new Error(`No data.json found for "${slug}". Cannot rebuild without full paper data.`);
+  }
+
+  const distilledData = await fs.readJson(dataPath);
+  return generateSite(distilledData, outputDir);
+}
+
+/**
+ * Rebuild ALL paper sites that have a data.json.
+ * Useful after template changes to propagate updates to all existing sites.
+ */
+export async function rebuildAll(outputDir) {
+  const entries = await fs.readdir(outputDir, { withFileTypes: true });
+  const results = [];
+
+  for (const entry of entries) {
+    if (!entry.isDirectory() || entry.name.startsWith('.')) continue;
+    const dataPath = path.join(outputDir, entry.name, 'data.json');
+    if (await fs.pathExists(dataPath)) {
+      const distilledData = await fs.readJson(dataPath);
+      const result = await generateSite(distilledData, outputDir);
+      results.push(result);
+    }
+  }
+
+  return results;
+}
+
+// ---------- slug helper ----------
+
+function makeSlug(title) {
+  if (!title) return `paper-${Date.now()}`;
+  const slug = title
+    .toLowerCase()
+    .replace(/[^a-z0-9]+/g, '-')
+    .replace(/^-+|-+$/g, '')
+    .slice(0, 64);
+  return slug || `paper-${Date.now()}`;
+}
+
+// ---------- index page generator ----------
+
+export async function generateIndex(outputDir, indexPath) {
+  // Scan all subdirectories for meta.json files
+  const entries = await fs.readdir(outputDir, { withFileTypes: true });
+  const papers = [];
+
+  for (const entry of entries) {
+    if (!entry.isDirectory() || entry.name.startsWith('.')) continue;
+    const metaPath = path.join(outputDir, entry.name, 'meta.json');
+    if (await fs.pathExists(metaPath)) {
+      try {
+        const meta = await fs.readJson(metaPath);
+        papers.push(meta);
+      } catch (_) {
+        // Skip malformed meta.json
+      }
+    }
+  }
+
+  // Sort newest first
+  papers.sort((a, b) => new Date(b.generatedAt) - new Date(a.generatedAt));
+
+  const html = buildIndexHtml(papers);
+  await fs.writeFile(indexPath, html, 'utf-8');
+}
+
+function buildIndexHtml(papers) {
+  const paperCards = papers.map((p, idx) => {
+    // Prefer publishedDate over generatedAt
+    // For date-only strings (YYYY-MM-DD), parse as local time to avoid timezone shifts
+    const rawDate = p.publishedDate || p.generatedAt;
+    let date;
+    if (p.publishedDate && /^\d{4}-\d{2}-\d{2}$/.test(p.publishedDate)) {
+      const [y, m, d] = p.publishedDate.split('-').map(Number);
+      date = new Date(y, m - 1, d); // local time, no UTC shift
+    } else {
+      date = new Date(rawDate);
+    }
+    const formattedDate = date.toLocaleDateString('en-US', { year: 'numeric', month: 'short', day: 'numeric' });
+    const dateStr = p.publishedDate ? `Published ${formattedDate}` : formattedDate;
+    const authors = (p.authors || []).slice(0, 4).join(', ')
+      + (p.authors?.length > 4 ? ` +${p.authors.length - 4} more` : '');
+    const primary = p.color_theme?.primary || '#2563eb';
+    const accent = p.color_theme?.accent || '#f59e0b';
+
+    return `
+    <a href="./${p.slug}/index.html" class="card" style="--card-primary: ${primary}; --card-accent: ${accent}; --delay: ${idx * 80}ms;"
+       data-title="${escapeHtml(p.title).toLowerCase()}"
+       data-authors="${escapeHtml(authors).toLowerCase()}"
+       data-tldr="${escapeHtml(p.tldr).toLowerCase()}">
+      <div class="card-color-bar"></div>
+      <div class="card-body">
+        <div class="card-meta">
+          <span class="card-date">${dateStr}</span>
+          <span class="card-badge" style="background: ${primary}15; color: ${primary};">${escapeHtml((p.slug || '').split('-').slice(0, 2).join(' '))}</span>
+        </div>
+        <h2 class="card-title">${escapeHtml(p.title)}</h2>
+        <p class="card-authors">${escapeHtml(authors)}</p>
+        <p class="card-tldr">${escapeHtml(p.tldr)}</p>
+        <div class="card-footer">
+          ${p.url ? `<span class="card-link" onclick="event.preventDefault(); event.stopPropagation(); window.open('${escapeHtml(p.url)}', '_blank');">View original paper &nearr;</span>` : ''}
+          <span class="card-arrow">
+            <svg width="20" height="20" viewBox="0 0 20 20" fill="none"><path d="M4 10h12m0 0l-4-4m4 4l-4 4" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>
+          </span>
+        </div>
+      </div>
+    </a>`;
+  }).join('\n');
+
+  const emptyState = papers.length === 0
+    ? `<div class="empty">
+        <div class="empty-icon">
+          <svg width="64" height="64" viewBox="0 0 24 24" fill="none" stroke="#94a3b8" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/><polyline points="14 2 14 8 20 8"/><line x1="16" y1="13" x2="8" y2="13"/><line x1="16" y1="17" x2="8" y2="17"/><polyline points="10 9 9 9 8 9"/></svg>
+        </div>
+        <h2>No papers yet</h2>
+        <p>Run <code>npm start</code> and paste an ArXiv URL or DOI<br/>to generate your first paper site.</p>
+      </div>`
+    : '';
+
+  const searchBar = papers.length > 0
+    ? `<div class="search-wrap">
+        <svg class="search-icon" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
+        <input type="text" id="search" class="search" placeholder="Search papers..." autocomplete="off" />
+        <span class="search-count" id="searchCount">${papers.length} paper${papers.length === 1 ? '' : 's'}</span>
+      </div>`
+    : '';
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <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=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&family=Playfair+Display:wght@700;800;900&display=swap" rel="stylesheet" />
+  <title>Easy Reads | Library</title>
+  <style>
+    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+    body {
+      font-family: 'Inter', system-ui, sans-serif;
+      background: #0c0f1a;
+      color: #e2e8f0;
+      -webkit-font-smoothing: antialiased;
+      min-height: 100vh;
+    }
+
+    /* ── header with CLI-style banner ── */
+    header {
+      background: linear-gradient(170deg, #0c0f1a 0%, #111833 50%, #0c0f1a 100%);
+      padding: 3rem 1.5rem 2rem;
+      text-align: center;
+      position: relative;
+      overflow: hidden;
+    }
+    header::before {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background:
+        radial-gradient(ellipse 600px 300px at 50% 40%, rgba(56,189,248,0.06) 0%, transparent 70%),
+        radial-gradient(ellipse 400px 250px at 70% 70%, rgba(56,189,248,0.03) 0%, transparent 70%);
+      pointer-events: none;
+    }
+    header::after {
+      content: '';
+      position: absolute;
+      inset: 0;
+      background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
+      pointer-events: none;
+      opacity: 0.5;
+    }
+    .banner {
+      position: relative;
+      display: inline-block;
+      padding: 2rem 2.5rem 1.5rem;
+    }
+    .banner-title {
+      font-family: 'Playfair Display', Georgia, 'Times New Roman', serif;
+      font-size: clamp(2.8rem, 8vw, 4.5rem);
+      font-weight: 900;
+      color: #38bdf8;
+      letter-spacing: 0.04em;
+      line-height: 1.1;
+      text-transform: uppercase;
+      text-shadow: 2px 3px 6px rgba(0,0,0,0.5);
+      margin: 0;
+    }
+    .banner .tagline {
+      font-family: 'Inter', system-ui, sans-serif;
+      font-size: 0.92rem;
+      color: rgba(56,189,248,0.55);
+      font-weight: 500;
+      margin-top: 1rem;
+      letter-spacing: 0.08em;
+      text-transform: uppercase;
+    }
+    .banner .film-strip {
+      margin-top: 1.25rem;
+      display: flex;
+      justify-content: center;
+      gap: 6px;
+    }
+    .banner .film-strip span {
+      width: 18px;
+      height: 12px;
+      border-radius: 2px;
+      border: 1.5px solid rgba(56,189,248,0.2);
+      display: inline-block;
+    }
+    .header-meta {
+      position: relative;
+      margin-top: 1.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: 1rem;
+    }
+    .count-badge {
+      display: inline-flex;
+      align-items: center;
+      gap: 0.4rem;
+      background: rgba(56,189,248,0.1);
+      border: 1px solid rgba(56,189,248,0.2);
+      padding: 0.4rem 1rem;
+      border-radius: 999px;
+      font-size: 0.82rem;
+      color: rgba(56,189,248,0.8);
+      font-weight: 600;
+    }
+    .count-badge .dot {
+      width: 6px; height: 6px;
+      border-radius: 50%;
+      background: #38bdf8;
+      animation: pulse 2s ease-in-out infinite;
+    }
+    @keyframes pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.4; transform: scale(0.8); }
+    }
+
+    /* ── search ── */
+    main {
+      max-width: 900px;
+      margin: 0 auto;
+      padding: 2rem 1.5rem 4rem;
+    }
+    .search-wrap {
+      position: relative;
+      margin-bottom: 2rem;
+    }
+    .search-icon {
+      position: absolute;
+      left: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+      color: #475569;
+      pointer-events: none;
+    }
+    .search {
+      width: 100%;
+      padding: 0.85rem 1rem 0.85rem 2.75rem;
+      border: 1px solid #1e293b;
+      border-radius: 12px;
+      background: #111827;
+      color: #e2e8f0;
+      font-size: 0.95rem;
+      font-family: inherit;
+      outline: none;
+      transition: border-color 0.2s, box-shadow 0.2s;
+    }
+    .search::placeholder { color: #475569; }
+    .search:focus {
+      border-color: #38bdf8;
+      box-shadow: 0 0 0 3px rgba(56,189,248,0.1);
+    }
+    .search-count {
+      position: absolute;
+      right: 1rem;
+      top: 50%;
+      transform: translateY(-50%);
+      font-size: 0.78rem;
+      color: #475569;
+      font-weight: 500;
+      pointer-events: none;
+      transition: color 0.2s;
+    }
+
+    /* ── cards ── */
+    .grid {
+      display: flex;
+      flex-direction: column;
+      gap: 1rem;
+    }
+    .card {
+      display: block;
+      background: #151b2e;
+      border: 1px solid #1e293b;
+      border-radius: 14px;
+      overflow: hidden;
+      text-decoration: none;
+      color: inherit;
+      transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
+      opacity: 0;
+      transform: translateY(16px);
+      animation: cardIn 0.4s ease forwards;
+      animation-delay: var(--delay, 0ms);
+    }
+    @keyframes cardIn {
+      to { opacity: 1; transform: translateY(0); }
+    }
+    .card:hover {
+      transform: translateY(-4px);
+      box-shadow: 0 16px 40px -12px rgba(0,0,0,0.5);
+      border-color: var(--card-primary);
+    }
+    .card.hidden {
+      display: none;
+    }
+    .card-color-bar {
+      height: 3px;
+      background: linear-gradient(90deg, var(--card-primary), var(--card-accent));
+      opacity: 0.7;
+      transition: opacity 0.2s;
+    }
+    .card:hover .card-color-bar { opacity: 1; }
+    .card-body { padding: 1.25rem 1.5rem 1.5rem; }
+    .card-meta {
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      margin-bottom: 0.65rem;
+    }
+    .card-date {
+      font-size: 0.75rem;
+      color: #64748b;
+      font-weight: 500;
+    }
+    .card-badge {
+      font-size: 0.68rem;
+      font-weight: 600;
+      padding: 0.15rem 0.6rem;
+      border-radius: 999px;
+      text-transform: capitalize;
+    }
+    .card-title {
+      font-size: 1.2rem;
+      font-weight: 700;
+      line-height: 1.4;
+      margin-bottom: 0.3rem;
+      color: #f1f5f9;
+      transition: color 0.2s;
+    }
+    .card:hover .card-title { color: var(--card-primary); }
+    .card-authors {
+      font-size: 0.82rem;
+      color: #64748b;
+      margin-bottom: 0.75rem;
+    }
+    .card-tldr {
+      font-size: 0.88rem;
+      color: #94a3b8;
+      line-height: 1.65;
+      margin-bottom: 1rem;
+    }
+    .card-footer {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    .card-link {
+      font-size: 0.78rem;
+      color: var(--card-primary);
+      font-weight: 600;
+      cursor: pointer;
+      opacity: 0.8;
+      transition: opacity 0.2s;
+    }
+    .card-link:hover { opacity: 1; text-decoration: underline; }
+    .card-arrow {
+      color: #334155;
+      transition: color 0.2s, transform 0.2s;
+      display: flex;
+    }
+    .card:hover .card-arrow {
+      color: var(--card-primary);
+      transform: translateX(4px);
+    }
+
+    /* ── no results ── */
+    .no-results {
+      text-align: center;
+      padding: 3rem 1rem;
+      color: #475569;
+      display: none;
+    }
+    .no-results.visible { display: block; }
+    .no-results p { font-size: 0.95rem; }
+
+    /* ── empty state ── */
+    .empty {
+      text-align: center;
+      padding: 5rem 2rem;
+      color: #475569;
+    }
+    .empty-icon { margin-bottom: 1.5rem; opacity: 0.5; }
+    .empty h2 { font-size: 1.3rem; color: #94a3b8; margin-bottom: 0.75rem; font-weight: 700; }
+    .empty p { font-size: 0.95rem; line-height: 1.7; color: #64748b; }
+    .empty code {
+      background: #1e293b;
+      color: #38bdf8;
+      padding: 0.2rem 0.6rem;
+      border-radius: 6px;
+      font-size: 0.85rem;
+      font-family: 'JetBrains Mono', monospace;
+    }
+
+    /* ── footer ── */
+    footer {
+      text-align: center;
+      padding: 2rem;
+      color: #334155;
+      font-size: 0.8rem;
+    }
+  </style>
+</head>
+<body>
+  <header>
+    <div class="banner">
+      <h1 class="banner-title">Easy<br>Reads</h1>
+      <div class="tagline">Make beautiful sites from research papers.</div>
+      <div class="film-strip"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></div>
+    </div>
+    ${papers.length > 0 ? `
+    <div class="header-meta">
+      <div class="count-badge"><span class="dot"></span> ${papers.length} paper${papers.length === 1 ? '' : 's'} in library</div>
+    </div>` : ''}
+  </header>
+  <main>
+    ${searchBar}
+    ${emptyState}
+    <div class="grid" id="grid">
+      ${paperCards}
+    </div>
+    <div class="no-results" id="noResults">
+      <p>No papers match your search.</p>
+    </div>
+  </main>
+  <footer>Easy Reads</footer>
+  <script>
+    const search = document.getElementById('search');
+    if (search) {
+      const cards = document.querySelectorAll('.card');
+      const noResults = document.getElementById('noResults');
+      const countEl = document.getElementById('searchCount');
+      const total = cards.length;
+
+      search.addEventListener('input', () => {
+        const q = search.value.toLowerCase().trim();
+        let visible = 0;
+        cards.forEach((card, i) => {
+          const text = (card.dataset.title || '') + ' ' + (card.dataset.authors || '') + ' ' + (card.dataset.tldr || '');
+          const show = !q || text.includes(q);
+          card.classList.toggle('hidden', !show);
+          if (show) {
+            card.style.setProperty('--delay', (visible * 60) + 'ms');
+            card.style.animation = 'none';
+            card.offsetHeight; /* reflow */
+            card.style.animation = '';
+            visible++;
+          }
+        });
+        noResults.classList.toggle('visible', visible === 0 && q.length > 0);
+        countEl.textContent = q
+          ? visible + ' of ' + total
+          : total + ' paper' + (total === 1 ? '' : 's');
+      });
+    }
+  </script>
+</body>
+</html>`;
+}
+
+function escapeHtml(str) {
+  if (!str) return '';
+  return str
+    .replace(/&/g, '&amp;')
+    .replace(/</g, '&lt;')
+    .replace(/>/g, '&gt;')
+    .replace(/"/g, '&quot;')
+    .replace(/'/g, '&#039;');
+}

package/template/index.html

@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <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=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet" />
+    <title>Paper Site</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="./src/main.jsx"></script>
+  </body>
+</html>