mirror of
https://github.com/CorentinTh/it-tools.git
synced 2025-10-23 04:52:14 +00:00
Compare commits
35 Commits
v2.16.0
...
ed25519-ke
Author | SHA1 | Date | |
---|---|---|---|
|
55d2a4d7af | ||
|
7c40539ef9 | ||
|
f3b1863f09 | ||
|
b1d6bfd2dc | ||
|
8787ce72ab | ||
|
dab8d63390 | ||
|
96aaa35ea2 | ||
|
519b169336 | ||
|
3bc1f0d1fa | ||
|
b519cc9574 | ||
|
30e9149d61 | ||
|
7958e2e075 | ||
|
61024279b5 | ||
|
ad202bd372 | ||
|
400654b6b1 | ||
|
3351b70c1a | ||
|
53ce079dff | ||
|
a771346250 | ||
|
a312dedf65 | ||
|
0ddf18f4b5 | ||
|
9634f5d9a8 | ||
|
e6c0445684 | ||
|
32f87f3fca | ||
|
a3b1cb5737 | ||
|
6fe4b5ac60 | ||
|
1a3f0a135d | ||
|
072083832d | ||
|
c934c4e50c | ||
|
4a5734d4a3 | ||
|
f708f5091e | ||
|
db817a2459 | ||
|
119041c185 | ||
|
4607837f9a | ||
|
f52f7a845c | ||
|
acc7f0a586 |
@@ -32,5 +32,6 @@ module.exports = {
|
||||
tsx: 'never',
|
||||
},
|
||||
],
|
||||
'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
|
||||
},
|
||||
};
|
||||
|
60
.github/workflows/docker-release.yml
vendored
Normal file
60
.github/workflows/docker-release.yml
vendored
Normal file
@@ -0,0 +1,60 @@
|
||||
name: docker-release
|
||||
|
||||
on:
|
||||
push:
|
||||
branches:
|
||||
- 'main'
|
||||
|
||||
jobs:
|
||||
ci:
|
||||
runs-on: ubuntu-latest
|
||||
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
- run: corepack enable
|
||||
- uses: actions/setup-node@v3
|
||||
with:
|
||||
node-version: 16
|
||||
cache: 'pnpm'
|
||||
|
||||
- name: Install dependencies
|
||||
run: pnpm i
|
||||
|
||||
- name: Run linters
|
||||
run: pnpm lint
|
||||
|
||||
- name: Run unit test
|
||||
run: pnpm test
|
||||
|
||||
- name: Build the app
|
||||
run: pnpm build
|
||||
|
||||
build:
|
||||
runs-on: ubuntu-latest
|
||||
needs:
|
||||
- ci
|
||||
|
||||
steps:
|
||||
- name: Checkout
|
||||
uses: actions/checkout@v3
|
||||
|
||||
- name: Login to Docker Hub
|
||||
uses: docker/login-action@v2
|
||||
with:
|
||||
username: ${{ secrets.DOCKERHUB_USERNAME }}
|
||||
password: ${{ secrets.DOCKERHUB_TOKEN }}
|
||||
|
||||
- name: Set up QEMU
|
||||
uses: docker/setup-qemu-action@v2
|
||||
|
||||
- name: Set up Docker Buildx
|
||||
uses: docker/setup-buildx-action@v2
|
||||
|
||||
- name: Build and push
|
||||
uses: docker/build-push-action@v4
|
||||
with:
|
||||
context: .
|
||||
file: ./Dockerfile
|
||||
platforms: linux/amd64,linux/arm64
|
||||
push: true
|
||||
tags: corentinth/it-tools:latest
|
32
CHANGELOG.md
32
CHANGELOG.md
@@ -2,6 +2,38 @@
|
||||
|
||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
||||
|
||||
## [2.19.0](https://github.com/CorentinTh/it-tools/compare/v2.18.0...v2.19.0) (2023-02-06)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **new-tool:** keycode info ([c934c4e](https://github.com/CorentinTh/it-tools/commit/c934c4e50ca1a129b80b786a5d9a7dbc33ad9ba3))
|
||||
|
||||
## [2.18.0](https://github.com/CorentinTh/it-tools/compare/v2.17.0...v2.18.0) (2023-02-04)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **new-tool:** json minify ([#265](https://github.com/CorentinTh/it-tools/issues/265)) ([f708f50](https://github.com/CorentinTh/it-tools/commit/f708f5091e2182fc88e7cf3e7d23b3d05edc04da))
|
||||
|
||||
|
||||
### Refactors
|
||||
|
||||
* **tools:** config in query params ([db817a2](https://github.com/CorentinTh/it-tools/commit/db817a2459e23bd096274a7f91815d613d5f7ff4))
|
||||
|
||||
## [2.17.0](https://github.com/CorentinTh/it-tools/compare/v2.16.0...v2.17.0) (2023-01-13)
|
||||
|
||||
|
||||
### Features
|
||||
|
||||
* **new-tool:** jwt parser ([#262](https://github.com/CorentinTh/it-tools/issues/262)) ([acc7f0a](https://github.com/CorentinTh/it-tools/commit/acc7f0a586c64500c5f720e70cdbccf9bffe76d9))
|
||||
* **new-tool:** temperature converter ([4607837](https://github.com/CorentinTh/it-tools/commit/4607837f9a398440e0098f2ba862e8d7422ce94f))
|
||||
|
||||
|
||||
### Refactors
|
||||
|
||||
* **jwt-parser:** simplified code ([f52f7a8](https://github.com/CorentinTh/it-tools/commit/f52f7a845c34ce7da57b11c17d261733be89554f))
|
||||
|
||||
## [2.16.0](https://github.com/CorentinTh/it-tools/compare/v2.15.0...v2.16.0) (2022-12-21)
|
||||
|
||||
|
||||
|
13
Dockerfile
Normal file
13
Dockerfile
Normal file
@@ -0,0 +1,13 @@
|
||||
# build stage
|
||||
FROM node:lts-alpine as build-stage
|
||||
WORKDIR /app
|
||||
COPY . .
|
||||
RUN npm install -g pnpm
|
||||
RUN pnpm i --frozen-lockfile
|
||||
RUN pnpm build
|
||||
|
||||
# production stage
|
||||
FROM nginx:stable-alpine as production-stage
|
||||
COPY --from=build-stage /app/dist /usr/share/nginx/html
|
||||
EXPOSE 80
|
||||
CMD ["nginx", "-g", "daemon off;"]
|
19
README.md
19
README.md
@@ -8,13 +8,22 @@ Please check the [issues](https://github.com/CorentinTh/it-tools/issues) to see
|
||||
|
||||
You have an idea of a tool? Submit a [feature request](https://github.com/CorentinTh/it-tools/issues/new?assignees=corentinth&labels=&template=feature_request.md&title=)!
|
||||
|
||||
## Self host
|
||||
|
||||
Self host your own version of it-tools in your homelab with docker:
|
||||
|
||||
```sh
|
||||
docker run -d -p 8080:80 --name it-tools -it corentinth/it-tools
|
||||
|
||||
```
|
||||
|
||||
## Contribute
|
||||
|
||||
## Recommended IDE Setup
|
||||
### Recommended IDE Setup
|
||||
|
||||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
|
||||
|
||||
## Type Support for `.vue` Imports in TS
|
||||
### Type Support for `.vue` Imports in TS
|
||||
|
||||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types.
|
||||
|
||||
@@ -25,11 +34,7 @@ If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has a
|
||||
2. Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
||||
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
||||
|
||||
## Customize configuration
|
||||
|
||||
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
||||
|
||||
## Project Setup
|
||||
### Project Setup
|
||||
|
||||
```sh
|
||||
pnpm install
|
||||
|
48
package.json
48
package.json
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "it-tools",
|
||||
"version": "2.16.0",
|
||||
"version": "2.19.0",
|
||||
"description": "Collection of handy online tools for developers, with great UX. ",
|
||||
"keywords": [
|
||||
"productivity",
|
||||
@@ -33,32 +33,40 @@
|
||||
"dependencies": {
|
||||
"@it-tools/bip39": "^0.0.4",
|
||||
"@it-tools/oggen": "^1.3.0",
|
||||
"@sindresorhus/slugify": "^2.2.0",
|
||||
"@tiptap/pm": "2.0.0-beta.220",
|
||||
"@tiptap/starter-kit": "2.0.0-beta.220",
|
||||
"@tiptap/vue-3": "2.0.0-beta.220",
|
||||
"@vicons/material": "^0.12.0",
|
||||
"@vicons/tabler": "^0.12.0",
|
||||
"@vueuse/core": "^8.9.4",
|
||||
"@vueuse/head": "^0.7.13",
|
||||
"@vueuse/router": "^9.13.0",
|
||||
"bcryptjs": "^2.4.3",
|
||||
"change-case": "^4.1.2",
|
||||
"colord": "^2.9.3",
|
||||
"cron-validator": "^1.3.1",
|
||||
"cronstrue": "^2.15.0",
|
||||
"cronstrue": "^2.23.0",
|
||||
"crypto-js": "^4.1.1",
|
||||
"date-fns": "^2.29.3",
|
||||
"figue": "^1.2.0",
|
||||
"fuse.js": "^6.6.2",
|
||||
"highlight.js": "^11.6.0",
|
||||
"json5": "^2.2.1",
|
||||
"highlight.js": "^11.7.0",
|
||||
"json5": "^2.2.3",
|
||||
"jwt-decode": "^3.1.2",
|
||||
"lodash": "^4.17.21",
|
||||
"mathjs": "^10.6.4",
|
||||
"mime-types": "^2.1.35",
|
||||
"naive-ui": "^2.33.5",
|
||||
"pinia": "^2.0.23",
|
||||
"naive-ui": "^2.34.3",
|
||||
"node-forge": "^1.3.1",
|
||||
"pinia": "^2.0.33",
|
||||
"plausible-tracker": "^0.3.8",
|
||||
"qrcode": "^1.5.1",
|
||||
"randombytes": "^2.1.0",
|
||||
"sql-formatter": "^8.2.0",
|
||||
"ts-pattern": "^4.2.1",
|
||||
"uuid": "^8.3.2",
|
||||
"vue": "^3.2.45",
|
||||
"vue": "^3.2.47",
|
||||
"vue-router": "^4.1.6"
|
||||
},
|
||||
"devDependencies": {
|
||||
@@ -66,30 +74,32 @@
|
||||
"@types/bcryptjs": "^2.4.2",
|
||||
"@types/crypto-js": "^4.1.1",
|
||||
"@types/jsdom": "^16.2.15",
|
||||
"@types/lodash": "^4.14.188",
|
||||
"@types/lodash": "^4.14.191",
|
||||
"@types/mime-types": "^2.1.1",
|
||||
"@types/node": "^16.18.3",
|
||||
"@types/node": "^16.18.16",
|
||||
"@types/node-forge": "^1.3.1",
|
||||
"@types/prettier": "^2.7.2",
|
||||
"@types/qrcode": "^1.5.0",
|
||||
"@types/randombytes": "^2.0.0",
|
||||
"@types/uuid": "^8.3.4",
|
||||
"@typescript-eslint/parser": "^5.42.1",
|
||||
"@typescript-eslint/parser": "^5.55.0",
|
||||
"@vitejs/plugin-vue": "^2.3.4",
|
||||
"@vitejs/plugin-vue-jsx": "^1.3.10",
|
||||
"@vue/eslint-config-prettier": "^7.0.0",
|
||||
"@vue/eslint-config-prettier": "^7.1.0",
|
||||
"@vue/eslint-config-typescript": "^10.0.0",
|
||||
"@vue/test-utils": "^2.2.2",
|
||||
"@vue/test-utils": "^2.3.1",
|
||||
"@vue/tsconfig": "^0.1.3",
|
||||
"c8": "^7.12.0",
|
||||
"eslint": "^8.27.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-import-resolver-typescript": "^3.5.2",
|
||||
"eslint-plugin-import": "^2.26.0",
|
||||
"c8": "^7.13.0",
|
||||
"eslint": "^8.36.0",
|
||||
"eslint-config-prettier": "^8.7.0",
|
||||
"eslint-import-resolver-typescript": "^3.5.3",
|
||||
"eslint-plugin-import": "^2.27.5",
|
||||
"eslint-plugin-vue": "^8.7.1",
|
||||
"jsdom": "^19.0.0",
|
||||
"less": "^4.1.3",
|
||||
"prettier": "^2.7.1",
|
||||
"prettier": "^2.8.4",
|
||||
"standard-version": "^9.5.0",
|
||||
"start-server-and-test": "^1.14.0",
|
||||
"start-server-and-test": "^1.15.4",
|
||||
"typescript": "~4.5.5",
|
||||
"vite": "^2.9.15",
|
||||
"vite-plugin-md": "^0.12.4",
|
||||
|
2880
pnpm-lock.yaml
generated
2880
pnpm-lock.yaml
generated
File diff suppressed because it is too large
Load Diff
10
src/App.vue
10
src/App.vue
@@ -1,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import { computed } from 'vue';
|
||||
import { useRoute, RouterView } from 'vue-router';
|
||||
import { darkTheme, NGlobalStyle, NMessageProvider } from 'naive-ui';
|
||||
import { darkTheme, NGlobalStyle, NMessageProvider, NNotificationProvider } from 'naive-ui';
|
||||
import { darkThemeOverrides, lightThemeOverrides } from './themes';
|
||||
import { layouts } from './layouts';
|
||||
import { useStyleStore } from './stores/style.store';
|
||||
@@ -18,9 +18,11 @@ const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrid
|
||||
<n-config-provider :theme="theme" :theme-overrides="themeOverrides">
|
||||
<n-global-style />
|
||||
<n-message-provider placement="bottom">
|
||||
<component :is="layout">
|
||||
<router-view />
|
||||
</component>
|
||||
<n-notification-provider placement="bottom-right">
|
||||
<component :is="layout">
|
||||
<router-view />
|
||||
</component>
|
||||
</n-notification-provider>
|
||||
</n-message-provider>
|
||||
</n-config-provider>
|
||||
</template>
|
||||
|
@@ -9,7 +9,7 @@
|
||||
href="https://github.com/CorentinTh/it-tools"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
aria-label="IT-Tools' github repository"
|
||||
aria-label="IT-Tools' GitHub repository"
|
||||
>
|
||||
<n-icon size="25" :component="BrandGithub" />
|
||||
</n-button>
|
||||
@@ -27,12 +27,12 @@
|
||||
href="https://twitter.com/ittoolsdottech"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
aria-label="IT Tools' twitter account"
|
||||
aria-label="IT Tools' Twitter account"
|
||||
>
|
||||
<n-icon size="25" :component="BrandTwitter" />
|
||||
</n-button>
|
||||
</template>
|
||||
IT Tools' twitter account
|
||||
IT Tools' Twitter account
|
||||
</n-tooltip>
|
||||
|
||||
<router-link to="/about" #="{ navigate, href }" custom>
|
||||
|
@@ -24,8 +24,9 @@
|
||||
</n-h3>
|
||||
|
||||
<div class="description">
|
||||
<n-ellipsis :line-clamp="2" :tooltip="false">
|
||||
<n-ellipsis :line-clamp="2" :tooltip="false" style="min-height: 44.78px">
|
||||
{{ tool.description }}
|
||||
<br />
|
||||
</n-ellipsis>
|
||||
</div>
|
||||
</n-card>
|
||||
|
35
src/composable/queryParams.ts
Normal file
35
src/composable/queryParams.ts
Normal file
@@ -0,0 +1,35 @@
|
||||
import { useRouteQuery } from '@vueuse/router';
|
||||
import { computed } from 'vue';
|
||||
|
||||
export { useQueryParam };
|
||||
|
||||
const transformers = {
|
||||
number: {
|
||||
fromQuery: (value: string) => Number(value),
|
||||
toQuery: (value: number) => String(value),
|
||||
},
|
||||
string: {
|
||||
fromQuery: (value: string) => value,
|
||||
toQuery: (value: string) => value,
|
||||
},
|
||||
boolean: {
|
||||
fromQuery: (value: string) => value.toLowerCase() === 'true',
|
||||
toQuery: (value: boolean) => (value ? 'true' : 'false'),
|
||||
},
|
||||
};
|
||||
|
||||
function useQueryParam<T>({ name, defaultValue }: { name: string; defaultValue: T }) {
|
||||
const type = typeof defaultValue;
|
||||
const transformer = transformers[type as keyof typeof transformers] ?? transformers.string;
|
||||
|
||||
const proxy = useRouteQuery(name, transformer.toQuery(defaultValue as never));
|
||||
|
||||
return computed<T>({
|
||||
get() {
|
||||
return transformer.fromQuery(proxy.value) as T;
|
||||
},
|
||||
set(value) {
|
||||
proxy.value = transformer.toQuery(value as never);
|
||||
},
|
||||
});
|
||||
}
|
@@ -155,7 +155,7 @@ const menuOptions = computed<MenuGroupOption[]>(() =>
|
||||
round
|
||||
type="primary"
|
||||
tag="a"
|
||||
href="https://github.com/sponsors/CorentinTh"
|
||||
href="https://www.buymeacoffee.com/cthmsst"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
class="support-button"
|
||||
|
@@ -24,7 +24,7 @@ const { tracker } = useTracker();
|
||||
type="primary"
|
||||
tag="a"
|
||||
text
|
||||
href="https://github.com/sponsors/CorentinTh"
|
||||
href="https://www.buymeacoffee.com/cthmsst"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
@click="() => tracker.trackEvent({ eventName: 'Support button clicked' })"
|
||||
@@ -41,7 +41,7 @@ const { tracker } = useTracker();
|
||||
type="primary"
|
||||
tag="a"
|
||||
text
|
||||
href="https://github.com/CorentinTh/it-tools/blob/master/package.json"
|
||||
href="https://github.com/CorentinTh/it-tools/blob/main/package.json"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
>
|
||||
@@ -64,7 +64,7 @@ const { tracker } = useTracker();
|
||||
>
|
||||
issues section
|
||||
</n-button>
|
||||
in the github repository.
|
||||
in the GitHub repository.
|
||||
</n-p>
|
||||
<n-p>
|
||||
And if you found a bug, or something broken that doesn't work as expected, please fill a bug report in the
|
||||
@@ -78,7 +78,7 @@ const { tracker } = useTracker();
|
||||
>
|
||||
issues section
|
||||
</n-button>
|
||||
in the github repository.
|
||||
in the GitHub repository.
|
||||
</n-p>
|
||||
</div>
|
||||
</template>
|
||||
|
@@ -21,16 +21,16 @@ useHead({ title: 'IT Tools - Handy online tools for developers' });
|
||||
href="https://github.com/CorentinTh/it-tools"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
aria-label="IT-Tools' github repository"
|
||||
>github</a
|
||||
aria-label="IT-Tools' GitHub repository"
|
||||
>GitHub</a
|
||||
>
|
||||
or follow us on
|
||||
<a
|
||||
href="https://twitter.com/ittoolsdottech"
|
||||
rel="noopener"
|
||||
target="_blank"
|
||||
aria-label="IT-Tools' twitter account"
|
||||
>twitter</a
|
||||
aria-label="IT-Tools' Twitter account"
|
||||
>Twitter</a
|
||||
>! Thank you
|
||||
<n-icon :component="Heart" />
|
||||
</colored-card>
|
||||
|
@@ -53,6 +53,7 @@ import {
|
||||
NTooltip,
|
||||
NUpload,
|
||||
NUploadDragger,
|
||||
NPopover,
|
||||
NCheckbox,
|
||||
} from 'naive-ui';
|
||||
|
||||
@@ -111,6 +112,7 @@ const components = [
|
||||
NIcon,
|
||||
NSwitch,
|
||||
NCollapseTransition,
|
||||
NPopover,
|
||||
];
|
||||
|
||||
export const naive = create({ components });
|
||||
|
@@ -22,6 +22,10 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
|
||||
primaryColorSuppl: '#36AD6AFF',
|
||||
},
|
||||
|
||||
Notification: {
|
||||
color: '#333333',
|
||||
},
|
||||
|
||||
AutoComplete: {
|
||||
peers: {
|
||||
InternalSelectMenu: { height: '500px', color: '#1e1e1e' },
|
||||
@@ -33,18 +37,18 @@ export const darkThemeOverrides: GlobalThemeOverrides = {
|
||||
},
|
||||
|
||||
Layout: {
|
||||
color: '#121212',
|
||||
siderColor: '#1e1e1e',
|
||||
color: '#1c1c1c',
|
||||
siderColor: '#232323',
|
||||
siderBorderColor: 'transparent',
|
||||
},
|
||||
|
||||
Card: {
|
||||
color: '#1e1e1e',
|
||||
borderColor: 'transparent',
|
||||
color: '#232323',
|
||||
borderColor: '#282828',
|
||||
},
|
||||
|
||||
Table: {
|
||||
tdColor: '#1e1e1e',
|
||||
tdColor: '#232323',
|
||||
thColor: '#353535',
|
||||
},
|
||||
};
|
||||
|
@@ -8,37 +8,37 @@
|
||||
<n-divider />
|
||||
|
||||
<n-form-item label="Camelcase:">
|
||||
<input-copyable :value="camelCase(input)" />
|
||||
<input-copyable :value="camelCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Capitalcase:">
|
||||
<input-copyable :value="capitalCase(input)" />
|
||||
<input-copyable :value="capitalCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Constantcase:">
|
||||
<input-copyable :value="constantCase(input)" />
|
||||
<input-copyable :value="constantCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Dotcase:">
|
||||
<input-copyable :value="dotCase(input)" />
|
||||
<input-copyable :value="dotCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Headercase:">
|
||||
<input-copyable :value="headerCase(input)" />
|
||||
<input-copyable :value="headerCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Nocase:">
|
||||
<input-copyable :value="noCase(input)" />
|
||||
<input-copyable :value="noCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Paramcase:">
|
||||
<input-copyable :value="paramCase(input)" />
|
||||
<input-copyable :value="paramCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Pascalcase:">
|
||||
<input-copyable :value="pascalCase(input)" />
|
||||
<input-copyable :value="pascalCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Pathcase:">
|
||||
<input-copyable :value="pathCase(input)" />
|
||||
<input-copyable :value="pathCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Sentencecase:">
|
||||
<input-copyable :value="sentenceCase(input)" />
|
||||
<input-copyable :value="sentenceCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
<n-form-item label="Snakecase:">
|
||||
<input-copyable :value="snakeCase(input)" />
|
||||
<input-copyable :value="snakeCase(input, baseConfig)" />
|
||||
</n-form-item>
|
||||
</n-form>
|
||||
</n-card>
|
||||
@@ -61,6 +61,10 @@ import {
|
||||
} from 'change-case';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
|
||||
const baseConfig = {
|
||||
stripRegexp: /[^A-Za-zÀ-ÖØ-öø-ÿ]+/gi,
|
||||
};
|
||||
|
||||
const input = ref('lorem ipsum dolor sit amet');
|
||||
</script>
|
||||
|
||||
|
@@ -0,0 +1,14 @@
|
||||
import { pki } from 'node-forge';
|
||||
|
||||
export { generateKeyPair };
|
||||
|
||||
function generateKeyPair() {
|
||||
const { privateKey, publicKey } = pki.ed25519.generateKeyPair();
|
||||
|
||||
console.log({ privateKey, publicKey });
|
||||
|
||||
return {
|
||||
publicKeyPem: pki.publicKeyToPem(publicKey),
|
||||
privateKeyPem: pki.privateKeyToPem(privateKey),
|
||||
};
|
||||
}
|
@@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<h3>Public key</h3>
|
||||
<textarea-copyable :value="certs.publicKeyPem" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Private key</h3>
|
||||
<textarea-copyable :value="certs.privateKeyPem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
||||
import { withDefaultOnErrorAsync } from '@/utils/defaults';
|
||||
import { computed } from 'vue';
|
||||
import { generateKeyPair } from './ed25519-key-pair-generator.service';
|
||||
|
||||
const emptyCerts = { publicKeyPem: '', privateKeyPem: '' };
|
||||
|
||||
const certs = computed(() => generateKeyPair());
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
11
src/tools/ed25519-key-pair-generator/index.ts
Normal file
11
src/tools/ed25519-key-pair-generator/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { ArrowsShuffle } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Ed25519 key pair generator',
|
||||
path: '/ed25519-key-pair-generator',
|
||||
description: '',
|
||||
keywords: ['ed25519', 'key', 'pair', 'generator'],
|
||||
component: () => import('./ed25519-key-pair-generator.vue'),
|
||||
icon: ArrowsShuffle,
|
||||
});
|
@@ -40,6 +40,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useQueryParam } from '@/composable/queryParams';
|
||||
import { enc, lib, MD5, RIPEMD160, SHA1, SHA224, SHA256, SHA3, SHA384, SHA512 } from 'crypto-js';
|
||||
import { ref } from 'vue';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
@@ -59,7 +60,7 @@ const algos = {
|
||||
type AlgoNames = keyof typeof algos;
|
||||
type Encoding = keyof typeof enc | 'Bin';
|
||||
const algoNames = Object.keys(algos) as AlgoNames[];
|
||||
const encoding = ref<Encoding>('Hex');
|
||||
const encoding = useQueryParam<Encoding>({ defaultValue: 'Hex', name: 'encoding' });
|
||||
const clearText = ref('');
|
||||
|
||||
function formatWithEncoding(words: lib.WordArray, encoding: Encoding) {
|
||||
|
135
src/tools/html-wysiwyg-editor/editor/editor.vue
Normal file
135
src/tools/html-wysiwyg-editor/editor/editor.vue
Normal file
@@ -0,0 +1,135 @@
|
||||
<template>
|
||||
<n-card v-if="editor" class="editor">
|
||||
<template #header>
|
||||
<menu-bar class="editor-header" :editor="editor" />
|
||||
<n-divider style="margin-top: 0" />
|
||||
</template>
|
||||
|
||||
<editor-content class="editor-content" :editor="editor" />
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { tryOnBeforeUnmount, useVModel } from '@vueuse/core';
|
||||
import { Editor, EditorContent } from '@tiptap/vue-3';
|
||||
import StarterKit from '@tiptap/starter-kit';
|
||||
import { useThemeVars } from 'naive-ui';
|
||||
import MenuBar from './menu-bar.vue';
|
||||
|
||||
const themeVars = useThemeVars();
|
||||
const props = defineProps<{ html: string }>();
|
||||
const emit = defineEmits(['update:html']);
|
||||
const html = useVModel(props, 'html', emit);
|
||||
|
||||
const editor = new Editor({
|
||||
content: html.value,
|
||||
extensions: [StarterKit],
|
||||
});
|
||||
|
||||
editor.on('update', ({ editor }) => emit('update:html', editor.getHTML()));
|
||||
|
||||
tryOnBeforeUnmount(() => {
|
||||
editor.destroy();
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep(.n-card-header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
::v-deep(.ProseMirror-focused) {
|
||||
outline: none;
|
||||
}
|
||||
</style>
|
||||
|
||||
<style scoped lang="less">
|
||||
::v-deep(.ProseMirror) {
|
||||
> * + * {
|
||||
margin-top: 0.75em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol {
|
||||
padding: 0 1rem;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
code {
|
||||
background-color: v-bind('themeVars.codeColor');
|
||||
padding: 2px 4px;
|
||||
border-radius: 5px;
|
||||
font-size: 85%;
|
||||
}
|
||||
|
||||
pre {
|
||||
background: v-bind('themeVars.codeColor');
|
||||
font-family: monospace;
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: 0.5rem;
|
||||
|
||||
code {
|
||||
color: inherit;
|
||||
padding: 0;
|
||||
background: none;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
}
|
||||
|
||||
mark {
|
||||
background-color: #faf594;
|
||||
}
|
||||
|
||||
img {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
padding-left: 1rem;
|
||||
border-left: 2px solid rgba(#0d0d0d, 0.1);
|
||||
}
|
||||
|
||||
hr {
|
||||
border: none;
|
||||
border-top: 2px solid rgba(#0d0d0d, 0.1);
|
||||
margin: 2rem 0;
|
||||
}
|
||||
|
||||
ul[data-type='taskList'] {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
||||
li {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
> label {
|
||||
flex: 0 0 auto;
|
||||
margin-right: 0.5rem;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
> div {
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
22
src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
Normal file
22
src/tools/html-wysiwyg-editor/editor/menu-bar-item.vue
Normal file
@@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<n-button circle quaternary :type="isActive?.() ? 'primary' : 'default'" @click="action">
|
||||
<template #icon>
|
||||
<n-icon :component="icon" />
|
||||
</template>
|
||||
</n-button>
|
||||
</template>
|
||||
|
||||
{{ title }}
|
||||
</n-tooltip>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { toRefs, type Component } from 'vue';
|
||||
|
||||
const props = defineProps<{ icon: Component; title: string; action: () => void; isActive?: () => boolean }>();
|
||||
const { icon, title, action, isActive } = toRefs(props);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
171
src/tools/html-wysiwyg-editor/editor/menu-bar.vue
Normal file
171
src/tools/html-wysiwyg-editor/editor/menu-bar.vue
Normal file
@@ -0,0 +1,171 @@
|
||||
<template>
|
||||
<n-space align="center" :size="0">
|
||||
<template v-for="(item, index) in items">
|
||||
<n-divider v-if="item.type === 'divider'" :key="`divider${index}`" vertical />
|
||||
<menu-bar-item v-else-if="item.type === 'button'" :key="index" v-bind="item" />
|
||||
</template>
|
||||
</n-space>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import type { Editor } from '@tiptap/vue-3';
|
||||
import {
|
||||
ArrowBack,
|
||||
ArrowForwardUp,
|
||||
Blockquote,
|
||||
Bold,
|
||||
ClearFormatting,
|
||||
Code,
|
||||
CodePlus,
|
||||
H1,
|
||||
H2,
|
||||
H3,
|
||||
H4,
|
||||
Italic,
|
||||
Link,
|
||||
List,
|
||||
ListNumbers,
|
||||
Separator,
|
||||
Strikethrough,
|
||||
TextWrap,
|
||||
} from '@vicons/tabler';
|
||||
import { toRefs, type Component } from 'vue';
|
||||
import MenuBarItem from './menu-bar-item.vue';
|
||||
|
||||
const props = defineProps<{ editor: Editor }>();
|
||||
const { editor } = toRefs(props);
|
||||
|
||||
type MenuItem =
|
||||
| {
|
||||
icon: Component;
|
||||
title: string;
|
||||
action: () => void;
|
||||
isActive?: () => boolean;
|
||||
type: 'button';
|
||||
}
|
||||
| { type: 'divider' };
|
||||
|
||||
const items: MenuItem[] = [
|
||||
{
|
||||
type: 'button',
|
||||
icon: Bold,
|
||||
title: 'Bold',
|
||||
action: () => editor.value.chain().focus().toggleBold().run(),
|
||||
isActive: () => editor.value.isActive('bold'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: Italic,
|
||||
title: 'Italic',
|
||||
action: () => editor.value.chain().focus().toggleItalic().run(),
|
||||
isActive: () => editor.value.isActive('italic'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: Strikethrough,
|
||||
title: 'Strike',
|
||||
action: () => editor.value.chain().focus().toggleStrike().run(),
|
||||
isActive: () => editor.value.isActive('strike'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: Code,
|
||||
title: 'Inline code',
|
||||
action: () => editor.value.chain().focus().toggleCode().run(),
|
||||
isActive: () => editor.value.isActive('code'),
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: H1,
|
||||
title: 'Heading 1',
|
||||
action: () => editor.value.chain().focus().toggleHeading({ level: 1 }).run(),
|
||||
isActive: () => editor.value.isActive('heading', { level: 1 }),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: H2,
|
||||
title: 'Heading 2',
|
||||
action: () => editor.value.chain().focus().toggleHeading({ level: 2 }).run(),
|
||||
isActive: () => editor.value.isActive('heading', { level: 2 }),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: H3,
|
||||
title: 'Heading 3',
|
||||
action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
|
||||
isActive: () => editor.value.isActive('heading', { level: 4 }),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: H4,
|
||||
title: 'Heading 4',
|
||||
action: () => editor.value.chain().focus().toggleHeading({ level: 4 }).run(),
|
||||
isActive: () => editor.value.isActive('heading', { level: 4 }),
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: List,
|
||||
title: 'Bullet list',
|
||||
action: () => editor.value.chain().focus().toggleBulletList().run(),
|
||||
isActive: () => editor.value.isActive('bulletList'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: ListNumbers,
|
||||
title: 'Ordered list',
|
||||
action: () => editor.value.chain().focus().toggleOrderedList().run(),
|
||||
isActive: () => editor.value.isActive('orderedList'),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: CodePlus,
|
||||
title: 'Code block',
|
||||
action: () => editor.value.chain().focus().toggleCodeBlock().run(),
|
||||
isActive: () => editor.value.isActive('codeBlock'),
|
||||
},
|
||||
|
||||
{
|
||||
type: 'button',
|
||||
icon: Blockquote,
|
||||
title: 'Blockquote',
|
||||
action: () => editor.value.chain().focus().toggleBlockquote().run(),
|
||||
isActive: () => editor.value.isActive('blockquote'),
|
||||
},
|
||||
{
|
||||
type: 'divider',
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: TextWrap,
|
||||
title: 'Hard break',
|
||||
action: () => editor.value.chain().focus().setHardBreak().run(),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: ClearFormatting,
|
||||
title: 'Clear format',
|
||||
action: () => editor.value.chain().focus().clearNodes().unsetAllMarks().run(),
|
||||
},
|
||||
|
||||
{
|
||||
type: 'button',
|
||||
icon: ArrowBack,
|
||||
title: 'Undo',
|
||||
action: () => editor.value.chain().focus().undo().run(),
|
||||
},
|
||||
{
|
||||
type: 'button',
|
||||
icon: ArrowForwardUp,
|
||||
title: 'Redo',
|
||||
action: () => editor.value.chain().focus().redo().run(),
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
17
src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue
Normal file
17
src/tools/html-wysiwyg-editor/html-wysiwyg-editor.vue
Normal file
@@ -0,0 +1,17 @@
|
||||
<template>
|
||||
<editor v-model:html="html" />
|
||||
<textarea-copyable :value="format(html, { parser: 'html', plugins: [htmlParser] })" language="html" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
||||
import { ref } from 'vue';
|
||||
import { format } from 'prettier';
|
||||
import htmlParser from 'prettier/parser-html';
|
||||
import { useStorage } from '@vueuse/core';
|
||||
import Editor from './editor/editor.vue';
|
||||
|
||||
const html = useStorage('html-wysiwyg-editor--html', '<h1>Hey!</h1><p>Welcome to this html wysiwyg editor</p>');
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
11
src/tools/html-wysiwyg-editor/index.ts
Normal file
11
src/tools/html-wysiwyg-editor/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Edit } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Html wysiwyg editor',
|
||||
path: '/html-wysiwyg-editor',
|
||||
description: 'Online HTML editor with feature-rich WYSIWYG editor, get the source code of the content immediately.',
|
||||
keywords: ['html', 'wysiwyg', 'editor', 'p', 'ul', 'ol', 'converter', 'live'],
|
||||
component: () => import('./html-wysiwyg-editor.vue'),
|
||||
icon: Edit,
|
||||
});
|
@@ -1,12 +1,16 @@
|
||||
import { tool as chmodCalculator } from './chmod-calculator';
|
||||
import { tool as mimeTypes } from './mime-types';
|
||||
import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
|
||||
import { tool as base64FileConverter } from './base64-file-converter';
|
||||
import { tool as base64StringConverter } from './base64-string-converter';
|
||||
import { tool as basicAuthGenerator } from './basic-auth-generator';
|
||||
import { tool as htmlWysiwygEditor } from './html-wysiwyg-editor';
|
||||
import { tool as rsaKeyPairGenerator } from './rsa-key-pair-generator';
|
||||
import { tool as textToNatoAlphabet } from './text-to-nato-alphabet';
|
||||
import { tool as slugifyString } from './slugify-string';
|
||||
import { tool as keycodeInfo } from './keycode-info';
|
||||
import { tool as jsonMinify } from './json-minify';
|
||||
import { tool as bcrypt } from './bcrypt';
|
||||
import { tool as bip39 } from './bip39-generator';
|
||||
import { tool as caseConverter } from './case-converter';
|
||||
import { tool as chmodCalculator } from './chmod-calculator';
|
||||
import { tool as chronometer } from './chronometer';
|
||||
import { tool as colorConverter } from './color-converter';
|
||||
import { tool as crontabGenerator } from './crontab-generator';
|
||||
@@ -20,25 +24,29 @@ import { tool as hmacGenerator } from './hmac-generator';
|
||||
import { tool as htmlEntities } from './html-entities';
|
||||
import { tool as baseConverter } from './integer-base-converter';
|
||||
import { tool as jsonViewer } from './json-viewer';
|
||||
import { tool as jwtParser } from './jwt-parser';
|
||||
import { tool as loremIpsumGenerator } from './lorem-ipsum-generator';
|
||||
import { tool as mathEvaluator } from './math-evaluator';
|
||||
import { tool as metaTagGenerator } from './meta-tag-generator';
|
||||
import { tool as mimeTypes } from './mime-types';
|
||||
import { tool as otpCodeGeneratorAndValidator } from './otp-code-generator-and-validator';
|
||||
import { tool as qrCodeGenerator } from './qr-code-generator';
|
||||
import { tool as randomPortGenerator } from './random-port-generator';
|
||||
import { tool as romanNumeralConverter } from './roman-numeral-converter';
|
||||
import { tool as sqlPrettify } from './sql-prettify';
|
||||
import { tool as svgPlaceholderGenerator } from './svg-placeholder-generator';
|
||||
import { tool as temperatureConverter } from './temperature-converter';
|
||||
import { tool as textStatistics } from './text-statistics';
|
||||
import { tool as tokenGenerator } from './token-generator';
|
||||
import type { ToolCategory } from './tools.types';
|
||||
import { tool as urlEncoder } from './url-encoder';
|
||||
import { tool as urlParser } from './url-parser';
|
||||
import { tool as uuidGenerator } from './uuid-generator';
|
||||
import type { ToolCategory } from './tools.types';
|
||||
|
||||
export const toolsByCategory: ToolCategory[] = [
|
||||
{
|
||||
name: 'Crypto',
|
||||
components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator],
|
||||
components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator],
|
||||
},
|
||||
{
|
||||
name: 'Converter',
|
||||
@@ -50,6 +58,7 @@ export const toolsByCategory: ToolCategory[] = [
|
||||
base64FileConverter,
|
||||
colorConverter,
|
||||
caseConverter,
|
||||
textToNatoAlphabet,
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -63,6 +72,10 @@ export const toolsByCategory: ToolCategory[] = [
|
||||
metaTagGenerator,
|
||||
otpCodeGeneratorAndValidator,
|
||||
mimeTypes,
|
||||
jwtParser,
|
||||
keycodeInfo,
|
||||
slugifyString,
|
||||
htmlWysiwygEditor,
|
||||
],
|
||||
},
|
||||
{
|
||||
@@ -71,7 +84,7 @@ export const toolsByCategory: ToolCategory[] = [
|
||||
},
|
||||
{
|
||||
name: 'Development',
|
||||
components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, sqlPrettify, chmodCalculator],
|
||||
components: [gitMemo, randomPortGenerator, crontabGenerator, jsonViewer, jsonMinify, sqlPrettify, chmodCalculator],
|
||||
},
|
||||
{
|
||||
name: 'Math',
|
||||
@@ -79,7 +92,7 @@ export const toolsByCategory: ToolCategory[] = [
|
||||
},
|
||||
{
|
||||
name: 'Measurement',
|
||||
components: [chronometer],
|
||||
components: [chronometer, temperatureConverter],
|
||||
},
|
||||
{
|
||||
name: 'Text',
|
||||
|
11
src/tools/json-minify/index.ts
Normal file
11
src/tools/json-minify/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Braces } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'JSON minify',
|
||||
path: '/json-minify',
|
||||
description: 'Minify and compress your JSON by removing unnecessary white spaces.',
|
||||
keywords: ['json', 'minify', 'format'],
|
||||
component: () => import('./json-minify.vue'),
|
||||
icon: Braces,
|
||||
});
|
57
src/tools/json-minify/json-minify.vue
Normal file
57
src/tools/json-minify/json-minify.vue
Normal file
@@ -0,0 +1,57 @@
|
||||
<template>
|
||||
<n-form-item
|
||||
label="Your raw json"
|
||||
:feedback="rawJsonValidation.message"
|
||||
:validation-status="rawJsonValidation.status"
|
||||
>
|
||||
<n-input
|
||||
ref="inputElement"
|
||||
v-model:value="rawJson"
|
||||
placeholder="Paste your raw json here..."
|
||||
type="textarea"
|
||||
rows="20"
|
||||
autocomplete="off"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
spellcheck="false"
|
||||
/>
|
||||
</n-form-item>
|
||||
<n-form-item label="Minify version of your JSON">
|
||||
<textarea-copyable :value="cleanJson" language="json" :follow-height-of="inputElement" />
|
||||
</n-form-item>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
||||
import { useValidation } from '@/composable/validation';
|
||||
import { withDefaultOnError } from '@/utils/defaults';
|
||||
import JSON5 from 'json5';
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
const inputElement = ref<HTMLElement>();
|
||||
|
||||
const rawJson = ref('{\n\t"hello": [\n\t\t"world"\n\t]\n}');
|
||||
const cleanJson = computed(() => withDefaultOnError(() => JSON.stringify(JSON5.parse(rawJson.value), null, 0), ''));
|
||||
|
||||
const rawJsonValidation = useValidation({
|
||||
source: rawJson,
|
||||
rules: [
|
||||
{
|
||||
validator: (v) => v === '' || JSON5.parse(v),
|
||||
message: 'Provided JSON is not valid.',
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.result-card {
|
||||
position: relative;
|
||||
|
||||
.copy-button {
|
||||
position: absolute;
|
||||
top: 10px;
|
||||
right: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
27
src/tools/jwt-parser/index.ts
Normal file
27
src/tools/jwt-parser/index.ts
Normal file
@@ -0,0 +1,27 @@
|
||||
import { Key } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'JWT parser',
|
||||
path: '/jwt-parser',
|
||||
description: 'Parse and decode your JSON Web Token (jwt) and display its content.',
|
||||
keywords: [
|
||||
'jwt',
|
||||
'parser',
|
||||
'decode',
|
||||
'typ',
|
||||
'alg',
|
||||
'iss',
|
||||
'sub',
|
||||
'aud',
|
||||
'exp',
|
||||
'nbf',
|
||||
'iat',
|
||||
'jti',
|
||||
'json',
|
||||
'web',
|
||||
'token',
|
||||
],
|
||||
component: () => import('./jwt-parser.vue'),
|
||||
icon: Key,
|
||||
});
|
92
src/tools/jwt-parser/jwt-parser.constants.ts
Normal file
92
src/tools/jwt-parser/jwt-parser.constants.ts
Normal file
@@ -0,0 +1,92 @@
|
||||
// From https://datatracker.ietf.org/doc/html/rfc7518#section-3.1
|
||||
export const ALGORITHM_DESCRIPTIONS: { [k: string]: string } = {
|
||||
HS256: 'HMAC using SHA-256',
|
||||
HS384: 'HMAC using SHA-384',
|
||||
HS512: 'HMAC using SHA-512',
|
||||
RS256: 'RSASSA-PKCS1-v1_5 using SHA-256',
|
||||
RS384: 'RSASSA-PKCS1-v1_5 using SHA-384',
|
||||
RS512: 'RSASSA-PKCS1-v1_5 using SHA-512',
|
||||
ES256: 'ECDSA using P-256 and SHA-256',
|
||||
ES384: 'ECDSA using P-384 and SHA-384',
|
||||
ES512: 'ECDSA using P-521 and SHA-512',
|
||||
PS256: 'RSASSA-PSS using SHA-256 and MGF1 with SHA-256',
|
||||
PS384: 'RSASSA-PSS using SHA-384 and MGF1 with SHA-384',
|
||||
PS512: 'RSASSA-PSS using SHA-512 and MGF1 with SHA-512',
|
||||
none: 'No digital signature or MAC performed',
|
||||
};
|
||||
|
||||
// List extracted from IANA: https://www.iana.org/assignments/jwt/jwt.xhtml
|
||||
export const CLAIM_DESCRIPTIONS: Record<string, string> = {
|
||||
typ: 'Type',
|
||||
alg: 'Algorithm',
|
||||
iss: 'Issuer',
|
||||
sub: 'Subject',
|
||||
aud: 'Audience',
|
||||
exp: 'Expiration Time',
|
||||
nbf: 'Not Before',
|
||||
iat: 'Issued At',
|
||||
jti: 'JWT ID',
|
||||
name: 'Full name',
|
||||
given_name: 'Given name(s) or first name(s)',
|
||||
family_name: 'Surname(s) or last name(s)',
|
||||
middle_name: 'Middle name(s)',
|
||||
nickname: 'Casual name',
|
||||
preferred_username: 'Shorthand name by which the End-User wishes to be referred to',
|
||||
profile: 'Profile page URL',
|
||||
picture: 'Profile picture URL',
|
||||
website: 'Web page or blog URL',
|
||||
email: 'Preferred e-mail address',
|
||||
email_verified: 'True if the e-mail address has been verified; otherwise false',
|
||||
gender: 'Gender',
|
||||
birthdate: 'Birthday',
|
||||
zoneinfo: 'Time zone',
|
||||
locale: 'Locale',
|
||||
phone_number: 'Preferred telephone number',
|
||||
phone_number_verified: 'True if the phone number has been verified; otherwise false',
|
||||
address: 'Preferred postal address',
|
||||
updated_at: 'Time the information was last updated',
|
||||
azp: 'Authorized party - the party to which the ID Token was issued',
|
||||
nonce: 'Value used to associate a Client session with an ID Token',
|
||||
auth_time: 'Time when the authentication occurred',
|
||||
at_hash: 'Access Token hash value',
|
||||
c_hash: 'Code hash value',
|
||||
acr: 'Authentication Context Class Reference',
|
||||
amr: 'Authentication Methods References',
|
||||
sub_jwk: 'Public key used to check the signature of an ID Token',
|
||||
cnf: 'Confirmation',
|
||||
sip_from_tag: 'SIP From tag header field parameter value',
|
||||
sip_date: 'SIP Date header field value',
|
||||
sip_callid: 'SIP Call-Id header field value',
|
||||
sip_cseq_num: 'SIP CSeq numeric header field parameter value',
|
||||
sip_via_branch: 'SIP Via branch header field parameter value',
|
||||
orig: 'Originating Identity String',
|
||||
dest: 'Destination Identity String',
|
||||
mky: 'Media Key Fingerprint String',
|
||||
events: 'Security Events',
|
||||
toe: 'Time of Event',
|
||||
txn: 'Transaction Identifier',
|
||||
rph: 'Resource Priority Header Authorization',
|
||||
sid: 'Session ID',
|
||||
vot: 'Vector of Trust value',
|
||||
vtm: 'Vector of Trust trustmark URL',
|
||||
attest: 'Attestation level as defined in SHAKEN framework',
|
||||
origid: 'Originating Identifier as defined in SHAKEN framework',
|
||||
act: 'Actor',
|
||||
scope: 'Scope Values',
|
||||
client_id: 'Client Identifier',
|
||||
may_act: 'Authorized Actor - the party that is authorized to become the actor',
|
||||
jcard: 'jCard data',
|
||||
at_use_nbr: 'Number of API requests for which the access token can be used',
|
||||
div: 'Diverted Target of a Call',
|
||||
opt: 'Original PASSporT (in Full Form)',
|
||||
vc: 'Verifiable Credential as specified in the W3C Recommendation',
|
||||
vp: 'Verifiable Presentation as specified in the W3C Recommendation',
|
||||
sph: 'SIP Priority header field',
|
||||
ace_profile: 'ACE profile a token is supposed to be used with.',
|
||||
cnonce: 'Client nonce',
|
||||
exi: 'Expires in',
|
||||
roles: 'Roles',
|
||||
groups: 'Groups',
|
||||
entitlements: 'Entitlements',
|
||||
token_introspection: 'Token introspection response',
|
||||
};
|
46
src/tools/jwt-parser/jwt-parser.service.ts
Normal file
46
src/tools/jwt-parser/jwt-parser.service.ts
Normal file
@@ -0,0 +1,46 @@
|
||||
import jwtDecode, { type JwtHeader, type JwtPayload } from 'jwt-decode';
|
||||
import _ from 'lodash';
|
||||
import { match } from 'ts-pattern';
|
||||
import { ALGORITHM_DESCRIPTIONS, CLAIM_DESCRIPTIONS } from './jwt-parser.constants';
|
||||
|
||||
export { decodeJwt };
|
||||
|
||||
function decodeJwt({ jwt }: { jwt: string }) {
|
||||
const rawHeader = jwtDecode<JwtHeader>(jwt, { header: true });
|
||||
const rawPayload = jwtDecode<JwtPayload>(jwt);
|
||||
|
||||
const header = _.map(rawHeader, (value, claim) => parseClaims({ claim, value }));
|
||||
const payload = _.map(rawPayload, (value, claim) => parseClaims({ claim, value }));
|
||||
|
||||
return {
|
||||
header,
|
||||
payload,
|
||||
};
|
||||
}
|
||||
|
||||
function parseClaims({ claim, value }: { claim: string; value: unknown }) {
|
||||
const claimDescription = CLAIM_DESCRIPTIONS[claim];
|
||||
const formattedValue = _.isPlainObject(value) ? JSON.stringify(value, null, 3) : _.toString(value);
|
||||
const friendlyValue = getFriendlyValue({ claim, value });
|
||||
|
||||
return {
|
||||
value: formattedValue,
|
||||
friendlyValue,
|
||||
claim,
|
||||
claimDescription,
|
||||
};
|
||||
}
|
||||
|
||||
function getFriendlyValue({ claim, value }: { claim: string; value: unknown }) {
|
||||
return match(claim)
|
||||
.with('exp', 'nbf', 'iat', () => dateFormatter(value))
|
||||
.with('alg', () => (_.isString(value) ? ALGORITHM_DESCRIPTIONS[value] : undefined))
|
||||
.otherwise(() => undefined);
|
||||
}
|
||||
|
||||
const dateFormatter = (value: unknown) => {
|
||||
if (_.isNil(value)) return undefined;
|
||||
|
||||
const date = new Date(Number(value) * 1000);
|
||||
return `${date.toLocaleDateString()} ${date.toLocaleTimeString()}`;
|
||||
};
|
70
src/tools/jwt-parser/jwt-parser.vue
Normal file
70
src/tools/jwt-parser/jwt-parser.vue
Normal file
@@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<n-card>
|
||||
<n-form-item label="JWT to decode" :feedback="validation.message" :validation-status="validation.status">
|
||||
<n-input v-model:value="rawJwt" type="textarea" placeholder="Put your token here..." rows="5" />
|
||||
</n-form-item>
|
||||
|
||||
<n-table v-if="validation.isValid">
|
||||
<tbody>
|
||||
<template v-for="section of sections" :key="section.key">
|
||||
<th colspan="2" class="table-header">{{ section.title }}</th>
|
||||
<tr v-for="{ claim, claimDescription, friendlyValue, value } in decodedJWT[section.key]" :key="claim + value">
|
||||
<td class="claims">
|
||||
<n-space>
|
||||
<n-text strong>{{ claim }}</n-text>
|
||||
<template v-if="claimDescription">
|
||||
<n-text depth="3">({{ claimDescription }})</n-text>
|
||||
</template>
|
||||
</n-space>
|
||||
</td>
|
||||
<td>
|
||||
<n-space>
|
||||
<n-text>{{ value }}</n-text>
|
||||
<template v-if="friendlyValue">
|
||||
<n-text depth="3">({{ friendlyValue }})</n-text>
|
||||
</template>
|
||||
</n-space>
|
||||
</td>
|
||||
</tr>
|
||||
</template>
|
||||
</tbody>
|
||||
</n-table>
|
||||
</n-card>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useValidation } from '@/composable/validation';
|
||||
import { isNotThrowing } from '@/utils/boolean';
|
||||
import { withDefaultOnError } from '@/utils/defaults';
|
||||
import { computed, ref } from 'vue';
|
||||
import { decodeJwt } from './jwt-parser.service';
|
||||
|
||||
const rawJwt = ref(
|
||||
'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.SflKxwRJSMeKKF2QT4fwpMeJf36POk6yJV_adQssw5c',
|
||||
);
|
||||
|
||||
const decodedJWT = computed(() =>
|
||||
withDefaultOnError(() => decodeJwt({ jwt: rawJwt.value }), { header: [], payload: [] }),
|
||||
);
|
||||
|
||||
const sections = [
|
||||
{ key: 'header', title: 'Header' },
|
||||
{ key: 'payload', title: 'Payload' },
|
||||
] as const;
|
||||
|
||||
const validation = useValidation({
|
||||
source: rawJwt,
|
||||
rules: [
|
||||
{
|
||||
validator: (value) => value.length > 0 && isNotThrowing(() => decodeJwt({ jwt: rawJwt.value })),
|
||||
message: 'Invalid JWT',
|
||||
},
|
||||
],
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.table-header {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
26
src/tools/keycode-info/index.ts
Normal file
26
src/tools/keycode-info/index.ts
Normal file
@@ -0,0 +1,26 @@
|
||||
import { Keyboard } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Keycode info',
|
||||
path: '/keycode-info',
|
||||
description: 'Find the javascript keycode, code, location and modifiers of any pressed key.',
|
||||
keywords: [
|
||||
'keycode',
|
||||
'info',
|
||||
'code',
|
||||
'javascript',
|
||||
'event',
|
||||
'keycodes',
|
||||
'which',
|
||||
'keyboard',
|
||||
'press',
|
||||
'modifier',
|
||||
'alt',
|
||||
'ctrl',
|
||||
'meta',
|
||||
'shift',
|
||||
],
|
||||
component: () => import('./keycode-info.vue'),
|
||||
icon: Keyboard,
|
||||
});
|
67
src/tools/keycode-info/keycode-info.vue
Normal file
67
src/tools/keycode-info/keycode-info.vue
Normal file
@@ -0,0 +1,67 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-card style="text-align: center; padding: 40px 0; margin-bottom: 26px">
|
||||
<n-h2 v-if="event">{{ event.key }}</n-h2>
|
||||
<n-text strong depth="3">Press the key on your keyboard you want to get info about this key</n-text>
|
||||
</n-card>
|
||||
|
||||
<n-input-group v-for="({ label, value, placeholder }, i) of fields" :key="i" style="margin-bottom: 5px">
|
||||
<n-input-group-label style="flex: 0 0 150px"> {{ label }} </n-input-group-label>
|
||||
<input-copyable :value="value" readonly :placeholder="placeholder" />
|
||||
</n-input-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useEventListener } from '@vueuse/core';
|
||||
import { computed, ref } from 'vue';
|
||||
import InputCopyable from '../../components/InputCopyable.vue';
|
||||
|
||||
const event = ref<KeyboardEvent>();
|
||||
|
||||
useEventListener(document, 'keydown', (e) => {
|
||||
event.value = e;
|
||||
});
|
||||
|
||||
const fields = computed(() => {
|
||||
if (!event.value) return [];
|
||||
|
||||
return [
|
||||
{
|
||||
label: 'Key :',
|
||||
value: event.value.key,
|
||||
placeholder: 'Key name...',
|
||||
},
|
||||
{
|
||||
label: 'Keycode :',
|
||||
value: String(event.value.keyCode),
|
||||
placeholder: 'Keycode...',
|
||||
},
|
||||
{
|
||||
label: 'Code :',
|
||||
value: event.value.code,
|
||||
placeholder: 'Code...',
|
||||
},
|
||||
{
|
||||
label: 'Location :',
|
||||
value: String(event.value.location),
|
||||
placeholder: 'Code...',
|
||||
},
|
||||
|
||||
{
|
||||
label: 'Modifiers :',
|
||||
value: [
|
||||
event.value.metaKey && 'Meta',
|
||||
event.value.shiftKey && 'Shift',
|
||||
event.value.ctrlKey && 'Ctrl',
|
||||
event.value.altKey && 'Alt',
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' + '),
|
||||
placeholder: 'None',
|
||||
},
|
||||
];
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
@@ -12,19 +12,19 @@ export const twitter: OGSchemaType = {
|
||||
{ label: 'Player', value: 'player' },
|
||||
],
|
||||
label: 'Card type',
|
||||
placeholder: 'The twitter card type...',
|
||||
placeholder: 'The Twitter card type...',
|
||||
key: 'twitter:card',
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: 'Site account',
|
||||
placeholder: 'The name of the twitter account of the site (ex: @ittoolsdottech)...',
|
||||
placeholder: 'The name of the Twitter account of the site (ex: @ittoolsdottech)...',
|
||||
key: 'twitter:site',
|
||||
},
|
||||
{
|
||||
type: 'input',
|
||||
label: 'Creator acc.',
|
||||
placeholder: 'The name of the twitter account of the creator (ex: @cthmsst)...',
|
||||
placeholder: 'The name of the Twitter account of the creator (ex: @cthmsst)...',
|
||||
key: 'twitter:creator',
|
||||
},
|
||||
],
|
||||
|
@@ -84,7 +84,10 @@ const keyUri = computed(() => buildKeyUri({ secret: secret.value }));
|
||||
|
||||
const { qrcode } = useQRCode({
|
||||
text: keyUri,
|
||||
color: { background: '#00000000', foreground: computed(() => (styleStore.isDarkTheme ? '#ffffff' : '#000000')) },
|
||||
color: {
|
||||
background: computed(() => (styleStore.isDarkTheme ? '#ffffff' : '#00000000')),
|
||||
foreground: '#000000',
|
||||
},
|
||||
options: { width: 210 },
|
||||
});
|
||||
|
||||
@@ -93,7 +96,7 @@ const { attrs: secretValidationAttrs } = useValidation({
|
||||
rules: [
|
||||
{
|
||||
message: 'Secret should be a base32 string',
|
||||
validator: (value) => value.match(/^[A-Z234567]+$/),
|
||||
validator: (value) => value.toUpperCase().match(/^[A-Z234567]+$/),
|
||||
},
|
||||
{
|
||||
message: 'Please set a secret',
|
||||
|
@@ -20,12 +20,16 @@ describe('otp functions', () => {
|
||||
expect(hexToBytes('0102030405060708090a0b0c0d0e0f')).toEqual([1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
|
||||
});
|
||||
});
|
||||
describe('base32tohex', () => {
|
||||
describe('base32toHex', () => {
|
||||
it('convert a base32 to hex string', () => {
|
||||
expect(base32toHex('ABCDEF')).to.eql('00443205');
|
||||
expect(base32toHex('7777')).to.eql('ffff0f');
|
||||
expect(base32toHex('JBSWY3DPEHPK3PXP')).to.eql('48656c6c6f21deadbeef');
|
||||
});
|
||||
|
||||
it('case does not matter', () => {
|
||||
expect(base32toHex('ABC')).to.eql(base32toHex('abc'));
|
||||
});
|
||||
});
|
||||
|
||||
describe('generateHOTP', () => {
|
||||
|
@@ -26,6 +26,7 @@ function base32toHex(base32: string) {
|
||||
const base32Chars = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ234567';
|
||||
|
||||
const bits = base32
|
||||
.toUpperCase() // Since base 32, we coerce lowercase to uppercase
|
||||
.replace(/=+$/, '')
|
||||
.split('')
|
||||
.map((value) => base32Chars.indexOf(value).toString(2).padStart(5, '0'))
|
||||
|
@@ -30,7 +30,7 @@ import { arabicToRoman, romanToArabic } from './roman-numeral-converter.service'
|
||||
const inputNumeral = ref(42);
|
||||
const outputRoman = computed(() => arabicToRoman(inputNumeral.value));
|
||||
|
||||
const inputRoman = ref('IVX');
|
||||
const inputRoman = ref('XLII');
|
||||
const outputNumeral = computed(() => romanToArabic(inputRoman.value));
|
||||
|
||||
const { copy: copyRoman } = useCopy({ source: outputRoman, text: 'Roman number copied to the clipboard' });
|
||||
|
11
src/tools/rsa-key-pair-generator/index.ts
Normal file
11
src/tools/rsa-key-pair-generator/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Certificate } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'RSA key pair generator',
|
||||
path: '/rsa-key-pair-generator',
|
||||
description: 'Generate new random RSA private and public key pem certificates.',
|
||||
keywords: ['rsa', 'key', 'pair', 'generator', 'public', 'private', 'secret', 'ssh', 'pem'],
|
||||
component: () => import('./rsa-key-pair-generator.vue'),
|
||||
icon: Certificate,
|
||||
});
|
@@ -0,0 +1,25 @@
|
||||
import { pki } from 'node-forge';
|
||||
|
||||
export { generateKeyPair };
|
||||
|
||||
function generateRawPairs({ bits = 2048 }) {
|
||||
return new Promise<pki.rsa.KeyPair>((resolve, reject) =>
|
||||
pki.rsa.generateKeyPair({ bits }, (err, keyPair) => {
|
||||
if (err) {
|
||||
reject(err);
|
||||
return;
|
||||
}
|
||||
|
||||
resolve(keyPair);
|
||||
}),
|
||||
);
|
||||
}
|
||||
|
||||
async function generateKeyPair(config: { bits?: number } = {}) {
|
||||
const { privateKey, publicKey } = await generateRawPairs(config);
|
||||
|
||||
return {
|
||||
publicKeyPem: pki.publicKeyToPem(publicKey),
|
||||
privateKeyPem: pki.privateKeyToPem(privateKey),
|
||||
};
|
||||
}
|
48
src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
Normal file
48
src/tools/rsa-key-pair-generator/rsa-key-pair-generator.vue
Normal file
@@ -0,0 +1,48 @@
|
||||
<template>
|
||||
<div style="flex: 0 0 100%">
|
||||
<n-space item-style="flex: 1 1 0" style="margin: 0 auto; max-width: 600px" justify="center">
|
||||
<n-form-item label="Bits :" v-bind="bitsValidationAttrs" label-placement="left" label-width="100">
|
||||
<n-input-number v-model:value="bits" min="256" max="16384" step="8" style="width: 150px" />
|
||||
</n-form-item>
|
||||
</n-space>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Public key</h3>
|
||||
<textarea-copyable :value="certs.publicKeyPem" />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3>Private key</h3>
|
||||
<textarea-copyable :value="certs.privateKeyPem" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import TextareaCopyable from '@/components/TextareaCopyable.vue';
|
||||
import { ref } from 'vue';
|
||||
import { computedAsync } from '@vueuse/core';
|
||||
import { withDefaultOnErrorAsync } from '@/utils/defaults';
|
||||
import { useValidation } from '@/composable/validation';
|
||||
import { generateKeyPair } from './rsa-key-pair-generator.service';
|
||||
|
||||
const bits = ref(2048);
|
||||
const emptyCerts = { publicKeyPem: '', privateKeyPem: '' };
|
||||
|
||||
const { attrs: bitsValidationAttrs } = useValidation({
|
||||
source: bits,
|
||||
rules: [
|
||||
{
|
||||
message: 'Bits should be 256 <= bits <= 16384 and be a multiple of 8',
|
||||
validator: (value) => value >= 256 && value <= 16384 && value % 8 === 0,
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const certs = computedAsync(
|
||||
() => withDefaultOnErrorAsync(() => generateKeyPair({ bits: bits.value }), emptyCerts),
|
||||
emptyCerts,
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
11
src/tools/slugify-string/index.ts
Normal file
11
src/tools/slugify-string/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { AbcRound } from '@vicons/material';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Slugify string',
|
||||
path: '/slugify-string',
|
||||
description: 'Make a string url, filename and id safe.',
|
||||
keywords: ['slugify', 'string', 'escape', 'emoji', 'special', 'character', 'space', 'trim'],
|
||||
component: () => import('./slugify-string.vue'),
|
||||
icon: AbcRound,
|
||||
});
|
33
src/tools/slugify-string/slugify-string.vue
Normal file
33
src/tools/slugify-string/slugify-string.vue
Normal file
@@ -0,0 +1,33 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-form-item label="Your string to slugify">
|
||||
<n-input v-model:value="input" type="textarea" placeholder="Put your string here (ex: My file path)"></n-input>
|
||||
</n-form-item>
|
||||
|
||||
<n-form-item label="Your slug">
|
||||
<n-input
|
||||
:value="slug"
|
||||
type="textarea"
|
||||
readonly
|
||||
placeholder="You slug will be generated here (ex: my-file-path)"
|
||||
></n-input>
|
||||
</n-form-item>
|
||||
|
||||
<n-space justify="center">
|
||||
<n-button secondary :disabled="slug.length === 0" @click="copy">Copy slug</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, ref } from 'vue';
|
||||
import slugify from '@sindresorhus/slugify';
|
||||
import { withDefaultOnError } from '@/utils/defaults';
|
||||
import { useCopy } from '@/composable/copy';
|
||||
|
||||
const input = ref('');
|
||||
const slug = computed(() => withDefaultOnError(() => slugify(input.value), ''));
|
||||
const { copy } = useCopy({ source: slug, text: 'Slug copied to clipboard' });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
24
src/tools/temperature-converter/index.ts
Normal file
24
src/tools/temperature-converter/index.ts
Normal file
@@ -0,0 +1,24 @@
|
||||
import { Temperature } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Temperature converter',
|
||||
path: '/temperature-converter',
|
||||
description:
|
||||
'Temperature degrees conversions for Kelvin, Celsius, Fahrenheit, Rankine, Delisle, Newton, Réaumur and Rømer.',
|
||||
keywords: [
|
||||
'temperature',
|
||||
'converter',
|
||||
'degree',
|
||||
'Kelvin',
|
||||
'Celsius',
|
||||
'Fahrenheit',
|
||||
'Rankine',
|
||||
'Delisle',
|
||||
'Newton',
|
||||
'Réaumur',
|
||||
'Rømer',
|
||||
],
|
||||
component: () => import('./temperature-converter.vue'),
|
||||
icon: Temperature,
|
||||
});
|
@@ -0,0 +1,20 @@
|
||||
export const convertCelsiusToKelvin = (temperature: number) => temperature + 273.15;
|
||||
export const convertKelvinToCelsius = (temperature: number) => temperature - 273.15;
|
||||
|
||||
export const convertFahrenheitToKelvin = (temperature: number) => (temperature + 459.67) * (5 / 9);
|
||||
export const convertKelvinToFahrenheit = (temperature: number) => temperature * (9 / 5) - 459.67;
|
||||
|
||||
export const convertRankineToKelvin = (temperature: number) => temperature * (5 / 9);
|
||||
export const convertKelvinToRankine = (temperature: number) => temperature * (9 / 5);
|
||||
|
||||
export const convertDelisleToKelvin = (temperature: number) => 373.15 - (2 / 3) * temperature;
|
||||
export const convertKelvinToDelisle = (temperature: number) => (3 / 2) * (373.15 - temperature);
|
||||
|
||||
export const convertNewtonToKelvin = (temperature: number) => temperature * (100 / 33) + 273.15;
|
||||
export const convertKelvinToNewton = (temperature: number) => (temperature - 273.15) * (33 / 100);
|
||||
|
||||
export const convertReaumurToKelvin = (temperature: number) => temperature * (5 / 4) + 273.15;
|
||||
export const convertKelvinToReaumur = (temperature: number) => (temperature - 273.15) * (4 / 5);
|
||||
|
||||
export const convertRomerToKelvin = (temperature: number) => (temperature - 7.5) * (40 / 21) + 273.15;
|
||||
export const convertKelvinToRomer = (temperature: number) => (temperature - 273.15) * (21 / 40) + 7.5;
|
127
src/tools/temperature-converter/temperature-converter.vue
Normal file
127
src/tools/temperature-converter/temperature-converter.vue
Normal file
@@ -0,0 +1,127 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-input-group
|
||||
v-for="[key, { title, unit }] in Object.entries(units)"
|
||||
:key="key"
|
||||
style="width: 100%; margin-bottom: 15px"
|
||||
>
|
||||
<n-input-group-label style="width: 100px">
|
||||
{{ title }}
|
||||
</n-input-group-label>
|
||||
|
||||
<n-input-number
|
||||
v-model:value="units[key].ref"
|
||||
style="flex: 1"
|
||||
@update:value="() => update(key as TemperatureScale)"
|
||||
/>
|
||||
|
||||
<n-input-group-label style="width: 50px">
|
||||
{{ unit }}
|
||||
</n-input-group-label>
|
||||
</n-input-group>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import _ from 'lodash';
|
||||
import { reactive } from 'vue';
|
||||
import {
|
||||
convertCelsiusToKelvin,
|
||||
convertDelisleToKelvin,
|
||||
convertFahrenheitToKelvin,
|
||||
convertKelvinToCelsius,
|
||||
convertKelvinToDelisle,
|
||||
convertKelvinToFahrenheit,
|
||||
convertKelvinToNewton,
|
||||
convertKelvinToRankine,
|
||||
convertKelvinToReaumur,
|
||||
convertKelvinToRomer,
|
||||
convertNewtonToKelvin,
|
||||
convertRankineToKelvin,
|
||||
convertReaumurToKelvin,
|
||||
convertRomerToKelvin,
|
||||
} from './temperature-converter.models';
|
||||
|
||||
type TemperatureScale = 'kelvin' | 'celsius' | 'fahrenheit' | 'rankine' | 'delisle' | 'newton' | 'reaumur' | 'romer';
|
||||
|
||||
const units = reactive<
|
||||
Record<
|
||||
string | TemperatureScale,
|
||||
{ title: string; unit: string; ref: number; toKelvin: (v: number) => number; fromKelvin: (v: number) => number }
|
||||
>
|
||||
>({
|
||||
kelvin: {
|
||||
title: 'Kelvin',
|
||||
unit: 'K',
|
||||
ref: 0,
|
||||
toKelvin: _.identity,
|
||||
fromKelvin: _.identity,
|
||||
},
|
||||
celsius: {
|
||||
title: 'Celsius',
|
||||
unit: '°C',
|
||||
ref: 0,
|
||||
toKelvin: convertCelsiusToKelvin,
|
||||
fromKelvin: convertKelvinToCelsius,
|
||||
},
|
||||
fahrenheit: {
|
||||
title: 'Fahrenheit',
|
||||
unit: '°F',
|
||||
ref: 0,
|
||||
toKelvin: convertFahrenheitToKelvin,
|
||||
fromKelvin: convertKelvinToFahrenheit,
|
||||
},
|
||||
rankine: {
|
||||
title: 'Rankine',
|
||||
unit: '°R',
|
||||
ref: 0,
|
||||
toKelvin: convertRankineToKelvin,
|
||||
fromKelvin: convertKelvinToRankine,
|
||||
},
|
||||
delisle: {
|
||||
title: 'Delisle',
|
||||
unit: '°De',
|
||||
ref: 0,
|
||||
toKelvin: convertDelisleToKelvin,
|
||||
fromKelvin: convertKelvinToDelisle,
|
||||
},
|
||||
newton: {
|
||||
title: 'Newton',
|
||||
unit: '°N',
|
||||
ref: 0,
|
||||
toKelvin: convertNewtonToKelvin,
|
||||
fromKelvin: convertKelvinToNewton,
|
||||
},
|
||||
reaumur: {
|
||||
title: 'Réaumur',
|
||||
unit: '°Ré',
|
||||
ref: 0,
|
||||
toKelvin: convertReaumurToKelvin,
|
||||
fromKelvin: convertKelvinToReaumur,
|
||||
},
|
||||
romer: {
|
||||
title: 'Rømer',
|
||||
unit: '°Rø',
|
||||
ref: 0,
|
||||
toKelvin: convertRomerToKelvin,
|
||||
fromKelvin: convertKelvinToRomer,
|
||||
},
|
||||
});
|
||||
|
||||
function update(key: TemperatureScale) {
|
||||
const { ref: value, toKelvin } = units[key];
|
||||
|
||||
const kelvins = toKelvin(value) ?? 0;
|
||||
|
||||
_.chain(units)
|
||||
.omit(key)
|
||||
.forEach(({ fromKelvin }, index) => {
|
||||
units[index].ref = Math.floor((fromKelvin(kelvins) ?? 0) * 100) / 100;
|
||||
})
|
||||
.value();
|
||||
}
|
||||
|
||||
update('kelvin');
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
11
src/tools/text-to-nato-alphabet/index.ts
Normal file
11
src/tools/text-to-nato-alphabet/index.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import { Speakerphone } from '@vicons/tabler';
|
||||
import { defineTool } from '../tool';
|
||||
|
||||
export const tool = defineTool({
|
||||
name: 'Text to NATO alphabet',
|
||||
path: '/text-to-nato-alphabet',
|
||||
description: 'Transform text into NATO phonetic alphabet for oral transmission.',
|
||||
keywords: ['string', 'nato', 'alphabet', 'phonetic', 'oral', 'transmission'],
|
||||
component: () => import('./text-to-nato-alphabet.vue'),
|
||||
icon: Speakerphone,
|
||||
});
|
@@ -0,0 +1,28 @@
|
||||
export const natoAlphabet = [
|
||||
'Alpha',
|
||||
'Bravo',
|
||||
'Charlie',
|
||||
'Delta',
|
||||
'Echo',
|
||||
'Foxtrot',
|
||||
'Golf',
|
||||
'Hotel',
|
||||
'India',
|
||||
'Juliet',
|
||||
'Kilo',
|
||||
'Lima',
|
||||
'Mike',
|
||||
'November',
|
||||
'Oscar',
|
||||
'Papa',
|
||||
'Quebec',
|
||||
'Romeo',
|
||||
'Sierra',
|
||||
'Tango',
|
||||
'Uniform',
|
||||
'Victor',
|
||||
'Whiskey',
|
||||
'X-ray',
|
||||
'Yankee',
|
||||
'Zulu',
|
||||
];
|
@@ -0,0 +1,19 @@
|
||||
import { natoAlphabet } from './text-to-nato-alphabet.constants';
|
||||
|
||||
export { textToNatoAlphabet };
|
||||
|
||||
function getLetterPositionInAlphabet({ letter }: { letter: string }) {
|
||||
return letter.toLowerCase().charCodeAt(0) - 'a'.charCodeAt(0);
|
||||
}
|
||||
|
||||
function textToNatoAlphabet({ text }: { text: string }) {
|
||||
return text
|
||||
.split('')
|
||||
.map((character) => {
|
||||
const alphabetIndex = getLetterPositionInAlphabet({ letter: character });
|
||||
const natoWord = natoAlphabet[alphabetIndex];
|
||||
|
||||
return natoWord ?? character;
|
||||
})
|
||||
.join(' ');
|
||||
}
|
30
src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
Normal file
30
src/tools/text-to-nato-alphabet/text-to-nato-alphabet.vue
Normal file
@@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<n-form-item label="Your text to convert to NATO phonetic alphabet">
|
||||
<n-input v-model:value="input" placeholder="Put your text here..." clearable />
|
||||
</n-form-item>
|
||||
|
||||
<n-space v-if="natoText" vertical>
|
||||
<n-text>Your text in NATO phonetic alphabet</n-text>
|
||||
<n-card>
|
||||
{{ natoText }}
|
||||
</n-card>
|
||||
|
||||
<n-space justify="center">
|
||||
<n-button secondary autofocus @click="copy"> Copy NATO string </n-button>
|
||||
</n-space>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import { computed, ref } from 'vue';
|
||||
import { textToNatoAlphabet } from './text-to-nato-alphabet.service';
|
||||
|
||||
const input = ref('');
|
||||
const natoText = computed(() => textToNatoAlphabet({ text: input.value }));
|
||||
const { copy } = useCopy({ source: natoText, text: 'NATO alphabet string copied.' });
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
@@ -54,18 +54,19 @@
|
||||
<script setup lang="ts">
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import { ref, watch } from 'vue';
|
||||
import { useQueryParam } from '@/composable/queryParams';
|
||||
import { createToken } from './token-generator.service';
|
||||
|
||||
const token = ref('');
|
||||
const length = ref(64);
|
||||
const length = useQueryParam({ name: 'length', defaultValue: 64 });
|
||||
const { copy } = useCopy({ source: token, text: 'Token copied to the clipboard' });
|
||||
|
||||
const withUppercase = ref(true);
|
||||
const withLowercase = ref(true);
|
||||
const withNumbers = ref(true);
|
||||
const withSymbols = ref(false);
|
||||
const withUppercase = useQueryParam({ name: 'uppercase', defaultValue: true });
|
||||
const withLowercase = useQueryParam({ name: 'lowercase', defaultValue: true });
|
||||
const withNumbers = useQueryParam({ name: 'numbers', defaultValue: true });
|
||||
const withSymbols = useQueryParam({ name: 'symbols', defaultValue: false });
|
||||
|
||||
watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken);
|
||||
watch([withUppercase, withLowercase, withNumbers, withSymbols, length], refreshToken, { immediate: true });
|
||||
|
||||
function refreshToken() {
|
||||
token.value = createToken({
|
||||
@@ -76,6 +77,4 @@ function refreshToken() {
|
||||
withSymbols: withSymbols.value,
|
||||
});
|
||||
}
|
||||
|
||||
refreshToken();
|
||||
</script>
|
||||
|
@@ -32,8 +32,9 @@
|
||||
import { useCopy } from '@/composable/copy';
|
||||
import { ref, watch } from 'vue';
|
||||
import { v4 as generateUUID } from 'uuid';
|
||||
import { useQueryParam } from '@/composable/queryParams';
|
||||
|
||||
const count = ref(1);
|
||||
const count = useQueryParam({ defaultValue: 1, name: 'count' });
|
||||
|
||||
const uuids = ref('');
|
||||
|
||||
|
@@ -1,4 +1,4 @@
|
||||
export { withDefaultOnError };
|
||||
export { withDefaultOnError, withDefaultOnErrorAsync };
|
||||
|
||||
function withDefaultOnError<A, B>(cb: () => A, defaultValue: B): A | B {
|
||||
try {
|
||||
@@ -7,3 +7,11 @@ function withDefaultOnError<A, B>(cb: () => A, defaultValue: B): A | B {
|
||||
return defaultValue;
|
||||
}
|
||||
}
|
||||
|
||||
async function withDefaultOnErrorAsync<A, B>(cb: () => A, defaultValue: B): Promise<Awaited<A> | B> {
|
||||
try {
|
||||
return await cb();
|
||||
} catch (_) {
|
||||
return defaultValue;
|
||||
}
|
||||
}
|
||||
|
Reference in New Issue
Block a user