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
parent c8e991a8f7
commit bd863056a3
9 changed files with 1617 additions and 17 deletions
@@ -0,0 +1,61 @@
+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>
+  )
+}