feat(new tool): GZIP String converter

Fix #892

components.d.ts

@@ -81,6 +81,7 @@ declare module '@vue/runtime-core' {
     FormatTransformer: typeof import('./src/components/FormatTransformer.vue')['default']
     GitMemo: typeof import('./src/tools/git-memo/git-memo.vue')['default']
     'GitMemo.content': typeof import('./src/tools/git-memo/git-memo.content.md')['default']
+    GzipConverter: typeof import('./src/tools/gzip-converter/gzip-converter.vue')['default']
     HashText: typeof import('./src/tools/hash-text/hash-text.vue')['default']
     HmacGenerator: typeof import('./src/tools/hmac-generator/hmac-generator.vue')['default']
     'Home.page': typeof import('./src/pages/Home.page.vue')['default']
@@ -130,21 +131,14 @@ declare module '@vue/runtime-core' {
     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

@@ -58,12 +58,14 @@
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.6",
     "emojilib": "^3.0.10",
+    "fflate": "^0.8.2",
     "figlet": "^1.7.0",
     "figue": "^1.2.0",
     "fuse.js": "^6.6.2",
     "highlight.js": "^11.7.0",
     "iarna-toml-esm": "^3.0.5",
     "ibantools": "^4.3.3",
+    "js-base64": "^3.7.7",
     "json5": "^2.2.3",
     "jwt-decode": "^3.1.2",
     "libphonenumber-js": "^1.10.28",

pnpm-lock.yaml

@@ -74,6 +74,9 @@ dependencies:
   emojilib:
     specifier: ^3.0.10
     version: 3.0.10
+  fflate:
+    specifier: ^0.8.2
+    version: 0.8.2
   figlet:
     specifier: ^1.7.0
     version: 1.7.0
@@ -92,6 +95,9 @@ dependencies:
   ibantools:
     specifier: ^4.3.3
     version: 4.3.3
+  js-base64:
+    specifier: ^3.7.7
+    version: 3.7.7
   json5:
     specifier: ^2.2.3
     version: 2.2.3
@@ -3351,7 +3357,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.7.2(vue@3.3.4)
+      '@vueuse/shared': 10.9.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3993,10 +3999,10 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.7.2(vue@3.3.4):
+  /@vueuse/shared@10.9.0(vue@3.3.4):
-    resolution: {integrity: sha512-qFbXoxS44pi2FkgFjPvF4h7c9oMDutpyBdcJdMYIMg9XyXli2meFMuaKn+UMgsClo//Th6+beeCgqweT/79BVA==}
+    resolution: {integrity: sha512-Uud2IWncmAfJvRaFYzv5OHDli+FbOzxiVEQdLCKQKLyhz94PIyFC3CHcH7EDMwIn8NPtD06+PNbC/PiO0LGLtw==}
     dependencies:
-      vue-demi: 0.14.6(vue@3.3.4)
+      vue-demi: 0.14.7(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -5595,6 +5601,10 @@ packages:
       web-streams-polyfill: 3.2.1
     dev: true
 
+  /fflate@0.8.2:
+    resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==}
+    dev: false
+
   /figlet@1.7.0:
     resolution: {integrity: sha512-gO8l3wvqo0V7wEFLXPbkX83b7MVjRrk1oRLfYlZXol8nEpb/ON9pcKLI4qpBv5YtOTfrINtqb7b40iYY2FTWFg==}
     engines: {node: '>= 0.4.0'}
@@ -6472,6 +6482,10 @@ packages:
     hasBin: true
     dev: true
 
+  /js-base64@3.7.7:
+    resolution: {integrity: sha512-7rCnleh0z2CkXhH67J8K1Ytz0b2Y+yxTPL+/KOJoa20hfnVQ/3/T6W/KflYI4bRHRagNeXeU2bkNGI3v1oS/lw==}
+    dev: false
+
   /js-beautify@1.14.6:
     resolution: {integrity: sha512-GfofQY5zDp+cuHc+gsEXKPpNw2KbPddreEo35O6jT6i0RVK6LhsoYBhq5TvK4/n74wnA0QbK8gGd+jUZwTMKJw==}
     engines: {node: '>=10'}
@@ -9151,8 +9165,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.6(vue@3.3.4):
+  /vue-demi@0.14.7(vue@3.3.4):
-    resolution: {integrity: sha512-8QA7wrYSHKaYgUxDA5ZC24w+eHm3sYCbp0EzcDwKqN3p6HqtTCGR/GVsPyZW92unff4UlcSh++lmqDWN3ZIq4w==}
+    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true

src/tools/gzip-converter/gzip-converter.vue

@@ -0,0 +1,80 @@
+<script setup lang="ts">
+import * as fflate from 'fflate';
+import { Base64 } from 'js-base64';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+import { withDefaultOnError } from '@/utils/defaults';
+
+const compressedInput = ref('');
+const decompressedOutput = computed(() => withDefaultOnError(() => {
+  const compressedBuf = Base64.toUint8Array(compressedInput.value);
+  return fflate.strFromU8(fflate.decompressSync(compressedBuf));
+}, '# invalid compressed base64 string'));
+
+const rawInput = ref('');
+const compressedGzipOutput = computed(() => withDefaultOnError(() => Base64.fromUint8Array(fflate.gzipSync(fflate.strToU8(rawInput.value))), ''));
+const compressedDeflateOutput = computed(() => withDefaultOnError(() => Base64.fromUint8Array(fflate.deflateSync(fflate.strToU8(rawInput.value))), ''));
+const compressedZlibOutput = computed(() => withDefaultOnError(() => Base64.fromUint8Array(fflate.zlibSync(fflate.strToU8(rawInput.value))), ''));
+</script>
+
+<template>
+  <div style="max-width: 600px;">
+    <c-card title="Compress string" mb-5>
+      <c-input-text
+        v-model:value="rawInput"
+        multiline
+        placeholder="Put your string here..."
+        rows="5"
+        label="String to compress"
+        raw-text
+        mb-5
+      />
+
+      <div>
+        <h3>GZIP compressed string</h3>
+        <TextareaCopyable
+          :value="compressedGzipOutput"
+          placeholder="The GZip compressed version of your string will be here"
+          mb-5
+        />
+      </div>
+
+      <div>
+        <h3>Zlib compressed string</h3>
+        <TextareaCopyable
+          :value="compressedZlibOutput"
+          placeholder="The Zlib compressed version of your string will be here"
+          mb-5
+        />
+      </div>
+
+      <div>
+        <h3>Deflate compressed string</h3>
+        <TextareaCopyable
+          :value="compressedDeflateOutput"
+          placeholder="The Deflate compressed version of your string will be here"
+          mb-5
+        />
+      </div>
+    </c-card>
+
+    <c-card title="Decompress string">
+      <c-input-text
+        v-model:value="compressedInput"
+        multiline
+        placeholder="Your compressed string..."
+        rows="5"
+        label="Compressed string to decompress"
+        mb-5
+      />
+
+      <div>
+        <h3>Decompressed string</h3>
+        <TextareaCopyable
+          v-model:value="decompressedOutput"
+          placeholder="The decompressed string will be here"
+          mb-5
+        />
+      </div>
+    </c-card>
+  </div>
+</template>

src/tools/gzip-converter/index.ts

@@ -0,0 +1,12 @@
+import { FileZip } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'GZip/Deflate converter',
+  path: '/gzip-converter',
+  description: 'Convert text from/to gzip/deflate',
+  keywords: ['gzip', 'deflate', 'converter'],
+  component: () => import('./gzip-converter.vue'),
+  icon: FileZip,
+  createdAt: new Date('2024-03-09'),
+});

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 gzipConverter } from './gzip-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,
+      gzipConverter,
     ],
   },
   {