Skip to content

Commit 7c5b9e3

Browse files
binarykbinaryk
authored
Revert "refactor: Modules & libraries setup + global search + dark/light mode…"
This reverts commit 0ef235e.
1 parent 0ef235e commit 7c5b9e3

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+8017
-5164
lines changed

‎docs-v3/.data/content/contents.sqlite‎

-3.22 MB
Binary file not shown.

‎docs-v3/app.vue‎

Lines changed: 4 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,7 @@
11
<template>
2-
<UApp>
2+
<div>
33
<NuxtPage />
4-
<ClientOnly>
5-
<LazyUContentSearch
6-
v-model:search-term="searchTerm"
7-
shortcut="meta_k"
8-
:files="files"
9-
:navigation="navigation"
10-
:fuse="{ resultLimit: 42 }"
11-
placeholder="Search documentation..."
12-
/>
13-
</ClientOnly>
14-
</UApp>
4+
</div>
155
</template>
166

177
<script setup lang="ts">
@@ -22,11 +12,6 @@ useHead({
2212
}
2313
})
2414
25-
// Fetch navigation and search data using the correct Nuxt Content composables
26-
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
27-
const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('content'), {
28-
server: false
29-
})
30-
31-
const searchTerm = ref('')
15+
// Enable dark mode
16+
const colorMode = useColorMode()
3217
</script>

‎docs-v3/assets/css/main.css‎

Lines changed: 136 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,130 @@
1+
@import 'tailwindcss/base';
2+
@import 'tailwindcss/components';
3+
@import 'tailwindcss/utilities';
4+
15
/* Custom fonts */
26
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
37
@import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;500;600&display=swap');
48

5-
@import "tailwindcss";
6-
@import "@nuxt/ui";
7-
8-
99
/* Base styles */
1010
html {
1111
scroll-behavior: smooth;
1212
}
1313

14-
/* Basic component styles */
15-
.nav-link-active {
16-
color: rgb(37 99 235);
17-
background-color: rgb(239 246 255);
14+
body {
15+
@apply font-sans antialiased;
16+
}
17+
18+
/* Scrollbar styling */
19+
::-webkit-scrollbar {
20+
@apply w-2;
21+
}
22+
23+
::-webkit-scrollbar-track {
24+
@apply bg-gray-100 dark:bg-gray-800;
25+
}
26+
27+
::-webkit-scrollbar-thumb {
28+
@apply bg-gray-300 dark:bg-gray-600 rounded-full;
29+
}
30+
31+
::-webkit-scrollbar-thumb:hover {
32+
@apply bg-gray-400 dark:bg-gray-500;
33+
}
34+
35+
/* Code block styling */
36+
pre {
37+
@apply overflow-x-auto p-4 rounded-lg;
38+
}
39+
40+
/* Shiki code blocks - light theme improvements */
41+
.shiki {
42+
@apply bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-lg;
43+
}
44+
45+
.shiki pre {
46+
@apply bg-transparent m-0 p-4;
47+
}
48+
49+
/* Override the dark background in light mode */
50+
.shiki.shiki-themes.github-light.github-dark {
51+
@apply bg-gray-50 dark:bg-gray-900;
52+
}
53+
54+
.shiki code {
55+
@apply bg-transparent text-sm leading-relaxed;
56+
}
57+
58+
/* Fix unstyled content in HTTP and other code blocks */
59+
.shiki code span:not([style]),
60+
.shiki code span[style=""],
61+
.shiki code span:empty,
62+
.shiki code span {
63+
@apply text-gray-800 dark:text-gray-200;
64+
}
65+
66+
/* Specific styling for HTTP code blocks */
67+
.language-http .shiki,
68+
.language-http.shiki {
69+
@apply bg-blue-50 dark:bg-gray-900;
70+
}
71+
72+
.language-http code,
73+
.language-http .shiki code,
74+
.language-http span {
75+
@apply text-blue-900 dark:text-blue-200 font-semibold;
76+
}
77+
78+
/* Override for all code block content to ensure visibility */
79+
.prose .shiki code,
80+
.prose .language-http code,
81+
.prose pre code {
82+
@apply text-gray-900 dark:text-gray-100;
83+
}
84+
85+
/* Force visibility for any unstyled spans in code */
86+
.prose .shiki code span,
87+
.prose .language-http code span,
88+
.prose pre code span {
89+
@apply text-gray-900 dark:text-gray-100;
90+
}
91+
92+
/* Special handling for HTTP method blocks */
93+
.language-http.shiki code span {
94+
@apply text-blue-900 dark:text-blue-200 font-semibold !important;
95+
}
96+
97+
/* Custom components */
98+
.prose-docs {
99+
@apply prose prose-gray max-w-none dark:prose-dark;
100+
}
101+
102+
/* Code blocks with blue gradient in light theme */
103+
.prose-docs pre {
104+
@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;
105+
}
106+
107+
.prose-docs pre code {
108+
@apply text-gray-900 dark:text-gray-100;
109+
}
110+
111+
/* Code block copy button styling */
112+
.prose-docs .group:hover .copy-button {
113+
@apply opacity-100;
114+
}
115+
116+
.prose-docs code {
117+
@apply text-sm font-mono bg-blue-200 dark:bg-gray-700 text-blue-900 dark:text-blue-300 px-2 py-1 rounded;
18118
}
19119

20-
.dark .nav-link-active {
21-
color: rgb(96 165 250);
22-
background-color: rgba(59 130 246 / 0.2);
120+
/* Inline code styling */
121+
.prose-docs :not(pre) > code {
122+
@apply bg-blue-200 dark:bg-gray-700 text-blue-900 dark:text-blue-300 px-2 py-1 rounded font-medium;
123+
}
124+
125+
/* Navigation active states */
126+
.nav-link-active {
127+
@apply text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20;
23128
}
24129

25130
/* Content transitions */
@@ -33,6 +138,11 @@ html {
33138
opacity: 0;
34139
}
35140

141+
/* Focus styles */
142+
.focus-ring {
143+
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
144+
}
145+
36146
/* Mobile menu animation */
37147
.mobile-menu-enter-active,
38148
.mobile-menu-leave-active {
@@ -58,7 +168,19 @@ html {
58168
transform: scale(1.05);
59169
}
60170

61-
/* Focus ring utility */
62-
.focus-ring {
63-
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
171+
/* Search highlight styles */
172+
mark {
173+
@apply bg-yellow-200 dark:bg-yellow-800 px-1 rounded text-gray-900 dark:text-white;
174+
}
175+
176+
/* Search modal animation */
177+
.search-modal-enter-active,
178+
.search-modal-leave-active {
179+
transition: all 0.2s ease;
180+
}
181+
182+
.search-modal-enter-from,
183+
.search-modal-leave-to {
184+
opacity: 0;
185+
transform: scale(0.95);
64186
}

‎docs-v3/components/SearchInput.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div class="relative w-full lg:max-w-md">
3+
<button
4+
@click="openSearchModal"
5+
@touchstart="handleTouchStart"
6+
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"
7+
style="-webkit-tap-highlight-color: transparent;"
8+
>
9+
<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">
10+
<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" />
11+
</svg>
12+
13+
<span class="flex-1 text-sm text-gray-500 dark:text-gray-400 group-hover:text-gray-700 dark:group-hover:text-gray-300">
14+
Search docs...
15+
</span>
16+
17+
<div class="hidden sm:flex items-center space-x-1">
18+
<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">
19+
{{ isMac ? '⌘' : 'Ctrl' }}
20+
</kbd>
21+
<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">
22+
K
23+
</kbd>
24+
</div>
25+
</button>
26+
</div>
27+
</template>
28+
29+
<script setup lang="ts">
30+
const { openModal } = useSearchModal()
31+
32+
const isMac = computed(() => {
33+
if (process.client) {
34+
return navigator.platform.toUpperCase().indexOf('MAC') >= 0
35+
}
36+
return false
37+
})
38+
39+
const openSearchModal = () => {
40+
openModal()
41+
}
42+
43+
// Handle touch start for iOS devices
44+
const handleTouchStart = (event: TouchEvent) => {
45+
// Prevent default behavior and ensure the click event fires
46+
event.preventDefault()
47+
openSearchModal()
48+
}
49+
</script>

0 commit comments

Comments
 (0)