@@ -10,7 +10,13 @@ | |||
- All Tera global fns are now rebuilt on changes | |||
- Use flags for port/interface in `gutenberg serve` | |||
- Fix various issues with headers markdown rendering | |||
- Rename `insert_anchor` in section front-matter to `insert_anchor_links` | |||
- Remove `insert_anchor_links` from the config: it wasn't used | |||
- Add `class` variable to `gist` shortcode | |||
- Add reading analytics to sections content | |||
- Add config to sitemap template | |||
- Add `permalink` to all taxonomy items (tags & categories) | |||
- Tags in the tags page are now sorting alphabetically instead of by number of pages in them | |||
## 0.1.3 (2017-08-31) | |||
@@ -47,10 +47,6 @@ pub struct Config { | |||
pub generate_tags_pages: Option<bool>, | |||
/// Whether to generate categories and individual tag categories if some pages have them. Defaults to true | |||
pub generate_categories_pages: Option<bool>, | |||
/// Whether to insert a link for each header like in Github READMEs. Defaults to false | |||
/// The default template can be overridden by creating a `anchor-link.html` template and CSS will need to be | |||
/// written if you turn that on. | |||
pub insert_anchor_links: Option<bool>, | |||
/// Whether to compile the `sass` directory and output the css files into the static folder | |||
pub compile_sass: Option<bool>, | |||
@@ -84,7 +80,6 @@ impl Config { | |||
set_default!(config.rss_limit, 20); | |||
set_default!(config.generate_tags_pages, false); | |||
set_default!(config.generate_categories_pages, false); | |||
set_default!(config.insert_anchor_links, false); | |||
set_default!(config.compile_sass, false); | |||
set_default!(config.extra, HashMap::new()); | |||
@@ -174,7 +169,6 @@ impl Default for Config { | |||
rss_limit: Some(10_000), | |||
generate_tags_pages: Some(true), | |||
generate_categories_pages: Some(true), | |||
insert_anchor_links: Some(false), | |||
compile_sass: Some(false), | |||
extra: None, | |||
build_timestamp: Some(1), | |||
@@ -10,6 +10,7 @@ use front_matter::{SectionFrontMatter, split_section_content}; | |||
use errors::{Result, ResultExt}; | |||
use utils::fs::read_file; | |||
use utils::templates::render_template; | |||
use utils::site::get_reading_analytics; | |||
use rendering::{Context, Header, markdown_to_html}; | |||
use page::Page; | |||
@@ -96,7 +97,7 @@ impl Section { | |||
config.highlight_theme.clone().unwrap(), | |||
&self.permalink, | |||
permalinks, | |||
self.meta.insert_anchor.unwrap() | |||
self.meta.insert_anchor_links.unwrap() | |||
); | |||
let res = markdown_to_html(&self.raw_content, &context)?; | |||
self.content = res.0; | |||
@@ -139,7 +140,7 @@ impl Section { | |||
impl ser::Serialize for Section { | |||
fn serialize<S>(&self, serializer: S) -> StdResult<S::Ok, S::Error> where S: ser::Serializer { | |||
let mut state = serializer.serialize_struct("section", 10)?; | |||
let mut state = serializer.serialize_struct("section", 12)?; | |||
state.serialize_field("content", &self.content)?; | |||
state.serialize_field("permalink", &self.permalink)?; | |||
state.serialize_field("title", &self.meta.title)?; | |||
@@ -149,6 +150,9 @@ impl ser::Serialize for Section { | |||
state.serialize_field("permalink", &self.permalink)?; | |||
state.serialize_field("pages", &self.pages)?; | |||
state.serialize_field("subsections", &self.subsections)?; | |||
let (word_count, reading_time) = get_reading_analytics(&self.raw_content); | |||
state.serialize_field("word_count", &word_count)?; | |||
state.serialize_field("reading_time", &reading_time)?; | |||
state.serialize_field("toc", &self.toc)?; | |||
state.end() | |||
} | |||
@@ -33,7 +33,7 @@ pub fn sort_pages(pages: Vec<Page>, sort_by: SortBy) -> (Vec<Page>, Vec<Page>) { | |||
(can_be_sorted, cannot_be_sorted) | |||
} | |||
/// Horribly inefficient way to set previous and next on each pages | |||
/// Horribly inefficient way to set previous and next on each pages that skips drafts | |||
/// So many clones | |||
pub fn populate_previous_and_next_pages(input: &[Page]) -> Vec<Page> { | |||
let mut res = Vec::with_capacity(input.len()); | |||
@@ -28,9 +28,13 @@ lazy_static! { | |||
#[derive(Debug, Copy, Clone, PartialEq, Serialize, Deserialize)] | |||
#[serde(rename_all = "lowercase")] | |||
pub enum SortBy { | |||
/// Most recent to oldest | |||
Date, | |||
/// Lower order comes last | |||
Order, | |||
/// Lower weight comes first | |||
Weight, | |||
/// No sorting | |||
None, | |||
} | |||
@@ -33,6 +33,7 @@ pub struct PageFrontMatter { | |||
/// Integer to use to order content. Highest is at the bottom, lowest first | |||
pub weight: Option<usize>, | |||
/// All aliases for that page. Gutenberg will create HTML templates that will | |||
/// redirect to this | |||
#[serde(skip_serializing)] | |||
pub aliases: Option<Vec<String>>, | |||
/// Specify a template different from `page.html` to use for that page | |||
@@ -20,8 +20,8 @@ pub struct SectionFrontMatter { | |||
/// Whether to sort by "date", "order", "weight" or "none". Defaults to `none`. | |||
#[serde(skip_serializing)] | |||
pub sort_by: Option<SortBy>, | |||
/// The weight for this section. This is used by the parent section to order its subsections. | |||
/// Higher values means it ends at the end. | |||
/// Used by the parent section to order its subsections. | |||
/// Higher values means it will be at the end. | |||
#[serde(skip_serializing)] | |||
pub weight: Option<usize>, | |||
/// Optional template, if we want to specify which template to render for that page | |||
@@ -33,10 +33,9 @@ pub struct SectionFrontMatter { | |||
/// Path to be used by pagination: the page number will be appended after it. Defaults to `page`. | |||
#[serde(skip_serializing)] | |||
pub paginate_path: Option<String>, | |||
/// Whether to insert a link for each header like in Github READMEs. Defaults to false | |||
/// The default template can be overridden by creating a `anchor-link.html` template and CSS will need to be | |||
/// written if you turn that on. | |||
pub insert_anchor: Option<InsertAnchor>, | |||
/// Whether to insert a link for each header like the ones you can see in this site if you hover one | |||
/// The default template can be overridden by creating a `anchor-link.html` in the `templates` directory | |||
pub insert_anchor_links: Option<InsertAnchor>, | |||
/// Whether to render that section or not. Defaults to `true`. | |||
/// Useful when the section is only there to organize things but is not meant | |||
/// to be used directly, like a posts section in a personal site | |||
@@ -70,8 +69,8 @@ impl SectionFrontMatter { | |||
f.sort_by = Some(SortBy::None); | |||
} | |||
if f.insert_anchor.is_none() { | |||
f.insert_anchor = Some(InsertAnchor::None); | |||
if f.insert_anchor_links.is_none() { | |||
f.insert_anchor_links = Some(InsertAnchor::None); | |||
} | |||
if f.weight.is_none() { | |||
@@ -111,7 +110,7 @@ impl Default for SectionFrontMatter { | |||
paginate_path: Some(DEFAULT_PAGINATE_PATH.to_string()), | |||
render: Some(true), | |||
redirect_to: None, | |||
insert_anchor: Some(InsertAnchor::None), | |||
insert_anchor_links: Some(InsertAnchor::None), | |||
extra: None, | |||
} | |||
} | |||
@@ -177,7 +177,8 @@ impl Site { | |||
.map(|entry| { | |||
let path = entry.as_path(); | |||
Section::from_file(path, config) | |||
}).collect::<Vec<_>>() | |||
}) | |||
.collect::<Vec<_>>() | |||
}; | |||
let pages = { | |||
@@ -189,7 +190,8 @@ impl Site { | |||
.map(|entry| { | |||
let path = entry.as_path(); | |||
Page::from_file(path, config) | |||
}).collect::<Vec<_>>() | |||
}) | |||
.collect::<Vec<_>>() | |||
}; | |||
// Kinda duplicated code for add_section/add_page but necessary to do it that | |||
@@ -224,8 +226,7 @@ impl Site { | |||
let config = &self.config; | |||
self.pages.par_iter_mut() | |||
.map(|(_, page)| page) | |||
.map(|page| { | |||
.map(|(_, page)| { | |||
let insert_anchor = pages_insert_anchors[&page.file.path]; | |||
page.render_markdown(permalinks, tera, config, insert_anchor) | |||
}) | |||
@@ -233,8 +234,7 @@ impl Site { | |||
.reduce(|| Ok(()), Result::and)?; | |||
self.sections.par_iter_mut() | |||
.map(|(_, section)| section) | |||
.map(|section| section.render_markdown(permalinks, tera, config)) | |||
.map(|(_, section)| section.render_markdown(permalinks, tera, config)) | |||
.fold(|| Ok(()), Result::and) | |||
.reduce(|| Ok(()), Result::and)?; | |||
} | |||
@@ -295,7 +295,7 @@ impl Site { | |||
/// Defaults to `AnchorInsert::None` if no parent section found | |||
pub fn find_parent_section_insert_anchor(&self, parent_path: &PathBuf) -> InsertAnchor { | |||
match self.sections.get(&parent_path.join("_index.md")) { | |||
Some(s) => s.meta.insert_anchor.unwrap(), | |||
Some(s) => s.meta.insert_anchor_links.unwrap(), | |||
None => InsertAnchor::None | |||
} | |||
} | |||
@@ -366,6 +366,7 @@ impl Site { | |||
// TODO: can we pass a reference? | |||
let (tags, categories) = Taxonomy::find_tags_and_categories( | |||
&self.config, | |||
self.pages | |||
.values() | |||
.filter(|p| !p.is_draft()) | |||
@@ -647,6 +648,7 @@ impl Site { | |||
} | |||
} | |||
context.add("tags", &tags); | |||
context.add("config", &self.config); | |||
let sitemap = &render_template("sitemap.xml", &self.tera, &context, self.config.theme.clone())?; | |||
@@ -2,5 +2,5 @@ | |||
title = "Posts" | |||
paginate_by = 2 | |||
template = "section_paginated.html" | |||
insert_anchor = "left" | |||
insert_anchor_links = "left" | |||
+++ |
@@ -1,4 +1,5 @@ | |||
extern crate site; | |||
extern crate front_matter; | |||
extern crate tempdir; | |||
use std::env; | |||
@@ -8,6 +9,7 @@ use std::io::prelude::*; | |||
use tempdir::TempDir; | |||
use site::Site; | |||
use front_matter::InsertAnchor; | |||
#[test] | |||
@@ -296,6 +298,7 @@ fn can_build_site_and_insert_anchor_links() { | |||
path.push("test_site"); | |||
let mut site = Site::new(&path, "config.toml").unwrap(); | |||
site.load().unwrap(); | |||
let tmp_dir = TempDir::new("example").expect("create temp dir"); | |||
let public = &tmp_dir.path().join("public"); | |||
site.set_output_path(&public); | |||
@@ -32,18 +32,30 @@ pub enum TaxonomyKind { | |||
pub struct TaxonomyItem { | |||
pub name: String, | |||
pub slug: String, | |||
pub permalink: String, | |||
pub pages: Vec<Page>, | |||
} | |||
impl TaxonomyItem { | |||
pub fn new(name: &str, pages: Vec<Page>) -> TaxonomyItem { | |||
// We shouldn't have any pages without dates there | |||
let (sorted_pages, _) = sort_pages(pages, SortBy::Date); | |||
pub fn new(name: &str, kind: TaxonomyKind, config: &Config, pages: Vec<Page>) -> TaxonomyItem { | |||
// Taxonomy are almost always used for blogs so we filter by dates | |||
// and it's not like we can sort things across sections by anything other | |||
// than dates | |||
let (mut pages, ignored_pages) = sort_pages(pages, SortBy::Date); | |||
let slug = slugify(name); | |||
let permalink = { | |||
let kind_path = if kind == TaxonomyKind::Tags { "tag" } else { "category" }; | |||
config.make_permalink(&format!("/{}/{}", kind_path, slug)) | |||
}; | |||
// We still append pages without dates at the end | |||
pages.extend(ignored_pages); | |||
TaxonomyItem { | |||
name: name.to_string(), | |||
slug: slugify(name), | |||
pages: sorted_pages, | |||
permalink, | |||
slug, | |||
pages, | |||
} | |||
} | |||
} | |||
@@ -57,21 +69,12 @@ pub struct Taxonomy { | |||
} | |||
impl Taxonomy { | |||
// TODO: take a Vec<&'a Page> if it makes a difference in terms of perf for actual sites | |||
pub fn find_tags_and_categories(all_pages: &[Page]) -> (Taxonomy, Taxonomy) { | |||
pub fn find_tags_and_categories(config: &Config, all_pages: &[Page]) -> (Taxonomy, Taxonomy) { | |||
let mut tags = HashMap::new(); | |||
let mut categories = HashMap::new(); | |||
// Find all the tags/categories first | |||
for page in all_pages { | |||
// Don't consider pages without pages for tags/categories as that's the only thing | |||
// we can sort pages with across sections | |||
// If anyone sees that comment and wonder wtf, please open an issue as I can't think of | |||
// usecases other than blog posts for built-in taxonomies | |||
if page.meta.date.is_none() { | |||
continue; | |||
} | |||
if let Some(ref category) = page.meta.category { | |||
categories | |||
.entry(category.to_string()) | |||
@@ -90,20 +93,20 @@ impl Taxonomy { | |||
} | |||
// Then make TaxonomyItem out of them, after sorting it | |||
let tags_taxonomy = Taxonomy::new(TaxonomyKind::Tags, tags); | |||
let categories_taxonomy = Taxonomy::new(TaxonomyKind::Categories, categories); | |||
let tags_taxonomy = Taxonomy::new(TaxonomyKind::Tags, config, tags); | |||
let categories_taxonomy = Taxonomy::new(TaxonomyKind::Categories, config, categories); | |||
(tags_taxonomy, categories_taxonomy) | |||
} | |||
fn new(kind: TaxonomyKind, items: HashMap<String, Vec<Page>>) -> Taxonomy { | |||
fn new(kind: TaxonomyKind, config: &Config, items: HashMap<String, Vec<Page>>) -> Taxonomy { | |||
let mut sorted_items = vec![]; | |||
for (name, pages) in &items { | |||
sorted_items.push( | |||
TaxonomyItem::new(name, pages.clone()) | |||
TaxonomyItem::new(name, kind, config, pages.clone()) | |||
); | |||
} | |||
sorted_items.sort_by(|a, b| b.pages.len().cmp(&a.pages.len())); | |||
sorted_items.sort_by(|a, b| a.name.cmp(&b.name)); | |||
Taxonomy { | |||
kind, | |||
@@ -157,3 +160,55 @@ impl Taxonomy { | |||
.chain_err(|| format!("Failed to render {} page.", name)) | |||
} | |||
} | |||
#[cfg(test)] | |||
mod tests { | |||
use super::*; | |||
use config::Config; | |||
use content::Page; | |||
#[test] | |||
fn can_make_taxonomies() { | |||
let config = Config::default(); | |||
let mut page1 = Page::default(); | |||
page1.meta.tags = Some(vec!["rust".to_string(), "db".to_string()]); | |||
page1.meta.category = Some("Programming tutorials".to_string()); | |||
let mut page2 = Page::default(); | |||
page2.meta.tags = Some(vec!["rust".to_string(), "js".to_string()]); | |||
page2.meta.category = Some("Other".to_string()); | |||
let mut page3 = Page::default(); | |||
page3.meta.tags = Some(vec!["js".to_string()]); | |||
let pages = vec![page1, page2, page3]; | |||
let (tags, categories) = Taxonomy::find_tags_and_categories(&config, &pages); | |||
assert_eq!(tags.items.len(), 3); | |||
assert_eq!(categories.items.len(), 2); | |||
assert_eq!(tags.items[0].name, "db"); | |||
assert_eq!(tags.items[0].slug, "db"); | |||
assert_eq!(tags.items[0].permalink, "http://a-website.com/tag/db/"); | |||
assert_eq!(tags.items[0].pages.len(), 1); | |||
assert_eq!(tags.items[1].name, "js"); | |||
assert_eq!(tags.items[1].slug, "js"); | |||
assert_eq!(tags.items[1].permalink, "http://a-website.com/tag/js/"); | |||
assert_eq!(tags.items[1].pages.len(), 2); | |||
assert_eq!(tags.items[2].name, "rust"); | |||
assert_eq!(tags.items[2].slug, "rust"); | |||
assert_eq!(tags.items[2].permalink, "http://a-website.com/tag/rust/"); | |||
assert_eq!(tags.items[2].pages.len(), 2); | |||
assert_eq!(categories.items[0].name, "Other"); | |||
assert_eq!(categories.items[0].slug, "other"); | |||
assert_eq!(categories.items[0].permalink, "http://a-website.com/category/other/"); | |||
assert_eq!(categories.items[0].pages.len(), 1); | |||
assert_eq!(categories.items[1].name, "Programming tutorials"); | |||
assert_eq!(categories.items[1].slug, "programming-tutorials"); | |||
assert_eq!(categories.items[1].permalink, "http://a-website.com/category/programming-tutorials/"); | |||
assert_eq!(categories.items[1].pages.len(), 1); | |||
} | |||
} |
@@ -1,3 +1,3 @@ | |||
<div> | |||
<div {% if class %}class="{{class}}"{% endif %}> | |||
<script src="{{ url }}.js{% if file %}?file={{file}}{% endif %}"></script> | |||
</div> |
@@ -1,9 +1,10 @@ | |||
base_url = "https://example.com" | |||
title = "Gutenberg - your one-stop static site engine" | |||
title = "Gutenberg" | |||
description = "Everything you need to make a static site engine in one binary. And it's fast" | |||
compile_sass = true | |||
highlight_code = true | |||
insert_anchor_links = true | |||
[extra] | |||
author = "Vincent Prouillet" |
@@ -10,24 +10,18 @@ Getting started | |||
Content | |||
- Organisation | |||
- Pages | |||
- Sections | |||
- Pages | |||
- Shortcodes | |||
- Internal links | |||
- Internal links & deep linking | |||
- Table of contents | |||
- Deep linking (# links) | |||
- Syntax highlighting | |||
- Pagination | |||
- Tag & categories | |||
- RSS | |||
- Sitemap | |||
Templates | |||
- Intro | |||
- Each kind of page and the variables available | |||
- Built-in global functions | |||
- Built-in filters | |||
- Debugging | |||
Theme | |||
- Installing & customising a theme | |||
@@ -0,0 +1,7 @@ | |||
+++ | |||
title = "Content" | |||
weight = 2 | |||
sort_by = "weight" | |||
redirect_to = "documentation/content/overview" | |||
insert_anchor_links = "left" | |||
+++ |
@@ -0,0 +1,37 @@ | |||
+++ | |||
title = "Internal links & deep linking" | |||
weight = 50 | |||
+++ | |||
## Header id and anchor insertion | |||
While rendering the markdown content, a unique id will automatically be assigned to each header. This id is created | |||
by converting the header text to a [slug](https://en.wikipedia.org/wiki/Semantic_URL#Slug), appending numbers at the end | |||
if the slug already exists for that article. For example: | |||
```md | |||
# Something exciting! <- something-exciting | |||
## Example code <- example-code | |||
# Something else <- something-else | |||
## Example code <- example-code-1 | |||
``` | |||
## Anchor insertion | |||
It is possible to have Gutenberg automatically insert anchor links next to the header, as you can see on the site you are currently | |||
reading if you hover a title. | |||
This option is set at the section level, look up the `insert_anchor_links` variable on the | |||
[Section front-matter page](./documentation/content/section.md#front-matter). | |||
The default template is very basic and will need CSS tweaks in your project to look decent. | |||
If you want to change the anchor template, it can easily be overwritten by | |||
creating a `anchor-link.html` file in the `templates` directory. | |||
## Internal links | |||
Linking to other pages and their headers is so common that Gutenberg adds a | |||
special syntax to Markdown links to handle them: start the link with `./` and point to the `.md` file you want | |||
to link to. The path to the file starts from the `content` directory. | |||
For example, linking to a file located at `content/pages/about.md` would be `[my link](./pages/about.md)`. | |||
You can still link to a header directly: `[my link](./pages/about.md#example)` would work as expected, granted | |||
the `example` id exists on the header. |
@@ -0,0 +1,48 @@ | |||
+++ | |||
title = "Overview" | |||
weight = 10 | |||
+++ | |||
Gutenberg uses the folder structure to determine the site structure. | |||
Each folder in the `content` directory represents a [section](./documentation/content/section.md) | |||
that contains [pages](./documentation/content/page.md) : your `.md` files. | |||
```bash | |||
. | |||
└── content | |||
├── content | |||
│  └── something.md // -> https://mywebsite.com/content/something/ | |||
├── blog | |||
│  ├── cli-usage.md // -> https://mywebsite.com/blog/cli-usage/ | |||
│  ├── configuration.md // -> https://mywebsite.com/blog/configuration/ | |||
│  ├── directory-structure.md // -> https://mywebsite.com/blog/directory-structure/ | |||
│  ├── _index.md // -> https://mywebsite.com/blog/ | |||
│  └── installation.md // -> https://mywebsite.com/blog/installation/ | |||
└── landing | |||
└── _index.md // -> https://mywebsite.com/landing/ | |||
``` | |||
Obviously, each page path (the part after the `base_url`, for example `blog/`) can be customised by setting the wanted value | |||
in the [page front-matter](./documentation/content/page.md#front-matter). | |||
You might have noticed a file named `_index.md` in the example above. | |||
This file will be used for the metadata and content of the section itself and is not considered a page. | |||
To make sure the terminology used in the rest of the documentation is understood, let's go over the example above. | |||
The `content` directory in this case has three `sections`: `content`, `blog` and `landing`. The `content` section has only | |||
one page, `something.md`, the `landing` section has no page and the `blog` section has 4 pages: `cli-usage.md`, `configuration.md`, `directory-structure.md` | |||
and `installation.md`. | |||
While not shown in the example, sections can be nested indefinitely. | |||
The `content` directory is not limited to markup files though: it's natural to want to co-locate a page and some related | |||
assets. Gutenberg supports that pattern out of the box: create a folder, add a `index.md` file and as many non-markdown as you want. | |||
Those assets will be copied in the same folder when building so you can just use a relative path to access them. | |||
```bash | |||
└── with-assets | |||
├── index.md | |||
└── yavascript.js | |||
``` |
@@ -0,0 +1,71 @@ | |||
+++ | |||
title = "Page" | |||
weight = 30 | |||
+++ | |||
A page is any file ending with `.md` in the `content` directory, except files | |||
named `_index/md`. | |||
## Front-matter | |||
The front-matter is a set of metadata embedded in a file. In Gutenberg, | |||
it is at the beginning of the file, surrounded by `+++` and uses TOML. | |||
None of the front-matter variables are mandatory. However the opening and closing `+++` are required even if there are | |||
no variables in it. | |||
Here is an example page with all the variables available: | |||
```md | |||
+++ | |||
title = "" | |||
description = "" | |||
# The date of the post. | |||
# 2 formats are allowed: YYYY-MM-DD (2012-10-02) and RFC3339 (2002-10-02T15:00:00Z) | |||
date = "" | |||
# A draft page will not be present in prev/next pagination | |||
draft = false | |||
# If filled, it will use that slug instead of the filename to make up the URL | |||
# It will still use the section path though | |||
slug = "" | |||
# The URL the content will appear at | |||
# If set, it cannot be an empty string and will override both `slug` and the filename | |||
# and the sections' path won't be used | |||
url = "" | |||
# An array of strings allowing you to group pages with them | |||
tags = [] | |||
# An overarching category name for that page, allowing you to group pages with it | |||
category = "" | |||
# The order as defined in the Section page | |||
order = 0 | |||
# The weight as defined in the Section page | |||
weight = 0 | |||
# Use aliases if you are moving content but want to redirect previous URLs to the | |||
# current one. This takes an array of path, not URLs. | |||
aliases = [] | |||
# Template to use to render this page | |||
template = "page.html" | |||
# Your own data | |||
[extra] | |||
+++ | |||
Some content | |||
``` | |||
## Summary | |||
You can ask Gutenberg to create a summary if you only want to show the first | |||
paragraph of each page in a list for example. | |||
To do so, add `<!-- more -->` in your content at the point where you want the | |||
summary to end and the content up to that point will be also available separately | |||
in the template. |
@@ -0,0 +1,88 @@ | |||
+++ | |||
title = "Section" | |||
weight = 20 | |||
+++ | |||
A section is automatically created implicitly when a folder is found | |||
in the `content` section. | |||
You can add `_index.md` file to a folder to augment a section and give it | |||
some metadata and/or content. | |||
## Front-matter | |||
The front-matter is a set of metadata embedded in a file. In Gutenberg, | |||
it is at the beginning of the file, surrounded by `+++` and uses TOML. | |||
As the file itself is optional, none of the front-matter variables are | |||
mandatory. However the opening and closing `+++` are required even if there are | |||
no variables in it. | |||
Here is an example `_index.md` with all the variables available: | |||
```md | |||
+++ | |||
title = "" | |||
description = "" | |||
# Whether to sort by "date", "order", "weight" or "none". More on that below | |||
sort_by = "none" | |||
# Used by the parent section to order its subsections. | |||
# Higher values means it will be at the end. | |||
weight = 0 | |||
# Template to use to render this section page | |||
template = "section.html" | |||
# How many pages to be displayed per paginated page. | |||
# No pagination will happen if this isn't set or if the value is 0 | |||
paginate_by = 0 | |||
# If set, will be the path used by paginated page and the page number will be appended after it. | |||
# For example the default would be page/1 | |||
paginate_by = "page" | |||
# Whether to insert a link for each header like the ones you can see in this site if you hover one | |||
# The default template can be overridden by creating a `anchor-link.html` in the `templates` directory | |||
# Options are "left", "right" and "none" | |||
insert_anchor_links = "none" | |||
# Whether to render that section or not. | |||
# Useful when the section is only there to organize things but is not meant | |||
# to be used directly | |||
render = true | |||
# Whether to redirect when landing on that section. Defaults to `None`. | |||
# Useful for the same reason as `render` but when you don't want a 404 when | |||
# landing on the root section page | |||
redirect_to = "" | |||
# Your own data | |||
[extra] | |||
+++ | |||
Some content | |||
``` | |||
Keep in mind that the variables only apply to the direct pages, not to the subsections' pages. This means | |||
you can only paginate the pages directly in the section folder for example. | |||
## Sorting | |||
Sections' pages can be sorted three different ways, not counting the unsorted default. | |||
Sorting is enabled by setting the `sort_by` front-matter variable. | |||
Any page that cannot be sorted, for example if missing the date variable while sorting by `date`, will be ignored and | |||
won't be rendered. The terminal will warn you if this is happening. | |||
### `date` | |||
This will sort all pages by their `date` field, from the most recent to the oldest. | |||
### `weight` | |||
This will be sort all pages by their `weight` field. Heavier weights fall at the bottom: 5 would be before 10. | |||
### `order` | |||
This will be sort all pages by their `order` field. Order is the opposite of weight, think of it as enumerating | |||
the content: this is my first post, my second, etc. A page with `order: 5` will appear after a page with `order: 10` in the sorted list. |
@@ -0,0 +1,166 @@ | |||
+++ | |||
title = "Shortcodes" | |||
weight = 40 | |||
+++ | |||
While Markdown is good at writing, it isn't great when you need write inline | |||
HTML to add some styling for example. | |||
To solve this, Gutenberg borrows the concept of [shortcodes](https://codex.wordpress.org/Shortcode_API) | |||
from WordPress. | |||
In our case, the shortcode corresponds to a template that is defined in the `templates/shortcodes` directory or a built-in one. | |||
## Writing a shortcode | |||
Let's write a shortcode to embed YouTube videos as an example. | |||
In a file called `youtube.html` in the `templates/shortcodes` directory, paste the | |||
following: | |||
```jinja2 | |||
<div {% if class %}class="{{class}}"{% endif %}> | |||
<iframe | |||
src="https://www.youtube.com/embed/{{id}}{% if autoplay %}?autoplay=1{% endif %}" | |||
webkitallowfullscreen | |||
mozallowfullscreen | |||
allowfullscreen> | |||
</iframe> | |||
</div> | |||
``` | |||
This template is very straightforward: an iframe pointing to the YouTube embed URL wrapped in a `<div>`. | |||
In terms of input, it expects at least one variable: `id`. Since the other variables | |||
are in a `if` statement, we can assume they are optional. | |||
That's it, Gutenberg will now recognise this template as a shortcode named `youtube` (the filename minus the `.html` extension). | |||
## Using shortcodes | |||
There are two kinds of shortcodes: ones that do no take a body like the YouTube example above and ones that do, a quote for example. | |||
In both cases, their arguments must be named and they will all be passed to the template. | |||
Do note that shortcodes in code blocks will be ignored. | |||
### Shortcodes without body | |||
Those look like rendering a variable in Tera. | |||
On a new line, call the shortcode as if it was a function in a variable block. All the examples below are valid | |||
calls of the YouTube shortcode. | |||
```md | |||
{{ youtube(id="w7Ft2ymGmfc") }} | |||
{{ youtube(id="w7Ft2ymGmfc", autoplay=true) }} | |||
{{ youtube(id="w7Ft2ymGmfc", autoplay=true, class="youtube") }} | |||
``` | |||
### Shortcodes with body | |||
Those look like a block in Tera. | |||
For example, let's imagine we have the following shortcode `quote.html` template: | |||
```jinja2 | |||
<blockquote> | |||
{{ body }} <br> | |||
-- {{ author}} | |||
</blockquote> | |||
``` | |||
We could use it in our markup file like so: | |||
```md | |||
{% quote(author="Vincent") %} | |||
A quote | |||
{% end %} | |||
``` | |||
The `body` variable used in the shortcode template will be implicitly passed down to the rendering | |||
context automatically. | |||
## Built-in shortcodes | |||
Gutenberg comes with a few built-in shortcodes. If you want to override a default shortcode template, | |||
simply place a `{shortcode_name}.html` file in the `templates/shortcodes` directory and Gutenberg will | |||
use that instead. | |||
### YouTube | |||
Embed a responsive player for a YouTube video. | |||
The arguments are: | |||
- `id`: the video id (mandatory) | |||
- `class`: a class to add the `div` surrounding the iframe | |||
- `autoplay`: whether to autoplay the video on load | |||
Usage example: | |||
```md | |||
{{ youtube(id="w7Ft2ymGmfc") }} | |||
{{ youtube(id="w7Ft2ymGmfc", autoplay=true) }} | |||
{{ youtube(id="w7Ft2ymGmfc", autoplay=true, class="youtube") }} | |||
``` | |||
Result example: | |||
{{ youtube(id="w7Ft2ymGmfc") }} | |||
### Vimeo | |||
Embed a player for a Vimeo video. | |||
The arguments are: | |||
- `id`: the video id (mandatory) | |||
- `class`: a class to add the `div` surrounding the iframe | |||
Usage example: | |||
```md | |||
{{ vimeo(id="124313553") }} | |||
{{ vimeo(id="124313553", class="vimeo") }} | |||
``` | |||
Result example: | |||
{{ vimeo(id="124313553") }} | |||
### Streamable | |||
Embed a player for a Streamable video. | |||
The arguments are: | |||
- `id`: the video id (mandatory) | |||
- `class`: a class to add the `div` surrounding the iframe | |||
Usage example: | |||
```md | |||
{{ streamable(id="2zt0") }} | |||
{{ streamable(id="2zt0", class="streamble") }} | |||
``` | |||
Result example: | |||
{{ streamable(id="2zt0") }} | |||
### Gist | |||
Embed a [Github gist](). | |||
The arguments are: | |||
- `url`: the url to the gist (mandatory) | |||
- `file`: by default, the shortcode will pull every file from the URL unless a specific filename is requested | |||
- `class`: a class to add the `div` surrounding the iframe | |||
Usage example: | |||
```md | |||
{{ gist(id="https://gist.github.com/Keats/e5fb6aad409f28721c0ba14161644c57") }} | |||
{{ gist(id="https://gist.github.com/Keats/e5fb6aad409f28721c0ba14161644c57", class="gist") }} | |||
``` | |||
Result example: | |||
{{ gist(url="https://gist.github.com/Keats/e5fb6aad409f28721c0ba14161644c57") }} |
@@ -0,0 +1,111 @@ | |||
+++ | |||
title = "Syntax Highlighting" | |||
weight = 80 | |||
+++ | |||
Gutenberg comes with built-in syntax highlighting but you first | |||
need to enable it in the [configuration](./documentation/getting-started/configuration.md). | |||
Once this is done, Gutenberg will automatically highlight all code blocks | |||
in your content. A code block in Markdown looks like the following: | |||
````md | |||
```rust | |||
let highlight = true; | |||
``` | |||
```` | |||
You can replace the `rust` by the language you want to highlight. | |||
Here is a full list of the supported languages and the short name you can use: | |||
``` | |||
- Plain Text -> ["txt"] | |||
- Assembly x86 (NASM) -> ["asm", "inc", "nasm"] | |||
- Elm -> ["elm"] | |||
- Handlebars -> ["handlebars", "handlebars.html", "hbr", "hbrs", "hbs", "hdbs", "hjs", "mu", "mustache", "rac", "stache", "template", "tmpl"] | |||
- Jinja2 -> ["j2", "jinja2"] | |||
- Julia -> ["jl"] | |||
- LESS -> ["less"] | |||
- ASP -> ["asa"] | |||
- HTML (ASP) -> ["asp"] | |||
- ActionScript -> ["as"] | |||
- AppleScript -> ["applescript", "script editor"] | |||
- Batch File -> ["bat", "cmd"] | |||
- NAnt Build File -> ["build"] | |||
- C# -> ["cs", "csx"] | |||
- C++ -> ["cpp", "cc", "cp", "cxx", "c++", "C", "h", "hh", "hpp", "hxx", "h++", "inl", "ipp"] | |||
- C -> ["c", "h"] | |||
- CSS -> ["css", "css.erb", "css.liquid"] | |||
- Clojure -> ["clj"] | |||
- D -> ["d", "di"] | |||
- Diff -> ["diff", "patch"] | |||
- Erlang -> ["erl", "hrl", "Emakefile", "emakefile"] | |||
- HTML (Erlang) -> ["yaws"] | |||
- Go -> ["go"] | |||
- Graphviz (DOT) -> ["dot", "DOT"] | |||
- Groovy -> ["groovy", "gvy", "gradle"] | |||
- HTML -> ["html", "htm", "shtml", "xhtml", "inc", "tmpl", "tpl"] | |||
- Haskell -> ["hs"] | |||
- Literate Haskell -> ["lhs"] | |||
- Java Server Page (JSP) -> ["jsp"] | |||
- Java -> ["java", "bsh"] | |||
- JavaDoc -> [] | |||
- Java Properties -> ["properties"] | |||
- JSON -> ["json", "sublime-settings", "sublime-menu", "sublime-keymap", "sublime-mousemap", "sublime-theme", "sublime-build", "sublime-project", "sublime-completions", "sublime-commands", "sublime-macro"] | |||
- JavaScript -> ["js", "htc"] | |||
- Regular Expressions (Javascript) -> [] | |||
- BibTeX -> ["bib"] | |||
- LaTeX Log -> [] | |||
- LaTeX -> ["tex", "ltx"] | |||
- TeX -> ["sty", "cls"] | |||
- Lisp -> ["lisp", "cl", "l", "mud", "el", "scm", "ss", "lsp", "fasl"] | |||
- Lua -> ["lua"] | |||
- Make Output -> [] | |||
- Makefile -> ["make", "GNUmakefile", "makefile", "Makefile", "OCamlMakefile", "mak", "mk"] | |||
- Markdown -> ["md", "mdown", "markdown", "markdn"] | |||
- MultiMarkdown -> [] | |||
- MATLAB -> ["matlab"] | |||
- OCaml -> ["ml", "mli"] | |||
- OCamllex -> ["mll"] | |||
- OCamlyacc -> ["mly"] | |||
- camlp4 -> [] | |||
- Objective-C++ -> ["mm", "M", "h"] | |||
- Objective-C -> ["m", "h"] | |||
- PHP Source -> [] | |||
- PHP -> ["php", "php3", "php4", "php5", "php7", "phps", "phpt", "phtml"] | |||
- Pascal -> ["pas", "p", "dpr"] | |||
- Perl -> ["pl", "pm", "pod", "t", "PL"] | |||
- Python -> ["py", "py3", "pyw", "pyi", "rpy", "cpy", "SConstruct", "Sconstruct", "sconstruct", "SConscript", "gyp", "gypi", "Snakefile", "wscript"] | |||
- Regular Expressions (Python) -> [] | |||
- R Console -> [] | |||
- R -> ["R", "r", "s", "S", "Rprofile"] | |||
- Rd (R Documentation) -> ["rd"] | |||
- HTML (Rails) -> ["rails", "rhtml", "erb", "html.erb"] | |||
- JavaScript (Rails) -> ["js.erb"] | |||
- Ruby Haml -> ["haml", "sass"] | |||
- Ruby on Rails -> ["rxml", "builder"] | |||
- SQL (Rails) -> ["erbsql", "sql.erb"] | |||
- Regular Expression -> ["re"] | |||
- reStructuredText -> ["rst", "rest"] | |||
- Ruby -> ["rb", "Appfile", "Appraisals", "Berksfile", "Brewfile", "capfile", "cgi", "Cheffile", "config.ru", "Deliverfile", "Fastfile", "fcgi", "Gemfile", "gemspec", "Guardfile", "irbrc", "jbuilder", "podspec", "prawn", "rabl", "rake", "Rakefile", "Rantfile", "rbx", "rjs", "ruby.rail", "Scanfile", "simplecov", "Snapfile", "thor", "Thorfile", "Vagrantfile"] | |||
- Cargo Build Results -> [] | |||
- Rust -> ["rs"] | |||
- SQL -> ["sql", "ddl", "dml"] | |||
- Scala -> ["scala", "sbt"] | |||
- Shell Script (Bash) -> ["sh", "bash", "zsh", ".bash_aliases", ".bash_functions", ".bash_login", ".bash_logout", ".bash_profile", ".bash_variables", ".bashrc", ".profile", ".textmate_init"] | |||
- HTML (Tcl) -> ["adp"] | |||
- Tcl -> ["tcl"] | |||
- Textile -> ["textile"] | |||
- XML -> ["xml", "xsd", "xslt", "tld", "dtml", "rss", "opml", "svg"] | |||
- YAML -> ["yaml", "yml", "sublime-syntax"] | |||
- Generic Config -> ["cfg", "conf", "config", "ini", "pro"] | |||
- Linker Script -> ["ld"] | |||
- TOML -> ["toml", "tml"] | |||
- TypeScript -> ["ts"] | |||
- TypeScriptReact -> ["tsx"] | |||
- VimL -> ["vim"] | |||
``` | |||
If you want to highlight a language not on that list, please open an issue or a pull request on the [Gutenberg repo](https://github.com/Keats/gutenberg). |
@@ -0,0 +1,33 @@ | |||
+++ | |||
title = "Table of Contents" | |||
weight = 60 | |||
+++ | |||
Each page/section will automatically generate a table of content for itself based on the headers present. | |||
TODO: add link for template variables | |||
It is available in the template through `section.toc` and `page.toc`. You can view the [template variables]() | |||
documentation for information on its structure. | |||
Here is an example of using that field to render a 2-level table of content: | |||
```jinja2 | |||
<ul> | |||
{% for h1 in page.toc %} | |||
<li> | |||
<a href="{{h1.permalink | safe}}">{{ h1.title }}</a> | |||
{% if h1.children %} | |||
<ul> | |||
{% for h2 in h1.children %} | |||
<li> | |||
<a href="{{h2.permalink | safe}}">{{ h2.title }}</a> | |||
</li> | |||
{% endfor %} | |||
</ul> | |||
{% endif %} | |||
</li> | |||
{% endfor %} | |||
</ul> | |||
``` | |||
While headers are neatly ordered in that example, it will work just as well with disjoint headers. |
@@ -1,4 +1,7 @@ | |||
+++ | |||
title = "Getting Started" | |||
sort_by = "order" | |||
weight = 1 | |||
sort_by = "weight" | |||
redirect_to = "documentation/getting-started/installation" | |||
insert_anchor_links = "left" | |||
+++ |
@@ -1,6 +1,43 @@ | |||
+++ | |||
title = "CLI usage" | |||
order = 2 | |||
weight = 2 | |||
+++ | |||
Hey | |||
Gutenberg only has 3 commands: init, build and serve. | |||
You can view the help of the whole program by running `gutenberg --help` and | |||
the command help by running `gutenberg <cmd> --help`. | |||
## init | |||
Creates the directory structure used by Gutenberg at the given directory. | |||
```bash | |||
$ gutenberg init <my_site> | |||
``` | |||
will create a new folder named `my_site` and the files/folders needed by | |||
Gutenberg. | |||
## build | |||
This will build the whole site in the `public` directory. | |||
```bash | |||
$ gutenberg build | |||
``` | |||
## serve | |||
This will build and serve the site using a local server. You can also specify | |||
the interface/port combination to use if you want something different than the default (`127.0.0.1:1111`). | |||
```bash | |||
$ gutenberg serve | |||
$ gutenberg serve --port 2000 | |||
$ gutenberg serve --interface 0.0.0.0 | |||
$ gutenberg serve --interface 0.0.0.0 --port 2000 | |||
``` | |||
The serve command will watch all your content and will provide live reload, without | |||
hard refresh if possible. |
@@ -1,6 +1,71 @@ | |||
+++ | |||
title = "Configuration" | |||
order = 4 | |||
weight = 4 | |||
+++ | |||
Hey | |||
The default configuration will be enough to get Gutenberg running locally but not more than that. | |||
It follows the philosophy of only paying for what you need: almost everything is turned off by default. | |||
To change the config, edit the `config.toml` file. | |||
If you are not familiar with TOML, have a look at [the TOML Spec](https://github.com/toml-lang/toml) | |||
to learn about it. | |||
Only one variable - `base_url` - is mandatory, everything else is optional. You can find all variables | |||
used by Gutenberg config as well as their default values below: | |||
```toml | |||
# Base URL of the site, the only required config argument | |||
base_url = "mywebsite.com" | |||
# Used in RSS by default | |||
title = "" | |||
description = "" | |||
language_code = "en" | |||
# Theme name to use | |||
theme = "" | |||
# Highlight all code blocks found | |||
highlight_code = false | |||
# Which theme to use for the code highlighting. See below for list of accepted values | |||
highlight_theme = "base16-ocean-dark" | |||
# Whether to generate a RSS feed automatically | |||
generate_rss = false | |||
# The number of articles to include in the RSS feed | |||
rss_limit = 20 | |||
# Whether to generate a tags page and individual tag pages for pages with tags | |||
generate_tags_pages = false | |||
# Whether to generate a categories page and individual category pages for pages with a category | |||
generate_categories_pages = false | |||
# Whether to compile the Sass files found in the `sass` directory | |||
compile_sass = false | |||
# You can put any kind of data in there and it will be accessible in all templates | |||
[extra] | |||
``` | |||
## Syntax highlighting | |||
Gutenberg currently has the following highlight themes available: | |||
- base16-ocean-dark | |||
- base16-ocean-light | |||
- gruvbox-dark | |||
- gruvbox-light | |||
- inspired-github | |||
- kronuz | |||
- material-dark | |||
- material-light | |||
- monokai | |||
- solarized-dark | |||
- solarized-light | |||
Gutenberg uses the Sublime Text themes, making it very easy to add more. | |||
If you want a theme not on that list, please open an issue or a pull request on the [Gutenberg repo](https://github.com/Keats/gutenberg). |
@@ -1,6 +1,47 @@ | |||
+++ | |||
title = "Directory structure" | |||
order = 3 | |||
weight = 3 | |||
+++ | |||
Hey | |||
After running `gutenberg init`, you should see the following structure in your folder: | |||
```bash | |||
. | |||
├── config.toml | |||
├── content | |||
├── sass | |||
├── static | |||
├── templates | |||
└── themes | |||
5 directories, 1 file | |||
``` | |||
Here's a high level overview of each of these folders and `config.toml`. | |||
## `config.toml` | |||
A mandatory configuration file of Gutenberg in TOML format. | |||
It is explained in details in the [Configuration page](./documentation/getting-started/configuration.md). | |||
## `content` | |||
Where all your markup content lies: this will most likely be mostly `.md` files. | |||
Each folder in the `content` directory represents a [section](./documentation/content/section.md) | |||
that contains [pages](./documentation/content/page.md) : your `.md` files. | |||
To learn more, read [the content overview](./documentation/content/overview.md). | |||
## `sass` | |||
Contains the [Sass](http://sass-lang.com) files to be compiled. Non-Sass files will be ignored. | |||
## `static` | |||
Contains any kind of files. All the files/folders in the `static` folder will be copied as-is in the output directory. | |||
## `templates` | |||
Contains all the [Tera](tera.netlify.com) templates that will be used to render this site. | |||
Have a look at the [Templates](./documentation/templates/_index.md) to learn more on the default templates | |||
and the variables available. | |||
## `themes` | |||
Contains themes that can be used for that site. If you are not planning to use themes, you can safely ignore | |||
this folder and let it be. If you want to learn about themes, head to the [themes documentation](./documentation/themes/_index.md). |
@@ -1,6 +1,31 @@ | |||
+++ | |||
title = "Installation" | |||
order = 1 | |||
weight = 1 | |||
+++ | |||
Hey | |||
Gutenberg provides pre-built binaries for Mac OS, Linux and Windows on the | |||
[Github release page](https://github.com/Keats/gutenberg/releases). | |||
## Using brew on Mac OS | |||
TODO: it's not on brew right now | |||
## Windows | |||
TODO: i have no clue whatsoever about packages in Windows | |||
## Archlinux | |||
TODO: add a `gutenberg-bin` in AUR and explain how to install it | |||
## From source | |||
To build it from source, you will need to have Git, [Rust and Cargo](https://www.rust-lang.org/en-US/) | |||
installed. | |||
From a terminal, you can now run the following command: | |||
```bash | |||
$ cargo build --release | |||
``` | |||
The binary will be available in the `target/release` folder. |
@@ -0,0 +1,6 @@ | |||
+++ | |||
title = "Templates" | |||
weight = 3 | |||
sort_by = "weight" | |||
insert_anchor_links = "left" | |||
+++ |
@@ -0,0 +1,73 @@ | |||
+++ | |||
title = "Overview" | |||
weight = 10 | |||
+++ | |||
Gutenberg uses the [Tera](tera.netlify.com) template engine. | |||
This documentation will only touch how templates work in Gutenberg, please read | |||
the [Tera template documentation](https://tera.netlify.com/docs/templates/) if you want | |||
to know how write them. If you are familiar with Jinja2, Liquid or Twig, this should be | |||
a breeze. | |||
All templates live in the `templates` directory and built-in or themes templates can | |||
be overriden by creating a template with same name in the correct path. For example, | |||
you can override the RSS template by creating a `templates/rss.xml` file. | |||
If you are not sure what is available in a template, you can just stick `{{ __tera_context }}` in it | |||
to print the whole context. | |||
A few variables are available on all templates except for RSS/Sitemap: | |||
- `config`: the [configuration](./documentation/getting-started/configuration.md) without any modifications | |||
- `current_path`: the path (full URL without the `base_url`) of the current page | |||
- `current_url`: the full URL for that page | |||
## Built-in filters | |||
Gutenberg adds a few filters, in addition of the ones already present in Tera. | |||
### markdown | |||
Converts the given variable to HTML using Markdown. This doesn't apply any of the | |||
features that Gutenberg adds to Markdown: internal links, shortcodes etc won't work. | |||
### base64_encode | |||
Encode the variable to base64. | |||
### base64_decode | |||
Decode the variable from base64. | |||
## Built-in global functions | |||
Gutenberg adds a few global functions to Tera in order to make it easier to develop complex sites. | |||
### `get_page` | |||
Takes a path to a `.md` file and returns the associated page | |||
```jinja2 | |||
{% set page = get_page(path="blog/page2.md") %} | |||
``` | |||
### `get_section` | |||
Takes a path to a `_index.md` file and returns the associated section | |||
```jinja2 | |||
{% set section = get_page(path="blog/_index.md") %} | |||
``` | |||
###` get_url` | |||
Gets the permalink for the given path. | |||
If the path starts with `./`, it will be understood as an internal | |||
link like the ones used in markdown. | |||
```jinja2 | |||
{% set url = get_url(path="./blog/_index.md") %} | |||
``` | |||
This can also be used to get the permalinks for static assets for example if | |||
we want to link to the file that is located at `static/css/app.css`: | |||
```jinja2 | |||
{{ get_url(path="css/app.css") }} | |||
``` | |||
In the case of non-internal links, you can also add a cachebust of the format `?t=1290192` at the end of a URL | |||
by passing `cachebust=true` to the `get_url` function. |
@@ -0,0 +1,88 @@ | |||
+++ | |||
title = "Index, Sections and Pages" | |||
weight = 20 | |||
+++ | |||
First off, it is important to know that in Gutenberg the index | |||
page is actually a section like any other: you can add metadata | |||
and content by adding `_index.md` at the root of the `content` folder. | |||
Pages and sections are actually very similar. | |||
## Page variables | |||
By default, Gutenberg will try to load `templates/page.html`. If there isn't | |||
one, it will render the built-in template: a blank page. | |||
Whichever template you decide to render, you will get a `page` variable in your template | |||
with the following fields: | |||
```ts | |||
content: String; | |||
title: String?; | |||
description: String?; | |||
date: String?; | |||
slug: String; | |||
path: String; | |||
permalink: String; | |||
summary: String?; | |||
tags: Array<String>; | |||
category: String?; | |||
extra: HashMap<String, Any>; | |||
// Naive word count, will not work for languages without whitespace | |||
word_count: Number; | |||
// Based on https://help.medium.com/hc/en-us/articles/214991667-Read-time | |||
reading_time: Number; | |||
// `previous` and `next` are only filled if the content can be sorted | |||
previous: Page?; | |||
next: Page?; | |||
// See the Table of contents section below for more details | |||
toc: Array<Header>; | |||
``` | |||
## Section variables | |||
By default, Gutenberg will try to load `templates/section.html`. If there isn't | |||
one, it will render the built-in template: a blank page. | |||
Whichever template you decide to render, you will get a `section` variable in your template | |||
with the following fields: | |||
```ts | |||
content: String; | |||
title: String?; | |||
description: String?; | |||
date: String?; | |||
slug: String; | |||
path: String; | |||
permalink: String; | |||
extra: HashMap<String, Any>; | |||
// Pages directly in this section, sorted if asked | |||
pages: Array<Pages>; | |||
// Direct subsections to this section, sorted by subsections weight | |||
subsections: Array<Section>; | |||
// Naive word count, will not work for languages without whitespace | |||
word_count: Number; | |||
// Based on https://help.medium.com/hc/en-us/articles/214991667-Read-time | |||
reading_time: Number; | |||
// See the Table of contents section below for more details | |||
toc: Array<Header>; | |||
``` | |||
## Table of contents | |||
Both page and section have a `toc` field which corresponds to an array of `Header`. | |||
A `Header` has the following fields: | |||
```ts | |||
// The hX level | |||
level: 1 | 2 | 3 | 4 | 5 | 6; | |||
// The generated slug id | |||
id: String; | |||
// The text of the header | |||
title: String; | |||
// A link pointing directly to the header, using the inserted anchor | |||
permalink: String; | |||
// All lower level headers below this header | |||
children: Array<Header>; | |||
``` |
@@ -0,0 +1,28 @@ | |||
+++ | |||
title = "Pagination" | |||
weight = 30 | |||
+++ | |||
A paginated section gets the same `section` variable as a normal | |||
[section page](./documentation/templates/pages-sections.md#section-variables) and will use | |||
the template mentioned in the section front-matter or the default one. | |||
In addition, a paginated section gets a `paginator` one, which has a `Pager` type: | |||
```ts | |||
// How many items per page | |||
paginate_by: Number; | |||
// Permalink to the first page | |||
first: String; | |||
// Permalink to the last page | |||
last: String; | |||
// Permalink to the previous page, if there is one | |||
previous: String?; | |||
// Permalink to the next page, if there is one | |||
next: String?; | |||
// All pages for the current page | |||
pages: Array<Page>; | |||
// All pagers for this section, but with their `pages` attribute set to an empty array | |||
pagers: Array<Pagers>; | |||
// Which page are we on | |||
current_index: Number; | |||
``` |
@@ -0,0 +1,14 @@ | |||
+++ | |||
title = "Robots.txt" | |||
weight = 70 | |||
+++ | |||
Gutenberg will look for a `robots.txt` file in the `templates` directory or | |||
use the built-in one. | |||
Robots.txt is the simplest of all templates: it doesn't take any variables | |||
and the default is what most site want. | |||
```jinja2 | |||
User-agent: * | |||
``` |
@@ -0,0 +1,16 @@ | |||
+++ | |||
title = "RSS" | |||
weight = 50 | |||
+++ | |||
Gutenberg will look for a `rss.xml` file in the `templates` directory or | |||
use the built-in one. Currently it is only possible to have one RSS feed for the whole | |||
site, you cannot create a RSS feed per section or taxonomy. | |||
**Only pages with a date and that are not draft will be available.** | |||
The RSS template gets two variables in addition of the config: | |||
- `last_build_date`: the date of the latest post | |||
- `pages`: see [the page variables](./documentation/templates/pages-sections.md#page-variables) for | |||
a detailed description of this variable. |
@@ -0,0 +1,23 @@ | |||
+++ | |||
title = "Sitemap" | |||
weight = 60 | |||
+++ | |||
Gutenberg will look for a `sitemap.xml` file in the `templates` directory or | |||
use the built-in one. | |||
The sitemap template gets four variables in addition of the config: | |||
- `pages`: all pages of the site | |||
- `sections`: all sections of the site, including an index section | |||
- `tags`: links the tags page and individual tag page, empty if no tags | |||
- `categories`: links the categories page and individual category page, empty if no categories | |||
As the sitemap only requires a link and an optional date for the `lastmod` field, | |||
all the variables above are arrays of `SitemapEntry` with the following type: | |||
```ts | |||
permalink: String; | |||
date: String?; | |||
``` |
@@ -0,0 +1,30 @@ | |||
+++ | |||
title = "Tags & Categories" | |||
weight = 40 | |||
+++ | |||
Tags and categories actually get the same data but with different variable names. | |||
The default templates for those pages are the following: | |||
- `tags.html`: list of tags, gets variable `tags` | |||
- `tag.html`: individual tag, gets variable `tag` | |||
- `categories.html`: list of categories, gets variable `categories` | |||
- `category.html`: individual category, gets variable `category` | |||
You can override any of those templates by putting one with the same name in the `templates` directory. | |||
`tags` and `categories` both are an array of `TaxonomyItem` sorted alphabetically, while `tag` and `category` | |||
are a `TaxonomyItem`. | |||
A `TaxonomyItem` has the following fields: | |||
```ts | |||
name: String; | |||
slug: String; | |||
// Permalink to the generated page | |||
permalink: String; | |||
pages: Array<Page>; | |||
``` | |||
Currently, there is no way to define different taxonomy templates per section, change | |||
the path used for them or paginate them. | |||
@@ -0,0 +1,5 @@ | |||
+++ | |||
title = "Themes" | |||
weight = 4 | |||
sort_by = "weight" | |||
+++ |
@@ -0,0 +1,53 @@ | |||
+++ | |||
title = "Creating a theme" | |||
weight = 30 | |||
+++ | |||
Creating is exactly like creating a normal site with Gutenberg, except you | |||
will want to use many [Tera blocks](https://tera.netlify.com/docs/templates/#inheritance) to | |||
allow users to easily modify it. | |||
A theme also need to have a `theme.toml` configuration file with the | |||
following fields, here's the one from a [real template](https://github.com/Keats/hyde): | |||
```toml | |||
name = "hyde" | |||
description = "A classic blog theme" | |||
license = "MIT" | |||
homepage = "https://github.com/Keats/gutenberg-hyde" | |||
# The minimum version of Gutenberg required | |||
min_version = "0.1" | |||
# Any variable there can be overriden in the end user `config.toml` | |||
# You don't need to prefix variables by the theme name but as this will | |||
# be merged with user data, some kind of prefix or nesting is preferable | |||
# Use snake_casing to be consistent with the rest of Gutenberg | |||
[extra] | |||
hyde_sticky = true | |||
hyde_reverse = false | |||
hyde_theme = "" | |||
hyde_links = [ | |||
{url = "https://google.com", name = "Google.com"}, | |||
{url = "https://google.fr", name = "Google.fr"}, | |||
] | |||
# The theme author info: you! | |||
[author] | |||
name = "Vincent Prouillet" | |||
homepage = "https://vincent.is" | |||
# If this is porting a theme from another static site engine, provide | |||
# the info of the original author here | |||
[original] | |||
author = "mdo" | |||
homepage = "http://markdotto.com/" | |||
repo = "https://www.github.com/mdo/hyde" | |||
``` | |||
A theme will also need three directories to work: | |||
- `static`: any static files used in this theme | |||
- `templates`: all templates used in this theme | |||
- `sass`: Sass stylesheets for this theme, can be empty | |||
A simple theme you can use as example is [Hyde](https://github.com/Keats/hyde). |
@@ -0,0 +1,52 @@ | |||
+++ | |||
title = "Installing & using themes" | |||
weight = 20 | |||
+++ | |||
## Installing a theme | |||
The easiest way to install to theme is to clone its repository in the `themes` | |||
directory. | |||
```bash | |||
$ cd themes | |||
$ git clone THEME_REPO_URL | |||
``` | |||
Cloning the repository using Git or another VCS will allow you to easily | |||
update it but you can also simply download the files manually and paste | |||
them in a folder. | |||
## Using a theme | |||
Now that you have the theme in your `themes` directory, you only need to tell | |||
Gutenberg to use it to get started by setting the `theme` variable of the | |||
[configuration file](./documentation/getting-started/configuration.md). The theme | |||
name has to be name of the directory you cloned the theme in. | |||
For example, if you cloned a theme in `templates/simple-blog`, the theme name to use | |||
in the configuration file is `simple-blog`. | |||
## Customizing a theme | |||
Any file from the theme can be overriden by creating a file with the same path and name in your `templates` or `static` | |||
directory. Here are a few examples of that, assuming the theme name is `simple-blog`: | |||
```plain | |||
templates/pages/post.html -> will override themes/simple-blog/pages/post.html | |||
templates/macros.html -> will override themes/simple-blog/macros.html | |||
static/js/site.js -> will override themes/simple-blog/static/js/site.jss | |||
``` | |||
Most themes will also provide some variables that are meant to be overriden: this happens in the `extra` section | |||
of the [configuration file](./documentation/getting-started/configuration.md). | |||
Let's say a theme uses a `show_twitter` variable and sets it to `false` by default. If you want to set it to `true`, | |||
you can update your `config.toml` like so: | |||
```toml | |||
[extra] | |||
show_twitter = false | |||
``` | |||
You can modify files directly in the `themes` directory but this will make updating the theme harder and live reload won't work with those | |||
files. |
@@ -0,0 +1,10 @@ | |||
+++ | |||
title = "Overview" | |||
weight = 10 | |||
+++ | |||
Gutenberg has built-in support for themes in a way that are easy to customise | |||
but still easy to update if needed. | |||
All themes can use the full power of Gutenberg, from shortcodes to Sass compilation. | |||
@@ -0,0 +1,8 @@ | |||
+++ | |||
title = "List of themes" | |||
weight = 40 | |||
+++ | |||
The following themes are available for Gutenberg: | |||
- [Hyde](https://github.com/Keats/gutenberg-hyde) |
@@ -1,3 +1,44 @@ | |||
.documentation { | |||
padding: 3rem; | |||
display: flex; | |||
&__sidebar { | |||
margin-right: 2rem; | |||
ul { | |||
padding-left: 0; | |||
list-style: none; | |||
ul { | |||
padding-left: 1rem; | |||
li.active a { | |||
color: red; | |||
} | |||
} | |||
} | |||
} | |||
&__content { | |||
flex: 1; | |||
} | |||
a { | |||
color: $background; | |||
padding-bottom: 2px; | |||
border-bottom: 1px solid $background; | |||
&:hover { | |||
text-decoration: none; | |||
} | |||
&:visited { | |||
color: $background; | |||
} | |||
} | |||
iframe { | |||
width: 100%; | |||
min-height: 400px; | |||
} | |||
} |
@@ -8,19 +8,24 @@ | |||
{% set section = get_section(path="documentation/_index.md") %} | |||
<div class="documentation container"> | |||
<aside class="documentation__sidebar"> | |||
<ul> | |||
{% for subsection in section.subsections %} | |||
<li> | |||
{{ subsection.title }} | |||
<ul> | |||
{% for page in subsection.pages | reverse %} | |||
<li>{{page.title}}</li> | |||
{% for page in subsection.pages %} | |||
<li class="{% if current_path == page.path %}active{% endif %}"> | |||
<a href="{{page.permalink}}">{{page.title}}</a> | |||
</li> | |||
{% endfor %} | |||
</ul> | |||
</li> | |||
{% endfor %} | |||
</ul> | |||
</aside> | |||
<div class="documentation__content"> | |||
hey | |||
{% block doc_content %} | |||
{% endblock doc_content %} | |||
</div> | |||
</div> | |||
{% endblock content %} |
@@ -37,7 +37,7 @@ | |||
<h2>Everything built-in</h2> | |||
<p> | |||
Gutenberg comes with Sass compilation, syntax highlighting and | |||
a other features that usually require using additional tools | |||
other features that usually require using additional tools | |||
or use JavaScript libraries on your site. | |||
</p> | |||
</div> | |||
@@ -0,0 +1,7 @@ | |||
{% extends "documentation.html" %} | |||
{% block title %}{{ super() }} - {{ page.title }} {% endblock title %} | |||
{% block doc_content %} | |||
<h1>{{page.title}}</h1> | |||
{{page.content | safe}} | |||
{% endblock doc_content %} |
@@ -60,7 +60,7 @@ fn find_section_front_matter_changes(current: &SectionFrontMatter, other: &Secti | |||
if current.paginate_by != other.paginate_by | |||
|| current.paginate_path != other.paginate_path | |||
|| current.insert_anchor != other.insert_anchor { | |||
|| current.insert_anchor_links != other.insert_anchor_links { | |||
changes_needed.push(SectionChangesNeeded::RenderWithPages); | |||
// Nothing else we can do | |||
return changes_needed; | |||
@@ -177,7 +177,6 @@ pub fn after_content_change(site: &mut Site, path: &Path) -> Result<()> { | |||
let page = Page::from_file(path, &site.config)?; | |||
match site.add_page(page, true)? { | |||
Some(prev) => { | |||
site.register_tera_global_fns(); | |||
// Updating a page | |||
let current = site.pages[path].clone(); | |||
// Front matter didn't change, only content did | |||
@@ -212,6 +211,7 @@ pub fn after_content_change(site: &mut Site, path: &Path) -> Result<()> { | |||
}, | |||
}; | |||
} | |||
site.register_tera_global_fns(); | |||
return Ok(()); | |||
}, | |||