refactor(config): added config management with figue

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

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

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();

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 version = config.app.version;
-const commitSha = import.meta.env.GIT_SHORT_SHA;
+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) });

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;

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: '/',

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