Revert "refactor: Modules & libraries setup + global search + dark/light mode fixed"

docs-v3/app.vue

@@ -1,17 +1,7 @@
 <template>
-  <UApp>
+  <div>
     <NuxtPage />
-    <ClientOnly>
-      <LazyUContentSearch
-        v-model:search-term="searchTerm"
-        shortcut="meta_k"
-        :files="files"
-        :navigation="navigation"
-        :fuse="{ resultLimit: 42 }"
-        placeholder="Search documentation..."
-      />
-    </ClientOnly>
-  </UApp>
+  </div>
 </template>
 
 <script setup lang="ts">
@@ -22,11 +12,6 @@ useHead({
   }
 })
 
-// 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('')
+// Enable dark mode
+const colorMode = useColorMode()
 </script>

docs-v3/assets/css/main.css

@@ -1,25 +1,130 @@
+@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;
 }
 
-/* Basic component styles */
-.nav-link-active {
-  color: rgb(37 99 235);
-  background-color: rgb(239 246 255);
+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;
 }
 
-.dark .nav-link-active {
-  color: rgb(96 165 250);
-  background-color: rgba(59 130 246 / 0.2);
+/* 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;
+}
+
+/* Navigation active states */
+.nav-link-active {
+  @apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20;
 }
 
 /* Content transitions */
@@ -33,6 +138,11 @@ html {
   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 {
@@ -58,7 +168,19 @@ html {
   transform: scale(1.05);
 }
 
-/* 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;
+/* 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);
 }

docs-v3/components/SearchInput.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="relative w-full lg:max-w-md">
+    <button
+      @click="openSearchModal"
+      @touchstart="handleTouchStart"
+      class="flex items-center w-full px-3 py-2 text-left border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 hover:bg-gray-50 dark:hover:bg-gray-700/50 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-primary-500 transition-colors group cursor-pointer"
+      style="-webkit-tap-highlight-color: transparent;"
+    >
+      <svg class="h-5 w-5 text-gray-400 group-hover:text-gray-500 dark:group-hover:text-gray-300 mr-3" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
+      </svg>
+
+      <span class="flex-1 text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300">
+        Search docs...
+      </span>
+
+      <div class="hidden sm:flex items-center space-x-1">
+        <kbd class="px-2 py-1 text-xs text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-700 rounded font-mono">
+          {{ isMac ? '⌘' : 'Ctrl' }}
+        </kbd>
+        <kbd class="px-2 py-1 text-xs text-gray-400 dark:text-gray-500 bg-gray-100 dark:bg-gray-700 rounded font-mono">
+          K
+        </kbd>
+      </div>
+    </button>
+  </div>
+</template>
+
+<script setup lang="ts">
+const { openModal } = useSearchModal()
+
+const isMac = computed(() => {
+  if (process.client) {
+    return navigator.platform.toUpperCase().indexOf('MAC') >= 0
+  }
+  return false
+})
+
+const openSearchModal = () => {
+  openModal()
+}
+
+// Handle touch start for iOS devices
+const handleTouchStart = (event: TouchEvent) => {
+  // Prevent default behavior and ensure the click event fires
+  event.preventDefault()
+  openSearchModal()
+}
+</script>