Merge branch 'feat/npm-display' into chore/all-my-stuffs

# Conflicts:
#	components.d.ts
#	package.json
#	pnpm-lock.yaml

Author: sharevb

package.json

@@ -197,6 +197,7 @@
     "vue-color-wheel": "^0.1.1",
     "vue-i18n": "^9.9.1",
     "vue-mathjax-next": "^0.0.6",
+    "vue-markdown-render": "^2.2.1",
     "vue-router": "^4.1.6",
     "vue-shadow-dom": "^4.2.0",
     "vue-tsc": "^1.8.1",

pnpm-lock.yaml

@@ -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/layouts/tool.layout.vue

@@ -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/ascii-text-drawer/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-file-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/base64-string-converter/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/bcrypt/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/bip39-generator/index.ts

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

src/tools/case-converter/index.ts

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