Merge branch 'main' into feat/docker-compose-to-docker-run

components.d.ts

@@ -93,7 +93,6 @@ declare module '@vue/runtime-core' {
     'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
     IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
-    IconMdiArrowRight: typeof import('~icons/mdi/arrow-right')['default']
     IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
     IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
@@ -173,8 +172,6 @@ declare module '@vue/runtime-core' {
     NTable: typeof import('naive-ui')['NTable']
     NTag: typeof import('naive-ui')['NTag']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
-    NUpload: typeof import('naive-ui')['NUpload']
-    NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']
     PdfSignatureChecker: typeof import('./src/tools/pdf-signature-checker/pdf-signature-checker.vue')['default']
@@ -199,6 +196,7 @@ declare module '@vue/runtime-core' {
     TextStatistics: typeof import('./src/tools/text-statistics/text-statistics.vue')['default']
     TextToBinary: typeof import('./src/tools/text-to-binary/text-to-binary.vue')['default']
     TextToNatoAlphabet: typeof import('./src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue')['default']
+    TextToUnicode: typeof import('./src/tools/text-to-unicode/text-to-unicode.vue')['default']
     TokenDisplay: typeof import('./src/tools/otp-code-generator-and-validator/token-display.vue')['default']
     'TokenGenerator.tool': typeof import('./src/tools/token-generator/token-generator.tool.vue')['default']
     TomlToJson: typeof import('./src/tools/toml-to-json/toml-to-json.vue')['default']
@@ -215,5 +213,6 @@ declare module '@vue/runtime-core' {
     XmlFormatter: typeof import('./src/tools/xml-formatter/xml-formatter.vue')['default']
     YamlToJson: typeof import('./src/tools/yaml-to-json-converter/yaml-to-json.vue')['default']
     YamlToToml: typeof import('./src/tools/yaml-to-toml/yaml-to-toml.vue')['default']
+    YamlViewer: typeof import('./src/tools/yaml-viewer/yaml-viewer.vue')['default']
   }
 }

locales/es.yaml

@@ -0,0 +1,71 @@
+home:
+  categories:
+    newestTools: Nuevas herramientas
+    favoriteTools: 'Tus herramientas favoritas'
+    allTools: 'Todas las herramientas'
+  subtitle: 'Herramientas practicas para desarrolladores'
+  toggleMenu: 'Toggle menu'
+  home: Home
+  uiLib: 'UI Lib'
+  support: 'Apoyar el desarrollo de IT-Tools'
+  buyMeACoffee: 'Buy me a coffee'
+  follow:
+    title: 'Te gustan las it-tools?'
+    p1: 'Danos una estrella en'
+    githubRepository: 'Repositorio de IT-Tools en GitHub'
+    p2: 'o síguenos en'
+    twitterAccount: 'Cuenta de twitter de IT-Tools'
+    thankYou: 'Muchas gracias!'
+  nav:
+    github: 'Repositorio en github'
+    githubRepository: 'IT-Tools GitHub repository'
+    twitter: 'Cuenta de Twitter'
+    twitterAccount: 'Cuenta de twitter de IT Tools'
+    about: 'Sobre  IT-Tools'
+    aboutLabel: 'Sobre'
+    darkMode: 'Modo obscuro'
+    lightMode: 'Modo claro'
+    mode: 'Alternar modo oscuro/claro'
+about:
+  content: >
+    # Sobre IT-Tools
+
+    Este maravilloso sitio web, hecho con ❤ por [Corentin Thomasset](https://github.com/CorentinTh) , agrega herramientas útiles para desarrolladores y personas que trabajan en IT. Si lo encuentra útil, no dude en compartirlo con las personas que crea que también pueden encontrarlo útil y ¡no olvide marcarlo como favorito en su barra de accesos directos!
+
+    IT Tools es de código abierto (under the MIT license) y gratis, y siempre lo será, pero me cuesta dinero alojar y renovar el nombre de dominio. Si desea apoyar mi trabajo y animarme a agregar más herramientas, considere apoyarme a través de[sponsoring me](https://www.buymeacoffee.com/cthmsst).
+
+    ## Tecnologías
+
+    IT Tools está creado en Vue.js (Vue 3) con la biblioteca de componentes Naive UI y Vercel lo aloja y lo implementa continuamente. En algunas herramientas se utilizan bibliotecas de código abierto de terceros; puede encontrar la lista completa en [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) archivo del repositorio.
+
+    ## ¿Encontraste un error? ¿Falta una herramienta?
+    
+    Si necesita una herramienta que actualmente no está presente aquí y cree que puede ser útil, puede enviar una solicitud de función en el [issues section](https://github.com/CorentinTh/it-tools/issues/new/choose) en el repositorio de GitHub.
+
+    Y si encontró un error o algo no funciona como se esperaba, presente un reporte de error en el [issues section](https://github.com/CorentinTh/it-tools/issues/new/choose) en el repositorio de GitHub.
+
+404:
+  notFound: '404 Not Found'
+  sorry: 'Lo sentimos, esta página no parece existir'
+  maybe: 'Tal vez el caché esté haciendo cosas raras, ¿probamos a refrescar forzosamente?'
+  backHome: 'Back home'
+favoriteButton:
+  remove: 'Quitar de favoritos'
+  add: 'Añadir a favoritos'
+toolCard:
+  new: Nuevo
+search:
+  label: Buscar
+tools:
+  categories:
+    favorite-tools: 'Tus herramientas favoritas'
+    crypto: Crypto
+    converter: Converter
+    web: Web
+    images and videos: 'Images & Videos'
+    development: Development
+    network: Network
+    math: Math
+    measurement: Measurement
+    text: Text
+    data: Data

locales/pt.yml

@@ -0,0 +1,71 @@
+home:
+  categories:
+    newestTools: 'Novas ferramentas'
+    favoriteTools: 'Suas ferramentas favoritas'
+    allTools: 'Todas as ferramentas'
+  subtitle: 'Ferraentas úteis para desenvolvedores'
+  toggleMenu: 'Menu'
+  home: 'Início'
+  uiLib: 'Biblioteca de UI'
+  support: 'Apoie o desenvolvimento do IT Tools'
+  buyMeACoffee: 'Pague-me um café'
+  follow:
+    title: 'Gostou do it-tools?'
+    p1: 'Dê uma estrela no'
+    githubRepository: 'repositório do IT-Tools no GitHub'
+    p2: 'ou siga nossa'
+    twitterAccount: 'conta IT-Tools no Twitter'
+    thankYou: 'Obrigado !'
+  nav:
+    github: 'Repositório no GitHub'
+    githubRepository: 'repositório do IT-Tools no GitHub'
+    twitter: 'Conta no Twitter'
+    twitterAccount: 'conta do IT Tools no Twitter'
+    about: 'Sobre o IT-Tools'
+    aboutLabel: 'Sobre'
+    darkMode: 'Modo Escuro'
+    lightMode: 'Modo Claro'
+    mode: 'Trocar modo escuro/claro'
+about:
+  content: >
+    # Sobre o IT-Tools
+
+    Este site maravilhoso, feito com ❤ por [Corentin Thomasset](https://github.com/CorentinTh), junta ferramentas úteis para desenvolvedores e outras pessoas que trabalham com TI. Se você achar o site útil, fique à vontade para compartilhar com quem também possa gostar e não esqueça de salvar o bookmark na sua barra de atalhos!
+
+    O IT Tools é código aberto (sob a licença MIT), é gratuito, e sempre será, mas custa dinheiro para hospedar e renovar o domínio. Se quiser apoiar meu trabalho e me encorajar a adicionar mais ferramentas, por favor considere [ser patrocinador](https://www.buymeacoffee.com/cthmsst).
+
+    ## Tecnologias
+
+    O IT Tools é feito em Vue.js (Vue 3) com a biblioteca de componentes Naive UI e é hospedado pela Vercel. Bibliotecas de código aberto de terceiros são usadas em algumas ferramentas e você pode encontrar a lista completa no arquivo [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) do repositório.
+
+    ## Achou um bug? Está faltando uma ferramenta?
+
+    Se você precisa de uma ferramenta que ainda não existe aqui e acha que pode ser útil, seu pedido será bem vindo na [seção de issues](https://github.com/CorentinTh/it-tools/issues/new/choose) no repositório do GitHub.
+
+    E se você encontrar um bug ou se algo não funcionar como esperado, por favor registre um relato de bug na [seção de issues](https://github.com/CorentinTh/it-tools/issues/new/choose) no GitHub.
+
+404:
+  notFound: '404 Não Encontrado'
+  sorry: 'Desculpe, parece que essa página não existe'
+  maybe: 'Talvez o cache esteja fazendo bobagem, que tal tentar forçar a atualização?'
+  backHome: 'Voltar para o início'
+favoriteButton:
+  remove: 'Remover dos favoritos'
+  add: 'Adicionar aos favoritos'
+toolCard:
+  new: 'Novo'
+search:
+  label: 'Pesquisar'
+tools:
+  categories:
+    favorite-tools: 'Suas ferramentas favoritas'
+    crypto: 'Cripto'
+    converter: 'Conversores'
+    web: 'Web'
+    images and videos: 'Imagens & Vídeos'
+    development: 'Desenvolvimento'
+    network: 'Rede'
+    math: 'Matemática'
+    measurement: 'Medidas'
+    text: 'Texto'
+    data: 'Dados'

locales/uk.yml

@@ -0,0 +1,71 @@
+home:
+  categories:
+    newestTools: Найновіші інструменти
+    favoriteTools: 'Ваші улюблені інструменти'
+    allTools: 'Усі інструменти'
+  subtitle: 'Зручні інструменти для розробників'
+  toggleMenu: 'Перемикання меню'
+  home: Головна
+  uiLib: 'UI Бібліотека'
+  support: 'Підтримка розробки IT Tools'
+  buyMeACoffee: 'Купи мені каву'
+  follow:
+    title: 'Вам подобаються інструменти IT?'
+    p1: 'Додайте нам зірку на'
+    githubRepository: 'GitHub-репозиторій IT-Tools'
+    p2: 'або слідкуйте за нами на'
+    twitterAccount: 'Твіттер-акаунт IT-Tools'
+    thankYou: 'Дякуємо!'
+  nav:
+    github: 'GitHub-репозиторій'
+    githubRepository: 'GitHub-репозиторій IT-Tools'
+    twitter: 'Твіттер'
+    twitterAccount: 'Твіттер-акаунт IT-Tools'
+    about: 'Про IT-Tools'
+    aboutLabel: 'Про нас'
+    darkMode: 'Темний режим'
+    lightMode: 'Світлий режим'
+    mode: 'Перемикання темного/світлого режиму'
+about:
+  content: >
+    # Про IT-Tools
+
+    Цей чудовий вебсайт, створений з ❤ [Corentin Thomasset](https://github.com/CorentinTh), агрегує корисні інструменти для розробників і людей, які працюють в сфері IT. Якщо вам це корисно, будь ласка, поділіться цим з людьми, які, на вашу думку, також можуть знайти його корисним, і не забудьте додати його до закладок у вашій панелі швидкого доступу!
+
+    IT Tools є відкритим програмним забезпеченням (під ліцензією MIT) і безкоштовним, і завжди буде таким, але мені коштує гроші для хостингу і продовження доменного імені. Якщо ви хочете підтримати мою роботу і підтримати мене у додаванні нових інструментів, розгляньте можливість підтримки, [спонсоруючи мене](https://www.buymeacoffee.com/cthmsst).
+
+    ## Технології
+
+    IT Tools виконаний на Vue.js (Vue 3) з використанням бібліотеки компонентів Naive UI і розгортаний за допомогою Vercel. У деяких інструментах використовуються сторонні відкриті бібліотеки, повний список яких ви можете знайти в файлі [package.json](https://github.com/CorentinTh/it-tools/blob/main/package.json) репозиторію.
+
+    ## Знайшли баг? Відсутній інструмент?
+
+    Якщо вам потрібен інструмент, якого наразі немає тут, і ви вважаєте, що він може бути корисним, ви можете подати запит на додавання функції в [розділі проблем](https://github.com/CorentinTh/it-tools/issues/new/choose) у репозиторії GitHub.
+
+    А якщо ви знайшли баг або щось не працює, як очікувалося, будь ласка, подайте звіт про баг в [розділі проблем](https://github.com/CorentinTh/it-tools/issues/new/choose) у репозиторії GitHub.
+
+404:
+  notFound: '404 Сторінка не знайдена'
+  sorry: 'Вибачте, ця сторінка, схоже, не існує'
+  maybe: 'Можливо, кеш робить хитрощі, спробуйте примусово оновити сторінку?'
+  backHome: 'Повернутися на головну'
+favoriteButton:
+  remove: 'Вилучити з обраних'
+  add: 'Додати до обраних'
+toolCard:
+  new: Новий
+search:
+  label: Пошук
+tools:
+  categories:
+    favorite-tools: 'Ваші улюблені інструменти'
+    crypto: Крипта
+    converter: Конвертер
+    web: Веб
+    images and videos: 'Зображення та відео'
+    development: Розробка
+    network: Мережа
+    math: Математика
+    measurement: Вимірювання
+    text: Текст
+    data: Дані

src/modules/i18n/components/locale-selector.vue

@@ -7,6 +7,7 @@ const localesLong: Record<string, string> = {
   fr: 'Français',
   pt: 'Português',
   ru: 'Русский',
+  uk: 'Українська',
   zh: '中文',
 };
 

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as textToUnicode } from './text-to-unicode';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -76,6 +77,7 @@ import { tool as uuidGenerator } from './uuid-generator';
 import { tool as macAddressLookup } from './mac-address-lookup';
 import { tool as xmlFormatter } from './xml-formatter';
 import { tool as dockerComposeToDockerRunConverter } from './docker-compose-to-docker-run-converter';
+import { tool as yamlViewer } from './yaml-viewer';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -94,6 +96,7 @@ export const toolsByCategory: ToolCategory[] = [
       caseConverter,
       textToNatoAlphabet,
       textToBinary,
+      textToUnicode,
       yamlToJson,
       yamlToToml,
       jsonToYaml,
@@ -141,6 +144,7 @@ export const toolsByCategory: ToolCategory[] = [
       dockerRunToDockerComposeConverter,
       dockerComposeToDockerRunConverter,
       xmlFormatter,
+      yamlViewer,
     ],
   },
   {

src/tools/text-to-unicode/index.ts

@@ -0,0 +1,12 @@
+import { TextWrap } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Text to Unicode',
+  path: '/text-to-unicode',
+  description: 'Parse and convert text to unicode and vice-versa',
+  keywords: ['text', 'to', 'unicode'],
+  component: () => import('./text-to-unicode.vue'),
+  icon: TextWrap,
+  createdAt: new Date('2024-01-31'),
+});

src/tools/text-to-unicode/text-to-unicode.e2e.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Text to Unicode', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/text-to-unicode');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Text to Unicode - IT Tools');
+  });
+
+  test('Text to unicode conversion', async ({ page }) => {
+    await page.getByTestId('text-to-unicode-input').fill('it-tools');
+    const unicode = await page.getByTestId('text-to-unicode-output').inputValue();
+
+    expect(unicode).toEqual('it-tools');
+  });
+
+  test('Unicode to text conversion', async ({ page }) => {
+    await page.getByTestId('unicode-to-text-input').fill('it-tools');
+    const text = await page.getByTestId('unicode-to-text-output').inputValue();
+
+    expect(text).toEqual('it-tools');
+  });
+});

src/tools/text-to-unicode/text-to-unicode.service.test.ts

@@ -0,0 +1,20 @@
+import { describe, expect, it } from 'vitest';
+import { convertTextToUnicode, convertUnicodeToText } from './text-to-unicode.service';
+
+describe('text-to-unicode', () => {
+  describe('convertTextToUnicode', () => {
+    it('a text string is converted to unicode representation', () => {
+      expect(convertTextToUnicode('A')).toBe('A');
+      expect(convertTextToUnicode('linke the string convert to unicode')).toBe('linke the string convert to unicode');
+      expect(convertTextToUnicode('')).toBe('');
+    });
+  });
+
+  describe('convertUnicodeToText', () => {
+    it('an unicode string is converted to its text representation', () => {
+      expect(convertUnicodeToText('A')).toBe('A');
+      expect(convertUnicodeToText('linke the string convert to unicode')).toBe('linke the string convert to unicode');
+      expect(convertUnicodeToText('')).toBe('');
+    });
+  });
+});

src/tools/text-to-unicode/text-to-unicode.service.ts

@@ -0,0 +1,9 @@
+function convertTextToUnicode(text: string): string {
+  return text.split('').map(value => `&#${value.charCodeAt(0)};`).join('');
+}
+
+function convertUnicodeToText(unicodeStr: string): string {
+  return unicodeStr.replace(/&#(\d+);/g, (match, dec) => String.fromCharCode(dec));
+}
+
+export { convertTextToUnicode, convertUnicodeToText };

src/tools/text-to-unicode/text-to-unicode.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { convertTextToUnicode, convertUnicodeToText } from './text-to-unicode.service';
+import { useCopy } from '@/composable/copy';
+
+const inputText = ref('');
+const unicodeFromText = computed(() => inputText.value.trim() === '' ? '' : convertTextToUnicode(inputText.value));
+const { copy: copyUnicode } = useCopy({ source: unicodeFromText });
+
+const inputUnicode = ref('');
+const textFromUnicode = computed(() => inputUnicode.value.trim() === '' ? '' : convertUnicodeToText(inputUnicode.value));
+const { copy: copyText } = useCopy({ source: textFromUnicode });
+</script>
+
+<template>
+  <c-card title="Text to Unicode">
+    <c-input-text v-model:value="inputText" multiline placeholder="e.g. 'Hello Avengers'" label="Enter text to convert to binary" autosize autofocus raw-text test-id="text-to-unicode-input" />
+    <c-input-text v-model:value="unicodeFromText" label="Unicode from your text" multiline raw-text readonly mt-2 placeholder="The unicode representation of your text will be here" test-id="text-to-unicode-output" />
+    <div mt-2 flex justify-center>
+      <c-button :disabled="!unicodeFromText" @click="copyUnicode()">
+        Copy binary to clipboard
+      </c-button>
+    </div>
+  </c-card>
+
+  <c-card title="Unicode to Text">
+    <c-input-text v-model:value="inputUnicode" multiline placeholder="Input Unicode" label="Enter unicode to convert to text" autosize raw-text test-id="unicode-to-text-input" />
+    <c-input-text v-model:value="textFromUnicode" label="Text from your Unicode" multiline raw-text readonly mt-2 placeholder="The text representation of your unicode will be here" test-id="unicode-to-text-output" />
+    <div mt-2 flex justify-center>
+      <c-button :disabled="!textFromUnicode" @click="copyText()">
+        Copy text to clipboard
+      </c-button>
+    </div>
+  </c-card>
+</template>

src/tools/token-generator/locales/es.yaml

@@ -0,0 +1,15 @@
+tools:
+  token-generator:
+    title: Token generator
+    description: Genera una cadena aleatoria con los caracteres que desees, letras mayúsculas o minúsculas, números y/o símbolos.
+
+    uppercase: Mayúsculas (ABC...)
+    lowercase: Minúsculas (abc...)
+    numbers: Números (123...)
+    symbols: Símbolos (!-;...)
+    length: Longitud
+    tokenPlaceholder: 'The token...'
+    copied: Token copiado al portapapeles
+    button:
+      copy: Copiar
+      refresh: Actualizar

src/tools/yaml-viewer/index.ts

@@ -0,0 +1,12 @@
+import { AlignJustified } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'YAML prettify and format',
+  path: '/yaml-prettify',
+  description: 'Prettify your YAML string to a human friendly readable format.',
+  keywords: ['yaml', 'viewer', 'prettify', 'format'],
+  component: () => import('./yaml-viewer.vue'),
+  icon: AlignJustified,
+  createdAt: new Date('2024-01-31'),
+});

src/tools/yaml-viewer/yaml-models.ts

@@ -0,0 +1,24 @@
+import { type MaybeRef, get } from '@vueuse/core';
+
+import yaml from 'yaml';
+
+export { formatYaml };
+
+function formatYaml({
+  rawYaml,
+  sortKeys = false,
+  indentSize = 2,
+}: {
+  rawYaml: MaybeRef<string>
+  sortKeys?: MaybeRef<boolean>
+  indentSize?: MaybeRef<number>
+}) {
+  const parsedYaml = yaml.parse(get(rawYaml));
+
+  const formattedYAML = yaml.stringify(parsedYaml, {
+    sortMapEntries: get(sortKeys),
+    indent: get(indentSize),
+  });
+
+  return formattedYAML;
+}

src/tools/yaml-viewer/yaml-viewer.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import yaml from 'yaml';
+import { useStorage } from '@vueuse/core';
+import { formatYaml } from './yaml-models';
+import { withDefaultOnError } from '@/utils/defaults';
+import { useValidation } from '@/composable/validation';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputElement = ref<HTMLElement>();
+
+const rawYaml = useStorage('yaml-prettify:raw-yaml', '');
+const indentSize = useStorage('yaml-prettify:indent-size', 2);
+const sortKeys = useStorage('yaml-prettify:sort-keys', false);
+
+const cleanYaml = computed(() => withDefaultOnError(() => formatYaml({ rawYaml, indentSize, sortKeys }), ''));
+
+const rawYamlValidation = useValidation({
+  source: rawYaml,
+  rules: [
+    {
+      validator: v => v === '' || yaml.parse(v),
+      message: 'Provided YAML is not valid.',
+    },
+  ],
+});
+</script>
+
+<template>
+  <div style="flex: 0 0 100%">
+    <div style="margin: 0 auto; max-width: 600px" flex justify-center gap-3>
+      <n-form-item label="Sort keys :" label-placement="left" label-width="100">
+        <n-switch v-model:value="sortKeys" />
+      </n-form-item>
+      <n-form-item label="Indent size :" label-placement="left" label-width="100" :show-feedback="false">
+        <n-input-number v-model:value="indentSize" min="1" max="10" style="width: 100px" />
+      </n-form-item>
+    </div>
+  </div>
+
+  <n-form-item
+    label="Your raw YAML"
+    :feedback="rawYamlValidation.message"
+    :validation-status="rawYamlValidation.status"
+  >
+    <c-input-text
+      ref="inputElement"
+      v-model:value="rawYaml"
+      placeholder="Paste your raw YAML here..."
+      rows="20"
+      multiline
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck="false"
+      monospace
+    />
+  </n-form-item>
+  <n-form-item label="Prettified version of your YAML">
+    <TextareaCopyable :value="cleanYaml" language="yaml" :follow-height-of="inputElement" />
+  </n-form-item>
+</template>
+
+<style lang="less" scoped>
+.result-card {
+  position: relative;
+  .copy-button {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+  }
+}
+</style>