mirror of https://github.com/sveltejs/svelte
Puru Vijay
3 years ago
commit
2e2bacbba7
@ -0,0 +1,72 @@
|
|||||||
|
// @ts-check
|
||||||
|
import fs from 'node:fs';
|
||||||
|
|
||||||
|
const base = '../../site/content/examples/';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns {import('./types').ExamplesData}
|
||||||
|
*/
|
||||||
|
export function get_examples_data() {
|
||||||
|
const examples = [];
|
||||||
|
|
||||||
|
for (const subdir of fs.readdirSync(base)) {
|
||||||
|
// Exclude embeds
|
||||||
|
if (subdir.endsWith('99-embeds')) continue;
|
||||||
|
|
||||||
|
const section = {
|
||||||
|
title: '', // Initialise with empty
|
||||||
|
slug: subdir.split('-').slice(1).join('-'),
|
||||||
|
examples: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!(fs.statSync(`${base}/${subdir}`).isDirectory() || subdir.endsWith('meta.json'))) continue;
|
||||||
|
|
||||||
|
if (!subdir.endsWith('meta.json'))
|
||||||
|
section.title = JSON.parse(fs.readFileSync(`${base}/${subdir}/meta.json`, 'utf-8')).title;
|
||||||
|
|
||||||
|
for (const section_dir of fs.readdirSync(`${base}/${subdir}`)) {
|
||||||
|
const match = /\d{2}-(.+)/.exec(section_dir);
|
||||||
|
if (!match) continue;
|
||||||
|
|
||||||
|
const slug = match[1];
|
||||||
|
|
||||||
|
const example_base_dir = `${base}/${subdir}/${section_dir}`;
|
||||||
|
|
||||||
|
// Get title for
|
||||||
|
const example_title = JSON.parse(
|
||||||
|
fs.readFileSync(`${example_base_dir}/meta.json`, 'utf-8')
|
||||||
|
).title;
|
||||||
|
|
||||||
|
const files = [];
|
||||||
|
for (const file of fs
|
||||||
|
.readdirSync(example_base_dir)
|
||||||
|
.filter((file) => !file.endsWith('meta.json'))) {
|
||||||
|
files.push({
|
||||||
|
filename: file,
|
||||||
|
type: file.split('.').at(-1),
|
||||||
|
content: fs.readFileSync(`${example_base_dir}/${file}`, 'utf-8'),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
section.examples.push({ title: example_title, slug, files });
|
||||||
|
}
|
||||||
|
|
||||||
|
examples.push(section);
|
||||||
|
}
|
||||||
|
|
||||||
|
return examples;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {import('./types').ExamplesData} examples_data
|
||||||
|
* @returns {import('./types').ExamplesList}
|
||||||
|
*/
|
||||||
|
export function get_examples_list(examples_data) {
|
||||||
|
return examples_data.map((section) => ({
|
||||||
|
title: section.title,
|
||||||
|
examples: section.examples.map((example) => ({
|
||||||
|
title: example.title,
|
||||||
|
slug: example.slug,
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
}
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
/**
|
||||||
|
* @param {import('./types').ExamplesData} examples_data
|
||||||
|
* @param {string} slug
|
||||||
|
*/
|
||||||
|
export function get_example(examples_data, slug) {
|
||||||
|
const example = examples_data
|
||||||
|
.find((section) => section.examples.find((example) => example.slug === slug))
|
||||||
|
?.examples.find((example) => example.slug === slug);
|
||||||
|
|
||||||
|
return example;
|
||||||
|
}
|
||||||
@ -0,0 +1,25 @@
|
|||||||
|
export type ExamplesData = {
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
examples: {
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
files: {
|
||||||
|
content: string;
|
||||||
|
type: 'svelte' | 'js';
|
||||||
|
filename: string;
|
||||||
|
}[];
|
||||||
|
}[];
|
||||||
|
}[];
|
||||||
|
|
||||||
|
export interface Example {
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface ExampleSection {
|
||||||
|
title: string;
|
||||||
|
examples: Example[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type ExamplesList = ExampleSection[];
|
||||||
@ -0,0 +1,81 @@
|
|||||||
|
// @ts-check
|
||||||
|
import fs from 'node:fs';
|
||||||
|
import { extract_frontmatter } from '../markdown/index.js';
|
||||||
|
|
||||||
|
const base = '../../site/content/tutorial/';
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @returns {import('./types').TutorialData}
|
||||||
|
*/
|
||||||
|
export function get_tutorial_data() {
|
||||||
|
const tutorials = [];
|
||||||
|
|
||||||
|
for (const subdir of fs.readdirSync(base)) {
|
||||||
|
const section = {
|
||||||
|
title: '', // Initialise with empty
|
||||||
|
slug: subdir.split('-').slice(1).join('-'),
|
||||||
|
tutorials: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!(fs.statSync(`${base}/${subdir}`).isDirectory() || subdir.endsWith('meta.json'))) continue;
|
||||||
|
|
||||||
|
if (!subdir.endsWith('meta.json'))
|
||||||
|
section.title = JSON.parse(fs.readFileSync(`${base}/${subdir}/meta.json`, 'utf-8')).title;
|
||||||
|
|
||||||
|
for (const section_dir of fs.readdirSync(`${base}/${subdir}`)) {
|
||||||
|
const match = /\d{2}-(.+)/.exec(section_dir);
|
||||||
|
if (!match) continue;
|
||||||
|
|
||||||
|
const slug = match[1];
|
||||||
|
|
||||||
|
const tutorial_base_dir = `${base}/${subdir}/${section_dir}`;
|
||||||
|
|
||||||
|
// Read the file, get frontmatter
|
||||||
|
const contents = fs.readFileSync(`${tutorial_base_dir}/text.md`, 'utf-8');
|
||||||
|
const { metadata, body } = extract_frontmatter(contents);
|
||||||
|
|
||||||
|
// Get the contents of the apps.
|
||||||
|
const completion_states_data = { initial: [], complete: [] };
|
||||||
|
for (const app_dir of fs.readdirSync(tutorial_base_dir)) {
|
||||||
|
if (!app_dir.startsWith('app-')) continue;
|
||||||
|
|
||||||
|
const app_dir_path = `${tutorial_base_dir}/${app_dir}`;
|
||||||
|
const app_contents = fs.readdirSync(app_dir_path, 'utf-8');
|
||||||
|
|
||||||
|
for (const file of app_contents) {
|
||||||
|
completion_states_data[app_dir === 'app-a' ? 'initial' : 'complete'].push({
|
||||||
|
name: file,
|
||||||
|
type: file.split('.').at(-1),
|
||||||
|
content: fs.readFileSync(`${app_dir_path}/${file}`, 'utf-8'),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
section.tutorials.push({
|
||||||
|
title: metadata.title,
|
||||||
|
slug,
|
||||||
|
content: body,
|
||||||
|
dir: `${subdir}/${section_dir}`,
|
||||||
|
...completion_states_data,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
tutorials.push(section);
|
||||||
|
}
|
||||||
|
|
||||||
|
return tutorials;
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {import('./types').TutorialData} tutorial_data
|
||||||
|
* @returns {import('./types').TutorialsList}
|
||||||
|
*/
|
||||||
|
export function get_tutorial_list(tutorial_data) {
|
||||||
|
return tutorial_data.map((section) => ({
|
||||||
|
title: section.title,
|
||||||
|
tutorials: section.tutorials.map((tutorial) => ({
|
||||||
|
title: tutorial.title,
|
||||||
|
slug: tutorial.slug,
|
||||||
|
})),
|
||||||
|
}));
|
||||||
|
}
|
||||||
@ -0,0 +1,89 @@
|
|||||||
|
import { createShikiHighlighter } from 'shiki-twoslash';
|
||||||
|
import { transform } from '../markdown';
|
||||||
|
|
||||||
|
const languages = {
|
||||||
|
bash: 'bash',
|
||||||
|
env: 'bash',
|
||||||
|
html: 'svelte',
|
||||||
|
svelte: 'svelte',
|
||||||
|
sv: 'svelte',
|
||||||
|
js: 'javascript',
|
||||||
|
css: 'css',
|
||||||
|
diff: 'diff',
|
||||||
|
ts: 'typescript',
|
||||||
|
'': '',
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param {import('./types').TutorialData} tutorial_data
|
||||||
|
* @param {string} slug
|
||||||
|
*/
|
||||||
|
export async function get_parsed_tutorial(tutorial_data, slug) {
|
||||||
|
const tutorial = tutorial_data
|
||||||
|
.find(({ tutorials }) => tutorials.find((t) => t.slug === slug))
|
||||||
|
?.tutorials?.find((t) => t.slug === slug);
|
||||||
|
|
||||||
|
if (!tutorial) return null;
|
||||||
|
|
||||||
|
const body = tutorial.content;
|
||||||
|
|
||||||
|
const highlighter = await createShikiHighlighter({ theme: 'css-variables' });
|
||||||
|
|
||||||
|
const content = transform(body, {
|
||||||
|
/**
|
||||||
|
* @param {string} html
|
||||||
|
*/
|
||||||
|
heading(html) {
|
||||||
|
const title = html
|
||||||
|
.replace(/<\/?code>/g, '')
|
||||||
|
.replace(/"/g, '"')
|
||||||
|
.replace(/</g, '<')
|
||||||
|
.replace(/>/g, '>');
|
||||||
|
|
||||||
|
return title;
|
||||||
|
},
|
||||||
|
code: (source, language) => {
|
||||||
|
let html = '';
|
||||||
|
|
||||||
|
source = source
|
||||||
|
.replace(/^([\-\+])?((?: )+)/gm, (match, prefix = '', spaces) => {
|
||||||
|
if (prefix && language !== 'diff') return match;
|
||||||
|
|
||||||
|
// for no good reason at all, marked replaces tabs with spaces
|
||||||
|
let tabs = '';
|
||||||
|
for (let i = 0; i < spaces.length; i += 4) {
|
||||||
|
tabs += ' ';
|
||||||
|
}
|
||||||
|
return prefix + tabs;
|
||||||
|
})
|
||||||
|
.replace(/\*\\\//g, '*/');
|
||||||
|
|
||||||
|
html = highlighter.codeToHtml(source, { lang: languages[language] });
|
||||||
|
|
||||||
|
html = html
|
||||||
|
.replace(
|
||||||
|
/^(\s+)<span class="token comment">([\s\S]+?)<\/span>\n/gm,
|
||||||
|
(match, intro_whitespace, content) => {
|
||||||
|
// we use some CSS trickery to make comments break onto multiple lines while preserving indentation
|
||||||
|
const lines = (intro_whitespace + content).split('\n');
|
||||||
|
return lines
|
||||||
|
.map((line) => {
|
||||||
|
const match = /^(\s*)(.*)/.exec(line);
|
||||||
|
const indent = (match[1] ?? '').replace(/\t/g, ' ').length;
|
||||||
|
|
||||||
|
return `<span class="token comment wrapped" style="--indent: ${indent}ch">${
|
||||||
|
line ?? ''
|
||||||
|
}</span>`;
|
||||||
|
})
|
||||||
|
.join('');
|
||||||
|
}
|
||||||
|
)
|
||||||
|
.replace(/\/\*…\*\//g, '…');
|
||||||
|
|
||||||
|
return html;
|
||||||
|
},
|
||||||
|
codespan: (text) => '<code>' + text + '</code>',
|
||||||
|
});
|
||||||
|
|
||||||
|
return { ...tutorial, content };
|
||||||
|
}
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
export type TutorialData = {
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
tutorials: {
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
dir: string;
|
||||||
|
content: string;
|
||||||
|
initial: { name: string; type: string; content: string }[];
|
||||||
|
complete: { name: string; type: string; content: string }[];
|
||||||
|
}[];
|
||||||
|
}[];
|
||||||
|
|
||||||
|
export interface Tutorial {
|
||||||
|
title: string;
|
||||||
|
slug: string;
|
||||||
|
}
|
||||||
|
|
||||||
|
export interface TutorialSection {
|
||||||
|
title: string;
|
||||||
|
tutorials: Tutorial[];
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TutorialsList = TutorialSection[];
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import { PUBLIC_API_BASE } from '$env/static/public';
|
|
||||||
|
|
||||||
export async function load({ fetch }) {
|
|
||||||
const examples = await fetch(`${PUBLIC_API_BASE}/docs/svelte/examples`).then((r) => r.json());
|
|
||||||
return { examples };
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { setContext } from 'svelte';
|
|
||||||
|
|
||||||
/** @type {import('./$types').PageData} */
|
|
||||||
export let data;
|
|
||||||
|
|
||||||
setContext('examples', { sections: data.examples });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<slot />
|
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import { PUBLIC_API_BASE } from '$env/static/public';
|
|
||||||
|
|
||||||
/** @type {import('./$types').PageLoad} */
|
|
||||||
export async function load({ fetch, params, setHeaders }) {
|
|
||||||
const example = await fetch(`${PUBLIC_API_BASE}/docs/svelte/examples/${params.slug}`, {
|
|
||||||
credentials: 'omit'
|
|
||||||
});
|
|
||||||
|
|
||||||
setHeaders({
|
|
||||||
'cache-control': 'public, max-age=60'
|
|
||||||
});
|
|
||||||
|
|
||||||
return {
|
|
||||||
example: await example.json(),
|
|
||||||
slug: params.slug
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
import { get_example } from '$lib/server/examples';
|
||||||
|
import { get_examples_data, get_examples_list } from '$lib/server/examples/get-examples';
|
||||||
|
|
||||||
|
export const prerender = true;
|
||||||
|
|
||||||
|
export async function load({ params }) {
|
||||||
|
const examples_data = get_examples_data();
|
||||||
|
|
||||||
|
const examples_list = get_examples_list(examples_data);
|
||||||
|
const example = get_example(examples_data, params.slug);
|
||||||
|
|
||||||
|
return {
|
||||||
|
examples_list,
|
||||||
|
example,
|
||||||
|
slug: params.slug,
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -1,6 +0,0 @@
|
|||||||
import { PUBLIC_API_BASE } from '$env/static/public';
|
|
||||||
|
|
||||||
export async function load({ fetch }) {
|
|
||||||
const tutorials = await fetch(`${PUBLIC_API_BASE}/docs/svelte/tutorial`).then((r) => r.json());
|
|
||||||
return { tutorials };
|
|
||||||
}
|
|
||||||
@ -1,10 +0,0 @@
|
|||||||
<script>
|
|
||||||
import { setContext } from 'svelte';
|
|
||||||
|
|
||||||
/** @type {import('./$types').PageData} */
|
|
||||||
export let data;
|
|
||||||
|
|
||||||
setContext('tutorial', { sections: data.tutorials });
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<slot />
|
|
||||||
@ -1,5 +1,7 @@
|
|||||||
import { redirect } from '@sveltejs/kit';
|
import { redirect } from '@sveltejs/kit';
|
||||||
|
|
||||||
|
export const prerender = true;
|
||||||
|
|
||||||
export function load() {
|
export function load() {
|
||||||
throw redirect(301, '/tutorial/basics');
|
throw redirect(301, '/tutorial/basics');
|
||||||
}
|
}
|
||||||
@ -1,17 +0,0 @@
|
|||||||
import { redirect } from '@sveltejs/kit';
|
|
||||||
import { PUBLIC_API_BASE } from '$env/static/public';
|
|
||||||
|
|
||||||
export async function load({ fetch, params, setHeaders }) {
|
|
||||||
// TODO: Use local data
|
|
||||||
const tutorial = await fetch(`${PUBLIC_API_BASE}/docs/svelte/tutorial/${params.slug}`);
|
|
||||||
|
|
||||||
if (!tutorial.ok) {
|
|
||||||
throw redirect(301, '/tutorial/basics');
|
|
||||||
}
|
|
||||||
|
|
||||||
setHeaders({
|
|
||||||
'cache-control': 'public, max-age=60'
|
|
||||||
});
|
|
||||||
|
|
||||||
return { tutorial: await tutorial.json(), slug: params.slug };
|
|
||||||
}
|
|
||||||
@ -0,0 +1,20 @@
|
|||||||
|
import { get_parsed_tutorial } from '$lib/server/tutorial';
|
||||||
|
import { get_tutorial_data, get_tutorial_list } from '$lib/server/tutorial/get-tutorial-data';
|
||||||
|
import { error } from '@sveltejs/kit';
|
||||||
|
|
||||||
|
export const prerender = true;
|
||||||
|
|
||||||
|
export async function load({ params }) {
|
||||||
|
const tutorial_data = get_tutorial_data();
|
||||||
|
const tutorials_list = get_tutorial_list(tutorial_data);
|
||||||
|
|
||||||
|
const tutorial = await get_parsed_tutorial(tutorial_data, params.slug);
|
||||||
|
|
||||||
|
if (!tutorial) throw error(404);
|
||||||
|
|
||||||
|
return {
|
||||||
|
tutorials_list,
|
||||||
|
tutorial,
|
||||||
|
slug: params.slug,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 5.5 KiB |
Loading…
Reference in new issue