fix: update background style condition in app.vue, upgrade @paper-ui/nuxt to version 2.0.2, and refactor HeaderUi component for improved accessibility and structure

Author: FelipeO16

docs/app.vue

@@ -1,7 +1,7 @@
 <template>
   <div
     class="main h-screen w-screen flex justify-center"
-    :style="{ background: route.path == '/' ? 'url(/bg.svg) no-repeat' : '' }"
+    :style="{ background: route.path === '/' ? 'url(/bg.svg) no-repeat' : '' }"
   >
     <div class="container h-full text-xl">
       <HeaderUi />
@@ -11,8 +11,6 @@
 </template>
 
 <script setup lang="ts">
-import { _backgroundImage } from '#tailwind-config/theme'
-
 const route = useRoute()
 </script>
 

docs/app/components/HeaderUi.vue

@@ -1,17 +1,18 @@
 <template>
   <div class="w-full">
     <div class="nav-wrapper flex justify-between px-4 w-full">
-      <div class=" flex justify-center items-center gap-2 mt-5">
+      <div class="flex justify-center items-center gap-2 mt-5">
         <img
           src="/logo.svg"
-          class=""
           width="32"
-          alt=""
+          alt="Paper UI Logo"
         >
-        <a
-          href="/"
+        <NuxtLink
+          to="/"
           class="brand-logo flex"
-        ><div class="text-2xlfont-patrick ">Paper Ui</div></a>
+        >
+          <div class="text-2xl font-patrick">Paper Ui</div>
+        </NuxtLink>
         <PUBadge
           label="v2.0"
           size="large"
@@ -24,26 +25,34 @@
         class="right hide-on-med-and-down flex gap-4 mt-4"
       >
         <li>
-          <a href="/docs"><PUButton
-            flavor="outlined"
-            icon-right="file-alt"
-          >docs</PUButton></a>
+          <NuxtLink to="/docs">
+            <PUButton
+              flavor="outlined"
+              icon-right="file-alt"
+            >
+              docs
+            </PUButton>
+          </NuxtLink>
         </li>
         <li>
-          <a href="https://github.com/paper-kit/nuxt"><PUButton
-            flavor="outlined"
-            icon-right="github-alt"
-          >github</PUButton></a>
+          <a href="https://github.com/paper-kit/nuxt" target="_blank" rel="noopener noreferrer">
+            <PUButton
+              flavor="outlined"
+              icon-right="github-alt"
+            >
+              github
+            </PUButton>
+          </a>
         </li>
       </ul>
     </div>
   </div>
 </template>
 
-<script lang="ts" setup>
-
+<script setup lang="ts">
+// Component logic here if needed
 </script>
 
 <style scoped>
-
+/* Component styles here if needed */
 </style>

docs/nuxt.config.ts

@@ -2,9 +2,8 @@
 export default defineNuxtConfig({
   modules: [
     '@nuxt/content',
-    '../src/module',
+    '@paper-ui/nuxt',
     '@nuxtjs/tailwindcss',
-    'vue3-carousel-nuxt',
     '@nuxt/image',
   ],
   devtools: { enabled: true },