From 6becdbb42329e1bdecf158707e37ba9f13ba1d2c Mon Sep 17 00:00:00 2001 From: Corentin Thomasset Date: Tue, 24 May 2022 00:07:54 +0200 Subject: [PATCH] refactor(config): added config management with figue --- package-lock.json | 20 +++++++++++++ package.json | 1 + src/config.ts | 53 +++++++++++++++++++++++++++++++++ src/layouts/base.layout.vue | 5 ++-- src/plugins/plausible.plugin.ts | 11 ++----- src/router.ts | 3 +- vite.config.ts | 1 - 7 files changed, 82 insertions(+), 12 deletions(-) create mode 100644 src/config.ts diff --git a/package-lock.json b/package-lock.json index c03de80a..c41d000e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,6 +20,7 @@ "cronstrue": "^2.2.0", "crypto-js": "^4.1.1", "date-fns": "^2.28.0", + "figue": "^1.1.0", "highlight.js": "^11.5.1", "lodash": "^4.17.21", "naive-ui": "^2.28.0", @@ -5521,6 +5522,17 @@ "reusify": "^1.0.4" } }, + "node_modules/figue": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/figue/-/figue-1.1.0.tgz", + "integrity": "sha512-toW/IfEPBr42giaiqRtC4TkEDZA2q3E1GdzvYG7iJzIYK/fMVvzD2aqU3PJRh+QXCGp+uVxud1Zm7rpV7Fmprg==", + "dependencies": { + "lodash": "^4.17.21" + }, + "funding": { + "url": "https://github.com/sponsors/CorentinTh" + } + }, "node_modules/figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", @@ -15320,6 +15332,14 @@ "reusify": "^1.0.4" } }, + "figue": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/figue/-/figue-1.1.0.tgz", + "integrity": "sha512-toW/IfEPBr42giaiqRtC4TkEDZA2q3E1GdzvYG7iJzIYK/fMVvzD2aqU3PJRh+QXCGp+uVxud1Zm7rpV7Fmprg==", + "requires": { + "lodash": "^4.17.21" + } + }, "figures": { "version": "3.2.0", "resolved": "https://registry.npmjs.org/figures/-/figures-3.2.0.tgz", diff --git a/package.json b/package.json index 0353924b..a8c6f5c4 100644 --- a/package.json +++ b/package.json @@ -25,6 +25,7 @@ "cronstrue": "^2.2.0", "crypto-js": "^4.1.1", "date-fns": "^2.28.0", + "figue": "^1.1.0", "highlight.js": "^11.5.1", "lodash": "^4.17.21", "naive-ui": "^2.28.0", diff --git a/src/config.ts b/src/config.ts new file mode 100644 index 00000000..a73a916e --- /dev/null +++ b/src/config.ts @@ -0,0 +1,53 @@ +import { figue } from 'figue'; + +export const config = figue({ + app: { + version: { + doc: 'Application current version', + format: 'string', + default: '0.0.0', + env: 'PACKAGE_VERSION', + }, + lastCommitSha: { + doc: 'Application last commit SHA version', + format: 'string', + default: '', + env: 'VITE_VERCEL_GIT_COMMIT_SHA', + }, + baseUrl: { + doc: 'Application base url', + format: 'string', + default: '/', + env: 'BASE_URL', + }, + env: { + doc: 'Application current env', + format: 'enum', + values: ['production', 'development', 'test'], + default: 'development', + env: 'MODE', + }, + }, + plausible: { + domain: { + doc: 'Plausible current domain', + format: 'string', + default: '', + env: 'VITE_PLAUSIBLE_DOMAIN', + }, + apiHost: { + doc: 'Plausible remote api host', + format: 'string', + default: '', + env: 'VITE_PLAUSIBLE_API_HOST', + }, + trackLocalhost: { + doc: 'Enable or disable localhost tracking by plausible', + format: 'boolean', + default: false, + }, + }, +}) + .loadEnv(import.meta.env) + .validate() + .getConfig(); diff --git a/src/layouts/base.layout.vue b/src/layouts/base.layout.vue index b71e11cd..0ad887c7 100644 --- a/src/layouts/base.layout.vue +++ b/src/layouts/base.layout.vue @@ -9,12 +9,13 @@ import { useStyleStore } from '@/stores/style.store'; import HeroGradient from '../assets/hero-gradient.svg?component'; import MenuLayout from '../components/MenuLayout.vue'; import NavbarButtons from '../components/NavbarButtons.vue'; +import { config } from '@/config'; const themeVars = useThemeVars(); const route = useRoute(); const styleStore = useStyleStore(); -const version = import.meta.env.PACKAGE_VERSION; -const commitSha = import.meta.env.GIT_SHORT_SHA; +const version = config.app.version; +const commitSha = config.app.lastCommitSha.slice(0, 7); const makeLabel = (text: string, to: string) => () => h(RouterLink, { to }, { default: () => text }); const makeIcon = (icon: Component) => () => h(NIcon, null, { default: () => h(icon) }); diff --git a/src/plugins/plausible.plugin.ts b/src/plugins/plausible.plugin.ts index 7b7164fd..56a88699 100644 --- a/src/plugins/plausible.plugin.ts +++ b/src/plugins/plausible.plugin.ts @@ -1,15 +1,10 @@ -import Plausible, { type PlausibleOptions } from 'plausible-tracker'; +import { config } from '@/config'; +import Plausible from 'plausible-tracker'; import type { App } from 'vue'; -const options: PlausibleOptions = { - domain: import.meta.env.VITE_PLAUSIBLE_DOMAIN, - apiHost: import.meta.env.VITE_PLAUSIBLE_API_HOST, - trackLocalhost: false, -}; - export const plausible = { install: (app: App) => { - const plausible = Plausible(options); + const plausible = Plausible(config.plausible); plausible.enableAutoPageviews(); app.config.globalProperties.$plausible = plausible; diff --git a/src/router.ts b/src/router.ts index 05f9fa38..38bda96a 100644 --- a/src/router.ts +++ b/src/router.ts @@ -3,6 +3,7 @@ import { createRouter, createWebHistory } from 'vue-router'; import HomePage from './pages/Home.page.vue'; import NotFound from './pages/404.page.vue'; import { tools } from './tools'; +import { config } from './config'; const toolsRoutes = tools.map(({ path, name, component, ...config }) => ({ path, @@ -17,7 +18,7 @@ const toolsRedirectRoutes = tools ); const router = createRouter({ - history: createWebHistory(import.meta.env.BASE_URL), + history: createWebHistory(config.app.baseUrl), routes: [ { path: '/', diff --git a/vite.config.ts b/vite.config.ts index f3c9f6e8..c2c4d8d3 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -61,6 +61,5 @@ export default defineConfig({ }, define: { 'import.meta.env.PACKAGE_VERSION': JSON.stringify(process.env.npm_package_version), - 'import.meta.env.GIT_SHORT_SHA': JSON.stringify((process?.env?.VITE_VERCEL_GIT_COMMIT_SHA ?? '').slice(0, 7)), }, });