Add links to languages and collapsible navigation

config.toml

@@ -25,11 +25,6 @@ enableGitInfo = true
     weight = 2
     identifier = "administration"
     url = "/administration/"
-  [[menu.docs]]
-    name = "Developer guide"
-    weight = 3
-    identifier = "development"
-    url = "/development/"
   [[menu.docs]]
     name = "API Overview"
     weight = 4

content/en/_index.md

@@ -0,0 +1,15 @@
+---
+title: Mastodon documentation
+---
+
+Welcome to the Mastodon documentation!
+
+<div style="margin-bottom: 26px">
+  {{< youtube "IPSbNdBmWKE" >}}
+</div>
+
+**Choose your path:**
+
+- [Learn how to use Mastodon]({{< relref "usage/basics.md" >}})
+- [Learn how to install Mastodon]({{< relref "administration/installation.md" >}})
+- [Learn how to write an app for Mastodon]({{< relref "api/guidelines.md" >}})

content/en/development/installation.md

@@ -1,8 +0,0 @@
----
-title: Installation
-menu:
-  docs:
-    identifier: installation-dev
-    parent: development
-    weight: 1
----

layouts/index.html

@@ -1,13 +1,17 @@
 {{ define "title"}} Mastodon documentation {{end}}
 
 {{ define "main" }}
-  <h1>Mastodon documentation</h1>
+  <h1>{{ .Title }}</h1>
 
   <div class="e-content">
-    <p>Welcome to the Mastodon documentation!</p>
+    {{.Content}}
 
-    <p>Mastodon is a <strong>free, open-source social network server</strong> based on <strong>open web protocols</strong> like ActivityPub and OStatus. The social focus of the project is a viable decentralized alternative to commercial social media silos that returns the control of the content distribution channels to the people. The technical focus of the project is a good user interface, a clean REST API for 3rd party apps and robust anti-abuse tools.</p>
+    <p><i class="fas fa-language"></i> <strong>Available languages:</strong></p>
 
-    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/IPSbNdBmWKE" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+    <ul>
+      {{ range $.Site.Home.AllTranslations }}
+        <li><a href="{{ .Permalink }}">{{ .Language.LanguageName }}</a></li>
+      {{ end }}
+    </ul>
   </div>
 {{ end }}

layouts/partials/footer.html

@@ -12,3 +12,5 @@
 
   <p class="legal"><a href='https://source.joinmastodon.org/mastodon/docs/tree/master/content/{{.Lang}}/{{.File.Path}}'>View source</a> · <a href='https://creativecommons.org/licenses/by-sa/4.0/'>CC BY-SA 4.0</a> · <a href='https://joinmastodon.org/imprint'>Imprint</a></p>
 </footer>
+
+<script async src="/site.js"></script>

layouts/partials/sidebar.html

@@ -8,15 +8,15 @@
 
 <ul>
   {{ $currentPage := . }}
-  {{ range .Site.Menus.docs }}
+  {{ range .Site.Menus.docs.ByWeight }}
     {{ if .HasChildren }}
       <li>
-        <a href="#" class="{{ if $currentPage.HasMenuCurrent "docs" . }}active{{ end }}">
+        <a href="javascript:void(0)" class="menu-item{{ if $currentPage.HasMenuCurrent "docs" . }} active{{ end }}">
           {{ .Pre }}
           <span>{{ .Name }}</span>
         </a>
 
-        <ul class="sub-menu">
+        <ul class="sub-menu{{ if $currentPage.HasMenuCurrent "docs" . }}{{else}} collapsed{{ end }}">
           {{ range .Children }}
             <li>
               <a href="{{ .URL }}" class="{{ if $currentPage.IsMenuCurrent "docs" . }}active{{ end }}">{{ .Name }}</a>

static/site.js

@@ -0,0 +1,19 @@
+(function () {
+  document.addEventListener('DOMContentLoaded', function () {
+    var menuLinks = document.getElementsByClassName('menu-item');
+
+    for (var i = 0; i < menuLinks.length; i++) {
+      menuLinks[i].addEventListener('click', toggleSubMenu, false);
+    }
+
+    function toggleSubMenu () {
+      var subMenus = document.getElementsByClassName('sub-menu');
+
+      for (var i = 0; i < subMenus.length; i++) {
+        subMenus[i].classList.add('collapsed');
+      }
+
+      this.parentNode.querySelector('.sub-menu').classList.remove('collapsed');
+    }
+  });
+})();

static/style.css

@@ -106,6 +106,8 @@ body {
   padding-bottom: 26px; }
   .sidebar .sub-menu a.active {
     color: #2b90d9; }
+  .sidebar .sub-menu.collapsed {
+    display: none; }
 
 .footer {
   padding-bottom: 30px; }
@@ -289,7 +291,8 @@ main code {
 main pre code {
   background: transparent;
   padding: 0; }
-main .mastodon-embed {
+main .mastodon-embed,
+main iframe {
   width: 100%;
   display: block;
   margin: 0 auto;

static/style.scss

@@ -151,6 +151,10 @@ body {
     a.active {
       color: $vibrant;
     }
+
+    &.collapsed {
+      display: none;
+    }
   }
 }
 
@@ -407,7 +411,8 @@ main {
     padding: 0;
   }
 
-  .mastodon-embed {
+  .mastodon-embed,
+  iframe {
     width: 100%;
     display: block;
     margin: 0 auto;