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>
62 lines
1.8 KiB
TypeScript
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>
|
|
)
|
|
}
|