Skip to content

Commit a7922d8

Browse files
committed
Updated Database
1 parent 41710b3 commit a7922d8

File tree

11 files changed

+151
-149
lines changed

11 files changed

+151
-149
lines changed

src/lib/backend/tools/ToolsFrame.svelte

Lines changed: 11 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
<script lang="ts">
22
import { writable } from 'svelte/store';
33
import { SvelteFlow, Controls, Background, BackgroundVariant } from '@xyflow/svelte';
4-
// import '$lib/style.css';
54
import '@xyflow/svelte/dist/style.css';
6-
import './turbo.css';
5+
import '$lib/backend/tools/turbo.css';
76
87
let nodeTypes = {
98
turbo: ToolsFrameNode
@@ -21,6 +20,7 @@
2120
2221
const { setZoom } = useSvelteFlow();
2322
onMount(() => {
23+
// window.location.reload();
2424
setTimeout(() => {
2525
setZoom(0.82, { duration: 300 });
2626
}, 800);
@@ -32,7 +32,15 @@
3232
</script>
3333

3434
<div style:height="90vh">
35-
<SvelteFlow {nodes} {edges} fitView {nodeTypes} {edgeTypes} {defaultEdgeOptions}>
35+
<SvelteFlow
36+
{nodes}
37+
{edges}
38+
fitView
39+
{nodeTypes}
40+
{edgeTypes}
41+
{defaultEdgeOptions}
42+
class="dark:bg-[#04081a]"
43+
>
3644
<Controls />
3745
<svg>
3846
<defs>

src/lib/backend/tools/ToolsFrameNode.svelte

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -91,54 +91,55 @@
9191
</div>
9292
</div>
9393
</Sheet.Trigger>
94-
<Sheet.Content side="frame">
95-
<Sheet.Header>
94+
<Sheet.Content side="frame" class="px-3 md:px-8">
95+
<Sheet.Header class="mb-2">
9696
<a href={link} target="_blank">
9797
<Sheet.Title class="md:text-2xl flex items-center font-bold">
9898
{#if icon}
99-
<img src={icon} alt={label} class="h-7 w-7 mr-1" />
99+
<img src={icon} alt={label} class="h-7 w-7 mr-1.5" />
100100
{:else if data.src}
101-
<svelte:component this={src} strokeWidth="1.4" size="26" class="mr-1" />
101+
<svelte:component this={src} strokeWidth="1.4" size="26" class="mr-1.5" />
102102
{/if}
103103
{label}</Sheet.Title
104104
>
105105
</a>
106-
<Separator />
107-
<Sheet.Description class="text-primary/80 md:text-lg">{desc}</Sheet.Description>
108-
<div class="starter_code">
109-
{#if starter_code}
110-
<h3 class="text-xl mb-2 font-bold">Installation</h3>
111-
<div class="dark:bg-gray-800 flex flex-col p-2 rounded-md">
112-
{#each starter_code.split('\n') as item}
113-
<code class="">
114-
{item}
115-
</code>
116-
{/each}
117-
</div>
118-
{/if}
119-
</div>
120-
<div class="important_Links">
121-
<h3 class="text-xl mt-2 font-bold">Important Links</h3>
122-
<div class="prose dark:prose-a:text-primary/90">
123-
<ul>
106+
</Sheet.Header>
107+
<Separator />
108+
<Sheet.Description class="text-primary/80 text-md md:text-lg mt-2">{desc}</Sheet.Description
109+
>
110+
<div class="starter_code">
111+
{#if starter_code}
112+
<h3 class="text-xl my-2 font-bold">Installation</h3>
113+
<div class="dark:bg-gray-800 flex flex-col p-2 rounded-md">
114+
{#each starter_code.split('\n') as item}
115+
<code class="">
116+
{item}
117+
</code>
118+
{/each}
119+
</div>
120+
{/if}
121+
</div>
122+
<div class="important_Links">
123+
<h3 class="text-xl mt-2 font-bold">Important Links</h3>
124+
<div class="prose dark:prose-a:text-primary/90">
125+
<ul>
126+
<li>
127+
<a href={docs} target="_blank" class="">Docs</a>
128+
</li>
129+
130+
{#if examples}
124131
<li>
125-
<a href={docs} target="_blank" class="">Docs</a>
132+
<a href={examples} target="_blank" class="">Examples</a>
126133
</li>
127-
128-
{#if examples}
129-
<li>
130-
<a href={examples} target="_blank" class="">Examples</a>
131-
</li>
132-
{/if}
133-
{#if playground}
134-
<li>
135-
<a href={playground} target="_blank" class="">Playground</a>
136-
</li>
137-
{/if}
138-
</ul>
139-
</div>
134+
{/if}
135+
{#if playground}
136+
<li>
137+
<a href={playground} target="_blank" class="">Playground</a>
138+
</li>
139+
{/if}
140+
</ul>
140141
</div>
141-
</Sheet.Header>
142+
</div>
142143
</Sheet.Content>
143144
</Sheet.Root>
144145
</div>

src/lib/backend/tools/tools_code.ts

Lines changed: 21 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,10 @@ export let toolsNodes: Node[] = [
2525
label: 'Supabase',
2626
icon: SupabaseLogo,
2727
short_desc: `Backend as a service`,
28-
link: 'https://svelte.dev/',
29-
docs: 'https://svelte.dev/docs/introduction',
30-
examples: 'https://svelte.dev/examples/hello-world',
31-
playground: 'https://svelte.dev/repl/hello-world?version=4.2.15',
32-
starter_code: `npm create svelte@latest myapp
33-
cd myapp
34-
npm install
35-
npm run dev`
28+
desc: `Supabase is an open source Firebase alternative.Supabase is an incredible tool for building secure and high-performance Postgres backends with minimal configuration. It provides developers with a wide array of functionalities similar to Firebase, such as authentication, real-time database, and storage. However, as an open-source alternative, Supabase grants you greater flexibility and control over your data and applications.`,
29+
link: 'https://supabase.com',
30+
docs: 'https://supabase.com/docs',
31+
examples: 'https://supabase.com/docs/guides/getting-started/quickstarts/sveltekit',
3632
},
3733
position: { x: 400, y: 0 }
3834
},
@@ -42,15 +38,10 @@ export let toolsNodes: Node[] = [
4238
data: {
4339
label: 'Pocektbase',
4440
icon: PocketBaseLogo,
41+
desc: "PocketBase is an open source backend consisting of embedded database (SQLite) with realtime subscriptions, built-in auth management, convenient dashboard UI and simple REST-ish API.",
4542
short_desc: `Backend as a service`,
46-
link: 'https://svelte.dev/',
47-
docs: 'https://svelte.dev/docs/introduction',
48-
examples: 'https://svelte.dev/examples/hello-world',
49-
playground: 'https://svelte.dev/repl/hello-world?version=4.2.15',
50-
starter_code: `npm create svelte@latest myapp
51-
cd myapp
52-
npm install
53-
npm run dev`
43+
link: 'https://pocketbase.io',
44+
docs: 'https://pocketbase.io/docs/',
5445
},
5546
position: { x: 480, y: 130 }
5647
},
@@ -60,15 +51,11 @@ export let toolsNodes: Node[] = [
6051
data: {
6152
label: 'Turso Tech',
6253
icon: TursoTechLogo,
54+
desc: "Turso is a SQLite-compatible database built on libSQL, the Open Contribution fork of SQLite. It enables scaling to hundreds of thousands of databases per organization and supports replication to any location, including your own servers, for microsecond-latency access.",
6355
short_desc: `Backend as a service`,
64-
link: 'https://svelte.dev/',
65-
docs: 'https://svelte.dev/docs/introduction',
66-
examples: 'https://svelte.dev/examples/hello-world',
67-
playground: 'https://svelte.dev/repl/hello-world?version=4.2.15',
68-
starter_code: `npm create svelte@latest myapp
69-
cd myapp
70-
npm install
71-
npm run dev`
56+
link: 'https://turso.tech',
57+
docs: 'https://docs.turso.tech/introduction',
58+
examples: 'https://docs.turso.tech/sdk/ts/quickstart',
7259
},
7360
position: { x: 400, y: 250 }
7461
},
@@ -78,15 +65,12 @@ export let toolsNodes: Node[] = [
7865
data: {
7966
label: 'Apprwite',
8067
icon: AppwriteLogo,
68+
desc: "Appwrite is an Open-source platform that lets you add Auth, DBs, Functions and Storage to your product and build any application at any scale, own your data, and use your preferred coding languages and tools",
8169
short_desc: `Backend as a service`,
82-
link: 'https://svelte.dev/',
83-
docs: 'https://svelte.dev/docs/introduction',
84-
examples: 'https://svelte.dev/examples/hello-world',
85-
playground: 'https://svelte.dev/repl/hello-world?version=4.2.15',
86-
starter_code: `npm create svelte@latest myapp
87-
cd myapp
88-
npm install
89-
npm run dev`
70+
link: 'https://appwrite.io',
71+
docs: 'https://appwrite.io/docs',
72+
examples: 'https://appwrite.io/docs/tutorials',
73+
9074
},
9175
position: { x: 320, y: 370 }
9276
},
@@ -96,15 +80,12 @@ export let toolsNodes: Node[] = [
9680
data: {
9781
label: 'Xata.io',
9882
icon: XataIoLogo,
83+
desc: `Xata is a serverless data platform. Built on top of PostgreSQL, Xata provides a full-text and vector search engine, record-level file attachments, table-level aggregations and exposes a single consistent REST API with SDKs. Xata provides support for schema branches and an optional ask endpoint to engage with with OpenAI's ChatGPT API.`,
9984
short_desc: `Backend as a service`,
100-
link: 'https://svelte.dev/',
101-
docs: 'https://svelte.dev/docs/introduction',
102-
examples: 'https://svelte.dev/examples/hello-world',
103-
playground: 'https://svelte.dev/repl/hello-world?version=4.2.15',
104-
starter_code: `npm create svelte@latest myapp
105-
cd myapp
106-
npm install
107-
npm run dev`
85+
link: 'https://xata.io/',
86+
docs: 'https://xata.io/docs',
87+
examples: 'https://xata.io/docs/examples/gallery-app',
88+
10889
},
10990
position: { x: 320, y: -120 }
11091
},

src/lib/backend/tools/turbo.css

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -130,6 +130,7 @@
130130
}
131131

132132
.svelte-flow__handle.source {
133+
all: none;
133134
right: -10px;
134135
}
135136

Lines changed: 10 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,25 +1,19 @@
11
<script lang="ts">
22
import { writable } from 'svelte/store';
3+
import { SvelteFlow, Background, Controls, type Edge, type Node } from '@xyflow/svelte';
34
import '$lib/style.css';
4-
import {
5-
SvelteFlow,
6-
Background,
7-
Controls,
8-
type Edge,
9-
type Node,
10-
BackgroundVariant
11-
} from '@xyflow/svelte';
12-
135
import '@xyflow/svelte/dist/style.css';
14-
import { initialEdges, initialnode, mobile, nodeTypes } from './edges-nodes';
6+
157
import { onMount } from 'svelte';
8+
import { initialEdges, initialnode, mobile, nodeTypes } from './edges-nodes';
169
1710
let nodes = writable<Node[]>(initialnode);
1811
let edges = writable<Edge[]>(initialEdges);
19-
let isShow = false;
12+
let isShow = true;
2013
let width = 0;
2114
onMount(() => {
2215
isShow = true;
16+
2317
if (width < 600) {
2418
nodes.set(mobile);
2519
} else {
@@ -32,8 +26,8 @@
3226

3327
{#if isShow}
3428
<main>
35-
<SvelteFlow {nodes} {edges} {nodeTypes} fitView={width > 600 ? false : true}>
36-
<Background class="dark:bg-gray-900 bg-sky-200" patternColor="#0677BD" gap={25} />
29+
<SvelteFlow {nodes} {edges} {nodeTypes} fitView>
30+
<Background class="dark:bg-[#04081a] bg-sky-200" patternColor="#0677BD" gap={25} />
3731
<Controls showLock={false} />
3832
</SvelteFlow>
3933
</main>
@@ -43,4 +37,7 @@
4337
main {
4438
height: 90.7vh;
4539
}
40+
:global(.svelte-flow__handle.target) {
41+
left: 50%;
42+
}
4643
</style>

src/lib/diagrams/stl/edges-nodes.ts

Lines changed: 18 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -183,47 +183,55 @@ export let initialnode = [
183183
}
184184
];
185185
export let initialEdges: Edge[] = [
186-
{ id: '1-2', source: '1', target: '2', },
187-
{ id: '1-3', source: '1', target: '3' },
186+
{ id: '1-2', source: '1', target: '2', style: 'stroke-width: 2px; stroke: #1C77FFFF' },
187+
{ id: '1-3', source: '1', target: '3', style: 'stroke-width: 2px; stroke: #1C77FFFF' },
188188
{
189189
id: '2-4',
190190
source: '2',
191-
target: '4'
191+
target: '4',
192+
style: 'stroke-width: 2px; stroke: #1C77FFFF'
192193
},
193194
{
194195
id: '2-5',
195196
source: '2',
196-
target: '5'
197+
target: '5',
198+
style: 'stroke-width: 2px; stroke: #1C77FFFF'
197199
},
198200
{
199201
id: '4-6',
200202
source: '4',
201-
target: '6'
203+
target: '6',
204+
style: 'stroke-width: 2px; stroke: #1C77FFFF'
202205
},
203206
{
204207
id: '5-7',
205208
source: '5',
206-
target: '7'
209+
target: '7',
210+
style: 'stroke-width: 2px; stroke: #1C77FFFF'
207211
},
208212
{
209213
id: '5-8',
210214
source: '5',
211-
target: '8'
215+
target: '8',
216+
style: 'stroke-width: 2px; stroke: #1C77FFFF'
212217
},
213218
{
214219
id: '5-9',
215220
source: '5',
216-
target: '9'
221+
target: '9',
222+
style: 'stroke-width: 2px; stroke: #1C77FFFF'
217223
},
218224
{
219225
id: '3-10',
220226
source: '3',
221-
target: '10'
227+
target: '10',
228+
style: 'stroke-width: 2px; stroke: #1C77FFFF'
222229
},
223230
{
224231
id: '3-11',
225232
source: '3',
226-
target: '11'
233+
target: '11',
234+
style: 'stroke-width: 2px; stroke: #1C77FFFF'
227235
}
228236
]
229237
export let mobile: Node[] = [

src/lib/diagrams/sv/FlowCods.svelte

Lines changed: 2 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,6 @@
11
<script lang="ts">
22
import { writable } from 'svelte/store';
3-
import {
4-
SvelteFlow,
5-
Controls,
6-
Background,
7-
type Node,
8-
type Edge,
9-
MarkerType
10-
} from '@xyflow/svelte';
3+
import { SvelteFlow, Controls, Background, type Node, type Edge } from '@xyflow/svelte';
114
import '$lib/style.css';
125
136
import Simple from './Simple.svelte';
@@ -379,6 +372,6 @@
379372
<div style="height:90.7vh">
380373
<SvelteFlow nodes={nodescode} {edges} {nodeTypes} maxZoom={3} fitView>
381374
<Controls showLock={false} />
382-
<Background class="dark:bg-gray-900 bg-gray-100" />
375+
<Background class="dark:bg-[#04081a] bg-sky-200" />
383376
</SvelteFlow>
384377
</div>

0 commit comments

Comments
 (0)