Skip to content

Commit 8115c58

Browse files
dummdidummdummdidumm
committed
chore: bump site-kit, use new components
use shell component, clean up css
1 parent 00f902e commit 8115c58

File tree

5 files changed

+72
-96
lines changed

5 files changed

+72
-96
lines changed

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
{
22
"name": "learn.svelte.dev",
33
"version": "0.0.1",
4+
"private": true,
45
"scripts": {
56
"dev": "vite dev",
67
"build": "node scripts/create-common-bundle && vite build",
@@ -15,7 +16,7 @@
1516
"@playwright/test": "^1.31.2",
1617
"@sveltejs/adapter-vercel": "2.3.1",
1718
"@sveltejs/kit": "^1.13.0",
18-
"@sveltejs/site-kit": "^3.2.2",
19+
"@sveltejs/site-kit": "^3.3.6",
1920
"@types/diff": "^5.0.2",
2021
"@types/marked": "^4.0.8",
2122
"@types/prismjs": "^1.26.0",

‎pnpm-lock.yaml‎

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

‎src/routes/+layout.svelte‎

Lines changed: 26 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -1,50 +1,38 @@
11
<script>
2+
import { Icon, Nav, NavItem, Shell } from '@sveltejs/site-kit/components';
23
import '@sveltejs/site-kit/styles/index.css';
34
import '../app.css';
4-
import { page, navigating } from '$app/stores';
5-
import Icon from '@sveltejs/site-kit/components/Icon.svelte';
6-
import Icons from '@sveltejs/site-kit/components/Icons.svelte';
7-
import Nav from '@sveltejs/site-kit/components/Nav.svelte';
8-
import NavItem from '@sveltejs/site-kit/components/NavItem.svelte';
9-
import SkipLink from '@sveltejs/site-kit/components/SkipLink.svelte';
10-
import PreloadingIndicator from '@sveltejs/site-kit/components/PreloadingIndicator.svelte';
115
</script>
126

13-
<Icons />
7+
<Shell>
8+
<Nav slot="top-nav" logo="/svelte-logo.svg">
9+
<svelte:fragment slot="nav-center">
10+
<strong class="large">Work in progress. Here be dragons!</strong>
11+
<!-- <NavItem href="/tutorial">Tutorial</NavItem>
12+
<NavItem href="/docs">Docs</NavItem>
13+
<NavItem href="/examples">Examples</NavItem>
14+
<NavItem href="/repl">REPL</NavItem>
15+
<NavItem href="/blog">Blog</NavItem>
16+
<NavItem href="/faq">FAQ</NavItem> -->
17+
</svelte:fragment>
1418

15-
{#if $navigating && $navigating.to}
16-
<PreloadingIndicator />
17-
{/if}
19+
<svelte:fragment slot="nav-right">
20+
<NavItem external="https://kit.svelte.dev">SvelteKit</NavItem>
1821

19-
<SkipLink href="#main" />
22+
<NavItem external="https://svelte.dev/chat" title="Discord Chat">
23+
<span slot="small">Discord</span>
24+
<Icon name="message-square" />
25+
</NavItem>
2026

21-
<Nav {page} logo="/svelte-logo.svg">
22-
<svelte:fragment slot="nav-center">
23-
<strong class="large">Work in progress. Here be dragons!</strong>
24-
<!-- <NavItem href="/tutorial">Tutorial</NavItem>
25-
<NavItem href="/docs">Docs</NavItem>
26-
<NavItem href="/examples">Examples</NavItem>
27-
<NavItem href="/repl">REPL</NavItem>
28-
<NavItem href="/blog">Blog</NavItem>
29-
<NavItem href="/faq">FAQ</NavItem> -->
30-
</svelte:fragment>
27+
<NavItem external="https://github.com/sveltejs/svelte" title="GitHub Repo">
28+
<span slot="small">GitHub</span>
29+
<Icon name="github" />
30+
</NavItem>
31+
</svelte:fragment>
32+
</Nav>
3133

32-
<svelte:fragment slot="nav-right">
33-
<NavItem external="https://kit.svelte.dev">SvelteKit</NavItem>
34-
35-
<NavItem external="https://svelte.dev/chat" title="Discord Chat">
36-
<span class="small">Discord</span>
37-
<span class="large"><Icon name="message-square" /></span>
38-
</NavItem>
39-
40-
<NavItem external="https://github.com/sveltejs/svelte" title="GitHub Repo">
41-
<span class="small">GitHub</span>
42-
<span class="large"><Icon name="github" /></span>
43-
</NavItem>
44-
</svelte:fragment>
45-
</Nav>
46-
47-
<main id="main"><slot /></main>
34+
<slot />
35+
</Shell>
4836

4937
<style>
5038
:global(body) {
@@ -53,27 +41,11 @@
5341
min-height: 100dvh;
5442
}
5543
56-
/* TODO when we remove the launch banner, we can remove this override */
57-
:global(body > div > nav) {
58-
top: 0 !important;
59-
}
60-
61-
main {
62-
width: 100%;
63-
height: calc(100dvh - var(--nav-h));
64-
position: relative;
65-
top: var(--nav-h);
66-
}
67-
6844
.large {
6945
display: none;
7046
}
7147
7248
@media (min-width: 800px) {
73-
.small {
74-
display: none;
75-
}
76-
7749
.large {
7850
display: inline;
7951
}

‎src/routes/tutorial/[slug]/+page.svelte‎

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,24 +1,24 @@
11
<script>
2-
import Output from './Output.svelte';
32
import { afterNavigate, beforeNavigate } from '$app/navigation';
4-
import ContextMenu from './filetree/ContextMenu.svelte';
5-
import Filetree from './filetree/Filetree.svelte';
63
import { SplitPane } from '@rich_harris/svelte-split-pane';
7-
import Icon from '@sveltejs/site-kit/components/Icon.svelte';
4+
import { Icon } from '@sveltejs/site-kit/components';
5+
import { reset } from './adapter.js';
86
import Editor from './Editor.svelte';
7+
import ContextMenu from './filetree/ContextMenu.svelte';
8+
import Filetree from './filetree/Filetree.svelte';
99
import ImageViewer from './ImageViewer.svelte';
10+
import Output from './Output.svelte';
1011
import ScreenToggle from './ScreenToggle.svelte';
1112
import Sidebar from './Sidebar.svelte';
1213
import {
14+
create_directories,
15+
creating,
1316
files,
1417
reset_files,
15-
selected_name,
1618
selected_file,
17-
solution,
18-
create_directories,
19-
creating
19+
selected_name,
20+
solution
2021
} from './state.js';
21-
import { reset } from './adapter.js';
2222
2323
export let data;
2424
@@ -264,7 +264,7 @@
264264
.container {
265265
display: flex;
266266
flex-direction: column;
267-
height: 100%;
267+
height: calc(100dvh - var(--sk-nav-height));
268268
/** necessary for innerWidth to be correct, so we can determine `mobile` */
269269
width: 100vw;
270270
overflow: hidden;

‎src/routes/tutorial/[slug]/Menu.svelte‎

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,10 @@
11
<script>
22
import { page } from '$app/stores';
3-
import { slide } from 'svelte/transition';
43
import arrow from '$lib/icons/arrow.svg';
5-
6-
import Icon from '@sveltejs/site-kit/components/Icon.svelte';
4+
import { slide } from 'svelte/transition';
75
import { browser } from '$app/environment';
86
import { afterNavigate } from '$app/navigation';
7+
import { Icon } from '@sveltejs/site-kit/components';
98
import { tick } from 'svelte';
109
1110
/** @type {import('$lib/types').PartStub[]}*/

0 commit comments

Comments
 (0)