mirrors/it-tools
1
0
Fork 0
mirror of https://github.com/CorentinTh/it-tools.git synced 2025-04-21 23:36:15 -04:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge branch 'main' into border-generator-feature

Browse source
This commit is contained in:
Adrian Ortiz 2024-10-26 12:40:02 -06:00 • committed by GitHub
commit d3c00746b6
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
17 changed files with 136 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -117,7 +117,7 @@ It will create a directory in `src/tools` with the correct files, and a the impo
Big thanks to all the people who have already contributed!
[![contributors](https://contrib.rocks/image?repo=corentinth/it-tools)](https://github.com/corentinth/it-tools/graphs/contributors)
[![contributors](https://contrib.rocks/image?repo=corentinth/it-tools&refresh=1)](https://github.com/corentinth/it-tools/graphs/contributors)
## Credits

7
locales/de.yml
View file

@ -10,6 +10,7 @@ home:
newestTools: Neueste Tools
favoriteTools: Deine Lieblingstools
allTools: Alle Tools
favoritesDndToolTip: 'Ziehen und Ablegen, um Favoriten neu zu ordnen'
subtitle: Praktische Tools für Entwickler
toggleMenu: Menü umschalten
home: Startseite
@ -21,13 +22,13 @@ home:
p1: Gib uns einen Stern auf
githubRepository: IT-Tools GitHub-Repository
p2: oder folge uns auf
twitterAccount: IT-Tools Twitter-Konto
twitterXAccount: IT-Tools X-Konto
thankYou: Vielen Dank!
nav:
github: GitHub-Repository
githubRepository: IT-Tools GitHub-Repository
twitter: Twitter-Konto
twitterAccount: IT-Tools Twitter-Konto
twitterX: X-Konto
twitterXAccount: IT-Tools X-Konto
about: Über IT-Tools
aboutLabel: Über
darkMode: Dunkelmodus

7
locales/en.yml
View file

@ -3,6 +3,7 @@ home:
newestTools: Newest tools
favoriteTools: 'Your favorite tools'
allTools: 'All the tools'
favoritesDndToolTip: 'Drag and drop to reorder favorites'
subtitle: 'Handy tools for developers'
toggleMenu: 'Toggle menu'
home: Home
@ -14,13 +15,13 @@ home:
p1: 'Give us a star on'
githubRepository: 'IT-Tools GitHub repository'
p2: 'or follow us on'
twitterAccount: 'IT-Tools Twitter account'
twitterXAccount: 'IT-Tools X account'
thankYou: 'Thank you!'
nav:
github: 'GitHub repository'
githubRepository: 'IT-Tools GitHub repository'
twitter: 'Twitter account'
twitterAccount: 'IT Tools Twitter account'
twitterX: 'X account'
twitterXAccount: 'IT Tools X account'
about: 'About IT-Tools'
aboutLabel: 'About'
darkMode: 'Dark mode'

7
locales/es.yml
View file

@ -3,6 +3,7 @@ home:
newestTools: Nuevas herramientas
favoriteTools: 'Tus herramientas favoritas'
allTools: 'Todas las herramientas'
favoritesDndToolTip: 'Arrastra y suelta para reordenar favoritos'
subtitle: 'Herramientas practicas para desarrolladores'
toggleMenu: 'Toggle menu'
home: Home
@ -14,13 +15,13 @@ home:
p1: 'Danos una estrella en'
githubRepository: 'Repositorio de IT-Tools en GitHub'
p2: 'o síguenos en'
twitterAccount: 'Cuenta de twitter de IT-Tools'
twitterXAccount: 'Cuenta de X de IT-Tools'
thankYou: 'Muchas gracias!'
nav:
github: 'Repositorio en github'
githubRepository: 'IT-Tools GitHub repository'
twitter: 'Cuenta de Twitter'
twitterAccount: 'Cuenta de twitter de IT Tools'
twitterX: 'Cuenta de X'
twitterXAccount: 'Cuenta de X de IT Tools'
about: 'Sobre IT-Tools'
aboutLabel: 'Sobre'
darkMode: 'Modo obscuro'

7
locales/fr.yml
View file

@ -3,6 +3,7 @@ home:
newestTools: 'Les nouveaux outils'
favoriteTools: 'Vos outils favoris'
allTools: 'Tous les outils'
favoritesDndToolTip: 'Faites glisser et déposez pour réordonner vos favoris'
subtitle: 'Outils pour les développeurs'
toggleMenu: 'Menu'
home: Accueil
@ -13,13 +14,13 @@ home:
p1: 'Soutenez-nous avec une star sur'
githubRepository: "le dépôt GitHub d'IT-Tools"
p2: 'ou suivez-nous sur'
twitterAccount: "le compte Twitter d'IT-Tools"
twitterXAccount: "le compte X d'IT-Tools"
thankYou: 'Merci !'
nav:
github: 'Dépôt GitHub'
githubRepository: "Dépôt GitHub d'IT-Tools"
twitter: 'Compte Twitter'
twitterAccount: "Compte Twitter d'IT-Tools"
twitterX: 'Compte X'
twitterXAccount: "Compte X d'IT-Tools"
about: "À propos d'IT-Tools"
aboutLabel: 'À propos'
darkMode: 'Mode sombre'

7
locales/no.yml
View file

@ -3,6 +3,7 @@ home:
newestTools: Nyeste verktøy
favoriteTools: 'Dine favoritt verktøy'
allTools: 'Alle verktøyene'
favoritesDndToolTip: 'Dra og slipp for å omordne favoritter'
subtitle: 'Nyttige verktøy for utviklere'
toggleMenu: 'Vekslemenmy'
home: Hjem
@ -14,13 +15,13 @@ home:
p1: 'Gi oss en stjerne på'
githubRepository: 'IT-Tools GitHub-depotet'
p2: 'eller følg oss på'
twitterAccount: 'IT-Tools sin twitter konto'
twitterXAccount: 'IT-Tools sin X konto'
thankYou: 'Tusen takk!'
nav:
github: 'GitHub-depot'
githubRepository: 'IT-Tools GitHub-depot'
twitter: 'Twitter konto'
twitterAccount: 'IT Tools Twitter konto'
twitterX: 'X konto'
twitterXAccount: 'IT Tools X konto'
about: 'Om IT-Tools'
aboutLabel: 'Om'
darkMode: 'Mørk modus'

7
locales/pt.yml
View file

@ -3,6 +3,7 @@ home:
newestTools: 'Novas ferramentas'
favoriteTools: 'Suas ferramentas favoritas'
allTools: 'Todas as ferramentas'
favoritesDndToolTip: 'Arraste e solte para reordenar favoritos'
subtitle: 'Ferraentas úteis para desenvolvedores'
toggleMenu: 'Menu'
home: 'Início'
@ -14,13 +15,13 @@ home:
p1: 'Dê uma estrela no'
githubRepository: 'repositório do IT-Tools no GitHub'
p2: 'ou siga nossa'
twitterAccount: 'conta IT-Tools no Twitter'
twitterXAccount: 'conta IT-Tools no X'
thankYou: 'Obrigado !'
nav:
github: 'Repositório no GitHub'
githubRepository: 'repositório do IT-Tools no GitHub'
twitter: 'Conta no Twitter'
twitterAccount: 'conta do IT Tools no Twitter'
twitterX: 'Conta no X'
twitterXAccount: 'conta do IT Tools no X'
about: 'Sobre o IT-Tools'
aboutLabel: 'Sobre'
darkMode: 'Modo Escuro'

7
locales/uk.yml
View file

@ -3,6 +3,7 @@ home:
newestTools: Найновіші інструменти
favoriteTools: 'Ваші улюблені інструменти'
allTools: 'Усі інструменти'
favoritesDndToolTip: 'Перетягніть і відпустіть, щоб змінити порядок улюблених'
subtitle: 'Зручні інструменти для розробників'
toggleMenu: 'Перемикання меню'
home: Головна
@ -14,13 +15,13 @@ home:
p1: 'Додайте нам зірку на'
githubRepository: 'GitHub-репозиторій IT-Tools'
p2: 'або слідкуйте за нами на'
twitterAccount: 'Твіттер-акаунт IT-Tools'
twitterXAccount: 'X-акаунт IT-Tools'
thankYou: 'Дякуємо!'
nav:
github: 'GitHub-репозиторій'
githubRepository: 'GitHub-репозиторій IT-Tools'
twitter: 'Твіттер'
twitterAccount: 'Твіттер-акаунт IT-Tools'
twitterX: 'X'
twitterXAccount: 'X-акаунт IT-Tools'
about: 'Про IT-Tools'
aboutLabel: 'Про нас'
darkMode: 'Темний режим'

7
locales/vi.yml
View file

@ -3,6 +3,7 @@ home:
newestTools: Công cụ mới nhất
favoriteTools: 'Công cụ yêu thích của bạn'
allTools: 'Tất cả công cụ'
favoritesDndToolTip: 'Kéo thả để sắp xếp lại yêu thích'
subtitle: 'Công cụ cho nhà phát triển.'
toggleMenu: 'Chuyển đổi menu'
home: Trang chủ
@ -14,13 +15,13 @@ home:
p1: 'Hãy cho chúng tôi một ngôi sao trên'
githubRepository: 'Kho GitHub IT-Tools'
p2: 'hoặc theo dõi chúng tôi trên'
twitterAccount: 'Tài khoản Twitter IT-Tools'
twitterXAccount: 'Tài khoản X IT-Tools'
thankYou: 'Cảm ơn bạn!'
nav:
github: 'Kho GitHub'
githubRepository: 'Kho GitHub IT-Tools'
twitter: 'Tài khoản Twitter'
twitterAccount: 'Tài khoản Twitter IT Tools'
twitterX: 'Tài khoản X'
twitterXAccount: 'Tài khoản X IT Tools'
about: 'Về IT-Tools'
aboutLabel: 'Giới thiệu'
darkMode: 'Chế độ tối'

7
locales/zh.yml
View file

@ -3,6 +3,7 @@ home:
newestTools: '最新工具'
favoriteTools: '我的收藏'
allTools: '全部工具'
favoritesDndToolTip: '拖放重新排列收藏夹'
subtitle: '助力开发人员和 IT 工作者'
toggleMenu: '切换菜单'
home: '主页'
@ -14,13 +15,13 @@ home:
p1: '给我们 Star'
githubRepository: 'GitHub 仓库'
p2: '关注我们的'
twitterAccount: 'Twitter'
twitterXAccount: 'IT-Tools X 账号'
thankYou: '感谢您的支持！'
nav:
github: 'GitHub 仓库'
githubRepository: 'GitHub 仓库'
twitter: 'Twitter 账号'
twitterAccount: 'Twitter 账号'
twitterX: 'Twitter 账号'
twitterXAccount: 'IT-Tools X 账号'
about: '关于 IT-Tools'
aboutLabel: '关于'
darkMode: '深色模式'

2
package.json
View file

@ -40,6 +40,7 @@
"@it-tools/oggen": "^1.3.0",
"@regexper/render": "^1.0.0",
"@sindresorhus/slugify": "^2.2.1",
"@tabler/icons-vue": "^3.20.0",
"@tiptap/pm": "2.1.6",
"@tiptap/starter-kit": "2.1.6",
"@tiptap/vue-3": "2.0.3",
@ -98,6 +99,7 @@
"vue-router": "^4.1.6",
"vue-shadow-dom": "^4.2.0",
"vue-tsc": "^1.8.1",
"vuedraggable": "^4.1.0",
"xml-formatter": "^3.3.2",
"xml-js": "^1.6.11",
"yaml": "^2.2.1"

28
pnpm-lock.yaml generated
View file

@ -17,6 +17,9 @@ dependencies:
'@sindresorhus/slugify':
specifier: ^2.2.1
version: 2.2.1
'@tabler/icons-vue':
specifier: ^3.20.0
version: 3.20.0(vue@3.3.4)
'@tiptap/pm':
specifier: 2.1.6
version: 2.1.6
@ -191,6 +194,9 @@ dependencies:
vue-tsc:
specifier: ^1.8.1
version: 1.8.1(typescript@5.2.2)
vuedraggable:
specifier: ^4.1.0
version: 4.1.0(vue@3.3.4)
xml-formatter:
specifier: ^3.3.2
version: 3.3.2
@ -2653,6 +2659,17 @@ packages:
resolution: {integrity: sha512-BjJ/7vWNowlX3Z8O4ywT58DqbNRyYlkk6Yz/D13aB7hGmfQTvGX4Tkgtm/ApYlu9M7lCQi15xUEidqMUmdMYwg==}
dev: false
/@tabler/icons-vue@3.20.0(vue@3.3.4):
resolution: {integrity: sha512-kymV0q+bFNqU6bmdlnfK9ru88xFydYIs+jfe0160bLTmcq94ZxcLfXO5JLMq5kjntUSNb4fBvGk0mXB7aDCYnA==}
peerDependencies:
vue: '>=3.0.1'
dependencies:
'@tabler/icons': 3.20.0
vue: 3.3.4
/@tabler/icons@3.20.0:
resolution: {integrity: sha512-nXSeUzsCOxX/Of+kdUVQfxL9bG+ck8XCWNf9dGSpE+nhVexRwk/4HiDQDxFDysfT7vfgSut6GXnrZsU5M5dSlA==}
/@tiptap/core@2.1.12(@tiptap/pm@2.1.6):
resolution: {integrity: sha512-ZGc3xrBJA9KY8kln5AYTj8y+GDrKxi7u95xIl2eccrqTY5CQeRu6HRNM1yT4mAjuSaG9jmazyjGRlQuhyxCKxQ==}
peerDependencies:
@ -8217,6 +8234,9 @@ packages:
tslib: 2.5.0
dev: false
/sortablejs@1.14.0:
resolution: {integrity: sha512-pBXvQCs5/33fdN1/39pPL0NZF20LeRbLQ5jtnheIPN9JQAaufGjKdWduZn4U7wCtVuzKhmRkI0DFYHYRbB2H1w==}
/source-map-js@1.0.2:
resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
engines: {node: '>=0.10.0'}
@ -9342,6 +9362,14 @@ packages:
'@vue/server-renderer': 3.3.4(vue@3.3.4)
'@vue/shared': 3.3.4
/vuedraggable@4.1.0(vue@3.3.4):
resolution: {integrity: sha512-FU5HCWBmsf20GpP3eudURW3WdWTKIbEIQxh9/8GE806hydR9qZqRRxRE3RjqX7PkuLuMQG/A7n3cfj9rCEchww==}
peerDependencies:
vue: ^3.0.1
dependencies:
sortablejs: 1.14.0
vue: 3.3.4
/vueuc@0.4.51(vue@3.3.4):
resolution: {integrity: sha512-pLiMChM4f+W8czlIClGvGBYo656lc2Y0/mXFSCydcSmnCR1izlKPGMgiYBGjbY9FDkFG8a2HEVz7t0DNzBWbDw==}
peerDependencies:

18
src/components/NavbarButtons.vue
View file

@ -1,5 +1,5 @@
<script setup lang="ts">
import { BrandGithub, BrandTwitter, InfoCircle, Moon, Sun } from '@vicons/tabler';
import { IconBrandGithub, IconBrandX, IconInfoCircle, IconMoon, IconSun } from '@tabler/icons-vue';
import { useStyleStore } from '@/stores/style.store';
const styleStore = useStyleStore();
@ -16,32 +16,32 @@ const { isDarkTheme } = toRefs(styleStore);
rel="noopener noreferrer"
:aria-label="$t('home.nav.githubRepository')"
>
<n-icon size="25" :component="BrandGithub" />
<n-icon size="25" :component="IconBrandGithub" />
</c-button>
</c-tooltip>
<c-tooltip :tooltip="$t('home.nav.twitter')" position="bottom">
<c-tooltip :tooltip="$t('home.nav.twitterX')" position="bottom">
<c-button
circle
variant="text"
href="https://twitter.com/ittoolsdottech"
href="https://x.com/ittoolsdottech"
rel="noopener"
target="_blank"
:aria-label="$t('home.nav.twitterAccount')"
:aria-label="$t('home.nav.twitterXAccount')"
>
<n-icon size="25" :component="BrandTwitter" />
<n-icon size="25" :component="IconBrandX" />
</c-button>
</c-tooltip>
<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" />
<n-icon size="25" :component="IconInfoCircle" />
</c-button>
</c-tooltip>
<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" />
<n-icon v-if="isDarkTheme" size="25" :component="IconSun" />
<n-icon v-else size="25" :component="IconMoon" />
</c-button>
</c-tooltip>
</template>

2
src/layouts/tool.layout.vue
View file

@ -40,7 +40,7 @@ const toolDescription = computed<string>(() => t(`tools.${i18nKey.value}.descrip
</n-h1>
<div>
<FavoriteButton :tool="{ name: route.meta.name } as Tool" />
<FavoriteButton :tool="{ name: route.meta.name, path: route.path } as Tool" />
</div>
</div>

58
src/pages/Home.page.vue
View file

@ -1,6 +1,8 @@
<script setup lang="ts">
import { Heart } from '@vicons/tabler';
import { IconDragDrop, IconHeart } from '@tabler/icons-vue';
import { useHead } from '@vueuse/head';
import { computed } from 'vue';
import Draggable from 'vuedraggable';
import ColoredCard from '../components/ColoredCard.vue';
import ToolCard from '../components/ToolCard.vue';
import { useToolStore } from '@/tools/tools.store';
@ -10,13 +12,20 @@ const toolStore = useToolStore();
useHead({ title: 'IT Tools - Handy online tools for developers' });
const { t } = useI18n();
const favoriteTools = computed(() => toolStore.favoriteTools);
// Update favorite tools order when drag is finished
function onUpdateFavoriteTools() {
toolStore.updateFavoriteTools(favoriteTools.value); // Update the store with the new order
}
</script>
<template>
<div class="pt-50px">
<div class="grid-wrapper">
<div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
<ColoredCard v-if="config.showBanner" :title="$t('home.follow.title')" :icon="Heart">
<ColoredCard v-if="config.showBanner" :title="$t('home.follow.title')" :icon="IconHeart">
{{ $t('home.follow.p1') }}
<a
href="https://github.com/CorentinTh/it-tools"
@ -26,13 +35,13 @@ const { t } = useI18n();
>GitHub</a>
{{ $t('home.follow.p2') }}
<a
href="https://twitter.com/ittoolsdottech"
href="https://x.com/ittoolsdottech"
rel="noopener"
target="_blank"
:aria-label="$t('home.follow.twitterAccount')"
>Twitter</a>.
:aria-label="$t('home.follow.twitterXAccount')"
>X</a>.
{{ $t('home.follow.thankYou') }}
<n-icon :component="Heart" />
<n-icon :component="IconHeart" />
</ColoredCard>
<a href="https://bit.ly/3zBl7DG" target="_blank" rel="noopener" class="text-current decoration-none">
@ -66,10 +75,21 @@ const { t } = useI18n();
<div v-if="toolStore.favoriteTools.length > 0">
<h3 class="mb-5px mt-25px font-500 text-neutral-400">
{{ $t('home.categories.favoriteTools') }}
<c-tooltip :tooltip="$t('home.categories.favoritesDndToolTip')">
<n-icon :component="IconDragDrop" size="18" />
</c-tooltip>
</h3>
<div class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4">
<ToolCard v-for="tool in toolStore.favoriteTools" :key="tool.name" :tool="tool" />
</div>
<Draggable
:list="favoriteTools"
class="grid grid-cols-1 gap-12px lg:grid-cols-3 md:grid-cols-3 sm:grid-cols-2 xl:grid-cols-4"
ghost-class="ghost-favorites-draggable"
item-key="name"
@end="onUpdateFavoriteTools"
>
<template #item="{ element: tool }">
<ToolCard :tool="tool" />
</template>
</Draggable>
</div>
</transition>
@ -107,4 +127,24 @@ const { t } = useI18n();
opacity: 0;
margin-bottom: 0;
}
.ghost-favorites-draggable {
opacity: 0.4;
background-color: #ccc;
border: 2px dashed #666;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
transform: scale(1.1);
animation: ghost-favorites-draggable-animation 0.2s ease-out;
}
@keyframes ghost-favorites-draggable-animation {
0% {
opacity: 0;
transform: scale(0.9);
}
100% {
opacity: 0.4;
transform: scale(1.0);
}
}
</style>

4
src/tools/html-wysiwyg-editor/editor/menu-bar.vue
View file

@ -84,8 +84,8 @@ const items: MenuItem[] = [
type: 'button',
icon: H3,
title: 'Heading 3',
action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
isActive: () => editor.value.isActive('heading', { level: 4 }),
action: () => editor.value.chain().focus().toggleHeading({ level: 3 }).run(),
isActive: () => editor.value.isActive('heading', { level: 3 }),
},
{
type: 'button',

9
src/tools/tools.store.ts
View file

@ -45,7 +45,10 @@ export const useToolStore = defineStore('tools', () => {
newTools: computed(() => tools.value.filter(({ isNew }) => isNew)),
addToolToFavorites({ tool }: { tool: MaybeRef<Tool> }) {
favoriteToolsName.value.push(get(tool).path);
const toolPath = get(tool).path;
if (toolPath) {
favoriteToolsName.value.push(toolPath);
}
},
removeToolFromFavorites({ tool }: { tool: MaybeRef<Tool> }) {
@ -56,5 +59,9 @@ export const useToolStore = defineStore('tools', () => {
return favoriteToolsName.value.includes(get(tool).name)
|| favoriteToolsName.value.includes(get(tool).path);
},
updateFavoriteTools(newOrder: ToolWithCategory[]) {
favoriteToolsName.value = newOrder.map(tool => tool.path);
},
};
});