Skip to content

Commit f43676a

Browse files
MananTankMananTank
committed
cleanup
1 parent af51f8d commit f43676a

File tree

3 files changed

+32
-236
lines changed

3 files changed

+32
-236
lines changed

‎apps/portal/src/app/reference/ScalarClient.tsx‎

Lines changed: 15 additions & 234 deletions
Original file line numberDiff line numberDiff line change
@@ -1,249 +1,30 @@
11
"use client";
22

33
import { ApiReferenceReact } from "@scalar/api-reference-react";
4-
import { useTheme } from "next-themes";
5-
import { useEffect, useState } from "react";
64
import "@scalar/api-reference-react/style.css";
5+
import "./scaler-app.css";
6+
import { useTheme } from "next-themes";
7+
import { useEffect } from "react";
78

8-
export default function ScalarApiReference() {
9-
const { theme, systemTheme } = useTheme();
10-
const [mounted, setMounted] = useState(false);
9+
export function ScalarApiReference() {
10+
const { theme } = useTheme();
1111

12-
// Avoid hydration mismatch
12+
// scaler is using light-mode and dark-mode classes for theming
1313
useEffect(() => {
14-
setMounted(true);
15-
}, []);
16-
17-
if (!mounted) {
18-
return null;
19-
}
20-
21-
const currentTheme = theme === "system" ? systemTheme : theme;
22-
const isDark = currentTheme === "dark";
14+
if (theme === "dark") {
15+
document.body.classList.remove("light-mode");
16+
document.body.classList.add("dark-mode");
17+
} else {
18+
document.body.classList.remove("dark-mode");
19+
document.body.classList.add("light-mode");
20+
}
21+
}, [theme]);
2322

2423
return (
2524
<ApiReferenceReact
2625
configuration={{
2726
url: "https://api.thirdweb.com/openapi.json",
28-
theme: "default",
29-
customCss: `
30-
/* Match thirdweb portal theme - ${isDark ? "dark" : "light"} mode */
31-
.scalar-app {
32-
${
33-
isDark
34-
? `
35-
/* Dark theme colors */
36-
--scalar-background-1: hsl(0 0% 0%);
37-
--scalar-background-2: hsl(0 0% 3.92%);
38-
--scalar-background-3: hsl(0 0% 11%);
39-
--scalar-background-accent: hsl(0 0% 11%);
40-
41-
--scalar-color-1: hsl(0 0% 98%);
42-
--scalar-color-2: hsl(0 0% 63%);
43-
--scalar-color-3: hsl(0 0% 40%);
44-
--scalar-color-accent: hsl(221 83% 54%);
45-
46-
--scalar-border-color: hsl(0 0% 15%);
47-
--scalar-border-color-active: hsl(0 0% 22%);
48-
49-
/* Code blocks */
50-
--scalar-code-background: hsl(0 0% 3.92%);
51-
--scalar-code-color: hsl(0 0% 98%);
52-
53-
/* Sidebar */
54-
--scalar-sidebar-background-1: hsl(0 0% 0%);
55-
--scalar-sidebar-background-2: hsl(0 0% 3.92%);
56-
--scalar-sidebar-color-1: hsl(0 0% 98%);
57-
--scalar-sidebar-color-2: hsl(0 0% 63%);
58-
--scalar-sidebar-color-active: hsl(221 83% 54%);
59-
--scalar-sidebar-border-color: hsl(0 0% 15%);
60-
`
61-
: `
62-
/* Light theme colors */
63-
--scalar-background-1: hsl(0 0% 98%);
64-
--scalar-background-2: hsl(0 0% 100%);
65-
--scalar-background-3: hsl(0 0% 93%);
66-
--scalar-background-accent: hsl(0 0% 93%);
67-
68-
--scalar-color-1: hsl(0 0% 4%);
69-
--scalar-color-2: hsl(0 0% 40%);
70-
--scalar-color-3: hsl(0 0% 63%);
71-
--scalar-color-accent: hsl(221 83% 54%);
72-
73-
--scalar-border-color: hsl(0 0% 85%);
74-
--scalar-border-color-active: hsl(0 0% 70%);
75-
76-
/* Code blocks */
77-
--scalar-code-background: hsl(0 0% 93%);
78-
--scalar-code-color: hsl(0 0% 4%);
79-
80-
/* Sidebar */
81-
--scalar-sidebar-background-1: hsl(0 0% 98%);
82-
--scalar-sidebar-background-2: hsl(0 0% 100%);
83-
--scalar-sidebar-color-1: hsl(0 0% 4%);
84-
--scalar-sidebar-color-2: hsl(0 0% 40%);
85-
--scalar-sidebar-color-active: hsl(221 83% 54%);
86-
--scalar-sidebar-border-color: hsl(0 0% 85%);
87-
`
88-
}
89-
90-
/* Buttons and interactive elements */
91-
--scalar-button-1: hsl(221 83% 54%);
92-
--scalar-button-1-color: hsl(0 0% 100%);
93-
--scalar-button-1-hover: hsl(221 83% 60%);
94-
95-
/* Success/error colors */
96-
--scalar-color-green: ${isDark ? "hsl(142 75% 50%)" : "hsl(142 70% 35%)"};
97-
--scalar-color-red: ${isDark ? "hsl(360 72% 55%)" : "hsl(360 72% 60%)"};
98-
--scalar-color-yellow: ${isDark ? "hsl(38 92% 50%)" : "hsl(38 92% 40%)"};
99-
--scalar-color-blue: ${isDark ? "hsl(215 100% 65%)" : "hsl(221 83% 54%)"};
100-
101-
/* Font family to match portal */
102-
--scalar-font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
103-
--scalar-font-code: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono", Menlo, monospace;
104-
}
105-
106-
/* Theme-specific overrides */
107-
.scalar-app.scalar-theme--default {
108-
color-scheme: ${isDark ? "dark" : "light"};
109-
}
110-
111-
/* Hide theme toggle since portal controls theme */
112-
.scalar-app .scalar-button--ghost[title*="light"],
113-
.scalar-app .scalar-button--ghost[title*="dark"] {
114-
display: none;
115-
}
116-
117-
/* Match border radius */
118-
.scalar-app * {
119-
--scalar-radius: 0.5rem;
120-
}
121-
122-
/* Custom scrollbar to match portal */
123-
.scalar-app ::-webkit-scrollbar {
124-
width: 0.5rem;
125-
height: 0.5rem;
126-
}
127-
128-
.scalar-app ::-webkit-scrollbar-thumb {
129-
border-radius: 0.5rem;
130-
background: ${isDark ? "hsl(0 0% 15%)" : "hsl(0 0% 85%)"};
131-
}
132-
133-
.scalar-app ::-webkit-scrollbar-thumb:hover {
134-
background: ${isDark ? "hsl(0 0% 22%)" : "hsl(0 0% 70%)"};
135-
}
136-
137-
.scalar-app ::-webkit-scrollbar-track {
138-
background-color: transparent;
139-
}
140-
141-
/* Ensure proper contrast for readability */
142-
.scalar-app .scalar-card {
143-
background: ${isDark ? "hsl(0 0% 3.92%)" : "hsl(0 0% 100%)"};
144-
border-color: ${isDark ? "hsl(0 0% 15%)" : "hsl(0 0% 85%)"};
145-
}
146-
147-
.scalar-app .scalar-sidebar-item--active {
148-
background: ${isDark ? "hsl(0 0% 11%)" : "hsl(0 0% 93%)"};
149-
color: hsl(221 83% 54%);
150-
}
151-
152-
/* Make the API reference take full height */
153-
.scalar-app {
154-
min-height: 100vh;
155-
}
156-
157-
/* Fix code syntax highlighting for both themes */
158-
.scalar-app pre,
159-
.scalar-app code,
160-
.scalar-app .scalar-code-block,
161-
.scalar-app .scalar-request-body-section code,
162-
.scalar-app .scalar-response-body code {
163-
background: ${isDark ? "hsl(0 0% 3.92%)" : "hsl(0 0% 93%)"} !important;
164-
color: ${isDark ? "hsl(0 0% 98%)" : "hsl(0 0% 4%)"} !important;
165-
}
166-
167-
/* Syntax highlighting tokens for light/dark mode */
168-
.scalar-app .token.comment,
169-
.scalar-app .token.prolog,
170-
.scalar-app .token.doctype,
171-
.scalar-app .token.cdata {
172-
color: ${isDark ? "hsl(0 0% 63%)" : "hsl(0 0% 40%)"} !important;
173-
}
174-
175-
.scalar-app .token.punctuation {
176-
color: ${isDark ? "hsl(0 0% 98%)" : "hsl(0 0% 4%)"} !important;
177-
}
178-
179-
.scalar-app .token.property,
180-
.scalar-app .token.tag,
181-
.scalar-app .token.boolean,
182-
.scalar-app .token.number,
183-
.scalar-app .token.constant,
184-
.scalar-app .token.symbol,
185-
.scalar-app .token.deleted {
186-
color: ${isDark ? "hsl(215 100% 65%)" : "hsl(221 83% 54%)"} !important;
187-
}
188-
189-
.scalar-app .token.selector,
190-
.scalar-app .token.attr-name,
191-
.scalar-app .token.string,
192-
.scalar-app .token.char,
193-
.scalar-app .token.builtin,
194-
.scalar-app .token.inserted {
195-
color: ${isDark ? "hsl(142 75% 50%)" : "hsl(142 70% 35%)"} !important;
196-
}
197-
198-
.scalar-app .token.operator,
199-
.scalar-app .token.entity,
200-
.scalar-app .token.url,
201-
.scalar-app .language-css .token.string,
202-
.scalar-app .style .token.string {
203-
color: ${isDark ? "hsl(38 92% 50%)" : "hsl(38 92% 40%)"} !important;
204-
}
205-
206-
.scalar-app .token.atrule,
207-
.scalar-app .token.attr-value,
208-
.scalar-app .token.keyword {
209-
color: ${isDark ? "hsl(321 90% 51%)" : "hsl(321 90% 41%)"} !important;
210-
}
211-
212-
.scalar-app .token.function,
213-
.scalar-app .token.class-name {
214-
color: ${isDark ? "hsl(360 72% 55%)" : "hsl(360 72% 45%)"} !important;
215-
}
216-
217-
.scalar-app .token.regex,
218-
.scalar-app .token.important,
219-
.scalar-app .token.variable {
220-
color: ${isDark ? "hsl(0 0% 98%)" : "hsl(0 0% 4%)"} !important;
221-
}
222-
223-
/* JSON syntax highlighting */
224-
.scalar-app .token.property {
225-
color: ${isDark ? "hsl(215 100% 65%)" : "hsl(221 83% 54%)"} !important;
226-
}
227-
228-
/* Override any existing syntax highlighting */
229-
.scalar-app pre[class*="language-"] {
230-
background: ${isDark ? "hsl(0 0% 3.92%)" : "hsl(0 0% 93%)"} !important;
231-
color: ${isDark ? "hsl(0 0% 98%)" : "hsl(0 0% 4%)"} !important;
232-
}
233-
234-
.scalar-app code[class*="language-"] {
235-
background: ${isDark ? "hsl(0 0% 3.92%)" : "hsl(0 0% 93%)"} !important;
236-
color: ${isDark ? "hsl(0 0% 98%)" : "hsl(0 0% 4%)"} !important;
237-
}
238-
239-
/* Inline code */
240-
.scalar-app code:not([class*="language-"]) {
241-
background: ${isDark ? "hsl(0 0% 11%)" : "hsl(0 0% 90%)"} !important;
242-
color: ${isDark ? "hsl(0 0% 98%)" : "hsl(0 0% 4%)"} !important;
243-
padding: 0.125rem 0.25rem !important;
244-
border-radius: 0.25rem !important;
245-
}
246-
`,
27+
theme: "deepSpace",
24728
layout: "modern",
24829
showSidebar: true,
24930
hideModels: false,

‎apps/portal/src/app/reference/page.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { createMetadata } from "@/components/Document";
2-
import ScalarApiReference from "./ScalarClient";
2+
import { ScalarApiReference } from "./ScalarClient";
33

44
export const metadata = createMetadata({
55
image: {
@@ -11,5 +11,9 @@ export const metadata = createMetadata({
1111
});
1212

1313
export default function ApiReferencePage() {
14-
return <ScalarApiReference />;
14+
return (
15+
<div className="container max-sm:px-0">
16+
<ScalarApiReference />
17+
</div>
18+
);
1519
}

‎apps/portal/src/app/reference/scaler-app.css‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
.scalar-app {
2+
--scalar-background-1: hsl(var(--background));
3+
--scalar-background-2: hsl(var(--card));
4+
}
5+
6+
/* fixes sticky sidebar and header on mobile */
7+
.scalar-app .references-navigation-list,
8+
.scalar-app .references-header {
9+
position: sticky;
10+
top: var(--sticky-top-height);
11+
}

0 commit comments

Comments
 (0)