Compare commits

...

12 Commits

Author SHA1 Message Date
renovate[bot]
ceaa42a43f chore(deps): update dependency vue-i18n to v9.14.5 [security] 2025-10-22 01:12:01 +00:00
Corentin Thomasset
0de73e8971 chore(sponsors): added warp banner (#1664) 2025-10-10 16:06:59 +02:00
Corentin Thomasset
07eea0f484 refactor(sponsors): removed sponsor banners (#1553) 2025-04-06 23:41:40 +02:00
Corentin Thomasset
a4ab7db9e4 fix(c-input-text): set minimum height for input field (#1552) 2025-04-06 23:16:09 +02:00
Corentin THOMASSET
08d977b8cd feat(sponsor): added sponsor banner (#1422) 2024-12-14 12:15:18 +01:00
Corentin THOMASSET
63fbd3b45c fix(locales): update license from MIT to GPL-3.0 in language files (#1419) 2024-12-11 19:33:24 +00:00
Corentin THOMASSET
b47d132839 refactor(sponsor): removed sponsor banner and related configurations (#1405) 2024-11-29 23:06:39 +00:00
gitmotion
0b1b98f93e feat(favorites) drag-and-drop favorites section (#1360) 2024-10-25 22:42:12 +02:00
gitmotion
ea8c4ed077 fix(icons,branding): swap twitter to X (#1369) 2024-10-25 20:17:08 +02:00
gitmotion
ae1363937b fix(FavoriteButton): pass tool path to favorite button (#1368) 2024-10-25 16:27:14 +00:00
gitmotion
c7b80fbc78 fix(readme): refresh stale contributors graph (#1364) 2024-10-25 07:44:17 +00:00
gitmotion
131497322d feat(html-wysiwyg-editor) h3 fix (#1363) 2024-10-24 22:44:36 +00:00
19 changed files with 8929 additions and 6052 deletions

File diff suppressed because one or more lines are too long

Before

Width:  |  Height:  |  Size: 62 KiB

View File

@@ -4,11 +4,26 @@
<img src="./.github/logo-dark.png" alt="logo">
</picture>
Useful tools for developer and people working in IT. [Have a look !](https://it-tools.tech).
<p align="center">
Useful tools for developer and people working in IT. <a href="https://it-tools.tech">Try it!</a>
</p>
## Sponsors
[![Fern banner](./.github/fern-banner.svg)](https://bit.ly/3zBl7DG)
<div align="center" markdown="1">
<p align="center">
IT-Tools is proudly sponsored by:
</p>
<a href="https://go.warp.dev/it-tools">
<img alt="Warp sponsorship" width="400" src="https://raw.githubusercontent.com/warpdotdev/brand-assets/refs/heads/main/Github/Sponsor/Warp-Github-LG-01.png">
</a>
### [Warp, built for coding with multiple AI agents.](https://go.warp.dev/it-tools)
[Available for MacOS, Linux, & Windows](https://go.warp.dev/it-tools)<br>
</div>
## Functionalities and roadmap
@@ -117,7 +132,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

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
@@ -44,7 +45,7 @@ about:
ebenfalls nützlich finden könnten, und vergiss nicht, sie in deiner
Lesezeichenleiste zu speichern!
IT-Tools ist Open Source (unter der MIT-Lizenz) und kostenlos und wird es
IT-Tools ist Open Source (unter der GPL-3.0-Lizenz) und kostenlos und wird es
immer sein, aber es kostet mich Geld, die Website zu hosten und den
Domainnamen zu erneuern. Wenn du meine Arbeit unterstützen möchtest und mich
ermutigen möchtest, mehr Tools hinzuzufügen, überlege bitte, mich durch

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'
@@ -32,7 +33,7 @@ about:
This wonderful website, made with ❤ by [Corentin Thomasset](https://corentin.tech?utm_source=it-tools&utm_medium=about) , 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!
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 [sponsoring me](https://www.buymeacoffee.com/cthmsst).
IT Tools is open-source (under the GPL-3.0 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 [sponsoring me](https://www.buymeacoffee.com/cthmsst).
## Technologies

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'
@@ -32,7 +33,7 @@ about:
Este maravilloso sitio web, hecho con ❤ por [Corentin Thomasset](https://corentin.tech?utm_source=it-tools&utm_medium=about) , agrega herramientas útiles para desarrolladores y personas que trabajan en IT. Si lo encuentra útil, no dude en compartirlo con las personas que crea que también pueden encontrarlo útil y ¡no olvide marcarlo como favorito en su barra de accesos directos!
IT Tools es de código abierto (under the MIT license) y gratis, y siempre lo será, pero me cuesta dinero alojar y renovar el nombre de dominio. Si desea apoyar mi trabajo y animarme a agregar más herramientas, considere apoyarme a través de[sponsoring me](https://www.buymeacoffee.com/cthmsst).
IT Tools es de código abierto (under the GPL-3.0 license) y gratis, y siempre lo será, pero me cuesta dinero alojar y renovar el nombre de dominio. Si desea apoyar mi trabajo y animarme a agregar más herramientas, considere apoyarme a través de[sponsoring me](https://www.buymeacoffee.com/cthmsst).
## Tecnologías

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'
@@ -31,7 +32,7 @@ about:
Ce merveilleux site, fait avec ❤ par [Corentin Thomasset](https://corentin.tech?utm_source=it-tools&utm_medium=about), regroupe des outils utiles pour les développeurs et les personnes travaillant dans l'informatique. Si vous le trouvez utile, n'hésitez pas à le partager et n'oubliez pas de le mettre dans vos favoris !
IT Tools est open-source (sous licence MIT) et gratuit, et le restera toujours, mais cela me coûte de l'argent pour l'héberger et renouveler le nom de domaine. Si vous voulez soutenir mon travail, et m'encourager à ajouter plus d'outils, n'hésitez pas à me [soutenir](https://www.buymeacoffee.com/cthmsst).
IT Tools est open-source (sous licence GPL-3.0) et gratuit, et le restera toujours, mais cela me coûte de l'argent pour l'héberger et renouveler le nom de domaine. Si vous voulez soutenir mon travail, et m'encourager à ajouter plus d'outils, n'hésitez pas à me [soutenir](https://www.buymeacoffee.com/cthmsst).
## Technologies

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'
@@ -32,7 +33,7 @@ about:
Denne vidunderlige nettsiden, laget med ❤ av [Corentin Thomasset](https://corentin.tech?utm_source=it-tools&utm_medium=about) , sammenstiller nyttige verktøy for utviklere og folk som jobber innen IT. Hvis du finner dette nyttig, Del det gjerne med andre som du tror kan få nytte av dette, og ikke glem å lage et bokmerke!
IT Tools er åpen kildekode (under MIT lisensen) og gratis, og det vil det alltid være, men det koster å drifte og å fornye domenet. Hvis du ønsker å støtte arbeidet mitt, og motivere meg til å legge til flere verktøy, gjerne støtt meg ved å [sponse meg](https://www.buymeacoffee.com/cthmsst).
IT Tools er åpen kildekode (under GPL-3.0 lisensen) og gratis, og det vil det alltid være, men det koster å drifte og å fornye domenet. Hvis du ønsker å støtte arbeidet mitt, og motivere meg til å legge til flere verktøy, gjerne støtt meg ved å [sponse meg](https://www.buymeacoffee.com/cthmsst).
## Teknologier

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'
@@ -32,7 +33,7 @@ about:
Este site maravilhoso, feito com ❤ por [Corentin Thomasset](https://corentin.tech?utm_source=it-tools&utm_medium=about), junta ferramentas úteis para desenvolvedores e outras pessoas que trabalham com TI. Se você achar o site útil, fique à vontade para compartilhar com quem também possa gostar e não esqueça de salvar o bookmark na sua barra de atalhos!
O IT Tools é código aberto (sob a licença MIT), é gratuito, e sempre será, mas custa dinheiro para hospedar e renovar o domínio. Se quiser apoiar meu trabalho e me encorajar a adicionar mais ferramentas, por favor considere [ser patrocinador](https://www.buymeacoffee.com/cthmsst).
O IT Tools é código aberto (sob a licença GPL-3.0), é gratuito, e sempre será, mas custa dinheiro para hospedar e renovar o domínio. Se quiser apoiar meu trabalho e me encorajar a adicionar mais ferramentas, por favor considere [ser patrocinador](https://www.buymeacoffee.com/cthmsst).
## Tecnologias

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: 'Темний режим'
@@ -32,7 +33,7 @@ about:
Цей чудовий вебсайт, створений з ❤ [Corentin Thomasset](https://corentin.tech?utm_source=it-tools&utm_medium=about), агрегує корисні інструменти для розробників і людей, які працюють в сфері IT. Якщо вам це корисно, будь ласка, поділіться цим з людьми, які, на вашу думку, також можуть знайти його корисним, і не забудьте додати його до закладок у вашій панелі швидкого доступу!
IT Tools є відкритим програмним забезпеченням (під ліцензією MIT) і безкоштовним, і завжди буде таким, але мені коштує гроші для хостингу і продовження доменного імені. Якщо ви хочете підтримати мою роботу і підтримати мене у додаванні нових інструментів, розгляньте можливість підтримки, [спонсоруючи мене](https://www.buymeacoffee.com/cthmsst).
IT Tools є відкритим програмним забезпеченням (під ліцензією GPL-3.0) і безкоштовним, і завжди буде таким, але мені коштує гроші для хостингу і продовження доменного імені. Якщо ви хочете підтримати мою роботу і підтримати мене у додаванні нових інструментів, розгляньте можливість підтримки, [спонсоруючи мене](https://www.buymeacoffee.com/cthmsst).
## Технології

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'
@@ -32,7 +33,7 @@ about:
Website tuyệt vời này, được tạo ra bằng ❤ bởi [Corentin Thomasset](https://corentin.tech?utm_source=it-tools&utm_medium=about), tổng hợp các công cụ hữu ích cho nhà phát triển và những người làm việc trong lĩnh vực IT. Nếu bạn thấy nó hữu ích, xin đừng ngần ngại chia sẻ cho những người mà bạn nghĩ sẽ thấy nó hữu ích và đừng quên đánh dấu nó trong thanh lối tắt của bạn!
IT Tools là mã nguồn mở (dưới giấy phép MIT) và miễn phí, và sẽ luôn như vậy, nhưng tôi phải trả tiền để lưu trữ và gia hạn tên miền. Nếu bạn muốn hỗ trợ công việc của tôi, và khích lệ tôi thêm nhiều công cụ hơn, hãy xem xét hỗ trợ bằng cách [tài trợ cho tôi](https://www.buymeacoffee.com/cthmsst).
IT Tools là mã nguồn mở (dưới giấy phép GPL-3.0) và miễn phí, và sẽ luôn như vậy, nhưng tôi phải trả tiền để lưu trữ và gia hạn tên miền. Nếu bạn muốn hỗ trợ công việc của tôi, và khích lệ tôi thêm nhiều công cụ hơn, hãy xem xét hỗ trợ bằng cách [tài trợ cho tôi](https://www.buymeacoffee.com/cthmsst).
## Công nghệ

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: '深色模式'
@@ -32,7 +33,7 @@ about:
IT-Tools 由 [Corentin Thomasset](https://corentin.tech?utm_source=it-tools&utm_medium=about) 用 ❤ 开发,汇集了对开发人员和 IT 从业者有用的工具。如果对您有帮助,请将其分享给您的朋友,并且添加到收藏夹中!
IT-Tools 永久免费且开源(MIT 许可证),但需要资金用于托管和续订域名。如果您想支持我的工作,并鼓励我添加更多工具,请考虑通过 [赞助我](https://www.buymeacoffee.com/cthmsst) 进行支持。
IT-Tools 永久免费且开源(GPL-3.0 许可证),但需要资金用于托管和续订域名。如果您想支持我的工作,并鼓励我添加更多工具,请考虑通过 [赞助我](https://www.buymeacoffee.com/cthmsst) 进行支持。
## 技术

View File

@@ -1,7 +1,8 @@
{
"name": "it-tools",
"type": "module",
"version": "2024.10.22-7ca5933",
"packageManager": "pnpm@8.15.3",
"packageManager": "pnpm@9.11.0",
"description": "Collection of handy online tools for developers, with great UX. ",
"author": "Corentin Th <corentin.thomasset74+it-tools@gmail.com> (https://corentin.tech)",
"license": "GNU GPLv3",
@@ -40,6 +41,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 +100,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"
@@ -135,7 +138,7 @@
"less": "^4.1.3",
"prettier": "^3.0.0",
"typescript": "~5.2.0",
"unocss": "^0.57.0",
"unocss": "^0.65.1",
"unocss-preset-scrollbar": "^0.2.1",
"unplugin-icons": "^0.17.0",
"unplugin-vue-components": "^0.25.0",

14736
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

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>

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>

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,55 +35,40 @@ 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">
<c-card v-if="config.showSponsorBanner" class="cursor-pointer !border-2px !hover:border-primary">
<div class="dark:hidden">
<svg width="40" height="40" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M458.592 250.639C425.688 222.824 376.118 211.673 332.186 244.145C330.164 245.615 327.651 243.103 329.183 241.143C339.6 227.725 351.67 213.266 361.413 198.746C371.339 183.858 386.167 173.198 403.262 167.99C494.253 140.42 466.925 6 466.925 6C466.925 6 326.365 15.0675 343.705 136.315C346.585 156.594 341.193 177.241 328.509 193.354C312.946 213.021 294.87 231.83 281.758 245.431C279.001 248.25 274.344 245.554 275.447 241.755C288.13 199.052 297.383 133.007 253.45 90.4259L191.625 39.0842L179.738 54.7685C144.384 101.393 154.739 167.132 201.429 202.422C228.205 222.64 240.337 244.635 238.438 268.774C237.274 283.233 230.718 296.773 220.914 307.495C202.471 327.713 185.253 349.402 171.957 374.521C170.119 378.013 164.788 376.665 164.972 372.683C166.871 331.205 162.888 237.712 93.037 204.321L14.8527 174.117L8.78665 192.19C-10.882 250.517 21.2863 312.825 79.557 332.614C130.23 349.83 148.305 382.486 136.112 431.438C135.561 433.215 126.737 483.638 127.963 506H184.15C186.049 471.323 222.446 448.532 254.001 462.684C262.886 466.667 272.016 472.364 281.39 479.717C331.634 519.295 405.652 509.921 445.173 459.621L456.447 445.284L385.371 394.249C336.597 355.896 271.525 373.234 223.365 406.074C219.321 408.831 214.174 404.419 216.441 400.008C274.65 285.806 350.322 286.051 379.979 311.416C415.946 342.172 470.418 336.658 500.932 300.572L509.694 290.218L458.531 250.639H458.592Z" fill="#aaaaaa" />
</svg>
</div>
<div class="hidden dark:block">
<svg width="40" height="40" viewBox="0 0 512 512" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M458.592 250.639C425.688 222.824 376.118 211.673 332.186 244.145C330.164 245.615 327.651 243.103 329.183 241.143C339.6 227.725 351.67 213.266 361.413 198.746C371.339 183.858 386.167 173.198 403.262 167.99C494.253 140.42 466.925 6 466.925 6C466.925 6 326.365 15.0675 343.705 136.315C346.585 156.594 341.193 177.241 328.509 193.354C312.946 213.021 294.87 231.83 281.758 245.431C279.001 248.25 274.344 245.554 275.447 241.755C288.13 199.052 297.383 133.007 253.45 90.4259L191.625 39.0842L179.738 54.7685C144.384 101.393 154.739 167.132 201.429 202.422C228.205 222.64 240.337 244.635 238.438 268.774C237.274 283.233 230.718 296.773 220.914 307.495C202.471 327.713 185.253 349.402 171.957 374.521C170.119 378.013 164.788 376.665 164.972 372.683C166.871 331.205 162.888 237.712 93.037 204.321L14.8527 174.117L8.78665 192.19C-10.882 250.517 21.2863 312.825 79.557 332.614C130.23 349.83 148.305 382.486 136.112 431.438C135.561 433.215 126.737 483.638 127.963 506H184.15C186.049 471.323 222.446 448.532 254.001 462.684C262.886 466.667 272.016 472.364 281.39 479.717C331.634 519.295 405.652 509.921 445.173 459.621L456.447 445.284L385.371 394.249C336.597 355.896 271.525 373.234 223.365 406.074C219.321 408.831 214.174 404.419 216.441 400.008C274.65 285.806 350.322 286.051 379.979 311.416C415.946 342.172 470.418 336.658 500.932 300.572L509.694 290.218L458.531 250.639H458.592Z" fill="#505050" />
</svg>
</div>
<div class="my-5px flex items-baseline gap-4 text-lg text-black dark:text-white">
Fern <div class="rounded-full bg-#eeeeee px-10px py-2px text-xs text-black dark:bg-#333333 dark:text-white">
Sponsor
</div>
</div>
<div class="text-neutral-500 dark:text-neutral-400">
Offer developer documentation that looks as good as Stripe's using Fern. <a href="https://bit.ly/3zBl7DG" target="_blank" rel="noopener" class="font-bold text-current transition hover:text-primary">Request a preview</a> of your docs on Fern.
</div>
</c-card>
</a>
</div>
<transition name="height">
<div v-if="toolStore.favoriteTools.length > 0">
<h3 class="mb-5px mt-25px font-500 text-neutral-400">
<h3 class="mb-5px mt-25px text-neutral-400 font-500">
{{ $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>
<div v-if="toolStore.newTools.length > 0">
<h3 class="mb-5px mt-25px font-500 text-neutral-400">
<h3 class="mb-5px mt-25px text-neutral-400 font-500">
{{ t('home.categories.newestTools') }}
</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">
@@ -82,7 +76,7 @@ const { t } = useI18n();
</div>
</div>
<h3 class="mb-5px mt-25px font-500 text-neutral-400">
<h3 class="mb-5px mt-25px text-neutral-400 font-500">
{{ $t('home.categories.allTools') }}
</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">
@@ -107,4 +101,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>

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',

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);
},
};
});

View File

@@ -10,7 +10,7 @@ import {
import { presetScrollbar } from 'unocss-preset-scrollbar';
export default defineConfig({
presets: [presetUno(), presetAttributify(), presetTypography(), presetScrollbar()],
presets: [presetUno(), presetAttributify({ ignoreAttributes: ['size'] }), presetTypography(), presetScrollbar()],
transformers: [transformerDirectives(), transformerVariantGroup()],
theme: {
colors: {