-
{entry.data.title} Example
-
+
+ {
+ examples.map((entry, idx) => (
+ <>
+
+
+
+
- ))
- }
+
+ ))
+ }
+
+
+
+
+ ({
+ id: entry.id,
+ content: entry.body || "",
+ }))}
+ />
-
- Visit our GitHub repository for more examples or complete use cases.
-
+
+
+
+
+
+ Install the Diagram Editor and start building your own workflows.
+
+
+ View on npm
+
+
+
+
+ Visit our GitHub repository for more examples.
+
+
+ More Examples
+
+
+
+
+ Explore examples and complete use cases.
+
+
+ Use cases
+
+
+
+
@@ -190,4 +270,29 @@ const examples = (await getCollection('example')).sort((a,b) => a.data.title.loc
.hero-content {
z-index: 0;
}
+ #example-tabs > .tabs-line-break {
+ width: 100%;
+ height: 0;
+ order: 1;
+ }
+
+ #example-tabs > .tab-content {
+ order: 2;
+ }
+
+ #example-tabs > .diagram-slot {
+ width: 100%;
+ min-height: 600px;
+ order: 3;
+ }
+
+ @media (min-width: 1024px) {
+ #example-tabs > .tab-content {
+ width: 50%;
+ }
+
+ #example-tabs > .diagram-slot {
+ width: 50%;
+ }
+ }
diff --git a/src/utils/activeExample.ts b/src/utils/activeExample.ts
new file mode 100644
index 0000000..5f8f812
--- /dev/null
+++ b/src/utils/activeExample.ts
@@ -0,0 +1,29 @@
+const STRIP_ID = "example-tabs";
+const CHECKED_TAB = 'input[name="example_tabs"]:checked';
+
+export const getActiveExampleId = (): string =>
+ document.querySelector(CHECKED_TAB)?.value ?? "";
+
+export const getServerActiveExampleId = (): string => "";
+
+export function subscribeActiveExample(
+ onChange: () => void,
+): () => void {
+ const strip = document.getElementById(STRIP_ID);
+
+ if (!strip) {
+ if (import.meta.env.DEV) {
+ console.warn(
+ `[activeExample] #${STRIP_ID} not found; diagram will not follow the tabs.`,
+ );
+ }
+
+ return () => {};
+ }
+
+ strip.addEventListener("change", onChange);
+
+ return () => {
+ strip.removeEventListener("change", onChange);
+ };
+}
\ No newline at end of file
diff --git a/src/utils/theme.ts b/src/utils/theme.ts
new file mode 100644
index 0000000..55bc5d6
--- /dev/null
+++ b/src/utils/theme.ts
@@ -0,0 +1,36 @@
+export type ColorMode = "light" | "dark";
+
+export const getTheme = (): ColorMode => {
+ if (typeof document === "undefined") {
+ return "light";
+ }
+
+ return document.documentElement.dataset.theme === "dark"
+ ? "dark"
+ : "light";
+};
+
+export const subscribeTheme = (
+ onChange: () => void,
+): (() => void) => {
+ if (typeof document === "undefined") {
+ return () => {};
+ }
+
+ const observer = new MutationObserver(onChange);
+
+ observer.observe(document.documentElement, {
+ attributes: true,
+ attributeFilter: ["data-theme"],
+ });
+
+ return () => observer.disconnect();
+};
+
+export const getServerTheme = (): ColorMode => "light";
+
+export const themeStore = {
+ getSnapshot: getTheme,
+ getServerSnapshot: getServerTheme,
+ subscribe: subscribeTheme,
+};
\ No newline at end of file
diff --git a/tsconfig.json b/tsconfig.json
index d9265d5..08783ca 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,6 +5,8 @@
"exclude": ["dist"],
"compilerOptions": {
"strictNullChecks": true, // add if using `base` template
- "allowJs": true // required, and included with all Astro templates
+ "allowJs": true, // required, and included with all Astro templates
+ "jsx": "react-jsx",
+ "jsxImportSource": "react",
}
}