+
Skip to content

feat(i18n): home page #687

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Oct 23, 2023
Merged

feat(i18n): home page #687

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8d04786
feat(i18n): home page
motui Oct 22, 2023
093daa4
Merge branch 'main' into feature/home
motui Oct 22, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
27 changes: 26 additions & 1 deletion locales/en.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,30 @@
home:
categories:
newestTools: Newest tools
favoriteTools: 'Your favorite tools'
allTools: 'All the tools'
subtitle: 'Handy tools for developers'
toggleMenu: 'Toggle menu'
home: Home
uiLib: 'UI Lib'
buyMeACoffee: 'Buy me a coffee'
follow:
title: 'You like it-tools?'
p1: 'Give us a star on'
githubRepository: 'IT-Tools GitHub repository'
p2: 'or follow us on'
twitterAccount: 'IT-Tools Twitter account'
thankYou: 'Thank you !'
nav:
github: 'GitHub repository'
githubRepository: 'IT-Tools GitHub repository'
twitter: 'Twitter account'
twitterAccount: 'IT Tools Twitter account'
about: 'About IT-Tools'
aboutLabel: 'About'
darkMode: 'Dark mode'
lightMode: 'Light mode'
mode: 'Toggle dark/light mode'
about:
h1: 'About IT-Tools'
h1p1: 'This wonderful website, made with ❤ by'
Expand All @@ -23,4 +47,5 @@ about:
maybe: 'Maybe the cache is doing tricky things, try force-refreshing?'
backHome: 'Back home'
toolCard:
new: New
new: New

16 changes: 8 additions & 8 deletions src/components/NavbarButtons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
10 changes: 5 additions & 5 deletions src/layouts/base.layout.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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>
Expand All @@ -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>
Expand Down
16 changes: 8 additions & 8 deletions src/pages/Home.page.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,29 +17,29 @@ 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>
</n-grid>

<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" />
Expand All @@ -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>
Expand Down
点击 这是indexloc提供的php浏览器服务，不要输入任何密码和下载