@jjlmoya/utils-social 1.1.0

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

@@ -0,0 +1,244 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { SafeZonesUI } from '../ui';
+
+const slug = 'simulateur-reseaux';
+const title = 'Safe Zones Réseaux Sociaux : Simulateur Vidéo TikTok, Reels et Shorts';
+const description =
+  'Prévisualisez vos images et vidéos avec la vraie interface des réseaux sociaux. Assurez-vous que votre contenu est toujours visible et évitez les recadrages accidentels.';
+
+const faqData = [
+  {
+    question: "Que sont les 'Safe Zones' sur les réseaux sociaux ?",
+    answer:
+      "Ce sont les zones de l'écran où le contenu est visible sans risque d'être recouvert par des éléments d'interface, tels que le nom d'utilisateur, la description, les boutons d'interaction ou le recadrage automatique.",
+  },
+  {
+    question: 'Pourquoi ma vidéo TikTok est-elle coupée en haut et en bas ?',
+    answer:
+      "TikTok utilise un format 9:16. Si votre vidéo est plus large, l'application fera un zoom pour remplir l'écran, provoquant des recadrages. De plus, l'interface inférieure couvre une partie de la vidéo, les éléments importants doivent donc être centrés.",
+  },
+  {
+    question: "La zone sécurisée est-elle la même pour Instagram Reels et YouTube Shorts ?",
+    answer:
+      "Elles sont très similaires mais pas identiques. Les boutons de YouTube Shorts sont positionnés différemment de ceux de Reels. Notre outil permet de basculer entre les plateformes pour vérifier votre design sur chacune d'elles.",
+  },
+  {
+    question: "Que se passe-t-il si je place du texte dans le coin inférieur droit ?",
+    answer:
+      "Il sera probablement invisible ou très difficile à lire, car c'est là que se trouvent les icônes de profil, cœur et commentaires. Il est idéal de garder les textes et visages dans la zone centrale-supérieure (Safe Zone).",
+  },
+];
+
+const howToData = [
+  {
+    name: 'Charger votre image ou vidéo',
+    text: "Téléchargez le fichier que vous souhaitez prévisualiser. Le traitement est local et privé — rien n'est envoyé sur internet.",
+  },
+  {
+    name: 'Sélectionner la plateforme',
+    text: "Choisissez entre TikTok, Instagram Reels ou YouTube Shorts pour activer l'overlay d'interface correspondant.",
+  },
+  {
+    name: 'Vérifier la lisibilité',
+    text: "Vérifiez si les textes, sous-titres ou éléments clés de votre marque sont couverts par les icônes du réseau social.",
+  },
+  {
+    name: 'Ajuster et exporter',
+    text: "Si quelque chose est caché, déplacez l'élément dans votre éditeur vidéo original et retestez jusqu'à ce que ce soit parfait.",
+  },
+];
+
+const faqSchema: WithContext<FAQPage> = {
+  '@context': 'https://schema.org',
+  '@type': 'FAQPage',
+  mainEntity: faqData.map((item) => ({
+    '@type': 'Question',
+    name: item.question,
+    acceptedAnswer: { '@type': 'Answer', text: item.answer },
+  })),
+};
+
+const howToSchema: WithContext<HowToThing> = {
+  '@context': 'https://schema.org',
+  '@type': 'HowTo',
+  name: title,
+  description,
+  step: howToData.map((step, i) => ({
+    '@type': 'HowToStep',
+    position: i + 1,
+    name: step.name,
+    text: step.text,
+  })),
+};
+
+const appSchema: WithContext<SoftwareApplication> = {
+  '@context': 'https://schema.org',
+  '@type': 'SoftwareApplication',
+  name: title,
+  description,
+  applicationCategory: 'UtilityApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'fr',
+};
+
+export const content: ToolLocaleContent<SafeZonesUI> = {
+  slug,
+  title,
+  description,
+  faqTitle: 'Questions Fréquentes',
+  faq: faqData,
+  bibliographyTitle: 'Documentation Officielle des Plateformes',
+  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: Best practices for Reels',
+      url: 'https://business.instagram.com/creators/reels-best-practices',
+    },
+    {
+      name: 'YouTube Help: Create YouTube Shorts',
+      url: 'https://support.google.com/youtube/answer/10343433',
+    },
+    {
+      name: 'Meta for Creators: Safe zones and aspect ratios for video',
+      url: 'https://www.facebook.com/business/help/103816146375741',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Guide Maître des Zones Sécurisées : Optimisez vos Reels, TikToks et Shorts',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "Dans le monde saturé du contenu vertical, la première impression est technique. La plus grande erreur des créateurs est d'ignorer comment leur <strong>vidéo ou image</strong> interagit avec l'interface native de la plateforme. Chaque réseau social (TikTok, Instagram Reels et YouTube Shorts) superpose des couches de boutons, de textes et de profils qui peuvent annuler l'impact visuel de votre composition.",
+    },
+    {
+      type: 'paragraph',
+      html: "Cet outil vous permet de charger vos fichiers multimédias et de prévisualiser exactement quelles parties de votre cadrage seront absorbées par l'interface. Il ne s'agit pas seulement des <strong>sous-titres</strong> ; il s'agit de s'assurer que les visages, les produits ou les actions principales de votre vidéo ne se retrouvent pas enfouis sous un bouton \"J'aime\" ou une description interminable.",
+    },
+    {
+      type: 'grid',
+      columns: [
+        {
+          type: 'card',
+          title: "TikTok : L'interface la plus invasive",
+          html: "<p>TikTok possède l'interface la plus dense. Sur la droite, une colonne d'icônes occupe environ 15% de la largeur. En bas, la description peut s'étendre sur 4 ou 5 lignes si elle est longue, couvrant presque un tiers de l'écran depuis le bas.</p><ul><li><strong>Marge inférieure :</strong> Laissez libres les 250 derniers pixels pour éviter le texte de la description et le nom d'utilisateur.</li><li><strong>Marge droite :</strong> Évitez de placer du texte à moins de 100px du bord droit.</li><li><strong>Haut :</strong> Les boutons « Abonnements » et « Pour toi » occupent la bande supérieure centrale.</li></ul>",
+        },
+        {
+          type: 'card',
+          title: 'IG Reels : Le facteur du fil',
+          html: "<p>Contrairement à TikTok, Instagram Reels recadre la vidéo au format 4:5 lorsqu'elle est visualisée depuis le fil principal (pas depuis l'onglet Reels). Cela signifie que si vous placez des informations vitales dans les 15% supérieurs ou inférieurs de votre vidéo 9:16, elles disparaîtront dans le fil.</p><ul><li><strong>La règle du 4:5 :</strong> Gardez les titres et éléments clés dans la zone centrale pour assurer la visibilité dans le fil.</li><li><strong>Interface :</strong> Les icônes de Reels sont plus subtiles que celles de TikTok, permettant un peu plus de marge latérale.</li><li><strong>Bouton audio :</strong> Situé en bas à droite, il couvre généralement bien moins que le disque tournant de TikTok.</li></ul>",
+        },
+      ],
+    },
+    {
+      type: 'title',
+      text: 'YouTube Shorts : Attention à la droite',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "YouTube Shorts a une interface asymétrique. Le bouton d'abonnement est très proéminent et de couleur unie (généralement noir ou blanc), ce qui crée un point aveugle visuel important en bas à droite.",
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Marge droite :</strong> Évitez de placer du texte ou des éléments importants dans les 20% inférieurs droits.',
+        "<strong>Marge inférieure :</strong> Laissez libres les 150 derniers pixels pour éviter le texte de la description et le nom d'utilisateur.",
+        "<strong>Haut :</strong> Les boutons « S'abonner » et « Plus » occupent la bande supérieure centrale.",
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Questions Critiques sur le Design Vertical',
+      level: 2,
+    },
+    {
+      type: 'title',
+      text: 'Où placer les éléments clés (visages, texte, produit) ?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'La « Zone d\'Or » pour l\'action principale est le tiers central de la vidéo. Si vous filmez une personne, assurez-vous que ses yeux et sa bouche se trouvent dans cette zone. Les éléments graphiques importants doivent être légèrement décalés vers le haut par rapport au centre géométrique pour éviter la description inférieure.',
+    },
+    {
+      type: 'title',
+      text: 'Pourquoi ma vidéo est-elle floue une fois uploadée ?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: "Ce n'est souvent pas la qualité, mais le redimensionnement. Filmez toujours en 1080x1920 à 30 ou 60 fps. Évitez le 4K si vous appliquez de nombreux effets lourds, car les plateformes compressent agressivement les fichiers volumineux.",
+    },
+    {
+      type: 'title',
+      text: 'Que se passe-t-il avec les bords des téléphones ?',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Rappelez-vous que les téléphones modernes ont des « encoches » ou des trous de caméra à l\'écran. Cet outil inclut une marge de sécurité supérieure pour que votre contenu n\'entre pas en conflit avec l\'horloge ou les icônes système (batterie, signal).',
+    },
+    {
+      type: 'title',
+      text: "Anatomie d'une Vidéo Virale",
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: "Concevoir pour les réseaux sociaux n'est pas seulement esthétique — c'est de l'<strong>utilisabilité</strong>. Si un utilisateur doit faire un effort pour lire un texte parce que les icônes de la plateforme le couvrent, il passera simplement à la vidéo suivante. La rétention (Watch Time) chute brutalement en cas de friction visuelle.",
+    },
+    {
+      type: 'paragraph',
+      html: "Sur YouTube Shorts, par exemple, l'interface est asymétrique. Le bouton d'abonnement est très proéminent et de couleur unie (généralement noir ou blanc), ce qui crée un point aveugle visuel important. En utilisant ce simulateur, vous pouvez ajuster l'opacité pour comprendre comment votre palette de couleurs interagit avec les couleurs de l'UI native.",
+    },
+    {
+      type: 'tip',
+      title: 'Outil de Contrôle Qualité Créatif',
+      html: '<p>Conçu pour les créateurs qui ne laissent rien au hasard.</p>',
+    },
+  ],
+  ui: {
+    labelConfig: 'Configuration',
+    labelPlatform: 'Plateforme cible',
+    labelUpload: 'Charger le contenu',
+    uploadPrompt: 'Sélectionner une image ou vidéo',
+    uploadLink: 'Ou utiliser un exemple',
+    loadContent: 'Chargez votre contenu',
+    labelOpacity: "Relief d'interface",
+    labelMask: 'Griser les zones critiques',
+    labelGrid: 'Règle des tiers',
+    btnReset: 'Réinitialiser le canvas',
+    bannerTiktok: 'Simulation TikTok 9:16',
+    bannerReels: 'Simulation Instagram Reels 9:16',
+    bannerShorts: 'Simulation YouTube Shorts 9:16',
+    nameTiktok: 'TikTok',
+    nameReels: 'IG Reels',
+    nameShorts: 'YT Shorts',
+    ttFollowing: 'Abonnements',
+    ttForYou: 'Pour toi',
+    ttDescription: 'Design d\'interfaces réelles pour créateurs de contenu. #uxdesign #socialmedia',
+    ttAudio: 'jjlmoya - Son Original',
+    ttNavHome: 'Accueil',
+    ttNavFriends: 'Amis',
+    ttNavInbox: 'Boîte',
+    ttNavProfile: 'Profil',
+    reelsFollow: 'Suivre',
+    reelsDescription: 'Cette interface est identique à la vraie. #reels #ux #simulateur',
+    reelsAudio: 'Musique Tendance - Audio Original',
+    shortsSubscribe: "S'ABONNER",
+    shortsDislike: 'Je n\'aime pas',
+    shortsShare: 'Partager',
+    shortsRemix: 'Remix',
+    shortsDescription: 'Simulation d\'interfaces réelles pour Shorts ! #youtube #shorts',
+  },
+};

package/src/tool/safeZones/index.ts

@@ -0,0 +1,34 @@
+import type { SocialToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import SafeZonesComponent from './component.astro';
+import SafeZonesSEO from './seo.astro';
+import SafeZonesBibliography from './bibliography.astro';
+
+import type { SafeZonesUI } from './ui';
+
+export type SafeZonesLocaleContent = ToolLocaleContent<SafeZonesUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const safeZones: SocialToolEntry<SafeZonesUI> = {
+  id: 'safe-zones',
+  icons: {
+    bg: 'mdi:cellphone',
+    fg: 'mdi:crop-free',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { SafeZonesComponent, SafeZonesSEO, SafeZonesBibliography };
+
+export const SAFE_ZONES_TOOL: ToolDefinition = {
+  entry: safeZones,
+  Component: SafeZonesComponent,
+  SEOComponent: SafeZonesSEO,
+  BibliographyComponent: SafeZonesBibliography,
+};

package/src/tool/safeZones/logic.ts

@@ -0,0 +1,137 @@
+export interface PlatformStrings {
+  ttFollowing: string;
+  ttForYou: string;
+  ttDescription: string;
+  ttAudio: string;
+  ttNavHome: string;
+  ttNavFriends: string;
+  ttNavInbox: string;
+  ttNavProfile: string;
+  reelsFollow: string;
+  reelsDescription: string;
+  reelsAudio: string;
+  shortsSubscribe: string;
+  shortsDislike: string;
+  shortsShare: string;
+  shortsRemix: string;
+  shortsDescription: string;
+}
+
+const COL = 'display:flex;flex-direction:column;align-items:center;gap:2px';
+const STAT = (icon: string, val: string) =>
+  `<div style="${COL}"><iconify-icon icon="${icon}" style="font-size:36px;color:white"></iconify-icon><span style="font-size:10px;color:white;font-weight:bold;text-shadow:0 1px 3px rgba(0,0,0,.8)">${val}</span></div>`;
+
+function buildTikTokNav(s: PlatformStrings): string {
+  return `<div style="position:absolute;top:40px;left:0;width:100%;display:flex;justify-content:space-between;padding:0 24px;box-sizing:border-box;align-items:center">
+    <iconify-icon icon="mdi:live-tv" style="font-size:24px;color:white"></iconify-icon>
+    <div style="display:flex;gap:16px;font-size:10px;font-weight:bold;text-transform:uppercase;letter-spacing:.1em">
+      <span style="color:rgba(255,255,255,.5)">${s.ttFollowing}</span>
+      <span style="color:white;border-bottom:2px solid white;padding-bottom:4px">${s.ttForYou}</span>
+    </div>
+    <iconify-icon icon="mdi:magnify" style="font-size:24px;color:white"></iconify-icon>
+  </div>`;
+}
+
+function buildTikTokActions(): string {
+  return `<div style="position:absolute;right:12px;bottom:96px;display:flex;flex-direction:column;gap:20px;align-items:center">
+    <div style="width:44px;height:44px;border-radius:50%;border:2px solid white;background:#27272a;position:relative">
+      <div style="position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);background:#e11d48;border-radius:50%;width:16px;height:16px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:bold;color:white">+</div>
+    </div>
+    ${STAT('ph:heart-fill', '1.2M')}${STAT('ph:chat-circle-dots-fill', '4,890')}${STAT('ph:bookmark-simple-fill', '250K')}${STAT('ph:share-fat-fill', '45.2K')}
+    <div style="width:40px;height:40px;border-radius:50%;background:#18181b;border:8px solid #3f3f46;margin-top:8px;animation:szl-spin 3s linear infinite"></div>
+  </div>`;
+}
+
+function buildTikTokInfo(s: PlatformStrings): string {
+  return `<div style="position:absolute;left:16px;bottom:60px;right:64px">
+    <div style="font-weight:bold;color:white;font-size:15px;display:flex;align-items:center;gap:6px;margin-bottom:6px">
+      jjlmoya <iconify-icon icon="mdi:check-decagram" style="color:#60a5fa;font-size:12px"></iconify-icon>
+    </div>
+    <div style="color:rgba(255,255,255,.95);font-size:13px;line-height:1.4;margin-bottom:8px;padding-right:16px">${s.ttDescription}</div>
+    <div style="display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);font-size:11px;padding:4px 12px;background:rgba(0,0,0,.3);border-radius:999px;width:fit-content;border:1px solid rgba(255,255,255,.1)">
+      <iconify-icon icon="mdi:music"></iconify-icon><span>${s.ttAudio}</span>
+    </div>
+  </div>`;
+}
+
+function buildTikTokUI(s: PlatformStrings): string {
+  return buildTikTokNav(s) + buildTikTokActions() + buildTikTokInfo(s);
+}
+
+function buildReelsActions(): string {
+  return `<div style="position:absolute;top:44px;left:24px;color:white;font-size:24px;font-weight:bold;display:flex;align-items:center;gap:4px">Reels <iconify-icon icon="mdi:chevron-down"></iconify-icon></div>
+  <div style="position:absolute;top:44px;right:24px;color:white;font-size:24px"><iconify-icon icon="mdi:camera-outline"></iconify-icon></div>
+  <div style="position:absolute;right:16px;bottom:56px;display:flex;flex-direction:column;gap:24px;align-items:center">
+    <div style="${COL}"><iconify-icon icon="ph:heart" style="font-size:30px;color:white"></iconify-icon><span style="font-size:10px;color:white;font-weight:500">102K</span></div>
+    <div style="${COL}"><iconify-icon icon="ph:chat-circle" style="font-size:30px;color:white"></iconify-icon><span style="font-size:10px;color:white;font-weight:500">1,245</span></div>
+    <div style="${COL}"><iconify-icon icon="ph:paper-plane-tilt" style="font-size:30px;color:white"></iconify-icon></div>
+    <iconify-icon icon="ph:dots-three-vertical-bold" style="font-size:24px;color:white"></iconify-icon>
+    <div style="width:28px;height:28px;border-radius:4px;border:2px solid white;overflow:hidden;background:#1e293b"></div>
+  </div>`;
+}
+
+function buildReelsInfo(s: PlatformStrings): string {
+  return `<div style="position:absolute;left:16px;bottom:24px;right:64px">
+    <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
+      <div style="width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#f59e0b,#e11d48,#a855f7);padding:2px">
+        <div style="width:100%;height:100%;border-radius:50%;background:black"></div>
+      </div>
+      <span style="font-weight:bold;color:white;font-size:13px;letter-spacing:-.5px">jjlmoya</span>
+      <button style="padding:4px 12px;border:2px solid rgba(255,255,255,.5);border-radius:8px;font-size:11px;font-weight:bold;color:white;background:rgba(255,255,255,.05);cursor:pointer">${s.reelsFollow}</button>
+    </div>
+    <div style="color:white;font-size:13px;line-height:1.4;margin-bottom:8px">${s.reelsDescription}</div>
+    <div style="display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.9);font-size:10px;font-weight:500;max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap">
+      <iconify-icon icon="mdi:music-note"></iconify-icon><span>${s.reelsAudio}</span>
+    </div>
+  </div>`;
+}
+
+function buildReelsUI(s: PlatformStrings): string {
+  return buildReelsActions() + buildReelsInfo(s);
+}
+
+function buildShortsActions(s: PlatformStrings): string {
+  const iconBtn = (icon: string, label: string) =>
+    `<div style="${COL}"><div style="padding:12px;background:rgba(255,255,255,.1);border-radius:50%"><iconify-icon icon="${icon}" style="font-size:28px;color:white"></iconify-icon></div><span style="font-size:10px;color:white;font-weight:bold;margin-top:4px;text-shadow:0 1px 3px rgba(0,0,0,.8)">${label}</span></div>`;
+  return `<div style="position:absolute;top:40px;left:0;width:100%;display:flex;align-items:center;justify-content:space-between;padding:0 16px;box-sizing:border-box">
+    <iconify-icon icon="mdi:arrow-left" style="font-size:30px;color:white"></iconify-icon>
+    <div style="display:flex;gap:24px;align-items:center">
+      <iconify-icon icon="mdi:magnify" style="font-size:30px;color:white"></iconify-icon>
+      <iconify-icon icon="mdi:dots-vertical" style="font-size:30px;color:white"></iconify-icon>
+    </div>
+  </div>
+  <div style="position:absolute;right:8px;bottom:80px;display:flex;flex-direction:column;gap:24px;align-items:center">
+    ${iconBtn('ph:thumbs-up-fill', '1.2M')}${iconBtn('ph:thumbs-down-fill', s.shortsDislike)}
+    ${iconBtn('ph:chat-text-fill', '34K')}${iconBtn('ph:share-fat-fill', s.shortsShare)}${iconBtn('ph:arrows-clockwise-bold', s.shortsRemix)}
+    <div style="width:44px;height:44px;border-radius:12px;background:#1e293b;border:2px solid rgba(255,255,255,.1)"></div>
+  </div>`;
+}
+
+function buildShortsInfo(s: PlatformStrings): string {
+  return `<div style="position:absolute;left:16px;bottom:32px;right:80px">
+    <div style="display:flex;align-items:center;gap:12px;margin-bottom:16px">
+      <div style="width:40px;height:40px;border-radius:50%;background:#dc2626;border:1px solid rgba(255,255,255,.2)"></div>
+      <span style="color:white;font-weight:900;font-size:14px;text-shadow:0 1px 8px rgba(0,0,0,.8)">@jjlmoya</span>
+      <button style="background:white;color:black;padding:6px 16px;border-radius:999px;font-size:12px;font-weight:900;cursor:pointer">${s.shortsSubscribe}</button>
+    </div>
+    <div style="color:white;font-size:15px;font-weight:bold;line-height:1.4;text-shadow:0 1px 8px rgba(0,0,0,.8);margin-bottom:8px">${s.shortsDescription}</div>
+    <div style="display:flex;align-items:center;gap:8px">
+      <div style="background:rgba(255,255,255,.1);padding:4px 12px;border-radius:4px;display:flex;align-items:center;gap:8px;backdrop-filter:blur(4px)">
+        <iconify-icon icon="mdi:flash" style="color:white"></iconify-icon>
+        <span style="color:white;font-size:11px;font-weight:bold">SHORT</span>
+      </div>
+    </div>
+  </div>`;
+}
+
+function buildShortsUI(s: PlatformStrings): string {
+  return buildShortsActions(s) + buildShortsInfo(s);
+}
+
+export function buildPlatformUIs(s: PlatformStrings): Record<string, string> {
+  return {
+    tiktok: buildTikTokUI(s),
+    reels: buildReelsUI(s),
+    shorts: buildShortsUI(s),
+  };
+}

package/src/tool/safeZones/seo.astro

@@ -0,0 +1,14 @@
+---
+import { SEORenderer } from '@jjlmoya/utils-shared';
+import { safeZones } from './index';
+import type { KnownLocale } from '../../types';
+
+interface Props {
+  locale?: KnownLocale;
+}
+
+const { locale = 'es' } = Astro.props;
+const content = await safeZones.i18n[locale]?.();
+if (!content) return null;
+---
+<SEORenderer content={{ locale: locale as string, sections: content.seo }} />

package/src/tool/safeZones/ui.ts

@@ -0,0 +1,34 @@
+export interface SafeZonesUI extends Record<string, string> {
+  labelConfig: string;
+  labelPlatform: string;
+  labelUpload: string;
+  uploadPrompt: string;
+  uploadLink: string;
+  loadContent: string;
+  labelOpacity: string;
+  labelMask: string;
+  labelGrid: string;
+  btnReset: string;
+  bannerTiktok: string;
+  bannerReels: string;
+  bannerShorts: string;
+  nameTiktok: string;
+  nameReels: string;
+  nameShorts: string;
+  ttFollowing: string;
+  ttForYou: string;
+  ttDescription: string;
+  ttAudio: string;
+  ttNavHome: string;
+  ttNavFriends: string;
+  ttNavInbox: string;
+  ttNavProfile: string;
+  reelsFollow: string;
+  reelsDescription: string;
+  reelsAudio: string;
+  shortsSubscribe: string;
+  shortsDislike: string;
+  shortsShare: string;
+  shortsRemix: string;
+  shortsDescription: string;
+}

package/src/tool/socialImageResizer/bibliography.astro

@@ -0,0 +1,14 @@
+---
+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]?.();
+---
+
+{content && <SharedBibliography links={content.bibliography} />}