A music player that connects to your cloud/distributed storage.

feat: view transitions

+23 -5
+7
src/_includes/layouts/diffuse.vto
··· 28 28 <meta name="msapplication-TileColor" content="#8a90a9" /> 29 29 <meta name="theme-color" content="#8a90a9" /> 30 30 31 + <!-- Preload fonts so they're ready before first paint (prevents flash during view transitions) --> 32 + <link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/InterVariable.woff2" /> 33 + <link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/InterVariable-Italic.woff2" /> 34 + <link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/CommitMonoVariable.woff2" /> 35 + <link rel="preload" as="font" type="font/woff2" crossorigin href="vendor/@phosphor-icons/bold/Phosphor-Bold.woff2" /> 36 + <link rel="preload" as="font" type="font/woff2" crossorigin href="vendor/@phosphor-icons/fill/Phosphor-Fill.woff2" /> 37 + 31 38 <!-- Styles --> 32 39 {{ for url of styles }} 33 40 <link rel="stylesheet" href="{{ url }}" />
+11 -5
src/service-worker-offline.js
··· 85 85 const cidKey = cidUrl(cid); 86 86 87 87 const caches = await openCaches(); 88 + const minRequest = new Request(request.url); 88 89 89 90 // Only store the content if we haven't seen this CID before 90 91 if (!(await caches.content.match(cidKey))) { 91 92 await caches.content.put(new Request(cidKey), response); 92 93 } 93 94 94 - // Update the URL → CID map 95 - await caches.index.put( 96 - new Request(request.url), 97 - new Response(cid, { headers: { "content-type": "text/plain" } }), 98 - ); 95 + if (!(await caches.index.match(minRequest))) { 96 + // Update the URL → CID map 97 + await caches.index.put( 98 + new Request(request.url), 99 + new Response(cid, { headers: { "content-type": "text/plain" } }), 100 + ); 101 + } 99 102 } 100 103 101 104 /** ··· 108 111 const caches = await openCaches(); 109 112 110 113 const indexEntry = await caches.index.match(request); 114 + if (!indexEntry) console.log("⚔️", request.url); 115 + 111 116 if (!indexEntry) return undefined; 112 117 113 118 const cid = await indexEntry.text(); 119 + console.log("REQ", request.url, cid); 114 120 return caches.content.match(cidUrl(cid)); 115 121 } 116 122
+5
src/styles/diffuse/page.css
··· 1 + @view-transition { 2 + navigation: auto; 3 + } 4 + 1 5 body { 2 6 background-color: var(--bg-color); 3 7 color: var(--text-color); 8 + text-rendering: optimizeLegibility; 4 9 } 5 10 6 11 [id] {