openstatus.dev
Openstatus
www.openstatus.dev
chore: content (#1497)
authored by
Maximilian Kaske
and committed by
GitHub
c891f22e
eea00406
+16
-7
+16
-7
apps/status-page/src/app/(public)/client.tsx
+16
-7
apps/status-page/src/app/(public)/client.tsx
···
33
33
import { Button } from "@/components/ui/button";
34
34
import { Input } from "@/components/ui/input";
35
35
import { Separator } from "@/components/ui/separator";
36
+
import { useSidebar } from "@/components/ui/sidebar";
36
37
import { Skeleton } from "@/components/ui/skeleton";
37
38
import {
38
39
Tooltip,
···
65
66
const [isMounted, setIsMounted] = useState(false);
66
67
const [{ q, t }, setSearchParams] = useQueryStates(searchParamsParsers);
67
68
const theme = t ? THEMES[t as keyof typeof THEMES] : undefined;
69
+
const { toggleSidebar } = useSidebar();
68
70
69
71
useEffect(() => {
70
72
setIsMounted(true);
···
223
225
<div className="prose dark:prose-invert prose-sm max-w-none">
224
226
<p>
225
227
You can contribute your own theme by creating a new file in the{" "}
226
-
<code>@openstatus.theme-store</code> package. You'll only need
228
+
<code>@openstatus/theme-store</code> package. You'll only need
227
229
to override css variables. If you are familiar with shadcn, you'll
228
230
know the trick (it also allows you to override `--radius`). Make
229
-
sure your object is satisfying the <code>Theme</code> interface.
231
+
sure your object is satisfying the <code>Theme</code> interface. We
232
+
provide a theme builder to help you with the process.
230
233
</p>
234
+
<Button onClick={toggleSidebar}>Toggle Theme Builder</Button>
231
235
<p>
232
236
Go to the{" "}
233
237
<Link href="https://github.com/openstatusHQ/openstatus/tree/main/packages/theme-store">
···
236
240
to see the existing themes and create a new one by forking and
237
241
creating a pull request.
238
242
</p>
243
+
<p>
244
+
Once you're done, you can test it by adding the following snippet to
245
+
your status page:
246
+
</p>
247
+
<pre>
248
+
<code>sessionStorage.setItem("community-theme", "true");</code>
249
+
</pre>
250
+
<p>
251
+
Or use the following button to test it on the `status` page slug:
252
+
</p>
239
253
<Button
240
254
onClick={() => {
241
255
// NOTE: we use it to display the 'floating-theme' component
···
246
260
Test it
247
261
</Button>
248
262
{/* TODO: OR go to the status-page config and click on the View and Configure button */}
249
-
<p>
250
-
Or use the{" "}
251
-
<code>sessionStorage.setItem("community-theme", "true");</code> on
252
-
your own status page.
253
-
</p>
254
263
</div>
255
264
</Section>
256
265
<Separator />