feat(docs): Set up blog section

docs/assets/styles/_blog.scss

@@ -0,0 +1,34 @@
+@import "variables";
+
+.posts-list {
+    min-height: 50vh;
+
+    h2 {
+        font-family: $brand-font-face;
+        font-size: 2em;
+        font-weight: 400;
+    }
+    p {
+        line-height: 1.4em;
+    }
+}
+
+.blog-post {
+    max-width: 800px;
+    margin: auto;
+
+    header {
+        padding-top: 30px;
+        h1 {
+            font-family: $brand-font-face;
+            font-size: 3em;
+            font-weight: 400;
+            color: $brand-color;
+        }
+    }
+
+    p:first-child {
+        font-size: 22px;
+        color: $gray-700;
+    }
+}

docs/assets/styles/_landing-page.scss

@@ -11,6 +11,7 @@
 .landing-page {
 
     h2 {
+        font-family: $brand-font-face;
         font-size: 3em;
         font-weight: normal;
         color: $brand-color;
@@ -20,6 +21,7 @@
     }
 
     h3 {
+        font-family: $brand-font-face;
         font-size: 2.5em;
         font-weight: normal;
         color: $gray-600;
@@ -132,6 +134,12 @@
     }
 
     .section-3 {
+        .getting-started {
+            display: flex;
+            @media all and (max-width: $sm-breakpoint){
+                flex-direction: column;
+            }
+        }
         .install-code, .getting-started-link {
             flex: 1;
         }
@@ -160,43 +168,6 @@
         }
     }
 
-    .footer {
-        @include texture-bg;
-        padding: 30px 10px;
-        margin-top: 120px;
-        color: $gray-600;
-
-        .gh-link {
-            margin-left: 12px;
-        }
-
-        .links {
-            margin-left: 12px;
-            margin-bottom: 60px;
-            ul {
-                font-size: 18px;
-                list-style-type: none;
-                padding-left: 0;
-                li {
-                    margin: 6px 0;
-                }
-            }
-        }
-        .copyright {
-            font-size: 12px;
-            text-align: center;
-        }
-        a:link, a:visited {
-            color: $gray-500;
-            transition: color 0.2s;
-        }
-        a:hover {
-            color: $gray-200;
-        }
-    }
-
-
-
     @media all and (min-width: 600px) {
         .hero {
             padding: 100px;

docs/assets/styles/_markdown.scss

@@ -3,16 +3,18 @@
 $block-border-radius: 4px;
 
 .markdown {
-    line-height: 1.7;
+    line-height: 1.4;
     margin-left: 12px;
 
-    > :first-child {
-        margin-top: 0;
-        line-height: 1em;
-    }
-
     h1:first-of-type {
         text-transform: capitalize;
+        font-weight: 500;
+        margin-top: 0;
+        font-size: 2.8em;
+
+        @media all and (max-width: $sm-breakpoint){
+            font-size: 2em;
+        }
     }
 
     h2 {
@@ -25,6 +27,7 @@ $block-border-radius: 4px;
     }
 
     h1, h2, h3, h4, h5 {
+        font-family: $brand-font-face;
         font-weight: 600;
         line-height: 1.25;
 
@@ -52,8 +55,12 @@ $block-border-radius: 4px;
         }
     }
 
+    li {
+        margin-bottom: 6px;
+    }
+
     code:not([data-lang]) {
-        font-family: 'Oxygen Mono', monospace;
+        font-family: 'Source Code Pro', monospace;
         padding: 0 $padding-4;
         background: $color-code-bg;
         color: $color-code-text;

docs/assets/styles/_mixins.scss

@@ -9,6 +9,10 @@
     color: $color-code-text;
     background-color: $color-code-bg;
     position: relative;
+
+    code {
+        font-family: 'Source Code Pro', monospace;
+    }
 }
 
 @mixin code-block-lang {

docs/assets/styles/_top-bar.scss

@@ -3,7 +3,7 @@
 .top-bar {
     position: fixed;
     padding: 0 24px;
-    background-color: #1e1e1e;
+    background-color: #2a2929;
     width: 100%;
     top: 0;
     height: $top-bar-height;
@@ -37,7 +37,7 @@
         }
 
         &.floating {
-            background-color: #1e1e1e;
+            background-color: #2a2929;
 
             .right {
                 a:link, a:visited {
@@ -65,6 +65,8 @@
             max-width: 32px;
             margin-right: 12px;
         }
+        display: flex;
+        align-items: end;
         color: $brand-color;
         font-size: 18px;
         font-size: 24px;
@@ -72,6 +74,7 @@
         font-weight: 600;
 
         .logotype {
+            font-family: $brand-font-face;
             display: inline-block;
             margin-right: 12px;
             @media all and (max-width: $sm-breakpoint){

docs/assets/styles/_utils.scss

@@ -2,9 +2,6 @@
 
 .flex {
     display: flex;
-    @media all and (max-width: $sm-breakpoint){
-        flex-direction: column;
-    }
 }
 
 .justify-start {

docs/assets/styles/_variables.scss

@@ -8,6 +8,8 @@ $font-size-12: 0.75rem;
 $font-size-14: 0.875rem;
 $font-size-16: 1rem;
 
+$brand-font-face: 'Didact Gothic', sans-serif;
+
 // Grayscale
 $white: #ffffff;
 $gray-100: #f8f9fa;

docs/assets/styles/intro/intro.scss

@@ -94,7 +94,7 @@
         color: $brand-color;
         font-size: calc(0.9 * var(--width-unit));
         margin: 0 0 15px;
-        font-family: 'Didact Gothic', sans-serif;
+        font-family: $brand-font-face;
     }
 
     .subhead {

docs/assets/styles/main.scss

@@ -8,6 +8,7 @@
 @import "shortcodes";
 @import "syntax";
 @import "search-widget";
+@import "blog";
 
 html {
     font-size: $font-size-base;
@@ -191,6 +192,41 @@ ul.contents-list {
     }
 }
 
+.footer {
+    @include texture-bg;
+    padding: 30px 10px;
+    margin-top: 120px;
+    color: $gray-600;
+
+    .gh-link {
+        margin-left: 12px;
+    }
+
+    .links {
+        margin-left: 12px;
+        margin-bottom: 60px;
+        ul {
+            font-size: 18px;
+            list-style-type: none;
+            padding-left: 0;
+            li {
+                margin: 6px 0;
+            }
+        }
+    }
+    .copyright {
+        font-size: 12px;
+        text-align: center;
+    }
+    a:link, a:visited {
+        color: $gray-500;
+        transition: color 0.2s;
+    }
+    a:hover {
+        color: $gray-200;
+    }
+}
+
 // Responsive styles
 aside nav,
 .book-page,

docs/config.toml

@@ -1,6 +1,7 @@
 baseURL = "http://example.org/"
 languageCode = "en-us"
-title = "Vendure Documenation"
+title = "Vendure"
+googleAnalytics = "UA-133911942-1"
 pygmentsCodeFences = true
 pygmentsUseClasses = true
 disableKinds = [

docs/content/blog/_index.md

@@ -0,0 +1,8 @@
+---
+title: "Vendure Blog"
+date: 2019-02-06T11:27:46+01:00
+---
+
+# Vendure Blog
+
+hello people

docs/content/blog/introducing-vendure.md

@@ -0,0 +1,21 @@
+---
+title: "Introducing Vendure"
+date: 2019-02-06T10:27:46+01:00
+draft: false
+---
+
+See how easy it is to create a little tree right in your world. We wash our brush with odorless thinner. And I will hypnotize that just a little bit. Just think about these things in your mind - then bring them into your world. All you have to learn here is how to have fun. Just go out and talk to a tree. Make friends with it.
+
+Everyone needs a friend. Friends are the most valuable things in the world. This is unplanned it really just happens. There is no right or wrong - as long as it makes you happy and doesn't hurt anyone. I spend a lot of time walking around in the woods and talking to trees, and squirrels, and little rabbits and stuff.
+
+Let's do that again. A fan brush is a fantastic piece of equipment. Use it. Make friends with it. It's cold, but it's beautiful. Maybe there's a happy little bush that lives right there. Anything you want to do you can do here.
+
+Isn't that fantastic that you can create an almighty tree that fast? It's life. It's interesting. It's fun. Just let these leaves jump off the brush Nice little fluffy clouds laying around in the sky being lazy.
+
+And I know you're saying, 'Oh Bob, you've done it this time.' And you may be right. The very fact that you're aware of suffering is enough reason to be overjoyed that you're alive and can experience it. You don't want to kill all your dark areas they are very important. The little tiny Tim easels will let you down. Just take out whatever you don't want. It'll change your entire perspective. They say everything looks better with odd numbers of things. But sometimes I put even numbers—just to upset the critics.
+
+You're meant to have fun in life. You got your heavy coat out yet? It's getting colder. You could sit here for weeks with your one hair brush trying to do that - or you could do it with one stroke with an almighty brush. The light is your friend. Preserve it. As trees get older they lose their chlorophyll.
+
+We'll play with clouds today. But they're very easily killed. Clouds are delicate. Don't be afraid to make these big decisions. Once you start, they sort of just make themselves.
+
+

docs/layouts/404.html

@@ -4,7 +4,6 @@
 
 <head>
   {{ partial "docs/html-head" . }}
-  {{ partial "docs/inject/head" . }}
 </head>
 
 <body>
@@ -12,7 +11,6 @@
       <h1>404 Not Found</h1>
   </main>
 
-  {{ partial "docs/inject/body" . }}
   {{ template "_internal/google_analytics_async.html" . }}
 </body>
 

docs/layouts/blog/baseof.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+{{- partial "docs/shared" -}}
+<html>
+
+<head>
+    {{ partial "docs/html-head" . }}
+</head>
+
+<body>
+<main class="container">
+        {{ template "main" . }}
+</main>
+
+{{ partial "top-bar" }}
+{{ partial "footer" }}
+{{ template "_internal/google_analytics_async.html" . }}
+</body>
+
+</html>

docs/layouts/blog/list.html

@@ -0,0 +1,22 @@
+{{ define "main" }}
+<div class="posts-list">
+    {{ $paginator := .Paginate (where .Pages "Params.hidden" "ne" true) }}
+    {{ range sort .Paginator.Pages }}
+    <article class="book-posts mx-auto">
+        <h2>
+            <a href="{{ .Permalink }}">{{ .Title }}</a>
+        </h2>
+        <h5>
+            <strong>{{ .Date.Format "January 2, 2006" }}</strong>
+        </h5>
+        <p>
+            {{- .Summary -}}
+            {{ if .Truncated }}
+            <a href="{{ .Permalink }}">...</a>
+            {{ end }}
+        </p>
+    </article>
+    {{ end }}
+    {{ template "_internal/pagination.html" . }}
+</div>
+{{ end }}

docs/layouts/blog/single.html

@@ -0,0 +1,14 @@
+{{ define "main" }}
+
+<div class="blog-post">
+    <header>
+        <h1>{{ .Title }}</h1>
+        <h5>
+            <strong>{{ .Date.Format "January 2, 2006" }}</strong>
+        </h5>
+    </header>
+    <article class="markdown">
+        {{- .Content -}}
+    </article>
+</div>
+{{ end }}

docs/layouts/docs/baseof.html

@@ -4,7 +4,6 @@
 
 <head>
   {{ partial "docs/html-head" . }}
-  {{ partial "docs/inject/head" . }}
 </head>
 
 <body>
@@ -13,15 +12,11 @@
 
     <aside class="book-menu fixed">
       <nav role="navigation">
-        {{ partial "docs/inject/menu-before" . }}
-
         {{ if .Site.Params.BookMenuBundle }}
           {{ partial "docs/menu-bundle" . }}
         {{ else }}
           {{ partial "docs/menu-filetree" . }}
         {{ end }}
-
-        {{ partial "docs/inject/menu-after" . }}
       </nav>
     </aside>
 
@@ -36,7 +31,7 @@
     {{ template "toc" . }}
   </main>
 
-  {{ partial "docs/inject/body" . }}
+  {{ partial "top-bar" (dict "isDocsPage" true) }}
   {{ template "_internal/google_analytics_async.html" . }}
 </body>
 

docs/layouts/index.en.html

@@ -2,9 +2,7 @@
 <html lang="en">
 <head>
     {{ partial "docs/html-head" . }}
-    {{ partial "docs/inject/head" . }}
     <link rel="stylesheet" href="{{ "intro.css" | absURL }}">
-    <link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Open+Sans" rel="stylesheet">
 </head>
 <body class="landing-page">
 {{ partial "top-bar" (dict "isLandingPage" true) }}
@@ -82,7 +80,7 @@
 <div class="section-3">
     <div class="content">
         <h2>Get Started</h2>
-        <div class="flex">
+        <div class="getting-started">
             <div class="install-code">
                 <div class="highlight">
             <pre class="chroma"><code class="language-bash" data-lang="bash">$ npm install @vendure/core
@@ -107,21 +105,7 @@ $ yarn add @vendure/core</code>
         </div>
     </div>
 </div>
-<div class="footer">
-    <div class="container">
-        <div class="links">
-            <ul>
-                <li><a href="./docs/">Documentation</a></li>
-                <li><a href="https://github.com/vendure-ecommerce/vendure">GitHub</a></li>
-                <li><a href="https://www.npmjs.com/~vendure">npm</a></li>
-                <li><a href="https://twitter.com/vendure_io">Twitter</a></li>
-            </ul>
-        </div>
-        <div class="copyright">
-            &copy; {{ now.Format "2006" }} <a href="https://www.michaelbromley.co.uk/">Michael Bromley</a>
-        </div>
-    </div>
-</div>
+{{ partial "footer" }}
 <script src="{{ "intro.js" | absURL }}"></script>
 </body>
 </html>

docs/layouts/partials/docs/html-head.html

@@ -2,7 +2,7 @@
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>{{- template "title" . }} | {{ .Site.Title -}}</title>
 
-<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Open+Sans" rel="stylesheet">
+<link href="https://fonts.googleapis.com/css?family=Didact+Gothic|Source+Code+Pro|Open+Sans" rel="stylesheet">
 <link rel="stylesheet" href="{{ "normalize.min.css" | absURL }}">
 <link rel="stylesheet" href="{{ "main.css" | absURL }}">
 <script src="{{ "main.js" | absURL }}"></script>

docs/layouts/partials/docs/inject/body.html

@@ -1,5 +0,0 @@
-{{ partial "top-bar" (dict "isLandingPage" false) }}
-
-<footer>
-
-</footer>

docs/layouts/partials/footer.html

@@ -0,0 +1,16 @@
+<div class="footer">
+    <div class="container">
+        <div class="links">
+            <ul>
+                <li><a href="./docs/">Documentation</a></li>
+                <li><a href="./blog/">Blog</a></li>
+                <li><a href="https://github.com/vendure-ecommerce/vendure">GitHub</a></li>
+                <li><a href="https://www.npmjs.com/~vendure">npm</a></li>
+                <li><a href="https://twitter.com/vendure_io">Twitter</a></li>
+            </ul>
+        </div>
+        <div class="copyright">
+            &copy; {{ now.Format "2006" }} <a href="https://www.michaelbromley.co.uk/">Michael Bromley</a>
+        </div>
+    </div>
+</div>

docs/layouts/partials/top-bar.html

@@ -8,7 +8,7 @@
             <div class="alpha-label">alpha</div>
         </div>
         <div class="flex-spacer"></div>
-        {{ if not .isLandingPage }}
+        {{ if .isDocsPage }}
         <div class="search-input">
             <button class="search-icon">
                 <img src="{{ "svg/clr-icon-search-light.svg" | absURL }}">
@@ -18,6 +18,7 @@
         {{ end }}
         <div class="right">
             <a href="/docs">Docs</a>
+            <a href="/blog">Blog</a>
             <a href="https://github.com/vendure-ecommerce/vendure">GitHub</a>
         </div>
     </div>

docs/layouts/posts/baseof.html

@@ -1,19 +0,0 @@
-<!DOCTYPE html>
-{{- partial "docs/shared" -}}
-<html>
-
-<head>
-  {{ partial "docs/html-head" . }}
-  {{ partial "docs/inject/head" . }}
-</head>
-
-<body>
-  <main class="book-posts mx-auto">
-    {{ template "main" . }}
-  </main>
-
-  {{ partial "docs/inject/body" . }}
-  {{ template "_internal/google_analytics_async.html" . }}
-</body>
-
-</html>

docs/layouts/posts/list.html

@@ -1,20 +0,0 @@
-{{ define "main" }}
-  {{ $paginator := .Paginate (where .Pages "Params.hidden" "ne" true) }}
-  {{ range sort .Paginator.Pages }}
-  <article>
-    <h2>
-      <a href="{{ .Permalink }}">{{ .Title }}</a>
-    </h2>
-    <h5>
-      <strong>{{ .Date.Format "January 2, 2006" }}</strong>
-    </h5>
-    <p>
-      {{- .Summary -}}
-      {{ if .Truncated }}
-        <a href="{{ .Permalink }}">...</a>
-      {{ end }}
-    </p>
-  </article>
-  {{ end }}
-  {{ template "_internal/pagination.html" . }}
-{{ end }}

docs/layouts/posts/single.html

@@ -1,11 +0,0 @@
-{{ define "main" }}
-<header>
-  <h1>{{ .Title }}</h1>
-  <h5>
-    <strong>{{ .Date.Format "January 2, 2006" }}</strong>
-  </h5>
-</header>
-<article class="markdown">
-  {{- .Content -}}
-</article>
-{{ end }}