feat(agenda): add weekly agenda experience

app/[locale]/agenda/[slug]/page.tsx

@@ -0,0 +1,78 @@
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+import { BlogDetailContent } from "@/components/blog-detail-content";
+import { ArticleJsonLd } from "@/components/json-ld";
+import { getBlogDetailBySlug } from "@/data/blog-detail";
+import { isNewsletterCategory } from "@/data/blog";
+
+const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://poyrazavsever.com";
+
+type AgendaDetailPageProps = {
+  params: Promise<{ locale: string; slug: string }>;
+};
+
+export async function generateMetadata({
+  params,
+}: AgendaDetailPageProps): Promise<Metadata> {
+  const { locale, slug } = await params;
+  const post = await getBlogDetailBySlug(slug);
+
+  if (!post || post.lang !== locale || !isNewsletterCategory(post.category)) {
+    return { title: locale === "en" ? "Agenda post not found" : "Gündem yazısı bulunamadı" };
+  }
+
+  const url = `${SITE_URL}${locale === "en" ? "/en" : ""}/agenda/${post.slug}`;
+
+  return {
+    title: post.title,
+    description: post.excerpt,
+    alternates: { canonical: url },
+    openGraph: {
+      title: post.title,
+      description: post.excerpt,
+      url,
+      type: "article",
+      publishedTime: post.date,
+      authors: [post.author],
+      images: [
+        {
+          url: post.coverImage,
+          width: 1200,
+          height: 630,
+          alt: post.title,
+        },
+      ],
+    },
+    twitter: {
+      card: "summary_large_image",
+      title: post.title,
+      description: post.excerpt,
+      images: [post.coverImage],
+    },
+  };
+}
+
+export default async function AgendaDetailPage({ params }: AgendaDetailPageProps) {
+  const { locale, slug } = await params;
+  const post = await getBlogDetailBySlug(slug);
+
+  if (!post || post.lang !== locale || !isNewsletterCategory(post.category)) {
+    notFound();
+  }
+
+  const url = `${SITE_URL}${locale === "en" ? "/en" : ""}/agenda/${post.slug}`;
+
+  return (
+    <>
+      <ArticleJsonLd
+        title={post.title}
+        description={post.excerpt}
+        url={url}
+        image={post.coverImage}
+        datePublished={post.date}
+        authorName={post.author}
+      />
+      <BlogDetailContent post={post} section="agenda" />
+    </>
+  );
+}

app/[locale]/agenda/page.tsx

@@ -0,0 +1,36 @@
+import type { Metadata } from "next";
+import { getTranslations } from "next-intl/server";
+import { BlogContent } from "@/components/blog-content";
+import { getAgendaPageData } from "@/data/blog";
+
+type AgendaPageProps = {
+  params: Promise<{ locale: string }>;
+  searchParams?: Promise<{
+    page?: string | string[];
+    search?: string | string[];
+  }>;
+};
+
+export async function generateMetadata({ params }: AgendaPageProps): Promise<Metadata> {
+  const { locale } = await params;
+  const t = await getTranslations({ locale, namespace: "Agenda" });
+
+  return {
+    title: t("title"),
+    description: t("description"),
+  };
+}
+
+export default async function AgendaPage({ params, searchParams }: AgendaPageProps) {
+  const { locale } = await params;
+  const resolved = searchParams ? await searchParams : undefined;
+  const pageParam = Array.isArray(resolved?.page) ? resolved.page[0] : resolved?.page;
+  const searchParam = Array.isArray(resolved?.search)
+    ? resolved.search[0]
+    : resolved?.search;
+  const page = Number(pageParam ?? "1");
+  const currentPage = Number.isFinite(page) && page > 0 ? Math.floor(page) : 1;
+  const data = await getAgendaPageData(locale, currentPage, 12, searchParam);
+
+  return <BlogContent data={data} section="agenda" />;
+}

app/[locale]/blog/[slug]/page.tsx

@@ -1,8 +1,9 @@
-import { notFound } from "next/navigation";
+import { notFound, permanentRedirect } from "next/navigation";
 import { Metadata } from "next";
 import { BlogDetailContent } from "@/components/blog-detail-content";
 import { ArticleJsonLd } from "@/components/json-ld";
 import { getBlogDetailBySlug } from "@/data/blog-detail";
+import { isNewsletterCategory } from "@/data/blog";
 
 const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || "https://poyrazavsever.com";
 
@@ -58,6 +59,11 @@ export default async function BlogDetailPage({ params }: BlogDetailPageProps) {
     notFound();
   }
 
+  if (isNewsletterCategory(post.category)) {
+    const localePrefix = locale === "tr" ? "" : `/${locale}`;
+    permanentRedirect(`${localePrefix}/agenda/${post.slug}`);
+  }
+
   return (
     <>
       <ArticleJsonLd

components/blog-content.tsx

@@ -19,9 +19,13 @@ import type { BlogPageData } from "@/data/blog";
 
 type BlogContentProps = {
   data: BlogPageData;
+  section?: "blog" | "agenda";
 };
 
-function buildHref(params: { page?: number; category?: string; search?: string }) {
+function buildHref(
+  params: { page?: number; category?: string; search?: string },
+  section: "blog" | "agenda",
+) {
   const qs = new URLSearchParams();
 
   if (params.page && params.page > 1) qs.set("page", String(params.page));
@@ -29,12 +33,15 @@ function buildHref(params: { page?: number; category?: string; search?: string }
   if (params.search) qs.set("search", params.search);
 
   const query = qs.toString();
-  return query ? `/blog?${query}` : "/blog";
+  const basePath = section === "agenda" ? "/agenda" : "/blog";
+  return query ? `${basePath}?${query}` : basePath;
 }
 
-export function BlogContent({ data }: BlogContentProps) {
+export function BlogContent({ data, section = "blog" }: BlogContentProps) {
   const router = useRouter();
   const t = useTranslations("Blog");
+  const agendaT = useTranslations("Agenda");
+  const isAgenda = section === "agenda";
   const [searchInput, setSearchInput] = useState(data.searchQuery);
   const pageNumbers = Array.from({ length: data.totalPages }, (_, i) => i + 1);
   const hasArticles = data.articles.length > 0;
@@ -42,15 +49,15 @@ export function BlogContent({ data }: BlogContentProps) {
   const submitSearch = useCallback(
     (value: string) => {
       const trimmed = value.trim();
-      router.push(buildHref({ category: data.selectedCategory, search: trimmed }));
+      router.push(buildHref({ category: data.selectedCategory, search: trimmed }, section));
     },
-    [router, data.selectedCategory],
+    [router, data.selectedCategory, section],
   );
 
   const clearFilters = useCallback(() => {
     setSearchInput("");
-    router.push("/blog");
+    router.push(section === "agenda" ? "/agenda" : "/blog");
-  }, [router]);
+  }, [router, section]);
 
   return (
     <section className="flex h-full flex-col gap-4 overflow-y-auto">
@@ -58,6 +65,7 @@ export function BlogContent({ data }: BlogContentProps) {
       <Card className="rounded-sm border-border p-4">
         <div className="flex flex-col gap-3">
           {/* Kategoriler */}
+          {!isAgenda && (
             <div className="flex flex-wrap items-center gap-2">
               <Typography variant="small" className="mr-1 text-muted-foreground">
                 {t("categories")}:
@@ -65,7 +73,7 @@ export function BlogContent({ data }: BlogContentProps) {
               {data.categories.map((category) => (
                 <Link
                   key={category}
-                href={buildHref({ category, search: data.searchQuery })}
+                  href={buildHref({ category, search: data.searchQuery }, section)}
                 >
                   <Badge
                     variant={category === data.selectedCategory ? "default" : "outline"}
@@ -76,6 +84,7 @@ export function BlogContent({ data }: BlogContentProps) {
                 </Link>
               ))}
             </div>
+          )}
 
           {/* Arama */}
           <div className="relative">
@@ -86,14 +95,15 @@ export function BlogContent({ data }: BlogContentProps) {
               className="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
             />
             <input
-              id="blog-search"
+              id={isAgenda ? "agenda-search" : "blog-search"}
+              aria-label={isAgenda ? agendaT("searchPlaceholder") : t("searchPlaceholder")}
               type="text"
               value={searchInput}
               onChange={(e) => setSearchInput(e.target.value)}
               onKeyDown={(e) => {
                 if (e.key === "Enter") submitSearch(searchInput);
               }}
-              placeholder={t("searchPlaceholder")}
+              placeholder={isAgenda ? agendaT("searchPlaceholder") : t("searchPlaceholder")}
               className="w-full rounded-sm border border-border bg-background py-2 pr-10 pl-9 text-sm text-foreground placeholder:text-muted-foreground focus:border-red-600 focus:ring-1 focus:ring-red-600/30 focus:outline-none"
             />
             {searchInput && (
@@ -161,9 +171,13 @@ export function BlogContent({ data }: BlogContentProps) {
             />
             <Typography variant="p" className="text-muted-foreground">
               {data.searchQuery
-                ? t("noSearch", { search: data.searchQuery })
+                ? isAgenda
+                  ? agendaT("noSearch", { search: data.searchQuery })
+                  : t("noSearch", { search: data.searchQuery })
                 : data.selectedCategory === "All"
-                  ? t("empty")
+                  ? isAgenda
+                    ? agendaT("empty")
+                    : t("empty")
                   : t("emptyCategory", { category: data.selectedCategory })}
             </Typography>
             {(data.searchQuery || data.selectedCategory !== "All") && (
@@ -185,11 +199,14 @@ export function BlogContent({ data }: BlogContentProps) {
             <PaginationContent className="justify-start">
               <PaginationItem>
                 <PaginationPrevious
-                  href={buildHref({
+                  href={buildHref(
+                    {
                       page: Math.max(1, data.currentPage - 1),
                       category: data.selectedCategory,
                       search: data.searchQuery,
-                  })}
+                    },
+                    section,
+                  )}
                   aria-disabled={data.currentPage <= 1}
                 />
               </PaginationItem>
@@ -197,11 +214,14 @@ export function BlogContent({ data }: BlogContentProps) {
               {pageNumbers.map((page) => (
                 <PaginationItem key={page}>
                   <PaginationLink
-                    href={buildHref({
+                    href={buildHref(
+                      {
                         page,
                         category: data.selectedCategory,
                         search: data.searchQuery,
-                    })}
+                      },
+                      section,
+                    )}
                     isActive={page === data.currentPage}
                   >
                     {page}
@@ -211,11 +231,14 @@ export function BlogContent({ data }: BlogContentProps) {
 
               <PaginationItem>
                 <PaginationNext
-                  href={buildHref({
+                  href={buildHref(
+                    {
                       page: Math.min(data.totalPages, data.currentPage + 1),
                       category: data.selectedCategory,
                       search: data.searchQuery,
-                  })}
+                    },
+                    section,
+                  )}
                   aria-disabled={data.currentPage >= data.totalPages}
                 />
               </PaginationItem>

components/blog-detail-content.tsx

@@ -7,7 +7,7 @@ import ReactMarkdown from "react-markdown";
 import remarkGfm from "remark-gfm";
 import { Prism as SyntaxHighlighter } from "react-syntax-highlighter";
 import { oneDark } from "react-syntax-highlighter/dist/esm/styles/prism";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useId, useRef, useState } from "react";
 import { Icon } from "@iconify/react";
 import { Badge, Card, Typography } from "poyraz-ui/atoms";
 import type { BlogDetail } from "@/data/blog-detail";
@@ -16,6 +16,7 @@ import { GiscusComments } from "@/components/giscus-comments";
 
 type BlogDetailContentProps = {
   post: BlogDetail;
+  section?: "blog" | "agenda";
 };
 
 function isHttpUrl(value: string) {
@@ -98,7 +99,8 @@ function MermaidBlock({ chart }: { chart: string }) {
   const t = useTranslations("Blog");
   const [svg, setSvg] = useState("");
   const [error, setError] = useState("");
-  const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2)}`);
+  const generatedId = useId();
+  const idRef = useRef(`mermaid-${generatedId.replace(/:/g, "")}`);
 
   useEffect(() => {
     let mounted = true;
@@ -163,8 +165,9 @@ const GISCUS_CATEGORY =
   process.env.NEXT_PUBLIC_GISCUS_CATEGORY || "Announcements";
 const GISCUS_CATEGORY_ID = process.env.NEXT_PUBLIC_GISCUS_CATEGORY_ID || "";
 
-export function BlogDetailContent({ post }: BlogDetailContentProps) {
+export function BlogDetailContent({ post, section = "blog" }: BlogDetailContentProps) {
   const t = useTranslations("Blog");
+  const agendaT = useTranslations("Agenda");
   const progressBarRef = useRef<HTMLDivElement | null>(null);
   const [tocOpen, setTocOpen] = useState(false);
 
@@ -199,10 +202,10 @@ export function BlogDetailContent({ post }: BlogDetailContentProps) {
         <div className="min-w-0 flex-1">
           <article className="space-y-5 rounded-sm border border-border p-5 md:p-8">
             <Link
-              href="/blog"
+              href={section === "agenda" ? "/agenda" : "/blog"}
               className="inline-flex items-center rounded-sm border border-border px-3 py-1.5 text-sm text-muted-foreground transition-colors hover:text-foreground"
             >
-              {t("backToBlog")}
+              {section === "agenda" ? agendaT("backToAgenda") : t("backToBlog")}
             </Link>
 
             <header className="space-y-3">

components/site-navbar.tsx

@@ -51,6 +51,10 @@ const SearchCommand = dynamic(
 );
 
 const slowShineClassName = "[--poyraz-motion-duration-deliberate:1100ms]";
+const dropdownItemLinkClassName =
+  "grid w-full grid-cols-[1.25rem_minmax(0,1fr)] items-center gap-2";
+const mobileDropdownItemLinkClassName =
+  "grid min-h-10 w-full grid-cols-[1.25rem_minmax(0,1fr)_1rem] items-center gap-3 rounded-sm px-2 py-2 text-sm text-foreground/70 transition-colors hover:bg-muted hover:text-foreground";
 
 function getNavLinkClass(isActive: boolean) {
   return [
@@ -280,18 +284,28 @@ export function SiteNavbar({
                                   href={groupItem.href}
                                   target="_blank"
                                   rel="noreferrer"
-                                  className="flex items-center gap-2"
+                                  className={dropdownItemLinkClassName}
                                 >
-                                  <Icon icon={groupItem.icon} width={16} height={16} />
+                                  <Icon
-                                  <span>{t(groupItem.id)}</span>
+                                    icon={groupItem.icon}
+                                    width={16}
+                                    height={16}
+                                    className="block justify-self-center"
+                                  />
+                                  <span className="min-w-0 leading-5">{t(groupItem.id)}</span>
                                 </a>
                               ) : (
                                 <Link
                                   href={groupItem.href}
-                                  className="flex items-center gap-2"
+                                  className={dropdownItemLinkClassName}
                                 >
-                                  <Icon icon={groupItem.icon} width={16} height={16} />
+                                  <Icon
-                                  <span>{t(groupItem.id)}</span>
+                                    icon={groupItem.icon}
+                                    width={16}
+                                    height={16}
+                                    className="block justify-self-center"
+                                  />
+                                  <span className="min-w-0 leading-5">{t(groupItem.id)}</span>
                                 </Link>
                               )}
                             </DropdownMenuItem>
@@ -430,15 +444,20 @@ export function SiteNavbar({
                                 href={groupItem.href}
                                 target="_blank"
                                 rel="noreferrer"
-                                className="flex min-h-10 w-full items-center gap-3 rounded-sm px-2 py-2 text-sm text-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
+                                className={mobileDropdownItemLinkClassName}
                               >
-                                <Icon icon={groupItem.icon} width={18} height={18} />
+                                <Icon
-                                <span>{t(groupItem.id)}</span>
+                                  icon={groupItem.icon}
+                                  width={18}
+                                  height={18}
+                                  className="block justify-self-center"
+                                />
+                                <span className="min-w-0 leading-5">{t(groupItem.id)}</span>
                                 <Icon
                                   icon="mdi:open-in-new"
                                   width={14}
                                   height={14}
-                                  className="ml-auto text-muted-foreground"
+                                  className="block justify-self-center text-muted-foreground"
                                 />
                               </a>
                             </SheetClose>
@@ -446,15 +465,20 @@ export function SiteNavbar({
                             <SheetClose asChild>
                               <Link
                                 href={groupItem.href}
-                                className="flex min-h-10 w-full items-center gap-3 rounded-sm px-2 py-2 text-sm text-foreground/70 transition-colors hover:bg-muted hover:text-foreground"
+                                className={mobileDropdownItemLinkClassName}
                               >
-                                <Icon icon={groupItem.icon} width={18} height={18} />
+                                <Icon
-                                <span>{t(groupItem.id)}</span>
+                                  icon={groupItem.icon}
+                                  width={18}
+                                  height={18}
+                                  className="block justify-self-center"
+                                />
+                                <span className="min-w-0 leading-5">{t(groupItem.id)}</span>
                                 <Icon
                                   icon="mdi:chevron-right"
                                   width={16}
                                   height={16}
-                                  className="ml-auto text-muted-foreground"
+                                  className="block justify-self-center text-muted-foreground"
                                 />
                               </Link>
                             </SheetClose>

lib/command-palette-links.ts

@@ -112,6 +112,18 @@ export function getCommandPaletteGroups(
       icon: "mdi:file-document-outline",
       keywords: ["blog", locale === "tr" ? "yazı" : "post", "article"],
     },
+    {
+      id: "agenda-index",
+      label: locale === "tr" ? "Haftalık Gündem" : "Weekly Agenda",
+      href: "/agenda",
+      icon: "mdi:newspaper-variant-outline",
+      keywords: [
+        "newsletter",
+        locale === "tr" ? "gündem" : "agenda",
+        locale === "tr" ? "haftalık" : "weekly",
+        locale === "tr" ? "haber" : "news",
+      ],
+    },
     {
       id: "blog-content-page",
       label: locale === "tr" ? "Video ve Notlar" : "Videos and Notes",

lib/links.ts

@@ -77,6 +77,14 @@ export const NAV_DROPDOWN_GROUPS = [
     icon: "mdi:dots-horizontal",
     insertAfter: "gallery",
     items: [
+      {
+        id: "agenda",
+        label: "Haftalık Gündem",
+        href: "/agenda",
+        icon: "mdi:newspaper-variant-outline",
+        external: false,
+        keywords: ["gündem", "agenda", "newsletter", "haftalık", "weekly", "haber"],
+      },
       {
         id: "animationResources",
         label: "Animasyon Kaynakları",

messages/en.json

@@ -2,6 +2,7 @@
   "Nav": {
     "about": "About",
     "blog": "Blog",
+    "agenda": "Weekly Agenda",
     "content": "Content",
     "projects": "Projects",
     "gallery": "Gallery",
@@ -87,6 +88,14 @@
     "diagramLoading": "Diagram rendering...",
     "diagramError": "Could not render Mermaid diagram."
   },
+  "Agenda": {
+    "title": "Weekly Agenda",
+    "description": "Weekly developments and commentary from software, technology, design, and artificial intelligence.",
+    "searchPlaceholder": "Search the weekly agenda...",
+    "empty": "No agenda posts yet.",
+    "noSearch": "No agenda posts found for \"{search}\".",
+    "backToAgenda": "<- Back to Weekly Agenda"
+  },
   "AnimationSources": {
     "title": "Animation Sources",
     "description": "Production notes, prompts, and reusable code from animations I create for web and mobile products.",

messages/tr.json

@@ -2,6 +2,7 @@
   "Nav": {
     "about": "Hakkımda",
     "blog": "Blog",
+    "agenda": "Haftalık Gündem",
     "content": "İçerikler",
     "projects": "Projeler",
     "gallery": "Galeri",
@@ -87,6 +88,14 @@
     "diagramLoading": "Diyagram hazırlanıyor...",
     "diagramError": "Mermaid diyagramı oluşturulamadı."
   },
+  "Agenda": {
+    "title": "Haftalık Gündem",
+    "description": "Yazılım, teknoloji, tasarım ve yapay zeka dünyasından haftalık gelişmeler ve yorumlar.",
+    "searchPlaceholder": "Haftalık gündemde ara...",
+    "empty": "Henüz gündem yazısı bulunmuyor.",
+    "noSearch": "\"{search}\" aramasına uygun gündem yazısı bulunamadı.",
+    "backToAgenda": "<- Haftalık Gündem'e dön"
+  },
   "AnimationSources": {
     "title": "Animasyon Kaynakları",
     "description": "Web ve mobil ürünler için hazırladığım animasyonların üretim süreçleri, promptları ve uygulanabilir kodları.",