Skip to content

Commit aa5bb4a

Browse files
authored
feat: Better docs nav (#8605)
* DocsNav * Push * Nav title on each page * Install jridgewell sourcemap codec. Why it breaking suddenly * Use theme store * Use $nav_title * use $page.data.nav_title * Disable global prerendering * Fix Suppprters section * use new method * Initially hidden nav functionality * Minor fixes * Simplify into one single nav * Accomodate to the bottom nav * Minor fixes * nit * Add selected to other pages as well * New way of passing to navbar * Code cleanup * Directly pass list instead of components * 14 days * Fix comment * Discord icon * Bump site-kit finally
1 parent ad9a672 commit aa5bb4a

File tree

22 files changed

+184
-418
lines changed

22 files changed

+184
-418
lines changed

documentation/docs/02-template-syntax/01-svelte-components.md

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,8 +36,6 @@ Svelte uses the `export` keyword to mark a variable declaration as a _property_
3636
</script>
3737
```
3838

39-
---
40-
4139
You can specify a default initial value for a prop. It will be used if the component's consumer doesn't specify the prop on the component (or if its initial value is `undefined`) when instantiating the component. Note that if the values of props are subsequently updated, then any prop whose value is not specified will be set to `undefined` (rather than its initial value).
4240

4341
In development mode (see the [compiler options](/docs/svelte-compiler#svelte-compile)), a warning will be printed if no default initial value is provided and the consumer does not specify a value. To squelch this warning, ensure that a default initial value is specified, even if it is `undefined`.
@@ -130,8 +128,6 @@ Svelte's `<script>` blocks are run only when the component is created, so assign
130128

131129
### 3. `$:` marks a statement as reactive
132130

133-
---
134-
135131
Any top-level statement (i.e. not inside a block or a function) can be made reactive by prefixing it with the `$:` [JS label syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/label). Reactive statements run after other script code and before the component markup is rendered, whenever the values that they depend on have changed.
136132

137133
```svelte

pnpm-lock.yaml

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

sites/svelte.dev/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,7 @@
3030
"@resvg/resvg-js": "^2.4.1",
3131
"@sveltejs/adapter-vercel": "^3.0.0",
3232
"@sveltejs/kit": "^1.20.0",
33-
"@sveltejs/site-kit": "^5.2.1",
33+
"@sveltejs/site-kit": "6.0.0-next.0",
3434
"@sveltejs/vite-plugin-svelte": "^2.4.1",
3535
"@types/marked": "^5.0.0",
3636
"@types/node": "^20.2.5",

sites/svelte.dev/src/global.d.ts

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/// <reference types="@sveltejs/kit" />
2+
3+
declare global {
4+
namespace App {
5+
interface PageData {
6+
nav_title: string;
7+
}
8+
}
9+
}
10+
11+
export {};

sites/svelte.dev/src/lib/components/ReplWidget.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { browser } from '$app/environment';
33
import { process_example } from '$lib/utils/examples';
44
import Repl from '@sveltejs/repl';
5-
import { theme } from '@sveltejs/site-kit/components';
5+
import { theme } from '@sveltejs/site-kit/stores';
66
import { onMount } from 'svelte';
77
88
export let version = '3';

sites/svelte.dev/src/lib/components/ScreenToggle.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
<style>
1515
.toggle {
1616
position: fixed;
17-
bottom: 0;
17+
bottom: var(--sk-nav-height);
1818
width: 100%;
1919
height: 4.6rem;
2020
display: flex;

sites/svelte.dev/src/lib/server/blog/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
// @ts-check
2-
import { modules } from '$lib/generated/type-info';
2+
import { modules } from '$lib/generated/type-info.js';
33
import fs from 'node:fs';
44
import { CONTENT_BASE_PATHS } from '../../../constants.js';
55
import { extract_frontmatter } from '../markdown/index.js';

sites/svelte.dev/src/lib/server/docs/index.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import { base as app_base } from '$app/paths';
2-
import { modules } from '$lib/generated/type-info';
2+
import { modules } from '$lib/generated/type-info.js';
33
import fs from 'node:fs';
44
import { CONTENT_BASE_PATHS } from '../../../constants.js';
55
import {

sites/svelte.dev/src/routes/(authed)/repl/[id]/+page.svelte

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
import { browser } from '$app/environment';
33
import { afterNavigate, goto } from '$app/navigation';
44
import Repl from '@sveltejs/repl';
5-
import { theme } from '@sveltejs/site-kit/components';
5+
import { theme } from '@sveltejs/site-kit/stores';
66
import { onMount } from 'svelte';
77
import { mapbox_setup } from '../../../../config.js';
88
import AppControls from './AppControls.svelte';
Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
import { get_blog_data, get_blog_list } from '$lib/server/blog/index.js';
2+
import { get_docs_data, get_docs_list } from '$lib/server/docs/index.js';
3+
import { get_examples_data, get_examples_list } from '$lib/server/examples/index.js';
4+
import { get_tutorial_data, get_tutorial_list } from '$lib/server/tutorial/index.js';
5+
6+
/** @param {URL} url */
7+
function get_nav_title(url) {
8+
const list = new Map([
9+
[/^docs/, 'Docs'],
10+
[/^repl/, 'REPL'],
11+
[/^blog/, 'Blog'],
12+
[/^faq/, 'FAQ'],
13+
[/^tutorial/, 'Tutorial'],
14+
[/^search/, 'Search'],
15+
[/^examples/, 'Examples']
16+
]);
17+
18+
for (const [regex, title] of list) {
19+
if (regex.test(url.pathname.replace(/^\/(.+)/, '$1'))) {
20+
return title;
21+
}
22+
}
23+
24+
return '';
25+
}
26+
27+
async function get_nav_context_list() {
28+
const docs_list = get_docs_list(get_docs_data());
29+
const processed_docs_list = docs_list.map(({ title, pages }) => ({
30+
title,
31+
sections: pages.map(({ title, path }) => ({ title, path }))
32+
}));
33+
34+
const blog_list = get_blog_list(get_blog_data());
35+
const processed_blog_list = [
36+
{
37+
title: 'Blog',
38+
sections: blog_list.map(({ title, slug, date }) => ({
39+
title,
40+
path: '/blog/' + slug,
41+
// Put a NEW badge on blog posts that are less than 14 days old
42+
badge: (+new Date() - +new Date(date)) / (1000 * 60 * 60 * 24) < 14 ? 'NEW' : undefined
43+
}))
44+
}
45+
];
46+
47+
const tutorial_list = get_tutorial_list(get_tutorial_data());
48+
const processed_tutorial_list = tutorial_list.map(({ title, tutorials }) => ({
49+
title,
50+
sections: tutorials.map(({ title, slug }) => ({ title, path: '/tutorial/' + slug }))
51+
}));
52+
53+
const examples_list = get_examples_list(get_examples_data());
54+
const processed_examples_list = examples_list
55+
.map(({ title, examples }) => ({
56+
title,
57+
sections: examples.map(({ title, slug }) => ({ title, path: '/examples/' + slug }))
58+
}))
59+
.filter(({ title }) => title !== 'Embeds');
60+
61+
return {
62+
docs: processed_docs_list,
63+
blog: processed_blog_list,
64+
tutorial: processed_tutorial_list,
65+
examples: processed_examples_list
66+
};
67+
}
68+
69+
export const load = async ({ url }) => {
70+
return {
71+
nav_title: get_nav_title(url),
72+
nav_context_list: get_nav_context_list()
73+
};
74+
};

0 commit comments

Comments
 (0)