mirror of
https://github.com/shishantbiswas/bknd.git
synced 2026-03-15 20:17:22 +00:00
docs & readme: fix demo
This commit is contained in:
@@ -3,7 +3,7 @@
|
||||

|
||||
|
||||
<p align="center" width="100%">
|
||||
<a href="https://stackblitz.com/github/bknd-io/bknd-examples?hideExplorer=1&embed=1&view=preview&startScript=example-admin-rich&initialPath=%2Fdata%2Fschema" target="_blank">
|
||||
<a href="https://stackblitz.com/github/bknd-io/bknd-demo?hideExplorer=1&embed=1&view=preview&initialPath=%2Fdata%2Fschema" target="_blank">
|
||||
<strong>⭐ Live Demo</strong>
|
||||
</a>
|
||||
</p>
|
||||
|
||||
@@ -3,79 +3,77 @@
|
||||
import * as React from "react";
|
||||
|
||||
export const examples = {
|
||||
adminRich: {
|
||||
path: "github/bknd-io/bknd-examples",
|
||||
startScript: "example-admin-rich",
|
||||
initialPath: "/data/schema"
|
||||
}
|
||||
adminRich: {
|
||||
path: "github/bknd-io/bknd-examples",
|
||||
startScript: "example-admin-rich",
|
||||
initialPath: "/data/schema",
|
||||
},
|
||||
};
|
||||
|
||||
export const StackBlitz = ({
|
||||
path,
|
||||
ratio = 9 / 16,
|
||||
example,
|
||||
...props
|
||||
path,
|
||||
ratio = 9 / 16,
|
||||
example,
|
||||
...props
|
||||
}: {
|
||||
path?: string;
|
||||
ratio?: number;
|
||||
example?: keyof typeof examples;
|
||||
[key: string]: unknown;
|
||||
path?: string;
|
||||
ratio?: number;
|
||||
example?: keyof typeof examples;
|
||||
[key: string]: unknown;
|
||||
}) => {
|
||||
const selected = example ? examples[example] : undefined;
|
||||
const finalPath = path || selected?.path || "github/bknd-io/bknd-examples";
|
||||
const selected = example ? examples[example] : undefined;
|
||||
const finalPath = path || selected?.path || "github/bknd-io/bknd-examples";
|
||||
|
||||
const params = new URLSearchParams({
|
||||
ctl: "1",
|
||||
hideExplorer: "1",
|
||||
embed: "1",
|
||||
view: "preview",
|
||||
...(selected || {}),
|
||||
...props
|
||||
});
|
||||
const params = new URLSearchParams({
|
||||
ctl: "1",
|
||||
hideExplorer: "1",
|
||||
embed: "1",
|
||||
view: "preview",
|
||||
...(selected || {}),
|
||||
...props,
|
||||
});
|
||||
|
||||
const url = new URL(
|
||||
`https://stackblitz.com/${finalPath}?${params.toString()}`
|
||||
);
|
||||
const url = new URL(`https://stackblitz.com/${finalPath}?${params.toString()}`);
|
||||
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
width: "100%",
|
||||
paddingTop: `${ratio * 100}%`
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
src={url.toString()}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
border: "none"
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "80%",
|
||||
opacity: 0.7,
|
||||
marginTop: "0.2rem",
|
||||
marginBottom: "1rem",
|
||||
textAlign: "center"
|
||||
}}
|
||||
>
|
||||
If you’re having issues viewing it inline,{" "}
|
||||
<a href={url.toString()} target="_blank" rel="noreferrer">
|
||||
try in a new tab
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
return (
|
||||
<>
|
||||
<div
|
||||
style={{
|
||||
position: "relative",
|
||||
overflow: "hidden",
|
||||
width: "100%",
|
||||
paddingTop: `${ratio * 100}%`,
|
||||
}}
|
||||
>
|
||||
<iframe
|
||||
width="100%"
|
||||
height="100%"
|
||||
src={url.toString()}
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
border: "none",
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
style={{
|
||||
fontSize: "80%",
|
||||
opacity: 0.7,
|
||||
marginTop: "0.2rem",
|
||||
marginBottom: "1rem",
|
||||
textAlign: "center",
|
||||
}}
|
||||
>
|
||||
If you’re having issues viewing it inline,{" "}
|
||||
<a href={url.toString()} target="_blank" rel="noreferrer">
|
||||
try in a new tab
|
||||
</a>
|
||||
.
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
@@ -19,7 +19,7 @@ Glad you're here! **bknd** is a lightweight, infrastructure agnostic and feature
|
||||
|
||||
Here is a preview of **bknd** in StackBlitz:
|
||||
|
||||
<StackBlitz {...examples.adminRich} />
|
||||
<StackBlitz path="github/bknd-io/bknd-demo" initialPath="/" />
|
||||
|
||||
<Accordions>
|
||||
<Accordion title="What's going on?">
|
||||
|
||||
Reference in New Issue
Block a user