Build custom 404 page at root (#1742)

jcollins-g · web-flow · commit db16c7f080c1 · 2018-08-27T11:46:32.000-07:00
* Build custom 404 page at root

* Fix up orphan checks

* Split test package docs into dev and stable versions

* Make stable and dev trees separate for Dart compare_output_test

* Search box refactor but still needs setting adjustment

* Fix up search style

* update test package docs
diff --git a/lib/dartdoc.dart b/lib/dartdoc.dart
@@ -247,12 +247,17 @@ class Dartdoc extends PackageBuilder {
         continue;
       }
       if (visited.contains(fullPath)) continue;
-      if (!writtenFiles.contains(fullPath)) {
+      String relativeFullPath = pathLib.relative(fullPath, from: normalOrigin);
+      if (!writtenFiles.contains(relativeFullPath)) {
         // This isn't a file we wrote (this time); don't claim we did.
         _warn(packageGraph, PackageWarning.unknownFile, fullPath, normalOrigin);
       } else {
-        _warn(
-            packageGraph, PackageWarning.orphanedFile, fullPath, normalOrigin);
+        // Error messages are orphaned by design and do not appear in the search
+        // index.
+        if (relativeFullPath != '__404error.html') {
+          _warn(packageGraph, PackageWarning.orphanedFile, fullPath,
+              normalOrigin);
+        }
       }
       _onCheckProgress.add(fullPath);
     }
diff --git a/lib/resources/script.js b/lib/resources/script.js
@@ -27,7 +27,7 @@ function initSideNav() {
   }
 }
 
-function initSearch() {
+function initSearch(name) {
   var searchIndex;  // the JSON data
 
   var weights = {
@@ -120,16 +120,16 @@ function initSearch() {
       }
     }
 
-    $('#search-box').prop('disabled', false);
-    $('#search-box').prop('placeholder', 'Search');
+    $('#' + name).prop('disabled', false);
+    $('#' + name).prop('placeholder', 'Search');
     $(document).keypress(function(event) {
       if (event.which == 47 /* / */) {
         event.preventDefault();
-        $('#search-box').focus();
+        $('#' + name).focus();
       }
     });
 
-    $('#search-box.typeahead').typeahead({
+    $('#' + name + '.typeahead').typeahead({
       hint: true,
       highlight: true,
       minLength: 1
@@ -156,7 +156,7 @@ function initSearch() {
       }
     });
 
-    var typeaheadElement = $('#search-box.typeahead');
+    var typeaheadElement = $('#' + name + '.typeahead');
     var typeaheadElementParent = typeaheadElement.parent();
     var selectedSuggestion;
 
@@ -187,13 +187,14 @@ function initSearch() {
     initTypeahead();
   });
   jsonReq.addEventListener('error', function() {
-    $('#search-box').prop('placeholder', 'Error loading search index');
+    $('#' + name).prop('placeholder', 'Error loading search index');
   });
   jsonReq.send();
 }
 
 document.addEventListener("DOMContentLoaded", function() {
   hljs.initHighlightingOnLoad();
   initSideNav();
-  initSearch();
+  initSearch("search-box");
+  initSearch("search-body");
 });
diff --git a/lib/resources/styles.css b/lib/resources/styles.css
@@ -776,12 +776,15 @@ button {
   color: #999
 }
 
-.tt-menu {
+.navbar-right .tt-menu {
   right:0;
   left: inherit !important;
   width: 422px;
   max-height: 250px;
   overflow-y: auto;
+}
+
+.tt-menu {
   font-size: 14px;
   margin: 0;
   padding: 8px 0;
@@ -830,6 +833,12 @@ button {
   background-color: #ffffff;
 }
 
+.search-body {
+  border: 1px solid #7f7f7f;
+  max-width: 400px;
+  box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
+}
+
 section#setter {
   border-top: 1px solid #ddd;
   padding-top: 36px;
diff --git a/lib/src/html/html_generator_instance.dart b/lib/src/html/html_generator_instance.dart
@@ -170,6 +170,7 @@ class HtmlGeneratorInstance {
     logInfo('documenting ${package.name}');
 
     _build('index.html', _templates.indexTemplate, data);
+    _build('__404error.html', _templates.errorTemplate, data);
   }
 
   void generateLibrary(PackageGraph packageGraph, Library lib) {
diff --git a/lib/src/html/templates.dart b/lib/src/html/templates.dart
@@ -83,6 +83,7 @@ class Templates {
   final TemplateRenderer enumTemplate;
   final TemplateRenderer constantTemplate;
   final TemplateRenderer constructorTemplate;
+  final TemplateRenderer errorTemplate;
   final TemplateRenderer functionTemplate;
   final TemplateRenderer indexTemplate;
   final TemplateRenderer libraryTemplate;
@@ -119,6 +120,7 @@ class Templates {
     var functionTemplate = await _loadTemplate('function.html');
     var methodTemplate = await _loadTemplate('method.html');
     var constructorTemplate = await _loadTemplate('constructor.html');
+    var errorTemplate = await _loadTemplate('404error.html');
     var propertyTemplate = await _loadTemplate('property.html');
     var constantTemplate = await _loadTemplate('constant.html');
     var topLevelConstantTemplate =
@@ -135,6 +137,7 @@ class Templates {
         functionTemplate,
         methodTemplate,
         constructorTemplate,
+        errorTemplate,
         propertyTemplate,
         constantTemplate,
         topLevelConstantTemplate,
@@ -150,6 +153,7 @@ class Templates {
       this.functionTemplate,
       this.methodTemplate,
       this.constructorTemplate,
+      this.errorTemplate,
       this.propertyTemplate,
       this.constantTemplate,
       this.topLevelConstantTemplate,
diff --git a/lib/templates/404error.html b/lib/templates/404error.html
@@ -0,0 +1,23 @@
+{{>head}}
+
+  <div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
+    <h5><span class="package-name">{{self.name}}</span> <span class="package-kind">{{self.kind}}</span></h5>
+    {{>packages}}
+  </div>
+
+  <div class="col-xs-12 col-sm-9 col-md-8 main-content">
+    <h1>404: Something's gone wrong :-(</h1>
+
+    <section class="desc">
+      <p>You've tried to visit a page that doesn't exist.  Luckily this site
+         has other <a href="index.html">pages</a>.</p>
+      <p>If you were looking for something specific, try searching:
+      <form class="search-body" role="search">
+        <input type="text" id="search-body" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search...">
+      </form>
+      </p>
+
+    </section>
+  </div> <!-- /.main-content -->
+
+{{>footer}}
diff --git a/testing/test_package_docs/__404error.html b/testing/test_package_docs/__404error.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <meta name="generator" content="made with love by dartdoc 0.20.3">
+  <meta name="description" content="test_package API docs, for the Dart programming language.">
+  <title>test_package - Dart API docs</title>
+
+  <link href="https://fonts.googleapis.com/css?family=Source+Code+Pro:500,400i,400,300|Source+Sans+Pro:400,300,700" rel="stylesheet">
+  <link rel="stylesheet" href="static-assets/github.css">
+  <link rel="stylesheet" href="static-assets/styles.css">
+  <link rel="icon" href="static-assets/favicon.png">
+
+</head>
+
+<body>
+
+<div id="overlay-under-drawer"></div>
+
+<header id="title">
+  <ol class="breadcrumbs gt-separated dark hidden-xs">
+    <li><a href="http://github.com/dart-lang">test_package package</a></li>
+  </ol>
+  <div class="self-name">test_package</div>
+  <form class="search navbar-right" role="search">
+    <input type="text" id="search-box" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search...">
+  </form>
+</header>
+
+<main>
+
+  <div class="col-xs-6 col-sm-3 col-md-2 sidebar sidebar-offcanvas-left">
+    <h5><span class="package-name">test_package</span> <span class="package-kind">package</span></h5>
+    <ol>
+          <li class="section-title">Libraries</li>
+          <li><a href="anonymous_library/anonymous_library-library.html">anonymous_library</a></li>
+          <li><a href="another_anonymous_lib/another_anonymous_lib-library.html">another_anonymous_lib</a></li>
+          <li><a href="code_in_comments/code_in_comments-library.html">code_in_comments</a></li>
+          <li><a class="deprecated" href="is_deprecated/is_deprecated-library.html">is_deprecated</a></li>
+          <li class="section-subtitle">Real Libraries</li>
+            <li class="section-subitem"><a href="ex/ex-library.html">ex</a></li>
+            <li class="section-subitem"><a href="fake/fake-library.html">fake</a></li>
+          <li class="section-subtitle">Unreal</li>
+            <li class="section-subitem"><a href="reexport_one/reexport_one-library.html">reexport_one</a></li>
+            <li class="section-subitem"><a href="reexport_two/reexport_two-library.html">reexport_two</a></li>
+          <li class="section-subtitle">Misc</li>
+            <li class="section-subitem"><a href="two_exports/two_exports-library.html">two_exports</a></li>
+          <li class="section-subtitle">Other</li>
+            <li class="section-subitem"><a href="css/css-library.html">css</a></li>
+          <li class="section-title">test_package_imported</li>
+          <li><a href="test_package_imported.main/test_package_imported.main-library.html">test_package_imported.main</a></li>
+    </ol>
+  </div>
+
+  <div class="col-xs-12 col-sm-9 col-md-8 main-content">
+    <h1>404: Something's gone wrong :-(</h1>
+
+    <section class="desc">
+      <p>You've tried to visit a page that doesn't exist.  Luckily this site
+         has other <a href="index.html">pages</a>.</p>
+      <p>If you were looking for something specific, try searching:
+      <form class="search-body" role="search">
+        <input type="text" id="search-body" autocomplete="off" disabled class="form-control typeahead" placeholder="Loading search...">
+      </form>
+      </p>
+
+    </section>
+  </div> <!-- /.main-content -->
+
+</main>
+
+<footer>
+  <span class="no-break">
+    test_package 0.0.1
+  </span>
+
+</footer>
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
+<script src="static-assets/typeahead.bundle.min.js"></script>
+<script src="static-assets/highlight.pack.js"></script>
+<script src="static-assets/URI.js"></script>
+<script src="static-assets/script.js"></script>
+
+
+</body>
+
+</html>
diff --git a/testing/test_package_docs/static-assets/script.js b/testing/test_package_docs/static-assets/script.js
@@ -27,7 +27,7 @@ function initSideNav() {
   }
 }
 
-function initSearch() {
+function initSearch(name) {
   var searchIndex;  // the JSON data
 
   var weights = {
@@ -120,16 +120,16 @@ function initSearch() {
       }
     }
 
-    $('#search-box').prop('disabled', false);
-    $('#search-box').prop('placeholder', 'Search');
+    $('#' + name).prop('disabled', false);
+    $('#' + name).prop('placeholder', 'Search');
     $(document).keypress(function(event) {
       if (event.which == 47 /* / */) {
         event.preventDefault();
-        $('#search-box').focus();
+        $('#' + name).focus();
       }
     });
 
-    $('#search-box.typeahead').typeahead({
+    $('#' + name + '.typeahead').typeahead({
       hint: true,
       highlight: true,
       minLength: 1
@@ -156,7 +156,7 @@ function initSearch() {
       }
     });
 
-    var typeaheadElement = $('#search-box.typeahead');
+    var typeaheadElement = $('#' + name + '.typeahead');
     var typeaheadElementParent = typeaheadElement.parent();
     var selectedSuggestion;
 
@@ -187,13 +187,14 @@ function initSearch() {
     initTypeahead();
   });
   jsonReq.addEventListener('error', function() {
-    $('#search-box').prop('placeholder', 'Error loading search index');
+    $('#' + name).prop('placeholder', 'Error loading search index');
   });
   jsonReq.send();
 }
 
 document.addEventListener("DOMContentLoaded", function() {
   hljs.initHighlightingOnLoad();
   initSideNav();
-  initSearch();
+  initSearch("search-box");
+  initSearch("search-body");
 });
diff --git a/testing/test_package_docs/static-assets/styles.css b/testing/test_package_docs/static-assets/styles.css
@@ -776,12 +776,15 @@ button {
   color: #999
 }
 
-.tt-menu {
+.navbar-right .tt-menu {
   right:0;
   left: inherit !important;
   width: 422px;
   max-height: 250px;
   overflow-y: auto;
+}
+
+.tt-menu {
   font-size: 14px;
   margin: 0;
   padding: 8px 0;
@@ -830,6 +833,12 @@ button {
   background-color: #ffffff;
 }
 
+.search-body {
+  border: 1px solid #7f7f7f;
+  max-width: 400px;
+  box-shadow: 3px 3px 5px rgba(0,0,0,0.1);
+}
+
 section#setter {
   border-top: 1px solid #ddd;
   padding-top: 36px;
diff --git a/testing/test_package_docs_dev/__404error.html b/testing/test_package_docs_dev/__404error.html
diff --git a/testing/test_package_docs_dev/static-assets/script.js b/testing/test_package_docs_dev/static-assets/script.js
diff --git a/testing/test_package_docs_dev/static-assets/styles.css b/testing/test_package_docs_dev/static-assets/styles.css

Original file line number	Diff line number	Diff line change
`@@ -170,6 +170,7 @@ class HtmlGeneratorInstance {`
`170`	`170`	`logInfo('documenting ${package.name}');`
`171`	`171`
`172`	`172`	`_build('index.html', _templates.indexTemplate, data);`
	`173`	`+ _build('__404error.html', _templates.errorTemplate, data);`
`173`	`174`	`}`
`174`	`175`
`175`	`176`	`void generateLibrary(PackageGraph packageGraph, Library lib) {`