better tags page + better post meta header + css cleanup

Author: oltdaniel

src/content.config.ts

@@ -35,6 +35,7 @@ const blog = defineCollection({
 			title: z.string(),
 			description: z.string(),
 			date: z.coerce.date(),
+			updated: z.coerce.date().optional(),
 			tags: z.array(z.string().regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/)).default(["others"])
 		}),
 });
@@ -55,6 +56,7 @@ const notes = defineCollection({
 		z.object({
 			title: z.string(),
 			date: z.coerce.date(),
+			updated: z.coerce.date().optional(),
 			tags: z.array(z.string().regex(/^[a-z0-9]+(?:-[a-z0-9]+)*$/)).default(["others"])
 		}),
 });

src/layouts/Post.astro

@@ -8,7 +8,7 @@ type BlogProps = CollectionEntry<"blog">["data"];
 type NotesProps = CollectionEntry<"notes">["data"];
 type Props = BlogProps | NotesProps;
 
-const { title, date, tags } = Astro.props;
+const { title, date, updated, tags } = Astro.props;
 
 // Type guard to check if this is a blog post (has description)
 const isBlogPost = (props: Props): props is BlogProps => {
@@ -18,20 +18,38 @@ const isBlogPost = (props: Props): props is BlogProps => {
 const description = isBlogPost(Astro.props) ? Astro.props.description : SITE_DESCRIPTION;
 const image = isBlogPost(Astro.props) ? `${Astro.url.pathname}og.png` : undefined;
 
-const isoDate = date.toISOString().split('T')[0]
+const isoDate = date.toISOString().split('T')[0];
+const isoUpdated = updated?.toISOString().split('T')[0];
 ---
 
 <BaseLayout title={title} description={description} image={image} type="article">
 	<article>
 		<h1>{ title }</h1>
 
-		<ul class="post-metadata">
-			<li><time datetime={isoDate}>{isoDate}</time></li>
-
-			{ tags.map((tag, i) => (
-				<li><a href={`/tags/${tag}`} class="post-tag">{tag}</a>{ (i < tags.length - 1) ? ', ' : ''}</li>
-			)) }
-		</ul>
+		<div class="post-metadata">
+			<div class="post-date">
+				<span class="meta-label">Published at:</span>
+				<time datetime={isoDate}>{isoDate}</time>
+			</div>
+			
+			{ updated && (
+				<div class="post-updated">
+					<span class="meta-label">Updated at:</span>
+					<time datetime={isoUpdated}>{isoUpdated}</time>
+				</div>
+			) }
+			
+			{ tags.length > 0 && (
+				<div class="post-tags">
+					<span class="meta-label">Tags:</span>
+					<div class="tag-list">
+						{ tags.map((tag) => (
+							<a href={`/tags/${tag}`} class="post-tag">#{tag}</a>
+						)) }
+					</div>
+				</div>
+			) }
+		</div>
 
 		<slot />
 

src/pages/tags/[...slug].astro

@@ -29,7 +29,7 @@ const { tag, posts, notes } = Astro.props;
 ---
 
 <BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION} type="website">
-    <h1>Tag <code>{tag}</code></h1>
+    <h1>Tag <span class="tag-display">#{tag}</span></h1>
 
     <h2>Posts</h2>
     <PostsList posts={posts} />

src/pages/tags/index.astro

@@ -12,14 +12,40 @@ const allTags = Array.from(new Set(
         .flat()
         .filter((e) => e),
 ));
+
+// Calculate counts for each tag
+const tagCounts = allTags.map(tag => {
+    const postCount = posts.filter(p => p.data.tags.includes(tag)).length;
+    const noteCount = notes.filter(n => n.data.tags.includes(tag)).length;
+    const totalCount = postCount + noteCount;
+    
+    return {
+        tag,
+        postCount,
+        noteCount,
+        totalCount
+    };
+}).sort((a, b) => b.totalCount - a.totalCount); // Sort by total count descending
 ---
 
 <BaseLayout title={SITE_TITLE} description={SITE_DESCRIPTION} type="website">
     <h1>Tags</h1>
 
-    <ul>
-        { allTags.map(tag => (
-            <li><a href={`/tags/${tag}`}>{tag}</a></li>
+    <ul class="tag-list-page">
+        { tagCounts.map(({ tag, postCount, noteCount, totalCount }) => (
+            <li class="tag-item">
+                <a href={`/tags/${tag}`} class="tag-display">#{tag}</a>
+                <span class="tag-count">
+                    <span class="total-count">{totalCount} total</span>
+                    (
+                    <span class="count-breakdown">
+                        {postCount > 0 && <span class="post-count">{postCount} post{postCount !== 1 ? 's' : ''}</span>}
+                        {postCount > 0 && noteCount > 0 && <span class="separator">+</span>}
+                        {noteCount > 0 && <span class="note-count">{noteCount} note{noteCount !== 1 ? 's' : ''}</span>}
+                    </span>
+                    )
+                </span>
+            </li>
         )) }
     </ul>
 </BaseLayout>