# Open Project theme by Ribose
Open Project is a Jekyll theme (with the accompanying plugin)
aiming to help organizations and individuals present
open-source software and specifications in a navigable and elegant way.
Open Project fits two types of sites:
that describe one individual project, and that combine projects into sort of an open hub.
**Demo**: See [Ribose Open](https://open.ribose.com/) project sites—for example,
[Metanorma](https://www.metanorma.com),
[RNP](https://www.rnpgp.com),
[Cryptode](https://www.cryptode.com),
[Relaton](https://www.relaton.com).
See also: CI_OPS for how to set up automated build and deployment of sites
to AWS S3.
## Contents
* Creating a site: [how to](#starting-a-site-with-this-theme)
* [General site setup](#general-setup)
* [Hub site setup](#hub-site)
* [Project site setup](#project-site) and describing your software and specs
* Customizing site looks:
* [Style customization](#style-customization)
* [SVG guidelines](#svg-guidelines)
* [Content guidelines](#content-guidelines)
* [Authoring content](#authoring-content)
* References:
* [Layouts](#theme-layouts)
* [Includes](#theme-includes)
## Starting a site with this theme
### Getting started with Ruby and Jekyll
The currently recommended Ruby version is 2.6.
(In case you aren’t using Ruby often, the easiest way to install one may be with RVM.)
The currently recommended Jekyll version is 3 or newer
(read about [Jekyll installation](https://jekyllrb.com/docs/#instructions)).
Note: this theme is known to not work with Ruby older than 2.3,
and hasn’t been tested on newer versions.
### Start new Jekyll site
jekyll new my-open-site
If you use Git for site source version management,
see the “Extra .gitignore rules” section below
for additional lines you should add to your `.gitignore`.
### Installing theme
Add this line to your Jekyll site's `Gemfile`,
replacing default theme requirement:
```ruby
gem "jekyll-theme-open-project"
```
(Jekyll’s default theme was “minima” at the time of this writing.)
Also in the `Gemfile`, add two important plugins to the `:jekyll_plugins` group.
(The SEO tag plugin is not mandatory, but these docs assume you use it.)
```ruby
group :jekyll_plugins do
gem "jekyll-seo-tag"
gem "jekyll-sitemap"
gem "jekyll-data"
gem "jekyll-asciidoc"
gem "jekyll-theme-open-project-helpers"
gem "jekyll-external-links"
# ...other plugins, if you use any
end
```
Execute the following to install dependencies:
$ bundle
### Configuring site
Edit _config.yml to add necessary site-wide configuration options,
and add files and folders to site contents. This step depends
on the type of site you’re creating: hub or individual project site.
Further sections explain core concepts of open project and hub, and go
into detail about how to configure a project or hub site.
### Building site
Execute to build the site locally and watch for changes:
$ bundle exec jekyll serve --host mysite.local --port 4000
This assumes you have mysite.local mapped in your hosts file,
otherwise omit --host and it’ll use “localhost” as domain name.
## General setup
These settings apply to both site types (hub and project).
- You may want to remove the default about.md page added by Jekyll,
as this theme does not account for its existence.
- Add `hero_include: home-hero.html` to YAML frontmatter
in your main `index.md`.
- Add following items to site’s _config.yml
(and don’t forget to remove default theme requirement there):
```yaml
url: https://example.com
# Site’s URL with protocol, without optional www. prefix
# and without trailing slash.
# Used e.g. for marking external links in docs and blog posts.
github_repo_url: https://github.com/example-org/example.com
# URL to GitHub repo for the site.
# Using GitHub & specifying this setting is currently required
# for “suggest edits” buttons to show on documentation pages.
title: Example
description: The example of examples
# The above two are used by jekyll-seo-tag for things such as
# `
` and `` tags, as well as elsewhere by the theme.
tagline: Because examples are very important
# Used in hero unit on main page.
social:
links:
- https://twitter.com/
- https://github.com/
legal:
name: Full Organization Name
tos_link: https://www.example.com/tos
privacy_policy_link: https://www.example.com/privacy
# no_auto_fontawesome: yes
# Specify this only if you want to disable free Font Awesome CDN.
# IMPORTANT: In this case your site MUST specify include head.html with appropriate scripts.
# Theme design relies on Font Awesome “solid” and “brands” icon styles
# and expects them to be included in SVG mode.
# Without this setting, one-file FA distribution, all.js, is included from free FA CDN.
theme: jekyll-theme-open-project
permalink: /blog/:month-:day-:year/:title/
```
### Logo
By “logo” is meant the combination of site symbol as a graphic
and name as word(s).
- **Symbol** is basically an icon for the site.
Should look OK in dimensions of 30x30px, and fit inside a square.
Should be in SVG format (see also the SVG guidelines section).
- Drop your site-wide symbol in /assets/symbol.svg.
- Drop PNG renders of the symbol as favicon.png and favicon-192x192.png
under /assets/; use transparent background.
- **Site name** displayed to the right of the symbol.
Limit the name to 1-3 words.
Drop a file called `title.html` in the root of your site.
In its contents you can go as simple as `{{ site.name }}`
and as complex as a custom SVG shape.
Note that it must look good when placed inside ~30px tall container.
In case of SVG, SVG guidelines apply.
If you want to style SVG with CSS specifying rules for .site-logo descendants:
take care, as this may cause issues when hub site’s logo is used in context
of a project site. (You can use inline styling within the SVG.)
### Blog
Project sites and hub site can have a blog.
In case of the hub, blog index will show combined timeline
from hub blog and projects’ blogs.
#### Index
Create blog index page as _pages/blog.html, with nothing but frontmatter.
Use layout called "blog-index", pass `hero_include: index-page-hero.html`,
and set `title` and `description` as appropriate for blog index page.
Example:
```yaml
---
title: Blog
description: >-
Get the latest announcements and technical how-to’s
about our software and projects.
layout: blog-index
hero_include: index-page-hero.html
---
```
#### Posts
In general, posts are authored as per usual Jekyll setup.
It is recommended that you provide explicit hand-crafted post excerpts,
as automatically-generated excerpts may break post card markup.
Theme also anticipates author information within frontmatter.
Together with excerpts, here’s how post frontmatter (in addition to anything
already required by Jekyll) looks like:
```yaml
---
# Required
authors:
- email:
use_picture: <`gravatar` (default), `assets`, an image path relative to assets/, or `no`>
name:
social_links:
- https://twitter.com/username
- https://facebook.com/username
- https://linkedin.com/in/username
# Recommended
excerpt: >-
Post excerpt goes here, and supports inline HTML formatting only.
# Optional. Cover image. Would normally refer to an illustration from within the post.
# First post, if it has card_image specified, will be displayed with bigger layout
# featuring the image.
card_image:
---
```
For hub-wide posts, put posts under _posts/ in site root and name files e.g.
`2018-04-20-welcome-to-jekyll.markdown` (no change from the usual Jekyll setup).
If ``use_picture`` is set to "assets", author photo would be expected to
reside under `assets/blog/authors/.jpg`.
For project posts, see below the project site section.
## Hub site
The hub represents your company or department, links to all projects
and offers a software and specification index.
Additional items allowed/expected in _config.yml:
```yaml
is_hub: true
# Since a hub would typically represent an organization as opposed
# to individual, this would make sense:
seo:
type: Organization
tag_namespaces:
software:
namespace_id: "Human-readable namespace name"
# E.g.:
# writtenin: "Written in"
specs:
namespace_id: "Human-readable namespace name"
```
### Project, spec and software data
Each project subdirectory
must contain a file "index.md" with frontmatter like this:
```yaml
title: Sample Awesome Project
description: A sentence or two about what the project is for.
tagline: Because awesomeness is underrated
# Whether the project is included in featured three projects on hub home page
featured: true | false
site:
git_repo_url:
home_url:
tags: [some, tags]
```
### Project index page
Create software index in _pages/projects.html, with nothing but frontmatter.
Use layout called "project-index", pass `hero_include: index-page-hero.html`,
and set `title` and `description` as appropriate.
Example:
```yaml
---
title: Open projects
description: Projecting goodness into the world!
layout: project-index
hero_include: index-page-hero.html
---
```
### Software index page
Create software index in _pages/software.html, with nothing but frontmatter.
Use layout called "software-index", pass `hero_include: index-page-hero.html`,
and set `title` and `description` as appropriate.
Example:
```yaml
---
title: Software
description: Open-source software developed with MyCompany’s cooperation.
layout: software-index
hero_include: index-page-hero.html
---
```
### Specification index page
Create spec index in _pages/specs.html, with nothing but frontmatter.
Use layout called "spec-index", pass `hero_include: index-page-hero.html`,
and set `title` and `description` as appropriate.
Example:
```yaml
---
title: Specifications
description: Because specifications are cool!
layout: spec-index
hero_include: index-page-hero.html
---
```
## Project site
For standalone sites of each of your projects, _config.yml should include
site-wide `title` that is the same as project name.
Additional items allowed/expected in _config.yml:
```yaml
authors:
- name: Your Name
email: your-email@example.com
author: "Company or Individual Name Goes Here"
# Any given open project site is assumed to be part of a hub,
# and hub details in this format are required to let project site
# reference the hub.
parent_hub:
git_repo_url: git@example.com:path/to-repo.git
home_url: https://www.example.com/
algolia_search:
api_key: ''
index_name: ''
# Only add this if you want to use Algolia’s search on your project site.
tag_namespaces:
software:
namespace_id: "Human-readable namespace name"
# E.g.:
# writtenin: "Written in"
specs:
namespace_id: "Human-readable namespace name"
# NOTE: Tag namespaces must match corresponding hub site’s configuration entry.
landing_priority: [custom_intro, blog, specs, software]
# Which order should sections be displayed on landing.
#
# Default order: [software, specs, blog]
# Depending on your project’s focus & pace of development you may want to change that.
# Supported sections: featured_posts, featured_software, featured_specs, custom_intro.
#
# If you use custom_intro, project site must define an include "custom-intro.html".
# The contents of that include will be wrapper in section.custom-intro tag.
# Inside the include you’d likely want to have introductory summary wrapped
# in section.summary, and possibly custom call-to-action buttons
# (see Metanorma.com site for an example).
```
### File structure
Each project is expected to have a machine-readable and unique name, a title,
a description, a symbol, one or more software products and/or specs.
Blog, docs, and other pages are optional.
Following data structure is used for project sites:
- / # Jekyll site root containing _config.yml
- assets/
- symbol.svg # Required — project logo
- _software/
- .adoc
- /
- assets/
- symbol.svg
- _specs/
- .adoc
- _pages/
- blog.html
- software.html # Software index
- specs.html # Spec index
- docs.html
- docs/ # Project-wide documentation
- getting-started.adoc
- .adoc
- _posts/ # Blog
- 2038-02-31-blog-post-title.markdown
- _layouts/
- docs.html
### Blog
Author project site blog posts as described in the general site setup section.
### Project docs
Two kinds of docs can coexist on a given open project site:
- Project-wide documentation. It’s well-suited for describing the idea behind the project,
the “whys”, for tutorials and similar.
- Documentation specific to a piece of software (of which there can be more than one
for any given open project). This may go in detail about that piece of software,
and things like implementation specifics, extended installation instructions,
development guidelines may go here.
This section is about project-wide docs, for software docs see software and specs section.
The suggested convention is to create
_pages/docs.adoc for the main documentation page, put other pages under docs/,
and create custom layout `docs.html` that inherits from `docs-base`, specifies
`html-class: docs-page` and provides `navigation` structure linking to all docs pages
in a hierarchy.
Example _layouts/docs.html:
```
---
layout: docs-base
html-class: docs-page
docs_title:
navigation:
items:
- title: Introduction
items:
- title: "Overview"
path: /docs/
- title: "Get started"
path: /docs/getting-started/
---
{{ content }}
```
Example _pages/docs.adoc:
```
---
layout: docs
title: Overview
html-class: >-
overview
# ^^ classes you can use to style the page in your custom CSS rules
---
:page-liquid:
Your main docs page goes here.
```
### Software and specs
An open project serves as an umbrella for related
software products and/or specifications.
Each product or spec is described by its own .adoc file with frontmatter,
placed under _software/ or _specs/ subdirectory (respectively)
of your open project’s Jekyll site.
A software product additionally is required to have a symbol in SVG format,
placed in /assets/symbol.svg within _software/ directory.
YAML frontmatter that is expected with both software and specs:
```yaml
title: A Few Words
# Shown to the user
# and used for HTML metadata if jekyll-seo-tag is enabled
description: A sentence.
# Not necessarily shown to the user,
# but used for HTML metadata if jekyll-seo-tag is enabled
tags: [Ruby, Python, RFC, ":"]
# Note: Avoid whitespaces and other characters that may make Jekyll
# percent-encode the tag in URLs. Replace " " (a regular space)
# with "_" (underline); underlines will be rewritten as spaces when tags
# are presented to site users.
# Tag can be prepended with a namespace to signify the type,
# e.g. chosen programming language or target viewer audience
# (see hub site configuration for tag namespace setup).
# Avoid long namespace/tag combos as they can overflow item’s card widget.
external_links:
- url: https://github.com/riboseinc/asciidoctor-rfc
- url: https://docs.rs/proj/ver/…/
- { url: https://example.com/, title: "Custom title" }
# External links.
# For software, typically points to docs sites or source code repository.
# For specs, this usually contains RFC, IETF links, spec source code.
# * Link label can be specified with the title key.
# Select URLs are recognized and an appropriate label
# (possibly icon) is shown by default,
# otherwise you **should** specify the title.
# Currently, recognized URLs include
# GitHub, Docs.rs, RubyDoc,
# ietf.org/html/rfcN, datatracker.ietf.org/doc/…
# * Order links according to importance for project site visitors.
# The first link will be highlighted as primary.
feature_with_priority: 1
# With this key, software or spec will be featured on home
# page of project site. Lower number means higher priority
# (as in, priority no. 1 means topmost item on home page,
# as long as there aren’t others with the same value).
# If no documents in the collection have this key,
# items on home will be ordered according to Jekyll’s
# default behavior.
```
### Software product
YAML frontmatter required for software:
```yaml
repo_url: https://github.com/riboseinc/asciidoctor-rfc
# Required.
# Used for things like showing how long ago
# the was project updated last.
docs_source:
git_repo_url: git@example.com:path/to-repo.git
git_repo_subtree: docs
# Documentation, the contents of which will be made part of the project site.
# See the nearby section about documentation.
```
#### Displaying software docs
Inside the repository and optionally subtree specified under `docs`
in above sample, place a file `navigation.adoc` (or `navigation.md`) containing
only frontmatter, following this sample:
```yaml
---
items:
- title: Introduction
path: intro/
items:
- { title: Overview, path: intro/overview/ }
- { title: Installation, path: intro/installation/ }
- { title: Usage, path: usage/ }
---
= Navigation
```
In the same directory, place the required document pages—in this case, `overview.adoc`,
`installation.adoc`, and `basic-usage.adoc`. Each file must contain
standard YAML frontmatter with at least `title` specified.
During project site build, Jekyll pulls docs for software that’s part of the
site and builds them, converting pages from Markdown/AsciiDoc to HTML and adding
the navigation.
### Specification
YAML frontmatter specific to specs:
```yaml
spec_source:
git_repo_url: https://github.com//
git_repo_subtree: images
build:
engine: png_diagrams
# See below about building the spec from its source
# to be displayed on the site.
navigation:
sections:
- name: Model diagrams
items:
- title: "CSAND Normal Document"
path: "Csand_NormalDocument"
description: ""
ignore_missing: yes
```
#### Displaying specification contents
While software doc pages are currently simply generated using standard
Jekyll means from Markdown/AsciiDoc into HTML,
building specs is handled in a more flexible way,
delegating the source -> Open Project site-compatible HTML conversion
to an engine.
For specs to be built, provide build config and navigation
in the YAML frontmatter of corresponding `_specs/.adoc` file
as described in spec YAML frontmatter sample.
For now, only the `png_diagrams` engine is supported, with Metanorma-based
project build engine to come.
During project site build, Jekyll pulls spec sources that’s part of the
site and builds them, converting pages from source markup to HTML using
the engine specified, and adding the navigation.
### Symbol
Should look OK in dimensions of about 30x30, 60x60px. Must fit in a square.
Should be in SVG format (see also the SVG guidelines section).
Place the symbol in assets/symbol.svg within project directory.
## SVG guidelines
- Ensure SVG markup does not use IDs. It may appear multiple times
on the page hence IDs would fail markup validation.
- Ensure root `