From 5d87cf2712f861d59ca3d1314cb4bbcaabe942d3 Mon Sep 17 00:00:00 2001
From: Joel Challis <git@zvecr.com>
Date: Wed, 10 Jul 2024 05:00:10 +0100
Subject: [PATCH] Add back /converter/ page (#1)

---
 src/converter/index.md | 61 ++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 61 insertions(+)
 create mode 100644 src/converter/index.md

diff --git a/src/converter/index.md b/src/converter/index.md
new file mode 100644
index 0000000..a552f36
--- /dev/null
+++ b/src/converter/index.md
@@ -0,0 +1,61 @@
+# Convert KLE raw to QMK info.json
+
+### Input:
+
+<textarea v-model="input"></textarea>
+<button class="VPButton medium brand" id="submit" @click="getData()">Convert</button>
+
+### Output:
+
+<textarea v-model="output"></textarea>
+
+<script setup>
+import { ref } from 'vue'
+
+const input = ref('')
+const output = ref('')
+
+async function getData() {
+    const url = 'https://api.qmk.fm/v1/converters/kle';
+    try {
+        const response = await fetch(url, {
+            method: "POST",
+            headers: {
+                "Content-Type": "application/json",
+            },
+            body: JSON.stringify({raw: input.value})
+        });
+
+        if (!response.ok) {
+            throw new Error(`Response status: ${response.status}`);
+        }
+
+        const ret = await response.text();
+        output.value = ret;
+    } catch (error) {
+        console.error(error.message);
+    }
+}
+</script>
+
+<style scoped>
+textarea {
+    border: 1px solid var(--vp-c-divider);
+    border-radius: 4px;
+    width: 100%;
+    height: 300px;
+}
+
+button {
+    float: right;
+
+    border-radius: 20px;
+    padding: 0 20px;
+    line-height: 38px;
+    font-size: 14px;
+
+    border-color: var(--vp-button-brand-border);
+    color: var(--vp-button-brand-text);
+    background-color: var(--vp-button-brand-bg);
+}
+</style>