Update vnext (#314)

* feat: make 404 follow theme and add a return home page * feat: sanitise translations when using v-html * chore: Add native API docs to website * chore: remove try it button from api docs --------- Co-authored-by: tonyaellie <[email protected]>
sysadminsmedia · Nov 1, 2024 · b995665 · b995665
1 parent 56316ca
commit b995665
Show file tree

Hide file tree

Showing 5 changed files with 46 additions and 7 deletions.
diff --git a/docs/.vitepress/config.mts b/docs/.vitepress/config.mts
@@ -41,7 +41,7 @@ export default defineConfig({
     },
     // https://vitepress.dev/reference/default-theme-config
     nav: [
-      { text: 'API', link: 'https://redocly.github.io/redoc/?url=https://raw.githubusercontent.com/sysadminsmedia/homebox/main/docs/docs/api/openapi-2.0.json' },
+      { text: 'API Docs', link: '/en/api' },
       { text: 'Demo', link: 'https://demo.homebox.software' },
     ],
 

diff --git a/docs/en/api.md b/docs/en/api.md
@@ -0,0 +1,37 @@
+---
+layout: page
+sidebar: false
+---
+
+<script setup lang="ts">
+import { useData } from 'vitepress';
+
+const elementScript = document.createElement('script');
+elementScript.src = 'https://unpkg.com/@stoplight/elements/web-components.min.js';
+document.head.appendChild(elementScript);
+
+const elementStyle = document.createElement('link');
+elementStyle.rel = 'stylesheet';
+elementStyle.href = 'https://unpkg.com/@stoplight/elements/styles.min.css';
+document.head.appendChild(elementStyle);
+
+const { isDark } = useData();
+let theme = 'light';
+if (isDark.value) {
+  theme = 'dark';
+}
+</script>
+
+<style>
+.TryItPanel {
+   display: none;
+}
+</style>
+
+<elements-api
+apiDescriptionUrl="https://cdn.jsdelivr.net/gh/sysadminsmedia/homebox@main/docs/docs/api/openapi-2.0.json"
+router="hash"
+layout="responsive"
+hideSchemas="true"
+:data-theme="theme"
+/>
diff --git a/frontend/layouts/404.vue b/frontend/layouts/404.vue
@@ -1,5 +1,5 @@
 <template>
-  <main class="grid min-h-screen w-full place-items-center bg-blue-100">
+  <main class="grid min-h-screen w-full place-items-center">
     <slot></slot>
   </main>
 </template>
diff --git a/frontend/pages/[...all].vue b/frontend/pages/[...all].vue
@@ -8,8 +8,9 @@
 </script>
 
 <template>
-  <h1 class="flex flex-col text-center font-extrabold text-blue-500">
+  <h1 class="flex flex-col text-center font-extrabold">
     <span class="text-7xl">404.</span>
     <span class="mt-5 text-5xl"> Page Not Found </span>
+    <NuxtLink to="/" class="btn mt-5 text-xl"> Return Home </NuxtLink>
   </h1>
 </template>
diff --git a/frontend/pages/tools.vue b/frontend/pages/tools.vue
@@ -40,7 +40,7 @@
           <DetailAction @action="modals.import = true">
             <template #title> {{ $t("tools.import_export_set.import") }} </template>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-html="$t('tools.import_export_set.import_sub')"></div>
+            <div v-html="DOMPurify.sanitize($t('tools.import_export_set.import_sub'))"></div>
             <template #button> {{ $t("tools.import_export_set.import_button") }} </template>
           </DetailAction>
           <DetailAction @action="getExportCSV()">
@@ -57,7 +57,7 @@
             <span> {{ $t("tools.actions") }} </span>
             <template #description>
               <!-- eslint-disable-next-line vue/no-v-html -->
-              <div v-html="$t('tools.actions_sub')"></div>
+              <div v-html="DOMPurify.sanitize($t('tools.actions_sub'))"></div>
             </template>
           </BaseSectionHeader>
         </template>
@@ -75,13 +75,13 @@
           <DetailAction @action="resetItemDateTimes">
             <template #title> {{ $t("tools.actions_set.zero_datetimes") }} </template>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-html="$t('tools.actions_set.zero_datetimes_sub')"></div>
+            <div v-html="DOMPurify.sanitize($t('tools.actions_set.zero_datetimes_sub'))"></div>
             <template #button> {{ $t("tools.actions_set.zero_datetimes_button") }} </template>
           </DetailAction>
           <DetailAction @action="setPrimaryPhotos">
             <template #title> {{ $t("tools.actions_set.set_primary_photo") }} </template>
             <!-- eslint-disable-next-line vue/no-v-html -->
-            <div v-html="$t('tools.actions_set.set_primary_photo_sub')"></div>
+            <div v-html="DOMPurify.sanitize($t('tools.actions_set.set_primary_photo_sub'))"></div>
             <template #button> {{ $t("tools.actions_set.set_primary_photo_button") }} </template>
           </DetailAction>
         </div>
@@ -91,6 +91,7 @@
 </template>
 
 <script setup lang="ts">
+  import DOMPurify from "dompurify";
   import MdiFileChart from "~icons/mdi/file-chart";
   import MdiArrowRight from "~icons/mdi/arrow-right";
   import MdiDatabase from "~icons/mdi/database";