feat(agenda): add weekly agenda experience

2026-08-31 09:28:11 +03:00
parent ea35a30198
commit 36f888931d
10 changed files with 271 additions and 63 deletions
@@ -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]);
+    router.push(section === "agenda" ? "/agenda" : "/blog");
+  }, [router, section]);

  return (
    <section className="flex h-full flex-col gap-4 overflow-y-auto">
@@ -58,24 +65,26 @@ export function BlogContent({ data }: BlogContentProps) {
      <Card className="rounded-sm border-border p-4">
        <div className="flex flex-col gap-3">
          {/* Kategoriler */}
-          <div className="flex flex-wrap items-center gap-2">
-            <Typography variant="small" className="mr-1 text-muted-foreground">
-              {t("categories")}:
-            </Typography>
-            {data.categories.map((category) => (
-              <Link
-                key={category}
-                href={buildHref({ category, search: data.searchQuery })}
-              >
-                <Badge
-                  variant={category === data.selectedCategory ? "default" : "outline"}
-                  className="cursor-pointer rounded-sm transition-colors"
+          {!isAgenda && (
+            <div className="flex flex-wrap items-center gap-2">
+              <Typography variant="small" className="mr-1 text-muted-foreground">
+                {t("categories")}:
+              </Typography>
+              {data.categories.map((category) => (
+                <Link
+                  key={category}
+                  href={buildHref({ category, search: data.searchQuery }, section)}
                >
-                  {category}
-                </Badge>
-              </Link>
-            ))}
-          </div>
+                  <Badge
+                    variant={category === data.selectedCategory ? "default" : "outline"}
+                    className="cursor-pointer rounded-sm transition-colors"
+                  >
+                    {category}
+                  </Badge>
+                </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({
-                    page: Math.max(1, data.currentPage - 1),
-                    category: data.selectedCategory,
-                    search: data.searchQuery,
-                  })}
+                  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({
-                      page,
-                      category: data.selectedCategory,
-                      search: data.searchQuery,
-                    })}
+                    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({
-                    page: Math.min(data.totalPages, data.currentPage + 1),
-                    category: data.selectedCategory,
-                    search: data.searchQuery,
-                  })}
+                  href={buildHref(
+                    {
+                      page: Math.min(data.totalPages, data.currentPage + 1),
+                      category: data.selectedCategory,
+                      search: data.searchQuery,
+                    },
+                    section,
+                  )}
                  aria-disabled={data.currentPage >= data.totalPages}
                />
              </PaginationItem>
@@ -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">
@@ -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} />
-                                  <span>{t(groupItem.id)}</span>
+                                  <Icon
+                                    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} />
-                                  <span>{t(groupItem.id)}</span>
+                                  <Icon
+                                    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} />
-                                <span>{t(groupItem.id)}</span>
+                                <Icon
+                                  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} />
-                                <span>{t(groupItem.id)}</span>
+                                <Icon
+                                  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>