@jjlmoya/utils-developer 1.3.0 → 1.5.0

package/src/tool/keycode/i18n/pl.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-pl';
+const title = 'Wizualizator Kodu Klawisza Klawiatury Online. KeyCode Inspector';
+const description =
+  'Darmowe narzędzie online do podglądu event.key, event.code, event.which i położenia dowolnego klawisza klawiatury w czasie rzeczywistym. Generuje gotowe do użycia fragmenty kodu JavaScript.';
+
+const faqData = [
+  {
+    question: 'Jaka jest różnica między event.key a event.code?',
+    answer:
+      'event.code reprezentuje fizyczny klawisz na klawiaturze, niezależnie od skonfigurowanego języka. event.key reprezentuje wygenerowany znak, który może się zmienić po naciśnięciu Shift lub użyciu innego języka. Do sterowania grami używaj code; do wprowadzania tekstu i semantycznych skrótów klawiszowych używaj key.',
+  },
+  {
+    question: 'Czym jest event.which i dlaczego jest przestarzałe?',
+    answer:
+      'event.which to starsze właściwość zwracająca numeryczny kod ASCII klawisza. Jest oznaczone jako przestarzałe (deprecated) w nowoczesnych standardach, ponieważ event.key i event.code zastępują je dokładniejszymi i czytelniejszymi informacjami. Wyświetlane jest w tym narzędziu w celach edukacyjnych.',
+  },
+  {
+    question: 'Co oznacza właściwość location?',
+    answer:
+      'Właściwość location wskazuje, gdzie klawisz jest fizycznie umieszczony na klawiaturze: Standard (normalna pozycja), Left (lewy klawisz modyfikujący), Right (prawy klawisz modyfikujący) lub Numpad (klawiatura numeryczna). Przydatne jest np. do rozróżnienia lewego i prawego klawisza CTRL.',
+  },
+  {
+    question: 'Czy działa z klawiaturami międzynarodowymi i układami innymi niż QWERTY?',
+    answer:
+      'Tak. Narzędzie wyświetla dokładnie to, co przeglądarka raportuje dla Twojej konfiguracji klawiatury. event.code zawsze zwróci nazwę QWERTY fizycznej pozycji, podczas gdy event.key pokaże rzeczywisty znak zgodny z Twoim językiem.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Naciśnij dowolny klawisz',
+    text: 'Gdy strona ma fokus, naciśnij dowolny klawisz na klawiaturze, aby natychmiast zobaczyć wszystkie informacje o zdarzeniu.',
+  },
+  {
+    name: 'Kopiuj poszczególne wartości',
+    text: 'Kliknij przycisk kopiowania obok każdej właściwości (event.key, event.code itp.), aby skopiować tę konkretną wartość do schowka.',
+  },
+  {
+    name: 'Użyj fragmentów kodu',
+    text: 'W sekcji „Szybkie fragmenty" znajdziesz bloki kodu JavaScript gotowe do wklejenia bezpośrednio do swojego projektu.',
+  },
+];
+
+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: 'pl',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: 'Naciśnij klawisz',
+  promptSubtitle: 'Dowolny klawisz na klawiaturze, aby zobaczyć jego kod',
+  snippetsTitle: 'Szybkie Fragmenty',
+  btnCopy: 'Kopiuj',
+  locationStandard: 'Standard',
+  locationLeft: 'Lewo',
+  locationRight: 'Prawo',
+  locationNumpad: 'Numpad',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Często Zadawane Pytania',
+  faq: faqData,
+  bibliographyTitle: 'Referencje i Standardy',
+  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: 'Zrozumienie zdarzeń klawiatury w JavaScript',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Gdy użytkownik naciśnie klawisz, przeglądarka wyzwala trzy zdarzenia: <code>keydown</code>, <code>keypress</code> i <code>keyup</code>. Każde z nich udostępnia właściwości z informacjami o naciśniętym klawiszu, ale nie wszystkie są równoważne ani zalecane.',
+    },
+    {
+      type: 'title',
+      text: 'Właściwości zdarzeń klawiszowych',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'event.code — Fizyczny klawisz',
+      html: '<p>Zwraca identyfikator <strong>fizycznej pozycji</strong> klawisza na klawiaturze, używając nomenklatury QWERTY. Na przykład klawisz „A" na klawiaturze AZERTY zwraca <code>KeyQ</code>. Idealny do sterowania grami, gdzie liczy się pozycja, a nie znak.</p>',
+    },
+    {
+      type: 'card',
+      title: 'event.key — Wygenerowany znak',
+      html: '<p>Zwraca <strong>wartość znaku</strong> wygenerowanego zgodnie z językiem i aktywnymi modyfikatorami. Naciśnięcie Shift+A zwraca <code>"A"</code>; bez Shift zwraca <code>"a"</code>. Dla klawiszy specjalnych zwraca nazwy jak <code>"Enter"</code>, <code>"Escape"</code>, <code>"ArrowUp"</code>.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Kiedy używać każdej właściwości',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Używaj <code>event.code</code> do sterowania grami (WASD niezależnie od języka) i <code>event.key</code> do wykrywania określonych znaków lub semantycznych skrótów klawiszowych jak <code>Ctrl+C</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Właściwości <code>event.which</code> i <code>event.keyCode</code> są oficjalnie <strong>przestarzałe</strong> zgodnie ze standardem W3C. Chociaż nowoczesne przeglądarki nadal je obsługują dla zachowania kompatybilności, nie powinny być używane w nowym kodzie.',
+    },
+  ],
+};
+

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

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { KeycodeUI } from '../ui';
+
+const slug = 'inspecionador-codigo-tecla-teclado';
+const title = 'Visualizador Online de Código de Tecla. Inspetor de Código de Tecla';
+const description =
+  'Ferramenta online gratuita para ver event.key, event.code, event.which e localização de qualquer tecla de teclado em tempo real. Gera snippets de código JavaScript prontos para usar.';
+
+const faqData = [
+  {
+    question: 'Qual é a diferença entre event.key e event.code?',
+    answer:
+      'event.code representa a posição física da tecla no teclado, independentemente do idioma configurado. event.key representa o carácter gerado, que pode mudar se você pressionar Shift ou usar um idioma diferente. Use code para controles de jogos; use key para entrada de texto e atalhos semânticos.',
+  },
+  {
+    question: 'O que é event.which e por que está deprecado?',
+    answer:
+      'event.which é uma propriedade herdada que retorna um código ASCII numérico para a tecla. É marcada como deprecada nos padrões modernos porque event.key e event.code a substituem por informações mais precisas e legíveis. É mostrada nesta ferramenta para fins educacionais.',
+  },
+  {
+    question: 'O que significa a propriedade location?',
+    answer:
+      'A propriedade location indica onde a tecla está fisicamente localizada no teclado: Padrão (posição normal), Esquerda (tecla modificadora esquerda), Direita (tecla modificadora direita) ou Teclado Numérico (teclado numérico). É útil distinguir entre as teclas CTRL esquerda e direita, por exemplo.',
+  },
+  {
+    question: 'Funciona com teclados internacionais e layouts não QWERTY?',
+    answer:
+      'Sim. A ferramenta mostra exatamente o que o navegador relata para sua configuração de teclado. event.code sempre retornará o nome QWERTY da posição física, enquanto event.key mostrará o carácter real de acordo com seu idioma.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Pressione qualquer tecla',
+    text: 'Com o foco na página, pressione qualquer tecla do teclado para ver instantaneamente todas as informações do evento.',
+  },
+  {
+    name: 'Copie valores individuais',
+    text: 'Clique no botão de cópia ao lado de cada propriedade (event.key, event.code, etc.) para copiar esse valor específico para a área de transferência.',
+  },
+  {
+    name: 'Use os snippets de código',
+    text: 'Na seção "Quick Snippets" você encontrará blocos de código JavaScript prontos para colar diretamente em seu projeto.',
+  },
+];
+
+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: 'pt',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: 'Pressione uma tecla',
+  promptSubtitle: 'Qualquer tecla do seu teclado para ver seu código',
+  snippetsTitle: 'Snippets Rápidos',
+  btnCopy: 'Copiar',
+  locationStandard: 'Padrão',
+  locationLeft: 'Esquerda',
+  locationRight: 'Direita',
+  locationNumpad: 'Teclado Numérico',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Perguntas Frequentes',
+  faq: faqData,
+  bibliographyTitle: 'Referências e Padrões',
+  bibliography: [
+    {
+      name: 'MDN Web Docs – KeyboardEvent',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent',
+    },
+    {
+      name: 'Especificação UI Events (W3C) – KeyboardEvent',
+      url: 'https://www.w3.org/TR/uievents/#events-keyboardevents',
+    },
+    {
+      name: 'MDN – Valores de KeyboardEvent.code',
+      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: 'Compreendendo eventos de teclado em JavaScript',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'Quando um usuário pressiona uma tecla, o navegador dispara três eventos: <code>keydown</code>, <code>keypress</code> e <code>keyup</code>. Cada um expõe propriedades com informações sobre a tecla pressionada, mas nem todas são equivalentes ou recomendadas.',
+    },
+    {
+      type: 'title',
+      text: 'Propriedades de eventos de tecla',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'event.code — A tecla física',
+      html: '<p>Retorna o identificador da <strong>posição física</strong> da tecla no teclado, usando nomenclatura QWERTY. Por exemplo, a tecla "A" em um teclado AZERTY retorna <code>KeyQ</code>. Ideal para controles de jogos onde a posição importa, não o carácter.</p>',
+    },
+    {
+      type: 'card',
+      title: 'event.key — O carácter gerado',
+      html: '<p>Retorna o <strong>valor de carácter</strong> gerado de acordo com o idioma e modificadores ativos. Pressionar Shift+A retorna <code>"A"</code>; sem Shift retorna <code>"a"</code>. Para teclas especiais, retorna nomes como <code>"Enter"</code>, <code>"Escape"</code>, <code>"ArrowUp"</code>.</p>',
+    },
+    {
+      type: 'title',
+      text: 'Quando usar cada propriedade',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Use <code>event.code</code> para controles de jogos (WASD independentemente do idioma) e <code>event.key</code> para detectar carácteres específicos ou atalhos de teclado semânticos como <code>Ctrl+C</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'As propriedades <code>event.which</code> e <code>event.keyCode</code> estão oficialmente <strong>deprecadas</strong> de acordo com o padrão W3C. Embora os navegadores modernos continuem a suportá-las para compatibilidade, elas não devem ser usadas em código novo.',
+    },
+  ],
+};

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

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { KeycodeUI } from '../ui';
+
+const slug = 'inspekttor-koda-klavishi';
+const title = 'Онлайн Визуализатор Кода Клавиши. Инспектор Кода Ключа';
+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 заменяют его более точной и читаемой информацией. Оно показано в этом инструменте в образовательных целях.',
+  },
+  {
+    question: 'Что означает свойство location?',
+    answer:
+      'Свойство location указывает, где физически находится клавиша на клавиатуре: Стандартная (обычная позиция), Левая (левая клавиша-модификатор), Правая (правая клавиша-модификатор) или Цифровая клавиатура (цифровая панель). Это полезно для различия между левой и правой клавишами CTRL, например.',
+  },
+  {
+    question: 'Работает ли это с международными клавиатурами и раскладками не-QWERTY?',
+    answer:
+      'Да. Инструмент показывает ровно то, что сообщает браузер для вашей конфигурации клавиатуры. event.code всегда возвращает имя QWERTY физической позиции, а event.key показывает фактический символ согласно вашему языку.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Нажмите любую клавишу',
+    text: 'Установив фокус на страницу, нажмите любую клавишу на клавиатуре, чтобы мгновенно увидеть всю информацию о событии.',
+  },
+  {
+    name: 'Копируйте отдельные значения',
+    text: 'Нажмите кнопку копирования рядом с каждым свойством (event.key, event.code и т. д.), чтобы скопировать это конкретное значение в буфер обмена.',
+  },
+  {
+    name: 'Используйте сниппеты кода',
+    text: 'В разделе "Quick Snippets" вы найдёте блоки кода 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: 'ru',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: 'Нажмите клавишу',
+  promptSubtitle: 'Любую клавишу на клавиатуре, чтобы увидеть её код',
+  snippetsTitle: 'Быстрые Сниппеты',
+  btnCopy: 'Копировать',
+  locationStandard: 'Стандартная',
+  locationLeft: 'Левая',
+  locationRight: 'Правая',
+  locationNumpad: 'Цифровая клавиатура',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Часто Задаваемые Вопросы',
+  faq: faqData,
+  bibliographyTitle: 'Ссылки и Стандарты',
+  bibliography: [
+    {
+      name: 'MDN Web Docs – KeyboardEvent',
+      url: 'https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent',
+    },
+    {
+      name: 'Спецификация UI Events (W3C) – KeyboardEvent',
+      url: 'https://www.w3.org/TR/uievents/#events-keyboardevents',
+    },
+    {
+      name: 'MDN – Значения KeyboardEvent.code',
+      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>Возвращает идентификатор <strong>физической позиции</strong> клавиши на клавиатуре, используя номенклатуру QWERTY. Например, клавиша "A" на клавиатуре AZERTY возвращает <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: 'Используйте <code>event.code</code> для управления игрой (WASD независимо от языка) и <code>event.key</code> для обнаружения определённых символов или семантических сочетаний клавиш, таких как <code>Ctrl+C</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Свойства <code>event.which</code> и <code>event.keyCode</code> официально <strong>устаревшие</strong> согласно стандарту W3C. Хотя современные браузеры продолжают их поддерживать для совместимости, их не следует использовать в новом коде.',
+    },
+  ],
+};

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

@@ -0,0 +1,160 @@
+import type { WithContext, FAQPage, HowToThing, SoftwareApplication } from 'schema-dts';
+import type { ToolLocaleContent } from '../../../types';
+import type { KeycodeUI } from '../ui';
+
+const slug = 'tangentbords-tangentkodsvisualiserare-online';
+const title = 'Online Tangentbordstangentkodvisualiserare. Inspektor för Tangentkod';
+const description =
+  'Kostlöst onlineverktyg för att se event.key, event.code, event.which och position för vilken tangentbordstangent som helst i realtid. Genererar JavaScript-kodsnippets klara att använda.';
+
+const faqData = [
+  {
+    question: 'Vad är skillnaden mellan event.key och event.code?',
+    answer:
+      'event.code representerar tangentens fysiska position på tangentbordet, oavsett konfigurerat språk. event.key representerar den genererade tecknet, som kan ändras om du trycker på Shift eller använder ett annat språk. Använd code för spelkontroller; använd key för textinmatning och semantiska genvägar.',
+  },
+  {
+    question: 'Vad är event.which och varför är det föråldrat?',
+    answer:
+      'event.which är en äldre egenskap som returnerar en numerisk ASCII-kod för tangenten. Den är markerad som föråldrad i moderna standarder eftersom event.key och event.code ersätter den med mer exakt och läsbar information. Det visas i det här verktyget för utbildningsändamål.',
+  },
+  {
+    question: 'Vad betyder location-egenskapen?',
+    answer:
+      'location-egenskapen anger var tangenten är fysiskt placerad på tangentbordet: Standard (normal position), Vänster (vänstre modifiertangent), Höger (höger modifiertangent) eller Numerisk (numerisk knappsats). Det är användbart för att skilja mellan vänster och höger CTRL-tangenter, till exempel.',
+  },
+  {
+    question: 'Fungerar det med internationella tangentbord och inte-QWERTY-layouter?',
+    answer:
+      'Ja. Verktyget visar exakt vad webbläsaren rapporterar för din tangentbordskonfiguration. event.code kommer alltid att returnera QWERTY-namnet för den fysiska positionen, medan event.key visar det faktiska tecknet enligt ditt språk.',
+  },
+];
+
+const howToData = [
+  {
+    name: 'Tryck valfri tangent',
+    text: 'Med fokus på sidan, tryck valfri tangent på tangentbordet för att omedelbar se all händelseinformation.',
+  },
+  {
+    name: 'Kopiera individuella värden',
+    text: 'Klicka kopieringsknappen bredvid varje egenskap (event.key, event.code, etc.) för att kopiera det specifika värdet till urklipp.',
+  },
+  {
+    name: 'Använd kodsnippets',
+    text: 'I avsnittet "Quick Snippets" hittar du JavaScript-kodblock klara att klistra in direkt i ditt projekt.',
+  },
+];
+
+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: 'sv',
+};
+
+const ui: KeycodeUI = {
+  promptTitle: 'Tryck en tangent',
+  promptSubtitle: 'Vilken tangent som helst på tangentbordet för att se dess kod',
+  snippetsTitle: 'Snabba Snippets',
+  btnCopy: 'Kopiera',
+  locationStandard: 'Standard',
+  locationLeft: 'Vänster',
+  locationRight: 'Höger',
+  locationNumpad: 'Numerisk',
+};
+
+export const content: ToolLocaleContent<KeycodeUI> = {
+  slug,
+  title,
+  description,
+  ui,
+  faqTitle: 'Vanliga Frågor',
+  faq: faqData,
+  bibliographyTitle: 'Referenser och Standarder',
+  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: 'Förstå tangentbordshändelser i JavaScript',
+      level: 2,
+    },
+    {
+      type: 'paragraph',
+      html: 'När en användare trycker på en tangent utlöser webbläsaren tre händelser: <code>keydown</code>, <code>keypress</code> och <code>keyup</code>. Varje exponerar egenskaper med information om den trycka tangenten, men inte alla är ekvivalenta eller rekommenderade.',
+    },
+    {
+      type: 'title',
+      text: 'Tangentbordshändelsegenskaper',
+      level: 3,
+    },
+    {
+      type: 'grid',
+      columns: 2,
+    },
+    {
+      type: 'card',
+      title: 'event.code — Den fysiska tangenten',
+      html: '<p>Returnerar identifieraren för tangentens <strong>fysiska position</strong> på tangentbordet, med QWERTY-nomenklatur. Till exempel returnerar tangenten "A" på ett AZERTY-tangentbord <code>KeyQ</code>. Idealisk för spelkontroller där position spelar roll, inte tecknet.</p>',
+    },
+    {
+      type: 'card',
+      title: 'event.key — Det genererade tecknet',
+      html: '<p>Returnerar det <strong>genererade teckenvärde</strong> enligt språk och aktiva modifierare. Att trycka Shift+A returnerar <code>"A"</code>; utan Shift returnerar <code>"a"</code>. För specialtangenter returneras namn som <code>"Enter"</code>, <code>"Escape"</code>, <code>"ArrowUp"</code>.</p>',
+    },
+    {
+      type: 'title',
+      text: 'När man ska använda varje egenskap',
+      level: 3,
+    },
+    {
+      type: 'tip',
+      html: 'Använd <code>event.code</code> för spelkontroller (WASD oavsett språk) och <code>event.key</code> för att detektera specifika tecken eller semantiska tangentbordsgenvägar som <code>Ctrl+C</code>.',
+    },
+    {
+      type: 'paragraph',
+      html: 'Egenskaperna <code>event.which</code> och <code>event.keyCode</code> är officiellt <strong>föråldrade</strong> enligt W3C-standarden. Även om moderna webbläsare fortsätter att stödja dem för kompatibilitet, bör de inte användas i ny kod.',
+    },
+  ],
+};