poyrazavsever/poyraz-portfolio
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

feat(agenda): add weekly agenda experience

Browse Source
This commit is contained in:
poyrazavsever
2026-08-31 09:28:11 +03:00
parent ea35a30198
commit 36f888931d
10 changed files with 271 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/agenda/[slug]/page.tsx
+78
View File
@@ -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
+36
View File
@@ -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
+7 -1
View File
@@ -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
+41 -18
View File
@@ -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,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
+8 -5
View File
@@ -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
+38 -14
View File
@@ -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>
lib/command-palette-links.ts
+12
View File
@@ -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
+8
View File
@@ -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
+9
View File
@@ -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
+9
View File
@@ -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ı.",