This Wiki
- the wiki is found in the
/docsdirectory - uses SvelteKit to:
- convert all markdown files to HTML
- generate a navigation sidebar dynamically
- use server prerendering - aka SvelteKit as a statsic site generator (for this bit of the site nayway)
To add a page
- simply create a uniquely named
.mdfile in the/docsdirectory;- note that the file name will be capitalised and used for user-visible navigation
- for multiple words use an underscore;
- e.g: ‘My Page’ will be displayed for
my_page.md - to be placed under a ‘folder’ in the left hand nav bar, add the name of the folder as a prefix to the file name, and separate with a colon:
<folder-name>:<file-name>.md- use the same underscore approach for multiple words
- linking to other wiki files must be relative without the
.mdsuffix - images are linked relatively but are placed in
/static/docsdirectory
Why not physical folders? To do with Vite routes not handling this - TBD file and line number
How does it work?
| File | Purpose | Code of Note |
|---|---|---|
| *.md | the markdown content | |
| layout.js | instruct SvelteKit to prerender | export const prerender = true; |
| layout.svelte | visual layout with dynamic nav sidebar | import.meta.glob('./*.md');CSS flexbox to fill screen |
| page.svelte | home page | |
| [slug]/page.js | use of load function to extract markdown content | const post = await import('../${params.slug}.md'); |
| [slug]/page.svelte | use of dynamic component for basic page layout | |
| [slug]/wiki-styles.css |
Also see svelte.config.js for use of mdsvex preprocessor to parse the markdown.
This uses remark plugins to:
- parse PlantUML diagrams - with thanks to https://github.com/akebifiky/remark-simple-plantuml
With huge thanks to Josh Collingsworth for Let’s learn SvelteKit by building a static Markdown blog from scratch
Search
Currently a ‘good enough’ solution - but pretty ugly:
- Uses Googles Programmable Search Engine
- Then loads Google’s script in
layout.svelteti dynamically update the html. - This is yuk - and adverts are worse - but sufficient for now.
- Note this involves setting up a ‘Site’ in the numical Google account’s Search Console and verifying this via a DNS TXT record.