mirror of
https://github.com/getzola/zola
synced 2024-12-13 13:52:28 +00:00
Some design work on docs
This commit is contained in:
Vincent Prouillet
parent
5aed3a4a1d
commit
c348648b02
14 changed files with 110 additions and 37 deletions
|
|
@ -17,6 +17,9 @@
|
|||
- 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
|
||||
- Remove deprecated `link` param of `get_url`
|
||||
- Add 1337 color scheme
|
||||
- Defaults to compressed Sass output
|
||||
|
||||
## 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
|
||||
Syntax highlighting depends on submodules so ensure you load them first:
|
||||
|
||||
```bash
|
||||
$ git submodule update --init
|
||||
```
|
||||
|
||||
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
|
||||
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
|
||||
highlight_code = true
|
||||
insert_anchor_links = true
|
||||
highlight_theme = "kronuz"
|
||||
|
||||
[extra]
|
||||
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.
|
||||
|
||||
```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
|
||||
|
|
@ -93,16 +93,16 @@ The arguments are:
|
|||
Usage example:
|
||||
|
||||
```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:
|
||||
|
||||
{{ youtube(id="w7Ft2ymGmfc") }}
|
||||
{{ youtube(id="dQw4w9WgXcQ") }}
|
||||
|
||||
### Vimeo
|
||||
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
|
||||
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_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"
|
||||
|
||||
# Whether to generate a RSS feed automatically
|
||||
|
|
@ -38,16 +39,19 @@ 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
|
||||
# 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
|
||||
# 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
|
||||
# You can put any kind of data in there and it
|
||||
# will be accessible in all templates
|
||||
[extra]
|
||||
```
|
||||
|
||||
|
|
@ -66,6 +70,7 @@ Gutenberg currently has the following highlight themes available:
|
|||
- monokai
|
||||
- solarized-dark
|
||||
- solarized-light
|
||||
- 1337
|
||||
|
||||
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).
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ weight = 1
|
|||
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
|
||||
## Mac OS
|
||||
|
||||
TODO: it's not on brew right now
|
||||
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
title = "Themes"
|
||||
weight = 4
|
||||
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`:
|
||||
|
||||
```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
|
||||
templates/pages/post.html -> replace themes/simple-blog/pages/post.html
|
||||
templates/macros.html -> replace themes/simple-blog/macros.html
|
||||
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
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ html, 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;
|
||||
background-color: $background;
|
||||
color: $foreground;
|
||||
|
|
@ -56,7 +56,6 @@ a {
|
|||
&:active {
|
||||
background-color: #f6f9fc;
|
||||
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;
|
||||
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,35 +8,86 @@
|
|||
ul {
|
||||
padding-left: 0;
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
> ul {
|
||||
> li {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.documentation__sidebar__title {
|
||||
font-size: 1.25rem;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
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 {
|
||||
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 {
|
||||
flex: 1;
|
||||
}
|
||||
width: 60%;
|
||||
// Same as the anchor absolute left to not overlap
|
||||
margin-left: 2rem;
|
||||
|
||||
a {
|
||||
color: $background;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid $background;
|
||||
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 {
|
||||
text-decoration: none;
|
||||
&:hover {
|
||||
.gutenberg-anchor {
|
||||
visibility: visible;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&:visited {
|
||||
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;
|
||||
|
|
|
|||
6
docs/templates/documentation.html
vendored
6
docs/templates/documentation.html
vendored
|
|
@ -1,17 +1,15 @@
|
|||
{% extends "index.html" %}
|
||||
|
||||
{% block title %}{{ super() }} - Documentation {% endblock title %}
|
||||
|
||||
{% block extra_content_class %}content--reversed{% endblock extra_content_class %}
|
||||
|
||||
{% block content %}
|
||||
{% set section = get_section(path="documentation/_index.md") %}
|
||||
<div class="documentation container">
|
||||
<div class="documentation">
|
||||
<aside class="documentation__sidebar">
|
||||
<ul>
|
||||
{% for subsection in section.subsections %}
|
||||
<li>
|
||||
{{ subsection.title }}
|
||||
<span class="documentation__sidebar__title">{{ subsection.title }}</span>
|
||||
<ul>
|
||||
{% for page in subsection.pages %}
|
||||
<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="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) }}"/>
|
||||
</head>
|
||||
<body>
|
||||
|
|
@ -14,8 +15,7 @@
|
|||
<header>
|
||||
<nav class="container">
|
||||
<a class="header__logo" href="{{ config.base_url }}">Gutenberg</a>
|
||||
<a href="/documentation" class="nav-link">Documentation</a>
|
||||
<a href="" class="nav-link">Themes</a>
|
||||
<a href="/documentation" class="nav-link">Docs</a>
|
||||
<a href="https://github.com/Keats/gutenberg" class="nav-link">Github</a>
|
||||
</nav>
|
||||
</header>
|
||||
|
|
@ -27,7 +27,7 @@
|
|||
<p class="hero__tagline">
|
||||
Forget dependencies. Everything you need in one binary.
|
||||
</p>
|
||||
<a href="" class="button">Get started</a>
|
||||
<a href="/documentation" class="button">Get started</a>
|
||||
</div>
|
||||
|
||||
<div class="selling-points">
|
||||
|
|
@ -60,7 +60,8 @@
|
|||
<div class="selling-point">
|
||||
<h2>Easy to use</h2>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
2
docs/templates/page.html
vendored
2
docs/templates/page.html
vendored
|
|
@ -1,6 +1,6 @@
|
|||
{% extends "documentation.html" %}
|
||||
|
||||
{% block title %}{{ super() }} - {{ page.title }} {% endblock title %}
|
||||
{% block title %}{{ page.title }} | {{ super() }} {% endblock title %}
|
||||
{% block doc_content %}
|
||||
<h1>{{page.title}}</h1>
|
||||
{{page.content | safe}}
|
||||
|
|
|
|||
Loading…
Reference in a new issue