Merge branch 'feat/web-prettiers' into chore/all-my-stuffs

# Conflicts:
#	package.json
#	pnpm-lock.yaml
#	src/tools/index.ts

Author: sharevb

package.json

@@ -106,6 +106,7 @@
     "@types/libmime": "^5.0.3",
     "@types/emscripten": "^1.39.10",
     "@types/spdx-satisfies": "^0.1.2",
+    "@types/js-beautify": "^1.14.3",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.11.1",
@@ -225,6 +226,7 @@
     "is-ip": "^5.0.1",
     "isbn3": "^1.1.44",
     "js-base64": "^3.7.7",
+    "js-beautify": "^1.15.1",
     "json5": "^2.2.3",
     "jsonpath": "^1.1.1",
     "jsonar-mod": "^1.9.0",

pnpm-lock.yaml

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import beautify from 'js-beautify';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputCSS = ref('');
+const outputCSS = computed(() => {
+  return beautify.css(inputCSS.value, {
+    indent_char: ' ',
+    indent_size: 2,
+    eol: '\n',
+  });
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputCSS"
+      multiline raw-text
+      placeholder="Your CSS content..."
+      rows="8"
+      autofocus
+      label="Your CSS to format (can paste from clipboard):"
+    />
+
+    <n-divider />
+
+    <n-form-item label="Output prettified CSS:">
+      <TextareaCopyable
+        :value="outputCSS"
+        multiline
+        language="css"
+        word-wrap
+      />
+    </n-form-item>
+  </div>
+</template>

src/tools/css-prettifier/css-prettifier.vue

@@ -0,0 +1,12 @@
+import { BrandCss3 } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Css prettifier',
+  path: '/css-prettifier',
+  description: 'CSS Prettify',
+  keywords: ['css', 'prettifier', 'beautify', 'prettier', 'format'],
+  component: () => import('./css-prettifier.vue'),
+  icon: BrandCss3,
+  createdAt: new Date('2024-03-15'),
+});

src/tools/css-prettifier/index.ts

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import beautify from 'js-beautify';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputHtml = ref('');
+const outputHtml = computed(() => {
+  return beautify.html(inputHtml.value, {
+    unformatted: ['code', 'pre', 'em', 'strong', 'span'],
+    indent_inner_html: true,
+    indent_char: ' ',
+    indent_size: 2,
+    eol: '\n',
+  });
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputHtml"
+      multiline raw-text
+      placeholder="Your HTML content..."
+      rows="8"
+      autofocus
+      label="Your HTML to format (can paste from clipboard):"
+      paste-html
+    />
+
+    <n-divider />
+
+    <n-form-item label="Output prettified HTML:">
+      <TextareaCopyable
+        :value="outputHtml"
+        multiline
+        language="html"
+        :word-wrap="true"
+      />
+    </n-form-item>
+  </div>
+</template>

src/tools/html-prettifier/html-prettifier.vue

@@ -0,0 +1,12 @@
+import { BrandHtml5 } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Html Prettifier',
+  path: '/html-prettifier',
+  description: 'Prettify HTML code',
+  keywords: ['html', 'prettifier', 'beautify', 'prettier', 'format'],
+  component: () => import('./html-prettifier.vue'),
+  icon: BrandHtml5,
+  createdAt: new Date('2024-03-15'),
+});

src/tools/html-prettifier/index.ts

@@ -136,6 +136,9 @@ import { tool as urlCleaner } from './url-cleaner';
 import { tool as urlFanger } from './url-fanger';
 import { tool as urlTextFragmentMaker } from './url-text-fragment-maker';
 import { tool as utmUrlGenerator } from './utm-url-generator';
+import { tool as javascriptPrettifier } from './javascript-prettifier';
+import { tool as cssPrettifier } from './css-prettifier';
+import { tool as htmlPrettifier } from './html-prettifier';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -446,6 +449,9 @@ export const toolsByCategory: ToolCategory[] = [
     components: [
       gitMemo,
       nanoMemo,
+      cssPrettifier,
+      htmlPrettifier,
+      javascriptPrettifier,
     ],
   },
   {

src/tools/index.ts

@@ -0,0 +1,12 @@
+import { BrandJavascript } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Javascript Prettifier',
+  path: '/javascript-prettifier',
+  description: 'JS/Javascript Prettifier',
+  keywords: ['javascript', 'prettifier', 'beautify', 'prettier', 'format'],
+  component: () => import('./javascript-prettifier.vue'),
+  icon: BrandJavascript,
+  createdAt: new Date('2024-03-15'),
+});

src/tools/javascript-prettifier/index.ts

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import beautify from 'js-beautify';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const inputJS = ref('');
+const outputJS = computed(() => {
+  return beautify(inputJS.value, {
+    indent_char: ' ',
+    indent_size: 2,
+    eol: '\n',
+  });
+});
+</script>
+
+<template>
+  <div>
+    <c-input-text
+      v-model:value="inputJS"
+      multiline raw-text
+      placeholder="Your JS content..."
+      rows="8"
+      autofocus
+      label="Your JS to format (can paste from clipboard):"
+    />
+
+    <n-divider />
+
+    <n-form-item label="Output prettified JS:">
+      <TextareaCopyable
+        :value="outputJS"
+        multiline
+        language="javascript"
+        word-wrap
+      />
+    </n-form-item>
+  </div>
+</template>