bring content across (#4)

* bring content across * WIP * docs mostly working * avoid prerendering stuff * hmm
sveltejs · Jun 11, 2024 · dadee6a · dadee6a
1 parent 4959f13
commit dadee6a
Show file tree

Hide file tree

Showing 59 changed files with 472 additions and 362 deletions.
diff --git a/apps/svelte.dev/src/constants.js b/apps/svelte.dev/src/constants.js
@@ -1,4 +1,4 @@
-export const CONTENT_BASE = '../../documentation';
+export const CONTENT_BASE = '../../content';
 
 /** All the paths are relative to the project root when being run on server or built */
 export const CONTENT_BASE_PATHS = {

diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/01-introduction/01-overview.md b/apps/svelte.dev/src/lib/content/docs/svelte/01-introduction/01-overview.md
@@ -0,0 +1,15 @@
+---
+title: Overview
+---
+
+- Short intro to what Svelte is and why it's the best ever
+- A few code examples to have a very rough understanding of how Svelte code looks like
+- Jump off points to tutorial, SvelteKit etc
+
+## One
+
+TODO
+
+## Two
+
+TODO
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/01-introduction/02-getting-started.md b/apps/svelte.dev/src/lib/content/docs/svelte/01-introduction/02-getting-started.md
@@ -0,0 +1,8 @@
+---
+title: Getting started
+---
+
+- `npm create svelte@latest`, describe that it scaffolds SvelteKit project
+- `npm create vite@latest`, describe that it scaffolds Svelte SPA powered by Vite
+- mention `svelte-add`
+- Jump off points to tutorial, SvelteKit etc
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/01-introduction/index.md b/apps/svelte.dev/src/lib/content/docs/svelte/01-introduction/index.md
@@ -0,0 +1,3 @@
+---
+title: Introduction
+---
diff --git a/...dev/src/lib/content/docs/svelte/02-template-syntax/01-component-fundamentals.md b/...dev/src/lib/content/docs/svelte/02-template-syntax/01-component-fundamentals.md
@@ -0,0 +1,6 @@
+---
+title: Component fundamentals
+---
+
+- script (module) / template / style (rough overview)
+- `$props` / `$state` (in the context of components)
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/02-basic-markup.md b/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/02-basic-markup.md
@@ -0,0 +1,5 @@
+---
+title: Basic markup
+---
+
+- [basically what we have in the Svelte docs today](https://svelte.dev/docs/basic-markup)
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/03-control-flow.md b/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/03-control-flow.md
@@ -0,0 +1,8 @@
+---
+title: Control flow
+---
+
+- if
+- each
+- await (or move that into some kind of data loading section?)
+- NOT: key (move into transition section, because that's the common use case)
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/04-snippets.md b/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/04-snippets.md
@@ -0,0 +1,10 @@
+---
+title: Snippets
+---
+
+Better title needed?
+
+- `#snippet`
+- `@render`
+- how they can be used to reuse markup
+- how they can be used to pass UI content to components
diff --git a/...lte.dev/src/lib/content/docs/svelte/02-template-syntax/05-styles-and-classes.md b/...lte.dev/src/lib/content/docs/svelte/02-template-syntax/05-styles-and-classes.md
@@ -0,0 +1,9 @@
+---
+title: Styles & Classes
+---
+
+- style scoping
+- `:global`
+- `style:`
+- `class:`
+- `--css` props
diff --git a/...src/lib/content/docs/svelte/02-template-syntax/06-transitions-and-animations.md b/...src/lib/content/docs/svelte/02-template-syntax/06-transitions-and-animations.md
@@ -0,0 +1,10 @@
+---
+title: Transitions & Animations
+---
+
+- how to use (template syntax)
+- when to use
+- global vs local
+- easing & motion
+- mention imports
+- key block
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/07-actions.md b/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/07-actions.md
@@ -0,0 +1,7 @@
+---
+title: Actions
+---
+
+- template syntax
+- how to write
+- typings
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/08-bindings.md b/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/08-bindings.md
@@ -0,0 +1,7 @@
+---
+title: Bindings
+---
+
+- how for dom elements
+- list of all bindings
+- how for components
diff --git a/...velte.dev/src/lib/content/docs/svelte/02-template-syntax/09-special-elements.md b/...velte.dev/src/lib/content/docs/svelte/02-template-syntax/09-special-elements.md
@@ -0,0 +1,5 @@
+---
+title: Special elements
+---
+
+- [basically what we have in the docs today](https://svelte.dev/docs/special-elements)
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/index.md b/apps/svelte.dev/src/lib/content/docs/svelte/02-template-syntax/index.md
@@ -0,0 +1,3 @@
+---
+title: Template syntax
+---
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/03-runes/01-state.md b/apps/svelte.dev/src/lib/content/docs/svelte/03-runes/01-state.md
@@ -0,0 +1,9 @@
+---
+title: State
+---
+
+- `$state` (.frozen)
+- `$derived` (.by)
+- using classes
+- getters/setters (what to do to keep reactivity "alive")
+- universal reactivity
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/03-runes/02-side-effects.md b/apps/svelte.dev/src/lib/content/docs/svelte/03-runes/02-side-effects.md
@@ -0,0 +1,6 @@
+---
+title: Side effects
+---
+
+- `$effect` (.pre)
+- when not to use it, better patterns for what to do instead
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/03-runes/index.md b/apps/svelte.dev/src/lib/content/docs/svelte/03-runes/index.md
@@ -0,0 +1,3 @@
+---
+title: Runes
+---
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/04-runtime/01-stores.md b/apps/svelte.dev/src/lib/content/docs/svelte/04-runtime/01-stores.md
@@ -0,0 +1,6 @@
+---
+title: Stores
+---
+
+- how to use
+- how to write
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/04-runtime/02-context.md b/apps/svelte.dev/src/lib/content/docs/svelte/04-runtime/02-context.md
@@ -0,0 +1,6 @@
+---
+title: Context
+---
+
+- get/set/hasContext
+- how to use, best practises (like encapsulating them)
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/04-runtime/03-lifecycle-hooks.md b/apps/svelte.dev/src/lib/content/docs/svelte/04-runtime/03-lifecycle-hooks.md
@@ -0,0 +1,8 @@
+---
+title: Lifecycle hooks
+---
+
+- onMount/onDestroy
+- mention that `$effect` might be better for your use case
+- beforeUpdate/afterUpdate with deprecation notice?
+- or skip this entirely and only have it in the reference docs?
diff --git a/...velte.dev/src/lib/content/docs/svelte/04-runtime/04-imperative-component-api.md b/...velte.dev/src/lib/content/docs/svelte/04-runtime/04-imperative-component-api.md
@@ -0,0 +1,11 @@
+---
+title: Imperative component API
+---
+
+better title needed?
+
+- mount
+- unmount
+- render
+- hydrate
+- how they interact with each other
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/04-runtime/index.md b/apps/svelte.dev/src/lib/content/docs/svelte/04-runtime/index.md
@@ -0,0 +1,3 @@
+---
+title: Runtime
+---
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/01-debugging.md b/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/01-debugging.md
@@ -0,0 +1,6 @@
+---
+title: Debugging
+---
+
+- `@debug`
+- `$inspect`
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/02-testing.md b/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/02-testing.md
@@ -0,0 +1,8 @@
+---
+title: Testing
+---
+
+- component testing basics
+- rune testing basics
+- vitest setup
+- e2e
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/03-typescript.md b/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/03-typescript.md
@@ -0,0 +1,9 @@
+---
+title: TypeScript
+---
+
+- [basically what we have today](https://svelte.dev/docs/typescript)
+- built-in support, but only for type-only features
+- generics
+- using `Component` and the other helper types
+- using `svelte-check`
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/04-custom-elements-api.md b/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/04-custom-elements-api.md
@@ -0,0 +1,5 @@
+---
+title: Custom elements API
+---
+
+- [basically what we have today](https://svelte.dev/docs/custom-elements-api)
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/05-reactivity-indepth.md b/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/05-reactivity-indepth.md
@@ -0,0 +1,6 @@
+---
+title: Reactivity indepth
+---
+
+- how to think about Runes ("just JavaScript" with added reactivity, what this means for keeping reactivity alive across boundaries)
+- signals
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/06-svelte-5-migration-guide.md b/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/06-svelte-5-migration-guide.md
@@ -0,0 +1,5 @@
+---
+title: Svelte 5 migration guide
+---
+
+- the stuff from the preview docs and possibly more
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/index.md b/apps/svelte.dev/src/lib/content/docs/svelte/05-misc/index.md
@@ -0,0 +1,3 @@
+---
+title: Misc
+---
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/98-reference/01-state.md b/apps/svelte.dev/src/lib/content/docs/svelte/98-reference/01-state.md
@@ -0,0 +1,9 @@
+---
+title: $state
+---
+
+TODO
+
+- add other pages
+- figure out a way to get separator titles in here, so we can have a 'runes' section and an 'imports' section and an 'errors/warnings' section without introducing another layer of nesting
+- figure out a good way to import reference docs from other repos that works locally and in prod
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/98-reference/index.md b/apps/svelte.dev/src/lib/content/docs/svelte/98-reference/index.md
@@ -0,0 +1,3 @@
+---
+title: Reference
+---
diff --git a/apps/svelte.dev/src/lib/content/docs/svelte/index.md b/apps/svelte.dev/src/lib/content/docs/svelte/index.md
@@ -0,0 +1,3 @@
+---
+title: Svelte
+---
diff --git a/apps/svelte.dev/src/lib/server/content.ts b/apps/svelte.dev/src/lib/server/content.ts
@@ -0,0 +1,9 @@
+import { read } from '$app/server';
+import { create_index } from '@sveltejs/site-kit/server/content';
+
+const markdown_modules = import.meta.glob<{ default: string }>('../content/**/*.md', {
+	eager: true,
+	query: '?url'
+});
+
+export const index = await create_index(markdown_modules, read);
diff --git a/apps/svelte.dev/src/lib/server/docs/index.js b/apps/svelte.dev/src/lib/server/docs/index.js
@@ -13,7 +13,7 @@ import { render_content } from '../renderer';
  * @param {import('./types').DocsData} docs_data
  * @param {string} slug
  */
-export async function get_parsed_docs(docs_data, slug) {
+export async function get_parsed_docs(docs_data, section, slug) {
 	for (const { pages } of docs_data) {
 		for (const page of pages) {
 			if (page.slug === slug) {

diff --git a/apps/svelte.dev/src/routes/(authed)/+layout.server.js b/apps/svelte.dev/src/routes/(authed)/+layout.server.js
@@ -2,7 +2,7 @@ import * as session from '$lib/db/session';
 
 /** @type {import('@sveltejs/adapter-vercel').Config} */
 export const config = {
-	runtime: 'nodejs18.x' // see https://github.com/sveltejs/svelte/pull/9136
+	runtime: 'nodejs20.x' // see https://github.com/sveltejs/svelte/pull/9136
 };
 
 export async function load({ request }) {

diff --git a/apps/svelte.dev/src/routes/+layout.svelte b/apps/svelte.dev/src/routes/+layout.svelte
@@ -32,50 +32,45 @@
 	{/if}
 </svelte:head>
 
-<div style:display={$page.url.pathname !== '/docs' ? 'contents' : 'none'}>
-	<Shell
-		nav_visible={$page.route.id !== '/(authed)/repl/[id]/embed'}
-		bind:snapshot={shell_snapshot}
-	>
-		<Nav slot="top-nav" title={data.nav_title} links={data.nav_links}>
-			<svelte:fragment slot="home-large">
-				<strong>svelte</strong>.dev
-			</svelte:fragment>
-
-			<svelte:fragment slot="home-small">
-				<strong>svelte</strong>
-			</svelte:fragment>
-
-			<svelte:fragment slot="search">
-				{#if $page.url.pathname !== '/search'}
-					<Search />
-				{/if}
-			</svelte:fragment>
-
-			<svelte:fragment slot="external-links">
-				<a href="https://learn.svelte.dev/">Tutorial</a>
-
-				<a href="https://kit.svelte.dev">SvelteKit</a>
-
-				<Separator />
-
-				<a href="/chat" title="Discord Chat">
-					<span class="small">Discord</span>
-					<span class="large"><Icon name="discord" /></span>
-				</a>
-
-				<a href="https://github.com/sveltejs/svelte" title="GitHub Repo">
-					<span class="small">GitHub</span>
-					<span class="large"><Icon name="github" /></span>
-				</a>
-			</svelte:fragment>
-		</Nav>
-
-		<slot />
-
-		<Banners slot="banner-bottom" data={data.banner} />
-	</Shell>
-</div>
+<Shell nav_visible={$page.route.id !== '/(authed)/repl/[id]/embed'} bind:snapshot={shell_snapshot}>
+	<Nav slot="top-nav" title={data.nav_title} links={data.nav_links}>
+		<svelte:fragment slot="home-large">
+			<strong>svelte</strong>.dev
+		</svelte:fragment>
+
+		<svelte:fragment slot="home-small">
+			<strong>svelte</strong>
+		</svelte:fragment>
+
+		<svelte:fragment slot="search">
+			{#if $page.url.pathname !== '/search'}
+				<Search />
+			{/if}
+		</svelte:fragment>
+
+		<svelte:fragment slot="external-links">
+			<a href="https://learn.svelte.dev/">Tutorial</a>
+
+			<a href="https://kit.svelte.dev">SvelteKit</a>
+
+			<Separator />
+
+			<a href="/chat" title="Discord Chat">
+				<span class="small">Discord</span>
+				<span class="large"><Icon name="discord" /></span>
+			</a>
+
+			<a href="https://github.com/sveltejs/svelte" title="GitHub Repo">
+				<span class="small">GitHub</span>
+				<span class="large"><Icon name="github" /></span>
+			</a>
+		</svelte:fragment>
+	</Nav>
+
+	<slot />
+
+	<Banners slot="banner-bottom" data={data.banner} />
+</Shell>
 
 {#if browser}
 	<SearchBox />

diff --git a/apps/svelte.dev/src/routes/_components/Hero.svelte b/apps/svelte.dev/src/routes/_components/Hero.svelte
@@ -18,7 +18,7 @@
 			<a href="https://learn.svelte.dev" rel="external" class="cta">
 				tutorial<Icon name="external-link" size="1em" />
 			</a>
-			<a href="/docs/introduction" class="cta basic">read the docs</a>
+			<a href="/docs/svelte/introduction/overview" class="cta basic">read the docs</a>
 		</div>
 	</div>
 

diff --git a/apps/svelte.dev/src/routes/blog/+page.server.js b/apps/svelte.dev/src/routes/blog/+page.server.js
@@ -1,6 +1,6 @@
 import { get_blog_data, get_blog_list } from '$lib/server/blog/index.js';
 
-export const prerender = true;
+export const prerender = false; // TODO
 
 export async function load() {
 	return {

diff --git a/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js b/apps/svelte.dev/src/routes/blog/[slug]/+page.server.js
@@ -1,7 +1,7 @@
 import { get_blog_data, get_processed_blog_post } from '$lib/server/blog/index.js';
 import { error } from '@sveltejs/kit';
 
-export const prerender = true;
+export const prerender = false; // TODO
 
 export async function load({ params }) {
 	const post = await get_processed_blog_post(await get_blog_data(), params.slug);

diff --git a/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.js b/apps/svelte.dev/src/routes/blog/[slug]/card.png/+server.js
@@ -9,7 +9,7 @@ import OverpassRegular from './Overpass-Regular.ttf';
 const height = 630;
 const width = 1200;
 
-export const prerender = true;
+export const prerender = false; // TODO
 
 export async function GET({ params }) {
 	const post = await get_processed_blog_post(await get_blog_data(), params.slug);