validating if yaml is correct and collecting format options

components.d.ts

@@ -213,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']
   }
 }

package.json

@@ -62,6 +62,7 @@
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "js-yaml": "^4.1.0",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",

pnpm-lock.yaml

@@ -86,6 +86,9 @@ dependencies:
   ibantools:
     specifier: ^4.3.3
     version: 4.3.3
+  js-yaml:
+    specifier: ^4.1.0
+    version: 4.1.0
   json5:
     specifier: ^2.2.3
     version: 2.2.3
@@ -6520,7 +6523,6 @@ packages:
     hasBin: true
     dependencies:
       argparse: 2.0.1
-    dev: true
 
   /jsbn@1.1.0:
     resolution: {integrity: sha512-4bYVV3aAMtDTTu4+xsDYa6sy9GyJ69/amsu9sYF2zqjiEoZA5xJi3BrfX3uY+/IekIu7MwdObdbDWpoZdBv3/A==}

src/tools/index.ts

@@ -75,6 +75,7 @@ import { tool as urlParser } from './url-parser';
 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 yamlViewer } from './yaml-viewer';
 
 export const toolsByCategory: ToolCategory[] = [
   {
@@ -139,6 +140,7 @@ export const toolsByCategory: ToolCategory[] = [
       chmodCalculator,
       dockerRunToDockerComposeConverter,
       xmlFormatter,
+      yamlViewer
     ],
   },
   {

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,
+    redirectFrom: ['/yaml-viewer'],
+});

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

@@ -0,0 +1,37 @@
+import { type MaybeRef, get } from '@vueuse/core';
+import JSON5 from 'json5';
+
+export { sortObjectKeys, formatYaml };
+
+function sortObjectKeys<T>(obj: T): T {
+    if (typeof obj !== 'object' || obj === null) {
+        return obj;
+    }
+
+    if (Array.isArray(obj)) {
+        return obj.map(sortObjectKeys) as unknown as T;
+    }
+
+    return Object.keys(obj)
+        .sort((a, b) => a.localeCompare(b))
+        .reduce((sortedObj, key) => {
+            sortedObj[key] = sortObjectKeys((obj as Record<string, unknown>)[key]);
+            return sortedObj;
+        }, {} as Record<string, unknown>) as T;
+}
+
+function formatYaml({
+                        rawYaml,
+                        sortKeys = false,
+                        stripComments = false,
+                        indentSize = 3,
+                    }: {
+    rawYaml: MaybeRef<string>
+    sortKeys?: MaybeRef<boolean>
+    stripComments?: MaybeRef<boolean>
+    indentSize?: MaybeRef<number>
+}) {
+    const parsedObject = JSON5.parse(get(rawYaml));
+
+    return JSON.stringify(get(sortKeys) ? sortObjectKeys(parsedObject) : parsedObject, null, get(indentSize));
+}

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

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import yaml from 'js-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 stripComments = useStorage('yaml-prettify:strip-comments', false);
+
+const cleanYaml = computed(() => withDefaultOnError(() => formatYaml({ rawYaml: rawYaml, indentSize, sortKeys, stripComments }), ''));
+
+const rawYamlValidation = useValidation({
+  source: rawYaml,
+  rules: [
+    {
+      validator: v => v === '' || yaml.load(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="Strip comments :" label-placement="left" label-width="125">
+        <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="0" 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="json" :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>