Merge pull request #501 from webstackdev/maintenance/refactor-html-img-to-astro-image-component

Maintenance/refactor html img to astro image component

Author: webstackdev

.github/workflows/codeql.yml

@@ -8,9 +8,6 @@ on:
   pull_request:
     branches:
       - main
-  schedule:
-    # Run at 6 AM UTC every Monday
-    - cron: '0 6 * * 1'
 
 jobs:
   analyze:

.vscode/settings.json

@@ -41,6 +41,7 @@
     "gomodule",
     "GSAP",
     "hocho",
+    "htmlcsstoimage",
     "Hudi",
     "interrobang",
     "izakaya",
@@ -121,6 +122,7 @@
     "Veeam",
     "vercel",
     "virt",
+    "vite",
     "vmax",
     "vtbot",
     "WHATWG",

_TODO.md

@@ -410,6 +410,27 @@ Allows any Mastodon instance to discover your Mastodon profile directly from you
 </body>
 ```
 
+## Refactor social neworks in Authors collection to Contact collection format
+
+The contact data collection uses an array of social networks, with keys:
+
+```
+{
+  network: z.string(),
+  name: z.string(),
+  url: z.string().url(),
+  order: z.number(),
+}
+```
+
+The authors collection is using named entries under a "social" property, like "twitter", "github", etc. This task is to refactor that to use an array like contact data collection. We also need to add a color for the social network icon, or some other approach to setting the color of it while enabling theming.
+
+We should also make sure the avatar key in the authors collection is being output as a responsive image tag.
+
+## Add Google Maps screenshot (or maps embed) to Contact Page
+
+src/assets/images/map.webp
+
 ## Display a system font until font files load (Lighthouse improvements)
 
 Display a system font until font files load to improve FCP (First Contentful Paint) with `font-display: swap`. Need to make sure that web font doesn't render larger or smaller than the system font fallback to avoid CLS (Cumulative Layout Shift) issues.

public/assets/images/placeholder-article.jpg

@@ -1,39 +1,55 @@
+import type { ImageMetadata } from 'astro'
+
+const createCover = (src: string, format: ImageMetadata['format'] = 'jpeg'): ImageMetadata => ({
+  src,
+  width: 1200,
+  height: 675,
+  format,
+})
+
 const sampleCollection = [
   {
     id: 'article-one',
     data: {
       title: 'Article One',
       description: 'First test entry',
-      publishDate: '2024-01-01',
+      publishDate: new Date('2024-01-01'),
       featured: true,
-      icon: '/icons/one.svg',
+      cover: createCover('/_astro/article-one.jpg'),
+      coverAlt: 'Cover image for Article One',
     },
   },
   {
     id: 'article-two',
     data: {
       title: 'Article Two',
       description: 'Second test entry',
-      publishDate: '2024-02-01',
+      publishDate: new Date('2024-02-01'),
       featured: true,
+      cover: createCover('/_astro/article-two.jpg'),
+      coverAlt: 'Cover image for Article Two',
     },
   },
   {
     id: 'article-three',
     data: {
       title: 'Article Three',
       description: 'Third test entry',
-      publishDate: '2024-03-01',
+      publishDate: new Date('2024-03-01'),
       featured: false,
+      cover: createCover('/_astro/article-three.jpg'),
+      coverAlt: 'Cover image for Article Three',
     },
   },
   {
     id: 'article-four',
     data: {
       title: 'Article Four',
       description: 'Fourth test entry',
-      publishDate: '2024-04-01',
+      publishDate: new Date('2024-04-01'),
       featured: false,
+      cover: createCover('/_astro/article-four.jpg'),
+      coverAlt: 'Cover image for Article Four',
     },
   },
 ]

…ets/images/typescript-shop-cover-opt.png …/images/typescript-downloadable-icon.pngsrc/assets/images/typescript-shop-cover-opt.png renamed to src/assets/images/typescript-downloadable-icon.png src/assets/images/typescript-shop-cover-opt.png renamed to src/assets/images/typescript-downloadable-icon.png

@@ -142,7 +142,8 @@ describe('Carousel component (server output)', () => {
       const cardWithIcon = root.querySelector('[data-carousel-slide] img')
 
       expect(cardWithIcon).toBeTruthy()
-      expect(cardWithIcon?.getAttribute('src')).toBe('/icons/one.svg')
+      expect(cardWithIcon?.getAttribute('src')).toMatch(/^\/_image\?href=/)
+      expect(cardWithIcon?.getAttribute('alt')).toBe('Cover image for Article One')
     })
   })
 

src/assets/images/typescript-panel.avif

@@ -1,6 +1,10 @@
 ---
-// Generic Carousel component for displaying content - both featured and suggested
+/**
+ * Generic Carousel component for displaying content - both featured and suggested
+ */
+import { Picture } from 'astro:assets'
 import { getCollection } from 'astro:content'
+
 import {
   type CollectionSlug,
   type CarouselVariant,
@@ -52,11 +56,19 @@ const items = prepareItems(allItems, variant, currentSlug, limit)
                       href={`/${type}/${item.id}`}
                       class="block h-full bg-bg rounded-xl shadow-lg hover:shadow-xl transition-all duration-300 overflow-hidden border border-border hover:border-primary transform hover:-translate-y-2"
                     >
-                      {'icon' in item.data && item.data.icon && (
-                        <div class="p-6 pb-4">
-                          <div class="w-12 h-12 bg-bg-offset rounded-lg flex items-center justify-center group-hover:bg-primary group-hover:bg-opacity-20 transition-colors">
-                            <img src={item.data.icon} alt="" loading="lazy" class="w-6 h-6" />
-                          </div>
+                      {item.data.cover && (
+                        <div class="relative aspect-video overflow-hidden">
+                          <Picture
+                            src={item.data.cover}
+                            alt={item.data.coverAlt}
+                            widths={[320, 640, 960, 1280]}
+                            sizes="(min-width: 1024px) 33vw, (min-width: 768px) 50vw, 100vw"
+                            formats={['avif', 'webp', 'jpeg']}
+                            layout="constrained"
+                            fit="cover"
+                            position="center"
+                            class="absolute inset-0 h-full w-full"
+                          />
                         </div>
                       )}
                       <div class="p-6 pt-2">