Skip to content

Commit 465d4d0

Browse files
yuri91yuri91
committed
prettier
1 parent 84b66f1 commit 465d4d0

File tree

6 files changed

+174
-164
lines changed

6 files changed

+174
-164
lines changed

‎content/blog/browserpod-1.0.mdx‎

Lines changed: 16 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -22,14 +22,12 @@ BrowserPod relies on WebAssembly to provide high-fidelity, fully compiled runtim
2222
To get an idea of what BrowserPod can do, feel free to experiment with the Node.js REPL below, running completely on your device.
2323

2424
<figure class="w-full">
25-
<div class="w-full relative">
26-
<BrowserPodDemoRepl
27-
client:only="svelte"
28-
/>
29-
</div>
30-
<figcaption class="text-center">
31-
Node 22 REPL running live in BrowserPod.
32-
</figcaption>
25+
<div class="w-full relative">
26+
<BrowserPodDemoRepl client:only="svelte" />
27+
</div>
28+
<figcaption class="text-center">
29+
Node 22 REPL running live in BrowserPod.
30+
</figcaption>
3331
</figure>
3432

3533
## Why BrowserPod — and why now?
@@ -88,20 +86,18 @@ To see Portals in action, scan the QR code (below) with your mobile device. Any
8886
[TODO LIVE LINK TO DEMO]
8987

9088
<figure class="w-full">
91-
<div class="w-full relative">
92-
<BrowserPodDemo
93-
client:only="svelte"
94-
projectSource={{ type: 'local', path: 'vite1' }}
95-
apiKey="bp1_415ed162dee33b650cef0bec877d3bdcefe70fcd35b266d1eefc8d9a8382802d"
96-
/>
97-
</div>
98-
<figcaption class="text-center">
99-
Svelte + Vite running live in BrowserPod.
100-
</figcaption>
89+
<div class="w-full relative">
90+
<BrowserPodDemo
91+
client:only="svelte"
92+
projectSource={{ type: "local", path: "vite1" }}
93+
apiKey="bp1_415ed162dee33b650cef0bec877d3bdcefe70fcd35b266d1eefc8d9a8382802d"
94+
/>
95+
</div>
96+
<figcaption class="text-center">
97+
Svelte + Vite running live in BrowserPod.
98+
</figcaption>
10199
</figure>
102100

103-
104-
105101
## How does this work?
106102

107103
<figure class="w-full">

‎packages/astro-theme/components/blog/BrowserPodDemo_1.0-repl.svelte‎

Lines changed: 15 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,21 @@
11
<script>
2-
import { TerminalPanel } from '@leaningtech/svelte-browserpod-editor';
2+
import { TerminalPanel } from "@leaningtech/svelte-browserpod-editor";
33
</script>
44

55
<div
6-
id="demo-repl"
7-
class="flex w-full h-[25rem] p-2 bg-black/30 backdrop-blur-md border border-white/10 rounded-2xl"
8-
aria-label="In-browser Node.js demo playground"
6+
id="demo-repl"
7+
class="flex w-full h-[25rem] p-2 bg-black/30 backdrop-blur-md border border-white/10 rounded-2xl"
8+
aria-label="In-browser Node.js demo playground"
99
>
10-
<TerminalPanel ctxId="demo" tabs={ [
11-
{
12-
id: 'repl-standalone',
13-
label: 'REPL',
14-
commands: [['node']],
15-
autoRun: true
16-
},
17-
] } />
10+
<TerminalPanel
11+
ctxId="demo"
12+
tabs={[
13+
{
14+
id: "repl-standalone",
15+
label: "REPL",
16+
commands: [["node"]],
17+
autoRun: true,
18+
},
19+
]}
20+
/>
1821
</div>

‎packages/astro-theme/components/blog/BrowserPodDemo_1.0.svelte‎

Lines changed: 94 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,107 +1,112 @@
11
<script>
2+
import {
3+
BrowserPodEditorProvider,
4+
EditorPanel,
5+
TerminalPanel,
6+
PreviewPanel,
7+
setAnalyticsCallback,
8+
} from "@leaningtech/svelte-browserpod-editor";
9+
import "@leaningtech/svelte-browserpod-editor/theme.css";
210
3-
import {
4-
BrowserPodEditorProvider,
5-
EditorPanel,
6-
TerminalPanel,
7-
PreviewPanel,
8-
setAnalyticsCallback
9-
} from '@leaningtech/svelte-browserpod-editor';
10-
import '@leaningtech/svelte-browserpod-editor/theme.css';
11-
12-
let { projectSource, children, apiKey } = $props();
13-
14-
const terminalTabs = [
15-
{
16-
id: 'build',
17-
label: 'Build',
18-
commands: [['npm', 'install'], ['npm', 'run', 'dev']],
19-
autoRun: true
20-
},
21-
{
22-
id: 'repl',
23-
label: 'REPL',
24-
commands: [['node']],
25-
runOnActivate: true
26-
}
27-
];
11+
let { projectSource, children, apiKey } = $props();
2812
13+
const terminalTabs = [
14+
{
15+
id: "build",
16+
label: "Build",
17+
commands: [
18+
["npm", "install"],
19+
["npm", "run", "dev"],
20+
],
21+
autoRun: true,
22+
},
23+
{
24+
id: "repl",
25+
label: "REPL",
26+
commands: [["node"]],
27+
runOnActivate: true,
28+
},
29+
];
2930
</script>
3031

3132
<div
32-
id="demo"
33-
class="flex w-full max-w-6xl h-[50rem] sm:h-[38rem] md:h-[32rem] lg:h-[34rem] mx-auto rounded-2xl overflow-hidden relative"
34-
aria-label="In-browser Node.js demo playground"
33+
id="demo"
34+
class="flex w-full max-w-6xl h-[50rem] sm:h-[38rem] md:h-[32rem] lg:h-[34rem] mx-auto rounded-2xl overflow-hidden relative"
35+
aria-label="In-browser Node.js demo playground"
3536
>
36-
<div class="flex flex-col md:flex-row w-full h-full gap-2 md:gap-4 p-2 bg-black/30 backdrop-blur-md border border-white/10 rounded-2xl">
37-
<BrowserPodEditorProvider
38-
{projectSource}
39-
{apiKey}
40-
ctxId="demo"
41-
defaultFile="src/lib/Counter.svelte"
42-
>
43-
<!-- Editor + Terminal column -->
44-
<div class="flex flex-col gap-2 md:gap-4 w-full md:flex-[2] min-w-0 h-[55%] md:h-full">
45-
<div class="editor-slot">
46-
<EditorPanel />
47-
</div>
48-
<div class="terminal-slot">
49-
<TerminalPanel tabs={terminalTabs} />
50-
</div>
51-
</div>
37+
<div
38+
class="flex flex-col md:flex-row w-full h-full gap-2 md:gap-4 p-2 bg-black/30 backdrop-blur-md border border-white/10 rounded-2xl"
39+
>
40+
<BrowserPodEditorProvider
41+
{projectSource}
42+
{apiKey}
43+
ctxId="demo"
44+
defaultFile="src/lib/Counter.svelte"
45+
>
46+
<!-- Editor + Terminal column -->
47+
<div
48+
class="flex flex-col gap-2 md:gap-4 w-full md:flex-[2] min-w-0 h-[55%] md:h-full"
49+
>
50+
<div class="editor-slot">
51+
<EditorPanel />
52+
</div>
53+
<div class="terminal-slot">
54+
<TerminalPanel tabs={terminalTabs} />
55+
</div>
56+
</div>
5257

53-
<!-- Preview column -->
54-
<div class="preview-slot">
55-
<PreviewPanel />
56-
</div>
57-
</BrowserPodEditorProvider>
58-
</div>
58+
<!-- Preview column -->
59+
<div class="preview-slot">
60+
<PreviewPanel />
61+
</div>
62+
</BrowserPodEditorProvider>
63+
</div>
5964
</div>
6065

6166
<style>
62-
:root {
63-
--bpe-color-primary: #10b981;
64-
--bpe-color-primary-hover: #059669;
65-
}
67+
:root {
68+
--bpe-color-primary: #10b981;
69+
--bpe-color-primary-hover: #059669;
70+
}
6671
67-
.editor-slot {
68-
display: flex;
69-
flex: 1;
70-
min-height: 0;
71-
overflow: hidden;
72-
}
72+
.editor-slot {
73+
display: flex;
74+
flex: 1;
75+
min-height: 0;
76+
overflow: hidden;
77+
}
7378
74-
.terminal-slot {
75-
display: flex;
76-
min-height: 6rem;
77-
height: 35%;
78-
overflow: hidden;
79-
}
79+
.terminal-slot {
80+
display: flex;
81+
min-height: 6rem;
82+
height: 35%;
83+
overflow: hidden;
84+
}
8085
81-
@media (min-width: 640px) {
82-
.terminal-slot {
83-
min-height: 10rem;
84-
}
85-
}
86+
@media (min-width: 640px) {
87+
.terminal-slot {
88+
min-height: 10rem;
89+
}
90+
}
8691
87-
@media (min-width: 768px) {
88-
.terminal-slot {
89-
height: 35%;
90-
}
91-
}
92+
@media (min-width: 768px) {
93+
.terminal-slot {
94+
height: 35%;
95+
}
96+
}
9297
93-
.preview-slot {
94-
display: flex;
95-
flex-direction: column;
96-
min-width: 0;
97-
width: 100%;
98-
height: 60%;
99-
}
98+
.preview-slot {
99+
display: flex;
100+
flex-direction: column;
101+
min-width: 0;
102+
width: 100%;
103+
height: 60%;
104+
}
100105
101-
@media (min-width: 768px) {
102-
.preview-slot {
103-
flex: 1.7;
104-
height: 100%;
105-
}
106-
}
106+
@media (min-width: 768px) {
107+
.preview-slot {
108+
flex: 1.7;
109+
height: 100%;
110+
}
111+
}
107112
</style>

‎sites/labs/astro.config.mjs‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,11 @@ export default defineConfig({
3434
},
3535
},
3636
ssr: {
37-
noExternal: ["@leaningtech/svelte-browserpod-editor", "svelte-codemirror-editor", "@iconify/svelte"],
37+
noExternal: [
38+
"@leaningtech/svelte-browserpod-editor",
39+
"svelte-codemirror-editor",
40+
"@iconify/svelte",
41+
],
3842
},
3943
},
4044
});

‎sites/labs/public/blog/vite1/src/App.svelte‎

Lines changed: 38 additions & 36 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,49 @@
11
<script>
2-
import svelteLogo from './assets/svelte.svg'
3-
import viteLogo from '/vite.svg'
4-
import Counter from './lib/Counter.svelte'
2+
import svelteLogo from "./assets/svelte.svg";
3+
import viteLogo from "/vite.svg";
4+
import Counter from "./lib/Counter.svelte";
55
</script>
66

77
<main>
8-
<div>
9-
<a href="https://vite.dev" target="_blank" rel="noreferrer">
10-
<img src={viteLogo} class="logo" alt="Vite Logo" />
11-
</a>
12-
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
13-
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
14-
</a>
15-
</div>
16-
<h1>Vite + Svelte</h1>
8+
<div>
9+
<a href="https://vite.dev" target="_blank" rel="noreferrer">
10+
<img src={viteLogo} class="logo" alt="Vite Logo" />
11+
</a>
12+
<a href="https://svelte.dev" target="_blank" rel="noreferrer">
13+
<img src={svelteLogo} class="logo svelte" alt="Svelte Logo" />
14+
</a>
15+
</div>
16+
<h1>Vite + Svelte</h1>
1717

18-
<div class="card">
19-
<Counter />
20-
</div>
18+
<div class="card">
19+
<Counter />
20+
</div>
2121

22-
<p>
23-
Check out <a href="https://github.com/sveltejs/kit#readme" target="_blank" rel="noreferrer">SvelteKit</a>, the official Svelte app framework powered by Vite!
24-
</p>
22+
<p>
23+
Check out <a
24+
href="https://github.com/sveltejs/kit#readme"
25+
target="_blank"
26+
rel="noreferrer">SvelteKit</a
27+
>, the official Svelte app framework powered by Vite!
28+
</p>
2529

26-
<p class="read-the-docs">
27-
Click on the Vite and Svelte logos to learn more
28-
</p>
30+
<p class="read-the-docs">Click on the Vite and Svelte logos to learn more</p>
2931
</main>
3032

3133
<style>
32-
.logo {
33-
height: 6em;
34-
padding: 1.5em;
35-
will-change: filter;
36-
transition: filter 300ms;
37-
}
38-
.logo:hover {
39-
filter: drop-shadow(0 0 2em #646cffaa);
40-
}
41-
.logo.svelte:hover {
42-
filter: drop-shadow(0 0 2em #ff3e00aa);
43-
}
44-
.read-the-docs {
45-
color: #888;
46-
}
34+
.logo {
35+
height: 6em;
36+
padding: 1.5em;
37+
will-change: filter;
38+
transition: filter 300ms;
39+
}
40+
.logo:hover {
41+
filter: drop-shadow(0 0 2em #646cffaa);
42+
}
43+
.logo.svelte:hover {
44+
filter: drop-shadow(0 0 2em #ff3e00aa);
45+
}
46+
.read-the-docs {
47+
color: #888;
48+
}
4749
</style>

0 commit comments

Comments
 (0)