Earlier this year, 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, 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. It is a no-frameworks, HTML 5 + CSS + Javascript glorified markdown renderer.
As a summary, it:
- Fetches an
items.jsonfile 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 for transforming the markdowns (really fast, and very easy to extend/modify the tag renderers) and Pico.css 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 🎃!
Tags: Development