From 3083be0c9dc9ec0ded58eda937b83fbdf511f386 Mon Sep 17 00:00:00 2001 From: Mohamed Bassem Date: Sun, 9 Nov 2025 11:50:58 +0000 Subject: feat: Add page titles (#2109) * feat: add Next.js metadata titles to dynamic and settings pages Add page titles using Next.js metadata API for better SEO and user experience: - List pages: Show list name in format " | Karakeep" - Tag pages: Show tag name in format " | Karakeep" - Admin pages: Add titles for overview, users, and background jobs pages - Settings pages: Add titles for all settings pages (API keys, AI, feeds, import, info, webhooks, subscription, rules, stats, assets, broken links) For client components (rules, stats, assets, broken-links), created layout.tsx files to export metadata since metadata can only be exported from server components. * feat: add Next.js metadata titles to dashboard pages Add page titles using Next.js metadata API to archive, favourites, highlights, and all tags pages: - Archive page: Show "Archive | Karakeep" - Favourites page: Show "Favourites | Karakeep" - Highlights page: Show "Highlights | Karakeep" - All Tags page: Show "All Tags | Karakeep" Improves SEO and user experience across all dashboard browsing pages. * refactor: use i18n translations for dashboard page titles Convert hardcoded page titles to use translations via generateMetadata: - Archive page: Uses common.archive translation - Favourites page: Uses lists.favourites translation - Highlights page: Uses common.highlights translation - All Tags page: Uses tags.all_tags translation Improves localization support across dashboard pages. * feat: add i18n translations to admin and settings page titles Convert hardcoded page titles to use translations via generateMetadata: - Admin Overview: Uses admin.admin_settings translation - AI Settings: Uses settings.ai.ai_settings translation - API Keys: Uses settings.api_keys.api_keys translation - Feed Settings: Uses settings.feeds.rss_subscriptions translation - Import/Export: Uses settings.import.import_export translation - Account Info: Uses settings.info.user_info translation - Subscription: Uses settings.subscription.subscription translation - Webhooks: Uses settings.webhooks.webhooks translation Improves localization support across admin and settings pages. * revert accidental commit * more translations * more fixes --------- Co-authored-by: Claude --- apps/web/app/dashboard/archive/page.tsx | 10 ++++++++++ apps/web/app/dashboard/favourites/page.tsx | 10 ++++++++++ apps/web/app/dashboard/highlights/page.tsx | 9 +++++++++ apps/web/app/dashboard/lists/[listId]/page.tsx | 18 ++++++++++++++++++ apps/web/app/dashboard/tags/[tagId]/page.tsx | 18 ++++++++++++++++++ apps/web/app/dashboard/tags/page.tsx | 10 ++++++++++ 6 files changed, 75 insertions(+) (limited to 'apps/web/app/dashboard') diff --git a/apps/web/app/dashboard/archive/page.tsx b/apps/web/app/dashboard/archive/page.tsx index becb6a58..33a6e610 100644 --- a/apps/web/app/dashboard/archive/page.tsx +++ b/apps/web/app/dashboard/archive/page.tsx @@ -1,5 +1,15 @@ +import type { Metadata } from "next"; import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks"; import InfoTooltip from "@/components/ui/info-tooltip"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("common.archive")} | Karakeep`, + }; +} function header() { return ( diff --git a/apps/web/app/dashboard/favourites/page.tsx b/apps/web/app/dashboard/favourites/page.tsx index be20bd2f..7ece9cdf 100644 --- a/apps/web/app/dashboard/favourites/page.tsx +++ b/apps/web/app/dashboard/favourites/page.tsx @@ -1,4 +1,14 @@ +import type { Metadata } from "next"; import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("lists.favourites")} | Karakeep`, + }; +} export default async function FavouritesBookmarkPage() { return ( diff --git a/apps/web/app/dashboard/highlights/page.tsx b/apps/web/app/dashboard/highlights/page.tsx index 1410d1fd..5945de00 100644 --- a/apps/web/app/dashboard/highlights/page.tsx +++ b/apps/web/app/dashboard/highlights/page.tsx @@ -1,9 +1,18 @@ +import type { Metadata } from "next"; import AllHighlights from "@/components/dashboard/highlights/AllHighlights"; import { Separator } from "@/components/ui/separator"; import { useTranslation } from "@/lib/i18n/server"; import { api } from "@/server/api/client"; import { Highlighter } from "lucide-react"; +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("common.highlights")} | Karakeep`, + }; +} + export default async function HighlightsPage() { // oxlint-disable-next-line rules-of-hooks const { t } = await useTranslation(); diff --git a/apps/web/app/dashboard/lists/[listId]/page.tsx b/apps/web/app/dashboard/lists/[listId]/page.tsx index 4714a71c..3f9c3416 100644 --- a/apps/web/app/dashboard/lists/[listId]/page.tsx +++ b/apps/web/app/dashboard/lists/[listId]/page.tsx @@ -1,3 +1,4 @@ +import type { Metadata } from "next"; import { notFound } from "next/navigation"; import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks"; import ListHeader from "@/components/dashboard/lists/ListHeader"; @@ -6,6 +7,23 @@ import { TRPCError } from "@trpc/server"; import { BookmarkListContextProvider } from "@karakeep/shared-react/hooks/bookmark-list-context"; +export async function generateMetadata(props: { + params: Promise<{ listId: string }>; +}): Promise { + const params = await props.params; + try { + const list = await api.lists.get({ listId: params.listId }); + return { + title: `${list.name} | Karakeep`, + }; + } catch (e) { + if (e instanceof TRPCError && e.code === "NOT_FOUND") { + notFound(); + } + throw e; + } +} + export default async function ListPage(props: { params: Promise<{ listId: string }>; searchParams?: Promise<{ diff --git a/apps/web/app/dashboard/tags/[tagId]/page.tsx b/apps/web/app/dashboard/tags/[tagId]/page.tsx index 7971da1e..fcb5010e 100644 --- a/apps/web/app/dashboard/tags/[tagId]/page.tsx +++ b/apps/web/app/dashboard/tags/[tagId]/page.tsx @@ -1,3 +1,4 @@ +import type { Metadata } from "next"; import { notFound } from "next/navigation"; import Bookmarks from "@/components/dashboard/bookmarks/Bookmarks"; import EditableTagName from "@/components/dashboard/tags/EditableTagName"; @@ -7,6 +8,23 @@ import { api } from "@/server/api/client"; import { TRPCError } from "@trpc/server"; import { MoreHorizontal } from "lucide-react"; +export async function generateMetadata(props: { + params: Promise<{ tagId: string }>; +}): Promise { + const params = await props.params; + try { + const tag = await api.tags.get({ tagId: params.tagId }); + return { + title: `${tag.name} | Karakeep`, + }; + } catch (e) { + if (e instanceof TRPCError && e.code === "NOT_FOUND") { + notFound(); + } + throw e; + } +} + export default async function TagPage(props: { params: Promise<{ tagId: string }>; searchParams?: Promise<{ diff --git a/apps/web/app/dashboard/tags/page.tsx b/apps/web/app/dashboard/tags/page.tsx index b2acd45b..2ebcf2f7 100644 --- a/apps/web/app/dashboard/tags/page.tsx +++ b/apps/web/app/dashboard/tags/page.tsx @@ -1,4 +1,14 @@ +import type { Metadata } from "next"; import AllTagsView from "@/components/dashboard/tags/AllTagsView"; +import { useTranslation } from "@/lib/i18n/server"; + +export async function generateMetadata(): Promise { + // oxlint-disable-next-line rules-of-hooks + const { t } = await useTranslation(); + return { + title: `${t("tags.all_tags")} | Karakeep`, + }; +} export default async function TagsPage() { return ; -- cgit v1.2.3-70-g09d2