From e84f272485eb9dd51b7c77787c0c102bbd24eedd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20M=C3=BCller?= <straightshoota@gmail.com>
Date: Fri, 28 Jul 2017 15:49:39 +0200
Subject: [PATCH 1/3] Rename partial templates with leading underscore

---
 .../doc/html/{list_items.html => _list_items.html}     |  0
 .../html/{method_detail.html => _method_detail.html}   |  0
 .../html/{method_summary.html => _method_summary.html} |  0
 ...{methods_inherited.html => _methods_inherited.html} |  0
 .../doc/html/{other_types.html => _other_types.html}   |  0
 src/compiler/crystal/tools/doc/templates.cr            | 10 +++++-----
 6 files changed, 5 insertions(+), 5 deletions(-)
 rename src/compiler/crystal/tools/doc/html/{list_items.html => _list_items.html} (100%)
 rename src/compiler/crystal/tools/doc/html/{method_detail.html => _method_detail.html} (100%)
 rename src/compiler/crystal/tools/doc/html/{method_summary.html => _method_summary.html} (100%)
 rename src/compiler/crystal/tools/doc/html/{methods_inherited.html => _methods_inherited.html} (100%)
 rename src/compiler/crystal/tools/doc/html/{other_types.html => _other_types.html} (100%)

diff --git a/src/compiler/crystal/tools/doc/html/list_items.html b/src/compiler/crystal/tools/doc/html/_list_items.html
similarity index 100%
rename from src/compiler/crystal/tools/doc/html/list_items.html
rename to src/compiler/crystal/tools/doc/html/_list_items.html
diff --git a/src/compiler/crystal/tools/doc/html/method_detail.html b/src/compiler/crystal/tools/doc/html/_method_detail.html
similarity index 100%
rename from src/compiler/crystal/tools/doc/html/method_detail.html
rename to src/compiler/crystal/tools/doc/html/_method_detail.html
diff --git a/src/compiler/crystal/tools/doc/html/method_summary.html b/src/compiler/crystal/tools/doc/html/_method_summary.html
similarity index 100%
rename from src/compiler/crystal/tools/doc/html/method_summary.html
rename to src/compiler/crystal/tools/doc/html/_method_summary.html
diff --git a/src/compiler/crystal/tools/doc/html/methods_inherited.html b/src/compiler/crystal/tools/doc/html/_methods_inherited.html
similarity index 100%
rename from src/compiler/crystal/tools/doc/html/methods_inherited.html
rename to src/compiler/crystal/tools/doc/html/_methods_inherited.html
diff --git a/src/compiler/crystal/tools/doc/html/other_types.html b/src/compiler/crystal/tools/doc/html/_other_types.html
similarity index 100%
rename from src/compiler/crystal/tools/doc/html/other_types.html
rename to src/compiler/crystal/tools/doc/html/_other_types.html
diff --git a/src/compiler/crystal/tools/doc/templates.cr b/src/compiler/crystal/tools/doc/templates.cr
index e4a473eeee32..b000cc60aaf2 100644
--- a/src/compiler/crystal/tools/doc/templates.cr
+++ b/src/compiler/crystal/tools/doc/templates.cr
@@ -6,23 +6,23 @@ module Crystal::Doc
   end
 
   record ListItemsTemplate, types : Array(Type), current_type : Type? do
-    ECR.def_to_s "#{__DIR__}/html/list_items.html"
+    ECR.def_to_s "#{__DIR__}/html/_list_items.html"
   end
 
   record MethodSummaryTemplate, title : String, methods : Array(Method) | Array(Macro) do
-    ECR.def_to_s "#{__DIR__}/html/method_summary.html"
+    ECR.def_to_s "#{__DIR__}/html/_method_summary.html"
   end
 
   record MethodDetailTemplate, title : String, methods : Array(Method) | Array(Macro) do
-    ECR.def_to_s "#{__DIR__}/html/method_detail.html"
+    ECR.def_to_s "#{__DIR__}/html/_method_detail.html"
   end
 
   record MethodsInheritedTemplate, type : Type, ancestor : Type, methods : Array(Method), label : String do
-    ECR.def_to_s "#{__DIR__}/html/methods_inherited.html"
+    ECR.def_to_s "#{__DIR__}/html/_methods_inherited.html"
   end
 
   record OtherTypesTemplate, title : String, type : Type, other_types : Array(Type) do
-    ECR.def_to_s "#{__DIR__}/html/other_types.html"
+    ECR.def_to_s "#{__DIR__}/html/_other_types.html"
   end
 
   record MainTemplate, body : String, types : Array(Type), repository_name : String do

From b3a22a6332c001f074504072dd03872cbbc120e7 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20M=C3=BCller?= <straightshoota@gmail.com>
Date: Mon, 12 Mar 2018 14:55:51 +0000
Subject: [PATCH 2/3] Add _head.html partial to dry up html head

---
 src/compiler/crystal/tools/doc/html/_head.html | 6 ++++++
 src/compiler/crystal/tools/doc/html/main.html  | 4 +---
 src/compiler/crystal/tools/doc/html/type.html  | 4 +---
 src/compiler/crystal/tools/doc/templates.cr    | 4 ++++
 4 files changed, 12 insertions(+), 6 deletions(-)
 create mode 100644 src/compiler/crystal/tools/doc/html/_head.html

diff --git a/src/compiler/crystal/tools/doc/html/_head.html b/src/compiler/crystal/tools/doc/html/_head.html
new file mode 100644
index 000000000000..d95c11ee7ecb
--- /dev/null
+++ b/src/compiler/crystal/tools/doc/html/_head.html
@@ -0,0 +1,6 @@
+<meta charset="utf-8" />
+<meta http-equiv="X-UA-Compatible" content="IE=edge">
+<meta name="generator" content="Crystal Docs <%= Crystal::VERSION %>">
+
+<link href="<%= base_path %>css/style.css" rel="stylesheet" type="text/css" />
+<script type="text/javascript" src="<%= base_path %>js/doc.js"></script>
diff --git a/src/compiler/crystal/tools/doc/html/main.html b/src/compiler/crystal/tools/doc/html/main.html
index 35fd5069b933..f971dde4749f 100644
--- a/src/compiler/crystal/tools/doc/html/main.html
+++ b/src/compiler/crystal/tools/doc/html/main.html
@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+  <%= HeadTemplate.new("") %>
   <meta id="repository-name" content="<%= repository_name %>">
-  <link href="css/style.css" rel="stylesheet" type="text/css" />
-  <script type="text/javascript" src="js/doc.js"></script>
   <title>README - <%= repository_name %></title>
   <script type="text/javascript">
   CrystalDoc.base_path = "";
diff --git a/src/compiler/crystal/tools/doc/html/type.html b/src/compiler/crystal/tools/doc/html/type.html
index c310ee152f92..ccb784a09e5f 100644
--- a/src/compiler/crystal/tools/doc/html/type.html
+++ b/src/compiler/crystal/tools/doc/html/type.html
@@ -1,10 +1,8 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
+  <%= HeadTemplate.new(type.path_to "") %>
   <meta id="repository-name" content="<%= type.repository_name %>">
-  <link href="<%= type.path_to "css/style.css" %>" rel="stylesheet" type="text/css" />
-  <script type="text/javascript" src="<%= type.path_to "js/doc.js" %>"></script>
   <title><%= type.full_name %> - <%= type.repository_name %></title>
   <script type="text/javascript">
     CrystalDoc.base_path = "<%= type.path_to "" %>";
diff --git a/src/compiler/crystal/tools/doc/templates.cr b/src/compiler/crystal/tools/doc/templates.cr
index b000cc60aaf2..a68d75d2b6a6 100644
--- a/src/compiler/crystal/tools/doc/templates.cr
+++ b/src/compiler/crystal/tools/doc/templates.cr
@@ -29,6 +29,10 @@ module Crystal::Doc
     ECR.def_to_s "#{__DIR__}/html/main.html"
   end
 
+  record HeadTemplate, base_path : String do
+    ECR.def_to_s "#{__DIR__}/html/_head.html"
+  end
+
   struct JsTypeTemplate
     ECR.def_to_s "#{__DIR__}/html/js/doc.js"
   end

From 93fb11884d26c302d38e9c007c5095481dd384fb Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Johannes=20M=C3=BCller?= <straightshoota@gmail.com>
Date: Mon, 12 Mar 2018 15:07:23 +0000
Subject: [PATCH 3/3] Add _sidebar.html partial, remove style IDs and use
 flexbox

This dries up sidebar code.
Element IDs for CSS selectors are replaced with classes to reduce specificity in
stylesheets (avoid specificity wars).
Flexbox is better than absolute positioning as it allows for more
flexible layout and dimensions.
---
 .../crystal/tools/doc/html/_sidebar.html      | 19 ++++
 .../crystal/tools/doc/html/css/style.css      | 88 +++++++++++--------
 src/compiler/crystal/tools/doc/html/js/doc.js | 10 +--
 src/compiler/crystal/tools/doc/html/main.html | 18 +---
 src/compiler/crystal/tools/doc/html/type.html | 18 +---
 src/compiler/crystal/tools/doc/templates.cr   |  4 +
 6 files changed, 82 insertions(+), 75 deletions(-)
 create mode 100644 src/compiler/crystal/tools/doc/html/_sidebar.html

diff --git a/src/compiler/crystal/tools/doc/html/_sidebar.html b/src/compiler/crystal/tools/doc/html/_sidebar.html
new file mode 100644
index 000000000000..8820b613e799
--- /dev/null
+++ b/src/compiler/crystal/tools/doc/html/_sidebar.html
@@ -0,0 +1,19 @@
+<div class="sidebar">
+  <div class="sidebar-header">
+    <div class="search-box">
+      <input type="search" class="search-input" placeholder="Search..." spellcheck="false">
+    </div>
+
+    <div class="repository-links">
+      <a href="<%= current_type.try(&.path_to("")) %>index.html">README</a>
+    </div>
+  </div>
+
+  <div class="search-results" class="hidden">
+    <ul class="search-list"></ul>
+  </div>
+
+  <div class="types-list">
+    <%= ListItemsTemplate.new(types, current_type) %>
+  </div>
+</div>
diff --git a/src/compiler/crystal/tools/doc/html/css/style.css b/src/compiler/crystal/tools/doc/html/css/style.css
index 7655bcf0129c..69fb9c76b426 100644
--- a/src/compiler/crystal/tools/doc/html/css/style.css
+++ b/src/compiler/crystal/tools/doc/html/css/style.css
@@ -40,26 +40,28 @@ h2 {
   padding-bottom: 5px;
 }
 
-#types-list, #main-content {
-  position: absolute;
-  top: 0;
-  bottom: 0;
+body {
+  display: flex;
+}
+
+.sidebar, .main-content {
   overflow: auto;
 }
 
-#types-list {
-  left: 0;
-  width: 20%;
+.sidebar {
+  width: 30em;
+  color: #F8F4FD;
   background-color: #2E1052;
   padding: 0 0 30px;
   box-shadow: inset -3px 0 4px rgba(0,0,0,.35);
+  line-height: 1.2;
 }
 
-#types-list #search-box {
+.sidebar .search-box {
   padding: 8px 9px;
 }
 
-#types-list input {
+.sidebar input {
   display: block;
   box-sizing: border-box;
   margin: 0;
@@ -75,82 +77,92 @@ h2 {
   transition: box-shadow .12s;
 }
 
-#types-list input:focus {
+.sidebar input:focus {
   box-shadow: 0px 5px 6px rgba(0,0,0,.5);
 }
 
-#types-list input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
+.sidebar input::-webkit-input-placeholder { /* Chrome/Opera/Safari */
   color: #C8C8C8;
   font-size: 14px;
   text-indent: 2px;
 }
 
-#types-list input::-moz-placeholder { /* Firefox 19+ */
+.sidebar input::-moz-placeholder { /* Firefox 19+ */
   color: #C8C8C8;
   font-size: 14px;
   text-indent: 2px;
 }
 
-#types-list input:-ms-input-placeholder { /* IE 10+ */
+.sidebar input:-ms-input-placeholder { /* IE 10+ */
   color: #C8C8C8;
   font-size: 14px;
   text-indent: 2px;
 }
 
-#types-list input:-moz-placeholder { /* Firefox 18- */
+.sidebar input:-moz-placeholder { /* Firefox 18- */
   color: #C8C8C8;
   font-size: 14px;
   text-indent: 2px;
 }
 
-#types-list ul {
+.sidebar ul {
   margin: 0;
   padding: 0;
   list-style: none outside;
 }
 
-#types-list li {
+.sidebar li {
   display: block;
   position: relative;
 }
 
-#types-list li.hide {
+.types-list li.hide {
   display: none;
 }
 
-#types-list a,
-.search_result .search-result__title > a {
-  display: block;
+.sidebar a {
   text-decoration: none;
-  color: #F8F4FD;
+  color: inherit;
   transition: color .14s;
 }
 .types-list a {
+  display: block;
   padding: 5px 15px 5px 30px;
 }
 
-#types-list a:focus {
+.types-list {
+  display: block;
+}
+
+.sidebar a:focus {
   outline: 1px solid #D1B7F1;
 }
 
-#types-list .current > a,
-#types-list a:hover {
+.types-list a {
+  padding: 5px 15px 5px 30px;
+}
+
+.sidebar .current > a,
+.sidebar a:hover {
   color: #866BA6;
 }
 
-#types-list li ul {
+.repository-links {
+  padding: 5px 15px 5px 30px;
+}
+
+.types-list li ul {
   overflow: hidden;
   height: 0;
   max-height: 0;
   transition: 1s ease-in-out;
 }
 
-
-#types-list li.parent {
+.types-list li.parent {
   padding-left: 30px;
 }
 
-#types-list li.parent::before {
+.types-list li.parent::before {
   box-sizing: border-box;
   content: "▼";
   display: block;
@@ -169,23 +181,22 @@ h2 {
 }
 
 
-#types-list li.parent > a {
+.types-list li.parent > a {
   padding-left: 0;
 }
 
-#types-list li.parent.open::before {
+.types-list li.parent.open::before {
   transform: rotateZ(0);
 }
 
-#types-list li.open > ul {
+.types-list li.open > ul {
   height: auto;
   max-height: 1000em;
 }
 
-#main-content {
+.main-content {
   padding: 0 30px 30px 30px;
-  left: 20%;
-  right: 0;
+  width: 100%;
 }
 
 .kind {
@@ -487,6 +498,7 @@ span.flag.purple {
 }
 .search-results .search-result__title > a {
   padding: 0;
+  display: block;
 }
 .search-result__title > a > .args {
   color: #dddddd;
@@ -536,13 +548,13 @@ span.flag.purple {
 .js-modal-visible .modal-background {
   display: flex;
 }
-#types-list,
-#main-content {
+.types-list,
+.main-content {
   filter: blur(0);
   transition: filter 200ms;
 }
-.js-modal-visible #types-list,
-.js-modal-visible #main-content {
+.js-modal-visible .types-list,
+.js-modal-visible .main-content {
   filter: blur(2px);
 }
 .modal-background {
diff --git a/src/compiler/crystal/tools/doc/html/js/doc.js b/src/compiler/crystal/tools/doc/html/js/doc.js
index 57b719bc48fc..a2fe7f71499d 100644
--- a/src/compiler/crystal/tools/doc/html/js/doc.js
+++ b/src/compiler/crystal/tools/doc/html/js/doc.js
@@ -19,10 +19,10 @@ document.addEventListener('DOMContentLoaded', function() {
     };
   }
 
-  var repositoryName = document.getElementById('repository-name').getAttribute('content');
-  var typesList = document.getElementById('types-list');
-  var searchInput = document.getElementById('search-input');
-  var parents = document.querySelectorAll('#types-list li.parent');
+  var repositoryName = document.querySelector('#repository-name').getAttribute('content');
+  var typesList = document.querySelector('.types-list');
+  var searchInput = document.querySelector('.search-input');
+  var parents = document.querySelectorAll('.types-list li.parent');
 
   var setPersistentSearchQuery = function(value){
     sessionStorage.setItem(repositoryName + '::search-input:value', value);
@@ -56,7 +56,7 @@ document.addEventListener('DOMContentLoaded', function() {
     window.focus();
   }
 
-  var navigator = new Navigator(document.querySelector('#types-list'), searchInput, document.querySelector(".search-results"), leaveSearchScope);
+  var navigator = new Navigator(document.querySelector('.types-list'), searchInput, document.querySelector(".search-results"), leaveSearchScope);
 
   CrystalDoc.loadIndex();
   var searchTimeout;
diff --git a/src/compiler/crystal/tools/doc/html/main.html b/src/compiler/crystal/tools/doc/html/main.html
index f971dde4749f..852e89799a2e 100644
--- a/src/compiler/crystal/tools/doc/html/main.html
+++ b/src/compiler/crystal/tools/doc/html/main.html
@@ -10,23 +10,9 @@
 </head>
 <body>
 
-<div id="types-list">
-  <div id="search-box">
-    <input type="search" id="search-input" placeholder="Search..." spellcheck="false">
-  </div>
+<%= SidebarTemplate.new(repository_name, types, nil) %>
 
-  <a href="index.html">README</a>
-
-  <div class="search-results" class="hidden">
-    <ul class="search-list"></ul>
-  </div>
-
-  <div class="types-list">
-    <%= ListItemsTemplate.new(types, nil) %>
-  </div>
-</div>
-
-<div id="main-content">
+<div class="main-content">
 <%= body %>
 </div>
 </body>
diff --git a/src/compiler/crystal/tools/doc/html/type.html b/src/compiler/crystal/tools/doc/html/type.html
index ccb784a09e5f..b05fd0ab9a2d 100644
--- a/src/compiler/crystal/tools/doc/html/type.html
+++ b/src/compiler/crystal/tools/doc/html/type.html
@@ -10,23 +10,9 @@
 </head>
 <body>
 
-<div id="types-list">
-  <div id="search-box">
-    <input type="search" id="search-input" placeholder="Search..." spellcheck="false">
-  </div>
+<%= SidebarTemplate.new(type.repository_name, types, type) %>
 
-  <a href="<%= type.path_to("index.html") %>">README</a>
-
-  <div class="search-results" class="hidden">
-    <ul class="search-list"></ul>
-  </div>
-
-  <div class="types-list">
-    <%= ListItemsTemplate.new(types, type) %>
-  </div>
-</div>
-
-<div id="main-content">
+<div class="main-content">
 <h1 class="type-name">
 <% if type.program? %>
   <%= type.full_name %>
diff --git a/src/compiler/crystal/tools/doc/templates.cr b/src/compiler/crystal/tools/doc/templates.cr
index a68d75d2b6a6..2e7390288075 100644
--- a/src/compiler/crystal/tools/doc/templates.cr
+++ b/src/compiler/crystal/tools/doc/templates.cr
@@ -33,6 +33,10 @@ module Crystal::Doc
     ECR.def_to_s "#{__DIR__}/html/_head.html"
   end
 
+  record SidebarTemplate, repository_name : String, types : Array(Type), current_type : Type? do
+    ECR.def_to_s "#{__DIR__}/html/_sidebar.html"
+  end
+
   struct JsTypeTemplate
     ECR.def_to_s "#{__DIR__}/html/js/doc.js"
   end