feat(home-page): add home page content in nuxt app, fix docs pipeline

Author: briancaffey

.github/workflows/docs_publish_vuepress.yml

@@ -14,7 +14,7 @@ jobs:
       - name: Setup Node
         uses: actions/setup-node@v4
         with:
-          node-version: "14"
+          node-version: "20"
 
       - name: Cache dependencies
         uses: actions/cache@v4

nuxt-app/layouts/default.vue

@@ -8,17 +8,13 @@
             key="Home"
             to="/"
           >
-            Appoij
+            MyApp
           </NuxtLink>
         </h1>
 
         <div>
           <Button @click="toggleDark" variant="secondary" size="icon" class="rounded-full mx-4">
-            <Icon
-              :icon="colorMode.preference == 'dark' ? 'radix-icons:moon' : 'radix-icons:sun'"
-              class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-            />
-            <!-- <Icon icon="radix-icons:sun" class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" /> -->
+            <Icon :icon="icon" class="h-[1.2rem] w-[1.2rem] transition-all" />
           </Button>
           <DropdownMenu>
             <DropdownMenuTrigger as-child>
@@ -139,11 +135,11 @@ import { Icon } from '@iconify/vue'
 
 import { Button } from '@/components/ui/button'
 
-import { DarkMode } from '#components';
-
 import { useRoute, useRouter } from 'vue-router'
 import { useAuthStore } from '@/stores/authStore';
 import { useProfileStore } from '@/stores/profileStore';
+// import useColorMode from '@nuxtjs/color-mode'
+import { computed } from 'vue'
 
 const authStore = useAuthStore();
 const {getIsAuthenticated} = storeToRefs(authStore);
@@ -168,7 +164,12 @@ const logout = async () => {
 };
 
 const colorMode = useColorMode()
+
+// Set the initial icon based on the current color mode
+const icon = computed(() => colorMode.preference === 'dark' ? 'radix-icons:moon' : 'radix-icons:sun')
+
+// Toggle function to switch color mode
 const toggleDark = () => {
-  colorMode.preference = colorMode.preference == 'dark' ? 'light' : 'dark';
+  colorMode.preference = colorMode.preference === 'dark' ? 'light' : 'dark'
 }
 </script>

nuxt-app/pages/index.vue

@@ -1,29 +1,89 @@
 <template>
-  <h1 class="text-xl">Welcome</h1>
-  <div>
-    <div>
-      Color mode: {{ colorMode.preference }}
-    </div>
-    <div>
-      User authenticated? {{ isAuthenticated }}
-    </div>
+  <div class="min-h-screen transition-colors duration-300">
+    <!-- Header Section -->
+    <header class="container mx-auto px-4 py-6 flex justify-end items-center">
+      <!-- Removed h1 title and toggle button -->
+    </header>
+
+    <!-- Hero Section -->
+    <main class="container mx-auto px-4 py-16 text-center">
+      <h2 class="text-4xl md:text-5xl font-extrabold mb-4">
+        Welcome to <span>MyApp</span>
+      </h2>
+      <p class="text-lg md:text-xl mb-8 max-w-2xl mx-auto">
+        Experience the future of whatever MyApp does. Join us and explore the amazing possibilities.
+      </p>
+      <div class="space-x-4">
+        <Button class="font-bold py-3 px-6 rounded-lg transition-colors shadow-md">
+          Get Started
+        </Button>
+        <Button class="font-bold py-3 px-6 rounded-lg transition-colors shadow-md">
+          Learn More
+        </Button>
+      </div>
+
+      <div class="mt-12 text-sm">
+        User is currently: {{ isAuthenticated ? 'Authenticated' : 'Not Authenticated' }}
+      </div>
+    </main>
+
+    <!-- Placeholder for Features Section -->
+    <section class="container mx-auto px-4 py-16 border-t">
+       <h3 class="text-3xl font-bold text-center mb-12">Features</h3>
+       <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
+         <!-- Feature 1 -->
+         <Card>
+           <CardHeader class="text-center">
+             <CardTitle>Feature One</CardTitle>
+           </CardHeader>
+           <CardContent>
+             <p>Description of the first amazing feature.</p>
+           </CardContent>
+         </Card>
+         <!-- Feature 2 -->
+         <Card>
+           <CardHeader class="text-center">
+             <CardTitle>Feature Two</CardTitle>
+           </CardHeader>
+           <CardContent>
+             <p>Description of the second incredible feature.</p>
+           </CardContent>
+         </Card>
+         <!-- Feature 3 -->
+         <Card>
+           <CardHeader class="text-center">
+             <CardTitle>Feature Three</CardTitle>
+           </CardHeader>
+           <CardContent>
+             <p>Description of the third awesome feature.</p>
+           </CardContent>
+         </Card>
+       </div>
+    </section>
+
+    <!-- Footer Section -->
+    <footer class="container mx-auto px-4 py-6 text-center border-t">
+      &copy; {{ new Date().getFullYear() }} MyApp. All rights reserved.
+    </footer>
   </div>
 </template>
 <script setup lang="ts">
+import { Button } from '@/components/ui/button'
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
+import { storeToRefs } from 'pinia';
 import { useAuthStore } from '@/stores/authStore';
-const colorMode = useColorMode();
+
 const store = useAuthStore();
 const { isAuthenticated } = storeToRefs(store);
 
 useHead({
-  title: 'App',
+  title: 'Welcome to MyApp',
   meta: [
-    { name: 'description', content: 'An app' }
+    { name: 'description', content: 'Discover the amazing features of MyApp.' }
   ],
   bodyAttrs: {
-    class: 'test'
+    class: 'antialiased font-sans'
   },
-  script: [ { innerHTML: 'console.log(\'Hello world\')' } ]
 })
 
 </script>