wip library to store cold objects in s3, warm objects on disk, and hot objects in memory
nekomimi.pet
nodejs
typescript
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>Tiered Storage Demo Site</title>
7 <link rel="stylesheet" href="style.css">
8</head>
9<body>
10 <header>
11 <nav>
12 <div class="logo">🗄️ TieredCache</div>
13 <ul>
14 <li><a href="index.html" class="active">Home</a></li>
15 <li><a href="about.html">About</a></li>
16 <li><a href="docs.html">Docs</a></li>
17 </ul>
18 </nav>
19 </header>
20
21 <main>
22 <section class="hero">
23 <h1>Lightning-Fast Multi-Tier Caching</h1>
24 <p>Store your data across memory, disk, and cloud storage with automatic promotion and intelligent eviction.</p>
25 <div class="cta-buttons">
26 <a href="#features" class="btn btn-primary">Learn More</a>
27 <a href="docs.html" class="btn btn-secondary">Documentation</a>
28 </div>
29 </section>
30
31 <section id="features" class="features">
32 <h2>Features</h2>
33 <div class="feature-grid">
34 <div class="feature-card">
35 <div class="feature-icon">⚡</div>
36 <h3>Hot Tier (Memory)</h3>
37 <p>Lightning-fast access with LRU eviction. Perfect for frequently accessed data like index.html.</p>
38 </div>
39 <div class="feature-card">
40 <div class="feature-icon">💾</div>
41 <h3>Warm Tier (Disk)</h3>
42 <p>Fast local storage with configurable eviction policies. Ideal for site assets and media.</p>
43 </div>
44 <div class="feature-card">
45 <div class="feature-icon">☁️</div>
46 <h3>Cold Tier (S3)</h3>
47 <p>Unlimited cloud storage as your source of truth. Supports S3, R2, MinIO, and more.</p>
48 </div>
49 </div>
50 </section>
51
52 <section class="architecture">
53 <h2>How It Works</h2>
54 <div class="tier-diagram">
55 <div class="tier hot">
56 <div class="tier-label">Hot (Memory)</div>
57 <div class="tier-content">index.html ✓</div>
58 </div>
59 <div class="arrow">↓</div>
60 <div class="tier warm">
61 <div class="tier-label">Warm (Disk)</div>
62 <div class="tier-content">index.html, style.css, images ✓</div>
63 </div>
64 <div class="arrow">↓</div>
65 <div class="tier cold">
66 <div class="tier-label">Cold (S3)</div>
67 <div class="tier-content">All files (source of truth) ✓</div>
68 </div>
69 </div>
70 <p class="diagram-note">Data cascades down on writes, bubbles up on reads</p>
71 </section>
72
73 <section class="stats" id="cache-stats">
74 <h2>Live Cache Statistics</h2>
75 <div class="stats-grid">
76 <div class="stat-card">
77 <div class="stat-value" id="hot-items">-</div>
78 <div class="stat-label">Hot Tier Items</div>
79 </div>
80 <div class="stat-card">
81 <div class="stat-value" id="warm-items">-</div>
82 <div class="stat-label">Warm Tier Items</div>
83 </div>
84 <div class="stat-card">
85 <div class="stat-value" id="cold-items">-</div>
86 <div class="stat-label">Cold Tier Items</div>
87 </div>
88 <div class="stat-card">
89 <div class="stat-value" id="hit-rate">-</div>
90 <div class="stat-label">Cache Hit Rate</div>
91 </div>
92 </div>
93 </section>
94 </main>
95
96 <footer>
97 <p>© 2024 Tiered Storage Library. Built with ❤️ for performance.</p>
98 <p><small>This is a demo site to showcase the tiered-storage library capabilities.</small></p>
99 </footer>
100
101 <script src="script.js"></script>
102</body>
103</html>