-
+
+
diff --git a/src/renderer/ipc/listeners/main-menu.ts b/src/renderer/ipc/listeners/main-menu.ts
index 09b4ac00..e1e85648 100644
--- a/src/renderer/ipc/listeners/main-menu.ts
+++ b/src/renderer/ipc/listeners/main-menu.ts
@@ -16,6 +16,10 @@ export function registerMainMenuListeners() {
router.push({ name: RouterName.preferences })
})
+ ipc.on('main-menu:goto-devtools', () => {
+ router.push({ name: RouterName.devtoolsCaseConverter })
+ })
+
ipc.on('main-menu:new-snippet', () => {
createSnippetAndSelect()
})
diff --git a/src/renderer/router/index.ts b/src/renderer/router/index.ts
index 93c00b30..6e4683d5 100644
--- a/src/renderer/router/index.ts
+++ b/src/renderer/router/index.ts
@@ -8,7 +8,23 @@ export const RouterName = {
preferencesAppearance: 'preferences/appearance',
preferencesEditor: 'preferences/editor',
markdownPresentation: 'markdown-presentation',
-}
+ devtools: 'devtools',
+ devtoolsCaseConverter: 'devtools/case-converter',
+ devtoolsTextToUnicode: 'devtools/text-to-unicode',
+ devtoolsTextToAscii: 'devtools/text-to-ascii',
+ devtoolsBase64Converter: 'devtools/base64-converter',
+ devtoolsJsonToYaml: 'devtools/json-to-yaml',
+ devtoolsJsonToToml: 'devtools/json-to-toml',
+ devtoolsJsonToXml: 'devtools/json-to-xml',
+ devtoolsHash: 'devtools/hash',
+ devtoolsHmac: 'devtools/hmac',
+ devtoolsPassword: 'devtools/password',
+ devtoolsUuid: 'devtools/uuid',
+ devtoolsUrlParser: 'devtools/url-parser',
+ devtoolsSlugify: 'devtools/slugify',
+ devtoolsUrlEncoder: 'devtools/url-encoder',
+ devtoolsColorConverter: 'devtools/color-converter',
+} as const
const routes = [
{
@@ -48,6 +64,96 @@ const routes = [
name: RouterName.markdownPresentation,
component: () => import('@/views/MarkdownPresentation.vue'),
},
+ {
+ path: '/devtools',
+ name: RouterName.devtools,
+ component: () => import('@/views/Devtools.vue'),
+ children: [
+ {
+ path: 'text/case-converter',
+ name: RouterName.devtoolsCaseConverter,
+ component: () =>
+ import('@/components/devtools/converters/CaseConverter.vue'),
+ },
+ {
+ path: 'text/to-unicode',
+ name: RouterName.devtoolsTextToUnicode,
+ component: () =>
+ import('@/components/devtools/converters/TextToUnicode.vue'),
+ },
+ {
+ path: 'text/to-ascii',
+ name: RouterName.devtoolsTextToAscii,
+ component: () =>
+ import('@/components/devtools/converters/TextToAsciiBinary.vue'),
+ },
+ {
+ path: 'base64-converter',
+ name: RouterName.devtoolsBase64Converter,
+ component: () =>
+ import('@/components/devtools/converters/Base64Converter.vue'),
+ },
+ {
+ path: 'json-to-yaml',
+ name: RouterName.devtoolsJsonToYaml,
+ component: () =>
+ import('@/components/devtools/converters/JsonToYaml.vue'),
+ },
+ {
+ path: 'json-to-toml',
+ name: RouterName.devtoolsJsonToToml,
+ component: () =>
+ import('@/components/devtools/converters/JsonToToml.vue'),
+ },
+ {
+ path: 'json-to-xml',
+ name: RouterName.devtoolsJsonToXml,
+ component: () =>
+ import('@/components/devtools/converters/JsonToXml.vue'),
+ },
+ {
+ path: 'hash',
+ name: RouterName.devtoolsHash,
+ component: () => import('@/components/devtools/crypto/Hash.vue'),
+ },
+ {
+ path: 'hmac',
+ name: RouterName.devtoolsHmac,
+ component: () => import('@/components/devtools/crypto/Hmac.vue'),
+ },
+ {
+ path: 'password',
+ name: RouterName.devtoolsPassword,
+ component: () => import('@/components/devtools/crypto/Password.vue'),
+ },
+ {
+ path: 'uuid',
+ name: RouterName.devtoolsUuid,
+ component: () => import('@/components/devtools/crypto/Uuid.vue'),
+ },
+ {
+ path: 'url-parser',
+ name: RouterName.devtoolsUrlParser,
+ component: () => import('@/components/devtools/web/UrlParser.vue'),
+ },
+ {
+ path: 'slugify',
+ name: RouterName.devtoolsSlugify,
+ component: () => import('@/components/devtools/web/Slugify.vue'),
+ },
+ {
+ path: 'url-encoder',
+ name: RouterName.devtoolsUrlEncoder,
+ component: () => import('@/components/devtools/web/UrlEncoder.vue'),
+ },
+ {
+ path: 'color-converter',
+ name: RouterName.devtoolsColorConverter,
+ component: () =>
+ import('@/components/devtools/converters/ColorConverter.vue'),
+ },
+ ],
+ },
]
export const router = createRouter({
diff --git a/src/renderer/styles.css b/src/renderer/styles.css
index 1f10dc0f..797561ac 100644
--- a/src/renderer/styles.css
+++ b/src/renderer/styles.css
@@ -11,6 +11,34 @@ body {
color: var(--color-text)
}
+.scrollbar {
+ scrollbar-width: auto;
+ scrollbar-color: var(--color-scrollbar) transparent;
+}
+
+.scrollbar::-webkit-scrollbar {
+ width: 6px;
+}
+
+.scrollbar::-webkit-scrollbar-track {
+ background: transparent;
+}
+
+.scrollbar::-webkit-scrollbar-thumb {
+ background-color: var(--color-scrollbar);
+ border-radius: 3px;
+ opacity: 0.6;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:hover {
+ opacity: 0.8;
+}
+
+.scrollbar::-webkit-scrollbar-thumb:active {
+ opacity: 1;
+}
+
+
@theme {
--color-primary: oklch(50% 0.19 260);
diff --git a/src/renderer/views/Devtools.vue b/src/renderer/views/Devtools.vue
new file mode 100644
index 00000000..2ebbaebd
--- /dev/null
+++ b/src/renderer/views/Devtools.vue
@@ -0,0 +1,139 @@
+
+
+
+ router.push({ name: RouterName.main })"
+ >
+
+
+
+ {{ i18n.t("devtools:converters.label") }}
+
+
+
+
+
+ {{ i18n.t("devtools:crypto.label") }}
+
+
+
+
+
+ {{ i18n.t("devtools:web.label") }}
+
+
+
+
+
+
+
+
+
+
+
+
+