💄 [PWA] Improve overall page loading and caching (#61)

* ♻️ [OpenGraph] Add some additional twitter tags * 🐛 [Cursors] Bring back preloading * 💫 [Page] Improve page loading * 🛠️ [PWA] Revise config
beefchimi · Jul 26, 2024 · 14e5430 · 14e5430
1 parent 5c83e66
commit 14e5430
Show file tree

Hide file tree

Showing 8 changed files with 142 additions and 51 deletions.
diff --git a/astro.config.mjs b/astro.config.mjs
@@ -34,9 +34,11 @@ export default defineConfig({
     AstroPWA({
       workbox: {
         // Not sure how this differs from `includeAssets`...
-        // globPatterns: ['**/*.{js,css,html,ico,png,svg}'],
+        globPatterns: ['**/*.{css,js,html,woff2}', 'assets/*.{png,webp}'],
         // Not sure if we actually want to specify this fallback.
-        navigateFallback: '/404',
+        navigateFallback: '/',
+        // The `chicken` image is 2.2MB, so we increase the limit to 3MB.
+        maximumFileSizeToCacheInBytes: 3000000,
       },
 
       // Specify which public assets (in addition to the default html/css/js)

diff --git a/src/components/ContentBlock.astro b/src/components/ContentBlock.astro
@@ -63,6 +63,12 @@ const inactive = !title || !subtitle;
     /* Just a small nudge for better vertical centering */
     padding-top: calc(var(--space-tightest) + 0.1rem);
 
+    /* Consider improveing the legibility of text */
+    /*
+    background-color: rgb(255, 255, 255, 0.04);
+    backdrop-filter: blur(2px);
+    */
+
     & > h3 {
       font-weight: 800;
     }

diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
@@ -27,7 +27,7 @@ const OG_IMAGE = new URL('/dulmage-social.png', Astro.site).href;
 ---
 
 <!doctype html>
-<html lang="en" data-current-index="0">
+<html lang="en" data-current-index="0" data-ready="loading">
   <head>
     <meta charset="UTF-8" />
     <meta
@@ -84,6 +84,8 @@ const OG_IMAGE = new URL('/dulmage-social.png', Astro.site).href;
 
     <!-- Twitter meta -->
     <meta property="twitter:card" content="summary_large_image" />
+    <meta property="twitter:domain" content="dulmage.me" />
+    <meta property="twitter:url" content="https://dulmage.me/" />
     <meta property="twitter:site" content="@beefchimi" />
     <meta property="twitter:account_id" content="358226505" />
     <meta property="twitter:title" content={title} />
@@ -129,23 +131,45 @@ const OG_IMAGE = new URL('/dulmage-social.png', Astro.site).href;
     display: flex;
     justify-content: center;
   }
+
+  /* --- Page load --- */
+
+  @keyframes pageLoadScreenCover {
+    from {
+      opacity: 1;
+      visibility: visible;
+    }
+    to {
+      opacity: 0;
+      visibility: hidden;
+    }
+  }
+
+  body {
+    position: relative;
+
+    &::after {
+      content: '';
+      z-index: var(--index-mesosphere);
+      position: fixed;
+      inset: 0;
+      pointer-events: none;
+      background-color: black;
+    }
+  }
+
+  html[data-ready='done'] body::after {
+    animation: pageLoadScreenCover var(--speed-slower) var(--ease) forwards;
+  }
 </style>
 
 <script>
+  import {PageLoad} from '@scripts/PageLoad';
   import {PwaServiceWorker} from '@scripts/PwaServiceWorker';
 
   if ('serviceWorker' in navigator) {
     window.addEventListener('load', PwaServiceWorker.install);
   }
 
-  // TODO: Decide if we want to leverage `readystate` for our
-  // page load animation.
-
-  /*
-    document.onreadystatechange = () => {
-      if (document.readyState === "complete") {
-        initApplication();
-      }
-    };
-  */
+  PageLoad.schedule();
 </script>
diff --git a/src/pages/404.astro b/src/pages/404.astro
@@ -47,17 +47,23 @@ import Stars from '@components/Stars.astro';
     }
   }
 
-  .ErrorContent {
+  :global(#Main404) {
     --color-portfolio: hsl(var(--color-rainbow) 100% 50%);
+    animation: rainbowSpin 4s linear infinite both;
+  }
 
-    position: relative;
+  .ErrorContent {
     display: grid;
     justify-content: center;
     gap: var(--space-tight);
     padding: var(--space);
     text-align: center;
     max-width: 90rem;
-    animation: rainbowSpin 4s linear infinite both;
+
+    /* Page load (fade-in) */
+    position: relative;
+    z-index: var(--index-thermosphere);
+    animation: fadeIn var(--speed-slower) var(--speed-slow) var(--ease) both;
   }
 
   .ErrorContent h4 a {

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -4,6 +4,7 @@ import Page from '@layouts/Page.astro';
 import {NAV_ID, NAV_TOGGLE_ID, OVERLAY_ID} from '@data/app';
 import {sections} from '@data/sections';
 
+import Contact from '@components/Contact.astro';
 import Hamburger from '@components/Hamburger.astro';
 import Navigation from '@components/Navigation.astro';
 import Project from '@components/Project.astro';
@@ -14,8 +15,9 @@ import ProjectOverlay from '@sections/ProjectOverlay.astro';
 const [intro, ...portfolioSections] = sections;
 ---
 
-<Page id="Home" title="Curtis Dulmage | UX Developer / Ottawa Canada">
+<Page id="PageHome" title="Curtis Dulmage | UX Developer / Ottawa Canada">
   <Navigation id={NAV_ID} items={sections}>
+    <Contact />
     <Hamburger id={NAV_TOGGLE_ID} controlsId={NAV_ID} />
   </Navigation>
 

diff --git a/src/scripts/PageLoad.ts b/src/scripts/PageLoad.ts
@@ -0,0 +1,40 @@
+export type HtmlReady = 'loading' | 'done' | 'error';
+
+export class PageLoad {
+  static MOTION_DELAY = 1200;
+
+  static documentState() {
+    return document.readyState;
+  }
+
+  static isHome() {
+    const {pathname} = window.location;
+    return pathname === '' || pathname === '/';
+  }
+
+  static isLoaded() {
+    return document.documentElement.dataset.ready === 'done';
+  }
+
+  static schedule() {
+    if (PageLoad.documentState() === 'complete') {
+      PageLoad.#updateDocument();
+      return;
+    }
+
+    document.addEventListener('readystatechange', PageLoad.#handleReadyState);
+  }
+
+  static #handleReadyState() {
+    window.scrollTo(0, 0);
+    window.setTimeout(PageLoad.#updateDocument, PageLoad.MOTION_DELAY);
+  }
+
+  static #updateDocument() {
+    document.documentElement.dataset.ready = 'done';
+    document.removeEventListener(
+      'readystatechange',
+      PageLoad.#handleReadyState,
+    );
+  }
+}
diff --git a/src/sections/Intro.astro b/src/sections/Intro.astro
@@ -1,6 +1,5 @@
 ---
 import {type SectionEntry} from '@data/types';
-import Contact from '@components/Contact.astro';
 
 interface Props {
   id: SectionEntry['id'];
@@ -24,15 +23,14 @@ const {id, thumbnail} = Astro.props;
         Background image photographed by: Curtis Dulmage
       </p>
 
-      <p class="paragraph visually-hidden">
+      <p class="paragraph visually-hidden preload-cursors">
         <b>Curtis Dulmage.</b>
         <u>Front end web developer.</u>
-        <i>Ottawa, Canada.</i> Here are a few of my most recent projects. Please
-        get in touch if you have any questions. Thank you.
+        <i>Ottawa, Canada.</i>
+        <strong>Here are a few of my most recent projects.</strong>
+        <em>Please get in touch if you have any questions. Thank you.</em>
       </p>
     </div>
-
-    <Contact />
   </article>
 </header>
 
@@ -52,6 +50,11 @@ const {id, thumbnail} = Astro.props;
     @media (--min-tablet) {
       gap: var(--space);
     }
+
+    /* Page load (fade-in) */
+    position: relative;
+    z-index: var(--index-thermosphere);
+    animation: fadeIn var(--speed-slower) var(--speed-slow) var(--ease) both;
   }
 
   .Details {

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -87,34 +87,6 @@ body {
   cursor: url('../assets/svg/cursors/CursorAuto.svg'), auto;
 }
 
-/* --- Page load --- */
-/* TODO: Consider something better with `document.readystate`. */
-
-@keyframes pageLoad {
-  from {
-    opacity: 1;
-    visibility: visible;
-  }
-  to {
-    opacity: 0;
-    visibility: hidden;
-  }
-}
-
-body {
-  position: relative;
-
-  &::after {
-    content: '';
-    z-index: var(--index-mesosphere);
-    position: fixed;
-    inset: 0;
-    pointer-events: none;
-    background-color: black;
-    animation: pageLoad var(--speed-slow) var(--speed) var(--ease) forwards;
-  }
-}
-
 /* --- Smooth scroll + snapping --- */
 /* Disabled because it breaks "dynamic chrome" behaviour on iOS */
 
@@ -305,3 +277,39 @@ button {
     cursor: url('../assets/svg/cursors/CursorPointerClicked.svg'), pointer;
   }
 }
+
+.preload-cursors {
+  /*
+    Required to preload the variant cursor. Otherwise, there will be
+    a delay upon click when switching to the different cursor asset.
+  */
+
+  > b {
+    cursor: url('../assets/svg/cursors/CursorDeadClicked.svg'), auto;
+  }
+
+  > u {
+    cursor: url('../assets/svg/cursors/CursorHornsClicked.svg'), pointer;
+  }
+
+  > i {
+    cursor: url('../assets/svg/cursors/CursorPointerClicked.svg'), pointer;
+  }
+
+  /*
+  > strong {
+    cursor: url('../assets/svg/cursors/CursorGrabClicked.svg'), pointer;
+  }
+  */
+}
+
+/* --- Global animations --- */
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}