mirror of https://github.com/sveltejs/svelte
parent
16504d1f52
commit
573a06269b
@ -0,0 +1,7 @@
|
|||||||
|
---
|
||||||
|
title: Introduction
|
||||||
|
---
|
||||||
|
|
||||||
|
You can find the latest Svelte reference documentation at [https://svelte.dev/docs](https://svelte.dev/docs).
|
||||||
|
|
||||||
|
You can learn more about Svelte 5 and other future work on our [roadmap](https://svelte.dev/roadmap).
|
@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"title": "Getting Started"
|
||||||
|
}
|
@ -0,0 +1,14 @@
|
|||||||
|
import { get_docs_data, get_parsed_docs } from '$lib/server/docs/index.js';
|
||||||
|
import { error } from '@sveltejs/kit';
|
||||||
|
import { CONTENT_BASE_PATHS } from '../../../constants';
|
||||||
|
|
||||||
|
export const prerender = true;
|
||||||
|
|
||||||
|
export async function load({ params }) {
|
||||||
|
const slug = 'introduction'; // params.slug
|
||||||
|
const processed_page = await get_parsed_docs(await get_docs_data(CONTENT_BASE_PATHS.DOCS_5), slug);
|
||||||
|
|
||||||
|
if (!processed_page) throw error(404);
|
||||||
|
|
||||||
|
return { page: processed_page };
|
||||||
|
}
|
@ -0,0 +1,7 @@
|
|||||||
|
<script>
|
||||||
|
import Docs from '../[slug]/Docs.svelte';
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<Docs version={5} {data} />
|
@ -1,99 +1,7 @@
|
|||||||
<script>
|
<script>
|
||||||
import { page } from '$app/stores';
|
import Docs from './Docs.svelte';
|
||||||
import { Icon } from '@sveltejs/site-kit/components';
|
|
||||||
import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
|
|
||||||
|
|
||||||
export let data;
|
export let data;
|
||||||
|
|
||||||
$: pages = data.sections.flatMap((section) => section.pages);
|
|
||||||
$: index = pages.findIndex(({ path }) => path === $page.url.pathname);
|
|
||||||
$: prev = pages[index - 1];
|
|
||||||
$: next = pages[index + 1];
|
|
||||||
|
|
||||||
setupDocsHovers();
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<svelte:head>
|
<Docs version={4} {data} />
|
||||||
<title>{data.page?.title} • Docs • Svelte</title>
|
|
||||||
|
|
||||||
<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
|
|
||||||
<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
|
|
||||||
<meta name="Description" content="{data.page.title} • Svelte documentation" />
|
|
||||||
</svelte:head>
|
|
||||||
|
|
||||||
<div class="text" id="docs-content">
|
|
||||||
<a
|
|
||||||
class="edit"
|
|
||||||
href="https://github.com/sveltejs/svelte/edit/master/documentation/docs/{data.page.file}"
|
|
||||||
>
|
|
||||||
<Icon size={50} name="edit" /> Edit this page on GitHub
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<DocsOnThisPage details={data.page} />
|
|
||||||
|
|
||||||
{@html data.page.content}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="controls">
|
|
||||||
<div>
|
|
||||||
<span class:faded={!prev}>previous</span>
|
|
||||||
|
|
||||||
{#if prev}
|
|
||||||
<a href={prev.path}>{prev.title}</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div>
|
|
||||||
<span class:faded={!next}>next</span>
|
|
||||||
{#if next}
|
|
||||||
<a href={next.path}>{next.title}</a>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
.edit {
|
|
||||||
position: relative;
|
|
||||||
font-size: 1.4rem;
|
|
||||||
line-height: 1;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.edit :global(.icon) {
|
|
||||||
position: relative;
|
|
||||||
top: -0.1rem;
|
|
||||||
left: 0.3rem;
|
|
||||||
width: 1.4rem;
|
|
||||||
height: 1.4rem;
|
|
||||||
margin-right: 0.5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls {
|
|
||||||
max-width: calc(var(--sk-line-max-width) + 1rem);
|
|
||||||
border-top: 1px solid var(--sk-back-4);
|
|
||||||
padding: 1rem 0 0 0;
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: 1fr 1fr;
|
|
||||||
margin: 6rem 0 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls > :first-child {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls > :last-child {
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls span {
|
|
||||||
display: block;
|
|
||||||
font-size: 1.2rem;
|
|
||||||
text-transform: uppercase;
|
|
||||||
font-weight: 600;
|
|
||||||
color: var(--sk-text-3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.controls span.faded {
|
|
||||||
opacity: 0.4;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
@ -0,0 +1,53 @@
|
|||||||
|
<script>
|
||||||
|
import { Icon } from '@sveltejs/site-kit/components';
|
||||||
|
import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
|
||||||
|
import Pagination from './Pagination.svelte';
|
||||||
|
|
||||||
|
export let data;
|
||||||
|
export let version;
|
||||||
|
|
||||||
|
setupDocsHovers();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<svelte:head>
|
||||||
|
<title>{data.page?.title} • Docs • Svelte</title>
|
||||||
|
|
||||||
|
<meta name="twitter:title" content="{data.page.title} • Docs • Svelte" />
|
||||||
|
<meta name="twitter:description" content="{data.page.title} • Svelte documentation" />
|
||||||
|
<meta name="Description" content="{data.page.title} • Svelte documentation" />
|
||||||
|
</svelte:head>
|
||||||
|
|
||||||
|
<div class="text" id="docs-content">
|
||||||
|
<a
|
||||||
|
class="edit"
|
||||||
|
href="https://github.com/sveltejs/svelte/edit/master/documentation/docs/{version}/{data.page.file}"
|
||||||
|
>
|
||||||
|
<Icon size={50} name="edit" /> Edit this page on GitHub
|
||||||
|
</a>
|
||||||
|
|
||||||
|
<DocsOnThisPage details={data.page} />
|
||||||
|
|
||||||
|
{@html data.page.content}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{#if version !== 5}
|
||||||
|
<Pagination pages={data.sections.flatMap((section) => section.pages)} />
|
||||||
|
{/if}
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.edit {
|
||||||
|
position: relative;
|
||||||
|
font-size: 1.4rem;
|
||||||
|
line-height: 1;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.edit :global(.icon) {
|
||||||
|
position: relative;
|
||||||
|
top: -0.1rem;
|
||||||
|
left: 0.3rem;
|
||||||
|
width: 1.4rem;
|
||||||
|
height: 1.4rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
}
|
||||||
|
</style>
|
@ -0,0 +1,58 @@
|
|||||||
|
|
||||||
|
<script>
|
||||||
|
import { page } from '$app/stores';
|
||||||
|
|
||||||
|
export let pages;
|
||||||
|
|
||||||
|
$: index = pages.findIndex(({ path }) => path === $page.url.pathname);
|
||||||
|
$: prev = pages[index - 1];
|
||||||
|
$: next = pages[index + 1];
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<div class="controls">
|
||||||
|
<div>
|
||||||
|
<span class:faded={!prev}>previous</span>
|
||||||
|
|
||||||
|
{#if prev}
|
||||||
|
<a href={prev.path}>{prev.title}</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<span class:faded={!next}>next</span>
|
||||||
|
{#if next}
|
||||||
|
<a href={next.path}>{next.title}</a>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<style>
|
||||||
|
.controls {
|
||||||
|
max-width: calc(var(--sk-line-max-width) + 1rem);
|
||||||
|
border-top: 1px solid var(--sk-back-4);
|
||||||
|
padding: 1rem 0 0 0;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1fr 1fr;
|
||||||
|
margin: 6rem 0 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls > :first-child {
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls > :last-child {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls span {
|
||||||
|
display: block;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
text-transform: uppercase;
|
||||||
|
font-weight: 600;
|
||||||
|
color: var(--sk-text-3);
|
||||||
|
}
|
||||||
|
|
||||||
|
.controls span.faded {
|
||||||
|
opacity: 0.4;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in new issue