chore(perf): attempt to resolve some weird flickering on reloads

Author: vivshaw

.notes/todo.md

@@ -23,5 +23,4 @@
 - [ ] flesh out package READMEs
 - [ ] put domain config into IaC w/ Terraform?
 - [ ] dedicated Identity page, then repurpose front page for something else? like Molly White's verify page: https://www.mollywhite.net/verify/
-- [ ] FA icon and avatar image flicker on page reload, font flicker on hard refresh
-- [ ] remove need for light/dark context
+- [ ] font flicker on hard refresh - could be a fallback problem?

apps/vivsha.ws/app/(home)/page.tsx

@@ -93,8 +93,10 @@ export default function Home() {
         <div className={profileCard}>
           <figure className={fig}>
             <Image
-              src={author.avatar.image}
+              src={author.avatar.src}
               alt={author.avatar.alt}
+              width={80}
+              height={80}
               className={avatar}
               priority
             />

apps/vivsha.ws/app/layout.tsx

@@ -1,12 +1,18 @@
 import type { Viewport } from "next"
 import type { Metadata } from "next/types"
+import { config } from "@fortawesome/fontawesome-svg-core"
+import "@fortawesome/fontawesome-svg-core/styles.css"
 import {
   DARK_COLOR_MODE_CLASS,
   LIGHT_COLOR_MODE_CLASS,
   tokens,
 } from "@vivshaw/basalt"
 
 import { author, COLOR_MODE_STORAGE_KEY, site } from "#data"
+
+// prevent Font Awesome from auto-injecting CSS (i import it above)
+// i do this because the auto-injection was causing a flicker of weird sizing
+config.autoAddCss = false
 import { metadataHelper } from "#lib/metadataHelpers"
 
 export const viewport: Viewport = {

apps/vivsha.ws/data/index.ts

@@ -1,8 +1,5 @@
-import type { StaticImageData } from "next/image"
 import { z } from "zod"
 
-import avatarPic from "#images/avatar.jpg"
-
 /**
  * the key in `localStorage`used to store the app's color mode
  */
@@ -59,7 +56,9 @@ type Author = {
   /** profile picture and alt text */
   avatar: {
     alt: string
-    image: StaticImageData
+    src: string
+    width: number
+    height: number
   }
 
   /** short bio */
@@ -95,8 +94,10 @@ type Author = {
 export const author: Author = {
   alumniOf: "University of Vermont, University of Colorado Boulder",
   avatar: {
-    image: avatarPic,
+    src: "/avatar.jpg",
     alt: "A photo of Hannah in a Smithsonian display of a giant salt molecule",
+    width: 400,
+    height: 400,
   },
   bio: "function enthusiast, JavaScript wrangler, browser whisperer, code obfuscator, machine enlightener",
   gender: "female",

apps/vivsha.ws/lib/metadataHelpers.ts

@@ -221,9 +221,9 @@ export function schemaHelper(data: SeoData) {
     "@type": "ImageObject",
     "@id": authorImageId,
     inLanguage: "en-US",
-    url: author.avatar.image.src,
-    width: `${author.avatar.image.width}`,
-    height: `${author.avatar.image.height}`,
+    url: author.avatar.src,
+    width: `${author.avatar.width}`,
+    height: `${author.avatar.height}`,
   }
 
   const commonSchema = [