Refactor navigation header data to improve organization and add new link

- Removed the duplicate development link from the header.
- Added a new link for 'Focused YouTube' to the navigation.
- Sorted the links alphabetically for better readability.

src/i18n/translations.youtube.ts

@@ -0,0 +1,178 @@
+// Focused YouTube userscript page translations
+import { supportedLanguages } from './translations';
+
+export type SupportedLanguage = typeof supportedLanguages[number];
+
+export interface FocusedYouTubeTranslation {
+  title: string;
+  summary: string;
+  features: {
+    title: string;
+    items: string[];
+  };
+  howToInstall: string;
+  step1: string;
+  step2: string;
+  step3: string;
+  step4: string;
+  notes: {
+    title: string;
+    items: string[];
+  };
+  targetAudience: string;
+  moreDetails: string;
+  viewOnGreasyFork: string;
+}
+
+const translations: Record<SupportedLanguage, FocusedYouTubeTranslation> = {
+    en: {
+      title: 'Focused YouTube – Remove Distractions & Ads',
+      summary: 'Focused YouTube is a userscript that removes ads, shorts, and algorithmic suggestions from YouTube. Enjoy a cleaner, distraction-free experience in English, Dutch, German, and French.',
+      features: {
+        title: 'Key Features',
+        items: [
+          'Removes all YouTube ads (pre-roll, banners, overlays)',
+          'Hides Shorts and algorithmic suggestions',
+          'Redirects Shorts to regular video player',
+          'Skips video ads automatically',
+          'Hides live chat and related videos',
+          'Forces cinema/theater mode for better focus',
+          'Supports multiple languages (EN/NL/DE/FR)',
+          'Customizable settings for homepage, search, and more',
+          'Works on both desktop and mobile YouTube',
+          'Open source and privacy-friendly',
+        ],
+      },
+      howToInstall: 'How to Install',
+      step1: 'Install a userscript manager like Tampermonkey or Violentmonkey in your browser.',
+      step2: 'Visit the Focused YouTube script page on Greasy Fork (coming soon) or copy the script from GitHub.',
+      step3: 'Click "Install" to add the script to your userscript manager.',
+      step4: 'Refresh YouTube and enjoy a cleaner, distraction-free experience!',
+      notes: {
+        title: 'Important Notes',
+        items: [
+          'Some features may break if YouTube updates its layout. The script will be updated as needed.',
+          'You can customize settings by editing the script or using the userscript manager options.',
+          'No data is collected or sent anywhere. 100% privacy-friendly.',
+          'For bug reports or feature requests, visit the GitHub repository.',
+        ],
+      },
+      targetAudience: 'Anyone who wants to focus on content, avoid distractions, and block ads on YouTube.',
+      moreDetails: 'For more information, source code, and updates, visit the GitHub repository or contact the author.',
+      viewOnGreasyFork: 'View on Greasy Fork',
+    },
+    nl: {
+      title: 'Focused YouTube – Verwijder Afleiding & Advertenties',
+      summary: 'Focused YouTube is een gebruikersscript dat advertenties, Shorts en algoritmische aanbevelingen op YouTube verwijdert. Geniet van een schonere, afleidingsvrije ervaring in het Engels, Nederlands, Duits en Frans.',
+      features: {
+        title: 'Belangrijkste functies',
+        items: [
+          'Verwijdert alle YouTube-advertenties (pre-roll, banners, overlays)',
+          'Verbergt Shorts en algoritmische aanbevelingen',
+          'Redirects Shorts naar de normale videospeler',
+          'Slaat videoadvertenties automatisch over',
+          'Verbergt livechat en gerelateerde video\'s',
+          'Forceert de bioscoopmodus voor meer focus',
+          'Ondersteunt meerdere talen (EN/NL/DE/FR)',
+          'Aanpasbare instellingen voor startpagina, zoeken en meer',
+          'Werkt op zowel desktop als mobiele YouTube',
+          'Open source en privacyvriendelijk',
+        ],
+      },
+      howToInstall: 'Installatiehandleiding',
+      step1: 'Installeer een userscriptmanager zoals Tampermonkey of Violentmonkey in je browser.',
+      step2: 'Bezoek de Focused YouTube-scriptpagina op Greasy Fork (binnenkort beschikbaar) of kopieer het script van GitHub.',
+      step3: 'Klik op "Installeren" om het script toe te voegen aan je userscriptmanager.',
+      step4: 'Ververs YouTube en geniet van een schonere, afleidingsvrije ervaring!',
+      notes: {
+        title: 'Belangrijke opmerkingen',
+        items: [
+          'Sommige functies kunnen breken als YouTube zijn layout aanpast. Het script wordt indien nodig bijgewerkt.',
+          'Je kunt instellingen aanpassen door het script te bewerken of via de manageropties.',
+          'Er worden geen gegevens verzameld of verzonden. 100% privacyvriendelijk.',
+          'Voor bugmeldingen of functiesuggesties, bezoek de GitHub-repository.',
+        ],
+      },
+      targetAudience: 'Iedereen die zich wil concentreren op inhoud, afleiding wil vermijden en advertenties op YouTube wil blokkeren.',
+      moreDetails: 'Voor meer informatie, broncode en updates, bezoek de GitHub-repository of neem contact op met de auteur.',
+      viewOnGreasyFork: 'Bekijk op Greasy Fork',
+    },
+    de: {
+      title: 'Focused YouTube – Ablenkungen & Werbung entfernen',
+      summary: 'Focused YouTube ist ein Userscript, das Werbung, Shorts und algorithmische Empfehlungen von YouTube entfernt. Genieße ein aufgeräumtes, ablenkungsfreies YouTube-Erlebnis in Englisch, Niederländisch, Deutsch und Französisch.',
+      features: {
+        title: 'Hauptfunktionen',
+        items: [
+          'Entfernt alle YouTube-Werbung (Pre-Roll, Banner, Overlays)',
+          'Blendet Shorts und algorithmische Vorschläge aus',
+          'Leitet Shorts zum normalen Videoplayer um',
+          'Überspringt Videowerbung automatisch',
+          'Blendet Live-Chat und verwandte Videos aus',
+          'Erzwingt Kinomodus für besseren Fokus',
+          'Unterstützt mehrere Sprachen (EN/NL/DE/FR)',
+          'Anpassbare Einstellungen für Startseite, Suche und mehr',
+          'Funktioniert auf Desktop- und Mobil-YouTube',
+          'Open Source und datenschutzfreundlich',
+        ],
+      },
+      howToInstall: 'Installationsanleitung',
+      step1: 'Installiere einen Userscript-Manager wie Tampermonkey oder Violentmonkey in deinem Browser.',
+      step2: 'Besuche die Focused YouTube-Skriptseite auf Greasy Fork (bald verfügbar) oder kopiere das Skript von GitHub.',
+      step3: 'Klicke auf „Installieren“, um das Skript deinem Userscript-Manager hinzuzufügen.',
+      step4: 'Lade YouTube neu und genieße eine ablenkungsfreie Nutzung!',
+      notes: {
+        title: 'Wichtige Hinweise',
+        items: [
+          'Einige Funktionen könnten bei YouTube-Layoutänderungen nicht mehr funktionieren. Das Skript wird entsprechend aktualisiert.',
+          'Du kannst Einstellungen im Skript oder über die Manageroptionen anpassen.',
+          'Es werden keinerlei Daten gesammelt oder übertragen. 100% datenschutzfreundlich.',
+          'Für Fehlerberichte oder Funktionswünsche besuche das GitHub-Repository.',
+        ],
+      },
+      targetAudience: 'Alle, die sich auf Inhalte konzentrieren, Ablenkungen vermeiden und Werbung auf YouTube blockieren möchten.',
+      moreDetails: 'Für weitere Informationen, Quellcode und Updates besuche das GitHub-Repository oder kontaktiere den Autor.',
+      viewOnGreasyFork: 'Auf Greasy Fork ansehen',
+    },
+    fr: {
+      title: 'Focused YouTube – Supprimer les distractions et les publicités',
+      summary: 'Focused YouTube est un userscript qui supprime les publicités, les Shorts et les suggestions algorithmiques sur YouTube. Profitez d’une expérience plus claire et sans distractions en anglais, néerlandais, allemand et français.',
+      features: {
+        title: 'Fonctionnalités principales',
+        items: [
+          'Supprime toutes les publicités YouTube (pré-roll, bannières, superpositions)',
+          'Masque les Shorts et suggestions algorithmiques',
+          'Redirige les Shorts vers le lecteur vidéo classique',
+          'Passe automatiquement les publicités vidéo',
+          'Masque le chat en direct et les vidéos connexes',
+          'Active automatiquement le mode cinéma pour une meilleure concentration',
+          'Prise en charge de plusieurs langues (EN/NL/DE/FR)',
+          'Paramètres personnalisables pour la page d’accueil, la recherche, etc.',
+          'Fonctionne sur YouTube version bureau et mobile',
+          'Open source et respectueux de la vie privée',
+        ],
+      },
+      howToInstall: 'Comment l’installer',
+      step1: 'Installez un gestionnaire de userscripts comme Tampermonkey ou Violentmonkey dans votre navigateur.',
+      step2: 'Visitez la page du script Focused YouTube sur Greasy Fork (bientôt disponible) ou copiez le script depuis GitHub.',
+      step3: 'Cliquez sur "Installer" pour ajouter le script à votre gestionnaire de scripts.',
+      step4: 'Rafraîchissez YouTube et profitez d’une expérience sans distractions !',
+      notes: {
+        title: 'Remarques importantes',
+        items: [
+          'Certaines fonctionnalités peuvent cesser de fonctionner si YouTube modifie sa mise en page. Le script sera mis à jour si nécessaire.',
+          'Vous pouvez personnaliser les paramètres en modifiant le script ou via le gestionnaire de scripts.',
+          'Aucune donnée n’est collectée ni envoyée. 100% respectueux de la vie privée.',
+          'Pour signaler un bug ou suggérer une fonctionnalité, consultez le dépôt GitHub.',
+        ],
+      },
+      targetAudience: 'Toute personne souhaitant se concentrer sur le contenu, éviter les distractions et bloquer les publicités sur YouTube.',
+      moreDetails: 'Pour plus d’informations, le code source et les mises à jour, consultez le dépôt GitHub ou contactez l’auteur.',
+      viewOnGreasyFork: 'Voir sur Greasy Fork',
+    },
+  };
+
+export function getFocusedYouTubeTranslation(lang: SupportedLanguage): FocusedYouTubeTranslation {
+  return translations[lang] || translations.en;
+}
+
+export const focusedYouTubeSupportedLanguages = Object.keys(translations) as SupportedLanguage[]; 

src/navigation.ts

@@ -43,11 +43,6 @@ export const getHeaderData = (lang = 'en') => {
       {
         text: t.development.menu,
         links: [
-          {
-            text: t.development.title,
-            href: getPermalink('/development', 'page', lang),
-            isHashLink: false,
-          },
           {
             text: 'Anti-FP Shield+',
             href: getPermalink('/antifp', 'page', lang),
@@ -58,12 +53,22 @@ export const getHeaderData = (lang = 'en') => {
             href: getPermalink('/eap', 'page', lang),
             isHashLink: false,
           },
+          {
+            text: 'Focused YouTube',
+            href: getPermalink('/focusedyoutube', 'page', lang),
+            isHashLink: false,
+          },
           {
             text: 'Journii',
             href: getPermalink('/journii', 'page', lang),
             isHashLink: false,
           },
-        ],
+          {
+            text: t.development.title,
+            href: getPermalink('/development', 'page', lang),
+            isHashLink: false,
+          },
+        ].sort((a, b) => a.text.localeCompare(b.text)),
       },
     ],
   };

src/pages/[lang]/focusedyoutube.astro

@@ -0,0 +1,168 @@
+---
+export const prerender = true;
+
+import Layout from '~/layouts/PageLayout.astro';
+import { getFocusedYouTubeTranslation, focusedYouTubeSupportedLanguages } from '~/i18n/translations.youtube';
+
+export async function getStaticPaths() {
+  return focusedYouTubeSupportedLanguages.map((lang) => ({
+    params: { lang },
+  }));
+}
+
+const { lang } = Astro.params;
+if (!focusedYouTubeSupportedLanguages.includes(lang)) {
+  return Astro.redirect('/en/focusedyoutube');
+}
+
+const t = getFocusedYouTubeTranslation(lang);
+
+const metadata = {
+  title: t.title,
+  description: t.summary,
+};
+---
+
+<Layout metadata={metadata}>
+  <div class="max-w-4xl mx-auto px-4 py-8">
+    <!-- Hero Section -->
+    <div class="text-center mb-12 backdrop-blur-sm bg-gradient-to-br from-red-50/80 to-orange-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-2xl p-8 shadow-lg">
+      <div class="text-6xl mb-4">🎬</div>
+      <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-red-600 to-orange-600 bg-clip-text text-transparent">
+        {t.title}
+      </h1>
+      <p class="text-xl text-gray-600 dark:text-slate-300 mb-6 max-w-2xl mx-auto">
+        {t.summary}
+      </p>
+      <div class="flex flex-col sm:flex-row gap-4 justify-center">
+        <a 
+          href="https://greasyfork.org/en/scripts/000000-focused-youtube" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          class="inline-flex items-center px-6 py-3 bg-gradient-to-r from-red-600 to-orange-600 text-white rounded-lg font-semibold hover:from-red-700 hover:to-orange-700 transition-all shadow-lg"
+        >
+          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
+          </svg>
+          {t.viewOnGreasyFork}
+        </a>
+        <a 
+          href="https://github.com/yourusername/focusedyoutube" 
+          target="_blank" 
+          rel="noopener noreferrer"
+          class="inline-flex items-center px-6 py-3 bg-white text-red-600 hover:bg-gray-100 rounded-lg font-semibold transition-colors"
+        >
+          <svg class="w-5 h-5 mr-2" fill="currentColor" viewBox="0 0 24 24">
+            <path d="M12 0C5.37 0 0 5.37 0 12c0 5.31 3.435 9.795 8.205 11.385.6.105.825-.255.825-.57 0-.285-.015-1.23-.015-2.235-3.015.555-3.795-.735-4.035-1.41-.135-.345-.72-1.41-1.23-1.695-.42-.225-1.02-.78-.015-.795.945-.015 1.62.87 1.845 1.23 1.08 1.815 2.805 1.305 3.495.99.105-.78.42-1.305.765-1.605-2.67-.3-5.46-1.335-5.46-5.925 0-1.305.465-2.385 1.23-3.225-.12-.3-.54-1.53.12-3.18 0 0 1.005-.315 3.3 1.23.96-.27 1.98-.405 3-.405s2.04.135 3 .405c2.295-1.56 3.3-1.23 3.3-1.23.66 1.65.24 2.88.12 3.18.765.84 1.23 1.905 1.23 3.225 0 4.605-2.805 5.625-5.475 5.925.435.375.81 1.095.81 2.22 0 1.605-.015 2.895-.015 3.3 0 .315.225.69.825.57A12.02 12.02 0 0024 12c0-6.63-5.37-12-12-12z"/>
+          </svg>
+          GitHub
+        </a>
+      </div>
+    </div>
+
+    <!-- Description -->
+    <div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-8 mb-12">
+      <p class="text-lg text-gray-700 dark:text-slate-200 leading-relaxed text-center">
+        {t.summary}
+      </p>
+    </div>
+
+    <!-- Features Grid -->
+    <div class="mb-12">
+      <h2 class="text-3xl font-bold text-center mb-8">{t.features.title}</h2>
+      <div class="grid md:grid-cols-2 gap-6">
+        {t.features.items.map((item, i) => (
+          <div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-6 hover:shadow-lg transition-shadow">
+            <div class="flex items-start">
+              <div class="text-2xl mr-4 mt-1">
+                {i === 0 ? '🚫' : 
+                 i === 1 ? '🙈' : 
+                 i === 2 ? '🔁' : 
+                 i === 3 ? '⏩' : 
+                 i === 4 ? '💬' : 
+                 i === 5 ? '🎥' : 
+                 i === 6 ? '🌐' : 
+                 i === 7 ? '⚙️' : 
+                 i === 8 ? '📱' : 
+                 i === 9 ? '🔓' : '🔧'}
+              </div>
+              <div>
+                <p class="text-gray-700 dark:text-slate-200">{item}</p>
+              </div>
+            </div>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <!-- Installation Guide -->
+    <div class="backdrop-blur-sm bg-gradient-to-r from-blue-50/80 to-purple-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-8 mb-12">
+      <div class="text-center mb-6">
+        <div class="text-4xl mb-4">📦</div>
+        <h2 class="text-2xl font-bold mb-4">{t.howToInstall}</h2>
+      </div>
+      <div class="max-w-2xl mx-auto">
+        <ol class="space-y-4">
+          <li class="flex items-start">
+            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm mr-4 mt-1">1</div>
+            <p class="text-gray-700 dark:text-slate-200">{t.step1}</p>
+          </li>
+          <li class="flex items-start">
+            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm mr-4 mt-1">2</div>
+            <p class="text-gray-700 dark:text-slate-200">{t.step2}</p>
+          </li>
+          <li class="flex items-start">
+            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm mr-4 mt-1">3</div>
+            <p class="text-gray-700 dark:text-slate-200">{t.step3}</p>
+          </li>
+          <li class="flex items-start">
+            <div class="flex-shrink-0 w-8 h-8 bg-blue-600 text-white rounded-full flex items-center justify-center font-bold text-sm mr-4 mt-1">4</div>
+            <p class="text-gray-700 dark:text-slate-200">{t.step4}</p>
+          </li>
+        </ol>
+      </div>
+    </div>
+
+    <!-- Important Notes -->
+    <div class="backdrop-blur-sm bg-white/70 dark:bg-slate-900/70 rounded-xl shadow p-8 mb-12">
+      <div class="flex items-center mb-6">
+        <div class="text-3xl mr-4">⚠️</div>
+        <h2 class="text-2xl font-bold">{t.notes.title}</h2>
+      </div>
+      <div class="grid md:grid-cols-1 gap-4">
+        {t.notes.items.map((item, index) => (
+          <div class="flex items-start p-4 bg-yellow-50/50 dark:bg-yellow-900/20 rounded-lg border-l-4 border-yellow-500">
+            <div class="text-yellow-600 dark:text-yellow-400 mr-3 mt-1">
+              <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
+                <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+              </svg>
+            </div>
+            <p class="text-gray-700 dark:text-slate-200">{item}</p>
+          </div>
+        ))}
+      </div>
+    </div>
+
+    <!-- Target Audience & More Info -->
+    <div class="grid md:grid-cols-2 gap-6">
+      <div class="backdrop-blur-sm bg-gradient-to-br from-green-50/80 to-blue-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6">
+        <div class="text-center mb-4">
+          <div class="text-3xl mb-2">👥</div>
+          <h3 class="text-xl font-bold">Who Is This For?</h3>
+        </div>
+        <p class="text-gray-700 dark:text-slate-200 italic text-center">
+          {t.targetAudience}
+        </p>
+      </div>
+      <div class="backdrop-blur-sm bg-gradient-to-br from-purple-50/80 to-pink-50/80 dark:from-slate-800/80 dark:to-slate-900/80 rounded-xl shadow p-6">
+        <div class="text-center mb-4">
+          <div class="text-3xl mb-2">📚</div>
+          <h3 class="text-xl font-bold">Learn More</h3>
+        </div>
+        <p class="text-gray-700 dark:text-slate-200 text-center">
+          {t.moreDetails}
+        </p>
+      </div>
+    </div>
+  </div>
+</Layout>