WIP docs

6 years ago · bad1378485
--- a/docs/content/documentation/_index.md
+++ b/docs/content/documentation/_index.md
@@ -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
--- a/docs/content/documentation/getting-started/_index.md
+++ b/docs/content/documentation/getting-started/_index.md
@@ -0,0 +1,4 @@
 +++
 title = "Getting Started"
 sort_by = "order"
 +++
--- a/docs/content/documentation/getting-started/cli-usage.md
+++ b/docs/content/documentation/getting-started/cli-usage.md
@@ -0,0 +1,6 @@
 +++
 title = "CLI usage"
 order = 2
 +++

 Hey
--- a/docs/content/documentation/getting-started/configuration.md
+++ b/docs/content/documentation/getting-started/configuration.md
@@ -0,0 +1,6 @@
 +++
 title = "Configuration"
 order = 4
 +++

 Hey
--- a/docs/content/documentation/getting-started/directory-structure.md
+++ b/docs/content/documentation/getting-started/directory-structure.md
@@ -0,0 +1,6 @@
 +++
 title = "Directory structure"
 order = 3
 +++

 Hey
--- a/docs/content/documentation/getting-started/installation.md
+++ b/docs/content/documentation/getting-started/installation.md
@@ -0,0 +1,6 @@
 +++
 title = "Installation"
 order = 1
 +++

 Hey
--- a/docs/sass/_base.scss
+++ b/docs/sass/_base.scss
@@ -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 {

 }
--- a/docs/sass/_docs.scss
+++ b/docs/sass/_docs.scss
@@ -0,0 +1,3 @@
 .documentation {
  padding: 3rem;
 }
--- a/docs/sass/_index.scss
+++ b/docs/sass/_index.scss
@@ -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;
 }
--- a/docs/sass/_layout.scss
+++ b/docs/sass/_layout.scss
@@ -1,17 +1,29 @@
 header {
  padding: 2rem 0;
 }

  nav {
    max-width: 1000px;
    margin: 0 auto;
  }
 .container {
  max-width: 1000px;
  margin: 0 auto;
 }

 footer {
  text-align: center;
  padding: 2rem 0;
@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;
 }
--- a/docs/sass/site.scss
+++ b/docs/sass/site.scss
@@ -6,7 +6,11 @@
  box-sizing: border-box;
 }

 $background: #191919;
 $foreground: white;

@import "base";
@import "layout";
@import "header";
@import "index";
@import "docs";
--- a/docs/templates/documentation.html
+++ b/docs/templates/documentation.html
@@ -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 %}
--- a/docs/templates/index.html
+++ b/docs/templates/index.html
@@ -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>