From 4d03a3694058ceb65ecd7308307b2a0b8138e944 Mon Sep 17 00:00:00 2001
From: Amir Raminfar <findamir@gmail.com>
Date: Fri, 9 Sep 2022 14:17:58 -0700
Subject: [PATCH] Adds layouts (#1871)

---
 assets/App.vue             | 122 +-----------------------------------
 assets/layouts/default.vue | 124 +++++++++++++++++++++++++++++++++++++
 assets/layouts/splash.vue  |   9 +++
 assets/modules/router.ts   |   7 ++-
 assets/pages/Login.vue     |   4 ++
 assets/pages/login.vue     |   4 ++
 package.json               |   1 +
 pnpm-lock.yaml             |  19 ++++++
 tsconfig.json              |   2 +-
 vite.config.ts             |   4 ++
 10 files changed, 172 insertions(+), 124 deletions(-)
 create mode 100644 assets/layouts/default.vue
 create mode 100644 assets/layouts/splash.vue

diff --git a/assets/App.vue b/assets/App.vue
index 6cc71c38..e199dccb 100644
--- a/assets/App.vue
+++ b/assets/App.vue
@@ -1,73 +1,8 @@
 <template>
-  <main>
-    <mobile-menu v-if="isMobile && !authorizationNeeded"></mobile-menu>
-
-    <splitpanes @resized="onResized($event)">
-      <pane min-size="10" :size="menuWidth" v-if="!authorizationNeeded && !isMobile && !collapseNav">
-        <side-menu @search="showFuzzySearch"></side-menu>
-      </pane>
-      <pane min-size="10">
-        <splitpanes>
-          <pane class="has-min-height router-view">
-            <router-view></router-view>
-          </pane>
-          <template v-if="!isMobile">
-            <pane v-for="other in activeContainers" :key="other.id">
-              <log-container
-                :id="other.id"
-                show-title
-                scrollable
-                closable
-                @close="containerStore.removeActiveContainer(other)"
-              ></log-container>
-            </pane>
-          </template>
-        </splitpanes>
-      </pane>
-    </splitpanes>
-    <button
-      @click="collapseNav = !collapseNav"
-      class="button is-rounded"
-      :class="{ collapsed: collapseNav }"
-      id="hide-nav"
-      v-if="!isMobile && !authorizationNeeded"
-    >
-      <span class="icon ml-2" v-if="collapseNav">
-        <mdi-light-chevron-right />
-      </span>
-      <span class="icon" v-else>
-        <mdi-light-chevron-left />
-      </span>
-    </button>
-  </main>
+  <router-view></router-view>
 </template>
 
 <script lang="ts" setup>
-import { Splitpanes, Pane } from "splitpanes";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
-import hotkeys from "hotkeys-js";
-
-import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
-
-const collapseNav = ref(false);
-const { oruga } = useProgrammatic();
-const { authorizationNeeded } = config;
-
-const containerStore = useContainerStore();
-
-const { activeContainers, visibleContainers } = storeToRefs(containerStore);
-
-onMounted(() => {
-  hotkeys("command+k, ctrl+k", (event, handler) => {
-    event.preventDefault();
-    showFuzzySearch();
-  });
-});
-
-watchEffect(() => {
-  setTitle(`${visibleContainers.value.length} containers`);
-});
-
 watchEffect(() => {
   if (smallerScrollbars.value) {
     document.documentElement.classList.add("has-custom-scrollbars");
@@ -86,59 +21,6 @@ watchEffect(() => {
       document.documentElement.removeAttribute("data-theme");
   }
 });
-
-function showFuzzySearch() {
-  oruga.modal.open({
-    // parent: this,
-    component: FuzzySearchModal,
-    animation: "false",
-    width: 600,
-    active: true,
-  });
-}
-function onResized(e: any) {
-  if (e.length == 2) {
-    menuWidth.value = e[0].size;
-  }
-}
 </script>
 
-<style scoped lang="scss">
-:deep(.splitpanes--vertical > .splitpanes__splitter) {
-  min-width: 3px;
-  background: var(--border-color);
-  &:hover {
-    background: var(--border-hover-color);
-  }
-}
-
-@media screen and (max-width: 768px) {
-  .router-view {
-    padding-top: 75px;
-  }
-}
-
-.button.has-no-border {
-  border-color: transparent !important;
-}
-
-.has-min-height {
-  min-height: 100vh;
-}
-
-#hide-nav {
-  position: fixed;
-  left: 10px;
-  bottom: 10px;
-  &.collapsed {
-    left: -40px;
-    width: 60px;
-    padding-left: 40px;
-    background: rgba(0, 0, 0, 0.95);
-
-    &:hover {
-      left: -25px;
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>
diff --git a/assets/layouts/default.vue b/assets/layouts/default.vue
new file mode 100644
index 00000000..5271d6c6
--- /dev/null
+++ b/assets/layouts/default.vue
@@ -0,0 +1,124 @@
+<template>
+  <main v-if="!authorizationNeeded">
+    <mobile-menu v-if="isMobile"></mobile-menu>
+    <splitpanes @resized="onResized($event)">
+      <pane min-size="10" :size="menuWidth" v-if="!isMobile && !collapseNav">
+        <side-menu @search="showFuzzySearch"></side-menu>
+      </pane>
+      <pane min-size="10">
+        <splitpanes>
+          <pane class="has-min-height router-view">
+            <router-view></router-view>
+          </pane>
+          <template v-if="!isMobile">
+            <pane v-for="other in activeContainers" :key="other.id">
+              <log-container
+                :id="other.id"
+                show-title
+                scrollable
+                closable
+                @close="containerStore.removeActiveContainer(other)"
+              ></log-container>
+            </pane>
+          </template>
+        </splitpanes>
+      </pane>
+    </splitpanes>
+    <button
+      @click="collapseNav = !collapseNav"
+      class="button is-rounded"
+      :class="{ collapsed: collapseNav }"
+      id="hide-nav"
+      v-if="!isMobile"
+    >
+      <span class="icon ml-2" v-if="collapseNav">
+        <mdi-light-chevron-right />
+      </span>
+      <span class="icon" v-else>
+        <mdi-light-chevron-left />
+      </span>
+    </button>
+  </main>
+</template>
+
+<script lang="ts" setup>
+import { Splitpanes, Pane } from "splitpanes";
+import { useProgrammatic } from "@oruga-ui/oruga-next";
+import hotkeys from "hotkeys-js";
+
+import FuzzySearchModal from "@/components/FuzzySearchModal.vue";
+
+const collapseNav = ref(false);
+const { oruga } = useProgrammatic();
+const { authorizationNeeded } = config;
+
+const containerStore = useContainerStore();
+
+const { activeContainers, visibleContainers } = storeToRefs(containerStore);
+
+onMounted(() => {
+  hotkeys("command+k, ctrl+k", (event, handler) => {
+    event.preventDefault();
+    showFuzzySearch();
+  });
+});
+
+watchEffect(() => {
+  setTitle(`${visibleContainers.value.length} containers`);
+});
+
+function showFuzzySearch() {
+  oruga.modal.open({
+    // parent: this,
+    component: FuzzySearchModal,
+    animation: "false",
+    width: 600,
+    active: true,
+  });
+}
+function onResized(e: any) {
+  if (e.length == 2) {
+    menuWidth.value = e[0].size;
+  }
+}
+</script>
+
+<style scoped lang="scss">
+:deep(.splitpanes--vertical > .splitpanes__splitter) {
+  min-width: 3px;
+  background: var(--border-color);
+  &:hover {
+    background: var(--border-hover-color);
+  }
+}
+
+@media screen and (max-width: 768px) {
+  .router-view {
+    padding-top: 75px;
+  }
+}
+
+.button.has-no-border {
+  border-color: transparent !important;
+}
+
+.has-min-height {
+  min-height: 100vh;
+}
+
+#hide-nav {
+  position: fixed;
+  left: 10px;
+  bottom: 10px;
+  &.collapsed {
+    left: -40px;
+    width: 60px;
+    padding-left: 40px;
+    background: rgba(0, 0, 0, 0.95);
+
+    &:hover {
+      left: -25px;
+    }
+  }
+}
+</style>
diff --git a/assets/layouts/splash.vue b/assets/layouts/splash.vue
new file mode 100644
index 00000000..a103f135
--- /dev/null
+++ b/assets/layouts/splash.vue
@@ -0,0 +1,9 @@
+<template>
+  <main>
+    <router-view></router-view>
+  </main>
+</template>
+
+<script lang="ts" setup></script>
+
+<style scoped lang="scss"></style>
diff --git a/assets/modules/router.ts b/assets/modules/router.ts
index 6c0c58d8..06ac79c3 100644
--- a/assets/modules/router.ts
+++ b/assets/modules/router.ts
@@ -1,11 +1,12 @@
 import { type App } from "vue";
 import { createRouter, createWebHistory } from "vue-router";
-import routes from "~pages";
+import pages from "~pages";
+import { setupLayouts } from "virtual:generated-layouts";
 import config from "@/stores/config";
 
-
-
 export const install = (app: App) => {
+  const routes = setupLayouts(pages);
+
   const router = createRouter({
     history: createWebHistory(`${config.base}/`),
     routes,
diff --git a/assets/pages/Login.vue b/assets/pages/Login.vue
index b1114235..7a31c8e0 100644
--- a/assets/pages/Login.vue
+++ b/assets/pages/Login.vue
@@ -73,3 +73,7 @@ async function onLogin() {
   }
 }
 </script>
+<route lang="yaml">
+meta:
+  layout: splash
+</route>
diff --git a/assets/pages/login.vue b/assets/pages/login.vue
index b1114235..7a31c8e0 100644
--- a/assets/pages/login.vue
+++ b/assets/pages/login.vue
@@ -73,3 +73,7 @@ async function onLogin() {
   }
 }
 </script>
+<route lang="yaml">
+meta:
+  layout: splash
+</route>
diff --git a/package.json b/package.json
index aa705e34..c3115d60 100644
--- a/package.json
+++ b/package.json
@@ -50,6 +50,7 @@
     "unplugin-vue-components": "^0.22.4",
     "vite": "3.1.0",
     "vite-plugin-pages": "^0.26.0",
+    "vite-plugin-vue-layouts": "^0.7.0",
     "vue": "^3.2.39",
     "vue-i18n": "^9.2.2",
     "vue-router": "^4.1.5"
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 536f97f4..044f9b40 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -44,6 +44,7 @@ specifiers:
   unplugin-vue-components: ^0.22.4
   vite: 3.1.0
   vite-plugin-pages: ^0.26.0
+  vite-plugin-vue-layouts: ^0.7.0
   vitest: ^0.23.1
   vue: ^3.2.39
   vue-i18n: ^9.2.2
@@ -79,6 +80,7 @@ dependencies:
   unplugin-vue-components: 0.22.4_vite@3.1.0+vue@3.2.39
   vite: 3.1.0_sass@1.54.9
   vite-plugin-pages: 0.26.0_6igbc34rdygfc6m44bomdw5yyu
+  vite-plugin-vue-layouts: 0.7.0_xik7h4qq3w5aalpcbhbvf3kbuu
   vue: 3.2.39
   vue-i18n: 9.2.2_vue@3.2.39
   vue-router: 4.1.5_vue@3.2.39
@@ -4639,6 +4641,23 @@ packages:
       - supports-color
     dev: false
 
+  /vite-plugin-vue-layouts/0.7.0_xik7h4qq3w5aalpcbhbvf3kbuu:
+    resolution: {integrity: sha512-k5XDmRNFo4M/GmUjhbRXj2WmJiFcGoVI8l/uZ72RHyRDQr4wE/6Zq/KFq0lqXomWQxTSzakQRUswzNwtvZLE8A==}
+    peerDependencies:
+      vite: ^2.5.0 || ^3.0.0-0
+      vue: ^2.6.12 || ^3.2.4
+      vue-router: ^3.5.1 || ^ 4.0.11
+    dependencies:
+      '@vue/compiler-sfc': 3.2.39
+      debug: 4.3.4
+      fast-glob: 3.2.11
+      vite: 3.1.0_sass@1.54.9
+      vue: 3.2.39
+      vue-router: 4.1.5_vue@3.2.39
+    transitivePeerDependencies:
+      - supports-color
+    dev: false
+
   /vite/3.1.0_sass@1.54.9:
     resolution: {integrity: sha512-YBg3dUicDpDWFCGttmvMbVyS9ydjntwEjwXRj2KBFwSB8SxmGcudo1yb8FW5+M/G86aS8x828ujnzUVdsLjs9g==}
     engines: {node: ^14.18.0 || >=16.0.0}
diff --git a/tsconfig.json b/tsconfig.json
index 5255b117..d5825a2e 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,7 @@
       "@/*": ["assets/*"]
     },
     "jsx": "preserve",
-    "types": ["vitest", "vite/client", "vue/ref-macros", "vite-plugin-pages/client"]
+    "types": ["vitest", "vite/client", "vue/ref-macros", "vite-plugin-pages/client", "vite-plugin-vue-layouts/client"]
   },
   "include": ["assets/**/*.ts", "assets/**/*.d.ts", "assets/**/*.vue"],
 
diff --git a/vite.config.ts b/vite.config.ts
index 4cd0e613..d2c9c53b 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -6,6 +6,7 @@ import Components from "unplugin-vue-components/vite";
 import AutoImport from "unplugin-auto-import/vite";
 import IconsResolver from "unplugin-icons/resolver";
 import Pages from "vite-plugin-pages";
+import Layouts from "vite-plugin-vue-layouts";
 import VueI18n from "@intlify/vite-plugin-vue-i18n";
 
 export default defineConfig(({ mode }) => ({
@@ -26,6 +27,9 @@ export default defineConfig(({ mode }) => ({
       dirs: "assets/pages",
       importMode: "sync",
     }),
+    Layouts({
+      layoutsDirs: "assets/layouts",
+    }),
     Components({
       dirs: ["assets/components"],
       resolvers: [