🚀 add pwd, lighthouse fixes (#107)

workspaces/website/.gitignore

@@ -24,4 +24,5 @@ pnpm-debug.log*
 bak
 *.bak
 cache
-*.cache
+*.cache
+dev-dist

workspaces/website/astro.config.mjs

@@ -3,11 +3,23 @@ import mdx from '@astrojs/mdx';
 import partytown from '@astrojs/partytown';
 import react from '@astrojs/react';
 import lit from '@astrojs/lit';
-
+import AstroPWA from '@vite-pwa/astro'
 import sitemap from '@astrojs/sitemap';
 
 // https://astro.build/config
 export default defineConfig({
+  vite: {
+    logLevel: 'info',
+    define: {
+      __DATE__: `'${new Date().toISOString()}'`,
+    },
+    server: {
+      fs: {
+        // Allow serving files from hoisted root node_modules
+        allow: ['../..']
+      }
+    },
+  },
   devToolbar: {
     enabled: false
   },
@@ -21,6 +33,32 @@ export default defineConfig({
   },
 	site: 'https://scottnath.com',
 	integrations: [lit(), mdx(), sitemap(), react(), 
+    AstroPWA({
+      mode: 'development',
+      base: '/',
+      scope: '/',
+      includeAssets: ['favicon.svg'],
+      registerType: 'autoUpdate',
+      manifest: {
+        name: 'Scott Nath PWA',
+        short_name: 'scottnath-pwa',
+        theme_color: '#0a0c10',
+      },
+      pwaAssets: {
+        config: true,
+      },
+      workbox: {
+        navigateFallback: '/',
+        globPatterns: ['**/*.{css,js,html,svg,png,ico,txt}'],
+      },
+      devOptions: {
+        enabled: true,
+        navigateFallbackAllowlist: [/^\//],
+      },
+      experimental: {
+        directoryAndTrailingSlashHandler: true,
+      }
+    }),
     partytown({
       // Adds dataLayer.push as a forwarding-event.
       config: {

workspaces/website/package.json

@@ -33,6 +33,8 @@
     "@astrojs/partytown": "^2.0.4",
     "@storybook/testing-library": "^0.2.2",
     "@testing-library/react": "^15.0.0",
+    "@vite-pwa/assets-generator": "^0.2.4",
+    "@vite-pwa/astro": "^0.3.1",
     "@webcomponents/template-shadowroot": "^0.2.1",
     "astro-icon": "^1.1.0",
     "lit": "^3.1.2",

workspaces/website/pwa-assets.config.ts

@@ -0,0 +1,25 @@
+import {
+  createAppleSplashScreens,
+  defineConfig,
+  minimal2023Preset,
+} from '@vite-pwa/assets-generator/config'
+
+export default defineConfig({
+  headLinkOptions: {
+    preset: '2023',
+  },
+  preset: {
+    ...minimal2023Preset,
+    appleSplashScreens: createAppleSplashScreens({
+      padding: 0.3,
+      resizeOptions: { fit: 'contain', background: 'white' },
+      darkResizeOptions: { fit: 'contain', background: 'black' },
+      linkMediaOptions: {
+        log: true,
+        addMediaScreen: true,
+        xhtml: true,
+      },
+    }, ['iPad Air 9.7"']),
+  },
+  images: 'public/favicon.svg',
+})

workspaces/website/src/components/BaseHead.astro

@@ -1,4 +1,6 @@
 ---
+import { pwaInfo } from 'virtual:pwa-info';
+import { pwaAssetsHead } from 'virtual:pwa-assets/head';
 // Import the global.css file here so that it is included on
 // all pages through the use of the <BaseHead /> component.
 import '../styles/global.css';
@@ -15,11 +17,6 @@ const canonicalURL = new URL(Astro.url.pathname, Astro.site);
 
 const { title, description, image = PROFILE_PIC } = Astro.props;
 ---
-<script defer data-domain="scottnath.com" src="https://plausible.io/js/script.js" type="text/partytown"></script>
-<script defer data-domain="scottnath.com" src="https://plausible.io/js/script.outbound-links.js" type="text/partytown"></script>
-
-
-
 <!-- Global Metadata -->
 <meta charset="utf-8" />
 <meta name="viewport" content="width=device-width,initial-scale=1" />
@@ -52,6 +49,17 @@ const { title, description, image = PROFILE_PIC } = Astro.props;
 <meta property="twitter:description" content={description} />
 <meta property="twitter:image" content={new URL(image, Astro.url)} />
 
+<script defer data-domain="scottnath.com" src="https://plausible.io/js/script.js" type="text/partytown"></script>
+<script defer data-domain="scottnath.com" src="https://plausible.io/js/script.outbound-links.js" type="text/partytown"></script>
+
+
+{ pwaAssetsHead.themeColor && <meta name="theme-color" content={pwaAssetsHead.themeColor.content} /> }
+{ pwaAssetsHead.links.map(link => (
+    <link {...link} />
+)) }
+{ pwaInfo && <Fragment set:html={pwaInfo.webManifest.linkTag} /> }
+<script src="../pwa.js"></script>
+
 <script>
   // triggers a different favicon when the user switches tabs
   const onVisibilityChange=()=>{

workspaces/website/src/components/Footer.astro

@@ -17,7 +17,7 @@ const navBorder = STRIPE_COLORS[0];
 
   <WebRing />
 
-  <a href="/" class="you-still-here" title="You're still here? Go Home"><img src="/ferris-end-scene.avif" width="381" height="177" alt="You're still here? (Screen shot from Ferris Bueller's Day Off)" /></a>
+  <a href="/" class="you-still-here" title="You're still here? Go Home"><img src="/ferris-end-scene.avif" loading="lazy" width="381" height="177" alt="You're still here? (Screen shot from Ferris Bueller's Day Off)" /></a>
 </footer>
 
 <style define:vars={{ navBorder }}>

workspaces/website/src/components/WebRing.astro

@@ -5,7 +5,7 @@ const navBorder = STRIPE_COLORS[0];
 ---
 
 <div>
-  <h3>CS.Sjoy.lol <a href="https://cs.sjoy.lol">webring</a></h3>
+  <p>CS.Sjoy.lol <a href="https://cs.sjoy.lol">webring</a></p>
   <div>
     <a href="https://webri.ng/webring/cssjoy/previous?via=https://scottnath.com" aria-label="previous site">← Prev</a>
     <a href="https://webri.ng/webring/cssjoy/random?via=https://scottnath.com" aria-label="random site">🎲</a>
@@ -14,13 +14,13 @@ const navBorder = STRIPE_COLORS[0];
 </div>
 
 <style define:vars={{ navBorder }}>
-  div:has(h3) {
+  div:has(p) {
     display: inline-block;
     border: 1px solid var(--navBorder);
     padding: .5em 3em;
     border-radius: 2em;
 
-    h3 {
+    p {
       margin: 0;
       padding-bottom: 1em;
     }

workspaces/website/src/env.d.ts

@@ -1,2 +1,4 @@
 /// <reference path="../.astro/types.d.ts" />
 /// <reference types="astro/client" />
+/// <reference types="vite-plugin-pwa/info" />
+/// <reference types="vite-plugin-pwa/vanillajs" />

workspaces/website/src/pwa.js

@@ -0,0 +1,11 @@
+import { registerSW } from 'virtual:pwa-register'
+
+registerSW({
+  immediate: true,
+  onRegisteredSW(swScriptUrl) {
+    console.log('SW registered: ', swScriptUrl)
+  },
+  onOfflineReady() {
+    console.log('PWA application ready to work offline')
+  },
+})

workspaces/website/tsconfig.json

@@ -19,6 +19,11 @@
       ]
     },
     "jsx": "react-jsx",
-    "jsxImportSource": "react"
+    "jsxImportSource": "react",
+    "types": [
+      "astro/client",
+      "vite-plugin-pwa/vanillajs",
+      "vite-plugin-pwa/info"
+    ]
   }
 }