Finishing up site (#131)

* Finishing up site

* Make site a bit responsive

* Fix menu responsiveness

* Remove Fira Sans and revamp a bit text

* Update list of syntax and change output of syntax

* Add Rust mention

* Some doc tweaks

* Correct capitalization for GitHub

Correct capitalization for GitHub

* Some CSS tweaks

* More css tweaks + favicon

* Add link to my site
This commit is contained in:
Vincent Prouillet 2017-10-19 13:48:50 +02:00 committed by GitHub
parent d6cbf44cdf
commit bdcad38310
26 changed files with 226 additions and 135 deletions

View file

@ -32,7 +32,9 @@ fn main() {
dump_to_file(&ps, packpath_nonewlines).unwrap();
for s in ps.syntaxes() {
println!("Add {} -> {:?}", s.name, s.file_extensions);
if !s.file_extensions.is_empty() {
println!("- {} -> {:?}", s.name, s.file_extensions);
}
}
},
(Some(ref cmd), Some(ref theme_dir), Some(ref packpath), None) if cmd == "themepack" => {

View file

@ -1,6 +1,6 @@
base_url = "https://gutenberg.netlify.com/"
base_url = "https://www.getgutenberg.io/"
title = "Gutenberg"
description = "Everything you need to make a static site engine in one binary. And it's fast"
description = "Everything you need to make a static site engine in one binary."
compile_sass = true
highlight_code = true

View file

@ -20,7 +20,7 @@ if the slug already exists for that article. For example:
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
This option is set at the section level: 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.
@ -33,5 +33,4 @@ special syntax to Markdown links to handle them: start the link with `./` and po
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.
You can still link to a header directly: `[my link](./pages/about.md#example)` will work as expected.

View file

@ -6,7 +6,7 @@ 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.
that contains [pages](./documentation/content/page.md): your `.md` files.
```bash
.
@ -23,8 +23,8 @@ that contains [pages](./documentation/content/page.md) : your `.md` files.
└── _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).
Each page path (the part after the `base_url`, for example `blog/cli-usage/`) can be customised by changing the `path` or `slug`
attribute of 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.
@ -37,12 +37,18 @@ and `installation.md`.
While not shown in the example, sections can be nested indefinitely.
## Assets colocation
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.
assets.
Gutenberg supports that pattern out of the box: create a folder, add a `index.md` file and as many non-markdown files as you want.
Those assets will be copied in the same folder when building the site which allows you to use a relative path to access them.
```bash
└── with-assets
├── index.md
└── yavascript.js
```
By default, this page will get the folder name (`with-assets` in this case) as its slug.

View file

@ -11,8 +11,7 @@ named `_index/md`.
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.
While none of the front-matter variables are mandatory, the the opening and closing `+++` are required.
Here is an example page with all the variables available:
@ -65,8 +64,10 @@ 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.
in the [template](./documentation/templates/pages-sections.md#page-variables).

View file

@ -3,20 +3,22 @@ title = "Section"
weight = 20
+++
A section is automatically created implicitly when a folder is found
in the `content` section.
A section is automatically created when a folder is found
in the `content` section, unless it only contains a `index.md` file and is actually
a page with assets.
You can add `_index.md` file to a folder to augment a section and give it
some metadata and/or content.
The index page is actually a section created automatically like any other: you can add metadata
and content by adding `_index.md` at the root of the `content` folder.
## 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.
While none of the front-matter variables are mandatory, the the opening and closing `+++` are required.
Here is an example `_index.md` with all the variables available:
@ -67,12 +69,11 @@ redirect_to = ""
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.
Keep in mind that any configuration apply only to the direct pages, not to the subsections' pages.
## 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.
Sections' pages can be sorted three different ways, not counting the unsorted default and
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.

View file

@ -34,18 +34,23 @@ That's it, Gutenberg will now recognise this template as a shortcode named `yout
## 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.
There are two kinds of shortcodes:
- ones that do not take a body like the YouTube example above
- 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.
Any 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
On a new line, call the shortcode as if it was a Tera function in a variable block. All the examples below are valid
calls of the YouTube shortcode.
```md
Here is a YouTube video:
{{ youtube(id="dQw4w9WgXcQ") }}
{{ youtube(id="dQw4w9WgXcQ", autoplay=true) }}
@ -54,7 +59,6 @@ calls of the YouTube shortcode.
```
### Shortcodes with body
Those look like a block in Tera.
For example, let's imagine we have the following shortcode `quote.html` template:
```jinja2
@ -67,13 +71,14 @@ For example, let's imagine we have the following shortcode `quote.html` template
We could use it in our markup file like so:
```md
As someone said:
{% quote(author="Vincent") %}
A quote
{% end %}
```
The `body` variable used in the shortcode template will be implicitly passed down to the rendering
context automatically.
The body of the shortcode will be automatically passed down to the rendering context as the `body` variable.
## Built-in shortcodes

View file

@ -17,16 +17,21 @@ 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:
You can replace the `rust` by the language you want to highlight or not put anything to get it
interpreted as plain text.
Here is a full list of the supported languages and the short names you can use:
```
- Plain Text -> ["txt"]
- Assembly x86 (NASM) -> ["asm", "inc", "nasm"]
- Crystal -> ["cr"]
- Elixir -> ["ex", "exs"]
- Elm -> ["elm"]
- Handlebars -> ["handlebars", "handlebars.html", "hbr", "hbrs", "hbs", "hdbs", "hjs", "mu", "mustache", "rac", "stache", "template", "tmpl"]
- Jinja2 -> ["j2", "jinja2"]
- Julia -> ["jl"]
- Kotlin -> ["kt", "kts"]
- LESS -> ["less"]
- ASP -> ["asa"]
- HTML (ASP) -> ["asp"]
@ -44,42 +49,33 @@ Here is a full list of the supported languages and the short name you can use:
- Erlang -> ["erl", "hrl", "Emakefile", "emakefile"]
- HTML (Erlang) -> ["yaws"]
- Go -> ["go"]
- Graphviz (DOT) -> ["dot", "DOT"]
- Graphviz (DOT) -> ["dot", "DOT", "gv"]
- 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 -> []
- Python -> ["py", "py3", "pyw", "pyi", "pyx", "pyx.in", "pxd", "pxd.in", "pxi", "pxi.in", "rpy", "cpy", "SConstruct", "Sconstruct", "sconstruct", "SConscript", "gyp", "gypi", "Snakefile", "wscript"]
- R -> ["R", "r", "s", "S", "Rprofile"]
- Rd (R Documentation) -> ["rd"]
- HTML (Rails) -> ["rails", "rhtml", "erb", "html.erb"]
@ -90,11 +86,10 @@ Here is a full list of the supported languages and the short name you can use:
- 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"]
- Bourne Again Shell (bash) -> ["sh", "bash", "zsh", "fish", ".bash_aliases", ".bash_functions", ".bash_login", ".bash_logout", ".bash_profile", ".bash_variables", ".bashrc", ".profile", ".textmate_init"]
- HTML (Tcl) -> ["adp"]
- Tcl -> ["tcl"]
- Textile -> ["textile"]

View file

@ -5,8 +5,8 @@ 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]()
It is available in the template through `section.toc` and `page.toc`.
You can view the [template variables](./documentation/templates/pages-sections.md#table-of-contents)
documentation for information on its structure.
Here is an example of using that field to render a 2-level table of content:

View file

@ -30,9 +30,12 @@ $ gutenberg build
You can override the config `base_url` by passing a new URL to the `base-url` flag.
```bash
$ gutenberg build --base-url https://59a896e2cf321c2dcfd2d6de--tera.netlify.com/
$ gutenberg build --base-url $DEPLOY_URL
```
This is useful for example when you want to deploy previews of a site to a dynamic URL, such as Netlify
deploy previews.
## serve
This will build and serve the site using a local server. You can also specify
@ -48,5 +51,5 @@ $ 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.
If you fail to see your change, this means that Gutenberg couldn't reload that bit and you will
need to restart `gutenberg serve`.
Gutenberg does a best-effort to live reload but some changes cannot be handled automatically. If you
fail to see your change, you will need to restart `gutenberg serve`.

View file

@ -10,14 +10,14 @@ Gutenberg provides pre-built binaries for MacOS, Linux and Windows on the
Gutenberg is not currently available on Homebrew at the moment.
If you can help package it, please comment on https://github.com/Keats/gutenberg/issues/12
If you can help package it, please comment on [https://github.com/Keats/gutenberg/issues/12](https://github.com/Keats/gutenberg/issues/12)
if you encounter any issues.
## Windows
I am not aware of the package management state in Windows.
If you can help package it, please comment on https://github.com/Keats/gutenberg/issues/12
If you can help package it, please comment on [https://github.com/Keats/gutenberg/issues/12](https://github.com/Keats/gutenberg/issues/12)
if you encounter any issues.
## Archlinux
@ -29,7 +29,7 @@ $ yaourt -S gutenberg-bin
```
## From source
To build it from source, you will need to have Git, [Rust and Cargo](https://www.rust-lang.org/en-US/)
To build it from source, you will need to have Git, [Rust and Cargo](https://www.rust-lang.org/)
installed.
From a terminal, you can now run the following command:

View file

@ -3,23 +3,24 @@ 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
Gutenberg uses the [Tera](tera.netlify.com) template engine and is very similar
to Jinja2, Liquid or Twig.
As this documentation will only talk about 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.
to learn more about it first.
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
If you are not sure what variables are 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:
A few variables are available on all templates minus RSS and 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_path`: the path (full URL without the `base_url`) of the current page, never starting with a `/`
- `current_url`: the full URL for that page
## Built-in filters

View file

@ -1,17 +1,13 @@
+++
title = "Index, Sections and Pages"
title = "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.
Gutenberg will try to load the `templates/page.html` template, the `page.html` template of the theme if one is used
or 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:

View file

@ -4,9 +4,8 @@ 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:
[section page](./documentation/templates/pages-sections.md#section-variables).
In addition, a paginated section gets a `paginator` variable of the `Pager` type:
```ts
// How many items per page

View file

@ -13,4 +13,4 @@ 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.
a detailed description of what this contains

View file

@ -20,7 +20,6 @@ A `TaxonomyItem` has the following fields:
```ts
name: String;
slug: String;
// Permalink to the generated page
permalink: String;
pages: Array<Page>;
```

View file

@ -4,9 +4,12 @@ html, body {
}
body {
font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.6;
background-color: $background;
// from http://www.heropatterns.com
background-color: #191919;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100' viewBox='0 0 100 100'%3E%3Cg fill-rule='evenodd'%3E%3Cg fill='%234b4b4b' fill-opacity='0.4'%3E%3Cpath opacity='.5' d='M96 95h4v1h-4v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4h-9v4h-1v-4H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15v-9H0v-1h15V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h9V0h1v15h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9h4v1h-4v9zm-1 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm9-10v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-10 0v-9h-9v9h9zm-9-10h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9zm10 0h9v-9h-9v9z'/%3E%3Cpath d='M6 5V0H5v5H0v1h5v94h1V6h94V5H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
color: $foreground;
// for sticky footer
@ -16,16 +19,17 @@ body {
}
a {
color: white;
color: $link-color;
text-decoration: none;
cursor: pointer;
border-bottom: 1px solid rgba(0, 124, 188, 0.25);
&:hover {
text-decoration: underline;
border-bottom: 1px solid $link-color;
}
&:visited {
color: white;
color: $link-color;
}
// totally taken from stripe
@ -46,6 +50,7 @@ a {
color: #191919;
text-decoration: none;
transition: all .15s ease;
border-bottom: none;
&:hover {
transform: translateY(-1px);
@ -58,6 +63,19 @@ a {
transform: translateY(1px);
}
}
&.white {
color: white;
border-bottom-color: rgba(255, 255, 255, 0.25);
&:hover {
border-bottom-color: white;
}
&:visited {
color: white;
}
}
}
pre {

View file

@ -32,21 +32,11 @@
li.active a {
font-weight: bold;
border-bottom: 1px solid $background;
border-bottom: 1px solid $link-color;
}
}
}
a {
color: $background;
padding-bottom: 2px;
border-bottom: 1px solid rgba(25, 25, 25, 0.25);
text-decoration: none;
&:hover {
border-bottom: 1px solid $background;
}
}
}
&__content {
@ -70,26 +60,30 @@
}
}
}
a {
color: $background;
padding-bottom: 2px;
border-bottom: 1px solid $background;
cursor: pointer;
&:hover {
text-decoration: none;
}
&:visited {
color: $background;
}
}
}
iframe {
width: 100%;
min-height: 400px;
}
}
@media only screen and (max-width: 1000px) {
.documentation {
flex-direction: column;
padding: 2rem;
&__content {
width: 100%;
margin-left: 0;
}
&__sidebar {
border-top: 1px solid $background;
order: 1;
margin-right: 0;
margin-top: 1rem;
}
}
}

View file

@ -1,6 +1,10 @@
header {
.header__logo {
border-bottom: none;
}
nav a {
margin-right: 1rem;
margin-right: 2rem;
}
.header__logo {
@ -12,3 +16,18 @@ header {
}
}
}
@media only screen and (max-width: 1000px) {
header {
padding: 1rem 0;
nav {
text-align: center;
}
.header__logo {
// to force menu links to be on a line below
display: block;
}
}
}

View file

@ -1,3 +1,8 @@
.inverted-colours {
background: $foreground;
color: $background;
}
.hero {
width: 60%;
margin: 0 auto;
@ -11,8 +16,6 @@
}
.selling-points {
background: $foreground;
color: $background;
padding: 3rem;
&__content {
@ -23,6 +26,29 @@
.selling-point {
// 2 selling points per row on desktop
width: 50%;
width: 33%;
padding: 2rem;
padding-top: 1rem;
}
// and 1 on mobile
@media only screen and (max-width: 1000px) {
.hero {
width: 90%;
margin-top: 2rem;
margin-bottom: 4rem;
}
.selling-points {
padding: 2rem;
}
.selling-point {
width: 100%;
padding: 1rem;
h2 {
text-align: center;
}
}
}

View file

@ -1,5 +1,5 @@
header {
padding: 2rem 0;
padding: 2rem 3rem;
}
.container {
@ -25,5 +25,5 @@ header {
footer {
text-align: center;
padding: 2rem 0;
padding: 2rem 3rem;
}

View file

@ -8,6 +8,7 @@
$background: #191919;
$foreground: white;
$link-color: #007CBC;
@import "base";
@import "layout";

BIN
docs/static/favicon.ico vendored Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.4 KiB

View file

@ -1,5 +1,6 @@
{% extends "index.html" %}
{% block extra_nav_class %}{% endblock extra_nav_class %}
{% block extra_content_class %}content--reversed{% endblock extra_content_class %}
{% block content %}

View file

@ -7,73 +7,90 @@
<meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
<meta name="author" content="{{ config.extra.author }}">
<title>{% block title %}{{ config.title }}{% endblock title %}</title>
<link href="https://fonts.googleapis.com/css?family=Fira+Sans" rel="stylesheet">
<link rel="stylesheet" href="{{ get_url(path="site.css", cachebust=true) }}"/>
<link rel="stylesheet" href="{{ get_url(path="site.css") }}"/>
<link rel="icon" href="{{ get_url(path="favicon.ico") }}">
</head>
<body>
<header>
<nav class="container">
<a class="header__logo" href="{{ config.base_url }}">Gutenberg</a>
<a href="/documentation" class="nav-link">Docs</a>
<a href="https://github.com/Keats/gutenberg" class="nav-link">Github</a>
<nav class="{% block extra_nav_class %}container{% endblock extra_nav_class %}">
<a class="header__logo white" href="{{ config.base_url }}">Gutenberg</a>
<a class="white" href="{{ get_url(path="./documentation/_index.md") }}" class="nav-link">Docs</a>
<a class="white" href="https://github.com/Keats/gutenberg" class="nav-link">GitHub</a>
</nav>
</header>
<div class="content {% block extra_content_class %}{% endblock extra_content_class %}">
{% block content %}
<div class="hero">
<h1>Your damn fast one-stop static site engine</h1>
<h1>Your one-stop static site engine</h1>
<p class="hero__tagline">
Forget dependencies. Everything you need in one binary.
</p>
<a href="/documentation" class="button">Get started</a>
<a href="{{ get_url(path="./documentation/_index.md") }}" class="button">Get started</a>
</div>
<div class="selling-points">
<div class="inverted-colours selling-points">
<div class="selling-points__content container">
<div class="selling-point">
<h2>Everything built-in</h2>
<h2>No dependencies</h2>
<p>
Gutenberg comes with Sass compilation, syntax highlighting and
other features that usually require using additional tools
or use JavaScript libraries on your site.
Gutenberg comes as a single executable with Sass compilation, syntax highlighting, table of contents
and many other features that traditionally require setting up a dev environment
or adding some JavaScript libraries to your site.
</p>
</div>
<div class="selling-point">
<h2>Fast</h2>
<h2>Blazing fast</h2>
<p>
Your site will be generated in milliseconds, not seconds.
That includes Sass compilation and syntax highlighting.
The average site will be generated in less than a second,
including Sass compilation and syntax highlighting
thanks to <a href="https://www.rust-lang.org">Rust</a>.
</p>
</div>
<div class="selling-point">
<h2>Flexible</h2>
<h2>Scalable</h2>
<p>
You can build anything you want with Gutenberg: blogs, landing pages, knowledge bases...
Gutenberg renders your whole site as static files, making it trivial to handle
any kind of traffic you will throw at it at no cost without having
to worry about managing a server or a database.
</p>
</div>
<div class="selling-point">
<h2>Easy to use</h2>
<p>
Gutenberg gets out of your way so you can focus on what
you are actually making.
From the CLI to the template engine, everything is designed to be intuitive.
Don't take my words for it though, look at the
<a href="{{ get_url(path="./documentation/_index.md") }}">documentation</a> and see for yourself.
</p>
</div>
<div class="selling-point">
<h2>Flexible</h2>
<p>
Gutenberg gets out of your way so you can focus on your content, be it a blog,
a knowledge base, a landing page or a combination of them.
</p>
</div>
<div class="selling-point">
<h2>Augmented Markdown</h2>
<p>
Gutenberg comes with <a href="{{ get_url(path="./documentation/content/shortcodes.md") }}">shortcodes</a> and
<a href="{{ get_url(path="./documentation/content/linking.md") }}">internal links</a>
to make it easier to write your content.
</p>
</div>
</div>
</div>
{% endblock content %}
</div>
<footer>
<div class="container">
© 2017 Vincent Prouillet
</div>
©2017 — <a class="white" href="https://vincent.is">Vincent Prouillet</a> and <a class="white" href="https://github.com/Keats/gutenberg/graphs/contributors">contributors</a>
</footer>
</body>
</html>

8
netlify.toml Normal file
View file

@ -0,0 +1,8 @@
[build]
base = "docs"
publish = "docs/public"
command = "curl -sL https://github.com/Keats/gutenberg/releases/download/v0.2.1/gutenberg-v0.2.1-x86_64-unknown-linux-gnu.tar.gz | tar zxvf - && /opt/build/repo/docs/gutenberg build"
[context.deploy-preview]
command = "curl -sL https://github.com/Keats/gutenberg/releases/download/v0.2.1/gutenberg-v0.2.1-x86_64-unknown-linux-gnu.tar.gz | tar zxvf - && /opt/build/repo/docs/gutenberg build --base-url $DEPLOY_PRIME_URL"