diff options
Diffstat (limited to 'src')
-rw-r--r-- | src/App.vue | 32 | ||||
-rw-r--r-- | src/components/CollapsibleToolMenu.vue | 3 | ||||
-rw-r--r-- | src/components/ColoredCard.vue | 4 | ||||
-rw-r--r-- | src/components/SearchBar.vue | 1 | ||||
-rw-r--r-- | src/layouts/base.layout.vue | 1 | ||||
-rw-r--r-- | src/layouts/tool.layout.vue | 1 | ||||
-rw-r--r-- | src/main.ts | 35 | ||||
-rw-r--r-- | src/pages/Home.page.vue | 34 | ||||
-rw-r--r-- | src/plugins/plausible.plugin.ts | 2 | ||||
-rw-r--r-- | src/router.ts | 67 | ||||
-rw-r--r-- | src/tools/index.ts | 240 |
11 files changed, 227 insertions, 193 deletions
diff --git a/src/App.vue b/src/App.vue index 98199af..56bd733 100644 --- a/src/App.vue +++ b/src/App.vue @@ -1,30 +1,30 @@ <script setup lang="ts"> -import { computed } from 'vue'; -import { useRoute, RouterView } from 'vue-router'; -import { darkTheme, NGlobalStyle, NMessageProvider, NNotificationProvider } from 'naive-ui'; -import { darkThemeOverrides, lightThemeOverrides } from './themes'; -import { layouts } from './layouts'; -import { useStyleStore } from './stores/style.store'; +// import { computed } from 'vue'; +// import { darkTheme, NGlobalStyle, NMessageProvider, NNotificationProvider } from 'naive-ui'; +// import { useRoute, RouterView } from 'vue-router'; +// import { darkThemeOverrides, lightThemeOverrides } from './themes'; +// import { layouts } from './layouts'; +// import { useStyleStore } from './stores/style.store'; -const route = useRoute(); -const layout = computed(() => route?.meta?.layout ?? layouts.base); -const styleStore = useStyleStore(); +// const route = useRoute(); +// const layout = computed(() => route?.meta?.layout ?? layouts.base); +// const styleStore = useStyleStore(); -const theme = computed(() => (styleStore.isDarkTheme ? darkTheme : null)); -const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrides : lightThemeOverrides)); +// const theme = computed(() => (styleStore.isDarkTheme ? darkTheme : null)); +// const themeOverrides = computed(() => (styleStore.isDarkTheme ? darkThemeOverrides : lightThemeOverrides)); </script> <template> - <n-config-provider :theme="theme" :theme-overrides="themeOverrides"> + <!-- <n-config-provider :theme="theme" :theme-overrides="themeOverrides"> <n-global-style /> <n-message-provider placement="bottom"> <n-notification-provider placement="bottom-right"> - <component :is="layout"> - <router-view /> - </component> + <component :is="layout"> --> + <router-view /> + <!-- </component> </n-notification-provider> </n-message-provider> - </n-config-provider> + </n-config-provider> --> </template> <style> diff --git a/src/components/CollapsibleToolMenu.vue b/src/components/CollapsibleToolMenu.vue index b766255..0f6f844 100644 --- a/src/components/CollapsibleToolMenu.vue +++ b/src/components/CollapsibleToolMenu.vue @@ -14,7 +14,6 @@ <n-menu class="menu" - :value="(route.name as string)" :collapsed-width="64" :collapsed-icon-size="22" :options="tools" @@ -32,7 +31,7 @@ import { ChevronRight } from '@vicons/tabler'; import { useStorage } from '@vueuse/core'; import { useThemeVars } from 'naive-ui'; import { toRefs, computed, h } from 'vue'; -import { RouterLink, useRoute } from 'vue-router'; +import { RouterLink } from 'vue-router'; import MenuIconItem from './MenuIconItem.vue'; const props = withDefaults(defineProps<{ toolsByCategory?: ToolCategory[] }>(), { toolsByCategory: () => [] }); diff --git a/src/components/ColoredCard.vue b/src/components/ColoredCard.vue index eb29e40..5c97e22 100644 --- a/src/components/ColoredCard.vue +++ b/src/components/ColoredCard.vue @@ -6,12 +6,12 @@ <n-h3 class="title"> <n-ellipsis>{{ title }}</n-ellipsis> </n-h3> - + <!-- <div class="description"> <n-ellipsis :line-clamp="2" :tooltip="false"> <slot /> </n-ellipsis> - </div> + </div> --> </n-card> </template> diff --git a/src/components/SearchBar.vue b/src/components/SearchBar.vue index 78d6fd7..0485223 100644 --- a/src/components/SearchBar.vue +++ b/src/components/SearchBar.vue @@ -7,7 +7,6 @@ import { SearchRound } from '@vicons/material'; import { useMagicKeys, whenever } from '@vueuse/core'; import type { NInput } from 'naive-ui'; import { computed, h, ref } from 'vue'; -import { useRouter } from 'vue-router'; import SearchBarItem from './SearchBarItem.vue'; const toolToOption = (tool: Tool) => ({ label: tool.name, value: tool.path, tool }); diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue index 1d57a5a..ecbc079 100644 --- a/src/layouts/base.layout.vue +++ b/src/layouts/base.layout.vue @@ -1,7 +1,6 @@ <script lang="ts" setup> import { NIcon, useThemeVars } from 'naive-ui'; import { computed } from 'vue'; -import { RouterLink } from 'vue-router'; import { Heart, Menu2, Home2 } from '@vicons/tabler'; import { toolsByCategory } from '@/tools'; import { useStyleStore } from '@/stores/style.store'; diff --git a/src/layouts/tool.layout.vue b/src/layouts/tool.layout.vue index 6cccbb0..17819f9 100644 --- a/src/layouts/tool.layout.vue +++ b/src/layouts/tool.layout.vue @@ -1,5 +1,4 @@ <script lang="ts" setup> -import { useRoute } from 'vue-router'; import { useHead } from '@vueuse/head'; import type { HeadObject } from '@vueuse/head'; import { computed } from 'vue'; diff --git a/src/main.ts b/src/main.ts index f063ef6..12bda00 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,25 +1,30 @@ -import { createApp } from 'vue'; import { createPinia } from 'pinia'; -import { createHead } from '@vueuse/head'; // eslint-disable-next-line import/no-unresolved -import { registerSW } from 'virtual:pwa-register'; +import { ViteSSG } from 'vite-ssg'; import { plausible } from './plugins/plausible.plugin'; import 'virtual:uno.css'; -registerSW(); - -import { naive } from './plugins/naive.plugin'; +// import { naive } from './plugins/naive.plugin'; import App from './App.vue'; -import router from './router'; - -const app = createApp(App); +import { routes } from './router'; +import { config } from './config'; +// import { useToolStore } from './tools/tools.store'; -app.use(createPinia()); -app.use(createHead()); -app.use(router); -app.use(naive); -app.use(plausible); +export const createApp = ViteSSG( + // the root component + App, + // vue-router options + { routes, base: config.app.baseUrl }, + // function to have custom setups + async ({ app, router, routes, isClient, initialState }) => { + // install plugins etc. + const pinia = createPinia(); + app.use(pinia); -app.mount('#app'); + app.use(plausible); + // import { registerSW } from 'virtual:pwa-register'; + // registerSW(); + }, +); diff --git a/src/pages/Home.page.vue b/src/pages/Home.page.vue index cd77e0c..f8bc301 100644 --- a/src/pages/Home.page.vue +++ b/src/pages/Home.page.vue @@ -12,6 +12,38 @@ useHead({ title: 'IT Tools - Handy online tools for developers' }); </script> <template> + Lorem ipsum dolor sit amet, consectetur adipisicing elit. Earum voluptatibus, voluptatum excepturi quidem ipsam + dignissimos sit eius illo corrupti, provident aliquam quaerat nostrum obcaecati velit ratione neque possimus beatae + quod? + + <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8"> + <n-gi> + aa + <colored-card title="You like it-tools?" :icon="Heart"> + Give us a star on + <!-- <a + href="https://github.com/CorentinTh/it-tools" + rel="noopener" + target="_blank" + 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 + >! Thank you + <n-icon :component="Heart" /> --> + </colored-card> + </n-gi> + </n-grid> + + <n-button>a</n-button> + + <!-- <div class="home-page"> <div class="grid-wrapper"> <n-grid v-if="config.showBanner" x-gap="12" y-gap="12" cols="1 400:2 800:3 1200:4 2000:8"> @@ -67,7 +99,7 @@ useHead({ title: 'IT Tools - Handy online tools for developers' }); </n-gi> </n-grid> </div> - </div> + </div> --> </template> <style scoped lang="less"> diff --git a/src/plugins/plausible.plugin.ts b/src/plugins/plausible.plugin.ts index 50a694d..d014c3d 100644 --- a/src/plugins/plausible.plugin.ts +++ b/src/plugins/plausible.plugin.ts @@ -21,7 +21,7 @@ function createPlausibleInstance({ trackLocalhost: boolean; }; }) { - if (config.isTrackerEnabled) { + if (config.isTrackerEnabled && !import.meta.env.SSR) { return Plausible(config); } diff --git a/src/router.ts b/src/router.ts index f16b418..101fe99 100644 --- a/src/router.ts +++ b/src/router.ts @@ -1,39 +1,38 @@ -import { createRouter, createWebHistory } from 'vue-router'; -import { layouts } from './layouts/index'; +import type { RouteRecordRaw } from 'vue-router'; import HomePage from './pages/Home.page.vue'; +// import { layouts } from './layouts/index'; import NotFound from './pages/404.page.vue'; -import { tools } from './tools'; -import { config } from './config'; +// import { tools } from './tools'; -const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({ - path, - name, - component, - meta: { isTool: true, layout: layouts.toolLayout, name, ...config }, -})); -const toolsRedirectRoutes = tools - .filter(({ redirectFrom }) => redirectFrom && redirectFrom.length > 0) - .flatMap( - ({ path, redirectFrom }) => redirectFrom?.map((redirectSource) => ({ path: redirectSource, redirect: path })) ?? [], - ); +// const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({ +// path, +// name, +// component, +// meta: { isTool: true, layout: layouts.toolLayout, name, ...config }, +// })); +// const toolsRedirectRoutes = tools +// .filter(({ redirectFrom }) => redirectFrom && redirectFrom.length > 0) +// .flatMap( +// ({ path, redirectFrom }) => redirectFrom?.map((redirectSource) => ({ path: redirectSource, redirect: path })) ?? [], +// ); +// +// console.log({ toolsRoutes, toolsRedirectRoutes }); -const router = createRouter({ - history: createWebHistory(config.app.baseUrl), - routes: [ - { - path: '/', - name: 'home', - component: HomePage, - }, - { - path: '/about', - name: 'about', - component: () => import('./pages/About.vue'), - }, - ...toolsRoutes, - ...toolsRedirectRoutes, - { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }, - ], -}); +const routes: RouteRecordRaw[] = [ + // ...toolsRoutes, + // ...toolsRedirectRoutes, + { + path: '/', + name: 'home', + component: HomePage, + }, + // { + // path: '/about', + // name: 'about', + // component: () => import('./pages/About.vue'), + // }, -export default router; + // { path: '/:pathMatch(.*)*', name: 'NotFound', component: NotFound }, +]; + +export { routes }; diff --git a/src/tools/index.ts b/src/tools/index.ts index ad6167e..d30a81b 100644 --- a/src/tools/index.ts +++ b/src/tools/index.ts @@ -1,130 +1,132 @@ -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 httpStatusCodes } from './http-status-codes'; -import { tool as yamlToJson } from './yaml-to-json-converter'; -import { tool as jsonToYaml } from './json-to-yaml-converter'; -import { tool as ipv6UlaGenerator } from './ipv6-ula-generator'; -import { tool as ipv4AddressConverter } from './ipv4-address-converter'; -import { tool as benchmarkBuilder } from './benchmark-builder'; -import { tool as userAgentParser } from './user-agent-parser'; -import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator'; -import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter'; -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'; -import { tool as dateTimeConverter } from './date-time-converter'; -import { tool as deviceInformation } from './device-information'; -import { tool as cypher } from './encryption'; -import { tool as etaCalculator } from './eta-calculator'; -import { tool as gitMemo } from './git-memo'; -import { tool as hashText } from './hash-text'; -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 { 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 httpStatusCodes } from './http-status-codes'; +// import { tool as yamlToJson } from './yaml-to-json-converter'; +// import { tool as jsonToYaml } from './json-to-yaml-converter'; +// import { tool as ipv6UlaGenerator } from './ipv6-ula-generator'; +// import { tool as ipv4AddressConverter } from './ipv4-address-converter'; +// import { tool as benchmarkBuilder } from './benchmark-builder'; +// import { tool as userAgentParser } from './user-agent-parser'; +// import { tool as ipv4SubnetCalculator } from './ipv4-subnet-calculator'; +// import { tool as dockerRunToDockerComposeConverter } from './docker-run-to-docker-compose-converter'; +// 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'; +// import { tool as dateTimeConverter } from './date-time-converter'; +// import { tool as deviceInformation } from './device-information'; +// import { tool as cypher } from './encryption'; +// import { tool as etaCalculator } from './eta-calculator'; +// import { tool as gitMemo } from './git-memo'; +// import { tool as hashText } from './hash-text'; +// 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 { tool as macAddressLookup } from './mac-address-lookup'; +// import { tool as urlEncoder } from './url-encoder'; +// import { tool as urlParser } from './url-parser'; +// import { tool as uuidGenerator } from './uuid-generator'; +// import { tool as macAddressLookup } from './mac-address-lookup'; export const toolsByCategory: ToolCategory[] = [ { name: 'Crypto', - components: [tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator], - }, - { - name: 'Converter', - components: [ - dateTimeConverter, - baseConverter, - romanNumeralConverter, - base64StringConverter, - base64FileConverter, - colorConverter, - caseConverter, - textToNatoAlphabet, - yamlToJson, - jsonToYaml, - ], - }, - { - name: 'Web', - components: [ - urlEncoder, - htmlEntities, - urlParser, - deviceInformation, - basicAuthGenerator, - metaTagGenerator, - otpCodeGeneratorAndValidator, - mimeTypes, - jwtParser, - keycodeInfo, - slugifyString, - htmlWysiwygEditor, - userAgentParser, - httpStatusCodes, - ], - }, - { - name: 'Images', - components: [qrCodeGenerator, svgPlaceholderGenerator], - }, - { - name: 'Development', components: [ - gitMemo, - randomPortGenerator, - crontabGenerator, - jsonViewer, - jsonMinify, - sqlPrettify, - chmodCalculator, - dockerRunToDockerComposeConverter, + /* tokenGenerator, hashText, bcrypt, uuidGenerator, cypher, bip39, hmacGenerator, rsaKeyPairGenerator*/ ], }, - { - name: 'Network', - components: [ipv4SubnetCalculator, ipv4AddressConverter, macAddressLookup, ipv6UlaGenerator], - }, - { - name: 'Math', - components: [mathEvaluator, etaCalculator], - }, - { - name: 'Measurement', - components: [chronometer, temperatureConverter, benchmarkBuilder], - }, - { - name: 'Text', - components: [loremIpsumGenerator, textStatistics], - }, + // { + // name: 'Converter', + // components: [ + // dateTimeConverter, + // baseConverter, + // romanNumeralConverter, + // base64StringConverter, + // base64FileConverter, + // colorConverter, + // caseConverter, + // textToNatoAlphabet, + // yamlToJson, + // jsonToYaml, + // ], + // }, + // { + // name: 'Web', + // components: [ + // urlEncoder, + // htmlEntities, + // urlParser, + // deviceInformation, + // basicAuthGenerator, + // metaTagGenerator, + // otpCodeGeneratorAndValidator, + // mimeTypes, + // jwtParser, + // keycodeInfo, + // slugifyString, + // htmlWysiwygEditor, + // userAgentParser, + // httpStatusCodes, + // ], + // }, + // { + // name: 'Images', + // components: [qrCodeGenerator, svgPlaceholderGenerator], + // }, + // { + // name: 'Development', + // components: [ + // gitMemo, + // randomPortGenerator, + // crontabGenerator, + // jsonViewer, + // jsonMinify, + // sqlPrettify, + // chmodCalculator, + // dockerRunToDockerComposeConverter, + // ], + // }, + // { + // name: 'Network', + // components: [ipv4SubnetCalculator, ipv4AddressConverter, macAddressLookup, ipv6UlaGenerator], + // }, + // { + // name: 'Math', + // components: [mathEvaluator, etaCalculator], + // }, + // { + // name: 'Measurement', + // components: [chronometer, temperatureConverter, benchmarkBuilder], + // }, + // { + // name: 'Text', + // components: [loremIpsumGenerator, textStatistics], + // }, ]; export const tools = toolsByCategory.flatMap(({ components }) => components); |