Files
paseo/packages/website/src/plugins/hero.tsx
T
Mohamed Boudra d87998bc8c feat(website): serve paseo.sh in Simplified Chinese
Every page of the website now has a Simplified Chinese version under
/zh-CN: the interface, docs, blog posts, comparison pages, legal pages,
all changelog releases and the homepage mockup. English URLs are unchanged.

The URL alone decides the language. There is no browser-language redirect
and no stored preference, because either would have to redirect the
unprefixed English URLs that people share and search engines index.
Internal links carry the page's language instead, and hreflang alternates
point Chinese search results at /zh-CN.

Translated headings pin the English anchor with {#id}, so section links
work in both languages. content-translations.test.ts fails when a page
has no translation or a translation's headings drift from the English.
Changelog releases and plugin listings without a translation render
whole in English under a notice, so a release never waits on one.

Plugin manifests and the registry gain optional translations and
OVERVIEW.zh-CN.md fields; older clients and registries ignore them.
2026-10-19 08:30:45 +02:00

39 lines
1.4 KiB
TypeScript

import { useTranslation } from "react-i18next";
import { ContributeButtons } from "./contribute-links";
import type { BrowseQuery } from "./links";
import { PluginSearch } from "./plugin-search";
interface PluginsHeroProps {
pluginCount: number;
authorCount: number;
/** Where the search box sends its term. */
searchScope: BrowseQuery;
}
/** Header of the plugin directory: title, counts, and copy, then the contribute buttons and search. */
export function PluginsHero({ pluginCount, authorCount, searchScope }: PluginsHeroProps) {
const { t } = useTranslation();
return (
<header>
<h1 className="flex flex-wrap items-baseline gap-x-3 gap-y-1">
<span className="text-3xl font-medium tracking-tight">{t("plugins.title")}</span>
<span className="text-sm font-normal tabular-nums text-extra-muted-foreground">
{t("plugins.counts", {
plugins: t("plugins.pluginCount", { count: pluginCount }),
authors: t("plugins.authorCount", { count: authorCount }),
})}
</span>
</h1>
<p className="mt-3 max-w-xl text-sm leading-relaxed text-muted-foreground">
{t("plugins.lead")}
</p>
<div className="mt-6 flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between">
<div className="flex flex-wrap gap-3">
<ContributeButtons />
</div>
<PluginSearch scope={searchScope} className="w-full sm:w-64" />
</div>
</header>
);
}