Skip to content

Commit 40d7010

Browse files
webJosewebJose
authored
chore(demo): Update demo (#121)
1 parent 48f49e8 commit 40d7010

22 files changed

+738
-516
lines changed

‎demo/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,6 @@
44
<meta charset="UTF-8" />
55
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7-
<title>Vite + Svelte + TS</title>
87
</head>
98
<body>
109
<div id="app"></div>

‎demo/package-lock.json‎

Lines changed: 112 additions & 112 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/src/App.svelte‎

Lines changed: 24 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -2,13 +2,26 @@
22
import './app.scss';
33
import NavBar from './lib/NavBar.svelte';
44
import Tooltip from './lib/Tooltip.svelte';
5-
import { Router, Route, Fallback, RouterTrace, activeBehavior } from '@svelte-router/core';
5+
import { Router, Route, Fallback, RouterTrace, Redirector } from '@svelte-router/core';
66
import NotFound from './lib/NotFound.svelte';
77
import HomeView from './lib/views/home/HomeView.svelte';
88
import PathRoutingView from './lib/views/path-routing/PathRoutingView.svelte';
99
import HashRoutingView from './lib/views/hash-routing/HashRoutingView.svelte';
10+
import DemoBc from './lib/DemoBc.svelte';
11+
import { initTitleContext } from './lib/state/title.svelte';
12+
import HrInCodeView from './lib/views/hash-routing/InCodeView.svelte';
13+
import RedirectedView from './lib/views/redirected/RedirectedView.svelte';
1014
15+
initTitleContext();
1116
let showNavTooltip = $state(false);
17+
const redirector = new Redirector();
18+
redirector.redirections.push({
19+
pattern: '/deprecated-path',
20+
href: '/new-path',
21+
options: {
22+
state: { redirected: true },
23+
}
24+
});
1225
1326
// Show tooltip after a short delay when app loads
1427
$effect(() => {
@@ -39,21 +52,7 @@
3952
{/snippet}
4053
Use these navigation links to test-drive the routing capabilities of @svelte-router/core.
4154
</Tooltip>
42-
<div class="breadcrumb">
43-
<span>
44-
<span {@attach activeBehavior(rs, { key: 'home', class: 'bc-active' })}>Home</span>
45-
</span>
46-
<span>
47-
<span {@attach activeBehavior(rs, { key: 'pathRouting', class: 'bc-active' })}
48-
>Path Routing</span
49-
>
50-
</span>
51-
<span>
52-
<span {@attach activeBehavior(rs, { key: 'hashRouting', class: 'bc-active' })}
53-
>Hash Routing</span
54-
>
55-
</span>
56-
</div>
55+
<DemoBc {rs} />
5756
</header>
5857
<main class="d-flex flex-column flex-fill overflow-auto mt-3">
5958
<div class="container-fluid flex-fill d-flex flex-column">
@@ -67,14 +66,22 @@
6766
<Route key="hashRouting" path="/hash-routing">
6867
<HashRoutingView basePath="/hash-routing" />
6968
</Route>
69+
<Route key="hr-in-code" path="/hash-routing/in-code">
70+
<HrInCodeView />
71+
</Route>
72+
<Route key="redirected" path="/new-path">
73+
<RedirectedView />
74+
</Route>
7075
<Fallback>
7176
<NotFound />
7277
</Fallback>
7378
</div>
7479
</div>
7580
</main>
7681
{#if !rs.home.match}
77-
<RouterTrace />
82+
<div class="table-responsive-lg">
83+
<RouterTrace class="table table-striped table-hover" />
84+
</div>
7885
{/if}
7986
{/snippet}
8087
</Router>
@@ -107,27 +114,4 @@
107114
}
108115
}
109116
}
110-
.breadcrumb {
111-
padding: 0.5em 1em;
112-
background-color: #f8f9fa;
113-
border-bottom: 1px solid #dee2e6;
114-
font-size: 0.9em;
115-
display: flex;
116-
flex-direction: row;
117-
gap: 0.5em;
118-
& > *:after {
119-
content: '>';
120-
flex-grow: 1;
121-
margin-left: 0.5em;
122-
}
123-
& > *:last-child:after {
124-
content: '';
125-
flex-grow: 0;
126-
margin-left: 0;
127-
}
128-
}
129-
:global .bc-active {
130-
font-weight: bold;
131-
text-decoration: underline;
132-
}
133117
</style>

‎demo/src/app.scss‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,3 +2,19 @@
22

33
$bootstrap-icons-font-dir: 'bootstrap-icons/font/fonts';
44
@import 'bootstrap-icons/font/bootstrap-icons';
5+
6+
.router-property {
7+
border-radius: 0.5em;
8+
background-color: var(--bs-gray-200);
9+
padding: 0.1em 0.7em;
10+
}
11+
12+
[data-bs-theme=dark] .router-property {
13+
background-color: var(--bs-gray-dark);
14+
}
15+
16+
@media (prefers-color-scheme: dark) {
17+
.router-property {
18+
background-color: var(--bs-gray-dark);
19+
}
20+
}

‎demo/src/lib/Breadcrumb.svelte‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
<script lang="ts">
2+
import type { HTMLAttributes } from "svelte/elements";
3+
4+
type Props = HTMLAttributes<HTMLElement> & {
5+
divider?: string;
6+
};
7+
8+
let {
9+
divider = ">",
10+
class: cssClass,
11+
children,
12+
...restProps
13+
}: Props = $props();
14+
</script>
15+
16+
<nav
17+
class={["breadcrumb", cssClass]}
18+
style:--bs-breadcrumb-divider={`'${divider}'`}
19+
aria-label="breadcrumb"
20+
{...restProps}
21+
>
22+
<ol class="breadcrumb">
23+
{@render children?.()}
24+
</ol>
25+
</nav>

‎demo/src/lib/BreadcrumbItem.svelte‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<script lang="ts">
2+
import type { HTMLLiAttributes } from "svelte/elements";
3+
4+
type Props = HTMLLiAttributes;
5+
6+
let {
7+
class: cssClass,
8+
children,
9+
...restProps
10+
}: Props = $props();
11+
</script>
12+
13+
<li class={["breadcrumb-item", cssClass]} {...restProps}>
14+
{@render children?.()}
15+
</li>

‎demo/src/lib/CodeSnippet.svelte‎

Lines changed: 32 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
<script lang="ts">
2-
import type { HTMLAttributes } from 'svelte/elements';
2+
import type { ClassValue, HTMLAttributes } from 'svelte/elements';
33
import Highlight, { type LanguageType } from 'svelte-highlight';
4-
import 'svelte-highlight/styles/github.css';
4+
import 'svelte-highlight/styles/atelier-dune-light.css';
5+
// import 'svelte-highlight/styles/github.css';
6+
import { clsx } from 'clsx';
57
68
interface Props extends HTMLAttributes<HTMLDivElement> {
79
language: LanguageType<string>;
@@ -13,6 +15,24 @@
1315
let { language, code, title, copyable = true, class: cssClass, ...restProps }: Props = $props();
1416
1517
let copied = $state(false);
18+
let codeNode = $state<HTMLElement | null>(null);
19+
20+
$effect(() => {
21+
const root = codeNode?.querySelector('.hljs');
22+
if (!root) return;
23+
styleDirectTextChildren(root, 'orphan-text-node');
24+
});
25+
26+
function styleDirectTextChildren(root: Node, cssClass: ClassValue) {
27+
for (const node of root.childNodes) {
28+
if (node.nodeType === Node.TEXT_NODE && node.nodeValue?.trim()) {
29+
const span = document.createElement('span');
30+
span.textContent = node.nodeValue;
31+
span.classList.add(clsx(cssClass));
32+
root.replaceChild(span, node);
33+
}
34+
}
35+
}
1636
1737
async function copyToClipboard() {
1838
try {
@@ -49,37 +69,11 @@
4969
{/if}
5070
</div>
5171
{/if}
52-
<div class="code-snippet-content">
72+
<div bind:this={codeNode} class="code-snippet-content">
5373
<Highlight {language} {code} />
5474
</div>
5575
</div>
5676

57-
<!--
58-
@component
59-
# CodeSnippet
60-
A syntax-highlighted code block with optional title and copy functionality.
61-
62-
## Props
63-
- `language` (LanguageType): The language for syntax highlighting
64-
- `code` (string): The code content to display
65-
- `title` (string, optional): Optional title for the code snippet
66-
- `copyable` (boolean, default: true): Whether to show the copy button
67-
68-
## Usage
69-
```svelte
70-
<script>
71-
import CodeSnippet from './lib/CodeSnippet.svelte';
72-
import typescript from "svelte-highlight/languages/typescript";
73-
</script>
74-
75-
<CodeSnippet
76-
language={typescript}
77-
code="console.log('Hello, world!');"
78-
title="Example"
79-
/>
80-
```
81-
-->
82-
8377
<style>
8478
.code-snippet {
8579
border: 1px solid var(--bs-border-color);
@@ -99,6 +93,10 @@ A syntax-highlighted code block with optional title and copy functionality.
9993
font-size: 0.875rem;
10094
}
10195
96+
:global([data-bs-theme='dark']) .code-snippet-header {
97+
background-color: var(--bs-gray-800);
98+
}
99+
102100
.code-snippet-title {
103101
font-weight: 600;
104102
color: var(--bs-secondary);
@@ -134,8 +132,11 @@ A syntax-highlighted code block with optional title and copy functionality.
134132
/* Dark mode support */
135133
@media (prefers-color-scheme: dark) {
136134
.code-snippet-header {
137-
background-color: var(--bs-dark);
138-
border-bottom-color: var(--bs-secondary);
135+
background-color: var(--bs-gray-800);
139136
}
140137
}
138+
139+
:global .orphan-text-node {
140+
color: var(--bs-body-color);
141+
}
141142
</style>

‎demo/src/lib/DemoBc.svelte‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<script lang="ts">
2+
import { activeBehavior, type RouteStatus } from '@svelte-router/core';
3+
import Breadcrumb from './Breadcrumb.svelte';
4+
import BreadcrumbItem from './BreadcrumbItem.svelte';
5+
6+
type Props = {
7+
rs: Record<string, RouteStatus>;
8+
};
9+
10+
let { rs }: Props = $props();
11+
</script>
12+
13+
<Breadcrumb divider="|" class="ps-3">
14+
<BreadcrumbItem {@attach activeBehavior(rs, { key: 'home', class: ['active', 'bc-active'] })}
15+
>Home</BreadcrumbItem
16+
>
17+
<BreadcrumbItem
18+
{@attach activeBehavior(rs, { key: 'pathRouting', class: ['active', 'bc-active'] })}
19+
>Path Routing</BreadcrumbItem
20+
>
21+
<BreadcrumbItem
22+
{@attach activeBehavior(rs, { key: 'hashRouting', class: ['active', 'bc-active'] })}
23+
>Hash Routing</BreadcrumbItem
24+
>
25+
</Breadcrumb>
26+
27+
<style>
28+
:global .bc-active {
29+
/* font-weight: bold; */
30+
text-decoration: underline;
31+
}
32+
</style>

‎demo/src/lib/NavBar.svelte‎

Lines changed: 21 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,37 @@
11
<script lang="ts">
22
import { Link, LinkContext, Route } from '@svelte-router/core';
33
import logo from '@svelte-router/core/logo64';
4-
import SubNav from './SubNav.svelte';
4+
import SubNav, { type LinkItem } from './SubNav.svelte';
55
import { routingMode } from './hash-routing';
66
import type { HTMLAttributes } from 'svelte/elements';
7+
import ThemeSwitch from './ThemeSwitch.svelte';
78
89
let { ...restProps }: HTMLAttributes<HTMLElement> = $props();
910
1011
const pathRoutingLinks = [
1112
{ text: 'Home', href: '/path-routing' },
1213
{ text: 'Start Demo', href: '/path-routing/demo' }
1314
];
14-
const hashRoutingLinks = [
15+
const hashRoutingLinks: LinkItem[] = [
1516
{ text: 'Home', href: '/hash-routing' },
1617
{
1718
text: 'Start Demo',
1819
href: `#${routingMode === 'multi' ? 'd1=/demo;d2=/demo' : '/demo'}`
19-
}
20+
},
21+
{
22+
text: 'In Code',
23+
href: '/hash-routing/in-code',
24+
activeFor: 'hr-in-code',
25+
activeState: { class: 'active', aria: { 'aria-current': 'page' } }
26+
},
2027
];
2128
</script>
2229

2330
<nav class="navbar navbar-expand-lg bg-primary-subtle" {...restProps}>
2431
<div class="container-fluid">
2532
<Link class="navbar-brand fw-bold" href="/" id="logoLink">
2633
<img src={logo} alt="N-Savant Compass Logo" style:height="1.7em" />
27-
@svelte-router/core
34+
webJose's Svelte Router
2835
</Link>
2936
<button
3037
class="navbar-toggler"
@@ -38,7 +45,7 @@
3845
<span class="navbar-toggler-icon"></span>
3946
</button>
4047
<div class="collapse navbar-collapse" id="navbarNav">
41-
<LinkContext activeState={{ class: 'active', aria: { 'aria-current': 'page' } }}>
48+
<LinkContext activeState={{ class: 'active', aria: { current: 'page' } }}>
4249
<ul class="navbar-nav">
4350
<li class="nav-item">
4451
<Link class="nav-link" activeFor="home" href="/" id="homeLink">Home</Link>
@@ -74,13 +81,22 @@
7481
<li class="nav-item">
7582
<Link class="nav-link" activeFor="pricing" href="/pricing">404</Link>
7683
</li>
84+
<li class="nav-item">
85+
<Link class="nav-link" href="/deprecated-path">Deprecated Link</Link>
86+
</li>
87+
<li class="nav-item">
88+
<Link class="nav-link" activeFor="redirected" href="/new-path">New Link</Link>
89+
</li>
7790
<li class="nav-item">
7891
<Link class="nav-link disabled" href="/disabled" tabindex={-1} aria-disabled="true">
7992
Disabled
8093
</Link>
8194
</li>
8295
</ul>
8396
</LinkContext>
97+
<div class="ms-auto">
98+
<ThemeSwitch />
99+
</div>
84100
</div>
85101
</div>
86102
</nav>

0 commit comments

Comments
 (0)