working on css design system

src/pages/guide/[id].astro

@@ -5,8 +5,11 @@ import ArticleLayout from '../../layouts/ArticleLayout.astro'
 
 export async function getStaticPaths() {
     const guides = await getCollection('guides')
+
+    console.log(guides)
+
     return guides.map(entry => ({
-        params: { id: entry.data.id },
+        params: { id: entry.slug },
         props: { entry },
     }))
 }

src/pages/guide/index.astro

@@ -2,21 +2,26 @@
 import { getCollection } from 'astro:content'
 
 import PageLayout from '@layouts/PageLayout.astro'
-import ArticleCard from '@components/ArticleCard.astro'
 
-const posts = await getCollection('guides')
+const guides = await getCollection('guides')
 ---
 
 <PageLayout pageName="guide">
-    <div class="article-list">
+    <h1>Guide</h1>
+    <div class="card-list">
         {
-            posts.map(post => (
-                <ArticleCard
-                    title={post.data.title}
-                    id={post.data.id}
-                    description={post.data.description}
-                    tags={post.data.tags}
-                />
+            guides.map(guide => (
+                <div class="card">
+                    <div class="title">
+                        <a href={`/guide/${guide.slug}`}>{guide.data.title}</a>
+                    </div>
+                    <div class="text">{guide.data.description}</div>
+                    <div class="tags">
+                        {guide.data.tags.map(tag => (
+                            <a href={`/guide/tags/${tag}`}>#{tag}</a>
+                        ))}
+                    </div>
+                </div>
             ))
         }
     </div>

src/pages/guide/tags/[tag].astro

@@ -19,7 +19,7 @@ export async function getStaticPaths() {
             params: { tag },
             props: {
                 tag,
-                blogposts: guides.filter(post => post.data.tags.includes(tag)),
+                guides: guides.filter(post => post.data.tags.includes(tag)),
             },
         }
     })
@@ -27,24 +27,24 @@ export async function getStaticPaths() {
 
 interface Props {
     tag: string
-    blogposts: CollectionEntry<'guides'>[]
+    guides: CollectionEntry<'guides'>[]
 }
 
-const { tag, blogposts } = Astro.props
+const { tag, guides } = Astro.props
 ---
 
-<PageLayout pageName="tag">
-    <h1>#{tag}</h1>
-    <div class="article-list">
+<PageLayout pageName="guide tag">
+    <h1>Guide > #{tag}</h1>
+    <div class="card-list">
         {
-            blogposts.map(post => (
-                <div class="article">
+            guides.map(guide => (
+                <div class="card">
                     <div class="title">
-                        <a href={`/guide/${post.data.id}`}>{post.data.title}</a>
+                        <a href={`/guide/${guide.slug}`}>{guide.data.title}</a>
                     </div>
-                    <div class="description">{post.data.description}</div>
+                    <div class="text">{guide.data.description}</div>
                     <div class="tags">
-                        {post.data.tags.map(tag => (
+                        {guide.data.tags.map(tag => (
                             <a href={`/guide/tags/${tag}`}>#{tag}</a>
                         ))}
                     </div>