Skip to content

Commit 9200ad7

Browse files
webJosewebJose
authored
chore(demo): Refine demo for deployment (#28)
1 parent 53d07fd commit 9200ad7

File tree

13 files changed

+192
-108
lines changed

13 files changed

+192
-108
lines changed

‎demo/src/lib/NavBar.svelte‎

Lines changed: 18 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -30,19 +30,22 @@
3030
}
3131
</script>
3232

33-
<NavBar.Root fixed={allPositions[posIndex]} style="padding-top: 0.5rem; padding-bottom: 0.5rem;">
33+
<NavBar.Root fixed={allPositions[posIndex]} class="py-1 px-2">
3434
<NavBar.Brand>
3535
<NavBar.Item>
3636
<img src={logo} alt="Logo" />
3737
</NavBar.Item>
3838
<NavBar.Item>
39-
<h1 class="title is-4"><code>@svelte-router/kit</code> Demo</h1>
39+
<h1 class="title is-4">@svelte-router/kit</h1>
4040
</NavBar.Item>
41+
<NavBar.Burger />
4142
</NavBar.Brand>
42-
<NavBar.Burger />
4343
<NavBar.Menu>
44-
<NavBar.Item tag="a" isTab isActive={kitIsRouteActive('/')} href={kitCalculateHref({ preserveQuery: true }, '/')}
45-
>Home</NavBar.Item
44+
<NavBar.Item
45+
tag="a"
46+
isTab
47+
isActive={kitIsRouteActive('/')}
48+
href={kitCalculateHref({ preserveQuery: true }, '/')}>Home</NavBar.Item
4649
>
4750
<NavBar.Item
4851
tag="a"
@@ -51,6 +54,16 @@
5154
href={kitCalculateHref({ preserveQuery: true }, '/demo')}>Start Demo</NavBar.Item
5255
>
5356
{#snippet end()}
57+
<NavBar.Item>
58+
<a
59+
href="https://github.com/WJSoftware/svelte-router-kit"
60+
target="_blank"
61+
rel="noopener noreferrer"
62+
title="GitHub Repository"
63+
>
64+
<i class="fab fa-github"></i>
65+
</a>
66+
</NavBar.Item>
5467
<NavBar.Item>
5568
Sveltekit Path: <code>{location?.url.pathname}</code>
5669
</NavBar.Item>

‎demo/src/lib/ThemePicker.svelte‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@
2020
<style>
2121
button {
2222
display: grid;
23-
padding: 0.7em;
2423
& > i {
2524
grid-area: 1 / 1 / 2 / 2;
2625
}

‎demo/src/lib/bulma/NavBar/Burger.svelte‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import type { HTMLButtonAttributes } from "svelte/elements";
3+
import { getNavBarCtx } from "./Root.svelte";
34
45
type Props = Omit<HTMLButtonAttributes, 'children'> & {
56
lineCount?: number;
@@ -10,13 +11,20 @@
1011
class: cssClass,
1112
...restProps
1213
}: Props = $props();
14+
15+
const ctx = getNavBarCtx();
16+
17+
function toggleNavBarContent() {
18+
ctx.menuActive = !ctx.menuActive;
19+
}
1320
</script>
1421

1522
<button
16-
class={["navbar-burger", cssClass]}
23+
class={["navbar-burger", cssClass, { 'is-active': ctx.menuActive }]}
1724
{...restProps}
1825
aria-label="menu"
1926
aria-expanded="false"
27+
onclick={toggleNavBarContent}
2028
>
2129
{#each { length: lineCount } as _, i}
2230
<span aria-hidden="true"></span>

‎demo/src/lib/bulma/NavBar/Item.svelte‎

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,31 @@
11
<script lang="ts" generics="T extends 'a' | 'div' = 'div'">
22
import type { HTMLAttributes, HTMLAnchorAttributes } from 'svelte/elements';
3+
import { getNavBarCtx } from './Root.svelte';
34
45
type Props = (T extends 'a' ? HTMLAnchorAttributes : HTMLAttributes<HTMLDivElement>) & {
56
tag?: T;
67
isActive?: boolean;
78
isTab?: boolean;
89
};
910
11+
const ctx = getNavBarCtx();
12+
1013
let { tag = 'div' as T, isActive, isTab, class: cssClass, children, ...restProps }: Props = $props();
14+
15+
function handleClick() {
16+
if (tag === 'a') {
17+
if (ctx.closeOnLinkClick) {
18+
ctx.menuActive = !ctx.menuActive;
19+
}
20+
}
21+
}
1122
</script>
1223

13-
<svelte:element this={tag} class={['navbar-item', cssClass, { 'is-active': isActive, 'is-tab': isTab }]} {...restProps}>
24+
<svelte:element
25+
this={tag}
26+
class={['navbar-item', cssClass, { 'is-active': isActive, 'is-tab': isTab }]}
27+
onclick={handleClick}
28+
{...restProps}
29+
>
1430
{@render children?.()}
1531
</svelte:element>

‎demo/src/lib/bulma/NavBar/Link.svelte‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
<script lang="ts">
22
import type { HTMLAnchorAttributes } from "svelte/elements";
3+
import { getNavBarCtx } from "./Root.svelte";
34
45
type Props = HTMLAnchorAttributes;
56
@@ -8,8 +9,16 @@
89
children,
910
...restProps
1011
}: Props = $props();
12+
13+
const ctx = getNavBarCtx();
14+
15+
function handleClick() {
16+
if (ctx.closeOnLinkClick) {
17+
ctx.menuActive = !ctx.menuActive;
18+
}
19+
}
1120
</script>
1221

13-
<a class={['navbar-link', cssClass]} {...restProps}>
22+
<a class={['navbar-link', cssClass]} {...restProps} onclick={handleClick}>
1423
{@render children?.()}
1524
</a>

‎demo/src/lib/bulma/NavBar/Menu.svelte‎

Lines changed: 22 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,31 @@
11
<script lang="ts">
2-
import type { Snippet } from "svelte";
3-
import type { HTMLAttributes } from "svelte/elements";
2+
import type { Snippet } from 'svelte';
3+
import type { HTMLAttributes } from 'svelte/elements';
4+
import { getNavBarCtx } from './Root.svelte';
5+
import { slide } from 'svelte/transition';
46
57
type Props = HTMLAttributes<HTMLDivElement> & {
68
end?: Snippet;
79
};
810
9-
let {
10-
class: cssClass,
11-
end,
12-
children,
13-
...restProps
14-
}: Props = $props();
11+
let { class: cssClass, end, children, ...restProps }: Props = $props();
12+
13+
const ctx = getNavBarCtx();
1514
</script>
1615

17-
<div class={["navbar-menu", cssClass]} {...restProps}>
18-
<div class="navbar-start">
19-
{@render children?.()}
20-
</div>
21-
{#if end}
22-
<div class="navbar-end">
23-
{@render end()}
16+
{#key ctx.menuActive}
17+
<div
18+
class={['navbar-menu', cssClass, { 'is-active': ctx.menuActive }]}
19+
{...restProps}
20+
transition:slide={{ duration: 200 }}
21+
>
22+
<div class="navbar-start">
23+
{@render children?.()}
2424
</div>
25-
{/if}
26-
</div>
25+
{#if end}
26+
<div class="navbar-end">
27+
{@render end()}
28+
</div>
29+
{/if}
30+
</div>
31+
{/key}

‎demo/src/lib/bulma/NavBar/Root.svelte‎

Lines changed: 19 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,30 @@
1+
<script module>
2+
import { createContext } from 'svelte';
3+
4+
export class NavBarContext {
5+
menuActive = $state(false);
6+
closeOnLinkClick = $state(true);
7+
}
8+
9+
export const [getNavBarCtx, setNavBarCtx] = createContext<NavBarContext>();
10+
</script>
111
<script lang="ts">
212
import type { HTMLAttributes } from 'svelte/elements';
313
414
type Props = HTMLAttributes<HTMLElement> & {
515
fixed?: 'top' | 'bottom' | undefined;
616
transparent?: boolean;
17+
closeOnLinkClick?: boolean;
718
};
819
9-
let { fixed, transparent, class: cssClass, children, ...restProps }: Props = $props();
20+
let { fixed, transparent, closeOnLinkClick = true, class: cssClass, children, ...restProps }: Props = $props();
21+
22+
const navBarCtx = new NavBarContext();
23+
setNavBarCtx(navBarCtx);
24+
25+
$effect.pre(() => {
26+
navBarCtx.closeOnLinkClick = closeOnLinkClick;
27+
});
1028
1129
$effect(() => {
1230
if (!fixed) {

‎demo/src/lib/demo/Demo.svelte‎

Lines changed: 4 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,21 +1,11 @@
11
<script lang="ts">
22
import Section from '$lib/bulma/Section.svelte';
33
import Tabs from '$lib/bulma/Tabs.svelte';
4-
import {
5-
activeBehavior,
6-
Link,
7-
LinkContext,
8-
Route,
9-
Router,
10-
location,
11-
type Hash,
12-
} from '@svelte-router/core';
13-
// import { location } from '@svelte-router/core/kernel';
4+
import { activeBehavior, Link, LinkContext, Route, Router, location, type Hash } from '@svelte-router/core';
145
import Intro from './Intro.svelte';
156
import How from './How.svelte';
167
import InCode from './InCode.svelte';
178
import FallbackContent from './FallbackContent.svelte';
18-
import hashMode from '$lib/state/hashMode.svelte.js';
199
import Shallow from './Shallow.svelte';
2010
2111
type Props = {
@@ -48,11 +38,9 @@
4838
<li role="tab" {@attach activeBehavior(rs, { key: 'in-code', class: 'is-active' })}>
4939
<Link {hash} href="/in-code">In Code</Link>
5040
</li>
51-
{#if hashMode.isMultiHash}
52-
<li role="tab" {@attach activeBehavior(rs, { key: 'shallow', class: 'is-active' })}>
53-
<Link {hash} href="/shallow">Shallow Routing</Link>
54-
</li>
55-
{/if}
41+
<li role="tab" {@attach activeBehavior(rs, { key: 'shallow', class: 'is-active' })}>
42+
<Link {hash} href="/shallow">Shallow Routing</Link>
43+
</li>
5644
<li role="tab" {@attach activeBehavior(rs, { key: '404', class: 'is-active' })}>
5745
<Link {hash} href="/404">404</Link>
5846
</li>

‎demo/src/lib/demo/InCode.svelte‎

Lines changed: 25 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -6,31 +6,31 @@
66
import "svelte-highlight/styles/brewer.css";
77
88
const code = `<Router>
9-
{#snippet children(state, rs)}
10-
<Tabs>
11-
<LinkContext prependBasePath>
12-
<li role="tab" {@attach activeBehavior(rs, { key: 'intro', class: 'is-active' })}>
13-
<Link href="/">Intro</Link>
14-
</li>
15-
<li role="tab" {@attach activeBehavior(rs, { key: 'how', class: 'is-active' })}>
16-
<Link href="/how">How It Works</Link>
17-
</li>
18-
<li role="tab" {@attach activeBehavior(rs, { key: 'in-code', class: 'is-active' })}>
19-
<Link href="/in-code">In Code</Link>
20-
</li>
21-
</LinkContext>
22-
</Tabs>
23-
<Route key="intro" path="/">
24-
<Intro />
25-
</Route>
26-
<Route key="how" path="/how">
27-
<How />
28-
</Route>
29-
<Route key="in-code" path="/in-code">
30-
<InCode />
31-
</Route>
32-
<FallbackContent /> <!-- Contains <KitFallback> internally -->
33-
{/snippet}
9+
{#snippet children({ state, rs })}
10+
<Tabs>
11+
<LinkContext prependBasePath>
12+
<li role="tab" {@attach activeBehavior(rs, { key: 'intro', class: 'is-active' })}>
13+
<Link href="/">Intro</Link>
14+
</li>
15+
<li role="tab" {@attach activeBehavior(rs, { key: 'how', class: 'is-active' })}>
16+
<Link href="/how">How It Works</Link>
17+
</li>
18+
<li role="tab" {@attach activeBehavior(rs, { key: 'in-code', class: 'is-active' })}>
19+
<Link href="/in-code">In Code</Link>
20+
</li>
21+
</LinkContext>
22+
</Tabs>
23+
<Route key="intro" path="/">
24+
<Intro />
25+
</Route>
26+
<Route key="how" path="/how">
27+
<How />
28+
</Route>
29+
<Route key="in-code" path="/in-code">
30+
<InCode />
31+
</Route>
32+
<FallbackContent /> <!-- Contains <KitFallback> internally -->
33+
{/snippet}
3434
</Router>`;
3535
</script>
3636

‎demo/src/lib/demo/Intro.svelte‎

Lines changed: 32 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<script lang="ts">
2-
import { Columns } from "$lib/bulma/Columns";
3-
import { isColors, isSizes } from "$lib/bulma/common";
4-
import Container from "$lib/bulma/Container.svelte";
5-
import Content from "$lib/bulma/Content.svelte";
6-
import LinkButton from "$lib/bulma/LinkButton.svelte";
2+
import { Columns } from '$lib/bulma/Columns';
3+
import { isColors, isSizes } from '$lib/bulma/common';
4+
import Container from '$lib/bulma/Container.svelte';
5+
import Content from '$lib/bulma/Content.svelte';
6+
import LinkButton from '$lib/bulma/LinkButton.svelte';
77
</script>
88

99
<Content role="tabpanel">
@@ -12,7 +12,8 @@
1212
This <code>Tabs</code> component demonstrates hash routing on top of SvelteKit's built-in path routing.
1313
</p>
1414
<p>
15-
Each one of these tabs, which are constructed using the <code>@svelte-router/core</code>'s <code>&lt;Link&gt;</code>
15+
Each one of these tabs, which are constructed using the <code>@svelte-router/core</code>'s
16+
<code>&lt;Link&gt;</code>
1617
component, updates the hash path in the URL when clicked.
1718
</p>
1819
<p>
@@ -23,20 +24,38 @@
2324
<Container>
2425
<Columns.Root>
2526
<Columns.Column size={2}>
26-
<LinkButton isSize={isSizes.small} isColor={isColors.info} target="_blank" rel="noopener noreferrer" href="https://wjfe-n-savant.hashnode.space">
27+
<LinkButton
28+
isSize={isSizes.small}
29+
isColor={isColors.info}
30+
target="_blank"
31+
rel="noopener noreferrer"
32+
href="https://wjfe-n-savant.hashnode.space"
33+
>
2734
Online Docs
2835
</LinkButton>
2936
</Columns.Column>
3037
<Columns.Column offset={3}>
31-
<LinkButton isSize={isSizes.small} isColor={isColors.link} target="_blank" rel="noopener noreferrer" href="https://github.com/WJSoftware/svelte-router-kit">
32-
<i class="fab fa-github"></i>
33-
GitHub Repository (extension package)
38+
<LinkButton
39+
isSize={isSizes.small}
40+
isColor={isColors.link}
41+
target="_blank"
42+
rel="noopener noreferrer"
43+
href="https://github.com/WJSoftware/svelte-router-kit"
44+
class="text-wrap"
45+
>
46+
<i class="fab fa-github"></i>&nbsp; GitHub Repository (extension package)
3447
</LinkButton>
3548
</Columns.Column>
3649
<Columns.Column>
37-
<LinkButton isSize={isSizes.small} isColor={isColors.link} target="_blank" rel="noopener noreferrer" href="https://github.com/WJSoftware/svelte-router">
38-
<i class="fab fa-github"></i>
39-
GitHub Repository (core package)
50+
<LinkButton
51+
isSize={isSizes.small}
52+
isColor={isColors.link}
53+
target="_blank"
54+
rel="noopener noreferrer"
55+
href="https://github.com/WJSoftware/svelte-router"
56+
class="text-wrap"
57+
>
58+
<i class="fab fa-github"></i>&nbsp; GitHub Repository (core package)
4059
</LinkButton>
4160
</Columns.Column>
4261
</Columns.Root>

0 commit comments

Comments
 (0)