diff --git a/package.json b/package.json index e174aa35..f53ab483 100644 --- a/package.json +++ b/package.json @@ -73,7 +73,8 @@ "ua-parser-js": "^1.0.35", "uuid": "^8.3.2", "vue": "^3.2.47", - "vue-router": "^4.1.6" + "vue-router": "^4.1.6", + "yaml": "^2.2.1" }, "devDependencies": { "@playwright/test": "^1.32.2", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index bbd815d0..d98509a4 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -124,6 +124,9 @@ dependencies: vue-router: specifier: ^4.1.6 version: 4.1.6(vue@3.2.47) + yaml: + specifier: ^2.2.1 + version: 2.2.1 devDependencies: '@playwright/test': @@ -9029,6 +9032,11 @@ packages: resolution: {integrity: sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==} dev: true + /yaml@2.2.1: + resolution: {integrity: sha512-e0WHiYql7+9wr4cWMx3TVQrNwejKaEe7/rHNmQmqRjazfOP5W8PB6Jpebb5o6fIapbz9o9+2ipcaTM2ZwDI6lw==} + engines: {node: '>= 14'} + dev: false + /yamljs@0.3.0: resolution: {integrity: sha512-C/FsVVhht4iPQYXOInoxUM/1ELSf9EsgKH34FofQOp6hwCPrW4vG4w5++TED3xRUo8gD7l0P1J1dLlDYzODsTQ==} hasBin: true diff --git a/src/tools/index.ts b/src/tools/index.ts index c68c20aa..5cb0cdcb 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -1,6 +1,8 @@ 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 yamlToJson } from './yaml-to-json-converter'; +import { tool as jsonToYaml } from './json-to-yaml-converter'; import { tool as ipv6UlaGenerator } from './ipv6-ula-generator'; import { tool as ipv4AddressConverter } from './ipv4-address-converter'; import { tool as benchmarkBuilder } from './benchmark-builder'; @@ -66,6 +68,8 @@ export const toolsByCategory: ToolCategory[] = [ colorConverter, caseConverter, textToNatoAlphabet, + yamlToJson, + jsonToYaml, ], }, { diff --git a/src/tools/json-to-yaml-converter/index.ts b/src/tools/json-to-yaml-converter/index.ts new file mode 100644 index 00000000..9db09d3e --- /dev/null +++ b/src/tools/json-to-yaml-converter/index.ts @@ -0,0 +1,12 @@ +import { Braces } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'JSON to YAML converter', + path: '/json-to-yaml-converter', + description: 'Simply convert JSON to YAML with this live online converter.', + keywords: ['yaml', 'to', 'json'], + component: () => import('./json-to-yaml.vue'), + icon: Braces, + createdAt: new Date('2023-04-10'), +}); diff --git a/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts b/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts new file mode 100644 index 00000000..bce095b6 --- /dev/null +++ b/src/tools/json-to-yaml-converter/json-to-yaml.e2e.spec.ts @@ -0,0 +1,19 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Tool - json to yaml', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/json-to-yaml-converter'); + }); + + test('Has correct title', async ({ page }) => { + await expect(page).toHaveTitle('JSON to YAML converter - IT Tools'); + }); + + test('json is parsed and output clean yaml', async ({ page }) => { + await page.getByTestId('input').fill('{"foo":"bar","list":["item",{"key":"value"}]}'); + + const generatedJson = await page.getByTestId('area-content').innerText(); + + expect(generatedJson.trim()).toEqual(`foo: bar\nlist:\n - item\n - key: value`.trim()); + }); +}); diff --git a/src/tools/json-to-yaml-converter/json-to-yaml.vue b/src/tools/json-to-yaml-converter/json-to-yaml.vue new file mode 100644 index 00000000..f25ef37b --- /dev/null +++ b/src/tools/json-to-yaml-converter/json-to-yaml.vue @@ -0,0 +1,29 @@ + + + + + diff --git a/src/tools/yaml-to-json-converter/index.ts b/src/tools/yaml-to-json-converter/index.ts new file mode 100644 index 00000000..724ecdb7 --- /dev/null +++ b/src/tools/yaml-to-json-converter/index.ts @@ -0,0 +1,12 @@ +import { AlignJustified } from '@vicons/tabler'; +import { defineTool } from '../tool'; + +export const tool = defineTool({ + name: 'YAML to JSON converter', + path: '/yaml-to-json-converter', + description: 'Simply convert YAML to JSON with this live online converter.', + keywords: ['yaml', 'to', 'json'], + component: () => import('./yaml-to-json.vue'), + icon: AlignJustified, + createdAt: new Date('2023-04-10'), +}); diff --git a/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts b/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts new file mode 100644 index 00000000..10db4495 --- /dev/null +++ b/src/tools/yaml-to-json-converter/yaml-to-json.e2e.spec.ts @@ -0,0 +1,31 @@ +import { test, expect } from '@playwright/test'; + +test.describe('Tool - Yaml to json', () => { + test.beforeEach(async ({ page }) => { + await page.goto('/yaml-to-json-converter'); + }); + + test('Has correct title', async ({ page }) => { + await expect(page).toHaveTitle('YAML to JSON converter - IT Tools'); + }); + + test('Yaml is parsed and output clean json', async ({ page }) => { + await page.getByTestId('input').fill('foo: bar\nlist:\n - item\n - key: value'); + + const generatedJson = await page.getByTestId('area-content').innerText(); + + expect(generatedJson.trim()).toEqual( + ` +{ + "foo": "bar", + "list": [ + "item", + { + "key": "value" + } + ] +} + `.trim(), + ); + }); +}); diff --git a/src/tools/yaml-to-json-converter/yaml-to-json.vue b/src/tools/yaml-to-json-converter/yaml-to-json.vue new file mode 100644 index 00000000..c066bdd5 --- /dev/null +++ b/src/tools/yaml-to-json-converter/yaml-to-json.vue @@ -0,0 +1,32 @@ + + + + +