Add basic single-page and list page templates for documentation

Signed-off-by: Luc Perkins <lucperkins@gmail.com>

.editorconfig

@@ -7,6 +7,6 @@ insert_final_newline = true
 [Makefile]
 indent_style = tab
 
-[*.{html,js,json,md,sass,yaml}]
+[*.{css,html,js,json,md,sass,yaml}]
 indent_style = space
 indent_size = 2

Makefile

@@ -11,4 +11,5 @@ serve:
 	hugo server \
 	--buildDrafts \
 	--buildFuture \
+	--ignoreCache \
 	--disableFastRender

assets/js/app.js

@@ -9,6 +9,24 @@ function navbarBurgerToggle() {
   });
 }
 
+function fixUponScroll() {
+  const topMargin = 120,
+        threshold = $('.is-docs-article').offset().top - topMargin,
+        toc       = $('.toc');
+
+  console.log(threshold);
+
+  $(window).scroll(function() {
+    if ($(document).scrollTop() > threshold) {
+      toc.css('top', `${topMargin}px`);
+      toc.addClass('is-fixed');
+    } else {
+      toc.removeClass('is-fixed');
+    }
+  });
+}
+
 $(function() {
   navbarBurgerToggle();
+  fixUponScroll();
 });

assets/sass/style.sass

@@ -1,7 +1,6 @@
 @charset "utf-8"
 
 @import url(https://use.fontawesome.com/releases/v5.4.1/css/all.css)
-
 // Vitess colors
 $vitess-orange: #f16626
 
@@ -28,6 +27,10 @@ $colors: mergeColorMaps(("stack-overflow-orange": ($stack-overflow-orange, $whit
 
 @import "bulma/bulma"
 
+.toc
+  &.is-fixed
+    position: fixed
+
 .page
   display: flex
   flex-direction: column
@@ -39,6 +42,14 @@ $colors: mergeColorMaps(("stack-overflow-orange": ($stack-overflow-orange, $whit
 .is-video
   max-width: 100%
 
+.is-docs-article
+  margin: 2rem 0
+
+  .content
+    +touch
+      margin-left: 2rem
+      margin-right: 2rem
+
 .column
   &.is-thin
     margin: 0 2%
@@ -55,18 +66,6 @@ $colors: mergeColorMaps(("stack-overflow-orange": ($stack-overflow-orange, $whit
     max-height: 3rem
     max-width: 6rem
 
-.sidebar
-  position: fixed
-
-  .sidebar-links
-    padding: 1rem
-
-    .sidebar-link
-      display: block
-
-      & + .sidebar-link
-        margin-top: .25rem
-
 =logo($touch, $tablet)
   +touch
     width: $touch

config.toml

@@ -1,5 +1,6 @@
 baseURL = "https://vitess.io"
 title   = "Vitess"
+disableKinds = ["taxonomy", "taxonomyTerms"]
 
 [params.home]
 title = "Vitess is a database clustering system for horizontal scaling of MySQL"

content/docs/_index.md

@@ -1,5 +1,6 @@
 ---
-title: Overview
+title: The Vitess documentation
+description: Everything you need to know about the world's most scalable open-source MySQL platform
 ---
 
 Vitess is a database solution for deploying, scaling and managing large clusters of MySQL instances. It's architected to run as effectively in a public or private cloud architecture as it does on dedicated hardware. It combines and extends many important MySQL features with the scalability of a NoSQL database. Vitess can help you with the following problems:

content/docs/getting-started/_index.md

@@ -0,0 +1,4 @@
+---
+title: Getting started
+weight: 2
+---

content/docs/getting-started/kubernetes.md

@@ -0,0 +1,4 @@
+---
+title: Running Vitess on Kubernetes
+weight: 1
+---

content/docs/getting-started/local.md

@@ -0,0 +1,4 @@
+---
+title: Running Vitess in a local environment
+weight: 2
+---

content/docs/overview/_index.md

@@ -0,0 +1,4 @@
+---
+title: Understanding Vitess
+weight: 1
+---

content/docs/overview/concepts.md

@@ -0,0 +1,4 @@
+---
+title: Key concepts
+weight: 2
+---

content/docs/overview/scaling-mysql.md

@@ -0,0 +1,4 @@
+---
+title: Scaling MySQL with Vitess
+weight: 1
+---

layouts/docs/list.html

@@ -1,3 +1,5 @@
 {{ define "main" }}
-
+{{ partial "docs/hero.html" . }}
+{{ partial "docs/tabs-list.html" . }}
+{{ partial "docs/article.html" . }}
 {{ end }}

layouts/docs/single.html

@@ -0,0 +1,4 @@
+{{ define "main" }}
+{{ partial "docs/hero.html" . }}
+{{ partial "docs/tabs-single.html" . }}
+{{ end }}

layouts/partials/docs/article.html

@@ -0,0 +1,17 @@
+<div class="container">
+  <article class="is-docs-article">
+    <div class="columns">
+      <div class="column">
+        <div class="content">
+          {{ .Content }}
+        </div>
+      </div>
+
+      <div class="column is-2 is-hidden-touch">
+        <p class="is-size-3">
+          {{ partial "docs/toc.html" . }}
+        </p>
+      </div>
+    </div>
+  </article>
+</div>

layouts/partials/docs/hero.html

@@ -0,0 +1,35 @@
+
+{{- $currentSection := .CurrentSection.Name }}
+{{- $docsSections   := where .Site.Sections "Section" "docs" }}
+<section class="hero is-dark">
+  <div class="container">
+    <div class="hero-body">
+      <p class="title is-size-1{{ if isset .Params "description" }} is-spaced{{ end }}">
+        {{ .Title }}
+      </p>
+
+      {{- with .Params.description }}
+      <p class="subtitle is-size-2">
+        {{ . | markdownify }}
+      </p>
+      {{- end }}
+    </div>
+
+    <div class="hero-foot is-hidden-touch">
+      <nav class="tabs is-boxed">
+        <ul>
+          {{- range $docsSections }}
+          {{- range .Sections }}
+          {{- $isCurrentSection := eq .Name $currentSection }}
+          <li{{ if $isCurrentSection }} class="is-active"{{ end }}>
+            <a href="{{ .URL }}">
+              {{ .Name }}
+            </a>
+          </li>
+          {{- end }}
+          {{- end }}
+        </ul>
+      </nav>
+    </div>
+  </div>
+</section>

layouts/partials/docs/tabs-list.html

@@ -0,0 +1,17 @@
+{{- $docs          := where .Site.RegularPages "Section" "docs" }}
+{{- $docsInSection := where $docs "CurrentSection.Name" .CurrentSection.Name }}
+{{- $currentUrl    := .URL }}
+<nav class="tabs is-hidden-touch">
+  <div class="container">
+    <ul>
+      {{- range $docsInSection }}
+      {{- $isCurrentPage := eq .URL $currentUrl }}
+      <li>
+        <a href="{{ .URL }}">
+          {{ .Title }}
+        </a>
+      </li>
+      {{- end }}
+    </ul>
+  </div>
+</nav>

layouts/partials/docs/tabs-single.html

@@ -0,0 +1,15 @@
+{{- $docs          := where .Site.RegularPages "Section" "docs" }}
+{{- $docsInSection := where $docs "CurrentSection.Name" .Parent.Name }}
+<nav class="tabs is-hidden-touch">
+  <div class="container">
+    <ul>
+      {{- range $docsInSection }}
+      <li>
+        <a href="{{ .URL }}">
+          {{ .Title }}
+        </a>
+      </li>
+      {{- end }}
+    </ul>
+  </div>
+</nav>

layouts/partials/docs/toc.html

@@ -0,0 +1,6 @@
+{{- $toc := .TableOfContents }}
+{{- if $toc }}
+<div class="toc">
+  {{ .TableOfContents }}  
+</div>  
+{{- end }}

resources/_gen/assets/js/js/app.js_d11fe7b62c27961c87ecd0f2490357b9.content

@@ -1,2 +1,3 @@
 function navbarBurgerToggle(){const burger=$('.navbar-burger'),menu=$('.navbar-menu');burger.click(function(){[burger,menu].forEach(function(el){el.toggleClass('is-active');});});}
-$(function(){navbarBurgerToggle();});
+function fixUponScroll(){const topMargin=120,threshold=$('.is-docs-article').offset().top-topMargin,toc=$('.toc');console.log(threshold);$(window).scroll(function(){if($(document).scrollTop()>threshold){toc.css('top',`${topMargin}px`);toc.addClass('is-fixed');}else{toc.removeClass('is-fixed');}});}
+$(function(){navbarBurgerToggle();fixUponScroll();});

resources/_gen/assets/js/js/app.js_d11fe7b62c27961c87ecd0f2490357b9.json

@@ -1 +1 @@
-{"Target":"js/app.min.c14a1516aafc968556cf0874a4505828dc99da4bf2ed377f696080d24c89c035.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-wUoVFqr8loVWzwh0pFBYKNyZ2kvy7Td/aWCA0kyJwDU="}}
+{"Target":"js/app.min.7a239d76830f0b36b74d5d65cbf88f3bce3a3a67eee766ddc25c618130f03550.js","MediaType":"application/javascript","Data":{"Integrity":"sha256-eiOddoMPCza3TV1ly/iPO846Omfu52bdwlxhgTDwNVA="}}

resources/_gen/assets/sass/sass/style.sass_4b36ec419b6cfe7482fa4e359c787ce2.json

@@ -1 +1 @@
-{"Target":"css/style.8de8e82e0622207f411aae2f98e9fa4d217d17d2a461e15f565c24b6131c5134.css","MediaType":"text/css","Data":{"Integrity":"sha256-jejoLgYiIH9BGq4vmOn6TSF9F9KkYeFfVlwkthMcUTQ="}}
+{"Target":"css/style.b08329e88a428fc3d2c2c8dd9a220855e82dd115eb007410109e6e41ff3960f3.css","MediaType":"text/css","Data":{"Integrity":"sha256-sIMp6IpCj8PSwsjdmiIIVegt0RXrAHQQEJ5uQf85YPM="}}