A docs theme for Pico CMS

Installation

Copy this contents of this repository to themes/Tooloop-Docs.
Then activate it in your config/config.yml:

...
theme: Tooloop-Docs
...

Customization

Logo

You can optionally add a site logo in the navbar:

content/_meta.md

logo: %assets_url%/tooloop-logo.svg

Search

The theme includes a search function based on these two plugins. Install these first:

• https://github.com/PontusHorn/Pico-Search
• https://github.com/Tooloop/Pico-Json-Header

Add a search page:

search.md

---
Title: Search results
Template: search
Hidden: true
---

Then enable the search by adding the url to your search page to the meta file.

content/_meta.md

search: %base_url%/search

Also exclude these files from the search:

config/config.yml

search_excludes:
    - 'search'
    - '_footer'
    - '_meta'

Edit page link

content/_meta.md

edit_url: https://github.com/Tooloop/Tooloop-OS-Website/edit/master/content/%file%

%file% will be replaced by the file path relative to the content folder.

Footer links

You can optionally create a file _footer.md in your content folder. In there you can define Sections of link lists which will be rendered as columns.

Example:

---
Sections:
    - text: Get in touch
      items:
        - text: Tooloop Multimedia
          url: https://www.tooloop.de
        - text: Matrix chat room
          url: https://app.element.io/#/room/#tooloop-os:matrix.org
    - text: Source Code
      items:
        - text: Tooloop OS
          url: https://github.com/Tooloop/Tooloop-OS
          icon: fab fa-github
        - text: Packages
          url: https://github.com/Tooloop/Tooloop-Packages
          icon: fab fa-github
        - text: Control Center
          url: https://github.com/Tooloop/Tooloop-Control
          icon: fab fa-github
        - text: Docs
          url: https://github.com/Tooloop/Tooloop-OS-Website
          icon: fab fa-github
---

Development

Software stack

Package	Description
Bulma	CSS Framework
Sass	CSS compiler
Vue.js	Javascript UI
Prism	Syntax highlighing
Font Awesome	Icons

Bulma is contained as a submodules. If you want to make changes to the .scss files, you need to clone recursively:

git clone --recurse-submodules https://github.com/Tooloop/Tooloop-Docs-Theme.git themes/Tooloop-Docs

Compile .scss changes like this:

sass --watch themes/Tooloop-Docs/css/styles.scss:themes/Tooloop-Docs/css/styles.css --style compressed