Hi everyone, I decided to finish freecodecamp beta map.
I’ve started with making a jekyll theme and want to talk little bit about my workflow and hear your feedback
Instead of building something imaginary. I wanted to solve a real problem, in an other saying making something useable.
As a developer, you spend time with documentation a lot. This gives you a chance to ask yourself how to make better documentation pages and get inspired.
My favorite documentation site is Digital Ocean Product Documentation
Contents include heading that we can navigate easily. This gives very good user experience when you read the doc.
So I’ve built similiar to this one after determining my other requirements:
I wanted something:
- Fast and Minimal
- Content First
- Offline first
- Very simple setup (No database, no server cost)
Prototype
There’s two important parts I believe is very crucial for documentation page design. First page contents navigation I mention above, second documentation table of contents navigation.
My Html/css
So I converted prototype to html/css. This’s what I’ve: techdoc .
Most important part here was tocbot plugin.
I checked Digital Ocean page if they use any plugin for their navigation and found tocify. Tocify was okay but I searched for native javascript plugin and that’s where i found tocbot.
Jekyll theme
I used jekyll as a cms. I also implemented PWA feature to theme. So it works offline. For content I wanted use something real. So this’s where Front-end-Developer-Interview-Questions helped me however it would be better to put something big as a content.
Chorme Audits Results
You can check webite here: Technical documentation Jekyll theme
Github Repo
Todo
- Improve accesibility.
- add readme to repo