feat(new tool): MIME Encoder/Decoder

Fix #408

components.d.ts

@@ -125,26 +125,20 @@ declare module '@vue/runtime-core' {
     MenuIconItem: typeof import('./src/components/MenuIconItem.vue')['default']
     MenuLayout: typeof import('./src/components/MenuLayout.vue')['default']
     MetaTagGenerator: typeof import('./src/tools/meta-tag-generator/meta-tag-generator.vue')['default']
+    MimeConverter: typeof import('./src/tools/mime-converter/mime-converter.vue')['default']
     MimeTypes: typeof import('./src/tools/mime-types/mime-types.vue')['default']
     NavbarButtons: typeof import('./src/components/NavbarButtons.vue')['default']
     NCode: typeof import('naive-ui')['NCode']
     NCollapseTransition: typeof import('naive-ui')['NCollapseTransition']
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
-    NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
-    NFormItem: typeof import('naive-ui')['NFormItem']
-    NGi: typeof import('naive-ui')['NGi']
-    NGrid: typeof import('naive-ui')['NGrid']
     NH1: typeof import('naive-ui')['NH1']
     NH3: typeof import('naive-ui')['NH3']
     NIcon: typeof import('naive-ui')['NIcon']
-    NInputNumber: typeof import('naive-ui')['NInputNumber']
-    NLabel: typeof import('naive-ui')['NLabel']
     NLayout: typeof import('naive-ui')['NLayout']
     NLayoutSider: typeof import('naive-ui')['NLayoutSider']
     NMenu: typeof import('naive-ui')['NMenu']
     NScrollbar: typeof import('naive-ui')['NScrollbar']
-    NSpin: typeof import('naive-ui')['NSpin']
     NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']
     PasswordStrengthAnalyser: typeof import('./src/tools/password-strength-analyser/password-strength-analyser.vue')['default']

package.json

@@ -42,6 +42,7 @@
     "@tiptap/starter-kit": "2.1.6",
     "@tiptap/vue-3": "2.0.3",
     "@types/figlet": "^1.5.8",
+    "@types/libmime": "^5.0.3",
     "@vicons/material": "^0.12.0",
     "@vicons/tabler": "^0.12.0",
     "@vueuse/core": "^10.3.0",
@@ -66,6 +67,7 @@
     "ibantools": "^4.3.3",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
+    "libmime": "^5.3.4",
     "libphonenumber-js": "^1.10.28",
     "lodash": "^4.17.21",
     "marked": "^10.0.0",
@@ -131,6 +133,7 @@
     "unplugin-icons": "^0.17.0",
     "unplugin-vue-components": "^0.25.0",
     "vite": "^4.4.9",
+    "vite-plugin-node-polyfills": "^0.21.0",
     "vite-plugin-pwa": "^0.16.0",
     "vite-plugin-vue-markdown": "^0.23.5",
     "vite-svg-loader": "^4.0.0",

src/tools/index.ts

@@ -6,6 +6,7 @@ import { tool as asciiTextDrawer } from './ascii-text-drawer';
 
 import { tool as textToUnicode } from './text-to-unicode';
 
+import { tool as mimeConverter } from './mime-converter';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -107,6 +108,7 @@ export const toolsByCategory: ToolCategory[] = [
       listConverter,
       tomlToJson,
       tomlToYaml,
+      mimeConverter,
     ],
   },
   {

src/tools/mime-converter/index.ts

@@ -0,0 +1,12 @@
+import { Mail } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'MIME Encoding Converter',
+  path: '/mime-converter',
+  description: 'Convert from/to MIME Encoded-Word format (Mail Subject)',
+  keywords: ['mime', 'converter', 'subject', 'rfc2047', 'rfc1341', 'rfc2045'],
+  component: () => import('./mime-converter.vue'),
+  icon: Mail,
+  createdAt: new Date('2024-03-09'),
+});

src/tools/mime-converter/mime-converter.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+import libmime from 'libmime';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const encodedInput = ref('');
+const decodedOutput = computed(() => withDefaultOnError(() => libmime.decodeWords(encodedInput.value), '# invalid encoded value'));
+
+const rawInput = ref('');
+const encodedQOutput = computed(() => withDefaultOnError(() => libmime.encodeWord(rawInput.value, 'Q'), ''));
+const encodedBOutput = computed(() => withDefaultOnError(() => libmime.encodeWord(rawInput.value, 'B'), ''));
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Encode string in Encoded-Word format">
+      <c-input-text
+        v-model:value="rawInput"
+        multiline
+        placeholder="Put your string here..."
+        rows="5"
+        label="String to encode"
+        raw-text
+        mb-5
+      />
+
+      <div>
+        <h3>Quotted Printable encoded string</h3>
+        <TextareaCopyable
+          :value="encodedQOutput"
+          placeholder="The Quotted Printable encoded version of your string will be here"
+          mb-5
+        />
+      </div>
+
+      <div>
+        <h3>Base64 encoded string</h3>
+        <TextareaCopyable
+          :value="encodedBOutput"
+          placeholder="The Base64 encoded version of your string will be here"
+          mb-5
+        />
+      </div>
+    </c-card>
+
+    <c-card title="Decode string in Encoded-Word format">
+      <c-input-text
+        v-model:value="encodedInput"
+        multiline
+        placeholder="Your encoded string..."
+        rows="5"
+        label="Encoded string to decode"
+        mb-5
+      />
+
+      <div>
+        <h3>Decoded string</h3>
+        <TextareaCopyable
+          v-model:value="decodedOutput"
+          placeholder="The decoded string will be here"
+          mb-5
+        />
+      </div>
+    </c-card>
+  </div>
+</template>

vite.config.ts

@@ -11,6 +11,7 @@ import Icons from 'unplugin-icons/vite';
 import { NaiveUiResolver } from 'unplugin-vue-components/resolvers';
 import Components from 'unplugin-vue-components/vite';
 import { defineConfig } from 'vite';
+import { nodePolyfills } from 'vite-plugin-node-polyfills';
 import { VitePWA } from 'vite-plugin-pwa';
 import markdown from 'vite-plugin-vue-markdown';
 import svgLoader from 'vite-svg-loader';
@@ -97,6 +98,7 @@ export default defineConfig({
       resolvers: [NaiveUiResolver(), IconsResolver({ prefix: 'icon' })],
     }),
     Unocss(),
+    nodePolyfills(),
   ],
   base: baseUrl,
   resolve: {