feat: new tags page

danielcgilibert · Sep 17, 2023 · 28c6b4d · 28c6b4d
1 parent 481976d
commit 28c6b4d
Show file tree

Hide file tree

Showing 16 changed files with 104 additions and 45 deletions.
diff --git 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
@@ -36,13 +36,9 @@ const SOCIALNETWORKS = [
 			<div
 				class='flex flex-col gap-4 md:flex-row md:border-r-2 border-black pr-4 dark:border-white'
 			>
-				<a
-					href='https://docs.astro.build/'
-					rel='prefetch'
-					class='flex items-center gap-1 text-2xl md:text-base'
-				>
-					<span><TagIcon /></span>Tags</a
-				>
+				<HeaderLink href='/tags' class='flex items-center gap-1 text-2xl md:text-base'>
+					<TagIcon /> Tags
+				</HeaderLink>
 			</div>
 
 			<div class='flex justify-end gap-3 md:p-0'>

diff --git 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}
+>
 	<slot />
 </a>
diff --git 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
@@ -11,12 +11,12 @@ type Props = {
 const { posts } = Astro.props
 ---
 
-<section class={cn(`flex flex-col md:flex-row sm:justify-between gap-8  `)}>
+<section class={cn(`flex flex-col md:flex-row sm:justify-between gap-8`)}>
 	{
 		posts.length > 0 ? (
 			posts.map((post) => {
 				return (
-					<div class='flex  gap-2'>
+					<div class='flex flex-wrap gap-2'>
 						<div class='min-h-full'>
 							<Image
 								src={post.data.heroImage}

diff --git a/src/components/TabletOfContentsHeading.astro b/src/components/TabletOfContentsHeading.astro
@@ -18,8 +18,9 @@ export interface Props {
 	<a
 		href={'#' + heading.slug}
 		class={cn(
-			`bg-slate-200 dark:bg-slate-800 dark:hover:bg-indigo-400 hover:bg-indigo-300 hover:text-white shadow py-1 px-4 dark:text-white rounded-full mb-2 first-letter:uppercase w-fit line-clamp-2`
-		)}>
+			`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}
 	</a>
 	{

diff --git a/src/components/Title.astro b/src/components/Title.astro
@@ -0,0 +1,3 @@
+<h1 class='text-5xl font-semibold -tracking-wide first-letter:uppercase'>
+	<slot />
+</h1>
diff --git a/src/components/TitlePage.astro 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
+---
+
+<div class='flex justify-start items-center gap-2 title'>
+	<Shape />
+	<Title>{title}</Title>
+</div>
diff --git a/src/layouts/BaseLayout.astro b/src/layouts/BaseLayout.astro
@@ -11,7 +11,6 @@ const { title, description, image, articleDate } = Astro.props
 <html lang='en' class='scroll-smooth'>
 	<head>
 		<BaseHead title={title} description={description} ogImage={image} articleDate={articleDate} />
-
 		<ProviderTheme />
 		<ProviderAnimations />
 	</head>

diff --git 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)
 ---
 
 <BaseLayout title={category}>
-	<div class='flex justify-start items-center gap-2'>
-		<Shape />
-		<h1 class='text-5xl font-semibold -tracking-wide first-letter:uppercase'>
-			{unsluglifyNameCategory}
-		</h1>
-	</div>
-
+	<TitlePage title={unsluglifyNameCategory} />
 	<ListCategories activeCategory={category} />
 	<ListPosts posts={filterPosts} />
 </BaseLayout>
diff --git 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)
 ---
 
 <BaseLayout title='Home'>
-	<div class='flex justify-start items-center gap-2 title'>
-		<Shape />
-		<h1 class='text-5xl font-semibold -tracking-wide'>Blog title</h1>
-	</div>
-
+	<TitlePage title='Blog Title' />
 	<ListCategories />
 
 	<div>

diff --git 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()
 			</div>
 		</aside>
 
-		<!-- main -->
-		<div class='max-w-full w-full'>
+		<!-- post -->
+		<article class='max-w-full w-full'>
 			<div class='prose prose-lg md:prose-xl dark:prose-invert mb-12 min-w-full'>
 				<Content components={{ pre: Code }} />
 			</div>
 
-			<div>
+			<!-- related posts -->
+			<footer>
 				<h2 class='font-bold text-lg dark:text-white mb-6'>Related Posts</h2>
 				<ListRelatedPosts posts={relatedPosts} />
-			</div>
-		</div>
+			</footer>
+		</article>
 	</div>
 </BlogPost>
diff --git a/src/pages/tags/[...tag]/index.astro 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)
+---
+
+<BaseLayout title={tag}>
+	<TitlePage title={tag} />
+	<ListPosts posts={posts} />
+</BaseLayout>
diff --git 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()
 ---
 
-<BaseLayout title='Tags'>tags</BaseLayout>
+<BaseLayout title='Tags'>
+	<TitlePage title='Tags' />
+	<div class='flex justify-center flex-wrap gap-4'>
+		{
+			tags.map((tag) => (
+				<a
+					href={`/tags/${tag}`}
+					class='inline-block bg-gray-200  rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2 mb-2'
+				>
+					#{tag}
+				</a>
+			))
+		}
+	</div>
+</BaseLayout>
diff --git 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
@@ -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)
+}