@jjlmoya/utils-developer 1.3.0 → 1.5.0

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

@@ -0,0 +1,161 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { KeycodeUI } from '../ui';
+
+const slug = 'keycode-it';
+const title = 'Visualizzatore di Codici Tasto Online. KeyCode Inspector';
+const description =
+  'Strumento online gratuito per vedere in tempo reale event.key, event.code, event.which e la posizione di qualsiasi tasto della tastiera. Genera snippet di codice JavaScript pronti all\'uso.';
+
+const faqData = [
+  {
+    question: 'Qual è la differenza tra event.key e event.code?',
+    answer:
+      'event.code rappresenta il tasto fisico sulla tastiera, indipendentemente dalla lingua configurata. event.key rappresenta il carattere generato, che può cambiare se si preme Shift o si usa una lingua diversa. Per i controlli di gioco usa code; per l\'input di testo e le scorciatoie semantiche, usa key.',
+  },
+  {
+    question: 'Cos\'è event.which e perché è considerato obsoleto?',
+    answer:
+      'event.which è una proprietà legacy che restituisce un codice ASCII numerico per il tasto premuto. È contrassegnata come obsoleta (deprecated) negli standard moderni perché event.key e event.code la sostituiscono con informazioni più precise e leggibili. Viene mostrata in questo strumento a scopo didattico.',
+  },
+  {
+    question: 'Cosa significa la proprietà location?',
+    answer:
+      'La proprietà location indica dove si trova fisicamente il tasto sulla tastiera: Standard (posizione normale), Left (tasto modificatore sinistro), Right (tasto modificatore destro) o Numpad (tastierino numerico). È utile per distinguere, ad esempio, il tasto CTRL sinistro da quello destro.',
+  },
+  {
+    question: 'Funziona con tastiere internazionali e layout non QWERTY?',
+    answer:
+      'Sì. Lo strumento mostra esattamente ciò che il browser riporta per la tua configurazione di tastiera. event.code restituirà sempre il nome QWERTY della posizione fisica, mentre event.key mostrerà il carattere effettivo in base alla tua lingua.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Premi un tasto',
+    text: 'Con il focus sulla pagina, premi qualsiasi tasto della tastiera per vedere istantaneamente tutte le informazioni sull\'evento.',
+  },
+  {
+    name: 'Copia i valori singoli',
+    text: 'Fai clic sul pulsante copia accanto a ogni proprietà (event.key, event.code, ecc.) per copiare quel valore specifico negli appunti.',
+  },
+  {
+    name: 'Usa gli snippet di codice',
+    text: 'Nella sezione "Snippet Rapidi" troverai blocchi di codice JavaScript pronti da incollare direttamente nel tuo progetto.',
+  },
+];
+
+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: 'DeveloperApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'it',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: 'Premi un tasto',
+  promptSubtitle: 'Qualsiasi tasto della tastiera per vederne il codice',
+  snippetsTitle: 'Snippet Rapidi',
+  btnCopy: 'Copia',
+  locationStandard: 'Standard',
+  locationLeft: 'Sinistra',
+  locationRight: 'Destra',
+  locationNumpad: 'Numpad',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Domande Frequenti',
+  faq: faqData,
+  bibliographyTitle: 'Riferimenti e Standard',
+  bibliography: [
+    {
+      name: 'MDN Web Docs – KeyboardEvent',
+      url: 'https://developer.mozilla.org/it/docs/Web/API/KeyboardEvent',
+    },
+    {
+      name: 'UI Events Specification (W3C) – KeyboardEvent',
+      url: 'https://www.w3.org/TR/uievents/#events-keyboardevents',
+    },
+    {
+      name: 'MDN – KeyboardEvent.code values',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Capire gli eventi tastiera in JavaScript',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Quando un utente preme un tasto, il browser attiva tre eventi: <code>keydown</code>, <code>keypress</code> e <code>keyup</code>. Ognuno espone proprietà con informazioni sul tasto premuto, ma non tutte sono equivalenti o consigliate.',
+    },
+    {
+      type: 'title',
+      text: 'Proprietà degli eventi tasto',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'event.code — Il tasto fisico',
+      html: '<p>Restituisce l\'identificatore della <strong>posizione fisica</strong> del tasto sulla tastiera, usando la nomenclatura QWERTY. Ad esempio, il tasto "A" su una tastiera AZERTY restituisce <code>KeyQ</code>. Ideale per i controlli di gioco dove conta la posizione, non il carattere.</p>',
+    },
+    {
+      type: 'card',
+      title: 'event.key — Il carattere generato',
+      html: '<p>Restituisce il <strong>valore del carattere</strong> generato in base alla lingua e ai modificatori attivi. Premendo Shift+A si ottiene <code>"A"</code>; senza Shift si ottiene <code>"a"</code>. Per i tasti speciali restituisce nomi come <code>"Enter"</code>, <code>"Escape"</code>, <code>"ArrowUp"</code>.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Quando usare ciascuna proprietà',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Usa <code>event.code</code> per i controlli di gioco (WASD indipendentemente dalla lingua) e <code>event.key</code> per rilevare caratteri specifici o scorciatoie semantiche come <code>Ctrl+C</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Le proprietà <code>event.which</code> e <code>event.keyCode</code> sono ufficialmente <strong>obsolete</strong> secondo lo standard W3C. Sebbene i browser moderni continuino a supportarle per compatibilità, non dovrebbero essere usate nel nuovo codice.',
+    },
+  ],
+};
+

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

@@ -0,0 +1,161 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { KeycodeUI } from '../ui';
+
+const slug = 'keycode';
+const title = 'キーボードコードビジュアライザー オンライン。KeyCode Inspector';
+const description =
+  'キーボードの任意のキーの event.key、event.code、event.which、およびロケーションをリアルタイムで確認できる無料のオンラインツール。すぐに使えるJavaScriptコードスニペットを生成します。';
+
+const faqData = [
+  {
+    question: 'event.key と event.code の違いは何ですか？',
+    answer:
+      'event.code は、設定された言語に関係なく、キーボード上の物理的なキーを表します。event.key は生成された文字を表し、Shift を押したり別の言語を使用したりすると変化します。ゲームコントロールには code を使用し、テキスト入力やセマンティックなショートカットには key を使用してください。',
+  },
+  {
+    question: 'event.which とは何ですか？なぜ非推奨なのですか？',
+    answer:
+      'event.which はキーの数値ASCIIコードを返すレガシーなプロパティです。event.key と event.code がより正確で読みやすい情報に置き換えるため、モダンな標準では非推奨（deprecated）とされています。このツールでは教育目的で表示しています。',
+  },
+  {
+    question: 'location プロパティはどういう意味ですか？',
+    answer:
+      'location プロパティは、キーボード上のキーの物理的な位置を示します：Standard（通常の位置）、Left（左側の修飾キー）、Right（右側の修飾キー）、Numpad（テンキー）。たとえば、左と右のCtrlキーを区別するのに便利です。',
+  },
+  {
+    question: '国際的なキーボードやQWERT Y以外のレイアウトでも動作しますか？',
+    answer:
+      'はい。このツールはブラウザがあなたのキーボード設定に対してレポートする内容をそのまま表示します。event.code は常に物理的な位置のQWERTY名を返し、event.key はあなたの言語に応じた実際の文字を表示します。',
+  },
+];
+
+const howToData = [
+  {
+    name: '任意のキーを押す',
+    text: 'ページにフォーカスがある状態で、キーボードの任意のキーを押すと、すべてのイベント情報が即座に表示されます。',
+  },
+  {
+    name: '個別の値をコピーする',
+    text: '各プロパティ（event.key、event.code など）の横にあるコピーボタンをクリックすると、その値をクリップボードにコピーできます。',
+  },
+  {
+    name: 'コードスニペットを使用する',
+    text: '「クイックスニペット」セクションには、プロジェクトに直接貼り付けられるJavaScriptコードブロックがあります。',
+  },
+];
+
+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: 'DeveloperApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'ja',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: 'キーを押してください',
+  promptSubtitle: 'キーボードの任意のキーを押してコードを確認',
+  snippetsTitle: 'クイックスニペット',
+  btnCopy: 'コピー',
+  locationStandard: 'Standard',
+  locationLeft: '左',
+  locationRight: '右',
+  locationNumpad: 'Numpad',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'よくある質問',
+  faq: faqData,
+  bibliographyTitle: '参考資料と標準',
+  bibliography: [
+    {
+      name: 'MDN Web Docs – KeyboardEvent',
+      url: 'https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent',
+    },
+    {
+      name: 'UI Events Specification (W3C) – KeyboardEvent',
+      url: 'https://www.w3.org/TR/uievents/#events-keyboardevents',
+    },
+    {
+      name: 'MDN – KeyboardEvent.code values',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'JavaScriptのキーボードイベントを理解する',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'ユーザーがキーを押すと、ブラウザは3つのイベントを発火します：<code>keydown</code>、<code>keypress</code>、<code>keyup</code>。それぞれが押されたキーに関する情報を持つプロパティを公開しますが、すべてが同等または推奨されているわけではありません。',
+    },
+    {
+      type: 'title',
+      text: 'キーイベントのプロパティ',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'event.code — 物理的なキー',
+      html: '<p>QWERTYの命名規則を使用して、キーボード上のキーの<strong>物理的な位置</strong>の識別子を返します。たとえば、AZERTYキーボードの「A」キーは<code>KeyQ</code>を返します。位置が重要であり文字ではないゲームコントロールに最適です。</p>',
+    },
+    {
+      type: 'card',
+      title: 'event.key — 生成された文字',
+      html: '<p>言語とアクティブな修飾キーに応じて生成された<strong>文字値</strong>を返します。Shift+Aを押すと<code>"A"</code>が返され、Shiftなしでは<code>"a"</code>が返されます。特殊キーの場合は<code>"Enter"</code>、<code>"Escape"</code>、<code>"ArrowUp"</code>などの名前が返されます。</p>',
+    },
+    {
+      type: 'title',
+      text: '各プロパティをいつ使うか',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'ゲームコントロール（言語に関係なくWASD）には<code>event.code</code>を使用し、特定の文字や<code>Ctrl+C</code>のようなセマンティックなキーボードショートカットを検出するには<code>event.key</code>を使用してください。',
+    },
+    {
+      type: 'paragraph',
+      html: '<code>event.which</code>と<code>event.keyCode</code>プロパティはW3C標準に従い、公式に<strong>非推奨</strong>となっています。モダンブラウザは互換性のためにこれらを引き続きサポートしていますが、新しいコードでは使用しないでください。',
+    },
+  ],
+};
+

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

@@ -0,0 +1,161 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { KeycodeUI } from '../ui';
+
+const slug = 'keycode';
+const title = '키보드 키코드 시각화 도구 온라인. KeyCode Inspector';
+const description =
+  '키보드의 모든 키에 대한 event.key, event.code, event.which 및 위치를 실시간으로 확인할 수 있는 무료 온라인 도구. 바로 사용할 수 있는 JavaScript 코드 스니펫을 생성합니다.';
+
+const faqData = [
+  {
+    question: 'event.key와 event.code의 차이점은 무엇인가요?',
+    answer:
+      'event.code는 설정된 언어와 관계없이 키보드의 물리적 키를 나타냅니다. event.key는 생성된 문자를 나타내며, Shift를 누르거나 다른 언어를 사용하면 변경될 수 있습니다. 게임 컨트롤에는 code를 사용하고, 텍스트 입력과 의미론적 단축키에는 key를 사용하세요.',
+  },
+  {
+    question: 'event.which는 무엇이고 왜 더 이상 사용하지 않나요?',
+    answer:
+      'event.which는 키의 숫자 ASCII 코드를 반환하는 레거시 속성입니다. event.key와 event.code가 더 정확하고 읽기 쉬운 정보로 대체하기 때문에 현대 표준에서는 더 이상 사용되지 않는(deprecated) 속성으로 표시되어 있습니다. 교육 목적으로 이 도구에 표시됩니다.',
+  },
+  {
+    question: 'location 속성은 무엇을 의미하나요?',
+    answer:
+      'location 속성은 키보드에서 키가 물리적으로 어디에 위치하는지를 나타냅니다: Standard(일반 위치), Left(왼쪽 수정자 키), Right(오른쪽 수정자 키), Numpad(숫자 키패드). 예를 들어 왼쪽 Ctrl 키와 오른쪽 Ctrl 키를 구별하는 데 유용합니다.',
+  },
+  {
+    question: '국제 키보드 및 QWERTY가 아닌 레이아웃에서도 작동하나요?',
+    answer:
+      '네. 이 도구는 브라우저가 키보드 설정에 대해 보고하는 내용을 그대로 표시합니다. event.code는 항상 물리적 위치의 QWERTY 이름을 반환하고, event.key는 사용자의 언어에 따른 실제 문자를 표시합니다.',
+  },
+];
+
+const howToData = [
+  {
+    name: '아무 키나 누르기',
+    text: '페이지에 포커스가 있는 상태에서 키보드의 아무 키나 누르면 모든 이벤트 정보를 즉시 확인할 수 있습니다.',
+  },
+  {
+    name: '개별 값 복사하기',
+    text: '각 속성(event.key, event.code 등) 옆의 복사 버튼을 클릭하면 해당 값을 클립보드에 복사할 수 있습니다.',
+  },
+  {
+    name: '코드 스니펫 사용하기',
+    text: '"빠른 스니펫" 섹션에서 프로젝트에 바로 붙여넣을 수 있는 JavaScript 코드 블록을 찾을 수 있습니다.',
+  },
+];
+
+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: 'DeveloperApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'ko',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: '키를 누르세요',
+  promptSubtitle: '키보드의 아무 키나 눌러서 코드를 확인하세요',
+  snippetsTitle: '빠른 스니펫',
+  btnCopy: '복사',
+  locationStandard: 'Standard',
+  locationLeft: '왼쪽',
+  locationRight: '오른쪽',
+  locationNumpad: 'Numpad',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: '자주 묻는 질문',
+  faq: faqData,
+  bibliographyTitle: '참고 자료 및 표준',
+  bibliography: [
+    {
+      name: 'MDN Web Docs – KeyboardEvent',
+      url: 'https://developer.mozilla.org/ko/docs/Web/API/KeyboardEvent',
+    },
+    {
+      name: 'UI Events Specification (W3C) – KeyboardEvent',
+      url: 'https://www.w3.org/TR/uievents/#events-keyboardevents',
+    },
+    {
+      name: 'MDN – KeyboardEvent.code values',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'JavaScript에서 키보드 이벤트 이해하기',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: '사용자가 키를 누르면 브라우저는 세 가지 이벤트를 발생시킵니다: <code>keydown</code>, <code>keypress</code>, <code>keyup</code>. 각각은 눌린 키에 대한 정보가 담긴 속성을 제공하지만, 모두 동등하거나 권장되는 것은 아닙니다.',
+    },
+    {
+      type: 'title',
+      text: '키 이벤트 속성',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'event.code — 물리적 키',
+      html: '<p>QWERTY 명명법을 사용하여 키보드에서 키의 <strong>물리적 위치</strong> 식별자를 반환합니다. 예를 들어 AZERTY 키보드의 "A" 키는 <code>KeyQ</code>를 반환합니다. 문자가 아닌 위치가 중요한 게임 컨트롤에 이상적입니다.</p>',
+    },
+    {
+      type: 'card',
+      title: 'event.key — 생성된 문자',
+      html: '<p>언어와 활성화된 수정자에 따라 생성된 <strong>문자 값</strong>을 반환합니다. Shift+A를 누르면 <code>"A"</code>가 반환되고, Shift 없이 누르면 <code>"a"</code>가 반환됩니다. 특수 키의 경우 <code>"Enter"</code>, <code>"Escape"</code>, <code>"ArrowUp"</code>과 같은 이름을 반환합니다.</p>',
+    },
+    {
+      type: 'title',
+      text: '각 속성을 언제 사용해야 할까요',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: '게임 컨트롤(언어와 관계없이 WASD)에는 <code>event.code</code>를 사용하고, 특정 문자나 <code>Ctrl+C</code>와 같은 의미론적 키보드 단축키를 감지할 때는 <code>event.key</code>를 사용하세요.',
+    },
+    {
+      type: 'paragraph',
+      html: '<code>event.which</code>와 <code>event.keyCode</code> 속성은 W3C 표준에 따라 공식적으로 <strong>더 이상 사용되지 않습니다</strong>. 최신 브라우저에서 호환성을 위해 계속 지원하지만, 새 코드에서는 사용하지 않는 것이 좋습니다.',
+    },
+  ],
+};
+

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

@@ -0,0 +1,161 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { KeycodeUI } from '../ui';
+
+const slug = 'keycode-nl';
+const title = 'Toetsenbord Keycode Visualizer Online. KeyCode Inspector';
+const description =
+  'Gratis online tool om event.key, event.code, event.which en de locatie van elke toets in realtime te bekijken. Genereert direct bruikbare JavaScript-codefragmenten.';
+
+const faqData = [
+  {
+    question: 'Wat is het verschil tussen event.key en event.code?',
+    answer:
+      'event.code staat voor de fysieke toets op het toetsenbord, ongeacht de geconfigureerde taal. event.key staat voor het gegenereerde teken, dat kan veranderen als u Shift indrukt of een andere taal gebruikt. Gebruik code voor spelbesturingen; gebruik key voor tekstinvoer en semantische sneltoetsen.',
+  },
+  {
+    question: 'Wat is event.which en waarom is het verouderd?',
+    answer:
+      'event.which is een verouderde eigenschap die een numerieke ASCII-code voor de toets teruggeeft. Het is in moderne standaarden als verouderd (deprecated) aangemerkt, omdat event.key en event.code het vervangen met nauwkeurigere en beter leesbare informatie. Het wordt in deze tool weergegeven voor educatieve doeleinden.',
+  },
+  {
+    question: 'Wat betekent de location-eigenschap?',
+    answer:
+      'De location-eigenschap geeft aan waar de toets fysiek op het toetsenbord staat: Standard (normale positie), Left (linker modifier), Right (rechter modifier) of Numpad (numeriek toetsenbord). Het is handig om bijvoorbeeld de linker en rechter CTRL-toets van elkaar te onderscheiden.',
+  },
+  {
+    question: 'Werkt het met internationale toetsenborden en niet-QWERTY-indelingen?',
+    answer:
+      'Ja. De tool toont precies wat de browser rapporteert voor uw toetsenbordconfiguratie. event.code geeft altijd de QWERTY-naam van de fysieke positie terug, terwijl event.key het werkelijke teken weergeeft op basis van uw taal.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Druk op een willekeurige toets',
+    text: 'Met de focus op de pagina drukt u op een willekeurige toets op het toetsenbord om direct alle gebeurtenisinformatie te zien.',
+  },
+  {
+    name: 'Kopieer afzonderlijke waarden',
+    text: 'Klik op de kopieerknop naast elke eigenschap (event.key, event.code, enz.) om die specifieke waarde naar het klembord te kopiëren.',
+  },
+  {
+    name: 'Gebruik de codefragmenten',
+    text: 'In de sectie "Snelle Fragmenten" vindt u JavaScript-codeblokken die u direct in uw project kunt plakken.',
+  },
+];
+
+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: 'DeveloperApplication',
+  operatingSystem: 'All',
+  offers: { '@type': 'Offer', price: '0', priceCurrency: 'EUR' },
+  inLanguage: 'nl',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: 'Druk op een toets',
+  promptSubtitle: 'Een willekeurige toets op uw toetsenbord om de code te zien',
+  snippetsTitle: 'Snelle Fragmenten',
+  btnCopy: 'Kopiëren',
+  locationStandard: 'Standard',
+  locationLeft: 'Links',
+  locationRight: 'Rechts',
+  locationNumpad: 'Numpad',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Veelgestelde Vragen',
+  faq: faqData,
+  bibliographyTitle: 'Referenties en Standaarden',
+  bibliography: [
+    {
+      name: 'MDN Web Docs – KeyboardEvent',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent',
+    },
+    {
+      name: 'UI Events Specification (W3C) – KeyboardEvent',
+      url: 'https://www.w3.org/TR/uievents/#events-keyboardevents',
+    },
+    {
+      name: 'MDN – KeyboardEvent.code values',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/UI_Events/Keyboard_event_code_values',
+    },
+  ],
+  howTo: howToData,
+  schemas: [faqSchema, howToSchema, appSchema],
+  seo: [
+    {
+      type: 'title',
+      text: 'Toetsenbordgebeurtenissen in JavaScript begrijpen',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Wanneer een gebruiker een toets indrukt, vuurt de browser drie gebeurtenissen af: <code>keydown</code>, <code>keypress</code> en <code>keyup</code>. Elk geeft eigenschappen bloot met informatie over de ingedrukte toets, maar niet alle zijn gelijkwaardig of aanbevolen.',
+    },
+    {
+      type: 'title',
+      text: 'Eigenschappen van toetsgebeurtenissen',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'event.code — De fysieke toets',
+      html: '<p>Geeft de identifier terug van de <strong>fysieke positie</strong> van de toets op het toetsenbord, met behulp van QWERTY-nomenclatuur. De "A"-toets op een AZERTY-toetsenbord geeft bijvoorbeeld <code>KeyQ</code> terug. Ideaal voor spelbesturingen waarbij de positie telt, niet het teken.</p>',
+    },
+    {
+      type: 'card',
+      title: 'event.key — Het gegenereerde teken',
+      html: '<p>Geeft de <strong>tekenwaarde</strong> terug die gegenereerd wordt op basis van taal en actieve modifiers. Shift+A indrukken geeft <code>"A"</code> terug; zonder Shift geeft het <code>"a"</code>. Voor speciale toetsen geeft het namen terug zoals <code>"Enter"</code>, <code>"Escape"</code>, <code>"ArrowUp"</code>.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Wanneer welke eigenschap gebruiken',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Gebruik <code>event.code</code> voor spelbesturingen (WASD ongeacht de taal) en <code>event.key</code> om specifieke tekens of semantische sneltoetsen zoals <code>Ctrl+C</code> te detecteren.',
+    },
+    {
+      type: 'paragraph',
+      html: 'De eigenschappen <code>event.which</code> en <code>event.keyCode</code> zijn officieel <strong>verouderd</strong> volgens de W3C-standaard. Hoewel moderne browsers ze blijven ondersteunen voor compatibiliteit, mogen ze niet worden gebruikt in nieuwe code.',
+    },
+  ],
+};
+