Skip to content

Commit 6218eb3

Browse files
ZwyxZwyx
committed
Implement PWA
1 parent f153786 commit 6218eb3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

59 files changed

+3213
-232
lines changed

‎.vscode/settings.json

+1
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"behavior",
2424
"CCPA",
2525
"libraryofbabel",
26+
"magick",
2627
"mxschmitt",
2728
"Snelling"
2829
]

‎README.md

+4-2
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,10 @@
44

55
Explore all the books.
66

7-
<!-- <a href="https://babel.zwyx.dev" target="_blank"><img src="./res/library-square-no-frame.svg" alt="The Library of Babel" width="64"/></a> -->
8-
97
[babel.zwyx.dev](https://babel.zwyx.dev)
108

9+
<!-- <a href="https://babel.zwyx.dev" target="_blank"><img src="./res/webmaxru--progressive-web-apps-logo--PWA-dark-en.svg" alt="Go to babel.zwyx.dev" width="200px" /></a>
10+
<span>     </span>
11+
<a href="https://play.google.com/store/apps/details?id=dev.zwyx.babel.twa" target="_blank"><img src="./res/google-play-en-badge-web-generic.png" alt="Get The Library of Babel on Google Play" width="200px" /></a> -->
12+
1113
</div>

‎generate-pwa-assets.sh

+15
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
#!/bin/sh
2+
3+
npx pwa-asset-generator --opaque false --icon-only --favicon --padding '0' --type png res/library.svg public
4+
5+
npx pwa-asset-generator --background '#020817' --padding '17%' --type png res/library.svg public
6+
7+
roundCorners () {
8+
/opt/magick/magick convert -size "$2" xc:none -draw "roundrectangle 0,0,$3" tmp-mask.png
9+
/opt/magick/magick convert "$1" -matte tmp-mask.png -compose DstIn -composite "$1"
10+
rm tmp-mask.png
11+
}
12+
13+
roundCorners public/manifest-icon-192.maskable.png 192x192 192,192,24,24
14+
roundCorners public/manifest-icon-512.maskable.png 512x512 512,512,64,64
15+
roundCorners public/apple-icon-180.png 180x180 180,180,22,22

‎index.html

+184-5
Original file line numberDiff line numberDiff line change
@@ -2,17 +2,196 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<meta
6-
name="viewport"
7-
content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
8-
/>
95

106
<title>Library of Babel</title>
117
<meta name="description" content="Explore all the books." />
128

139
<meta property="og:title" content="The Library of Babel" />
10+
<meta property="og:description" content="Explore all the books." />
11+
<meta property="og:image" content="favicon-196.png" />
12+
13+
<meta name="theme-color" content="#020817" />
1414

15-
<link rel="icon" type="image/png" href="Babel-220x220-rounded.png" />
15+
<meta
16+
name="viewport"
17+
content="width=device-width, initial-scale=1.0, interactive-widget=resizes-content"
18+
/>
19+
20+
<!-- Generated by `pwa-asset-generator` -->
21+
<link rel="icon" type="image/png" sizes="196x196" href="favicon-196.png" />
22+
<link rel="apple-touch-icon" href="apple-icon-180.png" />
23+
<!-- Keep an eye on the progress of PWA support in Safari, and remove all the Apple non-sense when we can -->
24+
<meta name="apple-mobile-web-app-capable" content="yes" />
25+
<link
26+
rel="apple-touch-startup-image"
27+
href="apple-splash-2048-2732.png"
28+
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
29+
/>
30+
<link
31+
rel="apple-touch-startup-image"
32+
href="apple-splash-2732-2048.png"
33+
media="(device-width: 1024px) and (device-height: 1366px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
34+
/>
35+
<link
36+
rel="apple-touch-startup-image"
37+
href="apple-splash-1668-2388.png"
38+
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
39+
/>
40+
<link
41+
rel="apple-touch-startup-image"
42+
href="apple-splash-2388-1668.png"
43+
media="(device-width: 834px) and (device-height: 1194px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
44+
/>
45+
<link
46+
rel="apple-touch-startup-image"
47+
href="apple-splash-1536-2048.png"
48+
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
49+
/>
50+
<link
51+
rel="apple-touch-startup-image"
52+
href="apple-splash-2048-1536.png"
53+
media="(device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
54+
/>
55+
<link
56+
rel="apple-touch-startup-image"
57+
href="apple-splash-1488-2266.png"
58+
media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
59+
/>
60+
<link
61+
rel="apple-touch-startup-image"
62+
href="apple-splash-2266-1488.png"
63+
media="(device-width: 744px) and (device-height: 1133px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
64+
/>
65+
<link
66+
rel="apple-touch-startup-image"
67+
href="apple-splash-1640-2360.png"
68+
media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
69+
/>
70+
<link
71+
rel="apple-touch-startup-image"
72+
href="apple-splash-2360-1640.png"
73+
media="(device-width: 820px) and (device-height: 1180px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
74+
/>
75+
<link
76+
rel="apple-touch-startup-image"
77+
href="apple-splash-1668-2224.png"
78+
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
79+
/>
80+
<link
81+
rel="apple-touch-startup-image"
82+
href="apple-splash-2224-1668.png"
83+
media="(device-width: 834px) and (device-height: 1112px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
84+
/>
85+
<link
86+
rel="apple-touch-startup-image"
87+
href="apple-splash-1620-2160.png"
88+
media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
89+
/>
90+
<link
91+
rel="apple-touch-startup-image"
92+
href="apple-splash-2160-1620.png"
93+
media="(device-width: 810px) and (device-height: 1080px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
94+
/>
95+
<link
96+
rel="apple-touch-startup-image"
97+
href="apple-splash-1290-2796.png"
98+
media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
99+
/>
100+
<link
101+
rel="apple-touch-startup-image"
102+
href="apple-splash-2796-1290.png"
103+
media="(device-width: 430px) and (device-height: 932px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
104+
/>
105+
<link
106+
rel="apple-touch-startup-image"
107+
href="apple-splash-1179-2556.png"
108+
media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
109+
/>
110+
<link
111+
rel="apple-touch-startup-image"
112+
href="apple-splash-2556-1179.png"
113+
media="(device-width: 393px) and (device-height: 852px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
114+
/>
115+
<link
116+
rel="apple-touch-startup-image"
117+
href="apple-splash-1284-2778.png"
118+
media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
119+
/>
120+
<link
121+
rel="apple-touch-startup-image"
122+
href="apple-splash-2778-1284.png"
123+
media="(device-width: 428px) and (device-height: 926px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
124+
/>
125+
<link
126+
rel="apple-touch-startup-image"
127+
href="apple-splash-1170-2532.png"
128+
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
129+
/>
130+
<link
131+
rel="apple-touch-startup-image"
132+
href="apple-splash-2532-1170.png"
133+
media="(device-width: 390px) and (device-height: 844px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
134+
/>
135+
<link
136+
rel="apple-touch-startup-image"
137+
href="apple-splash-1125-2436.png"
138+
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
139+
/>
140+
<link
141+
rel="apple-touch-startup-image"
142+
href="apple-splash-2436-1125.png"
143+
media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
144+
/>
145+
<link
146+
rel="apple-touch-startup-image"
147+
href="apple-splash-1242-2688.png"
148+
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
149+
/>
150+
<link
151+
rel="apple-touch-startup-image"
152+
href="apple-splash-2688-1242.png"
153+
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
154+
/>
155+
<link
156+
rel="apple-touch-startup-image"
157+
href="apple-splash-828-1792.png"
158+
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
159+
/>
160+
<link
161+
rel="apple-touch-startup-image"
162+
href="apple-splash-1792-828.png"
163+
media="(device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
164+
/>
165+
<link
166+
rel="apple-touch-startup-image"
167+
href="apple-splash-1242-2208.png"
168+
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
169+
/>
170+
<link
171+
rel="apple-touch-startup-image"
172+
href="apple-splash-2208-1242.png"
173+
media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)"
174+
/>
175+
<link
176+
rel="apple-touch-startup-image"
177+
href="apple-splash-750-1334.png"
178+
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
179+
/>
180+
<link
181+
rel="apple-touch-startup-image"
182+
href="apple-splash-1334-750.png"
183+
media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
184+
/>
185+
<link
186+
rel="apple-touch-startup-image"
187+
href="apple-splash-640-1136.png"
188+
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
189+
/>
190+
<link
191+
rel="apple-touch-startup-image"
192+
href="apple-splash-1136-640.png"
193+
media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)"
194+
/>
16195

17196
<script>
18197
// Set the theme's class as soon as possible to prevent a flash of the wrong theme

0 commit comments

Comments
 (0)