From 236b371b0bc16159b3faab76979de67997642161 Mon Sep 17 00:00:00 2001
From: jlpereira <pepelui@outlook.com>
Date: Sun, 16 Mar 2025 20:29:10 -0300
Subject: [PATCH] Add multi layout

---
 .gitignore               |  1 +
 README.markdown          | 47 ++++++++++++++++++++++++++++++++++++++++
 src/App.vue              | 22 +++++++++++++++++--
 src/utils/index.js       |  1 +
 src/utils/loadLayouts.js | 21 ++++++++++++++++++
 tailwind.config.cjs      |  1 +
 vite.config.js           |  2 +-
 7 files changed, 92 insertions(+), 3 deletions(-)
 create mode 100644 src/utils/loadLayouts.js

diff --git a/.gitignore b/.gitignore
index 30e63a6..3633253 100644
--- a/.gitignore
+++ b/.gitignore
@@ -6,6 +6,7 @@ dist-ssr
 /pages
 /components
 /panels
+/layouts
 public
 README.md
 *.local
diff --git a/README.markdown b/README.markdown
index 89c4bfd..578f89b 100644
--- a/README.markdown
+++ b/README.markdown
@@ -209,6 +209,53 @@ export default {
 }
 ```
 
+### Customizing the Layout
+
+The application comes with a default layout that includes a header and a footer. If you'd like to replace this layout with your own, you can do so by creating a custom layout file.
+
+Steps to replace the default layout
+
+1. In the root folder of your project, create a new folder called `layouts` (if it doesn't already exist).
+2. Inside this folder, create a file named default.vue.
+3. Define your custom layout structure inside this file as needed.
+
+Example of layout/default.vue
+
+```vuejs
+<template>
+  <div>
+    <slot />
+  </div>
+</template>
+```
+
+This custom layout will replace the default one and be applied throughout the application. You can include your own elements, such as a navigation bar or footer, as needed.
+
+#### Using Multiple Layouts
+
+In addition to replacing the default layout, you can create multiple layouts by adding more .vue files inside the layout folder. You can then specify which layout to use for a specific page by setting the layout name in the meta property of the `<route>` tag in your Single File Component (SFC).
+
+JSON5:
+
+```js
+<route>
+{
+  meta: {
+    layout: 'custom'
+  }
+}
+</route>
+```
+
+YAML:
+
+```yaml
+<route lang="yaml">
+meta:
+  layout: custom
+</route>
+```
+
 ### External panels
 
 To add panels in Taxa pages, create a folder called `panels` in your `setup` branch, and inside it create another folder for your panel. For example: `panels/PanelTest`
diff --git a/src/App.vue b/src/App.vue
index bb29998..45c71d5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,13 +1,31 @@
 <template>
-  <ApplicationLayout>
+  <component :is="currentLayout">
     <router-view />
-  </ApplicationLayout>
+  </component>
 </template>
 
 <script setup>
+import { computed } from 'vue'
+import { useRoute } from 'vue-router'
 import { useHead } from 'unhead'
+import { loadUserLayouts } from './utils'
 import ApplicationLayout from '@/layout/Application.vue'
 
+const DEFAULT_LAYOUT = 'defaultLayout'
+
+const route = useRoute()
+const userLayouts = loadUserLayouts()
+const routeLayout = route.meta?.layout
+
+const currentLayout = computed(() => {
+  const layouts = {
+    [DEFAULT_LAYOUT]: ApplicationLayout,
+    ...userLayouts
+  }
+
+  return layouts[route.meta?.layout || DEFAULT_LAYOUT] || ApplicationLayout
+})
+
 useHead({
   title: __APP_ENV__.project_name,
   meta: __APP_ENV__.metadata
diff --git a/src/utils/index.js b/src/utils/index.js
index 5087657..b9742a3 100644
--- a/src/utils/index.js
+++ b/src/utils/index.js
@@ -1,3 +1,4 @@
 export * from './color'
 export * from './request'
 export * from './strings'
+export * from './loadLayouts'
diff --git a/src/utils/loadLayouts.js b/src/utils/loadLayouts.js
new file mode 100644
index 0000000..578a440
--- /dev/null
+++ b/src/utils/loadLayouts.js
@@ -0,0 +1,21 @@
+export function loadUserLayouts() {
+  const files = import.meta.glob('#/layouts/*.vue', {
+    eager: true,
+    import: 'default'
+  })
+
+  return makeLayoutObject(files)
+}
+
+function makeLayoutObject(files) {
+  const components = Object.entries(files)
+  const layouts = {}
+
+  components.forEach(([path, component]) => {
+    const layoutName = path.split('/').pop().replace('.vue', '')
+
+    Object.assign(layouts, { [layoutName]: component })
+  })
+
+  return layouts
+}
diff --git a/tailwind.config.cjs b/tailwind.config.cjs
index 91b40eb..2390816 100644
--- a/tailwind.config.cjs
+++ b/tailwind.config.cjs
@@ -12,6 +12,7 @@ module.exports = {
     './index.html',
     './vite.config.js',
     './src/**/*.{vue,js,ts,jsx,tsx,md}',
+    './layouts/**/*.{vue,js}',
     './pages/**/*.{vue,md}',
     './panels/**/*.{vue,md}',
     './components/**/*.{vue,md}',
diff --git a/vite.config.js b/vite.config.js
index 5d19371..9bcac49 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -54,7 +54,7 @@ export default () => {
 
       Pages({
         dirs: 'pages',
-        exclude: ['**/components/*.vue'],
+        exclude: ['**/components/*.vue', 'components/**/*.vue'],
         extensions: ['vue', 'md'],
         extendRoute(route) {
           if (route.path === '/home') {