Update

src/pages/index.astro

@@ -1,67 +1,38 @@
 ---
 import Layout from '../layouts/Layout.astro'
-import { Logo, Page, Footer, Row, Image, Copyright, Column } from '../../@dasig'
-import Article from '../components/Article.astro'
+import { Page, Row } from '../../@dasig'
+import ArticleCard from '../components/ArticleCard.astro'
 
-import AA from '../../@dasig/images/sample.avif'
-import AW from '../../@dasig/images/sample.webp'
+import TechA from '../../@dasig/images/5-tech.avif'
+import TechW from '../../@dasig/images/5-tech.webp'
+
+const articles = Object.values(import.meta.glob('../content/articles/*.md', { eager: true }))
 ---
 
-<Layout title='Articles - Pat Alcala'>
-  <Page alignment='column'>
-    <Row
-      wrap
-      gap={0}
-      content='left'>
-      <h1 class='title'>Pat's Articles</h1>
+<Layout title="Articles - Pat Alcala">
+  <Page alignment="column">
+    <Row wrap gap={0} content="left">
+      <h1 class="title">Pat's Articles</h1>
     </Row>
 
-    <div class='articles'>
-      <Row
-        wrap
-        gap={1}>
-        <Article
-          title='The quick brown fox'
-          subtitle='Ang pasko ay sumapit'
-          imageA={AA.src}
-          imageW={AW.src}
-          alt='aa'
-          minutes={2}
-          date='aa'
-        />
-        <Article
-          title='AA'
-          subtitle='aa'
-          imageA={AA.src}
-          imageW={AW.src}
-          alt='aa'
-          minutes={2}
-          date='aa'
-        />
-        <Article
-          title='AA'
-          subtitle='aa'
-          imageA={AA.src}
-          imageW={AW.src}
-          alt='aa'
-          minutes={2}
-          date='aa'
-        />
+    <div class="articles">
+      <Row wrap gap={1}>
+        {articles.map((post: any) => <ArticleCard 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} />)}
       </Row>
     </div>
   </Page>
+
+  <style lang="sass">
+    @use '../../configs/design/colors.sass' as colors
+    @use '../styles/fonts.sass' as fonts
+
+    h1
+      color: colors.$white
+      margin: 0
+      font-family: fonts.$Literata
+      font-weight: bold
+
+    .articles
+      padding: 2rem 0 0 0
+  </style>
 </Layout>
-
-<style lang='sass'>
-  @use '../../configs/design/colors.sass' as colors
-  @use '../styles/fonts.sass' as fonts
-
-  h1
-    color: colors.$white
-    margin: 0
-    font-family: fonts.$Literata
-    font-weight: bold
-
-  .articles
-    padding: 2rem 0 0 0
-</style>