Skip to content

Commit

Permalink
update iframe doc
Browse files Browse the repository at this point in the history
  • Loading branch information
invisal committed Jul 30, 2024
1 parent 9da87ca commit 0aff07e
Show file tree
Hide file tree
Showing 2 changed files with 17 additions and 4 deletions.
17 changes: 15 additions & 2 deletions src/app/docs/embed-iframe-client/page.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,20 @@ our iframe include:
- Ability to embed and rebrand it on your website
- Instant access to LibSQL Studio updates

## Embed LibSQL Studio

You can embed LibSQL Studio as the following

```html
<iframe src="https://libsqlstudio.com/embed/sqlite"></iframe>
```

There are several parameters you can control. For example:

```html
<iframe src="https://libsqlstudio.com/embed/sqlite?name=MyCoolDatabase"></iframe>
```

## Example

Here is a sample code demonstrating how to integrate using React and connect to Turso:
Expand All @@ -28,13 +42,12 @@ export default function ExamplePage() {
const client = useMemo(() => {
return createClient({
url: "libsql://xxx",
authToken: "xxx,
authToken: "xxx",
});
}, []);

useEffect(() => {
const contentWindow = iframeRef.current?.contentWindow;
console.log("We are here");

if (contentWindow) {
const handler = (e: MessageEvent<ClientRequest>) => {
Expand Down
4 changes: 2 additions & 2 deletions src/components/code-block.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ interface CodeBlockProps {

async function getHighlighter() {
return await createHighlighter({
themes: ["dracula", "snazzy-light"],
themes: ["dracula"],
langs: ALLOWED_LANGS,
});
}
Expand All @@ -40,7 +40,7 @@ async function CodeBlockInner({ children, className }: CodeBlockProps) {
lang: validLang,
themes: {
dark: "dracula",
light: "snazzy-light",
light: "dracula",
},
});

Expand Down

0 comments on commit 0aff07e

Please sign in to comment.