Feature/docs v3 modernize

docs-v3/app.vue

@@ -1,7 +1,17 @@
 <template>
-  <div>
+  <UApp>
     <NuxtPage />
-  </div>
+    <ClientOnly>
+      <LazyUContentSearch
+        v-model:search-term="searchTerm"
+        shortcut="meta_k"
+        :files="files"
+        :navigation="navigation"
+        :fuse="{ resultLimit: 42 }"
+        placeholder="Search documentation..."
+      />
+    </ClientOnly>
+  </UApp>
 </template>
 
 <script setup lang="ts">
@@ -12,6 +22,11 @@ useHead({
   }
 })
 
-// Enable dark mode
-const colorMode = useColorMode()
+// Fetch navigation and search data using the correct Nuxt Content composables
+const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
+const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
+  server: false
+})
+
+const searchTerm = ref('')
 </script>

docs-v3/assets/css/main.css

@@ -1,130 +1,25 @@
-@import 'tailwindcss/base';
-@import 'tailwindcss/components';
-@import 'tailwindcss/utilities';
-
 /* Custom fonts */
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
 
+@import "tailwindcss";
+@import "@nuxt/ui";
+
+
 /* Base styles */
 html {
   scroll-behavior: smooth;
 }
 
-body {
-  @apply font-sans antialiased;
-}
-
-/* Scrollbar styling */
-::-webkit-scrollbar {
-  @apply w-2;
-}
-
-::-webkit-scrollbar-track {
-  @apply bg-gray-100 dark:bg-gray-800;
-}
-
-::-webkit-scrollbar-thumb {
-  @apply bg-gray-300 dark:bg-gray-600 rounded-full;
-}
-
-::-webkit-scrollbar-thumb:hover {
-  @apply bg-gray-400 dark:bg-gray-500;
-}
-
-/* Code block styling */
-pre {
-  @apply overflow-x-auto p-4 rounded-lg;
-}
-
-/* Shiki code blocks - light theme improvements */
-.shiki {
-  @apply bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg;
-}
-
-.shiki pre {
-  @apply bg-transparent m-0 p-4;
-}
-
-/* Override the dark background in light mode */
-.shiki.shiki-themes.github-light.github-dark {
-  @apply bg-gray-50 dark:bg-gray-900;
-}
-
-.shiki code {
-  @apply bg-transparent text-sm leading-relaxed;
-}
-
-/* Fix unstyled content in HTTP and other code blocks */
-.shiki code span:not([style]),
-.shiki code span[style=""],
-.shiki code span:empty,
-.shiki code span {
-  @apply text-gray-800 dark:text-gray-200;
-}
-
-/* Specific styling for HTTP code blocks */
-.language-http .shiki,
-.language-http.shiki {
-  @apply bg-blue-50 dark:bg-gray-900;
-}
-
-.language-http code,
-.language-http .shiki code,
-.language-http span {
-  @apply text-blue-900 dark:text-blue-200 font-semibold;
-}
-
-/* Override for all code block content to ensure visibility */
-.prose .shiki code,
-.prose .language-http code,
-.prose pre code {
-  @apply text-gray-900 dark:text-gray-100;
-}
-
-/* Force visibility for any unstyled spans in code */
-.prose .shiki code span,
-.prose .language-http code span,
-.prose pre code span {
-  @apply text-gray-900 dark:text-gray-100;
-}
-
-/* Special handling for HTTP method blocks */
-.language-http.shiki code span {
-  @apply text-blue-900 dark:text-blue-200 font-semibold !important;
-}
-
-/* Custom components */
-.prose-docs {
-  @apply prose prose-gray max-w-none dark:prose-dark;
-}
-
-/* Code blocks with blue gradient in light theme */
-.prose-docs pre {
-  @apply bg-gradient-to-br from-blue-50 to-indigo-100 dark:from-gray-800 dark:to-gray-900 border border-blue-200 dark:border-gray-700 relative;
-}
-
-.prose-docs pre code {
-  @apply text-gray-900 dark:text-gray-100;
-}
-
-/* Code block copy button styling */
-.prose-docs .group:hover .copy-button {
-  @apply opacity-100;
-}
-
-.prose-docs code {
-  @apply text-sm font-mono bg-blue-200 dark:bg-gray-700 text-blue-900 dark:text-blue-300 px-2 py-1 rounded;
-}
-
-/* Inline code styling */
-.prose-docs :not(pre) > code {
-  @apply bg-blue-200 dark:bg-gray-700 text-blue-900 dark:text-blue-300 px-2 py-1 rounded font-medium;
+/* Basic component styles */
+.nav-link-active {
+  color: rgb(37 99 235);
+  background-color: rgb(239 246 255);
 }
 
-/* Navigation active states */
-.nav-link-active {
-  @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20;
+.dark .nav-link-active {
+  color: rgb(96 165 250);
+  background-color: rgba(59 130 246 / 0.2);
 }
 
 /* Content transitions */
@@ -138,11 +33,6 @@ pre {
   opacity: 0;
 }
 
-/* Focus styles */
-.focus-ring {
-  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
-}
-
 /* Mobile menu animation */
 .mobile-menu-enter-active,
 .mobile-menu-leave-active {
@@ -168,19 +58,7 @@ pre {
   transform: scale(1.05);
 }
 
-/* Search highlight styles */
-mark {
-  @apply bg-yellow-200 dark:bg-yellow-800 px-1 rounded text-gray-900 dark:text-white;
-}
-
-/* Search modal animation */
-.search-modal-enter-active,
-.search-modal-leave-active {
-  transition: all 0.2s ease;
-}
-
-.search-modal-enter-from,
-.search-modal-leave-to {
-  opacity: 0;
-  transform: scale(0.95);
+/* Focus ring utility */
+.focus-ring {
+  @apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
 }