From 28c6b4d5e08968756175e5a0d1344037e54daab4 Mon Sep 17 00:00:00 2001 From: Daniel Date: Sun, 17 Sep 2023 15:29:39 +0200 Subject: [PATCH] feat: new tags page --- package.json | 2 +- src/components/Header.astro | 10 +++----- src/components/HeaderLink.astro | 3 ++- src/components/ListPosts.astro | 3 ++- src/components/ListRelatedPosts.astro | 4 ++-- src/components/TabletOfContentsHeading.astro | 5 ++-- src/components/Title.astro | 3 +++ src/components/TitlePage.astro | 14 ++++++++++++ src/layouts/BaseLayout.astro | 1 - src/pages/category/[...category].astro | 18 ++++----------- src/pages/index.astro | 8 ++----- src/pages/post/[...slug].astro | 17 +++++++------- src/pages/tags/[...tag]/index.astro | 24 ++++++++++++++++++++ src/pages/tags/index.astro | 19 +++++++++++++++- src/utils/index.ts | 2 +- src/utils/post.ts | 16 +++++++++++++ 16 files changed, 104 insertions(+), 45 deletions(-) create mode 100644 src/components/Title.astro create mode 100644 src/components/TitlePage.astro create mode 100644 src/pages/tags/[...tag]/index.astro diff --git a/package.json b/package.json index c7effc24..9c5ceef7 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,7 @@ "build": "astro build", "sync": "astro sync", "preview": "astro preview", - "postbuild": "pagefind --source dist", + "postbuild": "pagefind --site dist", "format:check": "prettier --plugin-search-dir=. --check .", "format": "prettier --plugin-search-dir=. --write .", "lint": "eslint .", diff --git a/src/components/Header.astro b/src/components/Header.astro index 029ace9a..54cc2dc5 100644 --- a/src/components/Header.astro +++ b/src/components/Header.astro @@ -36,13 +36,9 @@ const SOCIALNETWORKS = [
- - Tags + + Tags +
diff --git a/src/components/HeaderLink.astro b/src/components/HeaderLink.astro index ead50516..04d68a65 100644 --- a/src/components/HeaderLink.astro +++ b/src/components/HeaderLink.astro @@ -13,6 +13,7 @@ const isActive = href === pathname || href === pathname.replace(/\/$/, '') href={href} class={cn(isActive ? 'text-opacity-100' : 'text-opacity-60', className)} rel='noopener noreferrer ' - {...props}> + {...props} +> diff --git a/src/components/ListPosts.astro b/src/components/ListPosts.astro index 6f5ef152..07043d9a 100644 --- a/src/components/ListPosts.astro +++ b/src/components/ListPosts.astro @@ -15,7 +15,8 @@ const { posts, FirstBig = false } = Astro.props class={cn( `grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-8 mt-3`, FirstBig && `md:[&>*:first-child]:col-span-2` - )}> + )} +> { posts.map(async (post) => { const { remarkPluginFrontmatter } = await post.render() diff --git a/src/components/ListRelatedPosts.astro b/src/components/ListRelatedPosts.astro index 475edaaa..4f155c4e 100644 --- a/src/components/ListRelatedPosts.astro +++ b/src/components/ListRelatedPosts.astro @@ -11,12 +11,12 @@ type Props = { const { posts } = Astro.props --- -
+
{ posts.length > 0 ? ( posts.map((post) => { return ( -
+
+ `bg-slate-200 dark:bg-slate-800 dark:hover:bg-indigo-400 hover:bg-indigo-300 hover:text-white py-1 px-4 dark:text-white rounded-full mb-2 first-letter:uppercase w-fit line-clamp-2` + )} + > {heading.text} { diff --git a/src/components/Title.astro b/src/components/Title.astro new file mode 100644 index 00000000..fb311f70 --- /dev/null +++ b/src/components/Title.astro @@ -0,0 +1,3 @@ +

+ +

diff --git a/src/components/TitlePage.astro b/src/components/TitlePage.astro new file mode 100644 index 00000000..9370158a --- /dev/null +++ b/src/components/TitlePage.astro @@ -0,0 +1,14 @@ +--- +import Title from './Title.astro' +import Shape from './icons/Shape.astro' +type Props = { + title: string +} + +const { title } = Astro.props +--- + +
+ + {title} +
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro index 3f1fc49e..b8cfb4f4 100644 --- a/src/layouts/BaseLayout.astro +++ b/src/layouts/BaseLayout.astro @@ -11,7 +11,6 @@ const { title, description, image, articleDate } = Astro.props - diff --git a/src/pages/category/[...category].astro b/src/pages/category/[...category].astro index 7de0562e..18adce9c 100644 --- a/src/pages/category/[...category].astro +++ b/src/pages/category/[...category].astro @@ -2,8 +2,8 @@ import BaseLayout from '@/layouts/BaseLayout' import ListPosts from '@/components/ListPosts' import ListCategories from '@/components/ListCategories' -import Shape from '@/components/icons/Shape' -import { sluglify, unsluglify, getCategories, getPosts } from '@/utils' +import TitlePage from '@/components/TitlePage' +import { sluglify, unsluglify, getCategories, filterPostsByCategory } from '@/utils' const { category } = Astro.params @@ -17,21 +17,11 @@ export async function getStaticPaths() { } const unsluglifyNameCategory = unsluglify(category!.toLowerCase()) - -const posts = await getPosts() -const filterPosts = posts.filter( - (post) => post.data.category.toLowerCase() === unsluglifyNameCategory -) +const filterPosts = await filterPostsByCategory(unsluglifyNameCategory) --- -
- -

- {unsluglifyNameCategory} -

-
- + diff --git a/src/pages/index.astro b/src/pages/index.astro index 57c587d0..e1fca0d0 100644 --- a/src/pages/index.astro +++ b/src/pages/index.astro @@ -1,7 +1,7 @@ --- import ListCategories from '@/components/ListCategories' import ListPosts from '@/components/ListPosts' -import Shape from '@/components/icons/Shape' +import TitlePage from '@/components/TitlePage' import BaseLayout from '@/layouts/BaseLayout' import { getPosts } from '@/utils' @@ -10,11 +10,7 @@ const posts = await getPosts(MAX_POSTS) --- -
- -

Blog title

-
- +
diff --git a/src/pages/post/[...slug].astro b/src/pages/post/[...slug].astro index 246bff4c..f76a678c 100644 --- a/src/pages/post/[...slug].astro +++ b/src/pages/post/[...slug].astro @@ -6,8 +6,8 @@ import ListRelatedPosts from '@/components/ListRelatedPosts' import Share from '@/components/Share' import TableOfContents from '@/components/TableOfContents' import { getPosts } from '@/utils' -const posts = await getCollection('blog') +const posts = await getCollection('blog') export async function getStaticPaths() { const posts = await getPosts() @@ -19,12 +19,12 @@ export async function getStaticPaths() { type Props = CollectionEntry<'blog'> const post = Astro.props - +const MAX_POSTS = 3 const getRelatedPosts = (post: Props) => { const relatedPosts = posts.filter( (p) => p.slug !== post.slug && p.data.tags.some((t) => post.data.tags.includes(t)) ) - return relatedPosts.slice(0, 3) + return relatedPosts.slice(0, MAX_POSTS) } const relatedPosts = getRelatedPosts(post) @@ -42,16 +42,17 @@ const { Content, headings, remarkPluginFrontmatter } = await post.render()
- -
+ +
-
+ +

Related Posts

-
-
+ +
diff --git a/src/pages/tags/[...tag]/index.astro b/src/pages/tags/[...tag]/index.astro new file mode 100644 index 00000000..48da128a --- /dev/null +++ b/src/pages/tags/[...tag]/index.astro @@ -0,0 +1,24 @@ +--- +import BaseLayout from '@/layouts/BaseLayout' +import ListPosts from '@/components/ListPosts' +import TitlePage from '@/components/TitlePage' +import { getTags, getPostByTag } from '@/utils' + +export async function getStaticPaths() { + const tags = await getTags() + + return tags.map((tag) => ({ + params: { tag }, + props: { tag } + })) +} + +const { tag } = Astro.props + +const posts = await getPostByTag(tag) +--- + + + + + diff --git a/src/pages/tags/index.astro b/src/pages/tags/index.astro index 43d16afc..8a2976b3 100644 --- a/src/pages/tags/index.astro +++ b/src/pages/tags/index.astro @@ -1,5 +1,22 @@ --- import BaseLayout from '@/layouts/BaseLayout' +import TitlePage from '@/components/TitlePage' +import { getTags } from '@/utils' +const tags = await getTags() --- -tags + + +
+ { + tags.map((tag) => ( + + #{tag} + + )) + } +
+ diff --git a/src/utils/index.ts b/src/utils/index.ts index da2a082b..5e4a27e5 100644 --- a/src/utils/index.ts +++ b/src/utils/index.ts @@ -1,4 +1,4 @@ export { sluglify, unsluglify } from './sluglify' export { cn } from './cn' -export { getCategories, getPosts } from './post' +export { getCategories, getPosts, getTags, getPostByTag, filterPostsByCategory } from './post' export { remarkReadingTime } from './readTime' diff --git a/src/utils/post.ts b/src/utils/post.ts index 0794b5d1..0901ef2b 100644 --- a/src/utils/post.ts +++ b/src/utils/post.ts @@ -12,3 +12,19 @@ export const getPosts = async (max?: number) => { .sort((a, b) => a.data.pubDate.valueOf() - b.data.pubDate.valueOf()) .slice(0, max) } + +export const getTags = async () => { + const posts = await getCollection('blog') + const tags = new Set(posts.map((post) => post.data.tags).flat()) + return Array.from(tags) +} + +export const getPostByTag = async (tag: string) => { + const posts = await getPosts() + return posts.filter((post) => post.data.tags.includes(tag)) +} + +export const filterPostsByCategory = async (category: string) => { + const posts = await getPosts() + return posts.filter((post) => post.data.category.toLowerCase() === category) +}