Refine homepage topics: show top 6 tags and add tags page

Author: sametbasbug

src/pages/etiketler.astro

@@ -0,0 +1,66 @@
+---
+import { getCollection } from 'astro:content';
+import BaseLayout from '../layouts/BaseLayout.astro';
+
+const posts = (await getCollection('blog'))
+	.filter(post => !post.data.isDraft);
+
+const tagCountMap = new Map<string, number>();
+
+for (const post of posts) {
+	for (const tag of post.data.tags ?? []) {
+		const normalized = tag.toLowerCase();
+		tagCountMap.set(normalized, (tagCountMap.get(normalized) ?? 0) + 1);
+	}
+}
+
+const tags = Array.from(tagCountMap.entries())
+	.map(([tag, count]) => ({ tag, count }))
+	.sort((a, b) => b.count - a.count || a.tag.localeCompare(b.tag, 'tr'));
+
+const title = 'Tüm Etiketler';
+const description = 'Blogdaki tüm konu etiketlerini ve yazı sayılarını keşfedin.';
+---
+
+<BaseLayout title={title} description={description}>
+	<section class="tags-page">
+		<div class="tags-head">
+			<h1>{title}</h1>
+			<a href="/" class="back-link">← Ana sayfa</a>
+		</div>
+
+		<p class="tags-subtitle">Toplam <strong>{tags.length}</strong> etiket var. Bir etikete tıklayarak arşivde filtreleyebilirsin.</p>
+
+		<div class="tags-grid">
+			{tags.map((item) => (
+				<a href={`/blog?tag=${item.tag}`} class="tag-card">
+					<span>#{item.tag}</span>
+					<strong>{item.count}</strong>
+				</a>
+			))}
+		</div>
+	</section>
+</BaseLayout>
+
+<style>
+	.tags-page { max-width: 900px; margin: 0 auto; }
+	.tags-head { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom: 0.75rem; }
+	.tags-head h1 { margin: 0; font-size: 2rem; }
+	.back-link { font-weight: 600; }
+	.tags-subtitle { color: var(--secondary); margin-bottom: 1.25rem; }
+	.tags-grid { display:flex; flex-wrap:wrap; gap:0.75rem; }
+	.tag-card {
+		display:inline-flex;
+		align-items:center;
+		gap:0.55rem;
+		border:1px solid var(--border);
+		background: var(--card-bg);
+		padding:0.6rem 0.95rem;
+		border-radius:999px;
+		text-decoration:none;
+		color:var(--text);
+		transition: all .2s ease;
+	}
+	.tag-card:hover { border-color: var(--accent); transform: translateY(-2px); }
+	.tag-card strong { color: var(--accent); }
+</style>

src/pages/index.astro

@@ -32,6 +32,9 @@ const topicStats = Array.from(tagCountMap.entries())
 	.map(([topic, count]) => ({ topic, count }))
 	.sort((a, b) => b.count - a.count || a.topic.localeCompare(b.topic, 'tr'));
 
+const featuredTopics = topicStats.slice(0, 6);
+const hiddenTopicCount = Math.max(topicStats.length - featuredTopics.length, 0);
+
 const searchIndex = posts.map((post) => ({
 	slug: post.slug,
 	title: post.data.title,
@@ -73,14 +76,22 @@ const searchIndex = posts.map((post) => ({
 	</section>
 
 	<section class="topics">
-		<h2>Konu alanları</h2>
+		<div class="topics-head">
+			<h2>Konu alanları</h2>
+			<a href="/etiketler" class="all-topics-link">Tüm Etiketleri Gör</a>
+		</div>
 		<div class="topic-chips">
-			{topicStats.map((item) => (
+			{featuredTopics.map((item) => (
 				<a href={`/blog?tag=${item.topic}`} class="topic-chip">
 					<span>#{item.topic}</span>
 					<strong>{item.count}</strong>
 				</a>
 			))}
+			{hiddenTopicCount > 0 && (
+				<a href="/etiketler" class="topic-chip topic-chip-more">
+					<span>+{hiddenTopicCount} daha</span>
+				</a>
+			)}
 		</div>
 	</section>
 
@@ -310,9 +321,13 @@ const searchIndex = posts.map((post) => ({
 		.featured-card h3 { font-size:1.1rem; margin:0.5rem 0; }
 		.featured-card p { color: var(--secondary); font-size:0.95rem; }
 
+		.topics-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
+		.topics-head h2 { margin-bottom: 0; text-align: left; }
+		.all-topics-link { font-weight: 600; font-size: 0.92rem; }
 		.topic-chips { display:flex; flex-wrap:wrap; gap:0.75rem; }
 		.topic-chip { display:inline-flex; gap:0.55rem; align-items:center; border:1px solid var(--border); background:var(--card-bg); padding:0.55rem 0.85rem; border-radius:999px; text-decoration:none; color:var(--text); }
 		.topic-chip strong { color: var(--accent); }
+		.topic-chip-more { border-style: dashed; color: var(--secondary); }
 
 		.home-search-box { margin-bottom: 2rem; padding: 1rem; background: var(--card-bg); border: 1px solid var(--border); border-radius: 1rem; box-shadow: var(--shadow); }
 		.home-search-label { display: block; font-weight: 600; margin-bottom: 0.5rem; }