Merge remote-tracking branch 'origin/main' into feat/ip-geolocation

src/components/FormatTransformer.vue

@@ -48,7 +48,7 @@ const output = computed(() => transformer.value(input.value));
     monospace
   />
 
-  <div>
+  <div overflow-auto>
     <div mb-5px>
       {{ outputLabel }}
     </div>

src/components/ToolCard.vue

@@ -1,78 +1,41 @@
 <script setup lang="ts">
 import { useThemeVars } from 'naive-ui';
 import FavoriteButton from './FavoriteButton.vue';
-import { useAppTheme } from '@/ui/theme/themes';
 import type { Tool } from '@/tools/tools.types';
 
 const props = defineProps<{ tool: Tool & { category: string } }>();
 const { tool } = toRefs(props);
 const theme = useThemeVars();
-
-const appTheme = useAppTheme();
 </script>
 
 <template>
-  <router-link :to="tool.path">
-    <c-card class="tool-card">
+  <router-link :to="tool.path" class="decoration-none">
+    <c-card class="h-full transition transition-duration-0.5s !border-2px !hover:border-primary">
       <div flex items-center justify-between>
-        <n-icon class="icon" size="40" :component="tool.icon" />
+        <n-icon class="text-neutral-400 dark:text-neutral-600" size="40" :component="tool.icon" />
+
         <div flex items-center gap-8px>
-          <n-tag
+          <div
             v-if="tool.isNew"
-            size="small"
-            class="badge-new"
-            round
-            type="success"
-            :bordered="false"
-            :color="{ color: theme.primaryColor, textColor: theme.tagColor }"
+            class="rounded-full px-8px py-3px text-xs text-white dark:text-neutral-800"
+            :style="{
+              'background-color': theme.primaryColor,
+            }"
           >
             {{ $t('toolCard.new') }}
-          </n-tag>
+          </div>
 
           <FavoriteButton :tool="tool" />
         </div>
       </div>
-      <n-h3 class="title">
-        <n-ellipsis>{{ tool.name }}</n-ellipsis>
-      </n-h3>
 
-      <div class="description">
-        <n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
-          {{ tool.description }}
-          <br>&nbsp;
-        </n-ellipsis>
+      <div class="truncat my-5px text-lg text-black dark:text-white">
+        {{ tool.name }}
+      </div>
+
+      <div class="line-clamp-2 text-neutral-500 dark:text-neutral-400">
+        {{ tool.description }}
       </div>
     </c-card>
   </router-link>
 </template>
-
-<style lang="less" scoped>
-a {
-  text-decoration: none;
-}
-
-.tool-card {
-  transition: border-color ease 0.5s;
-  border-width: 2px !important;
-  color: transparent;
-
-  &:hover {
-    border-color: v-bind('appTheme.primary.colorHover');
-  }
-
-  .icon {
-    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
-  }
-
-  .title {
-    margin: 5px 0;
-  }
-
-  .description {
-    opacity: 0.6;
-    color: v-bind('theme.textColorBase');
-    margin: 5px 0;
-  }
-}
-</style>

src/composable/debouncedref.ts

@@ -0,0 +1,21 @@
+import _ from 'lodash';
+
+function useDebouncedRef<T>(initialValue: T, delay: number, immediate: boolean = false) {
+  const state = ref(initialValue);
+  const debouncedRef = customRef((track, trigger) => ({
+    get() {
+      track();
+      return state.value;
+    },
+    set: _.debounce(
+      (value) => {
+        state.value = value;
+        trigger();
+      },
+      delay,
+      { leading: immediate },
+    ),
+  }));
+  return debouncedRef;
+}
+export default useDebouncedRef;

src/composable/downloadBase64.ts

@@ -1,8 +1,13 @@
-import { extension as getExtensionFromMime } from 'mime-types';
+import { extension as getExtensionFromMimeType, extension as getMimeTypeFromExtension } from 'mime-types';
 import type { Ref } from 'vue';
 import _ from 'lodash';
 
-export { getMimeTypeFromBase64, useDownloadFileFromBase64 };
+export {
+  getMimeTypeFromBase64,
+  getMimeTypeFromExtension, getExtensionFromMimeType,
+  useDownloadFileFromBase64, useDownloadFileFromBase64Refs,
+  previewImageFromBase64,
+};
 
 const commonMimeTypesSignatures = {
   'JVBERi0': 'application/pdf',
@@ -36,30 +41,78 @@ function getFileExtensionFromMimeType({
   defaultExtension?: string
 }) {
   if (mimeType) {
-    return getExtensionFromMime(mimeType) ?? defaultExtension;
+    return getExtensionFromMimeType(mimeType) ?? defaultExtension;
   }
 
   return defaultExtension;
 }
 
-function useDownloadFileFromBase64({ source, filename }: { source: Ref<string>; filename?: string }) {
+function downloadFromBase64({ sourceValue, filename, extension, fileMimeType }:
+{ sourceValue: string; filename?: string; extension?: string; fileMimeType?: string }) {
+  if (sourceValue === '') {
+    throw new Error('Base64 string is empty');
+  }
+
+  const defaultExtension = extension ?? 'txt';
+  const { mimeType } = getMimeTypeFromBase64({ base64String: sourceValue });
+  let base64String = sourceValue;
+  if (!mimeType) {
+    const targetMimeType = fileMimeType ?? getMimeTypeFromExtension(defaultExtension);
+    base64String = `data:${targetMimeType};base64,${sourceValue}`;
+  }
+
+  const cleanExtension = extension ?? getFileExtensionFromMimeType(
+    { mimeType, defaultExtension });
+  let cleanFileName = filename ?? `file.${cleanExtension}`;
+  if (extension && !cleanFileName.endsWith(`.${extension}`)) {
+    cleanFileName = `${cleanFileName}.${cleanExtension}`;
+  }
+
+  const a = document.createElement('a');
+  a.href = base64String;
+  a.download = cleanFileName;
+  a.click();
+}
+
+function useDownloadFileFromBase64(
+  { source, filename, extension, fileMimeType }:
+  { source: Ref<string>; filename?: string; extension?: string; fileMimeType?: string }) {
   return {
     download() {
-      if (source.value === '') {
-        throw new Error('Base64 string is empty');
-      }
-
-      const { mimeType } = getMimeTypeFromBase64({ base64String: source.value });
-      const base64String = mimeType
-        ? source.value
-        : `data:text/plain;base64,${source.value}`;
-
-      const cleanFileName = filename ?? `file.${getFileExtensionFromMimeType({ mimeType })}`;
-
-      const a = document.createElement('a');
-      a.href = base64String;
-      a.download = cleanFileName;
-      a.click();
+      downloadFromBase64({ sourceValue: source.value, filename, extension, fileMimeType });
     },
   };
 }
+
+function useDownloadFileFromBase64Refs(
+  { source, filename, extension }:
+  { source: Ref<string>; filename?: Ref<string>; extension?: Ref<string> }) {
+  return {
+    download() {
+      downloadFromBase64({ sourceValue: source.value, filename: filename?.value, extension: extension?.value });
+    },
+  };
+}
+
+function previewImageFromBase64(base64String: string): HTMLImageElement {
+  if (base64String === '') {
+    throw new Error('Base64 string is empty');
+  }
+
+  const img = document.createElement('img');
+  img.src = base64String;
+
+  const container = document.createElement('div');
+  container.appendChild(img);
+
+  const previewContainer = document.getElementById('previewContainer');
+  if (previewContainer) {
+    previewContainer.innerHTML = '';
+    previewContainer.appendChild(container);
+  }
+  else {
+    throw new Error('Preview container element not found');
+  }
+
+  return img;
+}

src/modules/i18n/components/locale-selector.vue

@@ -3,6 +3,7 @@ const { availableLocales, locale } = useI18n();
 
 const localesLong: Record<string, string> = {
   en: 'English',
+  de: 'Deutsch',
   es: 'Español',
   fr: 'Français',
   pt: 'Português',

src/pages/Home.page.vue

@@ -13,76 +13,60 @@ const { t } = useI18n();
 </script>
 
 <template>
-  <div class="home-page">
+  <div class="pt-50px">
     <div class="grid-wrapper">
-      <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi>
-          <ColoredCard :title="$t('home.follow.title')" :icon="Heart">
-            {{ $t('home.follow.p1') }}
-            <a
-              href="https://github.com/CorentinTh/it-tools"
-              rel="noopener"
-              target="_blank"
-              :aria-label="$t('home.follow.githubRepository')"
-            >GitHub</a>
-            {{ $t('home.follow.p2') }}
-            <a
-              href="https://twitter.com/ittoolsdottech"
-              rel="noopener"
-              target="_blank"
-              :aria-label="$t('home.follow.twitterAccount')"
-            >Twitter</a>.
-            {{ $t('home.follow.thankYou') }}
-            <n-icon :component="Heart" />
-          </ColoredCard>
-        </n-gi>
-      </n-grid>
+      <div v-if="config.showBanner" class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+        <ColoredCard :title="$t('home.follow.title')" :icon="Heart">
+          {{ $t('home.follow.p1') }}
+          <a
+            href="https://github.com/CorentinTh/it-tools"
+            rel="noopener"
+            target="_blank"
+            :aria-label="$t('home.follow.githubRepository')"
+          >GitHub</a>
+          {{ $t('home.follow.p2') }}
+          <a
+            href="https://twitter.com/ittoolsdottech"
+            rel="noopener"
+            target="_blank"
+            :aria-label="$t('home.follow.twitterAccount')"
+          >Twitter</a>.
+          {{ $t('home.follow.thankYou') }}
+          <n-icon :component="Heart" />
+        </ColoredCard>
+      </div>
 
       <transition name="height">
         <div v-if="toolStore.favoriteTools.length > 0">
-          <n-h3>{{ $t('home.categories.favoriteTools') }}</n-h3>
-          <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-            <n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
-              <ToolCard :tool="tool" />
-            </n-gi>
-          </n-grid>
+          <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+            {{ $t('home.categories.favoriteTools') }}
+          </h3>
+          <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+            <ToolCard v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" />
+          </div>
         </div>
       </transition>
 
       <div v-if="toolStore.newTools.length > 0">
-        <n-h3>{{ t('home.categories.newestTools') }}</n-h3>
-        <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-          <n-gi v-for="tool in toolStore.newTools" :key="tool.name">
-            <ToolCard :tool="tool" />
-          </n-gi>
-        </n-grid>
+        <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+          {{ t('home.categories.newestTools') }}
+        </h3>
+        <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+          <ToolCard v-for="tool in toolStore.newTools" :key="tool.name" :tool="tool" />
+        </div>
       </div>
 
-      <n-h3>{{ $t('home.categories.allTools') }}</n-h3>
-      <n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
-        <n-gi v-for="tool in toolStore.tools" :key="tool.name">
-          <transition>
-            <ToolCard :tool="tool" />
-          </transition>
-        </n-gi>
-      </n-grid>
+      <h3 class="mb-5px mt-25px font-500 text-neutral-400">
+        {{ $t('home.categories.allTools') }}
+      </h3>
+      <div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
+        <ToolCard v-for="tool in toolStore.tools" :key="tool.name" :tool="tool" />
+      </div>
     </div>
   </div>
 </template>
 
 <style scoped lang="less">
-.home-page {
-  padding-top: 50px;
-}
-
-.n-h3 {
-  margin-bottom: 10px;
-}
-
-::v-deep(.n-grid) {
-  margin-bottom: 30px;
-}
-
 .height-enter-active,
 .height-leave-active {
   transition: all 0.5s ease-in-out;

src/plugins/i18n.plugin.ts

@@ -1,22 +1,7 @@
+import messages from '@intlify/unplugin-vue-i18n/messages';
+import { get } from '@vueuse/core';
 import type { Plugin } from 'vue';
 import { createI18n } from 'vue-i18n';
-import baseMessages from '@intlify/unplugin-vue-i18n/messages';
-import _ from 'lodash';
-import { parse as parseYaml } from 'yaml';
-
-const i18nFiles = import.meta.glob('../tools/*/locales/**.yml', { as: 'raw' });
-
-const messagesByTools = await Promise.all(_.map(i18nFiles, async (fileDescriptor, path) => {
-  const [, locale] = path.match(/\.\/tools\/.*?\/locales\/(.*)\.ya?ml$/i) ?? [];
-  const content = parseYaml(await fileDescriptor());
-
-  return { [locale]: content };
-}));
-
-const messages = _.merge(
-  baseMessages,
-  _.merge({}, ...messagesByTools),
-);
 
 const i18n = createI18n({
   legacy: false,
@@ -31,7 +16,6 @@ export const i18nPlugin: Plugin = {
 };
 
 export const translate = function (localeKey: string) {
-  // @ts-expect-error global
-  const hasKey = i18n.global.te(localeKey, i18n.global.locale);
+  const hasKey = i18n.global.te(localeKey, get(i18n.global.locale));
   return hasKey ? i18n.global.t(localeKey) : localeKey;
 };

src/tools/ascii-text-drawer/ascii-text-drawer.vue

@@ -0,0 +1,93 @@
+<script setup lang="ts">
+import figlet from 'figlet';
+import TextareaCopyable from '@/components/TextareaCopyable.vue';
+
+const input = ref('Ascii ART');
+const font = useStorage('ascii-text-drawer:font', 'Standard');
+const width = useStorage('ascii-text-drawer:width', 80);
+const output = ref('');
+const errored = ref(false);
+const processing = ref(false);
+
+figlet.defaults({ fontPath: '//unpkg.com/figlet@1.6.0/fonts/' });
+
+watchEffect(async () => {
+  processing.value = true;
+  try {
+    const options: figlet.Options = {
+      font: font.value as figlet.Fonts,
+      width: width.value,
+      whitespaceBreak: true,
+    };
+    output.value = await (new Promise<string>((resolve, reject) =>
+      figlet.text(input.value, options,
+        (err, text) => {
+          if (err) {
+            reject(err);
+            return;
+          }
+
+          resolve(text ?? '');
+        })));
+    errored.value = false;
+  }
+  catch (e: any) {
+    errored.value = true;
+  }
+  processing.value = false;
+});
+
+const fonts = ['1Row', '3-D', '3D Diagonal', '3D-ASCII', '3x5', '4Max', '5 Line Oblique', 'AMC 3 Line', 'AMC 3 Liv1', 'AMC AAA01', 'AMC Neko', 'AMC Razor', 'AMC Razor2', 'AMC Slash', 'AMC Slider', 'AMC Thin', 'AMC Tubes', 'AMC Untitled', 'ANSI Shadow', 'ASCII New Roman', 'Acrobatic', 'Alligator', 'Alligator2', 'Alpha', 'Alphabet', 'Arrows', 'Avatar', 'B1FF', 'B1FF', 'Banner', 'Banner3-D', 'Banner3', 'Banner4', 'Barbwire', 'Basic', 'Bear', 'Bell', 'Benjamin', 'Big Chief', 'Big Money-ne', 'Big Money-nw', 'Big Money-se', 'Big Money-sw', 'Big', 'Bigfig', 'Binary', 'Block', 'Blocks', 'Bloody', 'Bolger', 'Braced', 'Bright', 'Broadway KB', 'Broadway', 'Bubble', 'Bulbhead', 'Caligraphy', 'Caligraphy2', 'Calvin S', 'Cards', 'Catwalk', 'Chiseled', 'Chunky', 'Coinstak', 'Cola', 'Colossal', 'Computer', 'Contessa', 'Contrast', 'Cosmike', 'Crawford', 'Crawford2', 'Crazy', 'Cricket', 'Cursive', 'Cyberlarge', 'Cybermedium', 'Cybersmall', 'Cygnet', 'DANC4', 'DOS Rebel', 'DWhistled', 'Dancing Font', 'Decimal', 'Def Leppard', 'Delta Corps Priest 1', 'Diamond', 'Diet Cola', 'Digital', 'Doh', 'Doom', 'Dot Matrix', 'Double Shorts', 'Double', 'Dr Pepper', 'Efti Chess', 'Efti Font', 'Efti Italic', 'Efti Piti', 'Efti Robot', 'Efti Wall', 'Efti Water', 'Electronic', 'Elite', 'Epic', 'Fender', 'Filter', 'Fire Font-k', 'Fire Font-s', 'Flipped', 'Flower Power', 'Four Tops', 'Fraktur', 'Fun Face', 'Fun Faces', 'Fuzzy', 'Georgi16', 'Georgia11', 'Ghost', 'Ghoulish', 'Glenyn', 'Goofy', 'Gothic', 'Graceful', 'Gradient', 'Graffiti', 'Greek', 'Heart Left', 'Heart Right', 'Henry 3D', 'Hex', 'Hieroglyphs', 'Hollywood', 'Horizontal Left', 'Horizontal Right', 'ICL-1900', 'Impossible', 'Invita', 'Isometric1', 'Isometric2', 'Isometric3', 'Isometric4', 'Italic', 'Ivrit', 'JS Block Letters', 'JS Bracket Letters', 'JS Capital Curves', 'JS Cursive', 'JS Stick Letters', 'Jacky', 'Jazmine', 'Jerusalem', 'Katakana', 'Kban', 'Keyboard', 'Knob', 'Konto Slant', 'Konto', 'LCD', 'Larry 3D 2', 'Larry 3D', 'Lean', 'Letters', 'Lil Devil', 'Line Blocks', 'Linux', 'Lockergnome', 'Madrid', 'Marquee', 'Maxfour', 'Merlin1', 'Merlin2', 'Mike', 'Mini', 'Mirror', 'Mnemonic', 'Modular', 'Morse', 'Morse2', 'Moscow', 'Mshebrew210', 'Muzzle', 'NScript', 'NT Greek', 'NV Script', 'Nancyj-Fancy', 'Nancyj-Improved', 'Nancyj-Underlined', 'Nancyj', 'Nipples', 'O8', 'OS2', 'Octal', 'Ogre', 'Old Banner', 'Patorjk\'s Cheese', 'Patorjk-HeX', 'Pawp', 'Peaks Slant', 'Peaks', 'Pebbles', 'Pepper', 'Poison', 'Puffy', 'Puzzle', 'Pyramid', 'Rammstein', 'Rectangles', 'Red Phoenix', 'Relief', 'Relief2', 'Reverse', 'Roman', 'Rot13', 'Rot13', 'Rotated', 'Rounded', 'Rowan Cap', 'Rozzo', 'Runic', 'Runyc', 'S Blood', 'SL Script', 'Santa Clara', 'Script', 'Serifcap', 'Shadow', 'Shimrod', 'Short', 'Slant Relief', 'Slant', 'Slide', 'Small Caps', 'Small Isometric1', 'Small Keyboard', 'Small Poison', 'Small Script', 'Small Shadow', 'Small Slant', 'Small Tengwar', 'Small', 'Soft', 'Speed', 'Spliff', 'Stacey', 'Stampate', 'Stampatello', 'Standard', 'Star Strips', 'Star Wars', 'Stellar', 'Stforek', 'Stick Letters', 'Stop', 'Straight', 'Stronger Than All', 'Sub-Zero', 'Swamp Land', 'Swan', 'Sweet', 'THIS', 'Tanja', 'Tengwar', 'Term', 'Test1', 'The Edge', 'Thick', 'Thin', 'Thorned', 'Three Point', 'Ticks Slant', 'Ticks', 'Tiles', 'Tinker-Toy', 'Tombstone', 'Train', 'Trek', 'Tsalagi', 'Tubular', 'Twisted', 'Two Point', 'USA Flag', 'Univers', 'Varsity', 'Wavy', 'Weird', 'Wet Letter', 'Whimsy', 'Wow'];
+</script>
+
+<template>
+  <c-card style="max-width: 600px;">
+    <c-input-text
+      v-model:value="input"
+      label="Your text:"
+      placeholder="Your text to draw"
+      raw-text
+      multiline
+      rows="4"
+    />
+
+    <n-divider />
+
+    <n-grid cols="4" x-gap="12" w-full>
+      <n-gi span="2">
+        <c-select
+          v-model:value="font"
+          label-position="top"
+          label="Font:"
+          :options="fonts"
+          searchable="true"
+          placeholder="Select font to use"
+        />
+      </n-gi>
+      <n-gi span="2">
+        <n-form-item label="Width:" label-placement="top" label-width="100" :show-feedback="false">
+          <n-input-number v-model:value="width" min="0" max="10000" w-full placeholder="Width of the text" />
+        </n-form-item>
+      </n-gi>
+    </n-grid>
+
+    <n-divider />
+
+    <div v-if="processing" flex items-center justify-center>
+      <n-spin size="medium" />
+      <span class="ml-2">Loading font...</span>
+    </div>
+
+    <c-alert v-if="errored" mt-1 text-center type="error">
+      Current settings resulted in error.
+    </c-alert>
+
+    <n-form-item v-if="!processing && !errored" label="Ascii Art text:">
+      <TextareaCopyable
+        :value="output"
+        mb-1 mt-1
+        copy-placement="outside"
+      />
+    </n-form-item>
+  </c-card>
+</template>

src/tools/ascii-text-drawer/index.ts

@@ -0,0 +1,12 @@
+import { Artboard } from '@vicons/tabler';
+import { defineTool } from '../tool';
+
+export const tool = defineTool({
+  name: 'ASCII Art Text Generator',
+  path: '/ascii-text-drawer',
+  description: 'Create ASCII art text with many fonts and styles.',
+  keywords: ['ascii', 'asciiart', 'text', 'drawer'],
+  component: () => import('./ascii-text-drawer.vue'),
+  icon: Artboard,
+  createdAt: new Date('2024-03-03'),
+});

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

@@ -2,12 +2,19 @@
 import { useBase64 } from '@vueuse/core';
 import type { Ref } from 'vue';
 import { useCopy } from '@/composable/copy';
-import { useDownloadFileFromBase64 } from '@/composable/downloadBase64';
+import { getExtensionFromMimeType, getMimeTypeFromBase64, previewImageFromBase64, useDownloadFileFromBase64Refs } from '@/composable/downloadBase64';
 import { useValidation } from '@/composable/validation';
 import { isValidBase64 } from '@/utils/base64';
 
+const fileName = ref('file');
+const fileExtension = ref('');
 const base64Input = ref('');
-const { download } = useDownloadFileFromBase64({ source: base64Input });
+const { download } = useDownloadFileFromBase64Refs(
+  {
+    source: base64Input,
+    filename: fileName,
+    extension: fileExtension,
+  });
 const base64InputValidation = useValidation({
   source: base64Input,
   rules: [
@@ -18,6 +25,35 @@ const base64InputValidation = useValidation({
   ],
 });
 
+watch(
+  base64Input,
+  (newValue, _) => {
+    const { mimeType } = getMimeTypeFromBase64({ base64String: newValue });
+    if (mimeType) {
+      fileExtension.value = getExtensionFromMimeType(mimeType) || fileExtension.value;
+    }
+  },
+);
+
+function previewImage() {
+  if (!base64InputValidation.isValid) {
+    return;
+  }
+  try {
+    const image = previewImageFromBase64(base64Input.value);
+    image.style.maxWidth = '100%';
+    image.style.maxHeight = '400px';
+    const previewContainer = document.getElementById('previewContainer');
+    if (previewContainer) {
+      previewContainer.innerHTML = '';
+      previewContainer.appendChild(image);
+    }
+  }
+  catch (_) {
+    //
+  }
+}
+
 function downloadFile() {
   if (!base64InputValidation.isValid) {
     return;
@@ -44,6 +80,24 @@ async function onUpload(file: File) {
 
 <template>
   <c-card title="Base64 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"
+          mb-2
+        />
+      </n-gi>
+    </n-grid>
     <c-input-text
       v-model:value="base64Input"
       multiline
@@ -53,7 +107,14 @@ async function onUpload(file: File) {
       mb-2
     />
 
-    <div flex justify-center>
+    <div flex justify-center py-2>
+      <div id="previewContainer" />
+    </div>
+
+    <div flex justify-center gap-3>
+      <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="previewImage()">
+        Preview image
+      </c-button>
       <c-button :disabled="base64Input === '' || !base64InputValidation.isValid" @click="downloadFile()">
         Download file
       </c-button>

src/tools/base64-file-converter/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  base64-file-converter:
-    title: Base64 file converter
-    description: Convert string, files or images into a it\'s base64 representation.

src/tools/base64-string-converter/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  base64-string-converter:
-    title: Base64 string encoder/decoder
-    description: Simply encode and decode string into a their base64 representation.

src/tools/basic-auth-generator/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  basic-auth-generator:
-    title: Basic auth generator
-    description: Generate a base64 basic auth header from an username and a password.

src/tools/bcrypt/bcrypt.vue

@@ -28,7 +28,7 @@ const compareMatch = computed(() => compareSync(compareString.value, compareHash
       mb-2
     />
     <n-form-item label="Salt count: " label-placement="left" label-width="120">
-      <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="10" :min="0" w-full />
+      <n-input-number v-model:value="saltCount" placeholder="Salt rounds..." :max="100" :min="0" w-full />
     </n-form-item>
 
     <c-input-text :value="hashed" readonly text-center />

src/tools/bcrypt/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  bcrypt:
-    title: Bcrypt
-    description: Hash and compare text string using bcrypt. Bcrypt is a password-hashing function based on the Blowfish cipher.

src/tools/benchmark-builder/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  benchmark-builder:
-    title: Benchmark builder
-    description: Easily compare execution time of tasks with this very simple online benchmark builder.

src/tools/bip39-generator/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  bip39-generator:
-    title: BIP39 passphrase generator
-    description: Generate BIP39 passphrase from existing or random mnemonic, or get the mnemonic from the passphrase.

src/tools/camera-recorder/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  camera-recorder:
-    title: Camera recorder
-    description: Take a picture or record a video from your webcam or camera.

src/tools/case-converter/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  case-converter:
-    title: Case converter
-    description: Change the case of a string and chose between different formats

src/tools/chmod-calculator/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  chmod-calculator:
-    title: Chmod calculator
-    description: Compute your chmod permissions and commands with this online chmod calculator.

src/tools/chronometer/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  chronometer:
-    title: Chronometer
-    description: Monitor the duration of a thing. Basically a chronometer with simple chronometer features.

src/tools/color-converter/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  color-converter:
-    title: Color converter
-    description: Convert color between the different formats (hex, rgb, hsl and css name)

src/tools/crontab-generator/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  crontab-generator:
-    title: Crontab generator
-    description: Validate and generate crontab and get the human readable description of the cron schedule.

src/tools/date-time-converter/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  date-converter:
-    title: Date-time converter
-    description: Convert date and time into the various different formats

src/tools/device-information/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  device-information:
-    title: Device information
-    description: Get information about your current device (screen size, pixel-ratio, user agent, ...)

src/tools/docker-run-to-docker-compose-converter/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  docker-run-to-docker-compose-converter:
-    title: Docker run to Docker compose converter
-    description: Turns docker run commands into docker-compose files!

src/tools/emoji-picker/emoji-picker.vue

@@ -4,6 +4,7 @@ import emojiKeywords from 'emojilib';
 import _ from 'lodash';
 import type { EmojiInfo } from './emoji.types';
 import { useFuzzySearch } from '@/composable/fuzzySearch';
+import useDebouncedRef from '@/composable/debouncedref';
 
 const escapeUnicode = ({ emoji }: { emoji: string }) => emoji.split('').map(unit => `\\u${unit.charCodeAt(0).toString(16).padStart(4, '0')}`).join('');
 const getEmojiCodePoints = ({ emoji }: { emoji: string }) => emoji.codePointAt(0) ? `0x${emoji.codePointAt(0)?.toString(16)}` : undefined;
@@ -23,7 +24,7 @@ const emojisGroups: { emojiInfos: EmojiInfo[]; group: string }[] = _
   .map((emojiInfos, group) => ({ group, emojiInfos }))
   .value();
 
-const searchQuery = ref('');
+const searchQuery = useDebouncedRef('', 500);
 
 const { searchResult } = useFuzzySearch({
   search: searchQuery,

src/tools/emoji-picker/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  emoji-picker:
-    title: Emoji picker
-    description: Copy and paste emojis easily and get the unicode and code points value of each emoji.

src/tools/encryption/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  encryption:
-    title: Encrypt / decrypt text
-    description: Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4.

src/tools/eta-calculator/locales/en.yml

@@ -1,4 +0,0 @@
-tools:
-  eta-calculator:
-    title: ETA calculator
-    description: An ETA (Estimated Time of Arrival) calculator to know the approximate end time of a task, for example the moment of ending of a download.