Compare commits

...

26 Commits

Author SHA1 Message Date
Corentin Thomasset
55d2a4d7af feat(new-tool): ed25519 key pair generator 2023-03-27 00:01:46 +02:00
Corentin Thomasset
7c40539ef9 refactor(otp-generator): coerce lowercase secret characters to uppercase 2023-03-26 22:43:56 +02:00
Corentin Thomasset
f3b1863f09 feat(new-tool): html wysiwyg editor 2023-03-26 20:21:00 +02:00
Corentin Thomasset
b1d6bfd2dc refactor(otp-generator): no more barcode color invertion 2023-03-26 16:15:37 +02:00
Corentin Thomasset
8787ce72ab fix(roman-converter): replaced incorrect default value 2023-03-24 18:35:37 +01:00
Corentin Thomasset
dab8d63390 refactor(readme): better headings levels 2023-03-24 08:42:28 +01:00
Corentin Thomasset
96aaa35ea2 docs(docker): added self hosting command in README 2023-03-23 22:47:14 +01:00
Benny
519b169336 chore(docker): arm64 and amd64 as supported platform (#271) 2023-03-23 21:48:07 +01:00
Corentin Thomasset
3bc1f0d1fa chore(docker): it-tools docker container 2023-03-23 18:54:51 +01:00
Corentin Thomasset
b519cc9574 chore(deps): updated dependencies versions 2023-03-19 11:59:43 +01:00
Corentin Thomasset
30e9149d61 feat(new-tool): RSA key pair generator 2023-03-10 18:16:55 +01:00
marvin-j97
7958e2e075 refactor(branding): correct branding for twitter & github (#268) 2023-03-08 18:09:53 +01:00
Corentin Thomasset
61024279b5 fix(about): correct git branch in package.json url 2023-03-08 13:48:52 +01:00
Corentin Thomasset
ad202bd372 revert(pwa): fallback to autoUpdate 2023-03-01 23:35:17 +01:00
Corentin Thomasset
400654b6b1 chore(pwa): close update notification on update 2023-03-01 23:24:17 +01:00
Corentin Thomasset
3351b70c1a refactor(sponsor): updated support link to buy me a coffe 2023-03-01 22:15:51 +01:00
Corentin Thomasset
53ce079dff refactor(pwa): prompt for pwa update 2023-03-01 22:00:29 +01:00
Corentin Thomasset
a771346250 refactor(style): improved dark mode colors 2023-02-21 23:14:27 +01:00
Corentin Thomasset
a312dedf65 fix(jwt-parser): prevent [object Object] value 2023-02-21 22:52:08 +01:00
Corentin Thomasset
0ddf18f4b5 feat(new-tool): String to NATO alphabet 2023-02-15 00:45:20 +01:00
Corentin Thomasset
9634f5d9a8 fix(case-converter): allowed diacritics 2023-02-10 22:59:44 +01:00
Corentin Thomasset
e6c0445684 fix(case-converter): allowed diacritics 2023-02-10 22:53:10 +01:00
Corentin Thomasset
32f87f3fca refactor(tool-card): enforce description height 2023-02-10 22:20:50 +01:00
Corentin Thomasset
a3b1cb5737 refactor(tool-card): enforce description height 2023-02-10 22:13:08 +01:00
Corentin Thomasset
6fe4b5ac60 feat(new-tool): slugify string 2023-02-10 22:06:32 +01:00
Corentin Thomasset
1a3f0a135d refactor(keycode-info): wording 2023-02-06 23:26:40 +01:00
40 changed files with 2644 additions and 1123 deletions

View File

@@ -32,5 +32,6 @@ module.exports = {
tsx: 'never',
},
],
'import/no-unresolved': ['error', { ignore: ['^virtual:'] }],
},
};

60
.github/workflows/docker-release.yml vendored Normal file
View 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

13
Dockerfile Normal file
View 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;"]

View File

@@ -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

View File

@@ -33,35 +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.11.0",
"@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.1.3",
"ts-pattern": "^4.2.1",
"uuid": "^8.3.2",
"vue": "^3.2.45",
"vue": "^3.2.47",
"vue-router": "^4.1.6"
},
"devDependencies": {
@@ -69,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",

2884
pnpm-lock.yaml generated

File diff suppressed because it is too large Load Diff

View File

@@ -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>

View File

@@ -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>

View File

@@ -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 />&nbsp;
</n-ellipsis>
</div>
</n-card>

View File

@@ -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"

View File

@@ -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>

View File

@@ -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>

View File

@@ -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',
},
};

View File

@@ -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>

View File

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

View File

@@ -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>

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

View 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>

View 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>

View 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>

View 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>

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

View File

@@ -1,6 +1,10 @@
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';
@@ -42,7 +46,7 @@ import { tool as uuidGenerator } from './uuid-generator';
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',
@@ -54,6 +58,7 @@ export const toolsByCategory: ToolCategory[] = [
base64FileConverter,
colorConverter,
caseConverter,
textToNatoAlphabet,
],
},
{
@@ -69,6 +74,8 @@ export const toolsByCategory: ToolCategory[] = [
mimeTypes,
jwtParser,
keycodeInfo,
slugifyString,
htmlWysiwygEditor,
],
},
{

View File

@@ -20,7 +20,7 @@ function decodeJwt({ jwt }: { jwt: string }) {
function parseClaims({ claim, value }: { claim: string; value: unknown }) {
const claimDescription = CLAIM_DESCRIPTIONS[claim];
const formattedValue = _.toString(value);
const formattedValue = _.isPlainObject(value) ? JSON.stringify(value, null, 3) : _.toString(value);
const friendlyValue = getFriendlyValue({ claim, value });
return {

View File

@@ -2,7 +2,7 @@
<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 now stuff</n-text>
<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">

View File

@@ -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',
},
],

View File

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

View File

@@ -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', () => {

View File

@@ -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'))

View File

@@ -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' });

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

View File

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

View 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>

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

View 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>

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

View File

@@ -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',
];

View File

@@ -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(' ');
}

View 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>

View File

@@ -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;
}
}