Skip to content

Commit e3b9136

Browse files
denisdobra10denisdobra10
committed
Add prose styles for content rendering and code highlighting improvements
- Introduced a new CSS file for prose styles to enhance content readability. - Defined styles for headings, paragraphs, lists, blockquotes, code blocks, tables, images, and horizontal rules. - Implemented alert styles for different message types (info, warning, error, success). - Improved code highlighting styles for better presentation of code snippets.
1 parent 0e9ffba commit e3b9136

File tree

22 files changed

+5254
-7841
lines changed

22 files changed

+5254
-7841
lines changed

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

3.19 MB
Binary file not shown.

‎docs-v3/app.vue‎

Lines changed: 19 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,17 @@
11
<template>
2-
<div>
2+
<UApp>
33
<NuxtPage />
4-
</div>
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>
515
</template>
616

717
<script setup lang="ts">
@@ -12,6 +22,11 @@ useHead({
1222
}
1323
})
1424
15-
// Enable dark mode
16-
const colorMode = useColorMode()
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('')
1732
</script>

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

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

9-
/* Base styles */
10-
html {
11-
scroll-behavior: smooth;
12-
}
13-
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-
}
5+
@import "tailwindcss";
6+
@import "@nuxt/ui";
487

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-
}
8+
/* Import prose styles for content rendering */
9+
@import "./prose.css";
5310

54-
.shiki code {
55-
@apply bg-transparent text-sm leading-relaxed;
56-
}
5711

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;
12+
/* Base styles */
13+
html {
14+
scroll-behavior: smooth;
11815
}
11916

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;
17+
/* Basic component styles */
18+
.nav-link-active {
19+
color: rgb(37 99 235);
20+
background-color: rgb(239 246 255);
12321
}
12422

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;
23+
.dark .nav-link-active {
24+
color: rgb(96 165 250);
25+
background-color: rgba(59 130 246 / 0.2);
12826
}
12927

13028
/* Content transitions */
@@ -138,11 +36,6 @@ pre {
13836
opacity: 0;
13937
}
14038

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-
14639
/* Mobile menu animation */
14740
.mobile-menu-enter-active,
14841
.mobile-menu-leave-active {
@@ -168,19 +61,7 @@ pre {
16861
transform: scale(1.05);
16962
}
17063

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);
64+
/* Focus ring utility */
65+
.focus-ring {
66+
@apply focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-offset-gray-800;
18667
}

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

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
/* Prose styles for content rendering */
2+
.prose-docs {
3+
@apply max-w-none text-gray-900 dark:text-gray-100;
4+
}
5+
6+
.prose-docs h1 {
7+
@apply text-3xl font-bold text-gray-900 dark:text-white mt-8 mb-4 first:mt-0;
8+
}
9+
10+
.prose-docs h2 {
11+
@apply text-2xl font-bold text-gray-900 dark:text-white mt-8 mb-4 border-b border-gray-200 dark:border-gray-700 pb-2;
12+
}
13+
14+
.prose-docs h3 {
15+
@apply text-xl font-semibold text-gray-900 dark:text-white mt-6 mb-3;
16+
}
17+
18+
.prose-docs h4 {
19+
@apply text-lg font-semibold text-gray-900 dark:text-white mt-4 mb-2;
20+
}
21+
22+
.prose-docs p {
23+
@apply text-gray-700 dark:text-gray-300 leading-relaxed mb-4;
24+
}
25+
26+
.prose-docs a {
27+
@apply text-primary-600 hover:text-primary-700 dark:text-primary-400 dark:hover:text-primary-300 underline font-medium;
28+
}
29+
30+
.prose-docs ul,
31+
.prose-docs ol {
32+
@apply mb-4 pl-6 space-y-2;
33+
}
34+
35+
.prose-docs li {
36+
@apply text-gray-700 dark:text-gray-300 leading-relaxed;
37+
}
38+
39+
.prose-docs ul li {
40+
@apply list-disc;
41+
}
42+
43+
.prose-docs ol li {
44+
@apply list-decimal;
45+
}
46+
47+
.prose-docs blockquote {
48+
@apply border-l-4 border-primary-200 dark:border-primary-800 pl-4 py-2 my-6 bg-gray-50 dark:bg-gray-800 italic text-gray-600 dark:text-gray-400;
49+
}
50+
51+
.prose-docs code {
52+
@apply bg-gray-100 dark:bg-gray-800 text-primary-600 dark:text-primary-400 px-2 py-1 rounded text-sm font-mono;
53+
}
54+
55+
.prose-docs pre {
56+
@apply bg-gray-900 dark:bg-gray-950 text-gray-100 p-4 rounded-lg overflow-x-auto my-6;
57+
}
58+
59+
.prose-docs pre code {
60+
@apply bg-transparent text-gray-100 p-0 rounded-none;
61+
}
62+
63+
.prose-docs table {
64+
@apply w-full border-collapse border border-gray-300 dark:border-gray-700 my-6;
65+
}
66+
67+
.prose-docs th {
68+
@apply bg-gray-50 dark:bg-gray-800 border border-gray-300 dark:border-gray-700 px-4 py-2 text-left font-semibold text-gray-900 dark:text-white;
69+
}
70+
71+
.prose-docs td {
72+
@apply border border-gray-300 dark:border-gray-700 px-4 py-2 text-gray-700 dark:text-gray-300;
73+
}
74+
75+
.prose-docs hr {
76+
@apply border-gray-300 dark:border-gray-700 my-8;
77+
}
78+
79+
.prose-docs img {
80+
@apply rounded-lg shadow-md my-6 max-w-full h-auto;
81+
}
82+
83+
/* Code highlighting improvements */
84+
.prose-docs .highlight {
85+
@apply relative;
86+
}
87+
88+
.prose-docs .highlight pre {
89+
@apply overflow-x-auto;
90+
}
91+
92+
/* Alert/Callout styles */
93+
.prose-docs .alert {
94+
@apply p-4 rounded-lg border-l-4 my-6;
95+
}
96+
97+
.prose-docs .alert.info {
98+
@apply bg-blue-50 dark:bg-blue-900/20 border-blue-400 text-blue-800 dark:text-blue-200;
99+
}
100+
101+
.prose-docs .alert.warning {
102+
@apply bg-yellow-50 dark:bg-yellow-900/20 border-yellow-400 text-yellow-800 dark:text-yellow-200;
103+
}
104+
105+
.prose-docs .alert.error {
106+
@apply bg-red-50 dark:bg-red-900/20 border-red-400 text-red-800 dark:text-red-200;
107+
}
108+
109+
.prose-docs .alert.success {
110+
@apply bg-green-50 dark:bg-green-900/20 border-green-400 text-green-800 dark:text-green-200;
111+
}

‎docs-v3/components/SearchInput.vue‎

Lines changed: 0 additions & 49 deletions
This file was deleted.

0 commit comments

Comments
 (0)