feat(new-tool): mime type to extension converter

src/themes.ts

@@ -30,4 +30,9 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
     color: '#1e1e1e',
     borderColor: 'transparent',
   },
+
+  Table: {
+    tdColor: '#1e1e1e',
+    thColor: '#353535',
+  },
 };

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { LockOpen } from '@vicons/tabler';
 import type { ToolCategory } from './tool';
 
+import { tool as mimeTypes } from './mime-types';
 import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
@@ -65,6 +66,7 @@ export const toolsByCategory: ToolCategory[] = [
       basicAuthGenerator,
       metaTagGenerator,
       otpCodeGeneratorAndValidator,
+      mimeTypes,
     ],
   },
   {

src/tools/mime-types/index.ts

@@ -0,0 +1,11 @@
+import { World } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'Mime types',
+  path: '/mime-types',
+  description: 'Convert mime types to extensions and vice-versa.',
+  keywords: ['mime', 'types', 'extension', 'content', 'type'],
+  component: () => import('./mime-types.vue'),
+  icon: World,
+});

src/tools/mime-types/mime-types.vue

@@ -0,0 +1,99 @@
+<template>
+  <n-card>
+    <n-h2 style="margin-bottom: 0">Mime type to extension</n-h2>
+    <div style="opacity: 0.8">Now witch file extensions are associated to a mime-type</div>
+    <n-form-item>
+      <n-select
+        v-model:value="selectedMimeType"
+        filterable
+        :options="mimeToExtensionsOptions"
+        size="large"
+        placeholder="Select your mimetype here... (ex: application/pdf)"
+      />
+    </n-form-item>
+
+    <div v-if="extensionsFound.length > 0">
+      Extensions of files with the <n-tag round :bordered="false">{{ selectedMimeType }}</n-tag> mime-type:
+      <div style="margin-top: 10px">
+        <n-tag
+          v-for="extension of extensionsFound"
+          :key="extension"
+          round
+          :bordered="false"
+          type="primary"
+          style="margin-right: 10px"
+        >
+          .{{ extension }}
+        </n-tag>
+      </div>
+    </div>
+  </n-card>
+
+  <n-card>
+    <n-h2 style="margin-bottom: 0">File extension to mime type</n-h2>
+    <div style="opacity: 0.8">Now witch mime type is associated to a file extension</div>
+    <n-form-item>
+      <n-select
+        v-model:value="selectedExtension"
+        filterable
+        :options="extensionToMimeTypeOptions"
+        size="large"
+        placeholder="Select your mimetype here... (ex: application/pdf)"
+      />
+    </n-form-item>
+
+    <div v-if="selectedExtension">
+      Mime type associated to the extension <n-tag round :bordered="false">{{ selectedExtension }}</n-tag> file
+      extension:
+      <div style="margin-top: 10px">
+        <n-tag round :bordered="false" type="primary" style="margin-right: 10px">
+          {{ mimeTypeFound }}
+        </n-tag>
+      </div>
+    </div>
+  </n-card>
+
+  <div>
+    <n-table>
+      <thead>
+        <tr>
+          <th>Mime types</th>
+          <th>Extensions</th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-for="{ mimeType, extensions } of mimeInfos" :key="mimeType">
+          <td>{{ mimeType }}</td>
+          <td>
+            <n-tag v-for="extension of extensions" :key="extension" round :bordered="false" style="margin-right: 10px">
+              .{{ extension }}
+            </n-tag>
+          </td>
+        </tr>
+      </tbody>
+    </n-table>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { types as extensionToMimeType, extensions as mimeTypeToExtension } from 'mime-types';
+import { computed, ref } from 'vue';
+
+const mimeInfos = Object.entries(mimeTypeToExtension).map(([mimeType, extensions]) => ({ mimeType, extensions }));
+
+const mimeToExtensionsOptions = Object.keys(mimeTypeToExtension).map((label) => ({ label, value: label }));
+const selectedMimeType = ref(undefined);
+
+const extensionsFound = computed(() => (selectedMimeType.value ? mimeTypeToExtension[selectedMimeType.value] : []));
+
+const extensionToMimeTypeOptions = Object.keys(extensionToMimeType).map((label) => {
+  const extension = `.${label}`;
+
+  return { label: extension, value: label };
+});
+const selectedExtension = ref(undefined);
+
+const mimeTypeFound = computed(() => (selectedExtension.value ? extensionToMimeType[selectedExtension.value] : []));
+</script>
+
+<style lang="less" scoped></style>