refactor(blog): add image alt, tidy up schema and remove dep (#145)

* chore: remove lucide icons dep

* refactor(blog): add image alt and remove unused fields

* chore: fix build task

package.json

@@ -26,7 +26,6 @@
     "@astrojs/sitemap": "^3.2.1",
     "@astrojs/svelte": "^7.0.1",
     "@catppuccin/palette": "^1.7.1",
-    "@iconify-json/lucide": "^1.2.18",
     "@iconify-json/ph": "^1.2.1",
     "@iconify-json/simple-icons": "^1.2.14",
     "@iconify/svelte": "^4.1.0",

src/content.config.ts

@@ -11,6 +11,7 @@ const blog = defineCollection({
     z.object({
       hero: z.object({
         image: image(),
+        alt: z.string(),
         author: z.string(),
         source: z.string(),
       }),
@@ -25,9 +26,7 @@ const blog = defineCollection({
       authors: z.array(
         z.object({
           name: z.string(),
-          title: z.string(),
           github: z.string(),
-          email: z.string().email(),
         }),
       ),
     }),

src/data/blog/celebrating-three-years-of-catppuccin.mdx

@@ -1,6 +1,7 @@
 ---
 hero:
   image: "./celebrating-three-years-of-catppuccin.png"
+  alt: "A large field of sunflowers under a cloudy sky"
   author: "Jorgen Hendriksen"
   source: "https://unsplash.com/photos/a-large-field-of-sunflowers-under-a-cloudy-sky-H_cQ7I2FPqk"
 title: "Celebrating 3 Years of Catppuccin"
@@ -10,9 +11,7 @@ accentColor: yellow
 datePosted: "2024-12-05"
 authors:
   - name: "Hammy"
-    title: "Co-Owner"
     github: "sgoudham"
-    email: "[email protected]"
 ---
 
 Welcome to Catppuccin's first (and very short) blog post! We'll try our best to

src/data/blog/state-of-catppuccin-2024.mdx

@@ -1,6 +1,7 @@
 ---
 hero:
   image: "./celebrating-three-years-of-catppuccin.png"
+  alt: "A large field of sunflowers under a cloudy sky"
   author: "Jorgen Hendriksen"
   source: "https://unsplash.com/photos/a-large-field-of-sunflowers-under-a-cloudy-sky-H_cQ7I2FPqk"
 title: "State of Catppuccin 2024"
@@ -11,9 +12,7 @@ datePosted: "2024-12-05"
 draft: true
 authors:
   - name: "Hammy"
-    title: "Co-Owner"
     github: "sgoudham"
-    email: "[email protected]"
 ---
 
 Having felt quite inspired by Spotify Wrapped last year, I whipped up a short

src/data/blog/why-we-ditched-the-icon-for-external-links.mdx

@@ -1,6 +1,7 @@
 ---
 hero:
   image: "./why-we-ditched-the-icon-for-external-links.png"
+  alt: "Aerial photography of concrete roads"
   author: "Denys Nevozhai"
   source: "https://unsplash.com/photos/aerial-photography-of-concrete-roads-7nrsVjvALnA"
 title: "Why We Ditched the Icon for External Links"
@@ -11,13 +12,9 @@ datePosted: "2024-12-18"
 featured: true
 authors:
   - name: "Lemon"
-    title: "Co-Owner"
     github: "unseen-ninja"
-    email: "[email protected]"
   - name: "Hammy"
-    title: "Co-Owner"
     github: "sgoudham"
-    email: "[email protected]"
 ---
 
 You may or may not have already noticed it; The small arrow (`↗`) we used to

src/data/icons.ts

@@ -3,12 +3,10 @@ import type { IconifyIcon, IconifyJSONIconsData } from "@iconify/types";
 import customIconsJson from "./icons.json";
 import simpleIconsJson from "@iconify-json/simple-icons/icons.json";
 import phIconsJson from "@iconify-json/ph/icons.json";
-import lucideIconsJson from "@iconify-json/lucide/icons.json";
 
 const customIcons = customIconsJson as IconifyJSONIconsData;
 const simpleIcons = simpleIconsJson as IconifyJSONIconsData;
 const phIcons = phIconsJson as IconifyJSONIconsData;
-const lucideIcons = lucideIconsJson as IconifyJSONIconsData;
 
 const DEFAULT_VIEWBOX = 16;
 
@@ -58,7 +56,7 @@ export const portIcon = (name: string | undefined): IconifyIcon => {
 
 export const icon = (identifier: string): IconifyIcon => {
   const [prefix, name] = identifier.split(":");
-  const lib = [customIcons, simpleIcons, phIcons, lucideIcons].find((lib) => lib.prefix === prefix);
+  const lib = [customIcons, simpleIcons, phIcons].find((lib) => lib.prefix === prefix);
   if (lib) {
     const icon = lib.icons[name];
     if (icon) {

src/pages/blog/[id].astro

@@ -50,7 +50,7 @@ const authorSep = (index: number) => {
   <figure class="blog-hero-image" transition:name=`${post.data.title}${post.data.featured}`>
     <Picture
       src={post.data.hero.image}
-      alt={post.data.title}
+      alt={post.data.hero.alt}
       formats={["avif", "webp"]}
       widths={[800, 1600, post.data.hero.image.width]}
       sizes={`(max-width: 720px) 800px, (max-width: 1080px) 1600px, ${post.data.hero.image.width}px`}

src/pages/blog/_components/ArticleCard.astro

@@ -29,7 +29,7 @@ const formattedDatePosted = new Date(post.data.datePosted).toLocaleDateString("e
       transition:animate={fade({ duration: "0.4s" })}>
       <Picture
         src={post.data.hero.image}
-        alt={post.data.title}
+        alt={post.data.hero.alt}
         formats={["avif", "webp"]}
         widths={[800, 1600, post.data.hero.image.width]}
         sizes={`(max-width: 720px) 800px, (max-width: 1080px) 1600px, ${post.data.hero.image.width}px`}