mirror of https://github.com/sveltejs/svelte
feat(site-2): Local examples (#8431)
* feat(docs): Local tutorial * Refactor some stuff * Better error handling * Fix search imports * Prerender tutorial * try prerendering hack * fix super stupid display hidden bug * Shorten the rendered URL * Shorten URL code even more * Prerender in svelte.config.js * Refactor * Fix ScreenToggle dark mode styles * Initial POC * Rvert to old hack * Fix svelte-document.jpgpull/8453/head
Puru Vijay
2 years ago
committed by
GitHub
parent
35e7a852fc
commit
9793b41817
@ -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[];
|
||||
@ -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,
|
||||
};
|
||||
}
|
||||
|
After Width: | Height: | Size: 5.5 KiB |
Loading…
Reference in new issue