radiant-docs 0.1.28 → 0.1.31

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -11,6 +11,15 @@ interface Props {
11
11
 
12
12
  const { title, icon, defaultOpen = false, titleSize } = Astro.props;
13
13
 
14
+ const TITLE_SIZE_CLASS = {
15
+ xs: "text-xs",
16
+ sm: "text-sm",
17
+ md: "text-base",
18
+ lg: "text-lg",
19
+ xl: "text-xl",
20
+ "2xl": "text-2xl",
21
+ } as const;
22
+
14
23
  validateProps(
15
24
  "Accordion",
16
25
  { title, icon, defaultOpen, titleSize },
@@ -41,7 +50,7 @@ validateProps(
41
50
  }`
42
51
  x-init="id = (typeof register === 'function') ? register() : Math.random()"
43
52
  role="region"
44
- class="block border-b border-neutral-800/10 last:border-b-0 [&:first-child>h4>button]:pt-0 [&:last-child>div>div]:pb-0"
53
+ class="block border-b border-neutral-800/10 last:border-b-0. [&:first-child>h4>button]:pt-0 [&:last-child>div>div]:pb-0"
45
54
  >
46
55
  <h4 class="not-prose">
47
56
  <button
@@ -51,7 +60,7 @@ validateProps(
51
60
  class="pb-4 pt-4 group flex w-full items-center justify-between gap-2.5 text-left font-medium text-neutral-800"
52
61
  >
53
62
  {icon && <Icon name={icon} />}
54
- <span class:list={["flex-1", titleSize && `text-${titleSize}`]}
63
+ <span class:list={["flex-1", titleSize && TITLE_SIZE_CLASS[titleSize]]}
55
64
  >{title}</span
56
65
  >
57
66
  <Icon
@@ -62,7 +71,7 @@ validateProps(
62
71
  </button>
63
72
  </h4>
64
73
  <div x-show="expanded" x-collapse>
65
- <div class="pb-4 *:first:mt-0 *:last:mb-0">
74
+ <div class="pb-4! *:first:mt-0! *:last:mb-0!">
66
75
  <slot />
67
76
  </div>
68
77
  </div>
@@ -5,7 +5,7 @@ import { docsSchema } from "./lib/frontmatter-schema";
5
5
  const docs = defineCollection({
6
6
  // Load Markdown and MDX files from src/content/docs
7
7
  // This pattern excludes non-content files like docs.json and images
8
- loader: glob({ pattern: "**/*.{md,mdx}", base: "./src/content/docs" }),
8
+ loader: glob({ pattern: "**/*.mdx", base: "./src/content/docs" }),
9
9
  schema: docsSchema,
10
10
  });
11
11
 
@@ -10,6 +10,8 @@ import Sidebar from "../components/Sidebar.astro";
10
10
  import { getConfig } from "../lib/validation";
11
11
  import Header from "../components/Header.astro";
12
12
  import Footer from "../components/Footer.astro";
13
+ import AskAiWidget from "../components/chat/AskAiWidget";
14
+ import { ClientRouter } from "astro:transitions";
13
15
 
14
16
  interface Props {
15
17
  pageTitle?: string;
@@ -45,17 +47,45 @@ const resolvedMetaDescription = resolvedPageDescription ?? fallbackDescription;
45
47
  const documentTitle = resolvedPageTitle
46
48
  ? `${resolvedPageTitle} | ${config.title}`
47
49
  : `${config.title} Docs`;
48
- const canonicalUrl = new URL(Astro.url.pathname, Astro.site ?? Astro.url).toString();
50
+ const canonicalUrl = new URL(
51
+ Astro.url.pathname,
52
+ Astro.site ?? Astro.url,
53
+ ).toString();
49
54
  const ogImageUrl = new URL(
50
55
  routePathToOgImagePath(Astro.url.pathname),
51
56
  Astro.site ?? Astro.url,
52
57
  );
53
58
  const ogImageHref = ogImageUrl.toString();
59
+ const parsedOrgTier = Number.parseInt(
60
+ (import.meta.env.ORG_TIER ?? "1").toString(),
61
+ 10,
62
+ );
63
+ const orgTier =
64
+ Number.isFinite(parsedOrgTier) && parsedOrgTier > 0 ? parsedOrgTier : 1;
65
+ const isDev = import.meta.env.DEV;
66
+ const askAiDevHost = (import.meta.env.ASK_AI_DEV_HOST ?? "").toString().trim();
67
+ const askAiDevProxySecret = (import.meta.env.ASK_AI_DEV_PROXY_SECRET ?? "")
68
+ .toString()
69
+ .trim();
70
+ const hasAskAiDevConfig =
71
+ askAiDevHost.length > 0 && askAiDevProxySecret.length > 0;
72
+ const askAiEnabled = isDev || orgTier >= 3;
73
+ const askAiChatAvailable = isDev ? hasAskAiDevConfig : orgTier >= 3;
74
+ let askAiApiPath = "/_platform/ask-ai";
75
+
76
+ if (isDev && hasAskAiDevConfig) {
77
+ try {
78
+ askAiApiPath = new URL("/_platform/ask-ai", askAiDevHost).toString();
79
+ } catch {
80
+ askAiApiPath = "/_platform/ask-ai";
81
+ }
82
+ }
54
83
  ---
55
84
 
56
85
  <!doctype html>
57
86
  <html lang="en">
58
87
  <head>
88
+ <ClientRouter />
59
89
  <script is:inline>
60
90
  const applyTheme = () => {
61
91
  const modeParam = new URLSearchParams(window.location.search).get(
@@ -141,26 +171,25 @@ const ogImageHref = ogImageUrl.toString();
141
171
  x-bind:class="open ? 'overflow-hidden touch-none' : ''"
142
172
  >
143
173
  <!-- Edges -->
144
- <div class="fixed top-0 inset-x-0 h-16 bg-background-dark -z-10"></div>
145
174
  <div
146
- class="fixed top-1 inset-x-1 h-16 bg-background transition-color duration-700 -z-10 rounded-t-xl"
175
+ class="fixed top-1 inset-x-1 h-16 -z-10 bg-background-dark"
176
+ data-vaul-scale-chrome
147
177
  >
178
+ <div class="bg-white w-full h-full rounded-t-2xl"></div>
148
179
  </div>
149
- <div class="fixed top-0 inset-x-0 h-1 bg-background-dark z-50"></div>
150
180
  <div
151
181
  class="fixed top-[63px] z-30 w-[5px] right-0 bottom-0 bg-background-dark border-l border-l-border"
182
+ data-vaul-scale-chrome
152
183
  >
153
184
  </div>
154
185
  <div
155
186
  class="fixed top-[63px] z-30 w-[5px] left-0 bottom-0 bg-background-dark border-r border-r-border"
187
+ data-vaul-scale-chrome
156
188
  >
157
189
  </div>
158
- <div
159
- class="fixed -z-10 top-1 inset-x-1 bottom-0 rounded-xl shadow-[0_1px_1px_#00000005,0_4px_8px_-4px_#0000000a,0_16px_24px_-8px_#0000000f]"
160
- >
161
- </div>
190
+
162
191
  <!-- Header -->
163
- <Header />
192
+ <Header showAskAiTrigger={askAiEnabled} />
164
193
 
165
194
  <!-- Desktop Sidebar -->
166
195
  <div
@@ -174,20 +203,36 @@ const ogImageHref = ogImageUrl.toString();
174
203
  <div
175
204
  x-show="open"
176
205
  x-cloak
177
- class="bg-background mx-[5px] min-h-[calc(100vh-68px)] mt-17 fixed inset-0 lg:hidden z-40 overflow-y-auto"
206
+ class="bg-background mx-[5px] min-h-[calc(100vh-68px)] mt-17 fixed inset-0 lg:hidden z-50 overflow-y-auto [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
178
207
  x-transition.opacity
179
208
  >
180
209
  <Sidebar />
181
210
  </div>
182
211
 
183
212
  <!-- Main Content -->
184
- <div class="px-5 sm:px-7 lg:pl-[calc(288px+36px)] pt-17 lg:pr-9">
213
+ <div
214
+ class="mx-1 mt-1 px-4 sm:px-6 lg:pl-[calc(288px+32px)] pt-16 lg:pr-8 bg-white"
215
+ data-vaul-scale-chrome
216
+ >
185
217
  <main
186
218
  class="max-w-2xl xl:max-w-5xl mx-auto pt-16 pb-16 min-h-[calc(100vh-64px)]"
187
219
  >
188
220
  <slot />
189
221
  </main>
190
- <Footer />
222
+ <Footer askAiEnabled />
191
223
  </div>
224
+ {
225
+ askAiEnabled ? (
226
+ <div transition:persist>
227
+ <AskAiWidget
228
+ client:only="preact"
229
+ apiPath={askAiApiPath}
230
+ isChatAvailable={askAiChatAvailable}
231
+ devProxyToken={isDev ? askAiDevProxySecret : undefined}
232
+ unavailableMessage="This feature is available on production sites for Pro tier organizations."
233
+ />
234
+ </div>
235
+ ) : null
236
+ }
192
237
  </body>
193
238
  </html>
@@ -1,4 +1,5 @@
1
1
  @import "tailwindcss";
2
+ @import "./vaul.css";
2
3
  @plugin "@tailwindcss/typography";
3
4
 
4
5
  @theme {
@@ -0,0 +1,255 @@
1
+ [data-vaul-drawer] {
2
+ touch-action: none;
3
+ will-change: transform;
4
+ transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
5
+ animation-duration: 0.5s;
6
+ animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
7
+ }
8
+
9
+ [data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="open"] {
10
+ animation-name: slideFromBottom;
11
+ }
12
+
13
+ [data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="closed"] {
14
+ animation-name: slideToBottom;
15
+ }
16
+
17
+ [data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="open"] {
18
+ animation-name: slideFromTop;
19
+ }
20
+
21
+ [data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="closed"] {
22
+ animation-name: slideToTop;
23
+ }
24
+
25
+ [data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="open"] {
26
+ animation-name: slideFromLeft;
27
+ }
28
+
29
+ [data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="closed"] {
30
+ animation-name: slideToLeft;
31
+ }
32
+
33
+ [data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="open"] {
34
+ animation-name: slideFromRight;
35
+ }
36
+
37
+ [data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="closed"] {
38
+ animation-name: slideToRight;
39
+ }
40
+
41
+ [data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="bottom"] {
42
+ transform: translate3d(0, var(--initial-transform, 100%), 0);
43
+ }
44
+
45
+ [data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="top"] {
46
+ transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
47
+ }
48
+
49
+ [data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="left"] {
50
+ transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
51
+ }
52
+
53
+ [data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="right"] {
54
+ transform: translate3d(var(--initial-transform, 100%), 0, 0);
55
+ }
56
+
57
+ [data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="top"] {
58
+ transform: translate3d(0, var(--snap-point-height, 0), 0);
59
+ }
60
+
61
+ [data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="bottom"] {
62
+ transform: translate3d(0, var(--snap-point-height, 0), 0);
63
+ }
64
+
65
+ [data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="left"] {
66
+ transform: translate3d(var(--snap-point-height, 0), 0, 0);
67
+ }
68
+
69
+ [data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="right"] {
70
+ transform: translate3d(var(--snap-point-height, 0), 0, 0);
71
+ }
72
+
73
+ [data-vaul-overlay][data-vaul-snap-points="false"] {
74
+ animation-duration: 0.5s;
75
+ animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
76
+ }
77
+
78
+ [data-vaul-overlay][data-vaul-snap-points="false"][data-state="open"] {
79
+ animation-name: fadeIn;
80
+ }
81
+
82
+ [data-vaul-overlay][data-state="closed"] {
83
+ animation-name: fadeOut;
84
+ }
85
+
86
+ [data-vaul-animate="false"] {
87
+ animation: none !important;
88
+ }
89
+
90
+ [data-vaul-overlay][data-vaul-snap-points="true"] {
91
+ opacity: 0;
92
+ transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
93
+ }
94
+
95
+ [data-vaul-overlay][data-vaul-snap-points="true"] {
96
+ opacity: 1;
97
+ }
98
+
99
+ [data-vaul-drawer]:not([data-vaul-custom-container="true"])::after {
100
+ content: "";
101
+ position: absolute;
102
+ background: inherit;
103
+ background-color: inherit;
104
+ }
105
+
106
+ [data-vaul-drawer][data-vaul-drawer-direction="top"]::after {
107
+ top: initial;
108
+ bottom: 100%;
109
+ left: 0;
110
+ right: 0;
111
+ height: 200%;
112
+ }
113
+
114
+ [data-vaul-drawer][data-vaul-drawer-direction="bottom"]::after {
115
+ top: 100%;
116
+ bottom: initial;
117
+ left: 0;
118
+ right: 0;
119
+ height: 200%;
120
+ }
121
+
122
+ [data-vaul-drawer][data-vaul-drawer-direction="left"]::after {
123
+ left: initial;
124
+ right: 100%;
125
+ top: 0;
126
+ bottom: 0;
127
+ width: 200%;
128
+ }
129
+
130
+ [data-vaul-drawer][data-vaul-drawer-direction="right"]::after {
131
+ left: 100%;
132
+ right: initial;
133
+ top: 0;
134
+ bottom: 0;
135
+ width: 200%;
136
+ }
137
+
138
+ [data-vaul-overlay][data-vaul-snap-points="true"]:not([data-vaul-snap-points-overlay="true"]):not(
139
+ [data-state="closed"]
140
+ ) {
141
+ opacity: 0;
142
+ }
143
+
144
+ [data-vaul-overlay][data-vaul-snap-points-overlay="true"] {
145
+ opacity: 1;
146
+ }
147
+
148
+ [data-vaul-handle] {
149
+ display: block;
150
+ position: relative;
151
+ opacity: 0.7;
152
+ background: #e2e2e4;
153
+ margin-left: auto;
154
+ margin-right: auto;
155
+ height: 5px;
156
+ width: 32px;
157
+ border-radius: 1rem;
158
+ touch-action: pan-y;
159
+ }
160
+
161
+ [data-vaul-handle]:hover,
162
+ [data-vaul-handle]:active {
163
+ opacity: 1;
164
+ }
165
+
166
+ [data-vaul-handle-hitarea] {
167
+ position: absolute;
168
+ left: 50%;
169
+ top: 50%;
170
+ transform: translate(-50%, -50%);
171
+ width: max(100%, 2.75rem);
172
+ height: max(100%, 2.75rem);
173
+ touch-action: inherit;
174
+ }
175
+
176
+ @media (hover: hover) and (pointer: fine) {
177
+ [data-vaul-drawer] {
178
+ user-select: none;
179
+ }
180
+ }
181
+
182
+ @keyframes fadeIn {
183
+ from {
184
+ opacity: 0;
185
+ }
186
+ to {
187
+ opacity: 1;
188
+ }
189
+ }
190
+
191
+ @keyframes fadeOut {
192
+ to {
193
+ opacity: 0;
194
+ }
195
+ }
196
+
197
+ @keyframes slideFromBottom {
198
+ from {
199
+ transform: translate3d(0, var(--initial-transform, 100%), 0);
200
+ }
201
+ to {
202
+ transform: translate3d(0, 0, 0);
203
+ }
204
+ }
205
+
206
+ @keyframes slideToBottom {
207
+ to {
208
+ transform: translate3d(0, var(--initial-transform, 100%), 0);
209
+ }
210
+ }
211
+
212
+ @keyframes slideFromTop {
213
+ from {
214
+ transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
215
+ }
216
+ to {
217
+ transform: translate3d(0, 0, 0);
218
+ }
219
+ }
220
+
221
+ @keyframes slideToTop {
222
+ to {
223
+ transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
224
+ }
225
+ }
226
+
227
+ @keyframes slideFromLeft {
228
+ from {
229
+ transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
230
+ }
231
+ to {
232
+ transform: translate3d(0, 0, 0);
233
+ }
234
+ }
235
+
236
+ @keyframes slideToLeft {
237
+ to {
238
+ transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
239
+ }
240
+ }
241
+
242
+ @keyframes slideFromRight {
243
+ from {
244
+ transform: translate3d(var(--initial-transform, 100%), 0, 0);
245
+ }
246
+ to {
247
+ transform: translate3d(0, 0, 0);
248
+ }
249
+ }
250
+
251
+ @keyframes slideToRight {
252
+ to {
253
+ transform: translate3d(var(--initial-transform, 100%), 0, 0);
254
+ }
255
+ }
@@ -1,5 +1,9 @@
1
1
  {
2
2
  "extends": "astro/tsconfigs/strict",
3
+ "compilerOptions": {
4
+ "jsxImportSource": "preact",
5
+ "types": ["astro/client", "preact"]
6
+ },
3
7
  "include": [".astro/types.d.ts", "**/*"],
4
8
  "exclude": ["dist"]
5
9
  }