From bdcad38310d8b428276ca72cef225c09c83abc00 Mon Sep 17 00:00:00 2001 From: Vincent Prouillet Date: Thu, 19 Oct 2017 13:48:50 +0200 Subject: [PATCH] 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 --- .../rendering/examples/generate_sublime.rs | 4 +- docs/config.toml | 4 +- docs/content/documentation/content/linking.md | 5 +- .../content/documentation/content/overview.md | 16 +++-- docs/content/documentation/content/page.md | 7 +- docs/content/documentation/content/section.md | 19 ++--- .../documentation/content/shortcodes.md | 19 +++-- .../content/syntax-highlighting.md | 25 +++---- .../content/table-of-contents.md | 4 +- .../getting-started/cli-usage.md | 9 ++- .../getting-started/installation.md | 6 +- .../documentation/templates/overview.md | 15 ++-- .../documentation/templates/pages-sections.md | 10 +-- .../documentation/templates/pagination.md | 5 +- docs/content/documentation/templates/rss.md | 2 +- .../templates/tags-categories.md | 1 - docs/sass/_base.scss | 28 ++++++-- docs/sass/_docs.scss | 48 ++++++------- docs/sass/_header.scss | 21 +++++- docs/sass/_index.scss | 32 ++++++++- docs/sass/_layout.scss | 4 +- docs/sass/site.scss | 1 + docs/static/favicon.ico | Bin 0 -> 5558 bytes docs/templates/documentation.html | 1 + docs/templates/index.html | 67 +++++++++++------- netlify.toml | 8 +++ 26 files changed, 226 insertions(+), 135 deletions(-) create mode 100644 docs/static/favicon.ico create mode 100644 netlify.toml diff --git a/components/rendering/examples/generate_sublime.rs b/components/rendering/examples/generate_sublime.rs index 3f73ae9b..5fdabe1f 100644 --- a/components/rendering/examples/generate_sublime.rs +++ b/components/rendering/examples/generate_sublime.rs @@ -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" => { diff --git a/docs/config.toml b/docs/config.toml index 73baf3a8..ea9e9bac 100644 --- a/docs/config.toml +++ b/docs/config.toml @@ -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 diff --git a/docs/content/documentation/content/linking.md b/docs/content/documentation/content/linking.md index 92980874..19478e18 100644 --- a/docs/content/documentation/content/linking.md +++ b/docs/content/documentation/content/linking.md @@ -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. diff --git a/docs/content/documentation/content/overview.md b/docs/content/documentation/content/overview.md index 90a6e0ab..8baca378 100644 --- a/docs/content/documentation/content/overview.md +++ b/docs/content/documentation/content/overview.md @@ -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. diff --git a/docs/content/documentation/content/page.md b/docs/content/documentation/content/page.md index ff261254..0686887a 100644 --- a/docs/content/documentation/content/page.md +++ b/docs/content/documentation/content/page.md @@ -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 `` 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). diff --git a/docs/content/documentation/content/section.md b/docs/content/documentation/content/section.md index 1b1f97d8..fa96e3d1 100644 --- a/docs/content/documentation/content/section.md +++ b/docs/content/documentation/content/section.md @@ -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. diff --git a/docs/content/documentation/content/shortcodes.md b/docs/content/documentation/content/shortcodes.md index 94f4ebe1..8a880147 100644 --- a/docs/content/documentation/content/shortcodes.md +++ b/docs/content/documentation/content/shortcodes.md @@ -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 diff --git a/docs/content/documentation/content/syntax-highlighting.md b/docs/content/documentation/content/syntax-highlighting.md index 2ef0e6b7..cd8a92f0 100644 --- a/docs/content/documentation/content/syntax-highlighting.md +++ b/docs/content/documentation/content/syntax-highlighting.md @@ -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"] diff --git a/docs/content/documentation/content/table-of-contents.md b/docs/content/documentation/content/table-of-contents.md index 4a8a241a..45d52152 100644 --- a/docs/content/documentation/content/table-of-contents.md +++ b/docs/content/documentation/content/table-of-contents.md @@ -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: diff --git a/docs/content/documentation/getting-started/cli-usage.md b/docs/content/documentation/getting-started/cli-usage.md index f852961f..7e0022c6 100644 --- a/docs/content/documentation/getting-started/cli-usage.md +++ b/docs/content/documentation/getting-started/cli-usage.md @@ -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`. diff --git a/docs/content/documentation/getting-started/installation.md b/docs/content/documentation/getting-started/installation.md index caa74be2..f9836ce3 100644 --- a/docs/content/documentation/getting-started/installation.md +++ b/docs/content/documentation/getting-started/installation.md @@ -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: diff --git a/docs/content/documentation/templates/overview.md b/docs/content/documentation/templates/overview.md index 90f1b24e..bbc65eeb 100644 --- a/docs/content/documentation/templates/overview.md +++ b/docs/content/documentation/templates/overview.md @@ -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 diff --git a/docs/content/documentation/templates/pages-sections.md b/docs/content/documentation/templates/pages-sections.md index a6aa1ae3..a53b3b98 100644 --- a/docs/content/documentation/templates/pages-sections.md +++ b/docs/content/documentation/templates/pages-sections.md @@ -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: diff --git a/docs/content/documentation/templates/pagination.md b/docs/content/documentation/templates/pagination.md index cf782ee9..e9561c0b 100644 --- a/docs/content/documentation/templates/pagination.md +++ b/docs/content/documentation/templates/pagination.md @@ -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 diff --git a/docs/content/documentation/templates/rss.md b/docs/content/documentation/templates/rss.md index f1c8d0b3..f96824d8 100644 --- a/docs/content/documentation/templates/rss.md +++ b/docs/content/documentation/templates/rss.md @@ -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 diff --git a/docs/content/documentation/templates/tags-categories.md b/docs/content/documentation/templates/tags-categories.md index bdd24986..00907443 100644 --- a/docs/content/documentation/templates/tags-categories.md +++ b/docs/content/documentation/templates/tags-categories.md @@ -20,7 +20,6 @@ A `TaxonomyItem` has the following fields: ```ts name: String; slug: String; -// Permalink to the generated page permalink: String; pages: Array; ``` diff --git a/docs/sass/_base.scss b/docs/sass/_base.scss index 1ecc17f4..a6c7e48b 100644 --- a/docs/sass/_base.scss +++ b/docs/sass/_base.scss @@ -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 { diff --git a/docs/sass/_docs.scss b/docs/sass/_docs.scss index ae318e21..e54852cf 100644 --- a/docs/sass/_docs.scss +++ b/docs/sass/_docs.scss @@ -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; + } + } +} diff --git a/docs/sass/_header.scss b/docs/sass/_header.scss index 1806cbc1..699e025a 100644 --- a/docs/sass/_header.scss +++ b/docs/sass/_header.scss @@ -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; + } + } +} diff --git a/docs/sass/_index.scss b/docs/sass/_index.scss index 3b9b10d6..b3b746f7 100644 --- a/docs/sass/_index.scss +++ b/docs/sass/_index.scss @@ -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; + } + } } diff --git a/docs/sass/_layout.scss b/docs/sass/_layout.scss index 5b36df24..c917f7fe 100644 --- a/docs/sass/_layout.scss +++ b/docs/sass/_layout.scss @@ -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; } diff --git a/docs/sass/site.scss b/docs/sass/site.scss index 6d990895..bae6b5d7 100644 --- a/docs/sass/site.scss +++ b/docs/sass/site.scss @@ -8,6 +8,7 @@ $background: #191919; $foreground: white; +$link-color: #007CBC; @import "base"; @import "layout"; diff --git a/docs/static/favicon.ico b/docs/static/favicon.ico new file mode 100644 index 0000000000000000000000000000000000000000..45a70df2a3b1cfc9c281726c9fd8055b3ae830ec GIT binary patch literal 5558 zcmeHLJxD7-5Z=TH{(uEN)THM zJO6)5Yk%`zo`R@g@gkb7MLzIqQ+|A9+xWB*0{QNwIhlepYH;1RECy-pvMlIjp-)C&K?C$OkZEbBI z+S~1RghCR8++FZnqmlLqp7Y zd3g~rspqFWr>Cdm;o$+jy}cjmDmL1d*8Sk%0GXMYVIL(WCE;hSzP6u{k%6_fHJqQH zV`XIphlhvk&t|j5?1OyP*4Fa8+uPe=wOS3?YGZn*AJ5rSVj5cgckP%|u-7ya@YG3h@Ie#MZ9GSKq+YwZDYb-4-p{c1UDX|n36yW6KBn)|Raef7}CE%x&Aq6~-IMB-DOsZdQ#O$5Hf;ozE%>N+(K3=Bl* z898fOU6043z@w|HD`9@MIC_1muaz|(A0IazpW-??I^s3h+S*D9{^;l^^>r*PEbyH? tJ3Bk+*zv^sWn {% block title %}{{ config.title }}{% endblock title %} - - + +
-
{% block content %}
-

Your damn fast one-stop static site engine

+

Your one-stop static site engine

Forget dependencies. Everything you need in one binary.

- Get started + Get started
-
+
-
-

Everything built-in

+

No dependencies

- 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.

-

Fast

+

Blazing fast

- 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 Rust.

-

Flexible

+

Scalable

- 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.

Easy to use

- 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 + documentation and see for yourself.

+
+

Flexible

+

+ 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. +

+
+ +
+

Augmented Markdown

+

+ Gutenberg comes with shortcodes and + internal links + to make it easier to write your content. +

+
+ {% endblock content %}
- diff --git a/netlify.toml b/netlify.toml new file mode 100644 index 00000000..26591ef2 --- /dev/null +++ b/netlify.toml @@ -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" +