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

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

Author: sharevb

package.json

@@ -157,6 +157,7 @@
     "figlet": "^1.7.0",
     "figue": "^1.2.0",
     "flatten-anything": "^4.0.1",
+    "file-type": "^19.0.0",
     "fuse.js": "^6.6.2",
     "hash-wasm": "^4.11.0",
     "generate-schema": "^2.6.0",

pnpm-lock.yaml

@@ -0,0 +1,76 @@
+<script setup lang="ts">
+import type { FileTypeResult } from 'file-type';
+import { fileTypeFromBuffer } from 'file-type';
+import InputCopyable from '../../components/InputCopyable.vue';
+
+const status = ref<'idle' | 'done' | 'error' | 'processing'>('idle');
+const file = ref<File | null>(null);
+const type = ref<FileTypeResult | undefined>(undefined);
+
+async function onFileUploaded(uploadedFile: File) {
+  file.value = uploadedFile;
+  const fileBuffer = await uploadedFile.arrayBuffer();
+
+  status.value = 'processing';
+  try {
+    type.value = await fileTypeFromBuffer(new Uint8Array(fileBuffer.slice(0, 4096)));
+    status.value = 'done';
+  }
+  catch (e) {
+    status.value = 'error';
+  }
+}
+</script>
+
+<template>
+  <div>
+    <div style="flex: 0 0 100%" mb-3>
+      <div mx-auto max-w-600px>
+        <c-file-upload
+          title="Drag and drop a file here, or click to select a file"
+          @file-upload="onFileUploaded"
+        />
+      </div>
+    </div>
+
+    <div mt-3 flex justify-center>
+      <c-card v-if="status === 'done'" title="Information">
+        <InputCopyable
+          :value="file?.name || ''"
+          label="File name:"
+          label-position="left"
+          label-width="100px"
+          label-align="right"
+          readonly
+          mt-2
+        />
+
+        <InputCopyable
+          :value="type?.ext || '<unknown>'"
+          label="Extension:"
+          label-position="left"
+          label-width="100px"
+          label-align="right"
+          readonly
+          mt-2
+        />
+        <InputCopyable
+          :value="type?.mime || '<unknown>'"
+          label="MIME Type:"
+          label-position="left"
+          label-width="100px"
+          label-align="right"
+          readonly
+          mt-2
+        />
+      </c-card>
+      <c-alert v-if="status === 'error'" type="error">
+        An error occured processing {{ file?.name }}.
+      </c-alert>
+      <n-spin
+        v-if="status === 'processing'"
+        size="small"
+      />
+    </div>
+  </div>
+</template>

src/tools/file-type/file-type.vue

@@ -0,0 +1,12 @@
+import { File } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'File Type Detector',
+  path: '/file-type',
+  description: 'Identify the type of a file',
+  keywords: ['file', 'type', 'identify', 'detector'],
+  component: () => import('./file-type.vue'),
+  icon: File,
+  createdAt: new Date('2024-04-20'),
+});

src/tools/file-type/index.ts

@@ -112,6 +112,7 @@ import { tool as dockerRunToKubernetesConverter } from './docker-run-to-kubernet
 import { tool as dockerComposeValidator } from './docker-compose-validator';
 import { tool as ecdsaKeyPairGenerator } from './ecdsa-key-pair-generator';
 import { tool as ed25519KeyPairGenerator } from './ed25519-key-pair-generator';
+import { tool as fileType } from './file-type';
 import { tool as pdfSignatureChecker } from './pdf-signature-checker';
 import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
@@ -383,6 +384,7 @@ export const toolsByCategory: ToolCategory[] = [
       regexMemo,
       stacktracePrettier,
       xpathTester,
+      fileType,
     ],
   },
   {