30 |
32 | (showModal = false)}
16 | >
17 | Click outside me!
18 |
19 | (showModal = false)}
22 | >
23 | Click outside me!
24 |
25 | {/if}
26 |
15 |
16 |
17 |
18 |
25 |
26 |
9 |
10 |
11 |
14 |
15 |
20 |
23 |
24 |
11 | Drag me
12 |
13 | (isOverDropZone = true)}
28 | on:leave-drop-zone={() => (isOverDropZone = false)}
29 | >
30 |
--------------------------------------------------------------------------------
/src/lib/actions/eyeDropperAction/demo.svelte:
--------------------------------------------------------------------------------
1 |
8 |
9 | DropZone
31 |
32 | {#each filesData as file}
33 |
41 |
34 |
39 | {/each}
40 | Name: {file.name}
35 |Size: {file.size}
36 |Type: {file.type}
37 |Last modified: {file.lastModified}
38 |
24 | Color will appear here.
25 |
26 |
11 |
12 |
13 |
16 |
11 |
26 |
12 |
13 |
20 |
21 |
22 |
23 |
24 |
25 |
12 |
19 |
23 | 20 | Clicked: {timesClicked} 21 |
22 |
24 |
35 | timesClickedCallback++ }}
27 | aria-hidden="true"
28 | >
29 | Triggers a callback on Shift + Cmd + X
30 |
31 | 32 | Clicked: {timesClickedCallback} 33 |
34 |15 | Clicked: {timesClicked} 16 |
17 | 18 | timesClickedCallback++ }}
20 | >
21 | Triggers a callback on Shift + Cmd + X
22 |
23 | 24 | Clicked: {timesClickedCallback} 25 |
-------------------------------------------------------------------------------- /src/lib/actions/hoverAction/demo.svelte: -------------------------------------------------------------------------------- 1 | 11 | 12 |
18 | Hover me
19 |
20 |
23 | {#each items as item}
24 | // render item
25 | {/each}
26 |
27 | {#if isLoading}
28 | // show loader here
29 | {/if}
30 |
--------------------------------------------------------------------------------
/src/lib/actions/lazyLoadImageAction/demo.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 | Scroll, scroll, scroll
9 | Below is an image which will load just now
10 | 
11 |
--------------------------------------------------------------------------------
/src/lib/actions/loadingAction/demo.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
10 |
11 |
12 |
13 |
17 | Content
18 |
19 |
9 | Content
10 |
--------------------------------------------------------------------------------
/src/lib/actions/longPressAction/demo.svelte:
--------------------------------------------------------------------------------
1 |
11 |
12 |
19 |
26 |
27 |
9 | This element will render as a direct child of the document's body
10 |
--------------------------------------------------------------------------------
/src/lib/actions/resizableAction/demo.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
6 |
13 |
--------------------------------------------------------------------------------
/src/lib/actions/resizableAction/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "active": false,
3 | "description": "An action to make elements resizable."
4 | }
5 |
--------------------------------------------------------------------------------
/src/lib/actions/resizableAction/usage.txt:
--------------------------------------------------------------------------------
1 |
4 |
5 |
--------------------------------------------------------------------------------
/src/lib/actions/scrollToBottomAction/demo.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
10 | Resize me
11 |
12 |
23 | {#each messages as message}
24 |
27 | {message}
25 | {/each}
26 |
28 |
34 |
35 |
9 | {#each messages as message}
10 |
11 | {/each}
12 |
--------------------------------------------------------------------------------
/src/lib/actions/sortableTableAction/demo.svelte:
--------------------------------------------------------------------------------
1 |
5 |
6 | Try clicking on the columns to sort the rows
8 || Column 1 | 12 |Column 2 | 13 |Column 3 | 14 |
|---|---|---|
| Row 1 | 19 |Row 1 | 20 |Row 1 | 21 |
| Row 2 | 24 |Row 2 | 25 |Row 2 | 26 |
| Row 3 | 29 |Row 3 | 30 |Row 3 | 31 |
| Column 1 | 9 |Column 2 | 10 |Column 3 | 11 |
|---|---|---|
| Row 1 | 16 |Row 1 | 17 |Row 1 | 18 |
| Row 2 | 21 |Row 2 | 22 |Row 2 | 23 |
| Row 3 | 26 |Row 3 | 27 |Row 3 | 28 |
8 |
37 |
9 |
15 |
21 |
27 |
28 |
29 |
35 |
36 |
6 | Default Options
7 |
8 |
9 |
10 | With Options
11 |
--------------------------------------------------------------------------------
/src/lib/derivatives/first/demo.svelte:
--------------------------------------------------------------------------------
1 |
21 |
22 |
24 |
38 |
25 | Store data:
26 |
30 |
31 |
27 | {JSON.stringify($data, null, 2)}
28 |
29 |
32 | First item:
33 |
37 |
34 | {JSON.stringify($firstElement, null, 2)}
35 |
36 |
19 |
40 |
20 | Store data:
21 |
25 |
26 |
22 | {JSON.stringify($data, null, 2)}
23 |
24 |
27 | Picked Data 'name':
28 |
32 |
33 |
29 | {JSON.stringify($pickData, null, 2)}
30 |
31 |
34 | Picked Data 'name' and 'createdAt':
35 |
39 |
36 | {JSON.stringify($nameAndAuthor, null, 2)}
37 |
38 |
26 |
47 |
27 | Store data:
28 |
32 |
33 |
29 | {JSON.stringify($data, null, 2)}
30 |
31 |
34 | Picked Data 'name':
35 |
39 |
40 |
36 | {JSON.stringify($names, null, 2)}
37 |
38 |
41 | Picked Data 'name' and 'author':
42 |
46 |
43 | {JSON.stringify($namesAndAuthors, null, 2)}
44 |
45 |
22 |
43 |
23 | List Size: {$listSize}
24 |
28 |
29 |
25 | {JSON.stringify($list)}
26 |
27 |
30 | Set Size: {$setSize}
31 |
35 |
36 |
32 | {@html "{1, 2, 3, 4}"}
33 |
34 |
37 | Map Size: {$mapSize}
38 |
42 |
39 | {@html "{1 => 3, 2 => 4}"}
40 |
41 |
12 |
26 |
13 | Array data:
14 |
18 |
19 |
15 | {JSON.stringify($data)}
16 |
17 |
20 | Sorted data:
21 |
25 |
22 | {JSON.stringify($sorted)}
23 |
24 |
13 |
14 |
16 | Result: {$number}
15 |
13 |
24 |
14 | Undo
15 | Redo
16 |
17 |
18 | {$counter}
19 |
20 |
21 | $counter++}>Increment
22 |
23 |
11 |
20 |
12 |
13 |
14 |
15 |
16 | 17 | Check your local storage, on changing name value, name key should update! 18 |
19 |Move mouse to change the values
9 |
10 |
13 | X: {$position.x}
11 |Y: {$position.y}
12 |
6 | {#if value}
7 | Yes
8 | {:else}
9 | No
10 | {/if}
11 |
12 |
--------------------------------------------------------------------------------
/src/lib/shared/components/DemoContainer.svelte:
--------------------------------------------------------------------------------
1 |
2 |
4 |
--------------------------------------------------------------------------------
/src/lib/shared/components/LoadingDots.svelte:
--------------------------------------------------------------------------------
1 |
22 |
23 |
24 | {#each dots as dot}
25 | {dot}
26 | {/each}
27 |
28 |
--------------------------------------------------------------------------------
/src/lib/shared/components/PrimaryButton.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
11 |
--------------------------------------------------------------------------------
/src/lib/shared/components/Text.svelte:
--------------------------------------------------------------------------------
1 |
2 |
14 | {#each Array(4).fill(0) as el, index}
15 |
24 |
25 |
16 |
21 |
22 | {/each}
23 | Counter: {$counter}
11 |
12 | inc()}>Increment
13 | dec()}>Decrement
14 | inc(5)}>Increment (+5)
15 | dec(5)}>Decrement (-5)
16 | set(100)}>Set (100)
17 | reset()}>Reset
18 |
19 |
10 |
13 | Color Value for --bg
11 |
12 |
17 | background: var(--bg)
18 |
19 | The date is {$dateStore}
8 |
14 |
20 |
21 | Resize the box to see changes
13 | 18 |
11 |
12 |
23 |
31 |
--------------------------------------------------------------------------------
/src/lib/stores/elementVisibilityStore/index.ts:
--------------------------------------------------------------------------------
1 | import { defaultWindow, tryOnDestroy, writableToReadable } from "$lib/shared";
2 | import type { ConfigurableWindow } from "$lib/shared/utils/types";
3 | import { writable, type Readable } from "svelte/store";
4 |
5 | export function elementVisibilityStore(
6 | target: Element | null,
7 | { window = defaultWindow }: ConfigurableWindow = {}
8 | ) {
9 | const store = writable(false);
10 |
11 | function stop() {
12 | window?.removeEventListener("scroll", check);
13 | }
14 |
15 | function check() {
16 | if (!window) return;
17 | if (target === null) return;
18 |
19 | const document = window.document;
20 | const rect = target.getBoundingClientRect();
21 |
22 | const test =
23 | rect.top <= (window.innerHeight || document.documentElement.clientHeight) &&
24 | rect.left <= (window.innerWidth || document.documentElement.clientWidth) &&
25 | rect.bottom >= 0 &&
26 | rect.right >= 0;
27 | store.set(test);
28 | }
29 |
30 | function start() {
31 | stop();
32 | window?.addEventListener("scroll", check, { capture: false, passive: true });
33 | check();
34 | }
35 |
36 | start();
37 |
38 | tryOnDestroy(stop);
39 |
40 | return { isVisible: writableToReadable(store), stop };
41 | }
42 |
--------------------------------------------------------------------------------
/src/lib/stores/elementVisibilityStore/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "Tracks the visibility of an element within the viewport."
3 | }
4 |
--------------------------------------------------------------------------------
/src/lib/stores/elementVisibilityStore/usage.txt:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/lib/stores/eventListenerStore/demo.svelte:
--------------------------------------------------------------------------------
1 |
36 |
37 |
16 | Target Element (scroll down)
17 |
18 |
19 |
22 | Scroll the window and watch element status in the bottom right corner.
20 |Info on the right bottom corner
21 |
24 |
25 | Element is
26 | {$isVisible ? "inside" : "outside"}
27 | the viewport
28 |
29 |
30 | Check console for logs.
39 | 40 |
16 | Color will appear here.
17 |
18 | Status: {status}
11 | Latitude: {position?.coords.latitude}
12 | Longitude: {position?.coords.longitude}
13 | Error: {JSON.stringify(error)}
14 |
16 | Hover me
17 |
18 |
30 |
32 | {word}
31 |
33 |
38 | Interval:
34 |35 | 36 |
37 |
39 | {#if $isActive}
40 | Pause
41 | {:else}
42 | Resume
43 | {/if}
44 |
45 |
16 |
23 | {:else}
24 | Used
17 | {size($memoryState.memory.usedJSHeapSize)}
18 | Allocated
19 | {size($memoryState.memory.totalJSHeapSize)}
20 | Limit
21 | {size($memoryState.memory.jsHeapSizeLimit)}
22 | Your browser does not support performance memory API
25 | {/if}
26 |
10 | Mouse has left: {#if $hasLeft}
11 | Yes
12 | {:else}
13 | No
14 | {/if}
15 |
16 | Move mouse to change the values
9 |
10 |
13 | X: {$position.x}
11 |Y: {$position.y}
12 |Try toggling your network connectivity using Network in Devtools.
13 |{networkStateText}
15 | 11 | Try switching to offline using Network tab in Devtools or turning off your Wifi. 12 |
13 |
14 | Is Online: {$isOnline}
15 |
16 | Move pointer to change the values
9 |
10 |
13 | X: {$position.x}
11 |Y: {$position.y}
12 |
17 | {counter}
18 |
19 |
20 | Pause
21 | Resume
22 |
23 | Resize the box to see changes
21 | 26 |
14 |
30 | You can select any text on the page.
15 |16 | Selected Text: 17 | {#if text} 19 | {text} 20 | {:else} 21 | No selected 22 | {/if} 24 |
25 |
26 | Selected rects:
27 |
29 | {JSON.stringify(rects, null, 2)}
28 |
13 | {$selectionStore.text}
14 |
15 |
--------------------------------------------------------------------------------
/src/lib/stores/timeoutFnStore/demo.svelte:
--------------------------------------------------------------------------------
1 |
19 |
20 | {text}
22 |Ready: {$ready}
11 |Value: {stringify}
13 |
14 | Toggle
15 | Set On
16 | Set off
17 |
18 |
9 |
22 |
23 |
39 |
--------------------------------------------------------------------------------
/src/lib/stores/windowScrollStore/index.ts:
--------------------------------------------------------------------------------
1 | import { defaultWindow } from "$lib/shared";
2 | import type { ConfigurableWindow, Position } from "$lib/shared/utils/types";
3 | import { readable, type Readable } from "svelte/store";
4 |
5 | const initialValue: Position = {
6 | x: 0,
7 | y: 0,
8 | };
9 |
10 | function getCurrentScroll(window = defaultWindow): Position {
11 | if (!window) return initialValue;
12 | return {
13 | x: window.scrollX,
14 | y: window.scrollY,
15 | };
16 | }
17 |
18 | export function windowScrollStore({
19 | window = defaultWindow,
20 | }: ConfigurableWindow = {}): Readable
10 |
14 |
11 | See scroll values in the lower right corner of the screen.
12 |
13 |
15 |
21 | Scroll value:
16 |
17 |
20 | X: {$position.x}
18 | Y: {$position.y}
19 | X: {$position.x}
8 | Y: {$position.y}
--------------------------------------------------------------------------------
/src/lib/stores/windowSizeStore/demo.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
10 | {$size.width} X {$size.height}
11 |
12 | 13 |
14 | Try resizing the window
15 |
19 | 16 | (Cmd with (-/+)) 17 |
18 |Width: {$size.width}
8 | Height: {$size.height}
--------------------------------------------------------------------------------
/src/lib/transitions/roll/index.ts:
--------------------------------------------------------------------------------
1 | import type { EasingFunction, TransitionConfig } from "svelte/transition";
2 | import { linear } from "svelte/easing";
3 |
4 | type Direction = "top" | "right" | "bottom" | "left";
5 |
6 | interface SlideParams {
7 | delay?: number;
8 | duration?: number;
9 | easing?: EasingFunction;
10 | direction?: Direction;
11 | }
12 |
13 | function getTransform(direction: Direction, value: number) {
14 | switch (direction) {
15 | case "top":
16 | return `translateY(-${value}%)`;
17 | case "bottom":
18 | return `translateY(${value}%)`;
19 | case "left":
20 | return `translateX(-${value}%)`;
21 | case "right":
22 | return `translateX(${value}%)`;
23 | }
24 | }
25 |
26 | export function roll(node: HTMLElement, params: SlideParams = {}): TransitionConfig {
27 | const { delay = 0, duration = 600, easing = linear, direction = "top" } = params;
28 |
29 | return {
30 | delay,
31 | duration,
32 | easing,
33 | css: (t, u) =>
34 | `transform: ${getTransform(direction, u * 100)} rotate(${t * 360}deg); opacity: ${t}`,
35 | };
36 | }
37 |
--------------------------------------------------------------------------------
/src/lib/transitions/roll/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "A custom Svelte transition utility to roll the element in top, left, right and bottom directions."
3 | }
4 |
--------------------------------------------------------------------------------
/src/lib/transitions/roll/usage.txt:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/lib/transitions/slide/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "A custom Svelte transition utility to slide the element in top, left, right, bottom, top-left, top-right, bottom-left and bottom-right directions."
3 | }
4 |
--------------------------------------------------------------------------------
/src/lib/transitions/slide/usage.txt:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/lib/transitions/swirl/index.ts:
--------------------------------------------------------------------------------
1 | import type { EasingFunction, TransitionConfig } from "svelte/transition";
2 | import { linear } from "svelte/easing";
3 |
4 | interface SwirlParams {
5 | delay?: number;
6 | duration?: number;
7 | easing?: EasingFunction;
8 | }
9 |
10 | export function swirl(node: HTMLElement, params: SwirlParams = {}): TransitionConfig {
11 | const { delay = 0, duration = 300, easing = linear } = params;
12 |
13 | return {
14 | delay,
15 | duration,
16 | easing,
17 | css: (t, u) => `transform: rotate(${t * -540}deg) scale(${t}); opacity: ${t}`,
18 | };
19 | }
20 |
--------------------------------------------------------------------------------
/src/lib/transitions/swirl/meta.json:
--------------------------------------------------------------------------------
1 | {
2 | "description": "A custom Svelte transition utility."
3 | }
4 |
--------------------------------------------------------------------------------
/src/lib/transitions/swirl/usage.txt:
--------------------------------------------------------------------------------
1 |
5 |
6 |
7 |
8 |
9 |
10 |
--------------------------------------------------------------------------------
/src/lib/utilities/battery/demo.svelte:
--------------------------------------------------------------------------------
1 |
7 |
8 |
10 |
28 |
11 |
14 | Is Charging?:
12 | {$data.charging ? "Yes" : "No"}
13 |
15 |
19 | Battery Remaining
16 |
17 | {$data.level * 100}%
18 |
20 |
23 | Discharging Time:
21 | {$data.dischargingTime} seconds
22 |
24 |
27 | Charging Time:
25 | {$data.chargingTime} seconds
26 |
16 | {#if isSupported}
17 |
35 |
--------------------------------------------------------------------------------
/src/lib/utilities/fetchWithTimeoutAndRetry/index.ts:
--------------------------------------------------------------------------------
1 | export interface FetchWithTimeoutAndRetryParams {
2 | timeout?: number;
3 | retryCount?: number;
4 | onRetry?: () => void;
5 | }
6 |
7 | export async function fetchWithTimeoutAndRetry(
8 | input: RequestInfo | URL,
9 | options: RequestInit & FetchWithTimeoutAndRetryParams = {}
10 | ): ReturnType
18 |
31 | {:else}
32 | 19 | Current copied: {copiedText} 20 |
21 | 22 | 30 |Your browser does not support Clipboard API
33 | {/if} 34 |
11 |
20 |
12 |
15 | isLargeScreen:
13 | {$isLargeScreen}
14 |
16 |
19 | prefersDark:
17 | {$prefersDark}
18 |
12 |
20 | -
13 | {#each Object.keys($params) as key}
14 |
- 15 | {key}={$params[key]} 16 | 17 | {/each} 18 |
10 | Preferred Color Scheme:
11 |
13 | {$colorScheme}
12 |
10 | Preferred contrast:
11 |
13 | {$contrast}
12 |
10 | Prefers Dark:
11 |
13 | {$prefersDark}
12 |
10 | Preferred Languages:
11 |
17 |
12 | {#each $languages as lang (lang)}
13 |
16 | {lang}
14 | {/each}
15 |
10 | Preferred Motion:
11 |
13 | {$motion}
12 |
22 |
24 | {$counter}
23 |
25 | counter.dispatch("inc")}>+
26 | counter.dispatch("dec")}>-
27 |
28 | {$counter}
19 | 20 | -------------------------------------------------------------------------------- /src/lib/utilities/screenOrientation/demo.svelte: -------------------------------------------------------------------------------- 1 | 8 | 9 |
11 |
12 | For best results, please use a mobile or tablet device (or use your browser's native inspector
13 | to simulate an orientation change)
14 |
15 |
25 |
16 | isSupported: {#if isSupported}
17 | Yes
18 | {:else}
19 | No
20 | {/if}
21 |
22 | Orientation Type: {orientation}
23 | Orientation Angle: {angle}
24 | View transitions will not be enabled
10 |
13 |
18 | Store value:
14 |
15 | {$counter}
16 |
17 |
19 | $counter++}>+
20 | $counter--}>-
21 |
22 |
23 |
28 | Take until counter is less than 10:
24 |
25 | {$moreThan10}
26 |
27 | Store value:
10 | {$counter}
11 |
12 |
13 |
14 |
15 | Take until counter is less than 10:
16 | {$moreThan10}
--------------------------------------------------------------------------------
/src/lib/watchers/takeWhile/demo.svelte:
--------------------------------------------------------------------------------
1 |
10 |
11 |
13 |
18 | Store value:
14 |
15 | {$counter}
16 |
17 |
19 | $counter++}>+
20 | $counter--}>-
21 |
22 |
23 |
28 | Take while counter is less than 10:
24 |
25 | {$lessThan10}
26 |
27 | Store value:
10 | {$counter}
11 |
12 |
13 |
14 |
15 | Take until counter is less than 10:
16 | {$lessThan10}
--------------------------------------------------------------------------------
/src/lib/watchers/watch/demo.svelte:
--------------------------------------------------------------------------------
1 |
12 |
13 |
15 |
20 | Store value:
16 |
17 | {$counter}
18 |
19 |
21 | $counter++}>+
22 | $counter--}>-
23 |
24 | (Check console)
25 |
15 |
20 | Store value:
16 |
17 | {$counter}
18 |
19 |
21 | $counter++}>+
22 | $counter--}>-
23 |
24 | (Check console)
25 |
17 |
22 | Store value:
18 |
19 | {$counter}
20 |
21 |
23 | $counter++}>+
24 | $counter--}>-
25 |
26 | (Check console)
27 |
10 |
25 |
11 |
16 | 12 | Svelte Legos 13 |
14 |{errorCode} - {errorMessage}
15 |
17 |
21 | Go Home
22 |
23 |
24 |
27 |
29 |
33 |
34 |
--------------------------------------------------------------------------------
/src/routes/+layout.ts:
--------------------------------------------------------------------------------
1 | // This can be false if you're using a fallback (i.e. SPA mode)
2 | export const prerender = true;
3 | export const trailingSlash = "always";
4 |
--------------------------------------------------------------------------------
/src/routes/+page.server.ts:
--------------------------------------------------------------------------------
1 | import { totalUtilsLength } from "./directories";
2 |
3 | export async function load() {
4 | return {
5 | utilsLength: totalUtilsLength,
6 | };
7 | }
8 |
--------------------------------------------------------------------------------
/src/routes/DiscordIcon.svelte:
--------------------------------------------------------------------------------
1 |
19 |
--------------------------------------------------------------------------------
/src/routes/Feature.svelte:
--------------------------------------------------------------------------------
1 |
6 |
7 |
8 |
12 |
--------------------------------------------------------------------------------
/src/routes/GithubIcon.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
10 |
--------------------------------------------------------------------------------
/src/routes/SearchIcon.svelte:
--------------------------------------------------------------------------------
1 |
13 |
--------------------------------------------------------------------------------
/src/routes/TwitterIcon.svelte:
--------------------------------------------------------------------------------
1 |
4 |
5 |
10 |
--------------------------------------------------------------------------------
/src/routes/constants.ts:
--------------------------------------------------------------------------------
1 | export const SiteName = "SvelteLegos";
2 | export const SiteTitle = "Collection of Essential Svelte utilities with Actions & Stores";
3 | export const SiteDescription = "SvelteLegos is a Collection of Essential Svelte Utilities";
4 |
--------------------------------------------------------------------------------
/src/routes/guides/+layout.server.ts:
--------------------------------------------------------------------------------
1 | import {
2 | totalUtilsLength,
3 | stores,
4 | actions,
5 | utilities,
6 | transitions,
7 | middlewares,
8 | derivatives,
9 | watchers,
10 | } from "../directories";
11 |
12 | export async function load() {
13 | return {
14 | totalUtilsLength,
15 | stores,
16 | actions,
17 | utilities,
18 | transitions,
19 | middlewares,
20 | derivatives,
21 | watchers,
22 | };
23 | }
24 |
--------------------------------------------------------------------------------
/src/routes/guides/+page.svelte:
--------------------------------------------------------------------------------
1 |
3 |
4 | {icon}
9 |{title}
10 |{description}
11 |
5 |
17 |
--------------------------------------------------------------------------------
/src/routes/guides/MenuIcon.svelte:
--------------------------------------------------------------------------------
1 |
14 |
--------------------------------------------------------------------------------
/src/routes/guides/layout-hook.server.ts:
--------------------------------------------------------------------------------
1 | import Prism from "prismjs";
2 | import "../../prism-svelte";
3 | import fs from "fs";
4 | export const prerender = true;
5 |
6 | const REPO_BASE_URL = "https://github.com/ankurrsinghal/svelte-legos/tree/master/src";
7 | const REPO_HOOKS_URL = (itemType: string) => REPO_BASE_URL + "/lib/" + itemType;
8 |
9 | function lastGetting Started
6 |7 | SvelteLegos is a collection of utility functions based on Svelte 8 | APIs. These utilities will help you bring the Browser APIs into your svelte components without writing 9 | a lot of boilerplate code. 10 |
11 | 12 |
13 |
16 | Installation
14 |npm i svelte-legos
15 |