tangled
alpha
login
or
join now
tokono.ma
/
diffuse
5
fork
atom
A music player that connects to your cloud/distributed storage.
5
fork
atom
overview
issues
4
pulls
pipelines
feat: view transitions
Steven Vandevelde
1 week ago
ea281c0a
efd48bbf
+23
-5
3 changed files
expand all
collapse all
unified
split
src
_includes
layouts
diffuse.vto
service-worker-offline.js
styles
diffuse
page.css
+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
31
+
<!-- Preload fonts so they're ready before first paint (prevents flash during view transitions) -->
32
32
+
<link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/InterVariable.woff2" />
33
33
+
<link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/InterVariable-Italic.woff2" />
34
34
+
<link rel="preload" as="font" type="font/woff2" crossorigin href="fonts/CommitMonoVariable.woff2" />
35
35
+
<link rel="preload" as="font" type="font/woff2" crossorigin href="vendor/@phosphor-icons/bold/Phosphor-Bold.woff2" />
36
36
+
<link rel="preload" as="font" type="font/woff2" crossorigin href="vendor/@phosphor-icons/fill/Phosphor-Fill.woff2" />
37
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
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
94
-
// Update the URL → CID map
95
95
-
await caches.index.put(
96
96
-
new Request(request.url),
97
97
-
new Response(cid, { headers: { "content-type": "text/plain" } }),
98
98
-
);
95
95
+
if (!(await caches.index.match(minRequest))) {
96
96
+
// Update the URL → CID map
97
97
+
await caches.index.put(
98
98
+
new Request(request.url),
99
99
+
new Response(cid, { headers: { "content-type": "text/plain" } }),
100
100
+
);
101
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
114
+
if (!indexEntry) console.log("⚔️", request.url);
115
115
+
111
116
if (!indexEntry) return undefined;
112
117
113
118
const cid = await indexEntry.text();
119
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
1
+
@view-transition {
2
2
+
navigation: auto;
3
3
+
}
4
4
+
1
5
body {
2
6
background-color: var(--bg-color);
3
7
color: var(--text-color);
8
8
+
text-rendering: optimizeLegibility;
4
9
}
5
10
6
11
[id] {