Visualize projects in an organized manner, as notes on a board.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
.vscode
assets
blueprints
css
images
js
node_modules
src
templates
twig
vendor
.gitignore
CHANGELOG.md
LICENSE
README.md
blueprints.yaml
composer.json
composer.lock
languages.yaml
package-lock.json
package.json
project-space.php
project-space.yaml
screenshot.jpg
thumbnail.jpg

README.md

Project Space Theme

Project Space

Description

Visualize projects in an organized manner, as notes on a board. Projects can be categorized, color-coded and tagged to be easily identified, and displayed in a variety of ways with filtering and sorting.

The Project Space theme is responsive, and its use of JavaScript is minimal and only as progressive enhancements. The theme is designed by the Graceful degradation methodology, wherein JavaScript is not necessary for the site to function. Scripts include PJAX, DatePicker for calendar, and Multiple Select for dropdowns.

Usage

Create a folder in /user/pages that will store your project-notes, like /projects. In this folder, create a default.md-file with the following content:

---
title: Project Space

sitemap:
    changefreq: monthly
    priority: 1.03
feed:
    description: Projects
    limit: 10
---

Using any FrontMatter you prefer, of course. Each child-page, ie. folder below this page, is treated as a note when you visit the page. For example, a typical note may be in the folder /user/pages/projects/et-genus-fumant-et-omnes, and look like this:

---
title: 'Et genus fumant et omnes'
color: orange
taxonomy:
    category: Ongoing
    tag:
        - 'Lorem Ipsum'
---

- [x] Finish my changes
- [ ] Push my commits to GitHub
- [ ] Open a pull request

The headers color and taxonomy are completely optional, and only the former affects the styling of the note. taxonomy.category should be a string, not a list. taxonomy.tag should, however, be a list of tags. color may be one of:

  • white: White
  • red: Red
  • orange: Orange
  • yellow: Yellow
  • green: Green
  • teal: Teal
  • blue: Blue
  • dark-blue: Dark Blue
  • purple: Purple
  • pink: Pink
  • brown: Brown
  • gray: Gray

Categories are defined as a list in site.yaml, for example:

taxonomies: [category,tag]
categories:
  - Idea
  - Ongoing
  - Done
  - Archived

Note that taxonomies: [category,tag] is necessary for Grav to recognize that your pages use the category and tag taxonomies.

With the Admin-plugin

If you are using the Admin-plugin, this is very easy to manage when editing a page:

Style options:

Project Space

These settings are in the Options-tab, just below where you change the settings for Publishing when editing a page in Admin. The setting to "Truncate words" can be either an integer, ie. a number above 1, or a boolean state, ie. 1 or 0. This limits the amount of words in each note when rendered through default.html.twig.

Taxonomy options:

Project Space

Available layouts, filters and sorting

All options are managed through the Tools-menu, and applied as URL-parameters to the page.

Display mode (display):

  • Blocks (default): Masonry-layout
  • List: Listed vertically
  • Category: Grouped by category, list
  • Color: Grouped by color, list

Date range (start and end):

  • Start: Date to start search at
  • End: Date to stop search at

Order (sort-by and sort-dir):

  • Sort by: Name of post (title), date of post (date), or name of post's folder (folder)
  • Sort direction: Ascending (asc) or descending (desc)
  • Limit: Amount of posts to show per page (INT)

Category (category)

Comma-separated list of categories to include, URL encoded. These are defined as a list in site.yaml.

Color (color)

Comma-separated list of colors to include, URL encoded. Colors are hard-coded within the plugin for proper rendering in the interface(s).

Tag (tag)

Comma-separated list of tags to include, URL encoded. These are generated from all available posts.

Installation

Installing the Project Space theme can be done in one of two ways. The GPM (Grav Package Manager) installation method enables you to quickly and easily install the theme with a simple terminal command, while the manual method enables you to do so via a zip file.

GPM Installation (Preferred)

The simplest way to install this theme is via the Grav Package Manager (GPM) through your system's Terminal (also called the command line). From the root of your Grav install type:

bin/gpm install project-space

This will install the Project Space theme into your /user/themes directory within Grav. Its files can be found under /your/site/grav/user/themes/project-space.

Manual Installation

To install this theme, just download the zip version of this repository and unzip it under /your/site/grav/user/themes. Then, rename the folder to project-space.

You should now have all the theme files under

/your/site/grav/user/themes/project-space

Dependencies

Compiling CSS

Use a SCSS-compiler, like LibSass, eg. node-sass and compiled src/scss/screen.scss to css/screen.css in the theme-folder. For example: node-sass --watch --source-map true src/scss/screen.scss css/screen.css. Requires Node-modules to be installed first.

License

Based on the Masonry Theme, which is a port of the Masonry Theme for Ghost.

This theme is free and open source software, distributed under the MIT License.