diff --git a/demo/src/lib/markdown/Markdown.svelte b/demo/src/lib/markdown/Markdown.svelte index e28eb08d1c..7d9be9dfbd 100644 --- a/demo/src/lib/markdown/Markdown.svelte +++ b/demo/src/lib/markdown/Markdown.svelte @@ -5,6 +5,7 @@ import {marked} from 'marked'; import MdSection from '$lib/markdown/renderers/MdSection.svelte'; import MdImage from '$lib/markdown/renderers/MdImage.svelte'; + import MdLink from '$lib/markdown/renderers/MdLink.svelte'; export let source: string; @@ -40,7 +41,7 @@ } $: tokens = getTokens(source); - const renderers: Partial = {image: MdImage, heading: Heading, code: MdCode, section: MdSection} as Partial; + const renderers: Partial = {image: MdImage, heading: Heading, code: MdCode, section: MdSection, link: MdLink} as Partial; diff --git a/demo/src/lib/markdown/renderers/MdLink.svelte b/demo/src/lib/markdown/renderers/MdLink.svelte new file mode 100644 index 0000000000..27935d220a --- /dev/null +++ b/demo/src/lib/markdown/renderers/MdLink.svelte @@ -0,0 +1,25 @@ + + + diff --git a/demo/src/lib/server/index.ts b/demo/src/lib/server/index.ts index 28a7eec329..a39574ada0 100644 --- a/demo/src/lib/server/index.ts +++ b/demo/src/lib/server/index.ts @@ -1,31 +1,70 @@ import {readFile, readdir} from 'node:fs/promises'; -const validMdRegex = /^\d{2}-[a-z-]*\.md$/g; +const validMdRegex = /^\d{2}-[a-zA-Z-]*\.md$/g; -export async function listMarkdown() { - const categories = (await readdir(`../docs`)).filter((folder) => folder !== 'code'); - const files: {slug: string; path: string}[] = []; - for (const category of categories) { - (await readdir(`../docs/${category}`)) - .filter((file) => file.match(validMdRegex)) - .forEach((file) => { - files.push({slug: `${category}/${file.slice(3, -3)}`, path: `../docs/${category}/${file}`}); - }); - } - return files; -} +const componentsSubMenu = [ + {title: 'Accordion', slug: 'components/accordion/', subpath: 'examples'}, + {title: 'Alert', slug: `components/alert/`, subpath: 'examples'}, + {title: 'Modal', slug: `components/modal/`, subpath: 'examples'}, + {title: 'Pagination', slug: `components/pagination/`, subpath: 'examples'}, + {title: 'Progressbar', slug: `components/progressbar/`, subpath: 'examples'}, + {title: 'Rating', slug: `components/rating/`, subpath: 'examples'}, + {title: 'Select', slug: `components/select/`, subpath: 'examples'}, + {title: 'Slider', slug: `components/slider/`, subpath: 'examples'}, +]; + +export async function listPages() { + const docFolders = (await readdir(`../docs`)).filter((folder) => folder !== 'code'); + const categories: {name: string; files: {slug: string; mdpath?: string; title: string; subpath: string}[]}[] = []; -export async function listSections(base: string) { - return (await readdir(`../docs/${base}`)) - .filter((file) => file.match(validMdRegex)) - .map((file) => { - const name = file.slice(3, -3); - return {name, title: name.substring(0, 1).toUpperCase() + name.substring(1).replace('-', ' ')}; + for (const docFolder of docFolders) { + const name = docFolder.substring(3); + categories.push({ + name, + files: + name === 'Components' + ? componentsSubMenu + : (await readdir(`../docs/${docFolder}`)) + .filter((file) => file.match(validMdRegex)) + .map((file) => { + const normalizedFileName = file.slice(3, -3); + return { + slug: `${name.toLowerCase()}/${normalizedFileName.toLowerCase()}`, + mdpath: `../docs/${docFolder}/${file}`, + title: normalizedFileName.replace('-', ' '), + name: normalizedFileName, + subpath: '', + }; + }), }); + } + return categories; } export async function retrieveMarkdown(slug: string) { - const files = await listMarkdown(); - const file = files.find((file) => file.slug === slug); - return file ? await readFile(file.path, 'utf-8') : undefined; + const categories = await listPages(); + let prev; + let next; + let file; + for (let i = 0; i < categories.length; i++) { + const category = categories[i]; + for (let j = 0; j < category.files.length; j++) { + if (category.files[j].slug === slug) { + file = category.files[j]; + if (j > 0) { + prev = category.files[j - 1]; + } else if (i > 0) { + prev = categories[i - 1].files[categories[i - 1].files.length - 1]; + prev = {...prev, title: `${categories[i - 1].name.replace('-', ' ')}: ${prev.title}`}; + } + if (j < category.files.length - 1) { + next = category.files[j + 1]; + } else if (i < categories.length - 1) { + next = categories[i + 1].files[0]; + next = {...next, title: `${categories[i + 1].name.replace('-', ' ')}: ${next.title}`}; + } + } + } + } + return file ? {prev, next, content: await readFile(file.mdpath!, 'utf-8')} : undefined; } diff --git a/demo/src/routes/+layout.svelte b/demo/src/routes/+layout.svelte index 6b5a2e58a2..ee8c0c5d7d 100644 --- a/demo/src/routes/+layout.svelte +++ b/demo/src/routes/+layout.svelte @@ -92,7 +92,7 @@ {:else}
-