When examples are disabled, don't show the examples button (#19)

Author: alexklibisz

client/src/App.vue

@@ -6,7 +6,7 @@
         <router-link class="navbar-brand" to="/">{{ siteTitle }}</router-link>
         <div class="d-flex gap-2 align-items-center">
           <router-link to="/" class="btn btn-sm btn-outline-secondary">Home</router-link>
-          <router-link to="/examples" class="btn btn-sm btn-outline-secondary">Examples</router-link>
+          <router-link v-if="showExamples" to="/examples" class="btn btn-sm btn-outline-secondary">Examples</router-link>
           <button class="btn btn-sm btn-outline-secondary" @click="toggleTheme">
             {{ theme === "dark" ? "Light" : "Dark" }}
           </button>
@@ -29,6 +29,7 @@ import { useRoute } from "vue-router";
 
 const siteTitle = ref("pev2");
 const customBanner = ref("");
+const showExamples = ref(false);
 
 const route = useRoute();
 const copied = ref(false);
@@ -70,6 +71,7 @@ onMounted(async () => {
       const config = await res.json();
       siteTitle.value = config.siteTitle;
       customBanner.value = config.customBanner || "";
+      showExamples.value = !!config.showExamples;
       document.title = `${config.siteTitle} — PostgreSQL EXPLAIN Visualizer`;
     }
   } catch {

client/src/router.ts

@@ -10,6 +10,7 @@ const router = createRouter({
     { path: "/examples", component: ExamplesView },
     { path: "/plan/:id", component: PlanView },
     { path: "/example/:name", component: PlanView, meta: { isExample: true } },
+    { path: "/:pathMatch(.*)*", redirect: "/" },
   ],
 });
 

client/src/views/ExamplesView.vue

@@ -37,23 +37,28 @@
 
 <script setup lang="ts">
 import { ref, onMounted } from "vue";
+import { useRouter } from "vue-router";
 
 interface ExamplePlan {
   name: string;
   title: string;
 }
 
+const router = useRouter();
 const examples = ref<ExamplePlan[]>([]);
 const loading = ref(true);
 
 onMounted(async () => {
   try {
     const res = await fetch("/api/examples");
-    if (res.ok) {
-      examples.value = await res.json();
+    if (!res.ok) {
+      router.replace("/");
+      return;
     }
+    examples.value = await res.json();
   } catch {
-    // ignore
+    router.replace("/");
+    return;
   } finally {
     loading.value = false;
   }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "pev2-on-s3",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "private": true,
   "type": "module",
   "scripts": {

server/routes.ts

@@ -23,7 +23,7 @@ router.get("/api/config", (_req, res) => {
 
 router.get("/api/examples", (_req, res) => {
   if (!config.examples.enabled) {
-    res.json([]);
+    res.status(403).json({ error: "Examples are not enabled" });
     return;
   }
   try {