Fix errors that turned up in e2e testing - script init, favicon generation

Author: webstackdev

playwright.config.ts

@@ -10,8 +10,8 @@ import 'dotenv/config'
  * See https://playwright.dev/docs/test-configuration.
  */
 
-/** Debug mode - set DEBUG=true to run only chromium with no HTML report */
-const isDebugMode = process.env['DEBUG'] === 'true'
+/** Debug mode - set DEBUG=1 or DEBUG=true to run only chromium with no HTML report */
+const isDebugMode = Boolean(process.env['DEBUG'] && process.env['DEBUG'] !== 'false' && process.env['DEBUG'] !== '0')
 
 export default defineConfig({
   /* Look for test files in the "tests" directory, relative to this configuration file. */
@@ -112,13 +112,18 @@ export default defineConfig({
       ],
 
   /* Run your local dev server before starting the tests */
-  webServer: {
-    command: 'npm run dev',
-    url: 'http://localhost:4321',
-    /** How long to wait for the process to start up and be available in milliseconds. */
-    timeout: 120 * 1000,
-    reuseExistingServer: !process.env['CI'],
-  },
+  /* In debug mode, assume server is already running */
+  ...(isDebugMode
+    ? {}
+    : {
+        webServer: {
+          command: 'npm run dev',
+          url: 'http://localhost:4321',
+          /** How long to wait for the process to start up and be available in milliseconds. */
+          timeout: 120 * 1000,
+          reuseExistingServer: !process.env['CI'],
+        },
+      }),
 
   // path to the global setup files.
   //globalSetup: require.resolve('./global-setup'),

public/apple-touch-icon.png

@@ -20,9 +20,9 @@
  */
 import sharp, { type Metadata } from 'sharp'
 import toIco from 'to-ico'
-import { writeFile } from 'fs/promises'
+import { writeFile, mkdir } from 'fs/promises'
 
-type IconGenerator = (options: Metadata) => Promise<Buffer>
+type IconGenerator = (_options: Metadata) => Promise<Buffer>
 
 const faviconPath = `src/assets/favicon.svg`
 const generateIcoFavicon: IconGenerator = async ({ width, height, density }) => {
@@ -52,6 +52,17 @@ const generatePngFavicon: IconGenerator = ({ density, width, height }) => {
     .toBuffer()
 }
 
+const generatePwaIcon = (size: number): IconGenerator => ({ density, width, height }) => {
+  if (!width || !height || !density)
+    throw new Error(`Required option not passed to generatePwaIcon`)
+  return sharp(faviconPath, {
+    density: (size / Math.max(width, height)) * density,
+  })
+    .resize(size, size)
+    .png()
+    .toBuffer()
+}
+
 const saveFile = (destination: string) => {
   return async (buffer: Buffer) => {
     return await writeFile(destination, buffer)
@@ -61,12 +72,30 @@ const saveFile = (destination: string) => {
 const faviconTypes: Array<[string, IconGenerator]> = [
   ['favicon.ico', generateIcoFavicon],
   ['apple-touch-icon.png', generatePngFavicon],
+  ['icon-192.png', generatePwaIcon(192)],
+  ['icon-512.png', generatePwaIcon(512)],
+  ['icon-mask.png', generatePwaIcon(512)],
 ]
 
 export const buildFavicons = async () => {
   const metadata = await sharp(faviconPath).metadata()
+  const outputDir = `${process.cwd()}/public`
+
+  // Ensure output directory exists
+  await mkdir(outputDir, { recursive: true })
 
-  faviconTypes.forEach(([name, generator]) =>
-    generator(metadata).then(saveFile(`${process.cwd()}/public/images/${name}`))
+  // Generate all favicons
+  await Promise.all(
+    faviconTypes.map(([name, generator]) =>
+      generator(metadata).then(saveFile(`${outputDir}/${name}`))
+    )
   )
+
+  console.log('✅ Favicons and PWA icons generated successfully')
 }
+
+// Execute when run directly (ES module)
+buildFavicons().catch((error) => {
+  console.error('❌ Failed to generate favicons:', error)
+  process.exit(1)
+})

public/favicon.ico

@@ -169,7 +169,7 @@ const year = new Date().getFullYear()
       class="flex flex-col justify-center lg:pt-3 [&_a:hover]:text-bg-offset [&_a:hover]:underline [&_a:hover]:decoration-dotted [&_a:hover]:decoration-bg [&_a:hover]:underline-offset-4 [&_a:focus]:text-bg-offset [&_a:focus]:underline [&_a:focus]:decoration-dotted [&_a:focus]:decoration-bg [&_a:focus]:underline-offset-4"
     >
       <a
-        href="/mailinglist"
+        href="/#newsletter"
         class="lg:[&:hover]:no-underline lg:[&:focus]:no-underline text-color-bg no-underline"
       >
         <div class="lg:hidden">Subscribe to</div>

public/icon-192.png

@@ -37,21 +37,26 @@ const { pageTitle, path, description, image } = Astro.props
     {/* Development: Custom handlers log errors to console for debugging */}
     import { SentryBootstrap } from '@components/Scripts/sentry/client'
     import { PUBLIC_SENTRY_DSN } from 'astro:env/client'
+    import { AppBootstrap } from '@components/Scripts/state/bootstrap'
 
-    if ( import.meta.env.PROD && PUBLIC_SENTRY_DSN) {
+    if (import.meta.env.PROD && PUBLIC_SENTRY_DSN) {
       SentryBootstrap.init()
+      AppBootstrap.init()
     } else {
       // Development: Use custom error handlers with console logging
-      const { addErrorEventListeners } = await import('@components/Scripts/errors/errorListeners')
-      addErrorEventListeners()
-      console.info('🔧 Sentry disabled in development mode')
+      import('@components/Scripts/errors/errorListeners')
+        .then(({ addErrorEventListeners }) => {
+          addErrorEventListeners()
+          console.info('🔧 Sentry disabled in development mode')
+          // Initialize AppBootstrap after error handlers
+          AppBootstrap.init()
+        })
+        .catch((error) => {
+          console.error('❌ Failed to initialize error listeners:', error)
+          // Still try to initialize AppBootstrap even if error listeners fail
+          AppBootstrap.init()
+        })
     }
-
-    // Initialize AppBootstrap FIRST - initializes state management
-    // MUST run before any scripts that depend on state
-    import { AppBootstrap } from '@components/Scripts/state/bootstrap'
-
-    AppBootstrap.init()
   </script>
   {/* Client-side router for Astro pages (enables partial page reloads) */}
   {/* Must be placed at the end of the <head> to avoid blocking page rendering */}

public/icon-512.png

@@ -51,7 +51,7 @@
 </style>
 
 <button
-  class="theme-toggle-btn"
+  class="theme-toggle-btn themepicker-toggle__toggle-btn"
   type="button"
   aria-expanded="false"
   aria-owns="theme-menu"