@jjlmoya/utils-developer 1.3.0 → 1.5.0

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

@@ -0,0 +1,163 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { UrlEncoderDecoderUI } from '../ui';
+
+const slug = 'url-encoder-decoder-it';
+const title = 'Codificatore e Decodificatore URL Online';
+const description =
+  'Converti i caratteri speciali da qualsiasi link in un formato sicuro (Percent-Encoding) o riportali istantaneamente e localmente allo stato originale leggibile.';
+
+const faqData = [
+  {
+    question: 'Quali caratteri vengono codificati in un\'URL?',
+    answer:
+      'Vengono codificati tutti i caratteri non consentiti nello standard ASCII per le URL: spazi, lettere accentate, simboli come &, =, +, #, ?, / e altri. Ad esempio, uno spazio diventa %20 e una ñ diventa %C3%B1.',
+  },
+  {
+    question: 'Qual è la differenza tra encodeURI ed encodeURIComponent?',
+    answer:
+      'encodeURI codifica un\'URL completa lasciando intatti i caratteri riservati come / e ?. encodeURIComponent codifica tutti i caratteri speciali, compresi quelli riservati, rendendolo ideale per la codifica dei singoli valori dei parametri di query.',
+  },
+  {
+    question: 'Perché la mia URL contiene %20 invece degli spazi?',
+    answer:
+      'Il protocollo HTTP non consente spazi nelle URL. %20 è la rappresentazione in Percent-Encoding di uno spazio secondo lo standard ASCII. Alcuni sistemi usano il segno + come alternativa, ma %20 è il più universale e sicuro.',
+  },
+  {
+    question: 'È sicuro usare questo strumento con URL private?',
+    answer:
+      'Sì, completamente sicuro. Tutta l\'elaborazione avviene nel tuo browser utilizzando JavaScript nativo (encodeURIComponent/decodeURIComponent). Nessuna delle tue URL o dei tuoi parametri viene inviata a server esterni.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Incolla il testo grezzo',
+    text: 'Digita o incolla la tua URL o stringa di testo nel campo superiore "Testo grezzo (leggibile)".',
+  },
+  {
+    name: 'Codifica o decodifica',
+    text: 'Fai clic su "Codifica URL" per convertire il testo nel formato sicuro Percent-Encoding, o su "Decodifica" per riportare un\'URL codificata alla sua forma leggibile.',
+  },
+  {
+    name: 'Copia il risultato',
+    text: 'Usa il pulsante "Copia" del campo corrispondente per portare il risultato negli appunti.',
+  },
+];
+
+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: 'it',
+};
+
+const ui: UrlEncoderDecoderUI = {
+  labelRaw: 'Testo grezzo (leggibile)',
+  labelEncoded: 'URL formattata (codificato)',
+  btnClear: 'Cancella',
+  btnCopy: 'Copia',
+  btnCopied: 'Copiato!',
+  btnEncode: 'Codifica URL',
+  btnDecode: 'Decodifica',
+  placeholderRaw: 'https://example.com/search?q=scarpe rosse&size=38',
+  placeholderEncoded: 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Dscarpe%20rosse%26size%3D38',
+};
+
+export const content: ToolLocaleContent<UrlEncoderDecoderUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande Frequenti',
+  faq: faqData,
+  bibliographyTitle: 'Riferimenti e Documentazione',
+  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: 'Cos\'è la codifica URL?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Durante la navigazione in Internet o l\'invio di richieste ai server, è comune pensare a un\'URL (Uniform Resource Locator) semplicemente come a un "indirizzo web". Tuttavia, il protocollo Internet impone che le URL possano essere trasmesse solo utilizzando un set molto ristretto di caratteri <strong>ASCII standard</strong>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Cosa succede se l\'URL contiene uno spazio, lettere accentate o parametri speciali come i segni più (<code>+</code>) o uguale (<code>=</code>)? Per evitare che i sistemi vadano in crash cercando di leggere caratteri illegali, questi devono essere tradotti nella loro forma sicura compatibile utilizzando il <strong>Percent-Encoding</strong>.',
+    },
+    {
+      type: 'title',
+      text: 'Come funziona il Percent-Encoding',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Quando usi questo strumento, l\'algoritmo prende qualsiasi carattere "non sicuro" (come uno spazio o una lettera accentata come ñ) e lo sostituisce con un segno di percentuale <code>%</code> seguito da due cifre esadecimali corrispondenti al suo valore nello standard UTF-8.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Esempio di base:</strong> Uno spazio semplice sarà sostituito dal suo equivalente sicuro: <code>%20</code>.',
+        '<strong>Supporto esteso:</strong> La lettera <code>à</code> diventa <code>%C3%A0</code>, e <code>ñ</code> diventa <code>%C3%B1</code>.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Importanza nelle API e nelle richieste GET',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Nello sviluppo di integrazioni, un errore tipico è passare una stringa grezza ai parametri URL. Se inserisci <code>camicia&blu</code> in modo grezzo nel tuo backend (<code>/search?q=camicia&blu</code>), il server interpreterà <code>blu</code> come un nuovo parametro, rompendo tutta la logica.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Questo strumento garantisce calcoli puliti e automatici con un\'esecuzione al 100% nel tuo browser locale. Nessuna delle tue stringhe URL viene trasmessa a server di terze parti, garantendo la privacy dei tuoi token e dei parametri analitici.',
+    },
+  ],
+};
+

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

@@ -0,0 +1,163 @@
+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エンコーダー＆デコーダー';
+const description =
+  'あらゆるリンクの特殊文字を安全な形式（パーセントエンコーディング）に変換、または元の読み取り可能な状態に即座にローカルで復元します。';
+
+const faqData = [
+  {
+    question: 'URLではどの文字がエンコードされますか？',
+    answer:
+      'URLのASCII標準で許可されていないすべての文字がエンコードされます：スペース、アクセント付き文字、&、=、+、#、?、/ などの記号。例えば、スペースは %20 に、ñ は %C3%B1 になります。',
+  },
+  {
+    question: 'encodeURI と encodeURIComponent の違いは何ですか？',
+    answer:
+      'encodeURI は完全なURLをエンコードし、/ や ? などの予約文字をそのまま残します。encodeURIComponent は予約文字を含むすべての特殊文字をエンコードするため、個々のクエリパラメータ値をエンコードするのに最適です。',
+  },
+  {
+    question: 'URLにスペースではなく %20 があるのはなぜですか？',
+    answer:
+      'HTTPプロトコルでは、URLにスペースを含めることはできません。%20 は ASCII標準に従ったスペースのパーセントエンコーディング表現です。一部のシステムでは代わりに + 記号を使用しますが、%20 が最も普遍的で安全です。',
+  },
+  {
+    question: 'プライベートなURLでこのツールを使用しても安全ですか？',
+    answer:
+      'はい、完全に安全です。すべての処理は、ネイティブJavaScript（encodeURIComponent/decodeURIComponent）を使用してブラウザ内で行われます。URLやパラメータが外部サーバーに送信されることはありません。',
+  },
+];
+
+const howToData = [
+  {
+    name: '生テキストを貼り付ける',
+    text: 'URLまたはテキスト文字列を上の「生テキスト（読み取り可能）」フィールドに入力または貼り付けます。',
+  },
+  {
+    name: 'エンコードまたはデコード',
+    text: '「URLエンコード」をクリックしてテキストを安全なパーセントエンコーディング形式に変換するか、「デコード」をクリックしてエンコードされたURLを読み取り可能な形式に戻します。',
+  },
+  {
+    name: '結果をコピーする',
+    text: '対応するフィールドの「コピー」ボタンを使用して、結果をクリップボードに保存します。',
+  },
+];
+
+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: 'ja',
+};
+
+const ui: UrlEncoderDecoderUI = {
+  labelRaw: '生テキスト（読み取り可能）',
+  labelEncoded: 'フォーマット済みURL（エンコード済み）',
+  btnClear: 'クリア',
+  btnCopy: 'コピー',
+  btnCopied: 'コピー完了！',
+  btnEncode: 'URLエンコード',
+  btnDecode: 'デコード',
+  placeholderRaw: 'https://example.com/search?q=赤い靴&size=38',
+  placeholderEncoded: 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3D%E8%B5%A4%E3%81%84%E9%9D%B4%26size%3D38',
+};
+
+export const content: ToolLocaleContent<UrlEncoderDecoderUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'よくある質問',
+  faq: faqData,
+  bibliographyTitle: '参考文献とドキュメント',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: encodeURIComponent()',
+      url: 'https://developer.mozilla.org/ja/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: 'URLエンコードとは何ですか？',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'インターネットを閲覧したりサーバーにリクエストを送信したりする際、URL（Uniform Resource Locator）を単なる「ウェブアドレス」と考えがちです。しかし、インターネットプロトコルでは、URLは非常に限定された<strong>標準ASCII</strong>文字セットを使用してのみ送信できると規定されています。',
+    },
+    {
+      type: 'paragraph',
+      html: 'URLにスペース、アクセント付き文字、あるいはプラス（<code>+</code>）やイコール（<code>=</code>）などの特殊なパラメータが含まれている場合はどうなるでしょうか？不正な文字を読み取ろうとしてシステムがダウンするのを防ぐために、これらは<strong>パーセントエンコーディング</strong>を使用して安全な互換形式に変換される必要があります。',
+    },
+    {
+      type: 'title',
+      text: 'パーセントエンコーディングの仕組み',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'このツールを使用すると、アルゴリズムが「安全でない」文字（スペースやアクセント付き文字など）を受け取り、それをパーセント記号 <code>%</code> と、UTF-8標準におけるその値に対応する2桁の16進数に置き換えます。',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>基本的な例：</strong> 単純なスペースは、安全な同等物である <code>%20</code> に置き換えられます。',
+        '<strong>拡張サポート：</strong> 文字 <code>あ</code> は <code>%E3%81%82</code> になります。',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'APIとGETリクエストにおける重要性',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '開発においてよくある間違いは、生の文字列をURLパラメータに渡すことです。<code>shirt&blue</code> をそのままバックエンド（<code>/search?q=shirt&blue</code>）に挿入すると、サーバーは <code>blue</code> を新しいパラメータとして解釈し、ロジックが破綻してしまいます。',
+    },
+    {
+      type: 'paragraph',
+      html: 'このツールは、ローカルブラウザでの100%の実行により、クリーンで自動的な計算を保証します。URL文字列がサードパーティのサーバーに送信されることはないため、トークンや分析パラメータのプライバシーが確保されます。',
+    },
+  ],
+};
+

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

@@ -0,0 +1,163 @@
+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 인코더 및 디코더';
+const description =
+  '모든 링크의 특수 문자를 안전한 형식(퍼센트 인코딩)으로 변환하거나 원래의 읽기 가능한 상태로 즉시 로컬에서 복구합니다.';
+
+const faqData = [
+  {
+    question: 'URL에서 어떤 문자가 인코딩되나요?',
+    answer:
+      'URL의 ASCII 표준에서 허용되지 않는 모든 문자가 인코딩됩니다: 공백, 액센트가 있는 문자, &, =, +, #, ?, / 등의 기호입니다. 예를 들어, 공백은 %20이 되고 ñ은 %C3%B1이 됩니다.',
+  },
+  {
+    question: 'encodeURI와 encodeURIComponent의 차이점은 무엇인가요?',
+    answer:
+      'encodeURI는 전체 URL을 인코딩하며 / 및 ?와 같은 예약 문자를 그대로 둡니다. encodeURIComponent는 예약 문자를 포함한 모든 특수 문자를 인코딩하므로 개별 쿼리 매개변수 값을 인코딩하는 데 이상적입니다.',
+  },
+  {
+    question: '왜 내 URL에 공백 대신 %20이 있나요?',
+    answer:
+      'HTTP 프로토콜은 URL에 공백을 허용하지 않습니다. %20은 ASCII 표준에 따른 공백의 퍼센트 인코딩 표현입니다. 일부 시스템에서는 + 기호를 대안으로 사용하지만, %20이 가장 보편적이고 안전합니다.',
+  },
+  {
+    question: '개인적인 URL에 이 도구를 사용해도 안전한가요?',
+    answer:
+      '네, 완전히 안전합니다. 모든 처리는 네이티브 JavaScript(encodeURIComponent/decodeURIComponent)를 사용하여 브라우저 내에서 이루어집니다. 사용자의 URL이나 매개변수는 외부 서버로 전송되지 않습니다.',
+  },
+];
+
+const howToData = [
+  {
+    name: '원본 텍스트 붙여넣기',
+    text: '상단 필드 "원본 텍스트(읽기 가능)"에 URL 또는 텍스트 문자열을 입력하거나 붙여넣습니다.',
+  },
+  {
+    name: '인코딩 또는 디코딩',
+    text: '"URL 인코딩"을 클릭하여 텍스트를 안전한 퍼센트 인코딩 형식으로 변환하거나, "디코딩"을 클릭하여 인코딩된 URL을 읽기 가능한 형태로 되돌립니다.',
+  },
+  {
+    name: '결과 복사하기',
+    text: '해당 필드의 "복사" 버튼을 사용하여 결과를 클립보드에 담습니다.',
+  },
+];
+
+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: 'ko',
+};
+
+const ui: UrlEncoderDecoderUI = {
+  labelRaw: '원본 텍스트 (읽기 가능)',
+  labelEncoded: '포맷된 URL (인코딩됨)',
+  btnClear: '지우기',
+  btnCopy: '복사',
+  btnCopied: '복사됨!',
+  btnEncode: 'URL 인코딩',
+  btnDecode: '디코딩',
+  placeholderRaw: 'https://example.com/search?q=빨간 구두&size=38',
+  placeholderEncoded: 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3D%EB%B9%A4%EA%B0%84%20%EA%B5%AC%EB%91%90%26size%3D38',
+};
+
+export const content: ToolLocaleContent<UrlEncoderDecoderUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: '자주 묻는 질문',
+  faq: faqData,
+  bibliographyTitle: '참고 자료 및 문서',
+  bibliography: [
+    {
+      name: 'MDN Web Docs: encodeURIComponent()',
+      url: 'https://developer.mozilla.org/ko/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: 'URL 인코딩이란 무엇인가요?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '인터넷을 탐색하거나 서버에 요청을 보낼 때, URL(Uniform Resource Locator)을 단순히 "웹 주소"라고 생각하기 쉽습니다. 하지만 인터넷 프로토콜은 URL이 매우 제한된 <strong>표준 ASCII</strong> 문자 세트만을 사용하여 전송되어야 한다고 규정하고 있습니다.',
+    },
+    {
+      type: 'paragraph',
+      html: 'URL에 공백, 액센트가 있는 문자 또는 플러스(<code>+</code>)나 등호(<code>=</code>)와 같은 특수 매개변수가 포함되어 있으면 어떻게 될까요? 잘못된 문자를 읽으려 할 때 시스템이 충돌하는 것을 방지하기 위해, 이러한 문자는 <strong>퍼센트 인코딩</strong>을 사용하여 안전한 호환 형식으로 번역되어야 합니다.',
+    },
+    {
+      type: 'title',
+      text: '퍼센트 인코딩의 작동 방식',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '이 도구를 사용하면 알고리즘이 "안전하지 않은" 문자(공백이나 ñ와 같은 액센트 문자)를 가져와 퍼센트 기호 <code>%</code>와 UTF-8 표준의 해당 값에 해당하는 두 자리 16진수로 바꿉니다.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>기본 예시:</strong> 단순한 공백은 안전한 대체물인 <code>%20</code>으로 바뀝니다.',
+        '<strong>확장 지원:</strong> 문자 <code>가</code>는 <code>%EA%B0%80</code>가 됩니다.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'API 및 GET 요청에서의 중요성',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: '개발 시 흔히 하는 실수는 URL 매개변수에 원본 문자열을 직접 전달하는 것입니다. <code>셔츠&파랑</code>을 그대로 백엔드(<code>/search?q=셔츠&파랑</code>)에 삽입하면, 서버는 <code>파랑</code>을 새로운 매개변수로 해석하여 모든 로직이 깨지게 됩니다.',
+    },
+    {
+      type: 'paragraph',
+      html: '이 도구는 로컬 브라우저에서의 100% 실행을 통해 깨끗하고 자동적인 계산을 보장합니다. 사용자의 URL 문자열은 제3자 서버로 전송되지 않으므로 토큰 및 분석 매개변수의 개인정보가 보호됩니다.',
+    },
+  ],
+};
+

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

@@ -0,0 +1,163 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { UrlEncoderDecoderUI } from '../ui';
+
+const slug = 'url-encoder-decoder-nl';
+const title = 'URL Encoder and Decoder Online';
+const description =
+  'Converteer speciale tekens van elke link naar een veilig formaat (Percent-Encoding) of herstel ze direct en lokaal naar hun oorspronkelijke leesbare staat.';
+
+const faqData = [
+  {
+    question: 'Welke tekens worden gecodeerd in een URL?',
+    answer:
+      'Alle tekens die niet zijn toegestaan in de ASCII-standaard voor URL\'s worden gecodeerd: spaties, letters met accenten, symbolen zoals &, =, +, #, ?, / en andere. Een spatie wordt bijvoorbeeld %20 en een ñ wordt %C3%B1.',
+  },
+  {
+    question: 'Wat is het verschil tussen encodeURI en encodeURIComponent?',
+    answer:
+      'encodeURI codeert een volledige URL en laat gereserveerde tekens zoals / en ? intact. encodeURIComponent codeert alle speciale tekens inclusief gereserveerde tekens, waardoor het ideaal is voor het coderen van individuele queryparameterwaarden.',
+  },
+  {
+    question: 'Waarom heeft mijn URL %20 in plaats von spaties?',
+    answer:
+      'Het HTTP-protocol staat geen spaties in URL\'s toe. %20 is de Percent-Encoding weergave van een spatie volgens de ASCII-standaard. Sommige systemen gebruiken het + teken als alternatief, maar %20 is het meest universeel en veilig.',
+  },
+  {
+    question: 'Is het veilig om deze tool te gebruiken met privé URL\'s?',
+    answer:
+      'Ja, volledig veilig. Alle verwerking vindt plaats in uw browser met behulp van native JavaScript (encodeURIComponent/decodeURIComponent). Geen van uw URL\'s of parameters wordt naar een externe server verzonden.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Plak de ruwe tekst',
+    text: 'Typ of plak uw URL of tekstreeks in het bovenste veld "Ruwe tekst (leesbaar)".',
+  },
+  {
+    name: 'Coderen of decoderen',
+    text: 'Klik op "URL coderen" om de tekst te converteren naar het veilige Percent-Encoding formaat, of op "Decoderen" om een gecodeerde URL terug te zetten naar de leesbare vorm.',
+  },
+  {
+    name: 'Kopieer het resultaat',
+    text: 'Gebruik de knop "Kopiëren" van het bijbehorende veld om het resultaat naar uw klembord te kopiëren.',
+  },
+];
+
+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: 'nl',
+};
+
+const ui: UrlEncoderDecoderUI = {
+  labelRaw: 'Ruwe tekst (leesbaar)',
+  labelEncoded: 'Geformatteerde URL (gecodeerd)',
+  btnClear: 'Wissen',
+  btnCopy: 'Kopiëren',
+  btnCopied: 'Gekopieerd!',
+  btnEncode: 'URL coderen',
+  btnDecode: 'Decoderen',
+  placeholderRaw: 'https://example.com/search?q=rode schoenen&size=38',
+  placeholderEncoded: 'https%3A%2F%2Fexample.com%2Fsearch%3Fq%3Drode%20schoenen%26size%3D38',
+};
+
+export const content: ToolLocaleContent<UrlEncoderDecoderUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Veelgestelde Vragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenties en Documentatie',
+  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: 'Wat is URL-codering?',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bij het surfen op internet of het verzenden van verzoeken naar servers, is het gebruikelijk om een URL (Uniform Resource Locator) simpelweg als een "webadres" te beschouwen. Het internetprotocol schrijft echter voor dat URL\'s alleen kunnen worden verzonden met een zeer beperkte set <strong>standaard ASCII</strong>-tekens.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Wat gebeurt er als de URL een spatie, letters met accenten of speciale parameters bevat zoals plus- (<code>+</code>) of isgelijktekens (<code>=</code>)? Om te voorkomen dat systemen vastlopen bij het proberen te lezen van ongeldige tekens, moeten deze worden vertaald naar hun veilige compatibele vorm met behulp van <strong>Percent-Encoding</strong>.',
+    },
+    {
+      type: 'title',
+      text: 'Hoe Percent-Encoding werkt',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Wanneer u deze tool gebruikt, neemt het algoritme elk "onveilig" teken (zoals een spatie of een letter met accent zoals ñ) en vervangt dit door een procentteken <code>%</code> gevolgd door twee hexadecimale cijfers die overeenkomen met de waarde in de UTF-8 standaard.',
+    },
+    {
+      type: 'list',
+      items: [
+        '<strong>Basisvoorbeeld:</strong> Een eenvoudige spatie wordt vervangen door het veilige equivalent: <code>%20</code>.',
+        '<strong>Uitgebreide ondersteuning:</strong> De letter <code>á</code> wordt <code>%C3%A1</code> en <code>ñ</code> wordt <code>%C3%B1</code>.',
+      ],
+    },
+    {
+      type: 'title',
+      text: 'Belang in API\'s en GET-verzoeken',
+      level: 3,
+    },
+    {
+      type: 'paragraph',
+      html: 'Bij het ontwikkelen van integraties is een typische fout het doorgeven van een ruwe tekenreeks aan URL-parameters. Als u <code>shirt&blauw</code> onbewerkt in uw backend invoegt (<code>/search?q=shirt&blauw</code>), zal de server <code>blauw</code> interpreteren als een nieuwe parameter, waardoor de hele logica wordt verbroken.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Deze tool garandeert schone, automatische berekeningen met 100% uitvoering in uw lokale browser. Geen van uw URL-tekenreeksen wordt naar servers van derden verzonden, wat de privacy van uw tokens en analyseparameters waarborgt.',
+    },
+  ],
+};
+