From c2e55b1a3f624371ee70d6688dbaa38bbc2f8d3b Mon Sep 17 00:00:00 2001 From: sharevb Date: Tue, 25 Jun 2024 09:10:28 +0200 Subject: [PATCH 1/5] feat: Display a footer/list of npm packages per tool Fix #1025 --- src/layouts/tool.layout.vue | 24 ++++++++++++++++++++++++ src/tools/tools.types.ts | 2 ++ 2 files changed, 26 insertions(+) diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue index aa808f1c..38c8c930 100644 --- a/src/layouts/tool.layout.vue +++ b/src/layouts/tool.layout.vue @@ -2,6 +2,7 @@ import { useRoute } from 'vue-router'; import { useHead } from '@vueuse/head'; import type { HeadObject } from '@vueuse/head'; +import VueMarkdown from 'vue-markdown-render'; import BaseLayout from './base.layout.vue'; import FavoriteButton from '@/components/FavoriteButton.vue'; @@ -28,6 +29,19 @@ const { t } = useI18n(); const i18nKey = computed(() => route.path.trim().replace('/', '')); const toolTitle = computed(() => t(`tools.${i18nKey.value}.title`, String(route.meta.name))); const toolDescription = computed(() => t(`tools.${i18nKey.value}.description`, String(route.meta.description))); +const toolFooter = computed(() => { + const createLink = (linkText: string, url: string) => { + return `[${linkText.replace('[', '\\[').replace(']', '\\]')}](${url.replace('(', '%28').replace(')', '%29')})`; + }; + const footer = t(`tools.${i18nKey.value}.footer`, String(route.meta.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(); +}); @@ -66,9 +84,11 @@ const toolDescription = computed(() => 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; } } @@ -104,5 +124,9 @@ const toolDescription = computed(() => t(`tools.${i18nKey.value}.descrip opacity: 0.7; } } + .tool-footer { + opacity: 0.7; + font-size: 12px; + } } diff --git a/src/tools/tools.types.ts b/src/tools/tools.types.ts index dcef8543..a38ff135 100644 --- a/src/tools/tools.types.ts +++ b/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 { From 5441b2663ae8206f9223296208ae27ed326039f1 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Fri, 12 Jul 2024 22:14:46 +0200 Subject: [PATCH 2/5] feat: add npmPackages --- src/tools/ascii-text-drawer/index.ts | 1 + src/tools/base64-file-converter/index.ts | 1 + src/tools/base64-string-converter/index.ts | 1 + src/tools/bcrypt/index.ts | 1 + src/tools/bip39-generator/index.ts | 1 + src/tools/case-converter/index.ts | 1 + src/tools/color-converter/index.ts | 1 + src/tools/crontab-generator/index.ts | 1 + src/tools/date-time-converter/index.ts | 1 + src/tools/emoji-picker/index.ts | 1 + src/tools/encryption/index.ts | 1 + src/tools/hmac-generator/index.ts | 1 + src/tools/html-wysiwyg-editor/index.ts | 1 + src/tools/iban-validator-and-parser/index.ts | 1 + src/tools/ipv6-ula-generator/index.ts | 1 + src/tools/json-diff/index.ts | 1 + src/tools/json-minify/index.ts | 1 + src/tools/json-to-csv/index.ts | 1 + src/tools/json-to-toml/index.ts | 1 + src/tools/json-to-yaml-converter/index.ts | 1 + src/tools/json-viewer/index.ts | 1 + src/tools/jwt-parser/index.ts | 1 + src/tools/mac-address-lookup/index.ts | 1 + src/tools/math-evaluator/index.ts | 1 + src/tools/meta-tag-generator/index.ts | 1 + src/tools/mime-types/index.ts | 1 + src/tools/otp-code-generator-and-validator/index.ts | 1 + src/tools/pdf-signature-checker/index.ts | 1 + src/tools/phone-parser-and-formatter/index.ts | 1 + src/tools/qr-code-generator/index.ts | 1 + src/tools/rsa-key-pair-generator/index.ts | 1 + src/tools/slugify-string/index.ts | 1 + src/tools/sql-prettify/index.ts | 1 + src/tools/toml-to-json/index.ts | 1 + src/tools/toml-to-yaml/index.ts | 1 + src/tools/ulid-generator/index.ts | 1 + src/tools/user-agent-parser/index.ts | 1 + src/tools/uuid-generator/index.ts | 1 + src/tools/wifi-qr-code-generator/index.ts | 1 + src/tools/xml-formatter/index.ts | 1 + src/tools/yaml-to-json-converter/index.ts | 1 + src/tools/yaml-to-toml/index.ts | 1 + src/tools/yaml-viewer/index.ts | 1 + 43 files changed, 43 insertions(+) diff --git a/src/tools/ascii-text-drawer/index.ts b/src/tools/ascii-text-drawer/index.ts index cc1ba86c..eaae4e69 100644 --- a/src/tools/ascii-text-drawer/index.ts +++ b/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'], }); diff --git a/src/tools/base64-file-converter/index.ts b/src/tools/base64-file-converter/index.ts index 4d94402b..202a7fce 100644 --- a/src/tools/base64-file-converter/index.ts +++ b/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'], }); diff --git a/src/tools/base64-string-converter/index.ts b/src/tools/base64-string-converter/index.ts index e51d54df..36aa5162 100644 --- a/src/tools/base64-string-converter/index.ts +++ b/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'], }); diff --git a/src/tools/bcrypt/index.ts b/src/tools/bcrypt/index.ts index 9c80c694..c48e000e 100644 --- a/src/tools/bcrypt/index.ts +++ b/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'], }); diff --git a/src/tools/bip39-generator/index.ts b/src/tools/bip39-generator/index.ts index 40582da4..55a519a2 100644 --- a/src/tools/bip39-generator/index.ts +++ b/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'], }); diff --git a/src/tools/case-converter/index.ts b/src/tools/case-converter/index.ts index 14d7ec12..bf00684d 100644 --- a/src/tools/case-converter/index.ts +++ b/src/tools/case-converter/index.ts @@ -23,4 +23,5 @@ export const tool = defineTool({ ], component: () => import('./case-converter.vue'), icon: LetterCaseToggle, + npmPackages: ['change-case'], }); diff --git a/src/tools/color-converter/index.ts b/src/tools/color-converter/index.ts index 9a295e2b..2843ff87 100644 --- a/src/tools/color-converter/index.ts +++ b/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'], }); diff --git a/src/tools/crontab-generator/index.ts b/src/tools/crontab-generator/index.ts index 429d6e14..7a555b9c 100644 --- a/src/tools/crontab-generator/index.ts +++ b/src/tools/crontab-generator/index.ts @@ -23,4 +23,5 @@ export const tool = defineTool({ ], component: () => import('./crontab-generator.vue'), icon: Alarm, + npmPackages: ['cronstrue'], }); diff --git a/src/tools/date-time-converter/index.ts b/src/tools/date-time-converter/index.ts index b0413fc0..1ccea3c6 100644 --- a/src/tools/date-time-converter/index.ts +++ b/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'], }); diff --git a/src/tools/emoji-picker/index.ts b/src/tools/emoji-picker/index.ts index 3a28cf0f..b476959e 100644 --- a/src/tools/emoji-picker/index.ts +++ b/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'], }); diff --git a/src/tools/encryption/index.ts b/src/tools/encryption/index.ts index c8dd85db..da396a3c 100644 --- a/src/tools/encryption/index.ts +++ b/src/tools/encryption/index.ts @@ -10,4 +10,5 @@ export const tool = defineTool({ component: () => import('./encryption.vue'), icon: Lock, redirectFrom: ['/cypher'], + npmPackages: ['crypto-s'], }); diff --git a/src/tools/hmac-generator/index.ts b/src/tools/hmac-generator/index.ts index 3500684e..f55d89a5 100644 --- a/src/tools/hmac-generator/index.ts +++ b/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'], }); diff --git a/src/tools/html-wysiwyg-editor/index.ts b/src/tools/html-wysiwyg-editor/index.ts index 3a2ab007..b426e3a7 100644 --- a/src/tools/html-wysiwyg-editor/index.ts +++ b/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'], }); diff --git a/src/tools/iban-validator-and-parser/index.ts b/src/tools/iban-validator-and-parser/index.ts index ff7ff135..36054d05 100644 --- a/src/tools/iban-validator-and-parser/index.ts +++ b/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'], }); diff --git a/src/tools/ipv6-ula-generator/index.ts b/src/tools/ipv6-ula-generator/index.ts index 51bfd6fc..c646e93e 100644 --- a/src/tools/ipv6-ula-generator/index.ts +++ b/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'], }); diff --git a/src/tools/json-diff/index.ts b/src/tools/json-diff/index.ts index a4c0319c..5097c97d 100644 --- a/src/tools/json-diff/index.ts +++ b/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'], }); diff --git a/src/tools/json-minify/index.ts b/src/tools/json-minify/index.ts index fbe5831b..1920886c 100644 --- a/src/tools/json-minify/index.ts +++ b/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'], }); diff --git a/src/tools/json-to-csv/index.ts b/src/tools/json-to-csv/index.ts index 9f38b82f..3c20ef20 100644 --- a/src/tools/json-to-csv/index.ts +++ b/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'], }); diff --git a/src/tools/json-to-toml/index.ts b/src/tools/json-to-toml/index.ts index da42c18d..7db00ab8 100644 --- a/src/tools/json-to-toml/index.ts +++ b/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'], }); diff --git a/src/tools/json-to-yaml-converter/index.ts b/src/tools/json-to-yaml-converter/index.ts index c01e3ec0..be2d9c1f 100644 --- a/src/tools/json-to-yaml-converter/index.ts +++ b/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'], }); diff --git a/src/tools/json-viewer/index.ts b/src/tools/json-viewer/index.ts index bc488245..9df6393f 100644 --- a/src/tools/json-viewer/index.ts +++ b/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'], }); diff --git a/src/tools/jwt-parser/index.ts b/src/tools/jwt-parser/index.ts index 939b4b34..70376991 100644 --- a/src/tools/jwt-parser/index.ts +++ b/src/tools/jwt-parser/index.ts @@ -25,4 +25,5 @@ export const tool = defineTool({ ], component: () => import('./jwt-parser.vue'), icon: Key, + npmPackages: ['jwt-decode'], }); diff --git a/src/tools/mac-address-lookup/index.ts b/src/tools/mac-address-lookup/index.ts index 367bcebb..ca8964e6 100644 --- a/src/tools/mac-address-lookup/index.ts +++ b/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'], }); diff --git a/src/tools/math-evaluator/index.ts b/src/tools/math-evaluator/index.ts index eb4290ba..2addaaf4 100644 --- a/src/tools/math-evaluator/index.ts +++ b/src/tools/math-evaluator/index.ts @@ -41,4 +41,5 @@ export const tool = defineTool({ ], component: () => import('./math-evaluator.vue'), icon: Math, + npmPackages: ['mathjs'], }); diff --git a/src/tools/meta-tag-generator/index.ts b/src/tools/meta-tag-generator/index.ts index c6224410..d928cd05 100644 --- a/src/tools/meta-tag-generator/index.ts +++ b/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'], }); diff --git a/src/tools/mime-types/index.ts b/src/tools/mime-types/index.ts index da6ba0c4..6a6c7a39 100644 --- a/src/tools/mime-types/index.ts +++ b/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'], }); diff --git a/src/tools/otp-code-generator-and-validator/index.ts b/src/tools/otp-code-generator-and-validator/index.ts index 42ecc9fc..3bb09a62 100644 --- a/src/tools/otp-code-generator-and-validator/index.ts +++ b/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'], }); diff --git a/src/tools/pdf-signature-checker/index.ts b/src/tools/pdf-signature-checker/index.ts index 8b5d356b..12ef5788 100644 --- a/src/tools/pdf-signature-checker/index.ts +++ b/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'], }); diff --git a/src/tools/phone-parser-and-formatter/index.ts b/src/tools/phone-parser-and-formatter/index.ts index 094b21e8..d9ca1902 100644 --- a/src/tools/phone-parser-and-formatter/index.ts +++ b/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'], }); diff --git a/src/tools/qr-code-generator/index.ts b/src/tools/qr-code-generator/index.ts index b97b4cbc..b626e961 100644 --- a/src/tools/qr-code-generator/index.ts +++ b/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'], }); diff --git a/src/tools/rsa-key-pair-generator/index.ts b/src/tools/rsa-key-pair-generator/index.ts index 3d034e5b..72e746ff 100644 --- a/src/tools/rsa-key-pair-generator/index.ts +++ b/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'], }); diff --git a/src/tools/slugify-string/index.ts b/src/tools/slugify-string/index.ts index 1f1bfcf3..63c7769e 100644 --- a/src/tools/slugify-string/index.ts +++ b/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'], }); diff --git a/src/tools/sql-prettify/index.ts b/src/tools/sql-prettify/index.ts index 96bff0fe..0b1b9216 100644 --- a/src/tools/sql-prettify/index.ts +++ b/src/tools/sql-prettify/index.ts @@ -24,4 +24,5 @@ export const tool = defineTool({ ], component: () => import('./sql-prettify.vue'), icon: Database, + npmPackages: ['sql-formatter'], }); diff --git a/src/tools/toml-to-json/index.ts b/src/tools/toml-to-json/index.ts index 77a1b26e..70544757 100644 --- a/src/tools/toml-to-json/index.ts +++ b/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'], }); diff --git a/src/tools/toml-to-yaml/index.ts b/src/tools/toml-to-yaml/index.ts index 2ee0958b..56078718 100644 --- a/src/tools/toml-to-yaml/index.ts +++ b/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'], }); diff --git a/src/tools/ulid-generator/index.ts b/src/tools/ulid-generator/index.ts index c12679a7..0e877db5 100644 --- a/src/tools/ulid-generator/index.ts +++ b/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'], }); diff --git a/src/tools/user-agent-parser/index.ts b/src/tools/user-agent-parser/index.ts index 4d026145..f2d3a442 100644 --- a/src/tools/user-agent-parser/index.ts +++ b/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'], }); diff --git a/src/tools/uuid-generator/index.ts b/src/tools/uuid-generator/index.ts index 54ec479f..12fc9629 100644 --- a/src/tools/uuid-generator/index.ts +++ b/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'], }); diff --git a/src/tools/wifi-qr-code-generator/index.ts b/src/tools/wifi-qr-code-generator/index.ts index b59b95df..d4384061 100644 --- a/src/tools/wifi-qr-code-generator/index.ts +++ b/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'], }); diff --git a/src/tools/xml-formatter/index.ts b/src/tools/xml-formatter/index.ts index 7aa096da..6a9fbc08 100644 --- a/src/tools/xml-formatter/index.ts +++ b/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'], }); diff --git a/src/tools/yaml-to-json-converter/index.ts b/src/tools/yaml-to-json-converter/index.ts index 60110f09..98dea0ac 100644 --- a/src/tools/yaml-to-json-converter/index.ts +++ b/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'], }); diff --git a/src/tools/yaml-to-toml/index.ts b/src/tools/yaml-to-toml/index.ts index d788887e..cb28fdbb 100644 --- a/src/tools/yaml-to-toml/index.ts +++ b/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'], }); diff --git a/src/tools/yaml-viewer/index.ts b/src/tools/yaml-viewer/index.ts index f3043270..35337f43 100644 --- a/src/tools/yaml-viewer/index.ts +++ b/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'], }); From aa90b72f2994e30c6a205f3e3401cb892ecd0594 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Fri, 12 Jul 2024 22:24:53 +0200 Subject: [PATCH 3/5] fix: deps --- package.json | 1 + pnpm-lock.yaml | 31 ++++++++++++++++++++++--------- 2 files changed, 23 insertions(+), 9 deletions(-) diff --git a/package.json b/package.json index c6cb7757..a49b27a3 100644 --- a/package.json +++ b/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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8619d8c0..61c00078 100644 --- a/pnpm-lock.yaml +++ b/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 From aee135386bd47e9fa35c23ed230b8bc0aa5ffdb2 Mon Sep 17 00:00:00 2001 From: ShareVB Date: Fri, 12 Jul 2024 22:59:22 +0200 Subject: [PATCH 4/5] fix: better link style --- components.d.ts | 1 + src/layouts/tool.layout.vue | 18 +++++++++++++++--- 2 files changed, 16 insertions(+), 3 deletions(-) diff --git a/components.d.ts b/components.d.ts index f2c3146f..a61384ad 100644 --- a/components.d.ts +++ b/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'] diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue index 38c8c930..14a845c8 100644 --- a/src/layouts/tool.layout.vue +++ b/src/layouts/tool.layout.vue @@ -7,6 +7,8 @@ import VueMarkdown from 'vue-markdown-render'; import BaseLayout from './base.layout.vue'; import FavoriteButton from '@/components/FavoriteButton.vue'; import type { Tool } from '@/tools/tools.types'; +import { useTheme } from '@/ui/c-link/c-link.theme'; +import { useThemeVars } from 'naive-ui'; const route = useRoute(); @@ -33,7 +35,10 @@ const toolFooter = computed(() => { const createLink = (linkText: string, url: string) => { return `[${linkText.replace('[', '\\[').replace(']', '\\]')}](${url.replace('(', '%28').replace(')', '%29')})`; }; - const footer = t(`tools.${i18nKey.value}.footer`, String(route.meta.footer)); + 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( @@ -42,6 +47,7 @@ const toolFooter = computed(() => { ); return ((npmPackages.length > 0 ? `Made with ${npmPackages.join(', ')}\n` : '') + footer).trim(); }); +const themeVars = useThemeVars();