Limit sidebar to top 5 popular tags and add tag index page

app/tags/page.tsx

@@ -0,0 +1,46 @@
+import Link from 'next/link';
+import type { Metadata } from 'next';
+import { getAllTagsWithCount } from '@/lib/posts';
+
+export const metadata: Metadata = {
+  title: '標籤索引'
+};
+
+export default function TagIndexPage() {
+  const tags = getAllTagsWithCount();
+
+  const colorClasses = [
+    'bg-rose-100 text-rose-700 dark:bg-rose-900/60 dark:text-rose-200',
+    'bg-emerald-100 text-emerald-700 dark:bg-emerald-900/60 dark:text-emerald-200',
+    'bg-sky-100 text-sky-700 dark:bg-sky-900/60 dark:text-sky-200',
+    'bg-amber-100 text-amber-700 dark:bg-amber-900/60 dark:text-amber-200',
+    'bg-violet-100 text-violet-700 dark:bg-violet-900/60 dark:text-violet-200'
+  ];
+
+  return (
+    <section className="space-y-4">
+      <h1 className="text-lg font-semibold text-slate-900 dark:text-slate-50">
+        標籤索引
+      </h1>
+      <p className="text-xs text-slate-500 dark:text-slate-400">
+        目前共有 {tags.length} 個標籤。
+      </p>
+      <div className="flex flex-wrap gap-3 text-xs">
+        {tags.map(({ tag, slug, count }, index) => {
+          const color = colorClasses[index % colorClasses.length];
+          return (
+            <Link
+              key={tag}
+              href={`/tags/${slug}`}
+              className={`rounded-full px-3 py-1 transition ${color}`}
+            >
+              <span className="mr-1">{tag}</span>
+              <span className="opacity-70">({count})</span>
+            </Link>
+          );
+        })}
+      </div>
+    </section>
+  );
+}
+

components/right-sidebar.tsx

@@ -4,7 +4,7 @@ import { getAllPostsSorted, getAllTagsWithCount } from '@/lib/posts';
 
 export function RightSidebar() {
   const latest = getAllPostsSorted().slice(0, 5);
-  const tags = getAllTagsWithCount().slice(0, 30);
+  const tags = getAllTagsWithCount().slice(0, 5);
 
   return (
     <aside className="hidden lg:block">
@@ -39,7 +39,7 @@ export function RightSidebar() {
       {tags.length > 0 && (
         <section className="rounded-xl border bg-white px-4 py-3 text-sm shadow-sm dark:border-slate-800 dark:bg-slate-900 dark:text-slate-100">
           <h2 className="text-xs font-semibold uppercase tracking-wide text-slate-500 dark:text-slate-400">
-            標籤雲
+            熱門標籤
           </h2>
           <div className="mt-2 flex flex-wrap gap-2 text-xs">
             {tags.map(({ tag, slug, count }, index) => {
@@ -68,6 +68,14 @@ export function RightSidebar() {
               );
             })}
           </div>
+          <div className="mt-2 text-right text-[11px]">
+            <Link
+              href="/tags"
+              className="text-slate-500 hover:text-blue-600 dark:text-slate-400 dark:hover:text-blue-400"
+            >
+              查看全部標籤 →
+            </Link>
+          </div>
         </section>
       )}
       </div>