Some design work on docs

This commit is contained in:
Vincent Prouillet 2017-10-04 00:21:18 +09:00
parent 5aed3a4a1d
commit c348648b02
14 changed files with 110 additions and 37 deletions

View file

@ -17,6 +17,9 @@
- Add config to sitemap template - Add config to sitemap template
- Add `permalink` to all taxonomy items (tags & categories) - 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 - Tags in the tags page are now sorting alphabetically instead of by number of pages in them
- Remove deprecated `link` param of `get_url`
- Add 1337 color scheme
- Defaults to compressed Sass output
## 0.1.3 (2017-08-31) ## 0.1.3 (2017-08-31)

View file

@ -338,9 +338,11 @@ In case of shortcodes with a body, the body will be passed as the `body` variabl
### Adding a syntax ### Adding a syntax
Syntax highlighting depends on submodules so ensure you load them first: Syntax highlighting depends on submodules so ensure you load them first:
```bash ```bash
$ git submodule update --init $ git submodule update --init
``` ```
Gutenberg only works with syntaxes in the `.sublime-syntax` format. If your syntax Gutenberg only works with syntaxes in the `.sublime-syntax` format. If your syntax
is in `.tmLanguage` format, open it in Sublime Text and convert it to `sublime-syntax` by clicking on is in `.tmLanguage` format, open it in Sublime Text and convert it to `sublime-syntax` by clicking on
Tools > Developer > New Syntax from ... and put it at the root of `sublime_syntaxes`. Tools > Developer > New Syntax from ... and put it at the root of `sublime_syntaxes`.

View file

@ -5,6 +5,7 @@ description = "Everything you need to make a static site engine in one binary. A
compile_sass = true compile_sass = true
highlight_code = true highlight_code = true
insert_anchor_links = true insert_anchor_links = true
highlight_theme = "kronuz"
[extra] [extra]
author = "Vincent Prouillet" author = "Vincent Prouillet"

View file

@ -46,11 +46,11 @@ On a new line, call the shortcode as if it was a function in a variable block. A
calls of the YouTube shortcode. calls of the YouTube shortcode.
```md ```md
{{ youtube(id="w7Ft2ymGmfc") }} {{ youtube(id="dQw4w9WgXcQ") }}
{{ youtube(id="w7Ft2ymGmfc", autoplay=true) }} {{ youtube(id="dQw4w9WgXcQ", autoplay=true) }}
{{ youtube(id="w7Ft2ymGmfc", autoplay=true, class="youtube") }} {{ youtube(id="dQw4w9WgXcQ", autoplay=true, class="youtube") }}
``` ```
### Shortcodes with body ### Shortcodes with body
@ -93,16 +93,16 @@ The arguments are:
Usage example: Usage example:
```md ```md
{{ youtube(id="w7Ft2ymGmfc") }} {{ youtube(id="dQw4w9WgXcQ") }}
{{ youtube(id="w7Ft2ymGmfc", autoplay=true) }} {{ youtube(id="dQw4w9WgXcQ", autoplay=true) }}
{{ youtube(id="w7Ft2ymGmfc", autoplay=true, class="youtube") }} {{ youtube(id="dQw4w9WgXcQ", autoplay=true, class="youtube") }}
``` ```
Result example: Result example:
{{ youtube(id="w7Ft2ymGmfc") }} {{ youtube(id="dQw4w9WgXcQ") }}
### Vimeo ### Vimeo
Embed a player for a Vimeo video. Embed a player for a Vimeo video.

View file

@ -41,3 +41,6 @@ $ gutenberg serve --interface 0.0.0.0 --port 2000
The serve command will watch all your content and will provide live reload, without The serve command will watch all your content and will provide live reload, without
hard refresh if possible. 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`.

View file

@ -29,7 +29,8 @@ theme = ""
# Highlight all code blocks found # Highlight all code blocks found
highlight_code = false highlight_code = false
# Which theme to use for the code highlighting. See below for list of accepted values # Which theme to use for the code highlighting.
# See below for list of accepted values
highlight_theme = "base16-ocean-dark" highlight_theme = "base16-ocean-dark"
# Whether to generate a RSS feed automatically # Whether to generate a RSS feed automatically
@ -38,16 +39,19 @@ generate_rss = false
# The number of articles to include in the RSS feed # The number of articles to include in the RSS feed
rss_limit = 20 rss_limit = 20
# Whether to generate a tags page and individual tag pages for pages with tags # Whether to generate a tags page and individual
# tag pages for pages with tags
generate_tags_pages = false generate_tags_pages = false
# Whether to generate a categories page and individual category pages for pages with a category # Whether to generate a categories page and individual
# category pages for pages with a category
generate_categories_pages = false generate_categories_pages = false
# Whether to compile the Sass files found in the `sass` directory # Whether to compile the Sass files found in the `sass` directory
compile_sass = false compile_sass = false
# You can put any kind of data in there and it will be accessible in all templates # You can put any kind of data in there and it
# will be accessible in all templates
[extra] [extra]
``` ```
@ -66,6 +70,7 @@ Gutenberg currently has the following highlight themes available:
- monokai - monokai
- solarized-dark - solarized-dark
- solarized-light - solarized-light
- 1337
Gutenberg uses the Sublime Text themes, making it very easy to add more. 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). 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).

View file

@ -6,7 +6,7 @@ weight = 1
Gutenberg provides pre-built binaries for Mac OS, Linux and Windows on the Gutenberg provides pre-built binaries for Mac OS, Linux and Windows on the
[Github release page](https://github.com/Keats/gutenberg/releases). [Github release page](https://github.com/Keats/gutenberg/releases).
## Using brew on Mac OS ## Mac OS
TODO: it's not on brew right now TODO: it's not on brew right now

View file

@ -2,4 +2,5 @@
title = "Themes" title = "Themes"
weight = 4 weight = 4
sort_by = "weight" sort_by = "weight"
insert_anchor_links = "left"
+++ +++

View file

@ -33,9 +33,9 @@ Any file from the theme can be overriden by creating a file with the same path a
directory. Here are a few examples of that, assuming the theme name is `simple-blog`: directory. Here are a few examples of that, assuming the theme name is `simple-blog`:
```plain ```plain
templates/pages/post.html -> will override themes/simple-blog/pages/post.html templates/pages/post.html -> replace themes/simple-blog/pages/post.html
templates/macros.html -> will override themes/simple-blog/macros.html templates/macros.html -> replace themes/simple-blog/macros.html
static/js/site.js -> will override themes/simple-blog/static/js/site.jss static/js/site.js -> replace 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 Most themes will also provide some variables that are meant to be overriden: this happens in the `extra` section

View file

@ -4,7 +4,7 @@ html, body {
} }
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; font-family: "Fira Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
line-height: 1.6; line-height: 1.6;
background-color: $background; background-color: $background;
color: $foreground; color: $foreground;
@ -56,7 +56,6 @@ a {
&:active { &:active {
background-color: #f6f9fc; background-color: #f6f9fc;
transform: translateY(1px); transform: translateY(1px);
// box-shadow: 0 4px 6px rgba(50, 50, 93, 0.11), 0 1px 3px rgba(0, 0, 0, .08);
} }
} }
} }
@ -65,3 +64,12 @@ pre {
padding: 1rem; padding: 1rem;
overflow: auto; overflow: auto;
} }
p code, li code {
background-color: #f5f5f5;
white-space: pre-wrap;
padding: 5px;
border-radius: 5px;
font-size: 0.85rem;
box-shadow: 0 1px 3px rgba(0,0,0,.1), 0 1px 1px rgba(0,0,0,.1), 0 2px 1px -1px rgba(0,0,0,.12);
}

View file

@ -8,35 +8,86 @@
ul { ul {
padding-left: 0; padding-left: 0;
list-style: none; list-style: none;
}
> ul {
> li {
margin-bottom: 1rem;
}
.documentation__sidebar__title {
font-size: 1.25rem;
font-weight: bold;
}
ul { ul {
padding-left: 1rem; margin-top: 0.25rem;
li {
border-left: 1px solid $background;
padding-left: 0.75rem;
padding-top: 0.25rem;
padding-bottom: 0.25rem;
}
li.active a { li.active a {
color: red; font-weight: bold;
border-bottom: 1px solid $background;
} }
} }
} }
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 { &__content {
flex: 1; width: 60%;
} // Same as the anchor absolute left to not overlap
margin-left: 2rem;
a { h1, h2, h3, h4, h5, h6 {
color: $background; .gutenberg-anchor {
padding-bottom: 2px; font-size: 1.25rem;
border-bottom: 1px solid $background; visibility: hidden;
margin-left: -2rem;
text-decoration: none;
border-bottom-color: transparent;
cursor: pointer;
}
&:hover { &:hover {
text-decoration: none; .gutenberg-anchor {
visibility: visible;
}
}
} }
&:visited { a {
color: $background; color: $background;
padding-bottom: 2px;
border-bottom: 1px solid $background;
cursor: pointer;
&:hover {
text-decoration: none;
}
&:visited {
color: $background;
}
} }
} }
iframe { iframe {
width: 100%; width: 100%;
min-height: 400px; min-height: 400px;

View file

@ -1,17 +1,15 @@
{% extends "index.html" %} {% extends "index.html" %}
{% block title %}{{ super() }} - Documentation {% endblock title %}
{% block extra_content_class %}content--reversed{% endblock extra_content_class %} {% block extra_content_class %}content--reversed{% endblock extra_content_class %}
{% block content %} {% block content %}
{% set section = get_section(path="documentation/_index.md") %} {% set section = get_section(path="documentation/_index.md") %}
<div class="documentation container"> <div class="documentation">
<aside class="documentation__sidebar"> <aside class="documentation__sidebar">
<ul> <ul>
{% for subsection in section.subsections %} {% for subsection in section.subsections %}
<li> <li>
{{ subsection.title }} <span class="documentation__sidebar__title">{{ subsection.title }}</span>
<ul> <ul>
{% for page in subsection.pages %} {% for page in subsection.pages %}
<li class="{% if current_path == page.path %}active{% endif %}"> <li class="{% if current_path == page.path %}active{% endif %}">

View file

@ -7,6 +7,7 @@
<meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}"> <meta name="description" content="{% block description %}{{ config.description }}{% endblock description %}">
<meta name="author" content="{{ config.extra.author }}"> <meta name="author" content="{{ config.extra.author }}">
<title>{% block title %}{{ config.title }}{% endblock title %}</title> <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", cachebust=true) }}"/>
</head> </head>
<body> <body>
@ -14,8 +15,7 @@
<header> <header>
<nav class="container"> <nav class="container">
<a class="header__logo" href="{{ config.base_url }}">Gutenberg</a> <a class="header__logo" href="{{ config.base_url }}">Gutenberg</a>
<a href="/documentation" class="nav-link">Documentation</a> <a href="/documentation" class="nav-link">Docs</a>
<a href="" class="nav-link">Themes</a>
<a href="https://github.com/Keats/gutenberg" class="nav-link">Github</a> <a href="https://github.com/Keats/gutenberg" class="nav-link">Github</a>
</nav> </nav>
</header> </header>
@ -27,7 +27,7 @@
<p class="hero__tagline"> <p class="hero__tagline">
Forget dependencies. Everything you need in one binary. Forget dependencies. Everything you need in one binary.
</p> </p>
<a href="" class="button">Get started</a> <a href="/documentation" class="button">Get started</a>
</div> </div>
<div class="selling-points"> <div class="selling-points">
@ -60,7 +60,8 @@
<div class="selling-point"> <div class="selling-point">
<h2>Easy to use</h2> <h2>Easy to use</h2>
<p> <p>
Gutenberg strives for good UX and being productive instantly. Gutenberg gets out of your way so you can focus on what
you are actually making.
</p> </p>
</div> </div>

View file

@ -1,6 +1,6 @@
{% extends "documentation.html" %} {% extends "documentation.html" %}
{% block title %}{{ super() }} - {{ page.title }} {% endblock title %} {% block title %}{{ page.title }} | {{ super() }} {% endblock title %}
{% block doc_content %} {% block doc_content %}
<h1>{{page.title}}</h1> <h1>{{page.title}}</h1>
{{page.content | safe}} {{page.content | safe}}