Frontend improvements (#218)

* . * updated helper class * added shikijs * removed highlightjs * updated markdown component * refactor * new pakcages --------- Co-authored-by: Davide Di Modica <webmaster.ddm@gmail.com>
socfortress · May 20, 2024 · dbd1b49 · dbd1b49
1 parent 33bc811
commit dbd1b49
Show file tree

Hide file tree

Showing 20 changed files with 206 additions and 283 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -34,6 +34,7 @@
 		"redoc",
 		"rushstack",
 		"Shiki",
+		"shikijs",
 		"signin",
 		"Socfortress",
 		"sparkline",

diff --git a/backend/app/agents/services/sync.py b/backend/app/agents/services/sync.py
@@ -21,7 +21,8 @@
 
 
 async def fetch_wazuh_agents() -> WazuhAgentsList:
-    """Fetch agents from Wazuh service.
+    """
+    Fetch agents from Wazuh service.
 
     This function retrieves a list of agents from the Wazuh service.
     It calls the `collect_wazuh_agents` function from the `wazuh_services` module

diff --git a/frontend/index.html b/frontend/index.html
@@ -1,5 +1,5 @@
 <!doctype html>
-<html lang="it">
+<html lang="en">
 	<head>
 		<meta name="robots" content="noindex, nofollow" />
 

diff --git a/frontend/package-lock.json b/frontend/package-lock.json
diff --git a/frontend/package.json b/frontend/package.json
@@ -40,6 +40,7 @@
 		"@fontsource/lexend": "^5.0.20",
 		"@fontsource/public-sans": "^5.0.18",
 		"@popperjs/core": "^2.11.8",
+		"@shikijs/markdown-it": "^1.6.0",
 		"@vueuse/components": "^10.9.0",
 		"@vueuse/core": "^10.9.0",
 		"apexcharts": "^3.49.1",
@@ -54,14 +55,13 @@
 		"jose": "^5.3.0",
 		"js-md5": "^0.8.3",
 		"lodash": "^4.17.21",
-		"markdown-it-highlightjs": "^4.1.0",
 		"mitt": "^3.0.1",
 		"naive-ui": "^2.38.2",
 		"password-validator": "^5.3.0",
 		"pinia": "^2.1.7",
 		"pinia-plugin-persistedstate": "^3.2.1",
 		"secure-ls": "^1.2.6",
-		"shiki": "^1.5.2",
+		"shiki": "^1.6.0",
 		"validator": "^13.12.0",
 		"vue": "^3.4.27",
 		"vue-advanced-cropper": "^2.8.8",
@@ -84,8 +84,6 @@
 		"@types/inquirer": "^9.0.7",
 		"@types/jsdom": "^21.1.6",
 		"@types/lodash": "^4.17.4",
-		"@types/markdown-it": "^14.1.1",
-		"@types/markdown-it-highlightjs": "^3.3.4",
 		"@types/node": "^20.12.12",
 		"@types/validator": "^13.11.10",
 		"@vitejs/plugin-vue": "^5.0.4",
@@ -124,4 +122,4 @@
 	"engines": {
 		"node": ">=18.0.0"
 	}
-}
+}
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -45,13 +45,17 @@ const layoutComponents = {
 	Blank
 }
 
+const mainStore = useMainStore()
+const themeStore = useThemeStore()
+const authStore = useAuthStore()
+
 const forceLayout = ref<Layout | null>(null)
-const forceRefresh = computed<number>(() => useMainStore().forceRefresh)
-const layout = computed<Layout>(() => useThemeStore().layout)
+const forceRefresh = computed<number>(() => mainStore.forceRefresh)
+const layout = computed<Layout>(() => themeStore.layout)
 const layoutComponent = computed<Component>(() => layoutComponents[forceLayout.value || layout.value])
-const routerTransition = computed<RouterTransition>(() => useThemeStore().routerTransition)
-const themeName = computed<ThemeName>(() => useThemeStore().themeName)
-const isLogged = computed(() => useAuthStore().isLogged)
+const routerTransition = computed<RouterTransition>(() => themeStore.routerTransition)
+const themeName = computed<ThemeName>(() => themeStore.themeName)
+const isLogged = computed(() => authStore.isLogged)
 
 function checkForcedLayout(route: RouteLocationNormalized) {
 	if (route.meta?.forceLayout) {

diff --git a/frontend/src/assets/scss/helpers.scss b/frontend/src/assets/scss/helpers.scss
@@ -23,6 +23,12 @@
 	}
 }
 
+.code-bg-transparent {
+	code {
+		background-color: transparent;
+	}
+}
+
 .item-appear {
 	&.item-appear-bottom {
 		animation: item-fade-bottom 0.3s forwards;