feat(new tool): numeronym generator (#729)

components.d.ts

@@ -82,6 +82,7 @@ declare module '@vue/runtime-core' {
     'IconMdi:brushVariant': typeof import('~icons/mdi/brush-variant')['default']
     'IconMdi:contentCopy': typeof import('~icons/mdi/content-copy')['default']
     'IconMdi:kettleSteamOutline': typeof import('~icons/mdi/kettle-steam-outline')['default']
+    IconMdiArrowDown: typeof import('~icons/mdi/arrow-down')['default']
     IconMdiArrowRightBottom: typeof import('~icons/mdi/arrow-right-bottom')['default']
     IconMdiCamera: typeof import('~icons/mdi/camera')['default']
     IconMdiChevronDown: typeof import('~icons/mdi/chevron-down')['default']
@@ -159,6 +160,7 @@ declare module '@vue/runtime-core' {
     NSwitch: typeof import('naive-ui')['NSwitch']
     NTable: typeof import('naive-ui')['NTable']
     NTag: typeof import('naive-ui')['NTag']
+    NumeronymGenerator: typeof import('./src/tools/numeronym-generator/numeronym-generator.vue')['default']
     NUpload: typeof import('naive-ui')['NUpload']
     NUploadDragger: typeof import('naive-ui')['NUploadDragger']
     OtpCodeGeneratorAndValidator: typeof import('./src/tools/otp-code-generator-and-validator/otp-code-generator-and-validator.vue')['default']

src/tools/index.ts

@@ -1,6 +1,7 @@
 import { tool as base64FileConverter } from './base64-file-converter';
 import { tool as base64StringConverter } from './base64-string-converter';
 import { tool as basicAuthGenerator } from './basic-auth-generator';
+import { tool as numeronymGenerator } from './numeronym-generator';
 import { tool as macAddressGenerator } from './mac-address-generator';
 import { tool as textToBinary } from './text-to-binary';
 import { tool as ulidGenerator } from './ulid-generator';
@@ -153,7 +154,7 @@ export const toolsByCategory: ToolCategory[] = [
   },
   {
     name: 'Text',
-    components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator, textDiff],
+    components: [loremIpsumGenerator, textStatistics, emojiPicker, stringObfuscator, textDiff, numeronymGenerator],
   },
   {
     name: 'Data',

src/tools/numeronym-generator/index.ts

@@ -0,0 +1,12 @@
+import { defineTool } from '../tool';
+import n7mIcon from './n7m-icon.svg?component';
+
+export const tool = defineTool({
+  name: 'Numeronym generator',
+  path: '/numeronym-generator',
+  description: 'A numeronym is a word where a number is used to form an abbreviation. For example, "i18n" is a numeronym of "internationalization" where 18 stands for the number of letters between the first i and the last n in the word.',
+  keywords: ['numeronym', 'generator', 'abbreviation', 'i18n', 'a11y', 'l10n'],
+  component: () => import('./numeronym-generator.vue'),
+  icon: n7mIcon,
+  createdAt: new Date('2023-11-05'),
+});

src/tools/numeronym-generator/n7m-icon.svg

@@ -0,0 +1,3 @@
+<svg version="1.2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" >
+	<path id="n7m" fill="currentColor" aria-label="n7m"  d="m0.7 35v-16.7q1.1-0.2 2.8-0.5 1.7-0.3 4-0.3 2.1 0 3.4 0.6 1.4 0.5 2.2 1.6 0.8 1 1.1 2.5 0.4 1.4 0.4 3.2v9.6h-3.1v-9q0-1.6-0.2-2.7-0.2-1.1-0.7-1.8-0.5-0.7-1.4-1-0.8-0.3-2-0.3-0.5 0-1 0-0.6 0-1 0.1-0.5 0-0.9 0.1-0.4 0.1-0.5 0.1v14.5zm18.8 0h-3.2q0.2-2.6 0.9-5.5 0.8-3 1.9-5.7 1.1-2.8 2.4-5.1 1.3-2.4 2.5-3.9h-11.1v-2.7h14.6v2.6q-1.1 1.2-2.4 3.4-1.4 2.2-2.6 5-1.1 2.7-2 5.8-0.8 3-1 6.1zm6.6 0v-16.7q1.1-0.2 2.8-0.5 1.8-0.3 4-0.3 1.7 0 2.8 0.4 1.1 0.5 1.9 1.3 0.2-0.1 0.7-0.4 0.5-0.3 1.2-0.6 0.8-0.3 1.7-0.5 0.8-0.2 1.9-0.2 1.9 0 3.2 0.6 1.3 0.5 2 1.6 0.7 1 0.9 2.5 0.3 1.4 0.3 3.2v9.6h-3.1v-9q0-1.5-0.2-2.6-0.1-1.1-0.5-1.8-0.4-0.7-1.1-1.1-0.7-0.3-1.9-0.3-1.5 0-2.5 0.4-1 0.4-1.4 0.7 0.3 0.9 0.4 1.9 0.1 1 0.1 2.2v9.6h-3v-9q0-1.5-0.2-2.6-0.2-1.1-0.6-1.8-0.4-0.7-1.1-1.1-0.7-0.3-1.8-0.3-0.5 0-1 0-0.5 0-1 0.1-0.5 0-0.9 0.1-0.4 0.1-0.5 0.1v14.5z"/>
+</svg>

src/tools/numeronym-generator/numeronym-generator.e2e.spec.ts

@@ -0,0 +1,25 @@
+import { expect, test } from '@playwright/test';
+
+test.describe('Tool - Numeronym generator', () => {
+  test.beforeEach(async ({ page }) => {
+    await page.goto('/numeronym-generator');
+  });
+
+  test('Has correct title', async ({ page }) => {
+    await expect(page).toHaveTitle('Numeronym generator - IT Tools');
+  });
+
+  test('a numeronym is generated when a word is entered', async ({ page }) => {
+    await page.getByTestId('word-input').fill('internationalization');
+    const numeronym = await page.getByTestId('numeronym').inputValue();
+
+    expect(numeronym).toEqual('i18n');
+  });
+
+  test('when a word has 3 letters or less, the numeronym is the word itself', async ({ page }) => {
+    await page.getByTestId('word-input').fill('abc');
+    const numeronym = await page.getByTestId('numeronym').inputValue();
+
+    expect(numeronym).toEqual('abc');
+  });
+});

src/tools/numeronym-generator/numeronym-generator.service.test.ts

@@ -0,0 +1,15 @@
+import { describe, expect, it } from 'vitest';
+import { generateNumeronym } from './numeronym-generator.service';
+
+describe('numeronym-generator service', () => {
+  describe('generateNumeronym', () => {
+    it('a numeronym of a word is the first letter, the number of letters between the first and the last letter, and the last letter', () => {
+      expect(generateNumeronym('internationalization')).toBe('i18n');
+      expect(generateNumeronym('accessibility')).toBe('a11y');
+      expect(generateNumeronym('localization')).toBe('l10n');
+    });
+    it('a numeronym of a word with 3 letters is the word itself', () => {
+      expect(generateNumeronym('abc')).toBe('abc');
+    });
+  });
+});

src/tools/numeronym-generator/numeronym-generator.service.ts

@@ -0,0 +1,11 @@
+export { generateNumeronym };
+
+function generateNumeronym(word: string): string {
+  const wordLength = word.length;
+
+  if (wordLength <= 3) {
+    return word;
+  }
+
+  return `${word.at(0)}${wordLength - 2}${word.at(-1)}`;
+}

src/tools/numeronym-generator/numeronym-generator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { generateNumeronym } from './numeronym-generator.service';
+
+const word = ref('');
+
+const numeronym = computed(() => generateNumeronym(word.value));
+</script>
+
+<template>
+  <div flex flex-col items-center gap-4>
+    <c-input-text v-model:value="word" placeholder="Enter a word, e.g. 'internationalization'" size="large" clearable test-id="word-input" />
+
+    <icon-mdi-arrow-down text-30px />
+
+    <input-copyable :value="numeronym" size="large" readonly placeholder="Your numeronym will be here, e.g. 'i18n'" test-id="numeronym" />
+  </div>
+</template>