Add blog layout

3 files changed, 69 insertions, 6 deletions

diff --git a/doc-tool/resources/_includes/toc.html b/doc-tool/resources/_includes/toc.html
index 56f2e56a4..88113d2f0 100644
--- a/doc-tool/resources/_includes/toc.html
+++ b/doc-tool/resources/_includes/toc.html
@@ -1,5 +1,47 @@
+{% assign parent = page.path | first %}
 <ul class="toc">
-    <li><a href="{{ site.baseUrl }}/usage/">Usage</a></li>
-    <li><a href="{{ site.baseUrl }}/contributing/">Contributing</a></li>
-    <li><a href="{{ site.baseUrl }}/internals/">Internals</a></li>
+    <li>
+        <a href="{{ site.baseurl }}/blog/index.html">Blog</a>
+    </li>
+    <li>
+        <a class="toggle-children" onclick="tocToggleChild('usage')">Usage</a>
+        <ul id="usage" class="{% if parent == "usage" %} show {% else %} hide {% endif %}">
+            <li><a href="{{ site.baseurl }}/docs/usage/cbt-projects.html">cbt-projects</a></li>
+            <li><a href="{{ site.baseurl }}/docs/usage/sbt-projects.html">sbt-projects</a></li>
+            <li><a href="{{ site.baseurl }}/docs/usage/migrating.html">migrating</a></li>
+        </ul>
+    </li>
+    <li>
+        <a class="toggle-children" onclick="tocToggleChild('contributing')">Contributing</a>
+        <ul id="contributing" class="{% if parent == "contributing" %} show {% else %} hide {% endif %}">
+            <li><a href="{{ site.baseurl }}/docs/contributing/eclipse.html">Eclipse</a></li>
+            <li><a href="{{ site.baseurl }}/docs/contributing/getting-started.html">Getting Started</a></li>
+            <li><a href="{{ site.baseurl }}/docs/contributing/intellij-idea.html">IntelliJ IDEA</a></li>
+            <li><a href="{{ site.baseurl }}/docs/contributing/workflow.html">Workflow</a></li>
+        </ul>
+    </li>
+    <li>
+        <a class="toggle-children" onclick="tocToggleChild('internals')">Internals</a>
+        <ul id="internals" class="{% if parent == "internals" %} show {% else %} hide {% endif %}">
+            <li><a href="{{ site.baseurl }}/docs/internals/backend.html">Backend</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/benchmarks.html">Benchmarks</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/classpaths.html">Classpaths</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/core-data-structures.html">Core Data Structures</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/contexts.html">Contexts</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/dotc-scalac.html">Dotc vs Scalac</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/higher-kinded-v2.html">Higher-Kinded Types</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/overall-structure.html">Overall Structure</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/periods.html">Periods</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/syntax.html">Syntax</a></li>
+            <li><a href="{{ site.baseurl }}/docs/internals/type-system.html">Type System</a></li>
+        </ul>
+    </li>
 </ul>
+
+<script>
+function tocToggleChild(c) {
+    var child = document.getElementById(c);
+    child.classList.toggle("show");
+    child.classList.toggle("hide");
+}
+</script>
diff --git a/doc-tool/resources/_layouts/blog.html b/doc-tool/resources/_layouts/blog.html
new file mode 100644
index 000000000..2125440e9
--- /dev/null
+++ b/doc-tool/resources/_layouts/blog.html
@@ -0,0 +1,4 @@
+---
+layout: doc-page
+---
+{{ content }}
diff --git a/doc-tool/resources/css/dottydoc.css b/doc-tool/resources/css/dottydoc.css
index c3d122892..2dd9bf618 100644
--- a/doc-tool/resources/css/dottydoc.css
+++ b/doc-tool/resources/css/dottydoc.css
@@ -33,10 +33,16 @@ div#content-body {
     min-height: 100vh;
 }
 
-a#menu-toggle:focus,
-a#menu-toggle {
+div#menu-toggle {
     color: #837F84;
     outline: none;
+    padding-left: 20px;
+    padding-top: 10px;
+}
+
+div#menu-toggle:hover {
+    color: rgba(0, 0, 0, 0.4);
+    cursor: pointer;
 }
 
 ul.index-entities {
@@ -67,6 +73,17 @@ li.index-entity > a {
     padding: 0 24px;
     color: rgba(0,0,0,.87);
     background: transparent;
+    cursor: pointer;
+}
+
+ul.toc > li > ul.show {
+    display: block;
+    list-style-type: none;
+    font-size: 13px;
+}
+
+ul.toc > li > ul.hide {
+    display: none;
 }
 
 li.index-entity > a.title {
@@ -78,7 +95,7 @@ li.index-entity > a:focus {
     text-decoration: none;
 }
 
-li.index-entity > a:hover {
+ul.toc > li > a:hover {
     text-decoration: none;
     background-color: rgba(0, 0, 0, 0.2);
 }