mirror of https://github.com/sveltejs/svelte
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 finallypull/8731/head
Puru Vijay
2 years ago
committed by
GitHub
parent
ad9a672171
commit
aa5bb4a3db
@ -0,0 +1,11 @@
|
|||||||
|
/// <reference types="@sveltejs/kit" />
|
||||||
|
|
||||||
|
declare global {
|
||||||
|
namespace App {
|
||||||
|
interface PageData {
|
||||||
|
nav_title: string;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export {};
|
||||||
@ -0,0 +1,74 @@
|
|||||||
|
import { get_blog_data, get_blog_list } from '$lib/server/blog/index.js';
|
||||||
|
import { get_docs_data, get_docs_list } from '$lib/server/docs/index.js';
|
||||||
|
import { get_examples_data, get_examples_list } from '$lib/server/examples/index.js';
|
||||||
|
import { get_tutorial_data, get_tutorial_list } from '$lib/server/tutorial/index.js';
|
||||||
|
|
||||||
|
/** @param {URL} url */
|
||||||
|
function get_nav_title(url) {
|
||||||
|
const list = new Map([
|
||||||
|
[/^docs/, 'Docs'],
|
||||||
|
[/^repl/, 'REPL'],
|
||||||
|
[/^blog/, 'Blog'],
|
||||||
|
[/^faq/, 'FAQ'],
|
||||||
|
[/^tutorial/, 'Tutorial'],
|
||||||
|
[/^search/, 'Search'],
|
||||||
|
[/^examples/, 'Examples']
|
||||||
|
]);
|
||||||
|
|
||||||
|
for (const [regex, title] of list) {
|
||||||
|
if (regex.test(url.pathname.replace(/^\/(.+)/, '$1'))) {
|
||||||
|
return title;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
|
async function get_nav_context_list() {
|
||||||
|
const docs_list = get_docs_list(get_docs_data());
|
||||||
|
const processed_docs_list = docs_list.map(({ title, pages }) => ({
|
||||||
|
title,
|
||||||
|
sections: pages.map(({ title, path }) => ({ title, path }))
|
||||||
|
}));
|
||||||
|
|
||||||
|
const blog_list = get_blog_list(get_blog_data());
|
||||||
|
const processed_blog_list = [
|
||||||
|
{
|
||||||
|
title: 'Blog',
|
||||||
|
sections: blog_list.map(({ title, slug, date }) => ({
|
||||||
|
title,
|
||||||
|
path: '/blog/' + slug,
|
||||||
|
// Put a NEW badge on blog posts that are less than 14 days old
|
||||||
|
badge: (+new Date() - +new Date(date)) / (1000 * 60 * 60 * 24) < 14 ? 'NEW' : undefined
|
||||||
|
}))
|
||||||
|
}
|
||||||
|
];
|
||||||
|
|
||||||
|
const tutorial_list = get_tutorial_list(get_tutorial_data());
|
||||||
|
const processed_tutorial_list = tutorial_list.map(({ title, tutorials }) => ({
|
||||||
|
title,
|
||||||
|
sections: tutorials.map(({ title, slug }) => ({ title, path: '/tutorial/' + slug }))
|
||||||
|
}));
|
||||||
|
|
||||||
|
const examples_list = get_examples_list(get_examples_data());
|
||||||
|
const processed_examples_list = examples_list
|
||||||
|
.map(({ title, examples }) => ({
|
||||||
|
title,
|
||||||
|
sections: examples.map(({ title, slug }) => ({ title, path: '/examples/' + slug }))
|
||||||
|
}))
|
||||||
|
.filter(({ title }) => title !== 'Embeds');
|
||||||
|
|
||||||
|
return {
|
||||||
|
docs: processed_docs_list,
|
||||||
|
blog: processed_blog_list,
|
||||||
|
tutorial: processed_tutorial_list,
|
||||||
|
examples: processed_examples_list
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
export const load = async ({ url }) => {
|
||||||
|
return {
|
||||||
|
nav_title: get_nav_title(url),
|
||||||
|
nav_context_list: get_nav_context_list()
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -1,162 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { page } from '$app/stores';
|
|
||||||
import { SkipLink } from '@sveltejs/site-kit/components';
|
|
||||||
|
|
||||||
/** @type {ReturnType<typeof import('$lib/server/docs').get_docs_list>}*/
|
|
||||||
export let contents = [];
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<SkipLink href="#docs-content">Skip to documentation</SkipLink>
|
|
||||||
|
|
||||||
<!-- svelte-ignore a11y-no-noninteractive-tabindex -->
|
|
||||||
<nav aria-label="Docs">
|
|
||||||
<ul class="sidebar">
|
|
||||||
{#each contents as section}
|
|
||||||
<li>
|
|
||||||
<span class="section">
|
|
||||||
{section.title}
|
|
||||||
</span>
|
|
||||||
|
|
||||||
<ul>
|
|
||||||
{#each section.pages as { title, path }}
|
|
||||||
<li>
|
|
||||||
<a
|
|
||||||
data-sveltekit-preload-data
|
|
||||||
class="page"
|
|
||||||
class:active={path === $page.url.pathname}
|
|
||||||
href={path}
|
|
||||||
>
|
|
||||||
{title}
|
|
||||||
</a>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
nav {
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
color: var(--sk-text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.sidebar {
|
|
||||||
padding: var(--sk-page-padding-top) 0 var(--sk-page-padding-top) 3.2rem;
|
|
||||||
font-family: var(--sk-font);
|
|
||||||
height: 100%;
|
|
||||||
bottom: auto;
|
|
||||||
width: 100%;
|
|
||||||
columns: 2;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
display: block;
|
|
||||||
line-height: 1.2;
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: 4rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
li:last-child {
|
|
||||||
margin-bottom: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
position: relative;
|
|
||||||
transition: color 0.2s;
|
|
||||||
border-bottom: none;
|
|
||||||
padding: 0;
|
|
||||||
color: var(--sk-text-3);
|
|
||||||
user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.section {
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 0.8rem;
|
|
||||||
font-size: var(--sk-text-xs);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.1em;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
display: block;
|
|
||||||
font-size: 1.6rem;
|
|
||||||
font-family: var(--sk-font);
|
|
||||||
padding-bottom: 0.6em;
|
|
||||||
}
|
|
||||||
|
|
||||||
.active {
|
|
||||||
font-weight: 700;
|
|
||||||
color: var(--sk-text-1);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul ul,
|
|
||||||
ul ul li {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 600px) {
|
|
||||||
.sidebar {
|
|
||||||
columns: 2;
|
|
||||||
padding-left: var(--sk-page-padding-side);
|
|
||||||
padding-right: var(--sk-page-padding-side);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 700px) {
|
|
||||||
.sidebar {
|
|
||||||
columns: 3;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 832px) {
|
|
||||||
.sidebar {
|
|
||||||
columns: 1;
|
|
||||||
padding-left: 3.2rem;
|
|
||||||
padding-right: 0;
|
|
||||||
width: var(--sidebar-menu-width);
|
|
||||||
margin: 0 0 0 auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
nav {
|
|
||||||
min-height: calc(100vh - var(--ts-toggle-height));
|
|
||||||
}
|
|
||||||
|
|
||||||
nav::after {
|
|
||||||
content: '';
|
|
||||||
position: fixed;
|
|
||||||
left: 0;
|
|
||||||
bottom: var(--ts-toggle-height);
|
|
||||||
width: calc(var(--sidebar-width) - 1px);
|
|
||||||
height: 2em;
|
|
||||||
pointer-events: none;
|
|
||||||
background: linear-gradient(
|
|
||||||
to bottom,
|
|
||||||
hsla(var(--sk-back-3-hsl), 0) 0%,
|
|
||||||
hsla(var(--sk-back-3-hsl), 0.7) 50%,
|
|
||||||
hsl(var(--sk-back-3-hsl)) 100%
|
|
||||||
);
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: calc(100% - 3rem) 100%; /* cover text but not scrollbar */
|
|
||||||
}
|
|
||||||
|
|
||||||
.active::after {
|
|
||||||
--size: 1rem;
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: var(--size);
|
|
||||||
height: var(--size);
|
|
||||||
top: -0.1rem;
|
|
||||||
right: calc(-0.5 * var(--size));
|
|
||||||
background-color: var(--sk-back-1);
|
|
||||||
border-left: 1px solid var(--sk-back-5);
|
|
||||||
border-bottom: 1px solid var(--sk-back-5);
|
|
||||||
transform: translateY(0.2rem) rotate(45deg);
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
import { DocsMobileNav } from '@sveltejs/site-kit/docs';
|
||||||
|
|
||||||
|
export const load = async ({ data, parent }) => {
|
||||||
|
const contents = await parent();
|
||||||
|
|
||||||
|
return {
|
||||||
|
mobile_nav_start: {
|
||||||
|
label: 'Contents',
|
||||||
|
icon: 'contents',
|
||||||
|
component: DocsMobileNav,
|
||||||
|
props: {
|
||||||
|
contents: contents.sections,
|
||||||
|
pageContents: data.page
|
||||||
|
}
|
||||||
|
},
|
||||||
|
...data
|
||||||
|
};
|
||||||
|
};
|
||||||
@ -1,163 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { afterNavigate } from '$app/navigation';
|
|
||||||
import { base } from '$app/paths';
|
|
||||||
import { page } from '$app/stores';
|
|
||||||
import { afterUpdate, onMount } from 'svelte';
|
|
||||||
|
|
||||||
/** @type {import('./$types').PageData['page']} */
|
|
||||||
export let details;
|
|
||||||
|
|
||||||
/** @type {string} */
|
|
||||||
let hash = '';
|
|
||||||
|
|
||||||
/** @type {number} */
|
|
||||||
let height = 0;
|
|
||||||
|
|
||||||
/** @type {HTMLElement} */
|
|
||||||
let content;
|
|
||||||
|
|
||||||
/** @type {NodeListOf<HTMLElement>} */
|
|
||||||
let headings;
|
|
||||||
|
|
||||||
/** @type {number[]} */
|
|
||||||
let positions = [];
|
|
||||||
|
|
||||||
/** @type {HTMLElement} */
|
|
||||||
let containerEl;
|
|
||||||
|
|
||||||
let show_contents = false;
|
|
||||||
|
|
||||||
onMount(async () => {
|
|
||||||
await document.fonts.ready;
|
|
||||||
update();
|
|
||||||
highlight();
|
|
||||||
});
|
|
||||||
|
|
||||||
afterNavigate(() => {
|
|
||||||
update();
|
|
||||||
highlight();
|
|
||||||
});
|
|
||||||
|
|
||||||
function update() {
|
|
||||||
content = document.querySelector('.content');
|
|
||||||
const { top } = content.getBoundingClientRect();
|
|
||||||
headings = content.querySelectorAll('h2[id]');
|
|
||||||
positions = Array.from(headings).map((heading) => {
|
|
||||||
const style = getComputedStyle(heading);
|
|
||||||
return heading.getBoundingClientRect().top - parseFloat(style.scrollMarginTop) - top;
|
|
||||||
});
|
|
||||||
height = window.innerHeight;
|
|
||||||
}
|
|
||||||
|
|
||||||
function highlight() {
|
|
||||||
const { top, bottom } = content.getBoundingClientRect();
|
|
||||||
let i = headings.length;
|
|
||||||
while (i--) {
|
|
||||||
if (bottom - height < 50 || positions[i] + top < 100) {
|
|
||||||
const heading = headings[i];
|
|
||||||
hash = `#${heading.id}`;
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
hash = '';
|
|
||||||
}
|
|
||||||
|
|
||||||
/** @param {URL} url */
|
|
||||||
function select(url) {
|
|
||||||
// belt...
|
|
||||||
setTimeout(() => {
|
|
||||||
hash = url.hash;
|
|
||||||
});
|
|
||||||
// ...and braces
|
|
||||||
window.addEventListener(
|
|
||||||
'scroll',
|
|
||||||
() => {
|
|
||||||
hash = url.hash;
|
|
||||||
},
|
|
||||||
{ once: true }
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
afterUpdate(() => {
|
|
||||||
// bit of a hack — prevent sidebar scrolling if
|
|
||||||
// TOC is open on mobile, or scroll came from within sidebar
|
|
||||||
if (show_contents && window.innerWidth < 832) return;
|
|
||||||
const active = containerEl.querySelector('.active');
|
|
||||||
if (active) {
|
|
||||||
const { top, bottom } = active.getBoundingClientRect();
|
|
||||||
const min = 100;
|
|
||||||
const max = window.innerHeight - 100;
|
|
||||||
|
|
||||||
if (top > max) {
|
|
||||||
containerEl.scrollBy({
|
|
||||||
top: top - max,
|
|
||||||
left: 0,
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
} else if (bottom < min) {
|
|
||||||
containerEl.scrollBy({
|
|
||||||
top: bottom - min,
|
|
||||||
left: 0,
|
|
||||||
behavior: 'smooth'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<svelte:window on:scroll={highlight} on:resize={update} on:hashchange={() => select($page.url)} />
|
|
||||||
|
|
||||||
<aside class="on-this-page" bind:this={containerEl}>
|
|
||||||
<h2>On this page</h2>
|
|
||||||
<nav>
|
|
||||||
<ul>
|
|
||||||
<li><a href="{base}/docs/{details.slug}" class:active={hash === ''}>{details.title}</a></li>
|
|
||||||
{#each details.sections as { title, slug }}
|
|
||||||
<li><a href={`#${slug}`} class:active={`#${slug}` === hash}>{title}</a></li>
|
|
||||||
{/each}
|
|
||||||
</ul>
|
|
||||||
</nav>
|
|
||||||
</aside>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.on-this-page {
|
|
||||||
display: var(--on-this-page-display);
|
|
||||||
position: fixed;
|
|
||||||
padding: var(--sk-page-padding-top) var(--sk-page-padding-side) 0 0;
|
|
||||||
width: min(280px, calc(var(--sidebar-width) - var(--sk-page-padding-side)));
|
|
||||||
height: calc(100vh - var(--sk-nav-height) - var(--sk-page-padding-top));
|
|
||||||
top: var(--sk-nav-height);
|
|
||||||
left: calc(100vw - (var(--sidebar-width)));
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
h2 {
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-size: 1.4rem !important;
|
|
||||||
font-weight: 400;
|
|
||||||
margin: 0 0 1rem 0 !important;
|
|
||||||
padding: 0 0 0 0.6rem;
|
|
||||||
color: var(--sk-text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: 0.3rem 0.5rem;
|
|
||||||
color: var(--sk-text-3);
|
|
||||||
border-left: 2px solid transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
a:hover {
|
|
||||||
text-decoration: none;
|
|
||||||
background: var(--sk-back-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
a.active {
|
|
||||||
background: var(--sk-back-3);
|
|
||||||
border-left-color: var(--sk-theme-1);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in new issue