Update workbox for reload button in Offline page to work correctly

Author: webstackdev

.cache/pages.json

@@ -89,6 +89,7 @@
   "consent",
   "contact",
   "hero",
+  "newsletter",
   "offline",
   {
     "privacy": [

.vscode/settings.json

@@ -78,20 +78,26 @@
     "EXIF",
     "fastly",
     "Favicons",
+    "Fbad",
     "fbclid",
+    "Fcontact",
     "Fedi",
     "Fedibird",
     "Fediverse",
     "FERPA",
+    "Fevil",
     "finnadie",
     "firko",
     "Flink",
     "flowid",
     "fluxcd",
     "FNAME",
+    "Foffline",
     "fosstodon",
     "FOUC",
+    "Fphish",
     "fprintf",
+    "Fprivacy",
     "Fulcio",
     "gantt",
     "gclid",

src/components/List/index.astro

@@ -10,6 +10,7 @@ import PlainIconList from '@components/List/layouts/PlainIconList.astro'
 import SideBySideList from '@components/List/layouts/SideBySideList.astro'
 import TimelineList from '@components/List/layouts/TimelineList.astro'
 import TwoColumnCheckIconsList from '@components/List/layouts/TwoColumnCheckIconsList.astro'
+import TwoColumnIconList from '@components/List/layouts/TwoColumnIconList.astro'
 import ZebraList from '@components/List/layouts/ZebraList.astro'
 
 export type Props = {
@@ -19,6 +20,7 @@ export type Props = {
     text: string
     icon?: string
     color?: string
+    inverseColor?: string
   }[]
   classes?: {
     ol?: string
@@ -39,11 +41,13 @@ const itemsWithColor = items as Array<{
   text: string
   icon?: string
   color: string
+  inverseColor?: string
 }>
 const itemsWithIconAndColor = items as Array<{
   text: string
   icon: string
   color: string
+  inverseColor?: string
 }>
 ---
 
@@ -58,4 +62,5 @@ const itemsWithIconAndColor = items as Array<{
 {variant === 'side-by-side-list' && <SideBySideList items={items} {...classesProps} />}
 {variant === 'timeline-list' && <TimelineList items={items} {...classesProps} />}
 {variant === 'two-column-check-icons-list' && <TwoColumnCheckIconsList items={items} {...classesProps} {...sizeProps} />}
+{variant === 'two-column-icon-list' && <TwoColumnIconList items={itemsWithIconAndColor} {...classesProps} {...sizeProps} />}
 {variant === 'zebra-list' && <ZebraList items={items} {...classesProps} />}

src/components/List/layouts/TwoColumnIconList.astro

@@ -0,0 +1,51 @@
+---
+import Marker from "@components/Marker/index.astro"
+
+export type Props = {
+  items: {
+    title?: string
+    text: string
+    icon?: string
+    color: string
+    inverseColor?: string
+  }[]
+  classes?: {
+    ul?: string
+    li?: string
+    em?: string
+  }
+  size?: number
+}
+
+const { items, classes, size }: Props = Astro.props
+
+const ulClass = ["grid md:grid-cols-2 gap-6", classes?.ul].filter(Boolean).join(" ")
+const liClass = ["flex items-start gap-2", classes?.li].filter(Boolean).join(" ")
+const iconWrapper = "shrink-0 w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mt-1"
+const contentWrapper = ["text-page-inverse mb-1 ml-2", classes?.em].filter(Boolean).join(" ")
+const textClass = "text-sm"
+---
+
+<ul class={ulClass}>
+  {
+    items.map((item) => {
+      const icon = item.icon ?? "check"
+
+      return (
+        <li class={liClass}>
+          <div class={iconWrapper}>
+            <Marker
+              icon={icon}
+              color={item.color}
+              size={size ?? 6}
+            />
+          </div>
+          <div class={contentWrapper}>
+            <h3 class="font-sans text-xl">{item.title}</h3>
+            <p class={textClass}>{item.text}</p>
+          </div>
+        </li>
+      )
+    })
+  }
+</ul>

src/components/Marker/icons/map.astro

@@ -0,0 +1,30 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+}
+
+const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Map Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z"
+  ></path>
+</svg>

src/components/Marker/icons/question-mark-in-circle.astro

@@ -0,0 +1,30 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+}
+
+const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Question Mark in Circle Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M8.228 9c.549-1.165 2.03-2 3.772-2 2.21 0 4 1.343 4 3 0 1.4-1.278 2.575-3.006 2.907-.542.104-.994.54-.994 1.093m0 3h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+  ></path>
+</svg>

src/components/Marker/icons/reload.astro

@@ -0,0 +1,30 @@
+---
+export type Props = {
+  color: string
+  classes?: string
+  size: number
+  accessible: boolean
+  focusable: boolean
+  isListMarker?: boolean
+}
+
+const { color, classes, size, accessible, focusable, isListMarker } = Astro.props
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  class:list={["shrink-0", `w-${size} h-${size}`, `text-${color}`, classes, isListMarker ? "mt-0.5" : ""]}
+  fill="none"
+  stroke="currentColor"
+  viewBox="0 0 24 24"
+  aria-hidden={accessible ? "false" : "true"}
+  focusable={focusable ? "true" : "false"}
+>
+  {accessible && <title>Reload Icon</title>}
+  <path
+    stroke-linecap="round"
+    stroke-linejoin="round"
+    stroke-width="2"
+    d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15"
+  ></path>
+</svg>

src/components/Marker/icons/waiting.astro

@@ -13,7 +13,7 @@ const { color, classes, size, accessible, focusable } = Astro.props
 <svg
   xmlns="http://www.w3.org/2000/svg"
   class:list={[`w-${size} h-${size}`, `text-${color}`, classes]}
-  fill="none"
+  fill="currentColor"
   stroke="currentColor"
   viewBox="0 0 24 24"
   aria-hidden={accessible ? "false" : "true"}
@@ -31,3 +31,20 @@ const { color, classes, size, accessible, focusable } = Astro.props
     <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" opacity="1"></line>
   </g>
 </svg>
+
+<style>
+  @keyframes offline-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .offline-spinner-bars {
+    animation: offline-spin 1.2s steps(8, end) infinite;
+    transform-origin: center;
+  }
+</style>

src/components/Marker/index.astro

@@ -10,6 +10,8 @@ export type Props = {
    * apply the value to their stroke and fill attributes as appropriate for the image.
    */
   color?: string
+  /** A color for the icon to use for internal fill areas */
+  inverseColor?: string
   /** Defaults to 24. */
   size?: number
   /** Any additional CSS classes to apply to the SVG element. */
@@ -25,10 +27,11 @@ export type Props = {
   isListMarker?: boolean
 }
 
-const { icon, color = 'inherit', size = 14, classes, accessible = false, focusable = false, isListMarker = true }: Props = Astro.props
+const { icon, color = 'inherit', inverseColor, size = 14, classes, accessible = false, focusable = false, isListMarker = true }: Props = Astro.props
 
 const MarkerComponent = getMarkerComponent(icon) as unknown as (_props: {
   color?: string
+  inverseColor?: string
   size?: number
   classes?: string
   accessible?: boolean
@@ -38,6 +41,7 @@ const MarkerComponent = getMarkerComponent(icon) as unknown as (_props: {
 
 const markerProps = {
   ...(color ? { color } : {}),
+  ...(inverseColor ? { inverseColor } : {}),
   ...(size !== undefined ? { size } : {}),
   ...(classes ? { classes } : {}),
   ...(accessible ? { accessible } : {}),

src/components/Marker/server/__tests__/index.spec.ts

@@ -1,6 +1,6 @@
 import { describe, expect, it } from 'vitest'
 import type { AstroComponentFactory } from 'astro/runtime/server/index.js'
-import { getMarkerComponent } from '@components/List/server'
+import { getMarkerComponent } from '@components/Marker/server'
 
 const downloadMarker = (() => null) as unknown as AstroComponentFactory
 const avatarMarker = (() => null) as unknown as AstroComponentFactory