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>
|
||||
import { page } from '$app/stores';
|
||||
import { Icon } from '@sveltejs/site-kit/components';
|
||||
import { DocsOnThisPage, setupDocsHovers } from '@sveltejs/site-kit/docs';
|
||||
import Docs from './Docs.svelte';
|
||||
|
||||
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>
|
||||
|
||||
<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/{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>
|
||||
<Docs version={4} {data} />
|
||||
|
@ -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