diff --git a/src/components/ArticleCard.astro b/src/components/ArticleCard.astro new file mode 100644 index 0000000..7bcd2b1 --- /dev/null +++ b/src/components/ArticleCard.astro @@ -0,0 +1,13 @@ +--- +const { id, title, tags, description } = Astro.props +--- + +
+
+ {title} +
+
{description}
+
+ {tags.map(tag => #{tag})} +
+
diff --git a/src/content/config.ts b/src/content/config.ts index 2de5874..3a60f3f 100644 --- a/src/content/config.ts +++ b/src/content/config.ts @@ -24,6 +24,7 @@ const guidesCollection = defineCollection({ title: z.string(), description: z.string(), series: z.string().optional(), + tags: z.array(z.string()), }), }) @@ -35,6 +36,7 @@ const seminariettiCollection = defineCollection({ author: z.string(), publishDate: z.date(), eventDate: z.date(), + tags: z.array(z.string()), }), }) diff --git a/src/content/guides/2024-02-29-git-101.md b/src/content/guides/2024-02-29-git-101.md index 116477b..0217970 100644 --- a/src/content/guides/2024-02-29-git-101.md +++ b/src/content/guides/2024-02-29-git-101.md @@ -3,7 +3,8 @@ id: git-101-example title: Git 101 (Esempio) description: Una guida introduttiva alle basi di Git (Esempio) author: Copilot -# series: git +tags: + - git --- Benvenuto alla guida introduttiva alle basi di Git. In questa guida imparerai come iniziare a usare Git per il controllo di versione dei tuoi progetti. diff --git a/src/pages/guide/[id].astro b/src/pages/guide/[id].astro index 9ede618..98aea14 100644 --- a/src/pages/guide/[id].astro +++ b/src/pages/guide/[id].astro @@ -4,8 +4,8 @@ import { getCollection } from 'astro:content' import ArticleLayout from '../../layouts/ArticleLayout.astro' export async function getStaticPaths() { - const blogEntries = await getCollection('guides') - return blogEntries.map(entry => ({ + const guides = await getCollection('guides') + return guides.map(entry => ({ params: { id: entry.data.id }, props: { entry }, })) @@ -15,7 +15,7 @@ const { entry } = Astro.props const { Content } = await entry.render() --- - +

{entry.data.title}

{entry.data.series &&
Serie: {entry.data.series}
} diff --git a/src/pages/guide/index.astro b/src/pages/guide/index.astro new file mode 100644 index 0000000..acc7a5f --- /dev/null +++ b/src/pages/guide/index.astro @@ -0,0 +1,23 @@ +--- +import { getCollection } from 'astro:content' + +import PageLayout from '@layouts/PageLayout.astro' +import ArticleCard from '@components/ArticleCard.astro' + +const blogposts = await getCollection('guides') +--- + + +
+ { + blogposts.map(post => ( + + )) + } +
+ diff --git a/src/pages/guide/tags/[tag].astro b/src/pages/guide/tags/[tag].astro new file mode 100644 index 0000000..fa8d2ac --- /dev/null +++ b/src/pages/guide/tags/[tag].astro @@ -0,0 +1,55 @@ +--- +import { getCollection } from 'astro:content' +import type { CollectionEntry } from 'astro:content' +import PageLayout from '@/layouts/PageLayout.astro' + +export async function getStaticPaths() { + const guides = await getCollection('guides') + + const tags: string[] = [] + + guides.forEach(post => { + post.data.tags.forEach(tag => { + tags.push(tag) + }) + }) + + return Array.from(new Set(tags)).map(tag => { + return { + params: { tag }, + props: { + tag, + blogposts: guides.filter(post => post.data.tags.includes(tag)), + }, + } + }) +} + +interface Props { + tag: string + blogposts: CollectionEntry<'guides'>[] +} + +const { tag, blogposts } = Astro.props +--- + + +

#{tag}

+
+ { + blogposts.map(post => ( +
+
+ {post.data.title} +
+
{post.data.description}
+
+ {post.data.tags.map(tag => ( + #{tag} + ))} +
+
+ )) + } +
+ diff --git a/src/styles/components.scss b/src/styles/components.scss index 3bd2f43..9929b43 100644 --- a/src/styles/components.scss +++ b/src/styles/components.scss @@ -12,11 +12,7 @@ $news-accent-bg: #f8e8b1; place-content: center; font-size: 24px; - font-variation-settings: - 'FILL' 0, - 'wght' 300, - 'GRAD' 0, - 'opsz' 24; + font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24; } .search { @@ -235,3 +231,41 @@ $news-accent-bg: #f8e8b1; font-size: 16px; } } + +.article-list { + display: grid; + grid-auto-flow: column; + + gap: 1rem; + grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); + + .article { + display: grid; + grid-template-rows: auto auto auto; + + background: var(--card-bg, $project-card-bg); + color: #000e; + + @include neo-brutalist-card($size: 3px, $offset: 9px); + + padding: 1rem; + .title { + font-family: 'Source Sans Pro', sans-serif; + font-weight: 700; + font-size: 32px; + } + + .description { + font-size: 16px; + } + + .tags { + display: flex; + gap: 0.5rem; + flex-wrap: wrap; + font-size: 14px; + padding-top: 0.5rem; + color: #555; + } + } +} diff --git a/src/styles/main.scss b/src/styles/main.scss index b1d1e2b..b0f1e5d 100644 --- a/src/styles/main.scss +++ b/src/styles/main.scss @@ -429,7 +429,7 @@ body { } } -.guide { +.guida { background: #f0f0f0; &.series { @@ -462,6 +462,36 @@ body { } } +.guide { + main { + justify-self: center; + + display: flex; + flex-direction: column; + align-items: center; + + max-width: 80ch; + padding: 5rem 0; + + gap: 5rem; + } +} + +.tag { + main { + justify-self: center; + + display: flex; + flex-direction: column; + align-items: center; + + max-width: 80ch; + padding: 5rem 0; + + gap: 5rem; + } +} + // // Misc // diff --git a/tsconfig.json b/tsconfig.json index 423d21c..6101b0e 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -10,7 +10,8 @@ "paths": { "@/*": ["src/*"], "@layouts/*": ["src/layouts/*"], - "@client/*": ["src/client/*"] + "@client/*": ["src/client/*"], + "@components/*": ["src/components/*"] } } }