fix(links): fix static file routing issues for RSS and resume files

This commit is contained in:
Poyraz
2026-06-27 15:19:57 +03:00
parent c4a7542f76
commit 66c8848760
2 changed files with 81 additions and 40 deletions
+63 -26
View File
@@ -2,7 +2,7 @@
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import { Link } from "@/i18n/routing"; import { Link } from "@/i18n/routing";
import { useTranslations } from "next-intl"; import { useLocale, useTranslations } from "next-intl";
import { useMemo, useState } from "react"; import { useMemo, useState } from "react";
import { import {
Avatar, Avatar,
@@ -60,6 +60,7 @@ function formatHref(href: string) {
export function LinksContent() { export function LinksContent() {
const t = useTranslations("Links"); const t = useTranslations("Links");
const tNav = useTranslations("Nav"); const tNav = useTranslations("Nav");
const locale = useLocale();
const [activeCategory, setActiveCategory] = useState<CategoryFilter>("all"); const [activeCategory, setActiveCategory] = useState<CategoryFilter>("all");
const [query, setQuery] = useState(""); const [query, setQuery] = useState("");
@@ -141,7 +142,7 @@ export function LinksContent() {
<div className="flex flex-wrap gap-2"> <div className="flex flex-wrap gap-2">
{SOCIAL_LINKS.map((item) => ( {SOCIAL_LINKS.map((item) => (
<Link <a
key={item.id} key={item.id}
href={item.href} href={item.href}
target="_blank" target="_blank"
@@ -151,19 +152,15 @@ export function LinksContent() {
className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-border bg-background text-muted-foreground transition-all hover:-translate-y-0.5 hover:border-red-600/40 hover:text-foreground" className="inline-flex h-11 w-11 items-center justify-center rounded-2xl border border-border bg-background text-muted-foreground transition-all hover:-translate-y-0.5 hover:border-red-600/40 hover:text-foreground"
> >
<Icon icon={item.icon} width={18} height={18} /> <Icon icon={item.icon} width={18} height={18} />
</Link> </a>
))} ))}
</div> </div>
<div className="grid gap-2 sm:grid-cols-2"> <div className="grid gap-2 sm:grid-cols-2">
{TOP_ICON_LINKS.map((item) => ( {TOP_ICON_LINKS.map((item) => {
<Link const href = item.id === "cv" ? `/resume-${locale}.pdf` : item.href;
key={item.id} const isStaticOrExternal = item.external || item.id === "rss" || item.id === "cv";
href={item.href} const CardContent = (
target={item.external ? "_blank" : undefined}
rel={item.external ? "noreferrer" : undefined}
className="block"
>
<Card className="rounded-2xl border-border bg-muted/35 p-3 transition-all hover:-translate-y-0.5 hover:border-red-600/40 hover:bg-background"> <Card className="rounded-2xl border-border bg-muted/35 p-3 transition-all hover:-translate-y-0.5 hover:border-red-600/40 hover:bg-background">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border bg-background text-muted-foreground"> <span className="inline-flex h-10 w-10 shrink-0 items-center justify-center rounded-xl border border-border bg-background text-muted-foreground">
@@ -177,13 +174,35 @@ export function LinksContent() {
variant="small" variant="small"
className="truncate text-xs text-muted-foreground" className="truncate text-xs text-muted-foreground"
> >
{formatHref(item.href)} {formatHref(href)}
</Typography> </Typography>
</div> </div>
</div> </div>
</Card> </Card>
</Link> );
))}
return isStaticOrExternal ? (
<a
key={item.id}
href={href}
target={item.id === "cv" || item.external ? "_blank" : undefined}
rel={item.id === "cv" || item.external ? "noreferrer" : undefined}
className="block"
>
{CardContent}
</a>
) : (
<Link
key={item.id}
href={href}
target={item.external ? "_blank" : undefined}
rel={item.external ? "noreferrer" : undefined}
className="block"
>
{CardContent}
</Link>
);
})}
</div> </div>
<div className="space-y-3 pt-1"> <div className="space-y-3 pt-1">
@@ -223,14 +242,10 @@ export function LinksContent() {
</div> </div>
<div className="grid gap-2"> <div className="grid gap-2">
{filteredItems.map((item) => ( {filteredItems.map((item) => {
<Link const href = item.id === "cv" ? `/resume-${locale}.pdf` : item.href;
key={`${item.category}-${item.id}`} const isStaticOrExternal = item.external || item.id === "rss" || item.id === "cv" || href.endsWith(".xml") || href.endsWith(".pdf");
href={item.href} const CardContent = (
target={item.external ? "_blank" : undefined}
rel={item.external ? "noreferrer" : undefined}
className="block"
>
<Card className="rounded-2xl border-border p-3 transition-all hover:-translate-y-0.5 hover:border-red-600/40"> <Card className="rounded-2xl border-border p-3 transition-all hover:-translate-y-0.5 hover:border-red-600/40">
<div className="flex items-center gap-3"> <div className="flex items-center gap-3">
<span className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-border bg-muted/35 text-muted-foreground"> <span className="inline-flex h-11 w-11 shrink-0 items-center justify-center rounded-xl border border-border bg-muted/35 text-muted-foreground">
@@ -251,21 +266,43 @@ export function LinksContent() {
variant="small" variant="small"
className="mt-1 truncate text-xs text-muted-foreground" className="mt-1 truncate text-xs text-muted-foreground"
> >
{formatHref(item.href)} {formatHref(href)}
</Typography> </Typography>
</div> </div>
<span className="text-muted-foreground"> <span className="text-muted-foreground">
<Icon <Icon
icon={item.external ? "mdi:arrow-top-right" : "mdi:arrow-right"} icon={isStaticOrExternal ? "mdi:arrow-top-right" : "mdi:arrow-right"}
width={18} width={18}
height={18} height={18}
/> />
</span> </span>
</div> </div>
</Card> </Card>
</Link> );
))}
return isStaticOrExternal ? (
<a
key={`${item.category}-${item.id}`}
href={href}
target={item.id === "cv" || item.external ? "_blank" : undefined}
rel={item.id === "cv" || item.external ? "noreferrer" : undefined}
className="block"
>
{CardContent}
</a>
) : (
<Link
key={`${item.category}-${item.id}`}
href={href}
target={item.external ? "_blank" : undefined}
rel={item.external ? "noreferrer" : undefined}
className="block"
>
{CardContent}
</Link>
);
})}
{filteredItems.length === 0 ? ( {filteredItems.length === 0 ? (
<Card className="rounded-2xl border-border px-4 py-5"> <Card className="rounded-2xl border-border px-4 py-5">
+18 -14
View File
@@ -3,7 +3,7 @@
import { Icon } from "@iconify/react"; import { Icon } from "@iconify/react";
import dynamic from "next/dynamic"; import dynamic from "next/dynamic";
import { Link, usePathname } from "@/i18n/routing"; import { Link, usePathname } from "@/i18n/routing";
import { useTranslations } from "next-intl"; import { useLocale, useTranslations } from "next-intl";
import { LanguageSwitcher } from "@/components/language-switcher"; import { LanguageSwitcher } from "@/components/language-switcher";
import { useState } from "react"; import { useState } from "react";
import { import {
@@ -47,6 +47,7 @@ export function SiteNavbar() {
const [searchOpen, setSearchOpen] = useState(false); const [searchOpen, setSearchOpen] = useState(false);
const shortcut = useKeyboardShortcutLabel(); const shortcut = useKeyboardShortcutLabel();
const t = useTranslations("Nav"); const t = useTranslations("Nav");
const locale = useLocale();
const isActiveLink = (href: string) => { const isActiveLink = (href: string) => {
if (href === "/") return pathname === "/"; if (href === "/") return pathname === "/";
@@ -56,19 +57,22 @@ export function SiteNavbar() {
return ( return (
<div className="space-y-3"> <div className="space-y-3">
<div className="flex items-center justify-end gap-2 border-b border-border pb-3"> <div className="flex items-center justify-end gap-2 border-b border-border pb-3">
{TOP_ICON_LINKS.map((item) => ( {TOP_ICON_LINKS.map((item) => {
<Link const href = item.id === "cv" ? `/resume-${locale}.pdf` : item.href;
key={item.id} return (
href={item.href} <a
target={item.external ? "_blank" : undefined} key={item.id}
rel={item.external ? "noreferrer" : undefined} href={href}
aria-label={t.has(item.id) ? t(item.id) : item.label} target={item.id === "cv" || item.external ? "_blank" : undefined}
title={t.has(item.id) ? t(item.id) : item.label} rel={item.id === "cv" || item.external ? "noreferrer" : undefined}
className="inline-flex h-8 w-8 items-center justify-center rounded-sm border border-border text-muted-foreground transition-colors hover:text-foreground" aria-label={t.has(item.id) ? t(item.id) : item.label}
> title={t.has(item.id) ? t(item.id) : item.label}
<Icon icon={item.icon} width={16} height={16} /> className="inline-flex h-8 w-8 items-center justify-center rounded-sm border border-border text-muted-foreground transition-colors hover:text-foreground"
</Link> >
))} <Icon icon={item.icon} width={16} height={16} />
</a>
);
})}
<LanguageSwitcher /> <LanguageSwitcher />
</div> </div>