add docs menu sections (#1366)

website/site/config.yaml

@@ -3,4 +3,18 @@ languageCode: "en-us"
 title: "Netlify CMS | Open-Source Content Management System"
 disable404: true
 pluralizeListTitles: false
-metaDataFormat: "yaml"
+metaDataFormat: "yaml"
+menu:
+  docs:
+    - name: start
+      title: Quick Start
+      weight: 100
+    - name: guides
+      title: Guides
+      weight: 200
+    - name: reference
+      title: Reference
+      weight: 300
+    - name: contributing
+      title: Contributing
+      weight: 400

website/site/content/docs/add-to-your-site.md

@@ -1,7 +1,11 @@
 ---
 title: Add to Your Site
-position: 20
+weight: 20
+menu:
+  docs:
+    parent: start
 ---
+
 # Add Netlify CMS to Your Site
 
 Netlify CMS is adaptable to a wide variety of projects. The only inflexible requirement is that your site content must be written in markdown, JSON, YAML, or TOML files, stored in a repo on [GitHub](https://github.com/). (If you're partial to another Git hosting service, check out the PRs in progress for [GitLab](https://github.com/netlify/netlify-cms/pull/517) and [Bitbucket](https://github.com/netlify/netlify-cms/pull/525) support.)

website/site/content/docs/authentication-backends.md

@@ -1,6 +1,9 @@
 ---
 title: Authentication & Backends
-position: 25
+weight: 25
+menu:
+  docs:
+    parent: start
 ---
 # Authentication & Backends
 

website/site/content/docs/beta-features.md

@@ -1,6 +1,9 @@
 ---
 title: Beta Features!
-position: 200
+weight: 200
+menu:
+  docs:
+    parent: reference
 ---
 # Beta Features!
 We run new functionality in an open beta format from time to time. That means that this functionality is totally available for use, and we _think_ it might be ready for primetime, but it could break or change without notice.

website/site/content/docs/collection-types.md

@@ -1,6 +1,9 @@
 ---
 title: Collection Types
-position: 27
+weight: 27
+menu:
+  docs:
+    parent: start
 ---
 # Collection Types
 

website/site/content/docs/configuration-options.md

@@ -1,6 +1,9 @@
 ---
 title: Configuration Options
-position: 23
+weight: 23
+menu:
+  docs:
+    parent: reference
 ---
 
 # Configuration Options

website/site/content/docs/contributor-guide.md

@@ -1,6 +1,9 @@
 ---
-title: Contributing
+title: Contributor Guide
-position: 100
+weight: 100
+menu:
+  docs:
+    parent: contributing
 ---
 
 # Welcome, contributors!

website/site/content/docs/custom-widgets.md

@@ -1,6 +1,9 @@
 ---
-title: Custom Widgets
+title: Creating Custom Widgets
-position: 35
+weight: 35
+menu:
+  docs:
+    parent: guides
 ---
 # Custom Widgets
 

website/site/content/docs/examples.md

@@ -1,6 +1,9 @@
 ---
 title: Examples
-position: 110
+weight: 110
+menu:
+  docs:
+    parent: start
 ---
 
 # Examples

website/site/content/docs/intro.md

@@ -1,6 +1,9 @@
 ---
 title: Introduction
-position: 0
+weight: 1
+menu:
+  docs:
+    parent: start
 ---
 
 # Introduction

website/site/content/docs/start-with-a-template.md

@@ -1,6 +1,9 @@
 ---
 title: Start with a Template
-position: 10
+weight: 10
+menu:
+  docs:
+    parent: start
 ---
 
 # Start with a Template

website/site/content/docs/update-the-cms-version.md

@@ -1,6 +1,9 @@
 ---
 title: Update the CMS Version
-position: 60
+weight: 60
+menu:
+  docs:
+    parent: start
 ---
 
 # Update the CMS Version

website/site/content/docs/widgets/index.md

@@ -1,6 +1,9 @@
 ---
 title: Widgets
-position: 30
+weight: 30
+menu:
+  docs:
+    parent: reference
 ---
 
 # Widgets

website/site/layouts/_default/list.html

@@ -1,35 +0,0 @@
-{{ partial "header" . }}
-
-<div class="docs page">
-	<div class="container">
-		<aside id="sidebar" class="sidebar">
-			<nav class="docs-nav" id="docs-nav">
-				{{ range sort .Data.Pages "Params.position" }}
-					<a href="{{ .Permalink }}" class="nav-link {{ if eq .Params.position 0 }}active{{ end }}">{{ .Title }}</a>
-				{{ end }}
-			</nav>
-			<div class="mobile docs-nav">
-				<select class="btn-primary" id="mobile-docs-nav">
-					<option value="" selected="selected">Select A Topic</option>
-					{{ range (where .Data.Pages "Title" "!=" "") sort .Data.Pages "Params.position" }}
-						<option value="{{ .Permalink }}" class="nav-link {{ if eq .Params.position 0 }}active{{ end }}">{{ .Title }}</option>
-					{{ end }}
-				</select>
-			</div>
-		</aside>
-		<article class="docs-content" id="docs-content">
-			{{ range sort .Data.Pages "Params.position" }}
-				{{ if eq .Params.position 0 }}
-					<div>
-            <p>
-							{{ partial "edit-link" . }}
-            </p>
-            {{ .Content }}
-          </div>
-				{{ end }}
-			{{ end }}
-		</article>
-	</div>
-</div>
-
-{{ partial "footer" . }}

website/site/layouts/_default/single.html

@@ -1,37 +1,46 @@
 {{ partial "header" . }}
 {{ $activePage := .Params.position }}
 
-<div class="docs detail page">
+<div class="docs page">
-	<div class="container">
+  <div class="container">
-		<aside id="sidebar" class="sidebar">
+    <aside id="sidebar" class="sidebar">
-			<nav class="docs-nav" id="docs-nav">
+      <nav id="docs-nav" class="docs-nav" id="docs-nav">
-				{{ $subjects := where .Site.Pages "Section" "docs" }}
+        {{ $currentPage := . }}
-				{{ range sort $subjects "Params.position" }}
+        {{ range $index, $element := .Site.Menus.docs }}
-					{{- if ne .Type "widget" -}}
+          {{ if .HasChildren }}
-					<a href="{{ .Permalink }}" class="nav-link {{ if eq .Params.position $activePage }}active{{ end }}">{{ .Title }}</a>
+            <div class="docs-nav-section">
-					{{- end -}}
+              <div class="docs-nav-section-title">{{ .Title }}</div>
-				{{ end }}
+              <ul class="docs-nav-section-list">
-			</nav>
+                {{ range .Children }}
-			<div class="mobile docs-nav">
+                  <a href="{{ .URL }}" class="nav-link {{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Title }}</a>
-				<select class="btn-primary" id="mobile-docs-nav">
+                {{ end }}
-					<option value="" selected="selected">Select A Topic</option>
+              </ul>
-					{{ $subjects := where .Site.Pages "Section" "docs" }}
+            </div>
-					{{ range sort $subjects "Params.position" }}
+          {{ end }}
-						{{- if ne .Type "widget" -}}
+        {{ end }}
-						<option value="{{ .Permalink }}" class="nav-link {{ if eq .Params.position $activePage }}active{{ end }}">{{ .Title }}</option>
+      </nav>
-						{{- end -}}
+      <div class="mobile docs-nav">
-					{{ end }}
+        <select class="btn-primary" id="mobile-docs-nav">
-				</select>
+          <option value="" selected="selected">Select A Topic</option>
-			</div>
+          {{ range $index, $element := .Site.Menus.docs }}
-		</aside>
+            {{ if .HasChildren }}
-		<article class="docs-content" id="docs-content">
+              <optgroup label="{{ .Title }}"/>
-			{{ partial "edit-link" . }}
+              {{ range .Children }}
-			{{ .Content }}
+                <option value="{{ .URL }}" class="nav-link {{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Title }}</option>
-			{{- if eq .Title "Widgets" -}} <!-- Check if is widgets page, if so, add the partial "widgets" for the widget cloud functionality -->
+              {{ end }}
-				{{- partial "widgets" . -}} 
+            {{ end }}
-			{{- end -}}
+          {{ end }}
-		</article>
+        </select>
-	</div>
+      </div>
+    </aside>
+    <article class="docs-content" id="docs-content">
+      {{ partial "edit-link" . }}
+      {{ .Content }}
+      {{- if eq .Title "Widgets" -}} <!-- Check if is widgets page, if so, add the partial "widgets" for the widget cloud functionality -->
+        {{- partial "widgets" . -}} 
+      {{- end -}}
+    </article>
+  </div>
 </div>
 
 {{ partial "footer" . }}

website/site/layouts/partials/header.html

@@ -37,7 +37,7 @@
           {{ end }}
         </div>
         <div class="nav-container">
-          <a class="nav-link docs-link" href="/docs">Docs</a>
+          <a class="nav-link docs-link" href="/docs/intro/">Docs</a>
           <a class="nav-link contributing-link" href="/docs/contributor-guide">Contributing</a>
           <a class="nav-link" href="/community">Community</a>
           <a id="ghstars" class="github-button" href="https://github.com/netlify/netlify-cms" data-icon="octicon-star" data-show-count="true" aria-label="Star netlify/netlify-cms on GitHub">Star</a>

website/site/static/_redirects

@@ -1,6 +1,7 @@
-/docs/custom-authentication /docs/authentication-backends 301
+/docs                         /docs/intro 301
-/docs/extending /docs/custom-widgets 301
+/docs/custom-authentication   /docs/authentication-backends 301
-/docs/validation /docs/custom-widgets/#advanced-field-validation 301
+/docs/extending               /docs/custom-widgets 301
-/docs/editorial-workflow /docs/configuration/#publish-mode 301
+/docs/validation              /docs/custom-widgets/#advanced-field-validation 301
-/docs/test-drive /docs/start-with-a-template 301
+/docs/editorial-workflow      /docs/configuration/#publish-mode 301
-/docs/quick-start /docs/add-to-your-site 301
+/docs/test-drive              /docs/start-with-a-template 301
+/docs/quick-start             /docs/add-to-your-site 301

website/src/css/imports/docs.css

@@ -27,6 +27,8 @@
 
     @media screen and (min-width: $tablet) {
       display: block;
+      height: 100%;
+      overflow-y: auto;
     }
 
     &.mobile {
@@ -70,8 +72,10 @@
     .subnav-link {
       display: block;
       font-weight: $regular;
+      font-size: $tiny;
       color: $grey;
-      line-height: 32px;
+      line-height: 1.3;
+      margin: 10px 0;
       text-decoration: none;
       text-transform: capitalize;
       transition: color .2s ease;
@@ -87,6 +91,20 @@
     }
   }
 
+  .docs-nav-section {
+    margin-bottom: 30px;
+  }
+
+  .docs-nav-section-list {
+    margin: 0;
+  }
+
+  .docs-nav-section-title {
+    font-size: 20px;
+    font-weight: bold;
+    margin-bottom: 10px;
+  }
+
   .nav-subsections {
     margin: $tiny 0;
     padding: 0 0 0 $tiny;