Some design work on docs
This commit is contained in:
parent
5aed3a4a1d
commit
c348648b02
|
@ -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)
|
||||||
|
|
||||||
|
|
|
@ -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`.
|
||||||
|
|
|
@ -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"
|
||||||
|
|
|
@ -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.
|
||||||
|
|
|
@ -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`.
|
||||||
|
|
|
@ -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).
|
||||||
|
|
|
@ -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
|
||||||
|
|
||||||
|
|
|
@ -2,4 +2,5 @@
|
||||||
title = "Themes"
|
title = "Themes"
|
||||||
weight = 4
|
weight = 4
|
||||||
sort_by = "weight"
|
sort_by = "weight"
|
||||||
|
insert_anchor_links = "left"
|
||||||
+++
|
+++
|
||||||
|
|
|
@ -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
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
||||||
|
|
|
@ -8,25 +8,74 @@
|
||||||
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;
|
||||||
|
|
||||||
|
h1, h2, h3, h4, h5, h6 {
|
||||||
|
.gutenberg-anchor {
|
||||||
|
font-size: 1.25rem;
|
||||||
|
visibility: hidden;
|
||||||
|
margin-left: -2rem;
|
||||||
|
text-decoration: none;
|
||||||
|
border-bottom-color: transparent;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
.gutenberg-anchor {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
a {
|
a {
|
||||||
color: $background;
|
color: $background;
|
||||||
padding-bottom: 2px;
|
padding-bottom: 2px;
|
||||||
border-bottom: 1px solid $background;
|
border-bottom: 1px solid $background;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
|
@ -36,6 +85,8 @@
|
||||||
color: $background;
|
color: $background;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
iframe {
|
iframe {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
|
|
6
docs/templates/documentation.html
vendored
6
docs/templates/documentation.html
vendored
|
@ -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 %}">
|
||||||
|
|
9
docs/templates/index.html
vendored
9
docs/templates/index.html
vendored
|
@ -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>
|
||||||
|
|
||||||
|
|
2
docs/templates/page.html
vendored
2
docs/templates/page.html
vendored
|
@ -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}}
|
||||||
|
|
Loading…
Reference in a new issue