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>

src/pages/meta/design.astro

@@ -15,7 +15,7 @@ const headings = getHeadings()
     <Header />
     <aside>
         <nav>
-            <h2>Indice</h2>
+            <h3>Indice</h3>
             <ul>
                 {
                     headings.map(heading => (

src/pages/notizie/[id].astro

@@ -4,7 +4,7 @@ import { getCollection } from 'astro:content'
 import ArticleLayout from '../../layouts/ArticleLayout.astro'
 
 export async function getStaticPaths() {
-    const guides = await getCollection('posts')
+    const guides = await getCollection('news')
     return guides.map(entry => ({
         params: { id: entry.slug },
         props: { entry },
@@ -15,15 +15,6 @@ const { entry } = Astro.props
 const { Content } = await entry.render()
 ---
 
-<ArticleLayout
-    title={entry.data.title}
-    description={entry.data.description}
-    tags={entry.data.tags}
-    image={entry.data.image}
-    date={entry.data.publishDate}
-    author={entry.data.author}
-
-    pageName={['notizia']}
->
+<ArticleLayout {...entry.data} pageName={['notizia']}>
     <Content />
-</ArticleLayout>
+</ArticleLayout>

src/pages/notizie/index.astro

@@ -2,25 +2,29 @@
 import { getCollection } from 'astro:content'
 
 import PageLayout from '@layouts/PageLayout.astro'
-import NewsCard from '@components/NewsCard.astro'
 
-const posts = await getCollection('posts')
+const news = await getCollection('news')
 ---
 
 <PageLayout pageName="notizie">
-    <div class="news-list">
+    <h1>Notizie</h1>
+    <div class="card-list">
         {
-            posts.map(post => (
-                <NewsCard
-                    id={post.slug}
-                    title={post.data.title}
-                    description={post.data.description}
-                    tags={post.data.tags}
-                    image={post.data.image}
-                    date={post.data.publishDate}
-                    author={post.data.author}
-                />
+            news.map(newsItem => (
+                <div class="card">
+                    <a href={`/notizie/${newsItem.slug}`} class="title">
+                        {newsItem.data.title}
+                    </a>
+                    <div class="text small dimmed">
+                        {new Date(newsItem.data.publishDate).toLocaleDateString('it-IT', {
+                            year: 'numeric',
+                            month: 'long',
+                            day: 'numeric',
+                        })}
+                    </div>
+                    <div class="text">{newsItem.data.description}</div>
+                </div>
             ))
         }
     </div>
-</PageLayout>
+</PageLayout>