Title: Tiny Markdown-Based Wiki
Slug: tiny-markdown-wiki
Date: 2023-10-31 18:30:00
Author: Kartones
Lang: en
Tags: Development, Python, Javascript, Tools
og_image:
Description: Created a simple web alternative to sync and view markdown files using HTML, CSS, and JavaScript. It fetches markdown files, renders them client-side, and supports light/dark themes

[Earlier this year](https://blog.kartones.net/post/note-taking-and-knowledge-base/), I settled on using markdown files to keep my notes around different topics. For editing and while using my computer, I am happy with [Obsidian](https://obsidian.md/), but at times I want to quickly check something (maybe from my work computer or the phone). I could pay for the sync features of the tool, but as we're talking markdown files and a few media contents, I decided to build a simple web alternative.

TL;DR is that you can check [tiny-wiki in GitHub](https://github.com/Kartones/tiny-wiki). It is a no-frameworks, HTML 5 + CSS + Javascript glorified markdown renderer.

As a summary, it:

- Fetches an `items.json` file containing a list of markdown files. Folders are treated as sections/subsections (supports up to one section and one subsection, so two folder levels), and the file name is treated as the Document name (and `<h1>` heading once rendered as HTML). The list of sections, subsections, and files is rendered at the left.
- When loading a page, it fetches the markdown file, and then renders it client-side. I did some basic benchmarks, and it is faster to fetch the smaller markdown and render it, rather than pre-generating all the HTML files (at least on a decent computer or phone).
- Also, when rendering a page, extracts the headings from the document and creates a navigable list at the right of the content
- Supports light/dark theme (saving to `localStorage`)

The whole Javascript code is less than 200 lines, so straightforward to understand.

It is mentioned in the README of the repo, but I used [Marked](https://marked.js.org/) for transforming the markdowns (really fast, and very easy to extend/modify the tag renderers) and [Pico.css](https://picocss.com/docs/) for the styling (I love it because without needing to add any classes already makes everything pretty). Be warned that the styling is probably not perfect. I built this and did some quick experiments, but that's all.

🦇 Happy Halloween 🎃!