Files
video-downloader/src/app/[locale]/supported-sites/page.tsx
T
anthonyandClaude Sonnet 5 bd863056a3 feat: add supported sites page, remove yt-dlp mentions from public copy
yt-dlp is an internal implementation detail and should not be exposed
on the public site. Replace direct mentions in the platforms and FAQ
sections with a link to a new /supported-sites page listing every
extractor from yt-dlp's supported-sites doc (searchable, grouped
alphabetically), translated across en/fr/es/it.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
2026-08-11 11:36:29 +02:00

62 lines
1.8 KiB
TypeScript

import type { Metadata } from 'next'
import { getTranslations } from 'next-intl/server'
import { Link } from '@/navigation'
import { SUPPORTED_SITES } from '@/lib/supported-sites'
import { SupportedSitesBrowser } from '@/components/SupportedSitesBrowser'
export async function generateMetadata({
params,
}: {
params: Promise<{ locale: string }>
}): Promise<Metadata> {
const { locale } = await params
const t = await getTranslations({ locale, namespace: 'supportedSitesPage' })
return {
title: t('title'),
description: t('description'),
}
}
export default async function SupportedSitesPage({
params,
}: {
params: Promise<{ locale: string }>
}) {
const { locale } = await params
const t = await getTranslations({ locale, namespace: 'supportedSitesPage' })
return (
<main className="px-6 py-16">
<div className="max-w-4xl mx-auto">
<Link
href="/"
className="inline-block text-sm text-violet-600 dark:text-violet-400 hover:underline"
>
{t('back')}
</Link>
<h1 className="mt-4 text-3xl md:text-4xl font-bold tracking-tight text-gray-900 dark:text-gray-50 text-center">
{t('heading')}
</h1>
<p className="mt-3 text-gray-500 dark:text-gray-400 text-center max-w-2xl mx-auto">
{t('subheading')}
</p>
<div className="mt-10">
<SupportedSitesBrowser
sites={SUPPORTED_SITES}
searchPlaceholder={t('searchPlaceholder')}
resultCountTemplate={t.raw('resultCount')}
noResultsLabel={t('noResults')}
/>
</div>
<p className="mt-12 text-xs text-gray-400 dark:text-slate-500 text-center max-w-2xl mx-auto">
{t('note')}
</p>
</div>
</main>
)
}