Merge branch 'feat/hex-file-converter' into chore/all-my-stuffs

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

Author: sharevb

pnpm-lock.yaml

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import { Buffer } from 'node:buffer';
+import type { Ref } from 'vue';
+import { useCopy } from '@/composable/copy';
+import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+
+const fileName = ref('');
+const fileExtension = ref('');
+const hexInput = ref('');
+const base64Input = computed(() => {
+  const hexString = hexInput.value?.replace(/^(?:0x|&H|\\x)/gi, '').replace(/[^\da-f]/gi, '');
+  try {
+    return `data:application/octet-stream;base64,${Buffer.from(hexString, 'hex').toString('base64')}`;
+  }
+  catch {
+    return '';
+  }
+});
+const { download } = useDownloadFileFromBase64(
+  {
+    source: base64Input,
+    filename: fileName,
+    extension: fileExtension,
+  });
+
+function downloadFile() {
+  try {
+    download();
+  }
+  catch (_) {
+    //
+  }
+}
+
+function buf2hex(buffer: ArrayBuffer, separator: string): string {
+  return [...new Uint8Array(buffer)]
+    .map(x => x.toString(16).padStart(2, '0'))
+    .join(separator);
+}
+
+async function ReadFileAsHex(file: File, separator: string = ' '): Promise<string> {
+  return new Promise<string>((resolve, reject) => {
+    const reader = new FileReader();
+    reader.onload = () => {
+      resolve(buf2hex(reader.result as ArrayBuffer, separator));
+    };
+    reader.onerror = () => reject(reader.error?.toString());
+    reader.readAsArrayBuffer(file);
+  });
+}
+
+const separator = useStorage('hex-converter:sep', ' ');
+const fileInput = ref() as Ref<File>;
+const prefix = useStorage('hex-converter:prefix', '');
+const fileHex = computedAsync(async () => {
+  const file = fileInput.value;
+  const sep = separator.value;
+  const pref = prefix.value;
+
+  return pref + await ReadFileAsHex(file, sep);
+});
+const { copy: copyFileHex } = useCopy({ source: fileHex, text: 'Hex string copied to the clipboard' });
+
+function onUpload(file: File) {
+  if (file) {
+    fileInput.value = file;
+  }
+}
+</script>
+
+<template>
+  <c-card title="HEX to file">
+    <n-grid cols="3" x-gap="12">
+      <n-gi span="2">
+        <c-input-text
+          v-model:value="fileName"
+          label="File Name"
+          placeholder="Download filename"
+          mb-2
+        />
+      </n-gi>
+      <n-gi>
+        <c-input-text
+          v-model:value="fileExtension"
+          label="Extension"
+          placeholder="Extension"
+        />
+      </n-gi>
+    </n-grid>
+
+    <n-form-item label="Content in Hex">
+      <c-input-text
+        v-model:value="hexInput"
+        multiline
+        placeholder="Put your Hex file string here..."
+        rows="5"
+      />
+    </n-form-item>
+
+    <n-divider />
+
+    <div flex justify-center>
+      <c-button :disabled="hexInput === ''" @click="downloadFile()">
+        Download file
+      </c-button>
+    </div>
+  </c-card>
+
+  <c-card title="File to HEX">
+    <c-file-upload
+      title="Drag and drop a file here, or click to select a file"
+      mb-2
+      @file-upload="onUpload"
+    />
+
+    <c-input-text
+      v-model:value="separator"
+      label="Separator"
+      label-position="left"
+      placeholder="Separator"
+      mb-2
+    />
+
+    <c-input-text
+      v-model:value="prefix"
+      label="Prefix"
+      label-position="left"
+      placeholder="Enter a prefix (ie, 0x, &H or empty)"
+      mb-2
+    />
+
+    <n-divider />
+
+    <n-form-item label="File in Hex">
+      <c-input-text
+        :value="fileHex"
+        multiline readonly
+        placeholder="File in hex will be here"
+        rows="5" mb-2
+      />
+    </n-form-item>
+
+    <div flex justify-center>
+      <c-button @click="copyFileHex()">
+        Copy
+      </c-button>
+    </div>
+  </c-card>
+</template>
+
+<style lang="less" scoped>
+::v-deep(.n-upload-trigger) {
+  width: 100%;
+}
+</style>

src/tools/hex-file-converter/hex-file-converter.vue

@@ -0,0 +1,12 @@
+import { FileDigit } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'HEX File Converter',
+  path: '/hex-file-converter',
+  description: 'Convert between file and hexadecimal representation',
+  keywords: ['hex', 'file', 'converter'],
+  component: () => import('./hex-file-converter.vue'),
+  icon: FileDigit,
+  createdAt: new Date('2024-08-15'),
+});

src/tools/hex-file-converter/index.ts

@@ -10,6 +10,7 @@ import { tool as currencyConverter } from './currency-converter';
 import { tool as emailParser } from './email-parser';
 import { tool as outlookParser } from './outlook-parser';
 import { tool as fileHasher } from './file-hasher';
+import { tool as hexFileConverter } from './hex-file-converter';
 
 import { tool as cssXpathConverter } from './css-xpath-converter';
 import { tool as cssSelectorsMemo } from './css-selectors-memo';
@@ -144,6 +145,7 @@ export const toolsByCategory: ToolCategory[] = [
       romanNumeralConverter,
       base64StringConverter,
       base64FileConverter,
+      hexFileConverter,
       colorConverter,
       caseConverter,
       textToNatoAlphabet,

src/tools/index.ts

@@ -16,11 +16,7 @@ import { VitePWA } from 'vite-plugin-pwa';
 import markdown from 'vite-plugin-vue-markdown';
 import svgLoader from 'vite-svg-loader';
 import { configDefaults } from 'vitest/config';
-<<<<<<< HEAD
 import topLevelAwait from "vite-plugin-top-level-await";
-=======
-import { nodePolyfills } from 'vite-plugin-node-polyfills';
->>>>>>> feat/email-parser
 
 const baseUrl = process.env.BASE_URL ?? '/';
 
@@ -104,15 +100,12 @@ export default defineConfig({
     }),
     Unocss(),
     nodePolyfills(),
-<<<<<<< HEAD
     topLevelAwait({
       // The export name of top-level await promise for each chunk module
       promiseExportName: '__tla',
       // The function to generate import names of top-level await promise in each chunk module
       promiseImportName: i => `__tla_${i}`,
     }),
-=======
->>>>>>> feat/email-parser
   ],
   base: baseUrl,
   resolve: {