feat(tools): new badge for recently created tools

src/tools/base64-converter/index.ts

@@ -1,7 +1,7 @@
 import { FileDigit } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Base64 converter',
   path: '/base64-converter',
   description: "Convert string, files or images into a it's base64 representation.",
@@ -9,4 +9,4 @@ export const tool: ITool = {
   component: () => import('./base64-converter.vue'),
   icon: FileDigit,
   redirectFrom: ['/file-to-base64', '/base64-string-converter'],
-};
+});

src/tools/bcrypt/index.ts

@@ -1,7 +1,7 @@
 import { LockSquare } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Bcrypt',
   path: '/bcrypt',
   description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
   keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
   component: () => import('./bcrypt.vue'),
   icon: LockSquare,
-};
+});

src/tools/bip39-generator/index.ts

@@ -1,11 +1,11 @@
 import { AlignJustified } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'BIP39 passphrase generator',
   path: '/bip39-generator',
   description: 'Generate BIP39 passphrase from existing or random mnemonic, or get the mnemonic from the passphrase.',
   keywords: ['BIP39', 'passphrase', 'generator', 'mnemonic', 'entropy'],
   component: () => import('./bip39-generator.vue'),
   icon: AlignJustified,
-};
+});

src/tools/case-converter/index.ts

@@ -1,7 +1,7 @@
 import { LetterCaseToggle } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Case converter',
   path: '/case-converter',
   description: 'Change the case of a string and chose between different formats',
@@ -22,4 +22,4 @@ export const tool: ITool = {
   ],
   component: () => import('./case-converter.vue'),
   icon: LetterCaseToggle,
-};
+});

src/tools/color-converter/index.ts

@@ -1,7 +1,7 @@
 import { Palette } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Color converter',
   path: '/color-converter',
   description: 'Convert color between the different formats (hex, rgb, hsl and css name)',
@@ -9,4 +9,4 @@ export const tool: ITool = {
   component: () => import('./color-converter.vue'),
   icon: Palette,
   redirectFrom: ['/color-picker-converter'],
-};
+});

src/tools/crontab-generator/index.ts

@@ -1,7 +1,7 @@
 import { Alarm } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Crontab generator',
   path: '/crontab-generator',
   description: 'Validate and generate crontab and get the human readable description of the cron schedule.',
@@ -22,4 +22,4 @@ export const tool: ITool = {
   ],
   component: () => import('./crontab-generator.vue'),
   icon: Alarm,
-};
+});

src/tools/date-time-converter/index.ts

@@ -1,11 +1,11 @@
 import { Calendar } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Date-time converter',
   path: '/date-converter',
   description: 'Convert date and time into the various different formats',
   keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
   component: () => import('./date-time-converter.vue'),
   icon: Calendar,
-};
+});

src/tools/device-information/index.ts

@@ -1,7 +1,7 @@
 import { DeviceDesktop } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Device information',
   path: '/device-information',
   description: 'Get information about your current device (screen size, pixel-ratio, user agent, ...)',
@@ -20,4 +20,4 @@ export const tool: ITool = {
   ],
   component: () => import('./device-information.vue'),
   icon: DeviceDesktop,
-};
+});

src/tools/encryption/index.ts

@@ -1,7 +1,7 @@
 import { Lock } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Encrypt / decrypt text',
   path: '/encryption',
   description: 'Encrypt and decrypt text clear text using crypto algorithm like AES, TripleDES, Rabbit or RC4.',
@@ -9,4 +9,4 @@ export const tool: ITool = {
   component: () => import('./encryption.vue'),
   icon: Lock,
   redirectFrom: ['/cypher'],
-};
+});

src/tools/git-memo/index.ts

@@ -1,7 +1,7 @@
 import { BrandGit } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Git cheatsheet',
   path: '/git-memo',
   description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
   keywords: ['git', 'push', 'force', 'pull', 'commit', 'amend', 'rebase', 'merge', 'reset', 'soft', 'hard', 'lease'],
   component: () => import('./git-memo.vue'),
   icon: BrandGit,
-};
+});

src/tools/hash-text/index.ts

@@ -1,7 +1,7 @@
 import { EyeOff } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Hash text',
   path: '/hash-text',
   description:
@@ -24,4 +24,4 @@ export const tool: ITool = {
   component: () => import('./hash-text.vue'),
   icon: EyeOff,
   redirectFrom: ['/hash'],
-};
+});

src/tools/html-entities/index.ts

@@ -1,11 +1,11 @@
 import { Code } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Escape html entities',
   path: '/html-entities',
   description: 'Escape or unescape html entities (replace <,>, &, " and \' to their html version)',
   keywords: ['html', 'entities', 'escape', 'unescape', 'special', 'characters', 'tags'],
   component: () => import('./html-entities.vue'),
   icon: Code,
-};
+});

src/tools/integer-base-converter/index.ts

@@ -1,11 +1,11 @@
 import { ArrowsLeftRight } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Integer base converter',
   path: '/base-converter',
   description: 'Convert number between different bases (decimal, hexadecimal, binary, octal, base64, ...)',
   keywords: ['integer', 'number', 'base', 'conversion', 'decimal', 'hexadecimal', 'binary', 'octal', 'base64'],
   component: () => import('./integer-base-converter.vue'),
   icon: ArrowsLeftRight,
-};
+});

src/tools/json-viewer/index.ts

@@ -1,11 +1,11 @@
 import { Braces } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'JSON viewer',
   path: '/json-viewer',
   description: 'Prettify JSON string to a human friendly readable format.',
   keywords: ['json', 'viewer', 'prettify', 'format'],
   component: () => import('./json-viewer.vue'),
   icon: Braces,
-};
+});

src/tools/lorem-ipsum-generator/index.ts

@@ -1,7 +1,7 @@
 import { AlignJustified } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Lorem ipsum generator',
   path: '/lorem-ipsum-generator',
   description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
   keywords: ['lorem', 'ipsum', 'dolor', 'sit', 'amet', 'placeholder', 'text', 'filler', 'random', 'generator'],
   component: () => import('./lorem-ipsum-generator.vue'),
   icon: AlignJustified,
-};
+});

src/tools/qr-code-generator/index.ts

@@ -1,7 +1,7 @@
 import { Qrcode } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'QR Code generator',
   path: '/qrcode-generator',
   description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
   keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'],
   component: () => import('./qr-code-generator.vue'),
   icon: Qrcode,
-};
+});

src/tools/random-port-generator/index.ts

@@ -1,11 +1,11 @@
 import { Server } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Random port generator',
   path: '/random-port-generator',
   description: 'Generate random port numbers outside of the range of "known" ports (0-1023).',
   keywords: ['system', 'port', 'lan', 'generator', 'random', 'development', 'computer'],
   component: () => import('./random-port-generator.vue'),
   icon: Server,
-};
+});

src/tools/roman-numeral-converter/index.ts

@@ -1,11 +1,11 @@
 import { LetterX } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Roman numeral converter',
   path: '/roman-numeral-converter',
   description: 'Convert Roman numerals to numbers and convert numbers to Roman numerals.',
   keywords: ['roman', 'arabic', 'converter', 'X', 'I', 'V', 'L', 'C', 'D', 'M'],
   component: () => import('./roman-numeral-converter.vue'),
   icon: LetterX,
-};
+});

src/tools/text-statistics/index.ts

@@ -1,7 +1,7 @@
 import { FileText } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Text statistics',
   path: '/text-statistics',
   description: "Get information about a text, the amount of characters, the amount of words, it's size, ...",
@@ -9,4 +9,4 @@ export const tool: ITool = {
   component: () => import('./text-statistics.vue'),
   icon: FileText,
   redirectFrom: ['/text-stats'],
-};
+});

src/tools/token-generator/index.ts

@@ -1,7 +1,7 @@
 import { ArrowsShuffle } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Token generator',
   path: '/token-generator',
   description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
   keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase'],
   component: () => import('./token-generator.tool.vue'),
   icon: ArrowsShuffle,
-};
+});

src/tools/tool.ts

@@ -1,3 +1,4 @@
+import { config } from '@/config';
 import type { Component } from 'vue';
 
 export interface ITool {
@@ -8,6 +9,7 @@ export interface ITool {
   component: () => Promise<Component>;
   icon: Component;
   redirectFrom?: string[];
+  isNew: boolean;
 }
 
 export interface ToolCategory {
@@ -15,3 +17,17 @@ export interface ToolCategory {
   icon: Component;
   components: ITool[];
 }
+
+type WithOptional<T, K extends keyof T> = Omit<T, K> & Partial<Pick<T, K>>;
+
+export function defineTool(
+  tool: WithOptional<ITool, 'isNew'>,
+  { newTools }: { newTools: string[] } = { newTools: config.tools.newTools },
+) {
+  const isNew = newTools.includes(tool.name);
+
+  return {
+    isNew,
+    ...tool,
+  };
+}

src/tools/url-encoder/index.ts

@@ -1,11 +1,11 @@
 import { Link } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Encode/decode url formatted strings',
   path: '/url-encoder',
   description: 'Encode to url-encoded format (also known as "percent-encoded") or decode from it.',
   keywords: ['url', 'encode', 'decode', 'percent', '%20', 'format'],
   component: () => import('./url-encoder.vue'),
   icon: Link,
-};
+});

src/tools/url-parser/index.ts

@@ -1,7 +1,7 @@
 import { Unlink } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'Url parser',
   path: '/url-parser',
   description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
   keywords: ['url', 'parser', 'protocol', 'origin', 'params', 'port', 'username', 'password', 'href'],
   component: () => import('./url-parser.vue'),
   icon: Unlink,
-};
+});

src/tools/uuid-generator/index.ts

@@ -1,7 +1,7 @@
 import { Fingerprint } from '@vicons/tabler';
-import type { ITool } from '../tool';
+import { defineTool } from '../tool';
 
-export const tool: ITool = {
+export const tool = defineTool({
   name: 'UUIDs v4 generator',
   path: '/uuid-generator',
   description:
@@ -9,4 +9,4 @@ export const tool: ITool = {
   keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique'],
   component: () => import('./uuid-generator.vue'),
   icon: Fingerprint,
-};
+});