@jjlmoya/utils-social 1.13.0 → 1.15.0

package/src/tool/safeZones/i18n/pl.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SafeZonesUI } from '../ui';
@@ -9,7 +10,7 @@ const description =
 
 const faqData = [
   {
-    question: "Czym są „strefy bezpieczne” (Safe Zones) w mediach społecznościowych?",
+    question: "Czym są \"strefy bezpieczne\" (Safe Zones) w mediach społecznościowych?",
     answer:
       "Są to obszary ekranu, w których treść jest widoczna bez ryzyka zasłonięcia przez elementy interfejsu, takie jak nazwa użytkownika, opis, przyciski interakcji (polubienie, udostępnienie) lub automatyczne przycięcia stosowane przez niektóre urządzenia.",
   },
@@ -33,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Wczytaj zdjęcie lub film',
-    text: "Prześlij plik, który chcesz podejrzeć. Przetwarzanie odbywa się lokalnie i prywatnie — nic nie jest wysyłane do Internetu.",
+    text: "Prześlij plik, który chcesz podejrzeć. Przetwarzanie odbywa się lokalnie i prywatnie - nic nie jest wysyłane do Internetu.",
   },
   {
     name: 'Wybierz platformę',
@@ -87,27 +88,8 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Często Zadawane Pytania',
-  faq: faqData,
-  bibliographyTitle: 'Oficjalna dokumentacja platformy',
-  bibliography: [
-    {
-      name: 'TikTok Creator Portal: Video optimization and safe zones',
-      url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
-    },
-    {
-      name: 'Instagram Business: Najlepsze praktyki dla Reels',
-      url: 'https://business.instagram.com/creators/reels-best-practices',
-    },
-    {
-      name: 'Pomoc YouTube: Tworzenie YouTube Shorts',
-      url: 'https://support.google.com/youtube/answer/10343433',
-    },
-    {
-      name: 'Meta for Creators: Strefy bezpieczne i proporcje wideo',
-      url: 'https://www.facebook.com/business/help/103816146375741',
-    },
-  ],
+    faq: faqData,
+      bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
@@ -122,7 +104,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: "To narzędzie pozwala wczytać pliki multimedialne i podejrzeć dokładnie, które części kadru zostaną pochłonięte przez interfejs. Nie chodzi tylko o <strong>napisy</strong>; chodzi o upewnienie się, że twarze, produkty lub główne akcje w Twoim filmie nie zostaną pogrzebane pod przyciskiem „Lubię to” lub długim opisem.",
+      html: "To narzędzie pozwala wczytać pliki multimedialne i podejrzeć dokładnie, które części kadru zostaną pochłonięte przez interfejs. Nie chodzi tylko o <strong>napisy</strong>; chodzi o upewnienie się, że twarze, produkty lub główne akcje w Twoim filmie nie zostaną pogrzebane pod przyciskiem \"Lubię to\" lub długim opisem.",
     },
     {
       type: 'grid',
@@ -130,7 +112,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
         {
           type: 'card',
           title: 'TikTok: Najbardziej inwazyjny interfejs',
-          html: "<p>TikTok posiada najbardziej zagęszczony interfejs. Po prawej stronie znajduje się kolumna ikon zajmująca około 15% szerokości. Na dole opis może rozciągać się na 4 lub 5 linii, zakrywając od dołu prawie jedną trzecią ekranu.</p><ul><li><strong>Dolny margines:</strong> Pozostaw ostatnie 250px wolne, aby uniknąć tekstu opisu i nazwy użytkownika.</li><li><strong>Prawy margines:</strong> Unikaj umieszczania tekstu w odległości mniejszej niż 100px od prawej krawędzi.</li><li><strong>Góra:</strong> Przyciski „Obserwujesz” i „Dla Ciebie” zajmują górny środkowy pas.</li></ul>",
+          html: "<p>TikTok posiada najbardziej zagęszczony interfejs. Po prawej stronie znajduje się kolumna ikon zajmująca około 15% szerokości. Na dole opis może rozciągać się na 4 lub 5 linii, zakrywając od dołu prawie jedną trzecią ekranu.</p><ul><li><strong>Dolny margines:</strong> Pozostaw ostatnie 250px wolne, aby uniknąć tekstu opisu i nazwy użytkownika.</li><li><strong>Prawy margines:</strong> Unikaj umieszczania tekstu w odległości mniejszej niż 100px od prawej krawędzi.</li><li><strong>Góra:</strong> Przyciski \"Obserwujesz\" i \"Dla Ciebie\" zajmują górny środkowy pas.</li></ul>",
         },
         {
           type: 'card',
@@ -153,7 +135,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
       items: [
         '<strong>Prawy margines:</strong> Unikaj umieszczania tekstu lub ważnych elementów w prawym dolnym obszarze 20%.',
         '<strong>Dolny margines:</strong> Pozostaw ostatnie 150px wolne, aby uniknąć tekstu opisu i nazwy użytkownika.',
-        '<strong>Góra:</strong> Przyciski „Subskrybuj” i inne zajmują górny środkowy pas.',
+        '<strong>Góra:</strong> Przyciski \"Subskrybuj\" i inne zajmują górny środkowy pas.',
       ],
     },
     {
@@ -168,7 +150,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: '„Złota Strefa” dla głównej akcji to środkowa jedna trzecia filmu. Jeśli filmujesz osobę, upewnij się, że jej oczy i usta znajdują się w tej strefie. Ważne elementy graficzne powinny być nieco przesunięte w górę od geometrycznego środka, aby uniknąć dolnego opisu.',
+      html: '\"Złota Strefa\" dla głównej akcji to środkowa jedna trzecia filmu. Jeśli filmujesz osobę, upewnij się, że jej oczy i usta znajdują się w tej strefie. Ważne elementy graficzne powinny być nieco przesunięte w górę od geometrycznego środka, aby uniknąć dolnego opisu.',
     },
     {
       type: 'title',
@@ -195,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: "Projektowanie dla mediów społecznościowych to nie tylko estetyka — to <strong>użyteczność</strong>. Jeśli użytkownik musi walczyć o przeczytanie tekstu, ponieważ ikony platformy go zasłaniają, po prostu przejdzie do następnego filmu. Retencja (Watch Time) gwałtownie spada, gdy pojawia się wizualne tarcie.",
+      html: "Projektowanie dla mediów społecznościowych to nie tylko estetyka - to <strong>użyteczność</strong>. Jeśli użytkownik musi walczyć o przeczytanie tekstu, ponieważ ikony platformy go zasłaniają, po prostu przejdzie do następnego filmu. Retencja (Watch Time) gwałtownie spada, gdy pojawia się wizualne tarcie.",
     },
     {
       type: 'paragraph',

package/src/tool/safeZones/i18n/pt.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SafeZonesUI } from '../ui';
@@ -33,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Carrega a tua imagem ou vídeo',
-    text: 'Faz o upload do ficheiro que desejas pré-visualizar. O processamento é local e privado — nada é carregado para a internet.',
+    text: 'Faz o upload do ficheiro que desejas pré-visualizar. O processamento é local e privado - nada é carregado para a internet.',
   },
   {
     name: 'Seleciona a plataforma',
@@ -87,27 +88,8 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Perguntas Frequentes',
-  faq: faqData,
-  bibliographyTitle: 'Documentação Oficial das Plataformas',
-  bibliography: [
-    {
-      name: 'TikTok Creator Portal: Otimização de vídeo e zonas seguras',
-      url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
-    },
-    {
-      name: 'Instagram Business: Melhores práticas para Reels',
-      url: 'https://business.instagram.com/creators/reels-best-practices',
-    },
-    {
-      name: 'Ajuda do YouTube: Criar YouTube Shorts',
-      url: 'https://support.google.com/youtube/answer/10343433',
-    },
-    {
-      name: 'Meta for Creators: Zonas seguras e proporções para vídeo',
-      url: 'https://www.facebook.com/business/help/103816146375741',
-    },
-  ],
+    faq: faqData,
+      bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
@@ -195,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Desenhar para redes sociais não é apenas estética — é <strong>usabilidade</strong>. Se um utilizador tiver de lutar para ler texto porque os ícones da plataforma o cobrem, ele simplesmente passará para o vídeo seguinte. A retenção (Watch Time) cai drasticamente quando há fricção visual.',
+      html: 'Desenhar para redes sociais não é apenas estética - é <strong>usabilidade</strong>. Se um utilizador tiver de lutar para ler texto porque os ícones da plataforma o cobrem, ele simplesmente passará para o vídeo seguinte. A retenção (Watch Time) cai drasticamente quando há fricção visual.',
     },
     {
       type: 'paragraph',

package/src/tool/safeZones/i18n/ru.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SafeZonesUI } from '../ui';
@@ -9,7 +10,7 @@ const description =
 
 const faqData = [
   {
-    question: 'Что такое «безопасные зоны» в социальных сетях?',
+    question: 'Что такое \"безопасные зоны\" в социальных сетях?',
     answer:
       'Это области экрана, где контент виден без риска быть перекрытым элементами интерфейса, такими как имя пользователя, описание, кнопки взаимодействия (лайк, репост) или автоматическая обрезка, применяемая некоторыми устройствами.',
   },
@@ -33,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Загрузите изображение или видео',
-    text: 'Загрузите файл, который хотите просмотреть. Обработка происходит локально и конфиденциально — ничего не загружается в интернет.',
+    text: 'Загрузите файл, который хотите просмотреть. Обработка происходит локально и конфиденциально - ничего не загружается в интернет.',
   },
   {
     name: 'Выберите платформу',
@@ -87,27 +88,8 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Часто задаваемые вопросы',
-  faq: faqData,
-  bibliographyTitle: 'Официальная документация платформы',
-  bibliography: [
-    {
-      name: 'TikTok Creator Portal: оптимизация видео и безопасные зоны',
-      url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
-    },
-    {
-      name: 'Instagram Business: рекомендации для Reels',
-      url: 'https://business.instagram.com/creators/reels-best-practices',
-    },
-    {
-      name: 'Справка YouTube: создание YouTube Shorts',
-      url: 'https://support.google.com/youtube/answer/10343433',
-    },
-    {
-      name: 'Meta for Creators: безопасные зоны и соотношение сторон для видео',
-      url: 'https://www.facebook.com/business/help/103816146375741',
-    },
-  ],
+    faq: faqData,
+      bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
@@ -118,11 +100,11 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'В перенасыщенном мире вертикального контента первое впечатление — техническое. Самая большая ошибка авторов — игнорирование того, как их <strong>видео или изображение</strong> взаимодействует с нативным интерфейсом платформы. Каждая социальная сеть (TikTok, Instagram Reels и YouTube Shorts) накладывает слои кнопок, текста и профилей, которые могут свести на нет визуальный эффект вашей композиции.',
+      html: 'В перенасыщенном мире вертикального контента первое впечатление - техническое. Самая большая ошибка авторов - игнорирование того, как их <strong>видео или изображение</strong> взаимодействует с нативным интерфейсом платформы. Каждая социальная сеть (TikTok, Instagram Reels и YouTube Shorts) накладывает слои кнопок, текста и профилей, которые могут свести на нет визуальный эффект вашей композиции.',
     },
     {
       type: 'paragraph',
-      html: 'Этот инструмент позволяет загружать медиафайлы и просматривать, какие именно части вашего кадра будут перекрыты интерфейсом. Речь идет не только о <strong>субтитрах</strong>; речь идет о том, чтобы лица, продукты или основные действия в вашем видео не оказались погребены под кнопкой «Нравится» или длинным описанием.',
+      html: 'Этот инструмент позволяет загружать медиафайлы и просматривать, какие именно части вашего кадра будут перекрыты интерфейсом. Речь идет не только о <strong>субтитрах</strong>; речь идет о том, чтобы лица, продукты или основные действия в вашем видео не оказались погребены под кнопкой \"Нравится\" или длинным описанием.',
     },
     {
       type: 'grid',
@@ -130,7 +112,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
         {
           type: 'card',
           title: 'TikTok: самый навязчивый интерфейс',
-          html: '<p>TikTok имеет самый плотный интерфейс. С правой стороны находится колонка иконок, занимающая примерно 15% ширины. Внизу описание может растягиваться на 4 или 5 строк, закрывая почти треть экрана снизу.</p><ul><li><strong>Нижний отступ:</strong> оставляйте последние 250 пикселей свободными, чтобы избежать перекрытия текстом описания и именем пользователя.</li><li><strong>Правый отступ:</strong> избегайте размещения текста в пределах 100 пикселей от правого края.</li><li><strong>Верх:</strong> кнопки «Подписки» и «Рекомендации» занимают верхнюю центральную полосу.</li></ul>',
+          html: '<p>TikTok имеет самый плотный интерфейс. С правой стороны находится колонка иконок, занимающая примерно 15% ширины. Внизу описание может растягиваться на 4 или 5 строк, закрывая почти треть экрана снизу.</p><ul><li><strong>Нижний отступ:</strong> оставляйте последние 250 пикселей свободными, чтобы избежать перекрытия текстом описания и именем пользователя.</li><li><strong>Правый отступ:</strong> избегайте размещения текста в пределах 100 пикселей от правого края.</li><li><strong>Верх:</strong> кнопки \"Подписки\" и \"Рекомендации\" занимают верхнюю центральную полосу.</li></ul>',
         },
         {
           type: 'card',
@@ -168,7 +150,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: '«Золотая зона» для основного действия — центральная треть видео. Если вы снимаете человека, убедитесь, что его глаза и рот находятся в этой зоне. Важные графические элементы должны быть слегка смещены вверх от геометрического центра, чтобы избежать перекрытия нижним описанием.',
+      html: '\"Золотая зона\" для основного действия - центральная треть видео. Если вы снимаете человека, убедитесь, что его глаза и рот находятся в этой зоне. Важные графические элементы должны быть слегка смещены вверх от геометрического центра, чтобы избежать перекрытия нижним описанием.',
     },
     {
       type: 'title',
@@ -195,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Дизайн для социальных сетей — это не только эстетика, но и <strong>удобство использования</strong>. Если пользователю приходится изо всех сил пытаться прочитать текст, потому что иконки платформы закрывают его, он просто перелистнет к следующему видео. Удержание (Watch Time) резко падает при наличии визуального дискомфорта.',
+      html: 'Дизайн для социальных сетей - это не только эстетика, но и <strong>удобство использования</strong>. Если пользователю приходится изо всех сил пытаться прочитать текст, потому что иконки платформы закрывают его, он просто перелистнет к следующему видео. Удержание (Watch Time) резко падает при наличии визуального дискомфорта.',
     },
     {
       type: 'paragraph',
@@ -227,14 +209,14 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     ttFollowing: 'Подписки',
     ttForYou: 'Рекомендации',
     ttDescription: 'Реальный дизайн интерфейса для создателей контента. #uxdesign #socialmedia',
-    ttAudio: 'jjlmoya — оригинальный звук',
+    ttAudio: 'jjlmoya - оригинальный звук',
     ttNavHome: 'Главная',
     ttNavFriends: 'Друзья',
     ttNavInbox: 'Входящие',
     ttNavProfile: 'Профиль',
     reelsFollow: 'Подписаться',
     reelsDescription: 'Этот интерфейс идентичен реальному. #reels #ux #simulator',
-    reelsAudio: 'Trending Music — оригинальное аудио',
+    reelsAudio: 'Trending Music - оригинальное аудио',
     shortsSubscribe: 'ПОДПИСАТЬСЯ',
     shortsDislike: 'Не нравится',
     shortsShare: 'Поделиться',

package/src/tool/safeZones/i18n/sv.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SafeZonesUI } from '../ui';
@@ -33,7 +34,7 @@ const faqData = [
 const howToData = [
   {
     name: 'Ladda upp din bild eller video',
-    text: 'Ladda upp filen du vill förhandsgranska. Bearbetningen sker lokalt och privat – inget laddas upp till internet.',
+    text: 'Ladda upp filen du vill förhandsgranska. Bearbetningen sker lokalt och privat - inget laddas upp till internet.',
   },
   {
     name: 'Välj plattform',
@@ -87,27 +88,8 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Vanliga frågor',
-  faq: faqData,
-  bibliographyTitle: 'Officiell plattformsdokumentation',
-  bibliography: [
-    {
-      name: 'TikTok Creator Portal: Videooptimering och säkra zoner',
-      url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
-    },
-    {
-      name: 'Instagram Business: Best practices för Reels',
-      url: 'https://business.instagram.com/creators/reels-best-practices',
-    },
-    {
-      name: 'YouTube Help: Skapa YouTube Shorts',
-      url: 'https://support.google.com/youtube/answer/10343433',
-    },
-    {
-      name: 'Meta for Creators: Säkra zoner och bildförhållanden för video',
-      url: 'https://www.facebook.com/business/help/103816146375741',
-    },
-  ],
+    faq: faqData,
+      bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
@@ -195,7 +177,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Att designa för sociala medier handlar inte bara om estetik – det handlar om <strong>användbarhet</strong>. Om en användare måste kämpa för att läsa text för att plattformens ikoner täcker den, kommer de helt enkelt att svepa vidare till nästa video. Behållningen (Watch Time) sjunker kraftigt när det finns visuell friktion.',
+      html: 'Att designa för sociala medier handlar inte bara om estetik - det handlar om <strong>användbarhet</strong>. Om en användare måste kämpa för att läsa text för att plattformens ikoner täcker den, kommer de helt enkelt att svepa vidare till nästa video. Behållningen (Watch Time) sjunker kraftigt när det finns visuell friktion.',
     },
     {
       type: 'paragraph',

package/src/tool/safeZones/i18n/tr.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SafeZonesUI } from '../ui';
@@ -87,27 +88,8 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Sıkça Sorulan Sorular',
-  faq: faqData,
-  bibliographyTitle: 'Resmi Platform Dokümantasyonu',
-  bibliography: [
-    {
-      name: 'TikTok İçerik Üretici Portalı: Video optimizasyonu ve güvenli bölgeler',
-      url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
-    },
-    {
-      name: 'Instagram Business: Reels için en iyi uygulamalar',
-      url: 'https://business.instagram.com/creators/reels-best-practices',
-    },
-    {
-      name: 'YouTube Yardımı: YouTube Shorts oluşturma',
-      url: 'https://support.google.com/youtube/answer/10343433',
-    },
-    {
-      name: 'Meta for Creators: Videolar için güvenli bölgeler ve en boy oranları',
-      url: 'https://www.facebook.com/business/help/103816146375741',
-    },
-  ],
+    faq: faqData,
+      bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [

package/src/tool/safeZones/i18n/zh.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SafeZonesUI } from '../ui';
@@ -9,7 +10,7 @@ const description =
 
 const faqData = [
   {
-    question: '什么是社交媒体上的“安全区域”？',
+    question: '什么是社交媒体上的\"安全区域\"？',
     answer:
       '安全区域是指屏幕上内容可见且不会被界面元素（如用户名、描述、交互按钮（点赞、分享））或某些设备应用的自动裁剪所遮挡的区域。',
   },
@@ -87,27 +88,8 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
   slug,
   title,
   description,
-  faqTitle: '常见问题',
-  faq: faqData,
-  bibliographyTitle: '官方平台文档',
-  bibliography: [
-    {
-      name: 'TikTok 创作者门户：视频优化和安全区域',
-      url: 'https://www.tiktok.com/creators/creator-portal/en-us/foundation/video-optimization/',
-    },
-    {
-      name: 'Instagram 业务：Reels 最佳实践',
-      url: 'https://business.instagram.com/creators/reels-best-practices',
-    },
-    {
-      name: 'YouTube 帮助：创建 YouTube Shorts',
-      url: 'https://support.google.com/youtube/answer/10343433',
-    },
-    {
-      name: 'Meta for Creators：视频安全区域和纵横比',
-      url: 'https://www.facebook.com/business/help/103816146375741',
-    },
-  ],
+    faq: faqData,
+      bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
@@ -122,7 +104,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: '此工具允许您加载媒体文件，并准确预览画面的哪些部分会被界面遮挡。这不仅仅关乎<strong>字幕</strong>；它还关乎确保视频中的脸部、产品或主要动作不会被嵌入“点赞”按钮或冗长的描述之下。',
+      html: '此工具允许您加载媒体文件，并准确预览画面的哪些部分会被界面遮挡。这不仅仅关乎<strong>字幕</strong>；它还关乎确保视频中的脸部、产品或主要动作不会被嵌入\"点赞\"按钮或冗长的描述之下。',
     },
     {
       type: 'grid',
@@ -130,7 +112,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
         {
           type: 'card',
           title: 'TikTok：最具侵入性的界面',
-          html: '<p>TikTok 的界面最为密集。在右侧，有一列图标占据了约 15% 的宽度。在底部，描述可以扩展到 4 或 5 行，从下方遮挡了近三分之一的屏幕。</p><ul><li><strong>底部边距：</strong>保留最后 250px 的自由空间，以避开描述文字和用户名。</li><li><strong>右侧边距：</strong>避免在距离右边缘 100px 范围内放置文字。</li><li><strong>顶部：</strong>“关注”和“推荐”按钮占据了顶部中央条案。</li></ul>',
+          html: '<p>TikTok 的界面最为密集。在右侧，有一列图标占据了约 15% 的宽度。在底部，描述可以扩展到 4 或 5 行，从下方遮挡了近三分之一的屏幕。</p><ul><li><strong>底部边距：</strong>保留最后 250px 的自由空间，以避开描述文字和用户名。</li><li><strong>右侧边距：</strong>避免在距离右边缘 100px 范围内放置文字。</li><li><strong>顶部：</strong>\"关注\"和\"推荐\"按钮占据了顶部中央条案。</li></ul>',
         },
         {
           type: 'card',
@@ -168,7 +150,7 @@ export const content: ToolLocaleContent<SafeZonesUI> = {
     },
     {
       type: 'paragraph',
-      html: '主要动作的“黄金区域”是视频的中央三分之一。如果您正在拍摄人物，请确保他们的眼睛和嘴巴在这个区域内。重要的图形元素应从几何中心略微向上移动，以避开底部的描述。',
+      html: '主要动作的\"黄金区域\"是视频的中央三分之一。如果您正在拍摄人物，请确保他们的眼睛和嘴巴在这个区域内。重要的图形元素应从几何中心略微向上移动，以避开底部的描述。',
     },
     {
       type: 'title',

package/src/tool/safeZones/seo.astro

@@ -11,4 +11,5 @@ const { locale = 'es' } = Astro.props;
 const content = await safeZones.i18n[locale]?.();
 if (!content) return null;
 ---
-<SEORenderer content={{ locale: locale as string, sections: content.seo }} />
+
+{content.seo?.length > 0 && <SEORenderer content={{ locale, sections: content.seo }} />}

package/src/tool/socialImageResizer/bibliography.astro

@@ -1,14 +1,6 @@
 ---
 import { Bibliography as SharedBibliography } from '@jjlmoya/utils-shared';
-import { socialImageResizer } from './index';
-import type { KnownLocale } from '../../types';
-
-interface Props {
-  locale?: KnownLocale;
-}
-
-const { locale = 'es' } = Astro.props;
-const content = await socialImageResizer.i18n[locale]?.();
+import { bibliography } from './bibliography';
 ---
 
-{content && <SharedBibliography links={content.bibliography} />}
+<SharedBibliography links={bibliography} />

package/src/tool/socialImageResizer/bibliography.ts

@@ -0,0 +1,12 @@
+import type { BibliographyEntry } from '../../types';
+
+export const bibliography: BibliographyEntry[] = [
+  {
+    name: 'MDN Web Docs: Canvas API',
+    url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
+  },
+  {
+    name: 'Sprout Social: Social Media Image Sizes Guide 2026',
+    url: 'https://sproutsocial.com/insights/social-media-image-sizes-guide/',
+  },
+];

package/src/tool/socialImageResizer/component.astro

@@ -73,7 +73,7 @@ const icons: Record<string, string> = {
         <h2>{t.uploadTitle}</h2>
         <p>{t.uploadSubtitle}</p>
       </div>
-      <input type="file" id="sri-file-input" accept="image/*" hidden />
+      <input type="file" id="sri-file-input" class="file-input" accept="image/*" hidden />
     </div>
 
     <div class="sri-editor-view" id="sri-editor-view">
@@ -84,7 +84,7 @@ const icons: Record<string, string> = {
       <div class="sri-editor-actions">
         <div class="sri-zoom-control">
           <span set:html={icons.zoomOut} />
-          <input type="range" id="sri-zoom-range" min="10" max="300" value="100" />
+          <input type="range" id="sri-zoom-range" min="10" max="300" value="100" aria-label="Zoom" />
           <span set:html={icons.zoomIn} />
         </div>
 

package/src/tool/socialImageResizer/i18n/de.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SocialImageResizerUI } from '../ui';
@@ -78,19 +79,8 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Häufig gestellte Fragen',
-  faq: faqData,
-  bibliographyTitle: 'Referenzen',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: Canvas API',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
-    },
-    {
-      name: 'Sprout Social: Social Media Image Sizes Guide 2026',
-      url: 'https://sproutsocial.com/insights/social-media-image-sizes-guide/',
-    },
-  ],
+    faq: faqData,
+      bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
@@ -101,7 +91,7 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
     },
     {
       type: 'paragraph',
-      html: 'Im heutigen digitalen Ökosystem ist der erste Eindruck visuell. Jedes soziale Netzwerk arbeitet mit spezifischen Algorithmen, die Inhalte bevorzugen, die nativ an ihre Proportionen angepasst sind. Unser Social Media Image Resizer ist nicht nur ein technisches Werkzeug – er ist Ihr Partner, um sicherzustellen, dass Ihre Botschaft ohne unerwünschte Zuschnitte oder Qualitätsverluste ankommt.',
+      html: 'Im heutigen digitalen Ökosystem ist der erste Eindruck visuell. Jedes soziale Netzwerk arbeitet mit spezifischen Algorithmen, die Inhalte bevorzugen, die nativ an ihre Proportionen angepasst sind. Unser Social Media Image Resizer ist nicht nur ein technisches Werkzeug - er ist Ihr Partner, um sicherzustellen, dass Ihre Botschaft ohne unerwünschte Zuschnitte oder Qualitätsverluste ankommt.',
     },
     {
       type: 'paragraph',
@@ -115,10 +105,10 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
     {
       type: 'grid',
       columns: [
-        { title: 'Instagram — Quadratischer Post', body: '1080 × 1080 px · Verhältnis 1:1' },
-        { title: 'Instagram — Vertikaler Post', body: '1080 × 1350 px · Verhältnis 4:5' },
-        { title: 'TikTok / Reels — Vertikal', body: '1080 × 1920 px · Verhältnis 9:16' },
-        { title: 'YouTube — Thumbnail', body: '1280 × 720 px · Verhältnis 16:9' },
+        { title: 'Instagram: Quadratischer Post', body: '1080 × 1080 px · Verhältnis 1:1' },
+        { title: 'Instagram: Vertikaler Post', body: '1080 × 1350 px · Verhältnis 4:5' },
+        { title: 'TikTok / Reels: Vertikal', body: '1080 × 1920 px · Verhältnis 9:16' },
+        { title: 'YouTube: Thumbnail', body: '1280 × 720 px · Verhältnis 16:9' },
         { title: 'YouTube Kanal Banner', body: '2560 × 1440 px · Verhältnis 16:9' },
         { title: 'X (Twitter) Standard Post', body: '1200 × 675 px · Verhältnis 16:9' },
         { title: 'LinkedIn Profil Header', body: '1584 × 396 px · Verhältnis 4:1' },

package/src/tool/socialImageResizer/i18n/en.ts

@@ -1,3 +1,4 @@
+import { bibliography } from '../bibliography';
 import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
 import type { ToolLocaleContent } from '../../../types';
 import type { SocialImageResizerUI } from '../ui';
@@ -78,19 +79,8 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
   slug,
   title,
   description,
-  faqTitle: 'Frequently Asked Questions',
-  faq: faqData,
-  bibliographyTitle: 'References',
-  bibliography: [
-    {
-      name: 'MDN Web Docs: Canvas API',
-      url: 'https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API',
-    },
-    {
-      name: 'Sprout Social: Social Media Image Sizes Guide 2026',
-      url: 'https://sproutsocial.com/insights/social-media-image-sizes-guide/',
-    },
-  ],
+    faq: faqData,
+      bibliography,
   howTo: howToData,
   schemas: [faqSchema, howToSchema, appSchema],
   seo: [
@@ -101,7 +91,7 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
     },
     {
       type: 'paragraph',
-      html: "In today's digital ecosystem, first impressions are visual. Each social network operates under specific algorithms that prioritize content natively adapted to its proportions. Our social media image resizer is not just a technical tool — it is your ally to ensure your message arrives without unwanted crops or quality loss.",
+      html: "In today's digital ecosystem, first impressions are visual. Each social network operates under specific algorithms that prioritize content natively adapted to its proportions. Our social media image resizer is not just a technical tool - it is your ally to ensure your message arrives without unwanted crops or quality loss.",
     },
     {
       type: 'paragraph',
@@ -115,13 +105,13 @@ export const content: ToolLocaleContent<SocialImageResizerUI> = {
     {
       type: 'grid',
       columns: [
-        { title: 'Instagram — Square Post', body: '1080 × 1080 px · Ratio 1:1' },
-        { title: 'Instagram — Vertical Post', body: '1080 × 1350 px · Ratio 4:5' },
-        { title: 'TikTok / Reels — Vertical', body: '1080 × 1920 px · Ratio 9:16' },
-        { title: 'YouTube — Thumbnail', body: '1280 × 720 px · Ratio 16:9' },
-        { title: 'YouTube — Channel Banner', body: '2560 × 1440 px · Ratio 16:9' },
-        { title: 'X (Twitter) — Standard Post', body: '1200 × 675 px · Ratio 16:9' },
-        { title: 'LinkedIn — Profile Cover', body: '1584 × 396 px · Ratio 4:1' },
+        { title: 'Instagram: Square Post', body: '1080 × 1080 px · Ratio 1:1' },
+        { title: 'Instagram: Vertical Post', body: '1080 × 1350 px · Ratio 4:5' },
+        { title: 'TikTok / Reels: Vertical', body: '1080 × 1920 px · Ratio 9:16' },
+        { title: 'YouTube: Thumbnail', body: '1280 × 720 px · Ratio 16:9' },
+        { title: 'YouTube: Channel Banner', body: '2560 × 1440 px · Ratio 16:9' },
+        { title: 'X (Twitter): Standard Post', body: '1200 × 675 px · Ratio 16:9' },
+        { title: 'LinkedIn: Profile Cover', body: '1584 × 396 px · Ratio 4:1' },
       ],
     },
     {