feat: add PWA screenshots; add sharing to PWA

reduce _headers cache for certain files;
fix monaco-*.map error;
update deps;
fix 404.pug header style

gulpfile.js

@@ -193,6 +193,11 @@ task("js", async () => {
                     return test;
                 },
                 rename("monaco.min.js")
+            ),
+
+            gulpif(
+                (file) => /monaco-(.*)\.js\.map$/.test(file.path),
+                rename("monaco.min.js.map")
             )
         ],
         dest: jsFolder, // Output

src/assets/_headers

@@ -4,17 +4,16 @@
   X-XSS-Protection: 1; mode=block
   Referrer-Policy: strict-origin-when-cross-origin
   Strict-Transport-Security: max-age=63072000; includeSubDomains; preload
-  Cache-Control: max-age=60, stale-while-revalidate=120, public
+  Cache-Control: max-age=360, stale-while-revalidate=480, public
   Accept-CH: DPR, Viewport-Width, Width
   X-UA-Compatible: IE=edge
-  Content-Security-Policy: default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://res.cloudinary.com https://api.producthunt.com data:; script-src 'self' https://cdn.polyfill.io 'unsafe-eval'; connect-src 'self' https:; block-all-mixed-content; upgrade-insecure-requests; base-uri 'self'; object-src 'none'; worker-src 'self'; manifest-src 'self'; media-src 'self' https://res.cloudinary.com/; form-action 'self'; frame-ancestors 'self' https:;
+  Content-Security-Policy: default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://res.cloudinary.com https://api.producthunt.com data:; script-src 'self'; connect-src 'self' https:; block-all-mixed-content; upgrade-insecure-requests; base-uri 'self'; object-src 'none'; worker-src 'self'; manifest-src 'self'; media-src 'self' https://res.cloudinary.com/; form-action 'self'; frame-ancestors 'self' https:;
   Permissions-Policy: geolocation=(), microphone=(), usb=(), sync-xhr=(self), camera=(), interest-cohort=()
   Link: </css/app.min.css>; rel=preload; as=style
   Link: <https://fonts.gstatic.com/s/manrope/v4/xn7gYHE41ni1AdIRggexSg.woff2>; rel=preload; as=font; type=font/woff2; crossorigin=anonymous
   Link: <https://fonts.gstatic.com/s/materialiconsround/v62/LDItaoyNOAY6Uewc665JcIzCKsKc_M9flwmP.woff2>; rel=preload; as=font; type=font/woff2; crossorigin=anonymous
   Link: </js/theme.min.js>; rel=modulepreload
   Link: </js/critical.min.js>; rel=modulepreload
-  Link: <https://cdn.polyfill.io>; rel=preconnect; crossorigin
 
 /
   Link: </js/codicon.ttf>; rel=preload; as=font; type=font/ttf; crossorigin
@@ -28,7 +27,7 @@
   Link: </js/index.min.js>; rel=modulepreload
 
 /**/*.css
-  Cache-Control: public, max-age=604800, stale-while-revalidate=31536000
+  Cache-Control: public, max-age=360, stale-while-revalidate=480
   Content-Type: text/css
 
 /js/*.ttf
@@ -39,8 +38,16 @@
   Cache-Control: public, max-age=31536000, immutable
   Content-Type: text/javascript
 
+/js/sw.js
+  Cache-Control: public, max-age=360, stale-while-revalidate=480
+  Content-Type: text/javascript
+
+/js/*.worker.js
+  Cache-Control: public, max-age=360, stale-while-revalidate=480
+  Content-Type: text/javascript
+
 /js/*.min.js
-  Cache-Control: public, max-age=604800, stale-while-revalidate=31536000
+  Cache-Control: public, max-age=360, stale-while-revalidate=480
   Content-Type: text/javascript
 
 /js/esbuild.wasm
@@ -49,9 +56,10 @@
 
 /js/theme.min.js
   Cache-Control: public, max-age=31536000, immutable
+  Content-Type: text/javascript
 
 /manifest.json
-  Cache-Control: public, max-age=604800, stale-while-revalidate=31536000
+  Cache-Control: public, max-age=604800
   Content-Type: application/manifest+json
 
 /favicon/*

src/assets/manifest.json

@@ -1,39 +1,72 @@
 {
-    "name": "bundle",
-    "short_name": "bundle",
-    "start_url": "/",
-    "dir": "ltr",
-    "display": "standalone",
-    "theme_color": "#ffffff",
-    "background_color": "#ffffff",
-    "description": "a quick npm package size checker",
-    "icons": [
-        {
-            "src": "/favicon/android-chrome-192x192.png",
-            "sizes": "192x192",
-            "type": "image/png"
-        },
-        {
-            "src": "/favicon/android-chrome-512x512.png",
-            "sizes": "512x512",
-            "type": "image/png"
-        },
-        {
-          "src": "/favicon/maskable_icon.png",
-          "sizes": "1024x1024",
-          "type": "image/png",
-          "purpose": "maskable"
-        },
-        {
-          "src": "/favicon/favicon.svg",
-          "sizes": "any",
-          "type": "image/svg+xml",
-          "purpose": "any"
-        }
-    ],
-    "lang": "en",
-    "screenshots": [],
-    "orientation": "any",
-    "categories": ["bundler", "esbuild", "rollup", "gzip", "javascript", "typescript"],
-    "scope": "/"
+  "name": "bundle",
+  "short_name": "bundle",
+  "start_url": "/",
+  "dir": "ltr",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#000000",
+  "description": "a quick npm package size checker",
+  "icons": [
+    {
+      "src": "/favicon/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    },
+    {
+      "src": "/favicon/maskable_icon.png",
+      "sizes": "1024x1024",
+      "type": "image/png",
+      "purpose": "maskable"
+    },
+    {
+      "src": "/favicon/favicon.svg",
+      "sizes": "any",
+      "type": "image/svg+xml",
+      "purpose": "any"
+    }
+  ],
+  "lang": "en",
+  "screenshots": [
+    {
+      "src": "/favicon/screenshot-poster.png",
+      "type": "image/png",
+      "sizes": "1080x960"
+    },
+    {
+      "src": "/favicon/screenshot-mobile.png",
+      "type": "image/png",
+      "sizes": "1860x1653"
+    },
+    {
+      "src": "/favicon/screenshot-desktop.png",
+      "type": "image/png",
+      "sizes": "3240x2880"
+    },
+    {
+      "src": "/favicon/screenshot-bundled.png",
+      "type": "image/png",
+      "sizes": "3240x2880"
+    }
+  ],
+  "share_target": {
+    "action": "/",
+    "method": "GET",
+    "enctype": "application/x-www-form-urlencoded",
+    "params": {
+      "text": "text"
+    }
+  },
+  "orientation": "any",
+  "categories": [
+    "productivity", 
+    "utility",
+    "text"
+  ],
+  "scope": "/"
 }

src/css/app.scss

@@ -196,6 +196,7 @@ footer.footer {
 
 .navbar-toggle,
 .theme-toggle,
+.intall-btn,
 .btn-icon {
     @apply rounded-md;
     @apply mr-1 w-10 h-10 text-blue-500 bg-gray-100 hover:bg-gray-200 active:bg-blue-200;

src/css/components/_monaco.scss

@@ -59,8 +59,12 @@
 }
 
 .push-to-side {
-    @apply flex align-middle py-2 justify-end flex-1;
+    @apply flex align-middle py-2 justify-end flex-1 gap-2;
     flex-wrap: nowrap;
+
+    .btn {
+        margin: 0;
+    }
 }
 
 .push-to-side-overflow {
@@ -70,7 +74,7 @@
 }
 
 .file-size {
-    @apply inline-block px-4 py-2 rounded-md mx-2;
+    @apply inline-block px-4 py-2 rounded-md;
     @apply text-center flex justify-center items-center;
     @apply bg-gray-200 dark:bg-quaternary;
     @apply text-gray-500 dark:text-secondary;

src/pug/404.pug

@@ -6,7 +6,6 @@ block title
 block content
   .container.px-5.py-2(class="sm:max-w-screen-lg")
     .my-5.px-12.py-24
-      h1.text-5xl.mb-2
-        strong 404 Page
+      h1.text-6xl.mb-2.font-extrabold 404 Page
       p.font-light.text-lg You might be lost, wanna 
         a(href="./") go back home?