Update autocomplete style and vite configuration

config/style/theme.css

@@ -22,6 +22,6 @@
   --color-base-background: 23,23,23;
   --color-base-foreground: 38,38,38;
   --color-base-200: 30, 41, 59;
-  --color-base-300: 30, 41, 59;
+  --color-base-300: 55, 65, 81;
   --color-base-content: 255, 255, 255;
 }

pages/home.md

@@ -13,7 +13,7 @@ project: Your project
   Welcome to *{{ frontmatter.project }}*, a website of taxon pages generated from the {{ frontmatter.project }} Project, a comprehensive collaborative effort managed in [TaxonWorks](https://taxonworks.org). 
 
   ## Get started!
-  <autocomplete-otu/>
+  <autocomplete-otu class="w-80"/>
 
   ## Announcements
   * 5/1/2022 - We've grown!  

src/components/Autocomplete/Autocomplete.global.vue

@@ -21,12 +21,11 @@
         min-w-full
         p-1.5
         pl-10
-        text-gray-900
-        dark:bg-slate-800
+        text-base-content
         rounded
         border
         sm:text-sm
-        dark:text-white
+        placeholder:text-sm
         dark:border-slate-700
         border-gray-300
         dark:placeholder:text-slate-400
@@ -41,20 +40,30 @@
 
     <ul
       v-if="list.length"
-      class="autocomplete__list list absolute z-[500] max-h-52 overflow-y-auto border bg-white dark:bg-gray-800 dark:border-gray-700"
+      class="
+        autocomplete__list
+        list
+        absolute
+        z-[500]
+        max-h-52
+        w-full
+        overflow-y-auto
+        border
+        bg-base-foreground
+        border-base-300
+        !m-0"
     >
       <li
         v-for="item in list"
         :key="item.id"
         class="
           autocomplete__item
           p-2 border-b 
-          bg-white
           text-sm
           cursor-pointer
-          hover:bg-gray-200
-          dark:border-gray-700
-          dark:bg-gray-800"
+          hover:bg-secondary-color
+          hover:bg-opacity-5
+          border-base-300"
         @click="selectItem(item)"
       >
         <span v-html="item[label]" />

src/modules/home/router/index.js

@@ -0,0 +1,8 @@
+import Homepage from '../views/index.vue'
+
+export default [{ 
+  name: 'homepage',
+  path: '/',
+  alias: '/home',
+  component: Homepage,
+}]

src/modules/home/views/index.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="container mx-auto text-center mt-36 flex flex-col justify-center">
+    <h1 class="text-4xl">
+      Welcome to TaxonPages
+    </h1>
+    <p class="m-4">
+      It seems you don't have a index or home file in your /pages folder, create one to replace this page.
+    </p>
+    <div class="flex justify-center">
+      <iframe
+        width="560"
+        height="315"
+        src="https://www.youtube.com/embed/dQw4w9WgXcQ"
+        title="YouTube video player"
+        frameborder="0"
+        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+        allowfullscreen
+      />
+    </div>
+  </div>
+</template>
+
+<script setup>
+</script>

src/modules/otus/views/Index.vue

@@ -30,8 +30,8 @@
               mb-2
               md:min-w-fit
               md:ml-2
-              md:mb-0
-              w-60
+              md:mb-0 
+              w-80
             "
             url="/otus/autocomplete"
             query-param="term"

src/router/index.js

@@ -6,8 +6,12 @@ import {
 
 import dynamicRoutes from '~pages'
 
-const moduleRoutes = import.meta.globEager('@/modules/**/router/*.js')
-const routerObjects = [].concat(...Object.values(moduleRoutes).map(route => route.default))
+const coreModuleRoutes = import.meta.globEager('@/modules/**/router/*.js', { import: 'default' })
+const userModuleRoutes = import.meta.globEager('#/modules/**/router/*.js', { import: 'default' })
+const moduleRoutes = [].concat(
+  ...Object.values(coreModuleRoutes),
+  ...Object.values(userModuleRoutes)
+)
 const { base_url, hash_mode } = __APP_ENV__
 
 const router = createRouter({
@@ -17,7 +21,7 @@ const router = createRouter({
 
   routes: [
     ...dynamicRoutes,
-    ...routerObjects,
+    ...moduleRoutes
   ]
 })
 

vite.config.js

@@ -17,7 +17,8 @@ export default () => {
     },
     resolve: {
       alias: {
-        '@': path.resolve(__dirname, './src')
+        '@': path.resolve(__dirname, './src'),
+        '#': path.resolve(__dirname)
       },
     },
     plugins: [