@jjlmoya/utils-developer 1.2.0

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

@@ -0,0 +1,116 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { UrlCleanerUI } from '../ui';
+
+const slug = 'nettoyeur-suivi-url';
+const title = 'Nettoyeur de Suivi d\'URL: Supprimer UTM, FBCLID et GCLID';
+const description = 'Supprimez automatiquement les paramètres de suivi et de publicité de vos URLs. Partagez des liens propres et protégez votre vie privée numérique instantanément.';
+
+const faqData = [
+  {
+    question: 'Quels types de paramètres de suivi cet outil supprime-t-il?',
+    answer: 'Notre outil détecte et supprime automatiquement les paramètres de suivi les plus courants, notamment UTM (utm_source, utm_medium, etc.), les identifiants de clics publicitaires (fbclid, gclid, msclkid) et les identifiants de campagne de marketing par email (mc_cid, _hsenc).',
+  },
+  {
+    question: 'Cela affecte-t-il la fonctionnalité du site Web?',
+    answer: 'Généralement non. Ces paramètres sont utilisés presque exclusivement pour l\'analyse et le marketing. Lorsque vous les supprimez, la page se charge normalement, mais le propriétaire du site ne pourra pas suivre la source exacte de votre clic.',
+  },
+  {
+    question: 'Est-il sûr de traiter mes liens ici?',
+    answer: 'Absolument. Comme tous nos outils, le processus est 100% côté client. Vos liens ne sont jamais envoyés à nos serveurs; tout se passe en privé dans votre propre navigateur.',
+  },
+  {
+    question: 'Pourquoi mes liens Facebook sont-ils si longs?',
+    answer: 'Facebook ajoute un paramètre appelé "fbclid" à tous les liens qui quittent sa plate-forme. Cela leur permet de suivre votre activité sur d\'autres sites Web même si vous avez bloqué la publicité tierce.',
+  },
+];
+
+const howToData = [
+  { name: 'Collez votre URL', text: 'Entrez l\'URL complète contenant des paramètres de suivi' },
+  { name: 'Cliquez sur Nettoyer', text: 'L\'outil analysera automatiquement l\'URL' },
+  { name: 'Examinez les résultats', text: 'Vous verrez l\'URL propre et une liste des paramètres supprimés' },
+  { name: 'Copiez et partagez', text: 'Utilisez l\'URL propre dans vos e-mails, réseaux sociaux ou messages' },
+];
+
+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((s, i) => ({ '@type': 'HowToStep', position: i + 1, name: s.name, text: s.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',
+};
+
+const ui: UrlCleanerUI = {
+  labelInput: 'Collez l\'URL avec les paramètres de suivi',
+  btnClean: 'Nettoyer',
+  labelCleaned: 'URL Propre',
+  labelRemoved: 'Traceurs Supprimés',
+  countLabel: 'Paramètres supprimés',
+  reductionLabel: 'Réduction de longueur',
+  noneDetected: 'Aucun paramètre de suivi courant détecté.',
+  errorInvalid: 'Veuillez entrer une URL valide.',
+  btnCopy: 'Copier',
+  btnCopied: 'Copié',
+};
+
+export const content: ToolLocaleContent<UrlCleanerUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Questions Fréquemment Posées',
+  faq: faqData,
+  bibliographyTitle: 'Ressources sur la Confidentialité et le Suivi Web',
+  bibliography: [
+    { name: 'Electronic Frontier Foundation (EFF): Guide sur le Suivi en Ligne', url: 'https://www.eff.org/issues/online-behavioral-tracking' },
+    { name: 'Google Analytics: Documentation des Paramètres UTM', url: 'https://support.google.com/analytics/answer/1033863' },
+    { name: 'Confidentialité sur le Web: L\'impact des Click IDs', url: 'https://www.w3.org/community/web-advertising/wiki/Click_Identifiers' },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    { type: 'title', text: 'Nettoyeur de Suivi d\'URL: Supprimer UTM, FBCLID et GCLID', level: 2 },
+    {
+      type: 'paragraph',
+      html: 'Supprimez les traceurs invisibles de vos liens pour les partager de manière propre, privée et professionnelle. Découvrez ce que signifient ces étranges codes dans vos URLs.',
+    },
+    { type: 'title', text: 'Qu\'est-ce qu\'un nettoyeur de suivi d\'URL et pourquoi l\'avez-vous besoin?', level: 3 },
+    {
+      type: 'paragraph',
+      html: 'Avez-vous déjà copié un lien pour l\'envoyer à un ami et réalisé qu\'il était trois fois plus long qu\'il ne devrait l\'être? Ce "bruit" supplémentaire provient des paramètres de suivi. Un <strong>nettoyeur de suivi</strong> est un outil conçu pour "dénuder" l\'URL de toutes les informations publicitaires et de suivi que les grandes plates-formes injectent dans chaque clic que vous effectuez.',
+    },
+    { type: 'title', text: 'Paramètres de suivi les plus courants', level: 3 },
+    {
+      type: 'list',
+      items: [
+        '<strong>UTM (Google Analytics):</strong> utm_source, utm_medium, utm_campaign pour suivre les campagnes',
+        '<strong>FBCLID:</strong> Identifiant de clic Facebook pour contourner les restrictions de cookies',
+        '<strong>GCLID / DCLID:</strong> Google Click ID pour lier les visites aux campagnes Google Ads',
+        '<strong>MSCLKID:</strong> Identifiant de clic Microsoft Advertising et Bing',
+        '<strong>HubSpot & Mailchimp:</strong> Paramètres d\'automatisation marketing comme _hsenc, mc_cid',
+        '<strong>LinkedIn & Autres:</strong> li_fat_id et autres traceurs de réseaux sociaux',
+      ],
+    },
+  ],
+};

package/src/tool/urlCleaner/index.ts

@@ -0,0 +1,33 @@
+import type { DeveloperToolEntry, ToolLocaleContent, ToolDefinition } from '../../types';
+import UrlCleanerComponent from './component.astro';
+import UrlCleanerSEO from './seo.astro';
+import UrlCleanerBibliography from './bibliography.astro';
+import type { UrlCleanerUI } from './ui';
+
+export type UrlCleanerLocaleContent = ToolLocaleContent<UrlCleanerUI>;
+
+import { content as es } from './i18n/es';
+import { content as en } from './i18n/en';
+import { content as fr } from './i18n/fr';
+
+export const urlCleaner: DeveloperToolEntry<UrlCleanerUI> = {
+  id: 'url-cleaner',
+  icons: {
+    bg: 'mdi:link-variant-off',
+    fg: 'mdi:broom',
+  },
+  i18n: {
+    es: async () => es,
+    en: async () => en,
+    fr: async () => fr,
+  },
+};
+
+export { UrlCleanerComponent, UrlCleanerSEO, UrlCleanerBibliography };
+
+export const URL_CLEANER_TOOL: ToolDefinition = {
+  entry: urlCleaner,
+  Component: UrlCleanerComponent,
+  SEOComponent: UrlCleanerSEO,
+  BibliographyComponent: UrlCleanerBibliography,
+};

package/src/tool/urlCleaner/seo.astro

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

package/src/tool/urlCleaner/ui.ts

@@ -0,0 +1,12 @@
+export interface UrlCleanerUI extends Record<string, string> {
+  labelInput: string;
+  btnClean: string;
+  labelCleaned: string;
+  labelRemoved: string;
+  countLabel: string;
+  reductionLabel: string;
+  noneDetected: string;
+  errorInvalid: string;
+  btnCopy: string;
+  btnCopied: string;
+}

package/src/tool/urlEncoderDecoder/bibliography.astro

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

package/src/tool/urlEncoderDecoder/component.astro

@@ -0,0 +1,291 @@
+---
+import type { KnownLocale } from '../../types';
+import type { UrlEncoderDecoderUI } from './ui';
+
+interface Props {
+  locale?: KnownLocale;
+  ui?: Record<string, unknown>;
+}
+
+const { ui } = Astro.props;
+const t = (ui ?? {}) as UrlEncoderDecoderUI;
+---
+
+<div
+  class="urlc-root"
+  data-btn-copy={t.btnCopy}
+  data-btn-copied={t.btnCopied}
+>
+  <div class="urlc-card">
+    <div class="urlc-field">
+      <div class="urlc-field-header">
+        <span class="urlc-field-label">{t.labelRaw}</span>
+        <div class="urlc-toolbar">
+          <button id="urlc-clear-raw" class="urlc-toolbar-btn">{t.btnClear}</button>
+          <button id="urlc-copy-raw" class="urlc-toolbar-btn">{t.btnCopy}</button>
+        </div>
+      </div>
+      <textarea
+        id="urlc-input-raw"
+        class="urlc-textarea"
+        placeholder={t.placeholderRaw}
+        spellcheck="false"
+      ></textarea>
+    </div>
+
+    <div class="urlc-actions">
+      <button id="urlc-encode-btn" class="urlc-btn urlc-btn-encode">
+        <svg class="urlc-btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path>
+        </svg>
+        {t.btnEncode}
+      </button>
+      <button id="urlc-decode-btn" class="urlc-btn urlc-btn-decode">
+        <svg class="urlc-btn-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 15l7-7 7 7"></path>
+        </svg>
+        {t.btnDecode}
+      </button>
+    </div>
+
+    <div class="urlc-field">
+      <div class="urlc-field-header">
+        <span class="urlc-field-label">{t.labelEncoded}</span>
+        <div class="urlc-toolbar">
+          <button id="urlc-clear-enc" class="urlc-toolbar-btn">{t.btnClear}</button>
+          <button id="urlc-copy-enc" class="urlc-toolbar-btn">{t.btnCopy}</button>
+        </div>
+      </div>
+      <textarea
+        id="urlc-input-encoded"
+        class="urlc-textarea urlc-textarea-encoded"
+        placeholder={t.placeholderEncoded}
+        spellcheck="false"
+      ></textarea>
+    </div>
+  </div>
+</div>
+
+<style>
+  .urlc-root {
+    --urlc-primary: #f59e0b;
+    --urlc-primary-dark: #d97706;
+    --urlc-secondary: #3b82f6;
+    --urlc-secondary-dark: #2563eb;
+    --urlc-card-bg: #fff;
+    --urlc-bg: #f8fafc;
+    --urlc-text: #0f172a;
+    --urlc-text-muted: #64748b;
+    --urlc-border: #e2e8f0;
+    --urlc-encoded-bg: rgba(245, 158, 11, 0.03);
+
+    max-width: 1000px;
+    margin: 2rem auto;
+    color: var(--urlc-text);
+  }
+
+  :global(.theme-dark) .urlc-root {
+    --urlc-card-bg: #1e293b;
+    --urlc-bg: #0f172a;
+    --urlc-text: #f1f5f9;
+    --urlc-text-muted: #94a3b8;
+    --urlc-border: #334155;
+    --urlc-encoded-bg: rgba(245, 158, 11, 0.06);
+  }
+
+  .urlc-card {
+    background: var(--urlc-card-bg);
+    border: 1px solid var(--urlc-border);
+    border-radius: 1.25rem;
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
+    padding: 1.75rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.25rem;
+  }
+
+  .urlc-field {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .urlc-field-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .urlc-field-label {
+    font-size: 0.8rem;
+    font-weight: 700;
+    color: var(--urlc-text-muted);
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+  }
+
+  .urlc-toolbar {
+    display: flex;
+    gap: 0.375rem;
+  }
+
+  .urlc-toolbar-btn {
+    background: transparent;
+    border: 1px solid var(--urlc-border);
+    color: var(--urlc-text-muted);
+    padding: 0.2rem 0.6rem;
+    border-radius: 0.4rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 0.15s;
+  }
+
+  .urlc-toolbar-btn:hover {
+    background: var(--urlc-bg);
+    color: var(--urlc-text);
+    border-color: var(--urlc-text-muted);
+  }
+
+  .urlc-textarea {
+    width: 100%;
+    height: 160px;
+    padding: 1rem 1.25rem;
+    font-size: 0.9rem;
+    color: var(--urlc-text);
+    background: var(--urlc-bg);
+    border: 1px solid var(--urlc-border);
+    border-radius: 0.875rem;
+    resize: vertical;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    line-height: 1.6;
+    outline: none;
+  }
+
+  .urlc-textarea:focus {
+    border-color: var(--urlc-secondary);
+    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.12);
+  }
+
+  .urlc-textarea-encoded {
+    border-color: var(--urlc-primary);
+    background: var(--urlc-encoded-bg);
+  }
+
+  .urlc-textarea-encoded:focus {
+    border-color: var(--urlc-primary);
+    box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.12);
+  }
+
+  .urlc-actions {
+    display: flex;
+    justify-content: center;
+    gap: 0.875rem;
+  }
+
+  @media (max-width: 480px) {
+    .urlc-actions {
+      flex-direction: column;
+    }
+  }
+
+  .urlc-btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 0.5rem;
+    font-weight: 700;
+    font-size: 0.95rem;
+    padding: 0.75rem 1.75rem;
+    border-radius: 0.75rem;
+    border: none;
+    cursor: pointer;
+    transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
+  }
+
+  .urlc-btn:hover {
+    transform: translateY(-2px);
+  }
+
+  .urlc-btn-encode {
+    background: var(--urlc-primary);
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3);
+  }
+
+  .urlc-btn-encode:hover {
+    background: var(--urlc-primary-dark);
+    box-shadow: 0 6px 16px rgba(245, 158, 11, 0.4);
+  }
+
+  .urlc-btn-decode {
+    background: var(--urlc-secondary);
+    color: #fff;
+    box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
+  }
+
+  .urlc-btn-decode:hover {
+    background: var(--urlc-secondary-dark);
+    box-shadow: 0 6px 16px rgba(59, 130, 246, 0.4);
+  }
+
+  .urlc-btn-icon {
+    width: 18px;
+    height: 18px;
+  }
+</style>
+
+<script>
+  const root = document.querySelector('.urlc-root') as HTMLElement | null;
+  const inputRaw = document.getElementById('urlc-input-raw') as HTMLTextAreaElement;
+  const inputEnc = document.getElementById('urlc-input-encoded') as HTMLTextAreaElement;
+  const btnEncode = document.getElementById('urlc-encode-btn');
+  const btnDecode = document.getElementById('urlc-decode-btn');
+  const copyRaw = document.getElementById('urlc-copy-raw');
+  const copyEnc = document.getElementById('urlc-copy-enc');
+  const clearRaw = document.getElementById('urlc-clear-raw');
+  const clearEnc = document.getElementById('urlc-clear-enc');
+
+  const txtCopy = root?.dataset.btnCopy ?? 'Copy';
+  const txtCopied = root?.dataset.btnCopied ?? 'Copied!';
+
+  const encode = () => {
+    if (!inputRaw.value) return;
+    try {
+      inputEnc.value = encodeURIComponent(inputRaw.value);
+    } catch {
+      inputEnc.value = '';
+    }
+  };
+
+  const decode = () => {
+    if (!inputEnc.value) return;
+    try {
+      inputRaw.value = decodeURIComponent(inputEnc.value);
+    } catch {
+      inputRaw.value = '';
+    }
+  };
+
+  const setupCopy = (btn: HTMLElement | null, input: HTMLTextAreaElement) => {
+    if (!btn) return;
+    btn.addEventListener('click', async () => {
+      if (!input.value) return;
+      await navigator.clipboard.writeText(input.value);
+      btn.textContent = txtCopied;
+      setTimeout(() => { btn.textContent = txtCopy; }, 1500);
+    });
+  };
+
+  const setupClear = (btn: HTMLElement | null, input: HTMLTextAreaElement) => {
+    if (!btn) return;
+    btn.addEventListener('click', () => { input.value = ''; input.focus(); });
+  };
+
+  btnEncode?.addEventListener('click', encode);
+  btnDecode?.addEventListener('click', decode);
+  setupCopy(copyRaw, inputRaw);
+  setupCopy(copyEnc, inputEnc);
+  setupClear(clearRaw, inputRaw);
+  setupClear(clearEnc, inputEnc);
+</script>

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

@@ -0,0 +1,162 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { UrlEncoderDecoderUI } from '../ui';
+
+const slug = 'url-encoder-decoder';
+const title = 'URL Encoder and Decoder Online';
+const description =
+  'Convert special characters from any link to safe format (Percent-Encoding) or return them to their original readable state instantly and locally.';
+
+const faqData = [
+  {
+    question: 'Which characters get encoded in a URL?',
+    answer:
+      'All characters not permitted in the ASCII standard for URLs are encoded: spaces, accented letters, symbols such as &, =, +, #, ?, / and others. For example, a space becomes %20 and ñ becomes %C3%B1.',
+  },
+  {
+    question: 'What is the difference between encodeURI and encodeURIComponent?',
+    answer:
+      'encodeURI encodes a complete URL and leaves reserved characters such as / and ? intact. encodeURIComponent encodes all special characters including reserved ones, making it ideal for encoding individual query parameter values.',
+  },
+  {
+    question: 'Why does my URL have %20 instead of spaces?',
+    answer:
+      'The HTTP protocol does not allow spaces in URLs. %20 is the Percent-Encoding representation of a space according to the ASCII standard. Some systems use the + sign as an alternative, but %20 is the most universal and safe.',
+  },
+  {
+    question: 'Is it safe to use this tool with private URLs?',
+    answer:
+      'Yes, completely safe. All processing happens in your browser using native JavaScript (encodeURIComponent/decodeURIComponent). None of your URLs or parameters are sent to any external server.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Paste the raw text',
+    text: 'Type or paste your URL or text string into the upper field "Raw Text (Readable)".',
+  },
+  {
+    name: 'Encode or decode',
+    text: 'Click "Encode URL" to convert the text to safe Percent-Encoding format, or "Decode" to revert an encoded URL to its readable form.',
+  },
+  {
+    name: 'Copy the result',
+    text: 'Use the "Copy" button of the corresponding field to take the result to your clipboard.',
+  },
+];
+
+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: 'en',
+};
+
+const ui: UrlEncoderDecoderUI = {
+  labelRaw: 'Raw Text (Readable)',
+  labelEncoded: 'Formatted URL (Encoded)',
+  btnClear: 'Clear',
+  btnCopy: 'Copy',
+  btnCopied: 'Copied!',
+  btnEncode: 'Encode URL',
+  btnDecode: 'Decode',
+  placeholderRaw: 'https://example.com/search?q=red high heels&size=38',
+  placeholderEncoded: 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dred%20high%20heels%26size%3D38',
+};
+
+export const content: ToolLocaleContent<UrlEncoderDecoderUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Frequently Asked Questions',
+  faq: faqData,
+  bibliographyTitle: 'References and Documentation',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: encodeURIComponent()',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent',
+    },
+    {
+      name: 'IETF RFC 3986: URI Generic Syntax',
+      url: 'https://datatracker.ietf.org/doc/html/rfc3986',
+    },
+    {
+      name: 'W3C: URL Living Standard',
+      url: 'https://url.spec.whatwg.org/',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'What is URL Encoding?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'When browsing the internet or sending requests to servers, it is common to think of a URL (Uniform Resource Locator) as simply a "web address". However, internet protocol dictates that URLs can only be transmitted using a very restricted set of <strong>standard ASCII</strong> characters.',
+    },
+    {
+      type: 'paragraph',
+      html: 'What happens if the URL contains a space, accented letters, or special parameters such as plus (<code>+</code>) or equals (<code>=</code>) signs? To prevent systems from collapsing when trying to read illegal characters, these must be translated to their safe compatible form using <strong>Percent-Encoding</strong>.',
+    },
+    {
+      type: 'title',
+      text: 'How Percent-Encoding Works',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'When you use this tool, the algorithm takes any "unsafe" character (such as a space or an accented letter like ñ) and replaces it with a percent sign <code>%</code> followed by two hexadecimal digits corresponding to its value in the UTF-8 standard.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Basic Example:</strong> A simple space will be replaced by its safe equivalent: <code>%20</code>.',
+        '<strong>Extended Support:</strong> The letter <code>á</code> becomes <code>%C3%A1</code>, and <code>ñ</code> becomes <code>%C3%B1</code>.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Importance in APIs and GET Requests',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'When developing integrations, a typical mistake is passing a raw string to URL parameters. If you insert <code>shirt&blue</code> raw into your backend (<code>/search?q=shirt&blue</code>), the server will interpret <code>blue</code> as a new parameter, breaking all the logic.',
+    },
+    {
+      type: 'paragraph',
+      html: 'This tool guarantees clean, automatic calculations with 100% execution in your local browser. None of your URL strings are transmitted to third-party servers, ensuring the privacy of your tokens and analytics parameters.',
+    },
+  ],
+};