Updated

src/pages/index.astro

@@ -1,14 +1,35 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import { Page, Row, Image, Logo } from '../../@dasig'
+import { Page, Row, Logo } from '../../@dasig'
 import ArticleCard from '../components/ArticleCard.astro'
 
-import TechA from '../../@dasig/images/5-tech.avif'
-import TechW from '../../@dasig/images/5-tech.webp'
-import logoA from '../../@dasig/images/logo.avif'
-import logoW from '../../@dasig/images/logo.webp'
-
 const articles = Object.values(import.meta.glob('../content/articles/*.md', { eager: true }))
+
+function getArticleData(post: any) {
+  const slug = post.frontmatter.slug
+  const alt = slug.replace(/-/g, ' ')
+  const category = post.frontmatter.category
+  let categoryColor
+
+  if (category === 'Technology') {
+    categoryColor = 'blue'
+  } else if (category === 'Poem') {
+    categoryColor = 'yellow'
+  }
+
+  return {
+    category: post.frontmatter.category,
+    categoryColor: categoryColor,
+    url: `read/${slug}`,
+    title: post.frontmatter.title,
+    subtitle: post.frontmatter.subtitle,
+    imageA: `../@dasig/images/${slug}.avif`,
+    imageW: `../@dasig/images/${slug}.webp`,
+    alt: alt,
+    minutes: post.frontmatter.minutes,
+    date: post.frontmatter.date,
+  }
+}
 ---
 
 <Layout title="Articles - Pat Alcala">
@@ -20,7 +41,12 @@ const articles = Object.values(import.meta.glob('../content/articles/*.md', { ea
 
     <div class="articles">
       <Row wrap gap={1}>
-        {articles.map((post: any) => <ArticleCard category="Technology" categoryColor="blue" url={post.frontmatter.url} title={post.frontmatter.title} subtitle={post.frontmatter.subtitle} imageA={TechA.src} imageW={TechW.src} alt="5-tech" minutes={post.frontmatter.minutes} date={post.frontmatter.date} />)}
+        {
+          articles.map((post: any) => {
+            const data = getArticleData(post)
+            return <ArticleCard {...data} />
+          })
+        }
       </Row>
     </div>
   </Page>