cosmicpoi/clutter

a note-taking theme for Pico CMS

Clutter for Pico

My notetaking theme for Pico CMS. Shamelessly ripped off from 'Bits and Pieces' by lostkeys. I didn't copy any code, though - I had just been taking Markdown notes for a long time, and when I found Bits and Pieces, I thought it was a great idea. I decided to remake it my way as a fun exercise, and added my own features in the process.

You need to install the helper plugin as well, otherwise the theme will not work. It is contained in the plugins/ directory. I chose to use a helper plugin rather than Javascript because it's a bit easier when reading through the HTML.

You can find a live version of this theme on my knowledge base, which the live version of my personal notebook for educational purposes.

Features

Nested Notes

Automatic Table of Contents

Keyboard Shortcuts

Hard to show this in GIF form, but if you check out the live version you can hit command + k or ctrl + k to go straight to the ES6 page.

MathJax Support

Both inline and block typesetting support!

Documentation

Basic Usage

You can nest directories indefinitely. Just make sure that whenever you create a new one, you also make a index.md. For instance, a file structure might look like:

index.md
404.md
Javascript/
	index.md
	Advanced Javascript/
		index.md
		Prototypes.md
		Functions.md
	ES6.md

Shortcuts

Sample metas:

---
Title: ES6
Description: Page about ES6
Shortcut: 'command+k,ctrl+k'
---

---
Title: Functions
Description: Page about Functions
Shortcut: 'command+g'
---

Shortcuts are bound using Mousetrap, with single-comma delimiters for multiple shortcuts. The Shortcut meta attribute is entirely optional.

MathJax

Because Pico renders before MathJax, wrap your typeset code in code tags (` `) to indicate preformatted text. This way underscores (_) won't get read as italics rather than subscript.

~~~~Inline Typesetting~~~~
`$V_{out}$`


~~~~Block Typesetting~~~~~
`$$V_{out} = V_{in} * \frac{R_2}{R_1+R_2}$$`

clutter's Issues

|raw

thank you. I forked this rep to make a little change in index.twig file to say to twig parser to process <a href... as a raw html data, you can bugfix it

Scrollable right column?

I use clutter as notebook, and I especially find it useful to start with complete table of contents (TOC( of the books I'm going through. A TOC is very handy for quickly reviewing the content.
Sometimes though, the TOCs are getting pretty long, and they are "disappearing" below the bottom of the browser edge.

So it would be really helpful if the righthand-side column could be made scrollable as well.

Cheers
Tor

Responsive/adaptive design?

Hi Alan!
I really love this theme, just what I need for myself, and it looks and feels gorgeous on a desktop.
But on mobile devices the breadcrumb menu is impossible to use because the headers of the pages overlap it.
I wish I had the knowledge to assist in fixing this, but this is really out of my league. Any chance that there will be a fix for this in the future?
Cheers
Tor

Where do I put in the menu?

In what file? Or directory? Or whatever?