mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-05-09 07:35:01 -04:00
Merge branch 'main' into tools/mac-address-generator
This commit is contained in:
Istvan Olah
GitHub
commit
8c08ca739f
14 changed files with 121 additions and 68 deletions
|
|
@ -7,39 +7,39 @@ const { isDarkTheme } = toRefs(styleStore);
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<c-tooltip tooltip="Github repository" position="bottom">
|
||||
<c-tooltip :tooltip="$t('home.nav.github')" position="bottom">
|
||||
<c-button
|
||||
circle
|
||||
variant="text"
|
||||
href="https://github.com/CorentinTh/it-tools"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
aria-label="IT-Tools' GitHub repository"
|
||||
:aria-label="$t('home.nav.githubRepository')"
|
||||
>
|
||||
<n-icon size="25" :component="BrandGithub" />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
|
||||
<c-tooltip tooltip="Twitter account" position="bottom">
|
||||
<c-tooltip :tooltip="$t('home.nav.twitter')" position="bottom">
|
||||
<c-button
|
||||
circle
|
||||
variant="text"
|
||||
href="https://twitter.com/ittoolsdottech"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
aria-label="IT Tools' Twitter account"
|
||||
:aria-label="$t('home.nav.twitterAccount')"
|
||||
>
|
||||
<n-icon size="25" :component="BrandTwitter" />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
|
||||
<c-tooltip tooltip="About IT-Tools" position="bottom">
|
||||
<c-button circle variant="text" to="/about" aria-label="About">
|
||||
<c-tooltip :tooltip="$t('home.nav.about')" position="bottom">
|
||||
<c-button circle variant="text" to="/about" :aria-label="$t('home.nav.aboutLabel')">
|
||||
<n-icon size="25" :component="InfoCircle" />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
<c-tooltip :tooltip="isDarkTheme ? 'Light mode' : 'Dark mode'" position="bottom">
|
||||
<c-button circle variant="text" aria-label="Toggle dark/light mode" @click="() => styleStore.toggleDark()">
|
||||
<c-tooltip :tooltip="isDarkTheme ? $t('home.nav.lightMode') : $t('home.nav.darkMode')" position="bottom">
|
||||
<c-button circle variant="text" :aria-label="$t('home.nav.mode')" @click="() => styleStore.toggleDark()">
|
||||
<n-icon v-if="isDarkTheme" size="25" :component="Sun" />
|
||||
<n-icon v-else size="25" :component="Moon" />
|
||||
</c-button>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@ const appTheme = useAppTheme();
|
|||
:bordered="false"
|
||||
:color="{ color: theme.primaryColor, textColor: theme.tagColor }"
|
||||
>
|
||||
New
|
||||
{{ $t('toolCard.new') }}
|
||||
</n-tag>
|
||||
|
||||
<FavoriteButton :tool="tool" />
|
||||
|
|
|
|||
|
|
@ -41,7 +41,7 @@ const tools = computed<ToolCategory[]>(() => [
|
|||
</div>
|
||||
<div class="divider" />
|
||||
<div class="subtitle">
|
||||
Handy tools for developers
|
||||
{{ $t('home.subtitle') }}
|
||||
</div>
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
|
@ -88,20 +88,20 @@ const tools = computed<ToolCategory[]>(() => [
|
|||
<c-button
|
||||
circle
|
||||
variant="text"
|
||||
aria-label="Toggle menu"
|
||||
:aria-label="$t('home.toggleMenu')"
|
||||
@click="styleStore.isMenuCollapsed = !styleStore.isMenuCollapsed"
|
||||
>
|
||||
<NIcon size="25" :component="Menu2" />
|
||||
</c-button>
|
||||
|
||||
<c-tooltip tooltip="Home" position="bottom">
|
||||
<c-button to="/" circle variant="text" aria-label="Home">
|
||||
<c-button to="/" circle variant="text" :aria-label="$t('home.home')">
|
||||
<NIcon size="25" :component="Home2" />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
|
||||
<c-tooltip tooltip="UI Lib" position="bottom">
|
||||
<c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" aria-label="UI Lib">
|
||||
<c-button v-if="config.app.env === 'development'" to="/c-lib" circle variant="text" :aria-label="$t('home.uiLib')">
|
||||
<icon-mdi:brush-variant text-20px />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
|
|
@ -122,7 +122,7 @@ const tools = computed<ToolCategory[]>(() => [
|
|||
:bordered="false"
|
||||
@click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
|
||||
>
|
||||
Buy me a coffee
|
||||
{{ $t('home.buyMeACoffee') }}
|
||||
<NIcon v-if="!styleStore.isSmallScreen" :component="Heart" ml-2 />
|
||||
</c-button>
|
||||
</c-tooltip>
|
||||
|
|
|
|||
|
|
@ -11,17 +11,17 @@ useHead({ title: 'Page not found - IT Tools' });
|
|||
</span>
|
||||
|
||||
<h1 m-0 mt-3>
|
||||
404 Not Found
|
||||
{{ $t('404.notFound') }}
|
||||
</h1>
|
||||
<div mt-4 op-60>
|
||||
Sorry, this page does not seem to exist
|
||||
{{ $t('404.sorry') }}
|
||||
</div>
|
||||
<div mb-8 op-60>
|
||||
Maybe the cache is doing tricky things, try force-refreshing?
|
||||
{{ $t('404.maybe') }}
|
||||
</div>
|
||||
|
||||
<c-button to="/">
|
||||
Back home
|
||||
{{ $t('404.backHome') }}
|
||||
</c-button>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -8,62 +8,56 @@ const { tracker } = useTracker();
|
|||
|
||||
<template>
|
||||
<div mx-auto mt-50px max-w-600px>
|
||||
<h1>About IT-Tools</h1>
|
||||
<h1>{{ $t('about.h1') }}</h1>
|
||||
<p text-justify>
|
||||
This wonderful website, made with ❤ by
|
||||
{{ $t('about.h1p1') }}
|
||||
<c-link href="https://github.com/CorentinTh" target="_blank" rel="noopener">
|
||||
Corentin Thomasset
|
||||
</c-link>,
|
||||
aggregates useful tools for developer and people working in IT. If you find it useful, please feel free to share
|
||||
it to people you think may find it useful too and don't forget to bookmark it in your shortcut bar!
|
||||
</c-link>{{ $t('about.h1p2') }}
|
||||
</p>
|
||||
<p text-justify>
|
||||
IT Tools is open-source (under the MIT license) and free, and will always be, but it costs me money to host and
|
||||
renew the domain name. If you want to support my work, and encourage me to add more tools, please consider
|
||||
supporting by
|
||||
{{ $t('about.h1p3') }}
|
||||
<c-link
|
||||
href="https://www.buymeacoffee.com/cthmsst"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
@click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
|
||||
>
|
||||
sponsoring me
|
||||
{{ $t('about.h1p4') }}
|
||||
</c-link>.
|
||||
</p>
|
||||
|
||||
<h2>Technologies</h2>
|
||||
<h2>{{ $t('about.h2') }}</h2>
|
||||
<p text-justify>
|
||||
IT Tools is made in Vue.js (Vue 3) with the the Naive UI component library and is hosted and continuously deployed
|
||||
by Vercel. Third-party open-source libraries are used in some tools, you may find the complete list in the
|
||||
{{ $t('about.h2p1') }}
|
||||
<c-link href="https://github.com/CorentinTh/it-tools/blob/main/package.json" rel="noopener" target="_blank">
|
||||
package.json
|
||||
</c-link>
|
||||
file of the repository.
|
||||
{{ $t('about.h2p2') }}
|
||||
</p>
|
||||
|
||||
<h2>Found a bug? A tool is missing?</h2>
|
||||
<h2>{{ $t('about.h3') }}</h2>
|
||||
<p text-justify>
|
||||
If you need a tool that is currently not present here, and you think can be useful, you are welcome to submit a
|
||||
feature request in the
|
||||
{{ $t('about.h3p1') }}
|
||||
<c-link
|
||||
href="https://github.com/CorentinTh/it-tools/issues/new/choose"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
issues section
|
||||
{{ $t('about.h3p2') }}
|
||||
</c-link>
|
||||
in the GitHub repository.
|
||||
{{ $t('about.h3p3') }}
|
||||
</p>
|
||||
<p text-justify>
|
||||
And if you found a bug, or something doesn't work as expected, please file a bug report in the
|
||||
{{ $t('about.h3p4') }}
|
||||
<c-link
|
||||
href="https://github.com/CorentinTh/it-tools/issues/new/choose"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
issues section
|
||||
{{ $t('about.h3p5') }}
|
||||
</c-link>
|
||||
in the GitHub repository.
|
||||
{{ $t('about.h3p6') }}
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -17,21 +17,21 @@ const { t } = useI18n();
|
|||
<div class="grid-wrapper">
|
||||
<n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
||||
<n-gi>
|
||||
<ColoredCard title="You like it-tools?" :icon="Heart">
|
||||
Give us a star on
|
||||
<ColoredCard :title="$t('home.follow.title')" :icon="Heart">
|
||||
{{ $t('home.follow.p1') }}
|
||||
<a
|
||||
href="https://github.com/CorentinTh/it-tools"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
aria-label="IT-Tools' GitHub repository"
|
||||
:aria-label="$t('home.follow.githubRepository')"
|
||||
>GitHub</a>
|
||||
or follow us on
|
||||
{{ $t('home.follow.p2') }}
|
||||
<a
|
||||
href="https://twitter.com/ittoolsdottech"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
aria-label="IT-Tools' Twitter account"
|
||||
>Twitter</a>! Thank you
|
||||
:aria-label="$t('home.follow.twitterAccount')"
|
||||
>Twitter</a>{{ $t('home.follow.thankYou') }}
|
||||
<n-icon :component="Heart" />
|
||||
</ColoredCard>
|
||||
</n-gi>
|
||||
|
|
@ -39,7 +39,7 @@ const { t } = useI18n();
|
|||
|
||||
<transition name="height">
|
||||
<div v-if="toolStore.favoriteTools.length > 0">
|
||||
<n-h3>Your favorite tools</n-h3>
|
||||
<n-h3>{{ $t('home.categories.favoriteTools') }}</n-h3>
|
||||
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
||||
<n-gi v-for="tool in toolStore.favoriteTools" :key="tool.name">
|
||||
<ToolCard :tool="tool" />
|
||||
|
|
@ -57,7 +57,7 @@ const { t } = useI18n();
|
|||
</n-grid>
|
||||
</div>
|
||||
|
||||
<n-h3>All the tools</n-h3>
|
||||
<n-h3>{{ $t('home.categories.allTools') }}</n-h3>
|
||||
<n-grid x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8">
|
||||
<n-gi v-for="tool in toolStore.tools" :key="tool.name">
|
||||
<transition>
|
||||
|
|
|
|||
|
|
@ -29,3 +29,9 @@ export const i18nPlugin: Plugin = {
|
|||
app.use(i18n);
|
||||
},
|
||||
};
|
||||
|
||||
export const translate = function (localeKey: string) {
|
||||
// @ts-expect-error global
|
||||
const hasKey = i18n.global.te(localeKey, i18n.global.locale);
|
||||
return hasKey ? i18n.global.t(localeKey) : localeKey;
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
import { ArrowsShuffle } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
import { translate } from '@/plugins/i18n.plugin';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Token generator',
|
||||
name: translate('tools.token-generator.title'),
|
||||
path: '/token-generator',
|
||||
description:
|
||||
'Generate random string with the chars you want: uppercase or lowercase letters, numbers and/or symbols.',
|
||||
description: translate('tools.token-generator.description'),
|
||||
keywords: ['token', 'random', 'string', 'alphanumeric', 'symbols', 'number', 'letters', 'lowercase', 'uppercase'],
|
||||
component: () => import('./token-generator.tool.vue'),
|
||||
icon: ArrowsShuffle,
|
||||
|
|
|
|||
|
|
@ -6,4 +6,10 @@ tools:
|
|||
uppercase: Uppercase (ABC...)
|
||||
lowercase: Lowercase (abc...)
|
||||
numbers: Numbers (123...)
|
||||
symbols: Symbols (!-;...)
|
||||
symbols: Symbols (!-;...)
|
||||
length: Length
|
||||
tokenPlaceholder: 'The token...'
|
||||
copied: Token copied to the clipboard
|
||||
button:
|
||||
copy: Copy
|
||||
refresh: Refresh
|
||||
|
|
@ -21,7 +21,7 @@ const [token, refreshToken] = computedRefreshable(() =>
|
|||
}),
|
||||
);
|
||||
|
||||
const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
|
||||
const { copy } = useCopy({ source: token, text: t('tools.token-generator.copied') });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -51,14 +51,14 @@ const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard'
|
|||
</div>
|
||||
</n-form>
|
||||
|
||||
<n-form-item :label="`Length (${length})`" label-placement="left">
|
||||
<n-form-item :label="`${t('tools.token-generator.length')} (${length})`" label-placement="left">
|
||||
<n-slider v-model:value="length" :step="1" :min="1" :max="512" />
|
||||
</n-form-item>
|
||||
|
||||
<c-input-text
|
||||
v-model:value="token"
|
||||
multiline
|
||||
placeholder="The token..."
|
||||
:placeholder="t('tools.token-generator.tokenPlaceholder')"
|
||||
readonly
|
||||
rows="3"
|
||||
autosize
|
||||
|
|
@ -67,10 +67,10 @@ const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard'
|
|||
|
||||
<div mt-5 flex justify-center gap-3>
|
||||
<c-button @click="copy()">
|
||||
Copy
|
||||
{{ t('tools.token-generator.button.copy') }}
|
||||
</c-button>
|
||||
<c-button @click="refreshToken">
|
||||
Refresh
|
||||
{{ t('tools.token-generator.button.refresh') }}
|
||||
</c-button>
|
||||
</div>
|
||||
</c-card>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue