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

feat(animation-sources): improve discovery and sharing

Browse Source
This commit is contained in:
Poyraz
2026-08-29 17:38:08 +03:00
parent a019910d61
commit 6907ec5183
8 changed files with 161 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/[locale]/animation-sources/[slug]/page.tsx
+24 -5
View File
@@ -40,23 +40,36 @@ export async function generateMetadata({
}
const url = `${SITE_URL}${getLocalizedPath(locale, source.slug)}`;
const socialImageUrl = new URL(source.coverImage, SITE_URL).toString();
const turkishUrl = `${SITE_URL}${getLocalizedPath("tr", source.slug)}`;
const englishUrl = `${SITE_URL}${getLocalizedPath("en", source.slug)}`;
return {
title: source.title,
description: source.excerpt,
alternates: { canonical: url },
alternates: {
canonical: url,
languages: {
"tr-TR": turkishUrl,
"en-US": englishUrl,
},
},
openGraph: {
title: source.title,
description: source.excerpt,
url,
siteName: "Poyraz Avsever",
type: "article",
locale: locale === "en" ? "en_US" : "tr_TR",
alternateLocale: locale === "en" ? ["tr_TR"] : ["en_US"],
publishedTime: source.date,
authors: [source.author],
images: [
{
url: source.coverImage,
width: 720,
height: 720,
url: socialImageUrl,
type: "image/gif",
width: 480,
height: 480,
alt: source.title,
},
],
@@ -65,7 +78,13 @@ export async function generateMetadata({
card: "summary_large_image",
title: source.title,
description: source.excerpt,
images: [source.coverImage],
creator: "@poyrazavsever",
images: [
{
url: socialImageUrl,
alt: source.title,
},
],
},
};
}
app/[locale]/animation-sources/page.tsx
+41 -2
View File
@@ -3,6 +3,9 @@ import { getTranslations } from "next-intl/server";
import { AnimationSourcesContent } from "@/components/animation-sources-content";
import { listAnimationSources } from "@/data/animation-sources";
const SITE_URL =
process.env.NEXT_PUBLIC_SITE_URL || "https://poyrazavsever.com";
type AnimationSourcesPageProps = {
params: Promise<{ locale: string }>;
};
@@ -11,13 +14,49 @@ export async function generateMetadata({
params,
}: AnimationSourcesPageProps): Promise<Metadata> {
const { locale } = await params;
const t = await getTranslations({ locale, namespace: "AnimationSources" });
const [t, sources] = await Promise.all([
getTranslations({ locale, namespace: "AnimationSources" }),
listAnimationSources(locale),
]);
const localizedPath = locale === "en" ? "/en/animation-sources" : "/animation-sources";
const url = `${SITE_URL}${localizedPath}`;
const socialImagePath = sources[0]?.coverImage ?? "/logo/logo.png";
const socialImageUrl = new URL(socialImagePath, SITE_URL).toString();
const isGif = socialImagePath.toLowerCase().endsWith(".gif");
return {
title: t("title"),
description: t("description"),
alternates: {
canonical: "/animation-sources",
canonical: url,
languages: {
"tr-TR": `${SITE_URL}/animation-sources`,
"en-US": `${SITE_URL}/en/animation-sources`,
},
},
openGraph: {
title: t("title"),
description: t("description"),
url,
siteName: "Poyraz Avsever",
type: "website",
locale: locale === "en" ? "en_US" : "tr_TR",
images: [
{
url: socialImageUrl,
type: isGif ? "image/gif" : "image/png",
width: isGif ? 480 : 1200,
height: isGif ? 480 : 1200,
alt: t("title"),
},
],
},
twitter: {
card: "summary_large_image",
title: t("title"),
description: t("description"),
creator: "@poyrazavsever",
images: [{ url: socialImageUrl, alt: t("title") }],
},
};
}
app/[locale]/layout.tsx
+15 -2
View File
@@ -8,6 +8,7 @@ import "../globals.css";
import { AppShell } from "@/components/app-shell";
import { GoogleAnalytics } from "@/components/google-analytics";
import { PoyrazBottomRightFollower } from "@/components/poyraz-bottom-right-follower";
import { listAnimationSources } from "@/data/animation-sources";
export async function generateMetadata({
params,
@@ -108,14 +109,26 @@ export default async function LocaleLayout({
}
// Provide messages for NextIntlClientProvider
const messages = await getMessages();
const [messages, animationSources] = await Promise.all([
getMessages(),
listAnimationSources(locale),
]);
const animationSourceSearchItems = animationSources.map((source) => ({
slug: source.slug,
title: source.title,
excerpt: source.excerpt,
platform: source.platform,
tools: source.tools,
}));
return (
<html lang={locale}>
<body className="min-h-dvh bg-background text-foreground antialiased">
<NextIntlClientProvider messages={messages}>
<GoogleAnalytics />
<AppShell>{children}</AppShell>
<AppShell animationSources={animationSourceSearchItems}>
{children}
</AppShell>
<PoyrazBottomRightFollower />
</NextIntlClientProvider>
</body>
components/animation-sources-content.tsx
+11 -28
View File
@@ -1,5 +1,5 @@
import Image from "next/image";
import { Badge, Card, Typography } from "poyraz-ui/atoms";
import { Card, Typography } from "poyraz-ui/atoms";
import { NewsCard } from "poyraz-ui/molecules";
import { Link } from "@/i18n/routing";
import type { AnimationSource } from "@/data/animation-sources";
@@ -34,38 +34,21 @@ export function AnimationSourcesContent({
</header>
{sources.length > 0 ? (
<div className="grid grid-cols-2 gap-3 sm:grid-cols-3">
<div className="space-y-3">
{sources.map((source) => (
<Link
key={`${source.lang}-${source.slug}`}
href={`/animation-sources/${source.slug}`}
data-animation-source-card
className="group min-w-0"
className="block min-w-0"
>
<Card className="h-full overflow-hidden rounded-sm border-border p-0 transition-colors group-hover:border-red-600/60">
<div className="relative aspect-square overflow-hidden bg-white">
<Image
src={source.coverImage}
alt=""
fill
unoptimized={source.coverImage.toLowerCase().endsWith(".gif")}
sizes="(max-width: 640px) 50vw, 280px"
className="object-cover transition-transform duration-300 group-hover:scale-[1.02] motion-reduce:transition-none motion-reduce:group-hover:scale-100"
/>
</div>
<div className="space-y-2 border-t border-border p-3">
<Badge variant="outline" className="rounded-sm">
{source.platform}
</Badge>
<Typography
variant="large"
data-animation-source-title
className="line-clamp-2 min-h-10 text-sm leading-5 sm:text-base"
>
{source.title}
</Typography>
</div>
</Card>
<NewsCard
image={source.coverImage}
category={source.platform}
title={source.title}
date={source.date}
className="w-full rounded-sm border-border [&>div]:min-h-32 [&>div>div:first-child]:w-32 sm:[&>div>div:first-child]:w-40 [&_h3]:text-base"
/>
</Link>
))}
</div>
components/app-shell.tsx
+8 -2
View File
@@ -9,6 +9,7 @@ import { ANNOUNCEMENT_ITEMS, ENABLE_NEKO_FOLLOWER } from "@/data/site-settings";
import { useLocale } from "next-intl";
import { getLocalizedValue } from "@/lib/locale";
import dynamic from "next/dynamic";
import type { AnimationSourceSearchItem } from "@/lib/command-palette-links";
const AtaturkWidgetModal = dynamic(
() => import("@/components/ataturk-widget-modal").then((mod) => mod.AtaturkWidgetModal),
@@ -17,6 +18,7 @@ const AtaturkWidgetModal = dynamic(
type AppShellProps = {
children: React.ReactNode;
animationSources: AnimationSourceSearchItem[];
};
export type ThemeMode = "light" | "dark";
@@ -30,7 +32,7 @@ function getInitialTheme(): ThemeMode {
return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
}
export function AppShell({ children }: AppShellProps) {
export function AppShell({ children, animationSources }: AppShellProps) {
const pathname = usePathname();
const locale = useLocale();
const announcement = ANNOUNCEMENT_ITEMS[0];
@@ -57,7 +59,11 @@ export function AppShell({ children }: AppShellProps) {
<AtaturkWidgetModal theme={theme} />
{ENABLE_NEKO_FOLLOWER ? <NekoFollower /> : null}
<div className="mx-auto flex w-full max-w-4xl flex-col px-4 py-4 ">
<SiteNavbar theme={theme} onThemeChange={setTheme} />
<SiteNavbar
theme={theme}
onThemeChange={setTheme}
animationSources={animationSources}
/>
{announcement ? (
<AnnouncementBar
variant="branded"
components/search-command.tsx
+9 -3
View File
@@ -17,6 +17,7 @@ import {
} from "poyraz-ui/molecules";
import {
getCommandPaletteGroups,
type AnimationSourceSearchItem,
type CommandPaletteItem as PaletteItem,
} from "@/lib/command-palette-links";
import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label";
@@ -24,9 +25,14 @@ import { useKeyboardShortcutLabel } from "@/lib/use-keyboard-shortcut-label";
type SearchCommandProps = {
open: boolean;
onOpenChange: (open: boolean) => void;
animationSources: AnimationSourceSearchItem[];
};
export function SearchCommand({ open, onOpenChange }: SearchCommandProps) {
export function SearchCommand({
open,
onOpenChange,
animationSources,
}: SearchCommandProps) {
const router = useRouter();
const locale = useLocale();
const tLinks = useTranslations("Links");
@@ -36,8 +42,8 @@ export function SearchCommand({ open, onOpenChange }: SearchCommandProps) {
const [query, setQuery] = useState("");
const groups = useMemo(() => {
return getCommandPaletteGroups(locale, tLinks, tNav);
}, [locale, tLinks, tNav]);
return getCommandPaletteGroups(locale, tLinks, tNav, animationSources);
}, [animationSources, locale, tLinks, tNav]);
const handleOpenChange = useCallback((nextOpen: boolean) => {
if (!nextOpen) {
components/site-navbar.tsx
+14 -3
View File
@@ -43,6 +43,7 @@ import {
TOP_ICON_LINKS,
} from "@/lib/links";
import type { ThemeMode } from "@/components/app-shell";
import type { AnimationSourceSearchItem } from "@/lib/command-palette-links";
const SearchCommand = dynamic(
() => import("@/components/search-command").then((mod) => mod.SearchCommand),
@@ -98,9 +99,15 @@ function ThemeToggle({ theme, onThemeChange }: ThemeToggleProps) {
);
}
type SiteNavbarProps = ThemeToggleProps;
type SiteNavbarProps = ThemeToggleProps & {
animationSources: AnimationSourceSearchItem[];
};
export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
export function SiteNavbar({
theme,
onThemeChange,
animationSources,
}: SiteNavbarProps) {
const pathname = usePathname();
const [searchOpen, setSearchOpen] = useState(false);
const [mobileMenuOpen, setMobileMenuOpen] = useState(false);
@@ -545,7 +552,11 @@ export function SiteNavbar({ theme, onThemeChange }: SiteNavbarProps) {
</Sheet>
</div>
<SearchCommand open={searchOpen} onOpenChange={setSearchOpen} />
<SearchCommand
open={searchOpen}
onOpenChange={setSearchOpen}
animationSources={animationSources}
/>
</header>
</div>
);
lib/command-palette-links.ts
+39 -1
View File
@@ -28,10 +28,19 @@ export type CommandPaletteGroup = {
items: CommandPaletteItem[];
};
export type AnimationSourceSearchItem = {
slug: string;
title: string;
excerpt: string;
platform: string;
tools: string[];
};
export function getCommandPaletteGroups(
locale: string,
tLinks: (key: string) => string,
tNav: { (key: string): string; has: (key: string) => boolean }
tNav: { (key: string): string; has: (key: string) => boolean },
animationSources: AnimationSourceSearchItem[] = [],
): CommandPaletteGroup[] {
const navigationItems: CommandPaletteItem[] = NAV_LINKS.map((item) => {
const label = tNav.has(item.id) ? tNav(item.id) : item.label;
@@ -77,6 +86,24 @@ export function getCommandPaletteGroups(
}),
);
const animationSourceItems: CommandPaletteItem[] = animationSources.map(
(source) => ({
id: `animation-source-${source.slug}`,
label: source.title,
href: `/animation-sources/${source.slug}`,
icon: "mdi:motion-play-outline",
keywords: [
source.excerpt,
source.platform,
...source.tools,
"animation",
"prompt",
locale === "tr" ? "animasyon" : "motion",
locale === "tr" ? "kaynak" : "source",
],
}),
);
const blogItems: CommandPaletteItem[] = [
{
id: "blog-index",
@@ -297,6 +324,17 @@ export function getCommandPaletteGroups(
items: contentItems,
},
...dropdownGroups,
...(animationSourceItems.length > 0
? [
{
id: "animation-sources-data",
heading: tNav.has("animationResources")
? tNav("animationResources")
: "Animation Sources",
items: animationSourceItems,
},
]
: []),
{
id: "social",
heading: "Social",