wip library to store cold objects in s3, warm objects on disk, and hot objects in memory
nodejs
typescript
1/**
2 * Tiered Storage Demo Site - Client-side JavaScript
3 *
4 * This script demonstrates how a static site can interact with
5 * the tiered storage system (in a real scenario, stats would be
6 * fetched from a backend API that uses the storage library)
7 */
8
9// Simulated cache statistics
10// In a real implementation, this would fetch from your backend
11function simulateCacheStats() {
12 return {
13 hot: {
14 items: 1,
15 bytes: 3547,
16 hits: 42,
17 misses: 3,
18 },
19 warm: {
20 items: 5,
21 bytes: 127438,
22 hits: 15,
23 misses: 2,
24 },
25 cold: {
26 items: 5,
27 bytes: 127438,
28 },
29 totalHits: 57,
30 totalMisses: 5,
31 hitRate: 0.919,
32 };
33}
34
35// Update stats display
36function updateStatsDisplay() {
37 const stats = simulateCacheStats();
38
39 const hotItems = document.getElementById('hot-items');
40 const warmItems = document.getElementById('warm-items');
41 const coldItems = document.getElementById('cold-items');
42 const hitRate = document.getElementById('hit-rate');
43
44 if (hotItems) hotItems.textContent = stats.hot.items;
45 if (warmItems) warmItems.textContent = stats.warm.items;
46 if (coldItems) coldItems.textContent = stats.cold.items;
47 if (hitRate) hitRate.textContent = `${(stats.hitRate * 100).toFixed(1)}%`;
48}
49
50// Smooth scrolling for anchor links
51document.querySelectorAll('a[href^="#"]').forEach(anchor => {
52 anchor.addEventListener('click', function (e) {
53 e.preventDefault();
54 const target = document.querySelector(this.getAttribute('href'));
55 if (target) {
56 target.scrollIntoView({
57 behavior: 'smooth',
58 block: 'start'
59 });
60 }
61 });
62});
63
64// Initialize stats when page loads
65if (document.readyState === 'loading') {
66 document.addEventListener('DOMContentLoaded', updateStatsDisplay);
67} else {
68 updateStatsDisplay();
69}
70
71// Update stats periodically (simulate real-time updates)
72setInterval(updateStatsDisplay, 5000);
73
74// Add active class to navigation based on current page
75const currentPage = window.location.pathname.split('/').pop() || 'index.html';
76document.querySelectorAll('nav a').forEach(link => {
77 if (link.getAttribute('href') === currentPage) {
78 link.classList.add('active');
79 }
80});
81
82// Log page view (in real app, would send to analytics)
83console.log(`[TieredCache] Page viewed: ${currentPage}`);
84console.log(`[TieredCache] This page was likely served from ${currentPage === 'index.html' ? 'hot tier (memory)' : 'warm tier (disk)'}`);