refactor(config): added config management with figue

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

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