opensource/supermq
1
0
Fork 0
mirror of https://github.com/absmach/supermq.git synced 2026-06-23 06:20:18 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

fix theme and remove unwanted css

Browse Source 
Signed-off-by: Arvindh <arvindh91@gmail.com>
This commit is contained in:
Arvindh
2026-02-12 00:34:23 +05:30
parent 38a7b8743f
commit 06474b4eb0
8 changed files with 408 additions and 747 deletions
Download Patch File Download Diff File Expand all files Collapse all files
web-astro/src/components/layout.astro
+58 -6
View File
@@ -10,12 +10,64 @@ import { ClientRouter } from 'astro:transitions';
<ClientRouter />
<script is:inline>
(() => {
const stored = localStorage.getItem('theme');
const mode = stored === 'light' || stored === 'dark' ? stored : null;
const resolved =
mode ?? (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark');
document.documentElement.classList.toggle('dark', resolved === 'dark');
document.documentElement.dataset.theme = resolved;
const THEME_KEY = 'theme';
const DARK_QUERY = '(prefers-color-scheme: dark)';
const resolveStoredTheme = () => {
try {
const stored = localStorage.getItem(THEME_KEY);
const mode =
stored === 'light' || stored === 'dark' || stored === 'system'
? stored
: 'system';
if (mode === 'system') {
return window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light';
}
return mode;
} catch {
return window.matchMedia(DARK_QUERY).matches ? 'dark' : 'light';
}
};
const readActiveTheme = () => {
const root = document.documentElement;
if (root.classList.contains('dark') || root.dataset.theme === 'dark') {
return 'dark';
}
if (root.classList.contains('light') || root.dataset.theme === 'light') {
return 'light';
}
return resolveStoredTheme();
};
const applyTheme = (doc, resolved) => {
const root = doc.documentElement;
root.classList.remove('light', 'dark');
root.classList.add(resolved);
root.classList.toggle('dark', resolved === 'dark');
root.dataset.theme = resolved;
root.style.colorScheme = resolved;
};
const syncCurrentDocument = () => {
applyTheme(document, resolveStoredTheme());
};
const syncIncomingDocument = (event) => {
if (!event?.newDocument) return;
applyTheme(event.newDocument, readActiveTheme());
};
// Apply immediately for first paint.
syncCurrentDocument();
// Keep incoming pages on the same theme during Astro transitions.
document.addEventListener('astro:before-preparation', syncIncomingDocument);
document.addEventListener('astro:before-swap', syncIncomingDocument);
// Re-assert theme after swap/page lifecycle in case another script mutates it.
document.addEventListener('astro:after-swap', syncCurrentDocument);
document.addEventListener('astro:page-load', syncCurrentDocument);
})();
</script>
</head>
web-astro/src/components/mdx/Mermaid.astro
+11
View File
@@ -0,0 +1,11 @@
---
import MermaidClient from "@/components/mdx/MermaidClient";
interface Props {
chart: string;
}
const { chart } = Astro.props;
---
<MermaidClient chart={chart} client:load />
web-astro/src/components/mdx/MermaidClient.tsx
+64
View File
@@ -0,0 +1,64 @@
"use client";
import { useEffect, useRef } from "react";
interface MermaidClientProps {
chart: string;
}
const resolveTheme = () => {
const root = document.documentElement;
return root.classList.contains("dark") || root.dataset.theme === "dark"
? "dark"
: "default";
};
export default function MermaidClient({ chart }: MermaidClientProps) {
const ref = useRef<HTMLDivElement>(null);
const idRef = useRef(`mermaid-${Math.random().toString(36).slice(2, 10)}`);
useEffect(() => {
let cancelled = false;
let observer: MutationObserver | undefined;
const renderMermaid = async () => {
const target = ref.current;
if (!target) return;
const mermaid = (await import("mermaid")).default;
mermaid.initialize({
startOnLoad: false,
securityLevel: "loose",
fontFamily: "inherit",
theme: resolveTheme(),
});
const { svg } = await mermaid.render(
idRef.current,
chart.replaceAll("\\n", "\n"),
);
if (!cancelled && ref.current) {
ref.current.innerHTML = svg;
}
};
void renderMermaid();
observer = new MutationObserver(() => {
void renderMermaid();
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class", "data-theme"],
});
return () => {
cancelled = true;
observer?.disconnect();
};
}, [chart]);
return <div ref={ref} className="my-6 overflow-x-auto [&_svg]:mx-auto" />;
}
web-astro/src/layouts/BaseLayout.astro
+264 -220
View File
@@ -1,8 +1,6 @@
---
import "../styles/global.css";
import "../styles/fumadocs-search.css";
import HomeSearchBridge from "@/components/HomeSearchBridge";
interface Props {
title?: string;
description?: string;
@@ -54,236 +52,282 @@ const {
<HomeSearchBridge client:only="react" />
<header id="nd-nav" class="sticky h-14 top-0 z-40" aria-label="Main">
<div class="backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-(--fd-layout-width) bg-fd-background/80">
<div
class="backdrop-blur-lg border-b transition-colors *:mx-auto *:max-w-(--fd-layout-width) bg-fd-background/80"
>
<div style="position:relative">
<nav class="flex h-14 w-full items-center px-4" aria-label="Main navigation">
<a
class="animate-fade-in text-2xl font-bold"
style="line-height:1.1"
href="/"
aria-label="FluxMQ home"
>
<span class="text-[var(--flux-blue)]">Flux</span><span
class="text-[var(--flux-orange)]">MQ</span
<nav
class="flex h-14 w-full items-center px-4"
aria-label="Main navigation"
>
</a>
<button
class="inline-flex rounded-md border border-[var(--flux-pill-border)] bg-[var(--flux-pill-bg)] px-3 py-2 text-sm font-semibold text-[var(--flux-text)] sm:hidden"
type="button"
aria-expanded="false"
aria-controls="site-menu"
data-menu-toggle
>
Menu
</button>
<ul class="flex flex-row items-center gap-2 px-6 max-sm:hidden">
<li class="list-none text-sm">
<a class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary" data-active="false" data-radix-collection-item="" href="/#features">Features</a>
</li>
<li class="list-none text-sm">
<a class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary" data-active="false" data-radix-collection-item="" href="/#performance">Performance</a>
</li>
<li class="list-none text-sm">
<a class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary" data-active="false" data-radix-collection-item="" href="/#use-cases">Use Cases</a>
</li>
<li class="list-none text-sm">
<a class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary" data-active="false" data-radix-collection-item="" href="/#architecture">Architecture</a>
</li>
<li class="list-none text-sm">
<a class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary" data-active="false" data-radix-collection-item="" href="/#quick-start">Quick Start</a>
</li>
<li class="list-none text-sm">
<a class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary" data-active="false" data-radix-collection-item="" href="/docs">Documentation</a>
</li>
</ul>
<ul
id="site-menu"
class="absolute left-0 right-0 top-[55px] hidden flex-col items-start gap-4 border-b border-[var(--flux-header-border)] bg-[var(--flux-header-bg)] px-5 py-4 text-[0.95rem] font-normal sm:hidden"
data-menu
>
<li><a class="nav-link" href="/#features">Features</a></li>
<li><a class="nav-link" href="/#performance">Performance</a></li>
<li><a class="nav-link" href="/#use-cases">Use Cases</a></li>
<li><a class="nav-link" href="/#architecture">Architecture</a></li>
<li><a class="nav-link" href="/#quick-start">Quick Start</a></li>
<li><a class="nav-link" href="/docs">Documentation</a></li>
<li>
<a
class="nav-link"
href="https://github.com/absmach/fluxmq"
target="_blank"
rel="noopener noreferrer">GitHub</a>
</li>
</ul>
<div class="flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden">
<button
type="button"
data-search-full=""
data-search-trigger
class="inline-flex items-center gap-2 border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground w-full rounded-full ps-2.5 max-w-[240px]"
aria-label="Search docs"
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-search size-4"
aria-hidden="true"
<a
class="animate-fade-in text-2xl font-bold"
style="line-height:1.1"
href="/"
aria-label="FluxMQ home"
>
<path d="m21 21-4.34-4.34"></path>
<circle cx="11" cy="11" r="8"></circle>
</svg>
Search
<div class="ms-auto inline-flex gap-0.5">
<kbd
class="rounded-md border bg-fd-background px-1.5"
data-shortcut-mod>Ctrl</kbd
<span class="text-[var(--flux-blue)]">Flux</span><span
class="text-[var(--flux-orange)]">MQ</span
>
<kbd class="rounded-md border bg-fd-background px-1.5">K</kbd>
</div>
</button>
</a>
<button
class="inline-flex items-center rounded-full border p-1"
aria-label="Toggle Theme"
data-theme-toggle
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-sun size-6.5 rounded-full p-1.5 text-fd-muted-foreground"
aria-hidden="true"
data-theme-sun
<button
class="inline-flex rounded-md border border-[var(--flux-pill-border)] bg-[var(--flux-pill-bg)] px-3 py-2 text-sm font-semibold text-[var(--flux-text)] sm:hidden"
type="button"
aria-expanded="false"
aria-controls="site-menu"
data-menu-toggle
>
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="m4.93 4.93 1.41 1.41"></path>
<path d="m17.66 17.66 1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="m6.34 17.66-1.41 1.41"></path>
<path d="m19.07 4.93-1.41 1.41"></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-moon size-6.5 rounded-full p-1.5 text-fd-muted-foreground"
aria-hidden="true"
data-theme-moon
>
<path
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
></path>
</svg>
</button>
Menu
</button>
<ul class="flex flex-row gap-2 items-center empty:hidden">
<li class="list-none -mx-1 first:ms-0 last:me-0">
<a
href="https://github.com/absmach/fluxmq"
rel="noreferrer noopener"
target="_blank"
aria-label="github"
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-5"
<ul class="flex flex-row items-center gap-2 px-6 max-sm:hidden">
<li class="list-none text-sm">
<a
class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary"
data-active="false"
data-radix-collection-item=""
href="/#features">Features</a
>
</li>
<li class="list-none text-sm">
<a
class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary"
data-active="false"
data-radix-collection-item=""
href="/#performance">Performance</a
>
</li>
<li class="list-none text-sm">
<a
class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary"
data-active="false"
data-radix-collection-item=""
href="/#use-cases">Use Cases</a
>
</li>
<li class="list-none text-sm">
<a
class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary"
data-active="false"
data-radix-collection-item=""
href="/#architecture">Architecture</a
>
</li>
<li class="list-none text-sm">
<a
class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary"
data-active="false"
data-radix-collection-item=""
href="/#quick-start">Quick Start</a
>
</li>
<li class="list-none text-sm">
<a
class="[&_svg]:size-4 inline-flex items-center gap-1 p-2 text-fd-muted-foreground transition-colors hover:text-fd-accent-foreground data-[active=true]:text-fd-primary"
data-active="false"
data-radix-collection-item=""
href="/docs">Documentation</a
>
</li>
</ul>
<ul
id="site-menu"
class="absolute left-0 right-0 top-[55px] hidden flex-col items-start gap-4 border-b border-[var(--flux-header-border)] bg-[var(--flux-header-bg)] px-5 py-4 text-[0.95rem] font-normal sm:hidden"
data-menu
>
<li><a class="nav-link" href="/#features">Features</a></li>
<li>
<a class="nav-link" href="/#performance">Performance</a>
</li>
<li><a class="nav-link" href="/#use-cases">Use Cases</a></li>
<li>
<a class="nav-link" href="/#architecture">Architecture</a>
</li>
<li>
<a class="nav-link" href="/#quick-start">Quick Start</a>
</li>
<li><a class="nav-link" href="/docs">Documentation</a></li>
<li>
<a
class="nav-link"
href="https://github.com/absmach/fluxmq"
target="_blank"
rel="noopener noreferrer">GitHub</a
>
</li>
</ul>
<div
class="flex flex-row items-center justify-end gap-1.5 flex-1 max-lg:hidden"
>
<button
type="button"
data-search-full=""
data-search-trigger
class="inline-flex items-center gap-2 border bg-fd-secondary/50 p-1.5 text-sm text-fd-muted-foreground transition-colors hover:bg-fd-accent hover:text-fd-accent-foreground w-full rounded-full ps-2.5 max-w-[240px]"
aria-label="Search docs"
>
<svg role="img" viewBox="0 0 24 24" fill="currentColor">
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="none"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-search size-4"
aria-hidden="true"
>
<path d="m21 21-4.34-4.34"></path>
<circle cx="11" cy="11" r="8"></circle>
</svg>
Search
<div class="ms-auto inline-flex gap-0.5">
<kbd
class="rounded-md border bg-fd-background px-1.5"
data-shortcut-mod>Ctrl</kbd
>
<kbd class="rounded-md border bg-fd-background px-1.5"
>K</kbd
>
</div>
</button>
<button
class="inline-flex items-center rounded-full border p-1"
aria-label="Toggle Theme"
data-theme-toggle
>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-sun size-6.5 rounded-full p-1.5 text-fd-muted-foreground"
aria-hidden="true"
data-theme-sun
>
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="m4.93 4.93 1.41 1.41"></path>
<path d="m17.66 17.66 1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="m6.34 17.66-1.41 1.41"></path>
<path d="m19.07 4.93-1.41 1.41"></path>
</svg>
<svg
xmlns="http://www.w3.org/2000/svg"
width="24"
height="24"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
class="lucide lucide-moon size-6.5 rounded-full p-1.5 text-fd-muted-foreground"
aria-hidden="true"
data-theme-moon
>
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
></path>
</svg>
</button>
<ul class="flex flex-row gap-2 items-center empty:hidden">
<li class="list-none -mx-1 first:ms-0 last:me-0">
<a
href="https://github.com/absmach/fluxmq"
rel="noreferrer noopener"
target="_blank"
aria-label="github"
class="inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-fd-ring hover:bg-fd-accent hover:text-fd-accent-foreground p-1.5 [&_svg]:size-5"
>
<svg role="img" viewBox="0 0 24 24" fill="currentColor">
<path
d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
></path>
</svg>
</a>
</li>
</ul>
</div>
<div class="ml-auto flex items-center gap-2 md:hidden">
<button
type="button"
class="theme-toggle-pill"
aria-label="Toggle theme"
data-theme-toggle
>
<span class="theme-dot" data-theme-sun aria-hidden="true">
<svg
class="size-full"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="m4.93 4.93 1.41 1.41"></path>
<path d="m17.66 17.66 1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="m6.34 17.66-1.41 1.41"></path>
<path d="m19.07 4.93-1.41 1.41"></path>
</svg>
</span>
<span class="theme-dot" data-theme-moon aria-hidden="true">
<svg
class="size-full"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
></path>
</svg>
</span>
</button>
<a
class="nav-icon-link"
href="https://github.com/absmach/fluxmq"
target="_blank"
rel="noopener noreferrer"
aria-label="FluxMQ GitHub repository"
>
<svg
class="size-5"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
d="M12 .5C5.65.5.5 5.66.5 12.03c0 5.1 3.3 9.43 7.88 10.96.58.11.79-.25.79-.57 0-.28-.01-1.04-.02-2.04-3.2.7-3.88-1.55-3.88-1.55-.53-1.35-1.28-1.7-1.28-1.7-1.05-.72.08-.71.08-.71 1.15.08 1.76 1.2 1.76 1.2 1.03 1.76 2.7 1.25 3.37.96.1-.75.4-1.25.72-1.54-2.56-.29-5.26-1.29-5.26-5.74 0-1.27.46-2.3 1.2-3.11-.12-.29-.52-1.46.12-3.04 0 0 .98-.32 3.2 1.19a11.1 11.1 0 0 1 5.82 0c2.22-1.51 3.2-1.19 3.2-1.19.64 1.58.24 2.75.12 3.04.75.81 1.2 1.84 1.2 3.11 0 4.46-2.7 5.44-5.28 5.73.42.36.78 1.06.78 2.14 0 1.54-.01 2.78-.01 3.16 0 .31.21.68.8.56A11.54 11.54 0 0 0 23.5 12.03C23.5 5.66 18.35.5 12 .5Z"
></path>
</svg>
</a>
</li>
</ul>
</div>
<div class="ml-auto flex items-center gap-2 md:hidden">
<button
type="button"
class="theme-toggle-pill"
aria-label="Toggle theme"
data-theme-toggle
>
<span class="theme-dot" data-theme-sun aria-hidden="true">
<svg
class="size-full"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<circle cx="12" cy="12" r="4"></circle>
<path d="M12 2v2"></path>
<path d="M12 20v2"></path>
<path d="m4.93 4.93 1.41 1.41"></path>
<path d="m17.66 17.66 1.41 1.41"></path>
<path d="M2 12h2"></path>
<path d="M20 12h2"></path>
<path d="m6.34 17.66-1.41 1.41"></path>
<path d="m19.07 4.93-1.41 1.41"></path>
</svg>
</span>
<span class="theme-dot" data-theme-moon aria-hidden="true">
<svg
class="size-full"
viewBox="0 0 24 24"
fill="currentColor"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
>
<path
d="M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401"
></path>
</svg>
</span>
</button>
<a
class="nav-icon-link"
href="https://github.com/absmach/fluxmq"
target="_blank"
rel="noopener noreferrer"
aria-label="FluxMQ GitHub repository"
>
<svg
class="size-5"
viewBox="0 0 24 24"
fill="currentColor"
aria-hidden="true"
>
<path
d="M12 .5C5.65.5.5 5.66.5 12.03c0 5.1 3.3 9.43 7.88 10.96.58.11.79-.25.79-.57 0-.28-.01-1.04-.02-2.04-3.2.7-3.88-1.55-3.88-1.55-.53-1.35-1.28-1.7-1.28-1.7-1.05-.72.08-.71.08-.71 1.15.08 1.76 1.2 1.76 1.2 1.03 1.76 2.7 1.25 3.37.96.1-.75.4-1.25.72-1.54-2.56-.29-5.26-1.29-5.26-5.74 0-1.27.46-2.3 1.2-3.11-.12-.29-.52-1.46.12-3.04 0 0 .98-.32 3.2 1.19a11.1 11.1 0 0 1 5.82 0c2.22-1.51 3.2-1.19 3.2-1.19.64 1.58.24 2.75.12 3.04.75.81 1.2 1.84 1.2 3.11 0 4.46-2.7 5.44-5.28 5.73.42.36.78 1.06.78 2.14 0 1.54-.01 2.78-.01 3.16 0 .31.21.68.8.56A11.54 11.54 0 0 0 23.5 12.03C23.5 5.66 18.35.5 12 .5Z"
></path>
</svg>
</a>
</div>
</div>
</nav>
</div>
<div class="flex w-full justify-center"></div>
web-astro/src/pages/docs/[...slug].astro
+11 -10
View File
@@ -1,19 +1,20 @@
---
import { render, type CollectionEntry } from 'astro:content';
import { Docs } from '@/components/docs';
import defaultMdxComponents from 'fumadocs-ui/mdx';
import { source } from '@/lib/source';
import Layout from '@/components/layout.astro';
import type { TOCItemType } from 'fumadocs-core/toc';
import { render, type CollectionEntry } from "astro:content";
import { Docs } from "@/components/docs";
import defaultMdxComponents from "fumadocs-ui/mdx";
import { source } from "@/lib/source";
import Layout from "@/components/layout.astro";
import type { TOCItemType } from "fumadocs-core/toc";
import Mermaid from "../../components/mdx/Mermaid.astro";
interface Props {
page: CollectionEntry<'docs'>;
page: CollectionEntry<"docs">;
}
export async function getStaticPaths() {
const pages = source.getPages();
const paths = pages.map((page) => ({
params: { slug: page.slugs.length > 0 ? page.slugs.join('/') : undefined },
params: { slug: page.slugs.length > 0 ? page.slugs.join("/") : undefined },
props: { page: page.data._raw },
}));
@@ -21,7 +22,7 @@ export async function getStaticPaths() {
const rootPage = pages.find((page) => page.slugs.length === 0);
if (rootPage) {
paths.push({
params: { slug: 'index' },
params: { slug: "index" },
props: { page: rootPage.data._raw },
});
}
@@ -52,6 +53,6 @@ const toc: TOCItemType[] = headings.map((heading) => ({
description={page.data.description}
client:load
>
<Content components={{ ...defaultMdxComponents }} />
<Content components={{ ...defaultMdxComponents, Mermaid }} />
</Docs>
</Layout>
web-astro/src/styles/docs.css
-268
View File
@@ -1,268 +0,0 @@
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
:root {
--flux-blue: hsl(213.64deg 58.41% 44.31%);
--flux-orange: hsl(35.07deg 94.52% 57.06%);
--flux-bg: hsl(0 0% 100%);
--flux-fg: hsl(0 0% 10%);
--flux-border: hsl(0 0% 20%);
--flux-grid: hsl(0 0% 90%);
--flux-text: hsl(0 0% 10%);
--flux-text-muted: hsl(0 0% 40%);
--flux-bg-alt: hsl(0 0% 97%);
--color-fd-background: var(--flux-bg);
--color-fd-foreground: var(--flux-text);
--color-fd-muted: color-mix(in srgb, var(--flux-bg) 92%, var(--flux-fg));
--color-fd-muted-foreground: var(--flux-text-muted);
--color-fd-popover: color-mix(in srgb, var(--flux-bg) 96%, var(--flux-fg));
--color-fd-popover-foreground: var(--flux-text);
--color-fd-card: color-mix(in srgb, var(--flux-bg) 98%, var(--flux-fg));
--color-fd-card-foreground: var(--flux-text);
--color-fd-border: color-mix(in srgb, var(--flux-border) 35%, transparent);
--color-fd-primary: var(--flux-blue);
--color-fd-primary-foreground: var(--flux-bg);
--color-fd-secondary: color-mix(in srgb, var(--flux-bg) 90%, var(--flux-fg));
--color-fd-secondary-foreground: var(--flux-text);
--color-fd-accent: color-mix(in srgb, var(--flux-blue) 14%, transparent);
--color-fd-accent-foreground: var(--flux-text);
--color-fd-ring: color-mix(in srgb, var(--flux-orange) 60%, transparent);
}
:root[class~='dark'],
:root[data-theme='dark'] {
--flux-blue: hsl(213.64deg 70% 60%);
--flux-orange: hsl(35.07deg 94.52% 57.06%);
--flux-bg: hsl(0 0% 10%);
--flux-fg: hsl(0 0% 95%);
--flux-border: hsl(0 0% 30%);
--flux-grid: hsl(0 0% 20%);
--flux-text: hsl(0 0% 95%);
--flux-text-muted: hsl(0 0% 60%);
--flux-bg-alt: hsl(0 0% 8%);
--color-fd-background: var(--flux-bg);
--color-fd-foreground: var(--flux-text);
--color-fd-muted: color-mix(in srgb, var(--flux-bg) 82%, var(--flux-fg));
--color-fd-muted-foreground: var(--flux-text-muted);
--color-fd-popover: color-mix(in srgb, var(--flux-bg) 90%, black);
--color-fd-popover-foreground: var(--flux-text);
--color-fd-card: color-mix(in srgb, var(--flux-bg) 88%, black);
--color-fd-card-foreground: var(--flux-text);
--color-fd-border: color-mix(in srgb, var(--flux-border) 62%, transparent);
--color-fd-primary: var(--flux-orange);
--color-fd-primary-foreground: hsl(0 0% 10%);
--color-fd-secondary: color-mix(in srgb, var(--flux-bg) 78%, var(--flux-fg));
--color-fd-secondary-foreground: var(--flux-text);
--color-fd-accent: color-mix(in srgb, var(--flux-blue) 23%, transparent);
--color-fd-accent-foreground: var(--flux-text);
--color-fd-ring: color-mix(in srgb, var(--flux-orange) 70%, transparent);
}
html {
scroll-behavior: smooth;
}
body {
font-family: Verdana, Geneva, sans-serif;
}
p {
font-size: 1.0625rem;
line-height: 1.7;
}
.mono {
font-family: 'JetBrains Mono', 'Courier New', monospace;
}
.grid-pattern {
background-image:
linear-gradient(to right, var(--flux-grid) 1px, transparent 1px),
linear-gradient(to bottom, var(--flux-grid) 1px, transparent 1px);
background-size: 20px 20px;
}
.brutalist-border {
border: 2px solid var(--flux-border);
}
.brutalist-card {
border: 2px solid var(--flux-border);
background: var(--flux-bg);
color: var(--flux-text);
}
.brutalist-card:hover {
border-color: var(--flux-orange);
}
.terminal {
background: hsl(0 0% 10%);
color: hsl(120 100% 80%);
font-family: 'JetBrains Mono', 'Courier New', monospace;
border: 2px solid var(--flux-border);
}
:root[class~='dark'] .terminal,
:root[data-theme='dark'] .terminal {
background: hsl(0 0% 5%);
border-color: var(--flux-border);
}
.accent-line {
position: relative;
}
.accent-line::before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background: var(--flux-orange);
}
.metrics-table {
border-collapse: separate;
border-spacing: 0;
}
.metrics-table th,
.metrics-table td {
border: 1px solid var(--flux-border);
padding: 0.75rem 1rem;
text-align: left;
}
.metrics-table th {
background: var(--flux-fg);
color: var(--flux-bg);
font-weight: bold;
}
.metrics-table tbody {
background: var(--flux-bg);
color: var(--flux-text);
}
.bg-theme {
background: var(--flux-bg);
color: var(--flux-text);
}
.bg-theme-alt {
background: var(--flux-bg-alt);
color: var(--flux-text);
}
.bg-theme-inverse {
background: var(--flux-fg);
color: var(--flux-bg);
}
.text-theme {
color: var(--flux-text);
}
.text-theme-muted {
color: var(--flux-text-muted);
}
.border-theme {
border-color: var(--flux-border);
}
*:focus-visible {
outline: 2px solid var(--flux-orange);
outline-offset: 2px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.animate-fade-in {
animation: fadeIn 0.8s ease-out;
}
.animate-slide-up {
animation: slideUp 0.8s ease-out;
animation-fill-mode: backwards;
}
.animate-slide-up:nth-child(2) {
animation-delay: 0.2s;
}
.animate-slide-up:nth-child(3) {
animation-delay: 0.4s;
}
@media (prefers-reduced-motion: reduce) {
.animate-fade-in,
.animate-slide-up {
animation: none;
}
}
#nd-sidebar [data-active='true'] {
color: var(--flux-orange) !important;
background-color: rgb(249 163 42 / 10%) !important;
border-left: 3px solid var(--flux-orange) !important;
}
#nd-sidebar a:hover {
color: var(--flux-blue) !important;
}
#nd-sidebar [data-search-full] {
border-color: color-mix(in srgb, var(--flux-border) 35%, transparent);
background: color-mix(in srgb, var(--flux-bg) 88%, var(--flux-fg));
}
#nd-sidebar [data-search-full] kbd {
border-color: color-mix(in srgb, var(--flux-border) 32%, transparent);
background: var(--flux-bg);
}
#nd-sidebar > div:last-child {
border-top-color: color-mix(in srgb, var(--flux-border) 30%, transparent);
}
#nd-toc {
border-left: 1px solid color-mix(in srgb, var(--flux-border) 24%, transparent);
padding-left: 1rem;
}
@media (min-width: 48rem) {
#nd-docs-layout {
--fd-sidebar-width: 312px;
--fd-toc-width: 272px;
}
#nd-subnav {
display: none !important;
}
}
web-astro/src/styles/fumadocs-search.css
-3
View File
@@ -1,3 +0,0 @@
@import 'tailwindcss';
@import 'fumadocs-ui/css/neutral.css';
@import 'fumadocs-ui/css/preset.css';
web-astro/src/styles/starlight.css
-240
View File
@@ -1,240 +0,0 @@
:root,
:root[data-theme='light'] {
--flux-blue: hsl(213.64deg 58.41% 44.31%);
--flux-orange: hsl(35.07deg 94.52% 57.06%);
--flux-bg: hsl(0 0% 100%);
--flux-fg: hsl(0 0% 10%);
--flux-border: hsl(0 0% 20%);
--flux-text: hsl(0 0% 10%);
--flux-text-muted: hsl(0 0% 40%);
--flux-bg-alt: hsl(0 0% 97%);
--sl-font: Verdana, Geneva, sans-serif;
--sl-font-mono: 'JetBrains Mono', 'Courier New', monospace;
--sl-color-accent-low: color-mix(in srgb, var(--flux-blue) 18%, white);
--sl-color-accent: var(--flux-blue);
--sl-color-accent-high: color-mix(in srgb, var(--flux-blue) 70%, black);
--sl-color-text: var(--flux-text);
--sl-color-text-accent: var(--flux-blue);
--sl-color-text-invert: var(--flux-bg);
--sl-color-bg: var(--flux-bg);
--sl-color-bg-nav: var(--flux-bg);
--sl-color-bg-sidebar: var(--flux-bg);
--sl-color-bg-inline-code: color-mix(in srgb, var(--flux-fg) 8%, white);
--sl-color-bg-accent: var(--flux-blue);
--sl-color-hairline-light: color-mix(in srgb, var(--flux-border) 30%, white);
--sl-color-hairline: color-mix(in srgb, var(--flux-border) 45%, white);
--sl-color-hairline-shade: color-mix(in srgb, var(--flux-border) 60%, white);
--sl-sidebar-width: 21rem;
}
:root[data-theme='dark'] {
--flux-blue: hsl(213.64deg 70% 60%);
--flux-orange: hsl(35.07deg 94.52% 57.06%);
--flux-bg: hsl(0 0% 10%);
--flux-fg: hsl(0 0% 95%);
--flux-border: hsl(0 0% 30%);
--flux-text: hsl(0 0% 95%);
--flux-text-muted: hsl(0 0% 60%);
--flux-bg-alt: hsl(0 0% 8%);
--sl-font: Verdana, Geneva, sans-serif;
--sl-font-mono: 'JetBrains Mono', 'Courier New', monospace;
--sl-color-accent-low: color-mix(in srgb, var(--flux-blue) 28%, black);
--sl-color-accent: var(--flux-blue);
--sl-color-accent-high: color-mix(in srgb, var(--flux-blue) 70%, white);
--sl-color-text: var(--flux-text);
--sl-color-text-accent: var(--flux-blue);
--sl-color-text-invert: var(--flux-bg);
--sl-color-bg: var(--flux-bg);
--sl-color-bg-nav: var(--flux-bg);
--sl-color-bg-sidebar: var(--flux-bg-alt);
--sl-color-bg-inline-code: color-mix(in srgb, var(--flux-fg) 12%, black);
--sl-color-bg-accent: var(--flux-blue);
--sl-color-hairline-light: color-mix(in srgb, var(--flux-border) 60%, black);
--sl-color-hairline: color-mix(in srgb, var(--flux-border) 70%, black);
--sl-color-hairline-shade: color-mix(in srgb, var(--flux-border) 80%, black);
--sl-sidebar-width: 21rem;
}
.page > .header {
border-bottom: 2px solid var(--flux-border);
}
.sidebar-pane {
border-right: 2px solid color-mix(in srgb, var(--flux-border) 28%, transparent);
}
.sidebar-content a[aria-current='page'] {
color: var(--flux-orange) !important;
background-color: color-mix(in srgb, var(--flux-orange) 12%, transparent) !important;
border-left: 3px solid var(--flux-orange) !important;
}
.sidebar-content a:hover {
color: var(--flux-blue) !important;
}
.site-title {
font-weight: 800;
}
.site-title img {
display: none;
}
.site-title span {
position: relative;
font-size: 0;
letter-spacing: normal;
}
.site-title span::before {
content: 'Flux';
font-size: 1.55rem;
font-weight: 800;
color: var(--flux-blue);
}
.site-title span::after {
content: 'MQ';
font-size: 1.55rem;
font-weight: 800;
color: var(--flux-orange);
}
.sl-markdown-content p {
font-size: 1.0625rem;
line-height: 1.7;
}
.sl-markdown-content table th,
.sl-markdown-content table td {
border: 1px solid var(--flux-border);
}
.sl-markdown-content table th {
background: var(--flux-fg);
color: var(--flux-bg);
font-weight: 700;
}
@media (min-width: 50rem) {
:root,
:root[data-theme='light'],
:root[data-theme='dark'] {
--sl-nav-height: 7.2rem;
}
.page {
display: grid !important;
grid-template-columns: var(--sl-sidebar-width) minmax(0, 1fr);
grid-template-rows: var(--sl-nav-height) minmax(0, 1fr);
min-height: 100vh;
}
.page > .header {
grid-column: 1;
grid-row: 1;
width: var(--sl-sidebar-width) !important;
border-inline-end: 1px solid var(--sl-color-hairline);
background: var(--sl-color-bg-sidebar);
}
.page > .header > .header {
display: flex;
height: 100%;
flex-direction: column;
justify-content: center;
gap: 0.7rem;
padding-inline: 0.8rem;
background: transparent;
border: 0;
}
.page > .header .title-wrapper {
width: 100%;
}
.page > .header site-search {
width: 100%;
}
.page > .header site-search button[data-open-modal] {
width: 100%;
justify-content: space-between;
border: 1px solid var(--sl-color-hairline-light);
border-radius: 0.6rem;
background: color-mix(in srgb, var(--sl-color-bg) 75%, var(--sl-color-bg-sidebar));
}
.page > .header site-search button[data-open-modal] kbd {
display: inline-flex !important;
}
.page > .header .right-group {
display: none !important;
}
.page > .sidebar {
grid-column: 1;
grid-row: 2;
}
.page > .sidebar .sidebar-pane {
inset-block-start: var(--sl-nav-height);
width: var(--sl-sidebar-width);
}
.page > .sidebar .sidebar-content {
min-height: calc(100vh - var(--sl-nav-height));
}
.page > .sidebar .sidebar-content > .md\:sl-hidden {
display: block !important;
margin-top: auto;
padding-top: 0.75rem;
border-top: 1px solid var(--sl-color-hairline-light);
}
.page > .sidebar .mobile-preferences {
display: flex;
align-items: center;
border-top: 0;
padding-top: 0.3rem;
padding-bottom: 0.4rem;
}
.page > .sidebar .mobile-preferences .social-icons {
margin-inline-end: 0;
padding: 0;
}
.page > .sidebar .mobile-preferences starlight-theme-select label {
--sl-select-width: 2.1rem;
border: 1px solid var(--sl-color-hairline-light);
border-radius: 999px;
padding: 0.35rem;
min-width: auto;
}
.page > .sidebar .mobile-preferences starlight-theme-select .caret {
display: none;
}
.page > .sidebar .mobile-preferences starlight-theme-select select {
position: absolute;
inset: 0;
opacity: 0;
}
.page > .main-frame {
grid-column: 2;
grid-row: 1 / span 2;
padding-top: 0;
}
}