Add yaml formatter tool

package.json

@@ -26,7 +26,8 @@
     "tailwindcss": "^3.4.14",
     "vue": "^3.5.12",
     "vue-axios": "^3.5.2",
-    "vue-router": "^4.4.5"
+    "vue-router": "^4.4.5",
+    "yaml": "^2.6.0"
   },
   "devDependencies": {
     "@rushstack/eslint-patch": "^1.10.4",

src/router/index.js

@@ -112,17 +112,26 @@ const router = createRouter({
     },
 
     /**
-     * JSON manipulation
+     * JSON
      */
     {
       path: "/json_formatter",
       name: "json_formatter",
-      component: () => import("../views/json/JSONFormatter.vue"),
+      component: () => import("../views/json/Formatter.vue"),
     },
     {
       path: "/json_minifier",
       name: "json_minifier",
-      component: () => import("../views/json/JSONMinifier.vue"),
+      component: () => import("../views/json/Minifier.vue"),
+    },
+
+    /**
+     * YAML
+     */
+    {
+      path: "/yaml_formatter",
+      name: "yaml_formatter",
+      component: () => import("../views/yaml/Formatter.vue"),
     },
 
     /**

src/stores/toolsStore.js

@@ -38,6 +38,9 @@ export const useToolsStore = defineStore("tools", {
         json_minifier: "JSON minifier",
         json_formatter: "JSON formatter",
       },
+      YAML: {
+        yaml_formatter: "YAML formatter",
+      },
       PHP: {
         str_to_php_array: "Str to PHP array",
         php_array_to_json: "PHP array to Json",

src/views/yaml/Formatter.vue

@@ -0,0 +1,157 @@
+<template>
+  <h2 class="tool-title">YAML formatter</h2>
+  <hr class="mt-5 mb-5" />
+
+  <div class="input-group">
+    <label for="data">Data</label>
+    <textarea id="data" v-model="toolData.data" v-on:keyup="result"></textarea>
+  </div>
+
+  <div class="input-group">
+    <label>Sort</label>
+
+    <div>
+      <input
+        id="sort_alphabetically"
+        value="alphabetically"
+        name="sort"
+        v-model="toolData.sort"
+        v-on:change="result"
+        type="radio"
+      />
+      <label for="sort_alphabetically"> alphabetically</label><br />
+      <input
+        id="sort_docker_compose"
+        value="docker_compose"
+        name="sort"
+        v-model="toolData.sort"
+        v-on:change="result"
+        type="radio"
+      />
+      <label for="sort_docker_compose"> docker-compose</label><br />
+      <input
+        id="sort_alphabetically"
+        value="no"
+        name="no"
+        v-model="toolData.sort"
+        v-on:change="result"
+        type="radio"
+      />
+      <label for="sort_alphabetically"> no</label><br />
+    </div>
+  </div>
+
+  <hr class="mt-5 mb-5" />
+
+  <div class="input-group">
+    <label for="result">Result</label>
+    <MonacoEditor
+      name="result"
+      language="json"
+      :value="toolResult"
+    ></MonacoEditor>
+  </div>
+</template>
+
+<script>
+import MonacoEditor from "@/components/MonacoEditor.vue";
+import { parse, stringify } from "yaml";
+
+const orderFirst = [
+  // root
+  "version",
+  "services",
+
+  // other
+  "labels",
+  "restart",
+  "environment",
+  "ports",
+  "volumes"
+  // ... other keys to appear first
+];
+
+const orderLast = [
+  "image",
+  "container_name",
+  "command"
+  // ... other keys to appear last
+];
+
+function sortMapEntriesForDockerCompose(a, b) {
+  const aFirst = orderFirst.includes(a.key.value);
+  const bFirst = orderFirst.includes(b.key.value);
+  const aLast = orderLast.includes(a.key.value);
+  const bLast = orderLast.includes(b.key.value);
+
+  if (aFirst && !bFirst) {
+    return -1; // a comes first
+  } else if (!aFirst && bFirst) {
+    return 1; // b comes first
+  } else if (aLast && !bLast) {
+    return 1; // b comes first
+  } else if (!aLast && bLast) {
+    return -1; // a comes first
+  } else if (aFirst && bFirst) {
+    // Both in orderFirst, maintain order
+    return orderFirst.indexOf(a.key.value) - orderFirst.indexOf(b.key.value);
+  } else if (aLast && bLast) {
+    // Both in orderLast, maintain order
+    return orderLast.indexOf(a.key.value) - orderLast.indexOf(b.key.value);
+  } else {
+    // Neither in orderFirst nor orderLast, sort alphabetically
+    return a.key.value.localeCompare(b.key.value);
+  }
+}
+
+export default {
+  components: {
+    MonacoEditor,
+  },
+  data() {
+    return {
+      toolData: {
+        data: "",
+        sort: "no",
+      },
+      toolResult: "",
+    };
+  },
+  methods: {
+    result() {
+      if (!this.toolData.data.length) {
+        this.toolResult = "";
+      } else {
+        try {
+          const yaml = parse(this.toolData.data, {
+            sortMapEntries: true,
+          });
+
+          let sorter = false;
+          switch (this.toolData.sort) {
+            case "alphabetically":
+              sorter = true;
+              break;
+            case "docker_compose":
+              sorter = sortMapEntriesForDockerCompose;
+              break;
+          }
+
+          this.toolResult = stringify(yaml, {
+            singleQuote: false,
+            lineWidth: 0,
+            indent: 2,
+            indentSeq: true,
+            sortMapEntries: sorter,
+          });
+        } catch (e) {
+          console.log(e)
+          this.toolResult = "invalid syntax";
+        }
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss"></style>