emelie/zola
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

WIP docs

Browse source
This commit is contained in:
Vincent Prouillet 2017-09-12 16:13:26 +09:00
parent 195b760fdc
commit bad1378485
13 changed files with 174 additions and 16 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
docs/content/documentation/_index.md Normal file
View file

@ -0,0 +1,34 @@
+++
template = "documentation.html"
+++
Getting started
- Installation
- CLI usage
- Directory structure
- config.toml
Content
- Organisation
- Pages
- Sections
- Shortcodes
- Internal links
- Table of contents
- Deep linking (# links)
- Syntax highlighting
- Pagination
- Tag & categories
- RSS
- Sitemap
Templates
- Intro
- Each kind of page and the variables available
- Built-in global functions
- Built-in filters
- Debugging
Theme
- Installing & customising a theme
- Creating a theme

4
docs/content/documentation/getting-started/_index.md Normal file
View file

@ -0,0 +1,4 @@
+++
title = "Getting Started"
sort_by = "order"
+++

6
docs/content/documentation/getting-started/cli-usage.md Normal file
View file

@ -0,0 +1,6 @@
+++
title = "CLI usage"
order = 2
+++
Hey

6
docs/content/documentation/getting-started/configuration.md Normal file
View file

@ -0,0 +1,6 @@
+++
title = "Configuration"
order = 4
+++
Hey

6
docs/content/documentation/getting-started/directory-structure.md Normal file
View file

@ -0,0 +1,6 @@
+++
title = "Directory structure"
order = 3
+++
Hey

6
docs/content/documentation/getting-started/installation.md Normal file
View file

@ -0,0 +1,6 @@
+++
title = "Installation"
order = 1
+++
Hey

8
docs/sass/_base.scss
View file

@ -6,8 +6,8 @@ html, body {
body {
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: #191919;
color: white;
background-color: $background;
color: $foreground;
// for sticky footer
display: flex;
@ -65,7 +65,3 @@ pre {
padding: 1rem;
overflow: auto;
}
button {
}

3
docs/sass/_docs.scss Normal file
View file

@ -0,0 +1,3 @@
.documentation {
padding: 3rem;
}

18
docs/sass/_index.scss
View file

@ -2,9 +2,27 @@
width: 60%;
margin: 0 auto;
margin-top: 3rem;
margin-bottom: 6rem;
text-align: center;
&__tagline {
margin-bottom: 2rem;
}
}
.selling-points {
background: $foreground;
color: $background;
padding: 3rem;
&__content {
display: flex;
flex-wrap: wrap;
}
}
.selling-point {
// 2 selling points per row on desktop
width: 50%;
padding: 2rem;
}

22
docs/sass/_layout.scss
View file

@ -1,17 +1,29 @@
header {
padding: 2rem 0;
}
nav {
.container {
max-width: 1000px;
margin: 0 auto;
}
@media only screen and (max-width: 1000px) {
.container {
max-width: 90%;
}
}
.content {
flex-grow: 1;
&--reversed {
background: $foreground;
color: $background;
}
}
footer {
text-align: center;
padding: 2rem 0;
}
.content {
flex-grow: 1;
}

4
docs/sass/site.scss
View file

@ -6,7 +6,11 @@
box-sizing: border-box;
}
$background: #191919;
$foreground: white;
@import "base";
@import "layout";
@import "header";
@import "index";
@import "docs";

26
docs/templates/documentation.html vendored Normal file
View file

@ -0,0 +1,26 @@
{% 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">
<aside class="documentation__sidebar">
{% for subsection in section.subsections %}
<li>
{{ subsection.title }}
<ul>
{% for page in subsection.pages | reverse %}
<li>{{page.title}}</li>
{% endfor %}
</ul>
</li>
{% endfor %}
</aside>
<div class="documentation__content">
hey
</div>
</div>
{% endblock content %}

43
docs/templates/index.html vendored
View file

@ -12,15 +12,15 @@
<body>
<header>
<nav>
<nav class="container">
<a class="header__logo" href="{{ config.base_url }}">Gutenberg</a>
<a href="" class="nav-link">Docs</a>
<a href="/documentation" class="nav-link">Documentation</a>
<a href="" class="nav-link">Themes</a>
<a href="https://github.com/Keats/gutenberg" class="nav-link">Github</a>
</nav>
</header>
<div class="content">
<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>
@ -29,6 +29,43 @@
</p>
<a href="" class="button">Get started</a>
</div>
<div class="selling-points">
<div class="selling-points__content container">
<div class="selling-point">
<h2>Everything built-in</h2>
<p>
Gutenberg comes with Sass compilation, syntax highlighting and
a other features that usually require using additional tools
or use JavaScript libraries on your site.
</p>
</div>
<div class="selling-point">
<h2>Fast</h2>
<p>
Your site will be generated in milliseconds, not seconds.
That includes Sass compilation and syntax highlighting.
</p>
</div>
<div class="selling-point">
<h2>Flexible</h2>
<p>
You can build anything you want with Gutenberg: blogs, landing pages, knowledge bases...
</p>
</div>
<div class="selling-point">
<h2>Easy to use</h2>
<p>
Gutenberg strives for good UX and being productive instantly.
</p>
</div>
</div>
</div>
{% endblock content %}
</div>