image cache on cloudflare r2
dunkirk.sh
1<!DOCTYPE html>
2<html lang="en">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport" content="width=device-width, initial-scale=1.0">
7 <title>The L4 Cache</title>
8 <meta name="description" content="traffic statistics for the l4 cache">
9
10 <!-- Favicon -->
11 <link rel="icon"
12 href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🧳</text></svg>">
13
14 <!-- Open Graph -->
15 <meta property="og:title" content="The L4 Cache">
16 <meta property="og:description" content="traffic statistics for the l4 cache">
17 <meta property="og:type" content="website">
18 <meta property="og:image" content="https://l4-bucket.dunkirk.sh/og-l4.png">
19
20 <!-- Twitter -->
21 <meta name="twitter:card" content="summary_large_image">
22 <meta name="twitter:title" content="The L4 Cache">
23 <meta name="twitter:description" content="traffic statistics for the l4 cache">
24 <meta name="twitter:image" content="https://l4-bucket.dunkirk.sh/og-l4.png">
25
26 <link rel="stylesheet" href="./dashboard.css">
27</head>
28
29<body>
30 <main class="dashboard">
31 <header>
32 <h1>The L4 Cache</h1>
33 <nav class="time-selector" aria-label="Time range selection">
34 <button data-days="1">24h</button>
35 <button data-days="7" class="active">7d</button>
36 <button data-days="30">30d</button>
37 <button data-days="90">90d</button>
38 <button data-days="365">1y</button>
39 </nav>
40 </header>
41
42 <section class="stats-grid" aria-label="Statistics summary">
43 <article class="stat-card">
44 <div class="label">Total Hits</div>
45 <div class="value" id="total-hits">—</div>
46 </article>
47 <article class="stat-card">
48 <div class="label">Unique Images</div>
49 <div class="value" id="unique-images">—</div>
50 </article>
51 </section>
52
53 <section class="chart-container">
54 <h2>Traffic Overview</h2>
55 <div class="chart-outer">
56 <div class="chart-wrapper" id="chart" role="img" aria-label="Traffic over time chart"></div>
57 <div id="chart-loading" class="chart-loading">Refining...</div>
58 </div>
59 <p class="chart-hint">Drag to zoom, double-click to reset</p>
60 </section>
61
62 <section class="top-images">
63 <h2>Top Images</h2>
64 <div class="image-list" id="image-list">
65 <div class="loading">Loading...</div>
66 </div>
67 </section>
68
69 <footer>
70 <span>Made with <span class="heart">♥</span> by
71 <a href="https://dunkirk.sh" target="_blank" rel="noopener noreferrer">Kieran Klukas</a>
72 </span>
73 <a class="repo-link" href="https://tangled.sh/dunkirk.sh/l4" target="_blank" rel="noopener noreferrer">
74 View source on Tangled
75 </a>
76 </footer>
77 </main>
78
79 <script type="module" src="./dashboard.ts"></script>
80</body>
81
82</html>