Merge 48b8a7f60a into e1b4f9aafe

components.d.ts

@@ -132,6 +132,7 @@ declare module '@vue/runtime-core' {
     NConfigProvider: typeof import('naive-ui')['NConfigProvider']
     NDivider: typeof import('naive-ui')['NDivider']
     NEllipsis: typeof import('naive-ui')['NEllipsis']
+    NForm: typeof import('naive-ui')['NForm']
     NFormItem: typeof import('naive-ui')['NFormItem']
     NGi: typeof import('naive-ui')['NGi']
     NGrid: typeof import('naive-ui')['NGrid']

package.json

@@ -89,6 +89,7 @@
     "uuid": "^9.0.0",
     "vue": "^3.3.4",
     "vue-i18n": "^9.9.1",
+    "vue-markdown-render": "^2.2.1",
     "vue-router": "^4.1.6",
     "vue-tsc": "^1.8.1",
     "xml-formatter": "^3.3.2",

pnpm-lock.yaml

@@ -167,6 +167,9 @@ dependencies:
   vue-i18n:
     specifier: ^9.9.1
     version: 9.9.1(vue@3.3.4)
+  vue-markdown-render:
+    specifier: ^2.2.1
+    version: 2.2.1(vue@3.3.4)
   vue-router:
     specifier: ^4.1.6
     version: 4.1.6(vue@3.3.4)
@@ -3354,7 +3357,7 @@ packages:
     dependencies:
       '@unhead/dom': 0.5.1
       '@unhead/schema': 0.5.1
-      '@vueuse/shared': 10.8.0(vue@3.3.4)
+      '@vueuse/shared': 10.11.0(vue@3.3.4)
       unhead: 0.5.1
       vue: 3.3.4
     transitivePeerDependencies:
@@ -3987,19 +3990,19 @@ packages:
       - vue
     dev: false
 
-  /@vueuse/shared@10.3.0(vue@3.3.4):
-    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
+  /@vueuse/shared@10.11.0(vue@3.3.4):
+    resolution: {integrity: sha512-fyNoIXEq3PfX1L3NkNhtVQUSRtqYwJtJg+Bp9rIzculIZWHTkKSysujrOk2J+NrRulLTQH9+3gGSfYLWSEWU1A==}
     dependencies:
-      vue-demi: 0.14.5(vue@3.3.4)
+      vue-demi: 0.14.8(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
     dev: false
 
-  /@vueuse/shared@10.8.0(vue@3.3.4):
-    resolution: {integrity: sha512-dUdy6zwHhULGxmr9YUg8e+EnB39gcM4Fe2oKBSrh3cOsV30JcMPtsyuspgFCUo5xxFNaeMf/W2yyKfST7Bg8oQ==}
+  /@vueuse/shared@10.3.0(vue@3.3.4):
+    resolution: {integrity: sha512-kGqCTEuFPMK4+fNWy6dUOiYmxGcUbtznMwBZLC1PubidF4VZY05B+Oht7Jh7/6x4VOWGpvu3R37WHi81cKpiqg==}
     dependencies:
-      vue-demi: 0.14.7(vue@3.3.4)
+      vue-demi: 0.14.5(vue@3.3.4)
     transitivePeerDependencies:
       - '@vue/composition-api'
       - vue
@@ -9158,8 +9161,8 @@ packages:
       vue: 3.3.4
     dev: false
 
-  /vue-demi@0.14.7(vue@3.3.4):
-    resolution: {integrity: sha512-EOG8KXDQNwkJILkx/gPcoL/7vH+hORoBaKgGe+6W7VFMvCYJfmF2dGbvgDroVnI8LU7/kTu8mbjRZGBU1z9NTA==}
+  /vue-demi@0.14.8(vue@3.3.4):
+    resolution: {integrity: sha512-Uuqnk9YE9SsWeReYqK2alDI5YzciATE0r2SkA6iMAtuXvNTMNACJLJEXNXaEy94ECuBe4Sk6RzRU80kjdbIo1Q==}
     engines: {node: '>=12'}
     hasBin: true
     requiresBuild: true
@@ -9202,6 +9205,15 @@ packages:
       '@vue/devtools-api': 6.5.0
       vue: 3.3.4
 
+  /vue-markdown-render@2.2.1(vue@3.3.4):
+    resolution: {integrity: sha512-XkYnC0PMdbs6Vy6j/gZXSvCuOS0787Se5COwXlepRqiqPiunyCIeTPQAO2XnB4Yl04EOHXwLx5y6IuszMWSgyQ==}
+    peerDependencies:
+      vue: ^3.3.4
+    dependencies:
+      markdown-it: 13.0.2
+      vue: 3.3.4
+    dev: false
+
   /vue-router@4.1.6(vue@3.3.4):
     resolution: {integrity: sha512-DYWYwsG6xNPmLq/FmZn8Ip+qrhFEzA14EI12MsMgVxvHFDYvlr4NXpVF5hrRH1wVcDP8fGi5F4rxuJSl8/r+EQ==}
     peerDependencies:
@@ -9449,6 +9461,7 @@ packages:
 
   /workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
+    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
     dependencies:
       workbox-background-sync: 7.0.0
       workbox-core: 7.0.0

src/layouts/tool.layout.vue

@@ -2,7 +2,9 @@
 import { useRoute } from 'vue-router';
 import { useHead } from '@vueuse/head';
 import type { HeadObject } from '@vueuse/head';
+import VueMarkdown from 'vue-markdown-render';
 
+import { useThemeVars } from 'naive-ui';
 import BaseLayout from './base.layout.vue';
 import FavoriteButton from '@/components/FavoriteButton.vue';
 import type { Tool } from '@/tools/tools.types';
@@ -28,6 +30,23 @@ const { t } = useI18n();
 const i18nKey = computed<string>(() => route.path.trim().replace('/', ''));
 const toolTitle = computed<string>(() => t(`tools.${i18nKey.value}.title`, String(route.meta.name)));
 const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.description`, String(route.meta.description)));
+const toolFooter = computed<string>(() => {
+  const createLink = (linkText: string, url: string) => {
+    return `[${linkText.replace('[', '\\[').replace(']', '\\]')}](${url.replace('(', '%28').replace(')', '%29')})`;
+  };
+  let footer = t(`tools.${i18nKey.value}.footer`, String(route.meta.footer));
+  if (footer === 'undefined') {
+    footer = '';
+  }
+  const npmPackages = (route.meta.npmPackages as string[] || [])
+    .map(
+      packageName => createLink(
+        packageName,
+        packageName.includes('://') ? packageName : `https://www.npmjs.com/package/${packageName}`),
+    );
+  return ((npmPackages.length > 0 ? `Made with ${npmPackages.join(', ')}\n` : '') + footer).trim();
+});
+const themeVars = useThemeVars();
 </script>
 
 <template>
@@ -55,6 +74,10 @@ const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.descrip
     <div class="tool-content">
       <slot />
     </div>
+
+    <div class="tool-footer">
+      <VueMarkdown :source="toolFooter" />
+    </div>
   </BaseLayout>
 </template>
 
@@ -66,9 +89,11 @@ const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.descrip
   align-items: flex-start;
   flex-wrap: wrap;
   gap: 16px;
+  overflow-x: auto;
 
   ::v-deep(& > *) {
     flex: 0 1 600px;
+    min-width:0;
   }
 }
 
@@ -105,4 +130,14 @@ const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.descrip
     }
   }
 }
+.tool-footer {
+    opacity: 0.7;
+    font-size: 12px;
+    text-align: center;
+
+    ::v-deep(a) {
+      color: v-bind('themeVars.textColor1');
+      font-style: italic;
+    }
+  }
 </style>

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

@@ -9,4 +9,5 @@ export const tool = defineTool({
   component: () => import('./ascii-text-drawer.vue'),
   icon: Artboard,
   createdAt: new Date('2024-03-03'),
+  npmPackages: ['figlet'],
 });

src/tools/base64-file-converter/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['base64', 'converter', 'upload', 'image', 'file', 'conversion', 'web', 'data', 'format'],
   component: () => import('./base64-file-converter.vue'),
   icon: FileDigit,
+  npmPackages: ['js-base64'],
 });

src/tools/base64-string-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./base64-string-converter.vue'),
   icon: FileDigit,
   redirectFrom: ['/file-to-base64', '/base64-converter'],
+  npmPackages: ['js-base64'],
 });

src/tools/bcrypt/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['bcrypt', 'hash', 'compare', 'password', 'salt', 'round', 'storage', 'crypto'],
   component: () => import('./bcrypt.vue'),
   icon: LockSquare,
+  npmPackages: ['bcryptjs'],
 });

src/tools/bip39-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['BIP39', 'passphrase', 'generator', 'mnemonic', 'entropy'],
   component: () => import('./bip39-generator.vue'),
   icon: AlignJustified,
+  npmPackages: ['@it-tools/bip39'],
 });

src/tools/case-converter/index.ts

@@ -23,4 +23,5 @@ export const tool = defineTool({
   ],
   component: () => import('./case-converter.vue'),
   icon: LetterCaseToggle,
+  npmPackages: ['change-case'],
 });

src/tools/color-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./color-converter.vue'),
   icon: Palette,
   redirectFrom: ['/color-picker-converter'],
+  npmPackages: ['colord'],
 });

src/tools/crontab-generator/index.ts

@@ -23,4 +23,5 @@ export const tool = defineTool({
   ],
   component: () => import('./crontab-generator.vue'),
   icon: Alarm,
+  npmPackages: ['cronstrue'],
 });

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

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['date', 'time', 'converter', 'iso', 'utc', 'timezone', 'year', 'month', 'day', 'minute', 'seconde'],
   component: () => import('./date-time-converter.vue'),
   icon: Calendar,
+  npmPackages: ['date-fns'],
 });

src/tools/emoji-picker/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./emoji-picker.vue'),
   icon: MoodSmile,
   createdAt: new Date('2023-08-07'),
+  npmPackages: ['unicode-emoji-json', 'emojilib'],
 });

src/tools/encryption/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./encryption.vue'),
   icon: Lock,
   redirectFrom: ['/cypher'],
+  npmPackages: ['crypto-s'],
 });

src/tools/hmac-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['hmac', 'generator', 'MD5', 'SHA1', 'SHA256', 'SHA224', 'SHA512', 'SHA384', 'SHA3', 'RIPEMD160'],
   component: () => import('./hmac-generator.vue'),
   icon: ShortTextRound,
+  npmPackages: ['crypto-js'],
 });

src/tools/html-wysiwyg-editor/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
   component: () => import('./html-wysiwyg-editor.vue'),
   icon: Edit,
+  npmPackages: ['monaco', 'prettier'],
 });

src/tools/iban-validator-and-parser/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./iban-validator-and-parser.vue'),
   icon: Bank,
   createdAt: new Date('2023-08-26'),
+  npmPackages: ['ibantools'],
 });

src/tools/ipv6-ula-generator/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./ipv6-ula-generator.vue'),
   icon: BuildingFactory,
   createdAt: new Date('2023-04-09'),
+  npmPackages: ['crypto-js'],
 });

src/tools/json-diff/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-diff.vue'),
   icon: CompareArrowsRound,
   createdAt: new Date('2023-04-20'),
+  npmPackages: ['json5'],
 });

src/tools/json-minify/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['json', 'minify', 'format'],
   component: () => import('./json-minify.vue'),
   icon: Braces,
+  npmPackages: ['json5'],
 });

src/tools/json-to-csv/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-to-csv.vue'),
   icon: List,
   createdAt: new Date('2023-06-18'),
+  npmPackages: ['json5'],
 });

src/tools/json-to-toml/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-to-toml.vue'),
   icon: Braces,
   createdAt: new Date('2023-06-23'),
+  npmPackages: ['json5', 'iarna-toml-esm'],
 });

src/tools/json-to-yaml-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-to-yaml.vue'),
   icon: Braces,
   createdAt: new Date('2023-04-10'),
+  npmPackages: ['yaml', 'json5'],
 });

src/tools/json-viewer/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./json-viewer.vue'),
   icon: Braces,
   redirectFrom: ['/json-viewer'],
+  npmPackages: ['json5'],
 });

src/tools/jwt-parser/index.ts

@@ -25,4 +25,5 @@ export const tool = defineTool({
   ],
   component: () => import('./jwt-parser.vue'),
   icon: Key,
+  npmPackages: ['jwt-decode'],
 });

src/tools/mac-address-lookup/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./mac-address-lookup.vue'),
   icon: Devices,
   createdAt: new Date('2023-04-06'),
+  npmPackages: ['oui-data'],
 });

src/tools/math-evaluator/index.ts

@@ -41,4 +41,5 @@ export const tool = defineTool({
   ],
   component: () => import('./math-evaluator.vue'),
   icon: Math,
+  npmPackages: ['mathjs'],
 });

src/tools/meta-tag-generator/index.ts

@@ -23,4 +23,5 @@ export const tool = defineTool({
   ],
   component: () => import('./meta-tag-generator.vue'),
   icon: Tags,
+  npmPackages: ['@it-tools/oggen'],
 });

src/tools/mime-types/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['mime', 'types', 'extension', 'content', 'type'],
   component: () => import('./mime-types.vue'),
   icon: World,
+  npmPackages: ['mime-types'],
 });

src/tools/otp-code-generator-and-validator/index.ts

@@ -25,4 +25,5 @@ export const tool = defineTool({
   ],
   component: () => import('./otp-code-generator-and-validator.vue'),
   icon: DeviceMobile,
+  npmPackages: ['crypto-js'],
 });

src/tools/pdf-signature-checker/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./pdf-signature-checker.vue'),
   icon: FileCertIcon,
   createdAt: new Date('2023-12-09'),
+  npmPackages: ['pdf-signature-reader'],
 });

src/tools/phone-parser-and-formatter/index.ts

@@ -22,4 +22,5 @@ export const tool = defineTool({
   component: () => import('./phone-parser-and-formatter.vue'),
   icon: Phone,
   createdAt: new Date('2023-05-01'),
+  npmPackages: ['libphonenumber-js', 'country-code-lookup'],
 });

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

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['qr', 'code', 'generator', 'square', 'color', 'link', 'low', 'medium', 'quartile', 'high', 'transparent'],
   component: () => import('./qr-code-generator.vue'),
   icon: Qrcode,
+  npmPackages: ['qrcode'],
 });

src/tools/rsa-key-pair-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
   component: () => import('./rsa-key-pair-generator.vue'),
   icon: Certificate,
+  npmPackages: ['node-forge'],
 });

src/tools/slugify-string/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
   component: () => import('./slugify-string.vue'),
   icon: AbcRound,
+  npmPackages: ['@sindresorhus/slugify'],
 });

src/tools/sql-prettify/index.ts

@@ -24,4 +24,5 @@ export const tool = defineTool({
   ],
   component: () => import('./sql-prettify.vue'),
   icon: Database,
+  npmPackages: ['sql-formatter'],
 });

src/tools/toml-to-json/index.ts

@@ -11,4 +11,5 @@ export const tool = defineTool({
   component: () => import('./toml-to-json.vue'),
   icon: BracketIcon,
   createdAt: new Date('2023-06-23'),
+  npmPackages: ['yaml', 'iarna-toml-esm'],
 });

src/tools/toml-to-yaml/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./toml-to-yaml.vue'),
   icon: BracketIcon,
   createdAt: new Date('2023-06-23'),
+  npmPackages: ['yaml', 'iarna-toml-esm'],
 });

src/tools/tools.types.ts

@@ -10,6 +10,8 @@ export interface Tool {
   redirectFrom?: string[]
   isNew: boolean
   createdAt?: Date
+  npmPackages?: string[]
+  footer?: string
 }
 
 export interface ToolCategory {

src/tools/ulid-generator/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./ulid-generator.vue'),
   icon: SortDescendingNumbers,
   createdAt: new Date('2023-09-11'),
+  npmPackages: ['ulid'],
 });

src/tools/user-agent-parser/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./user-agent-parser.vue'),
   icon: Browser,
   createdAt: new Date('2023-04-06'),
+  npmPackages: ['ua-parser-js'],
 });

src/tools/uuid-generator/index.ts

@@ -9,4 +9,5 @@ export const tool = defineTool({
   keywords: ['uuid', 'v4', 'random', 'id', 'alphanumeric', 'identity', 'token', 'string', 'identifier', 'unique', 'v1', 'v3', 'v5', 'nil'],
   component: () => import('./uuid-generator.vue'),
   icon: Fingerprint,
+  npmPackages: ['uuid'],
 });

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

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./wifi-qr-code-generator.vue'),
   icon: Qrcode,
   createdAt: new Date('2023-09-06'),
+  npmPackages: ['qrcode'],
 });

src/tools/xml-formatter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./xml-formatter.vue'),
   icon: Code,
   createdAt: new Date('2023-06-17'),
+  npmPackages: ['xml-formatter'],
 });

src/tools/yaml-to-json-converter/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./yaml-to-json.vue'),
   icon: AlignJustified,
   createdAt: new Date('2023-04-10'),
+  npmPackages: ['yaml'],
 });

src/tools/yaml-to-toml/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./yaml-to-toml.vue'),
   icon: AlignJustified,
   createdAt: new Date('2023-06-23'),
+  npmPackages: ['yaml', 'iarna-toml-esm'],
 });

src/tools/yaml-viewer/index.ts

@@ -10,4 +10,5 @@ export const tool = defineTool({
   component: () => import('./yaml-viewer.vue'),
   icon: AlignJustified,
   createdAt: new Date('2024-01-31'),
+  npmPackages: ['yaml'],
 });