Various site fixes. (#1701)

- Prevent See Also sections from showing up on index pages. - Clean up and simplify some JavaScript & CSS. - Set a height for the idea and warning icons in order to prevent screen flicker when loading pages with these icons.
2018-07-08 17:12:12 -07:00 · 2018-07-08 17:12:12 -07:00 · 3d511f5a70
parent 072abae8ce
commit 3d511f5a70
23 changed files with 109 additions and 150 deletions
--- a/layouts/partials/primary-bottom.html
+++ b/layouts/partials/primary-bottom.html
@ -1,22 +1,24 @@
 {{ $toc := partial "toc.html" (dict "page" .) }}
 {{ $needTOC := .Scratch.Get "needTOC" }}

-                {{ $related := .Site.RegularPages.Related . | first 6 }}
-                {{ with $related }}
-                    <h2 id="see-also">See also</h2>
+                {{ if .Scratch.Get "seeAlso" }}
+                    {{ $related := .Site.RegularPages.Related . | first 6 }}
+                    {{ with $related }}
+                        <h2 id="see-also">See also</h2>

-                    <div class="see-also">
-                        <div class="container-fluid">
-                            <div class="row">
-                                {{ range . }}
-                                    <div class="col-xs-12 col-sm-6 col-lg-4">
-                                        <p class="link"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>
-                                        <p class="desc">{{ .Description }}</p>
-                                    </div>
-                                {{ end }}
+                        <div class="see-also">
+                            <div class="container-fluid">
+                                <div class="row">
+                                    {{ range . }}
+                                        <div class="col-xs-12 col-sm-6 col-lg-4">
+                                            <p class="link"><a href="{{ .RelPermalink }}">{{ .Title }}</a></p>
+                                            <p class="desc">{{ .Description }}</p>
+                                        </div>
+                                    {{ end }}
+                                </div>
                            </div>
                        </div>
-                    </div>
+                    {{ end }}
                {{ end }}
            </main>

--- a/layouts/partials/toc.html
+++ b/layouts/partials/toc.html
@ -2,11 +2,15 @@
 {{ $page.Scratch.Set "needTOC" false }}
 {{ $page.Scratch.Set "seeAlso" false }}

-{{ $related := $page.Site.RegularPages.Related $page | first 5 }}
+{{ $related := $page.Site.RegularPages.Related $page | first 6 }}
 {{ with $related }}
    {{ $page.Scratch.Set "seeAlso" true }}
 {{ end }}

+{{ if $page.Scratch.Get "skipSeeAlso" }}
+    {{ $page.Scratch.Set "seeAlso" false }}
+{{ end }}
+
 {{ $headers := findRE "<h[23456].*?id=\".*?\".*?>.*?</h[23456]>" $page.Content }}
 {{ $len := len $headers }}

@ -43,8 +47,10 @@
                </ul>
            {{ end }}

-            {{ with $related }}
-                <li><a href="#see-also">See also</a></li>
+            {{ if $page.Scratch.Get "seeAlso" }}
+                {{ with $related }}
+                    <li><a href="#see-also">See also</a></li>
+                {{ end }}
            {{ end }}
        </ul>
    </nav>
--- a/layouts/section-index/list.html
+++ b/layouts/section-index/list.html
@ -1,5 +1,7 @@
 {{ define "main" }}

+{{ .Scratch.Set "skipSeeAlso" true }}
+
 {{ partial "primary-top.html" . }}

 <p>{{ .Description }}</p>
--- a/layouts/shortcodes/idea_icon.html
+++ b/layouts/shortcodes/idea_icon.html
@ -1 +1 @@
-<img src="/img/bulb.svg" alt="Bulb" title="Idea" style="width: 1.5rem; display:inline" />
+<img src="/img/bulb.svg" alt="Bulb" title="Idea" style="width: 1.5rem; height: 2.14rem; display:inline" />
--- a/layouts/shortcodes/warning_icon.html
+++ b/layouts/shortcodes/warning_icon.html
@ -1 +1 @@
-<img src="/img/exclamation-mark.svg" alt="Warning" title="Warning" style="width: 2rem; display:inline" />
+<img src="/img/exclamation-mark.svg" alt="Warning" title="Warning" style="width: 2rem; height: 2rem; display:inline" />
--- a/scripts/build_site.sh
+++ b/scripts/build_site.sh
@ -13,5 +13,5 @@ sass src/sass/dark_theme_normal.scss dark_theme_normal.css -s compressed
 sass src/sass/dark_theme_preliminary.scss dark_theme_preliminary.css -s compressed
 mv light_theme* static/css
 mv dark_theme* static/css
-uglifyjs src/js/misc.js src/js/prism.js --mangle --compress -o static/js/all.min.js --source-map
+uglifyjs src/js/misc.js src/js/utils.js src/js/prism.js --mangle --compress -o static/js/all.min.js --source-map
 uglifyjs src/js/styleSwitcher.js --mangle --compress -o static/js/styleSwitcher.min.js --source-map
--- a/src/js/misc.js
+++ b/src/js/misc.js
@ -10,7 +10,6 @@ $(function ($) {
        $form.removeClass('active');
        $links.addClass('active');
        $textbox.val('');
-        $textbox.removeClass("grow");
    }

    // Show the navbar search box, hide the links
@ -21,7 +20,6 @@ $(function ($) {

        $form.addClass('active');
        $links.removeClass('active');
-        $textbox.addClass("grow");
        $textbox.focus();
    }

@ -70,80 +68,50 @@ $(function ($) {

        // toggle toolbar buttons
        $(document).on('mouseenter', 'pre', function () {
-            $(this).next().toggleClass("toolbar-show", true);
-            $(this).next().toggleClass("toolbar-hide", false);
-            $(this).next().next().toggleClass("toolbar-show", true);
-            $(this).next().next().toggleClass("toolbar-hide", false);
-            $(this).next().next().next().toggleClass("toolbar-show", true);
-            $(this).next().next().next().toggleClass("toolbar-hide", false);
+            $(this).next().addClass("toolbar-show");
+            $(this).next().next().addClass("toolbar-show");
+            $(this).next().next().next().addClass("toolbar-show");
        });

        // toggle toolbar buttons
        $(document).on('mouseleave', 'pre', function () {
-            $(this).next().toggleClass("toolbar-show", false);
-            $(this).next().toggleClass("toolbar-hide", true);
-            $(this).next().next().toggleClass("toolbar-show", false);
-            $(this).next().next().toggleClass("toolbar-hide", true);
-            $(this).next().next().next().toggleClass("toolbar-show", false);
-            $(this).next().next().next().toggleClass("toolbar-hide", true);
+            $(this).next().removeClass("toolbar-show");
+            $(this).next().next().removeClass("toolbar-show");
+            $(this).next().next().next().removeClass("toolbar-show");
        });

        // toggle copy button
        $(document).on('mouseenter', 'button.copy', function () {
-            $(this).toggleClass("toolbar-show", true);
-            $(this).toggleClass("toolbar-hide", false);
+            $(this).addClass("toolbar-show");
        });

        // toggle copy button
        $(document).on('mouseleave', 'button.copy', function () {
-            $(this).toggleClass("toolbar-show", false);
-            $(this).toggleClass("toolbar-hide", true);
+            $(this).removeClass("toolbar-show");
        });

        // toggle download button
        $(document).on('mouseenter', 'button.download', function () {
-            $(this).toggleClass("toolbar-show", true);
-            $(this).toggleClass("toolbar-hide", false);
+            $(this).addClass("toolbar-show");
        });

        // toggle download button
        $(document).on('mouseleave', 'button.download', function () {
-            $(this).toggleClass("toolbar-show", false);
-            $(this).toggleClass("toolbar-hide", true);
+            $(this).removeClass("toolbar-show");
        });

        // toggle print button
        $(document).on('mouseenter', 'button.print', function () {
-            $(this).toggleClass("toolbar-show", true);
-            $(this).toggleClass("toolbar-hide", false);
+            $(this).addClass("toolbar-show");
        });

        // toggle print button
        $(document).on('mouseleave', 'button.print', function () {
-            $(this).toggleClass("toolbar-show", false);
-            $(this).toggleClass("toolbar-hide", true);
+            $(this).removeClass("toolbar-show");
        });
    });
 }(jQuery));

-// Scroll the document to the top
-function scrollToTop() {
-    document.body.scrollTop = 0; // For Safari
-    document.documentElement.scrollTop = 0; // For Chrome, Firefox, IE and Opera
-}
-
-String.prototype.escapeHTML = function() {
-    var tagsToReplace = {
-        '&': '&amp;',
-        '<': '&lt;',
-        '>': '&gt;'
-    };
-
-    return this.replace(/[&<>]/g, function(tag) {
-        return tagsToReplace[tag] || tag;
-    });
-};
-
 // initialized after the DOM has been loaded by getDOMTopology
 var scrollToTopButton;
 var tocLinks;
@ -158,65 +126,19 @@ function handleDOMLoaded() {
    // way.
    function patchDOM() {

-         var escapeChars = {
-            '¢' : 'cent',
-            '£' : 'pound',
-            '¥' : 'yen',
-            '€': 'euro',
-            '©' :'copy',
-            '®' : 'reg',
-            '<' : 'lt',
-            '>' : 'gt',
-            '"' : 'quot',
-            '&' : 'amp',
-            '\'' : '#39'
-        };
-
-        var regexString = '[';
-        for(var key in escapeChars) {
-            regexString += key;
-        }
-        regexString += ']';
-
-        var regex = new RegExp(regexString, 'g');
-
-        function escapeHTML(str) {
-            return str.replace(regex, function(m) {
-                return '&' + escapeChars[m] + ';';
-            });
-        }
-
-        // To compensate for https://github.com/gohugoio/hugo/issues/4785, certain code blocks are
-        // indented in markdown by four spaces. This removes these four spaces so that the visuals
-        // are correct.
-        function compensateForHugoBug() {
-            var code = document.getElementsByTagName('CODE');
-            for (var i = 0; i < code.length; i++) {
-                var lines = code[i].innerText.split("\n");
-                if ((lines.length > 0) && lines[0].startsWith("    ")) {
-                    for (var j = 0; j < lines.length; j++) {
-                        if (lines[j].startsWith("    ")) {
-                            lines[j] = lines[j].substr(4);
-                        }
-                    }
-                    code[i].innerHTML = escapeHTML(lines.join('\n'));
-                }
-            }
-        }
-
        // Add a toolbar to all PRE blocks
        function attachToolbarToPreBlocks() {
            var pre = document.getElementsByTagName('PRE');
            for (var i = 0; i < pre.length; i++) {
                var copyButton = document.createElement("BUTTON");
                copyButton.title = "Copy to clipboard";
-                copyButton.className = "copy toolbar-hide";
+                copyButton.className = "copy";
                copyButton.innerHTML = "<i class='fa fa-copy'></i>";
                copyButton.setAttribute("aria-label", "Copy to clipboard");

                var downloadButton = document.createElement("BUTTON");
                downloadButton.title = "Download";
-                downloadButton.className = "download toolbar-hide";
+                downloadButton.className = "download";
                downloadButton.innerHTML = "<i class='fa fa-download'></i>";
                downloadButton.setAttribute("aria-label", downloadButton.title);
                downloadButton.onclick = function(e) {
@ -252,7 +174,7 @@ function handleDOMLoaded() {

                var printButton = document.createElement("BUTTON");
                printButton.title = "Print";
-                printButton.className = "print toolbar-hide";
+                printButton.className = "print";
                printButton.innerHTML = "<i class='fa fa-print'></i>";
                printButton.setAttribute("aria-label", printButton.title);
                printButton.onclick = function(e) {
@ -371,7 +293,7 @@ function handleDOMLoaded() {
                                var lang = cl.substr(prefix.length);
                                output = Prism.highlight(output, Prism.languages[lang], lang);
                            } else {
-                                output = output.escapeHTML();
+                                output = escapeHTML(output);
                            }

                            html += "<div class='output'>" + output + "</div>";
@ -503,7 +425,6 @@ function handleDOMLoaded() {
            }
        }

-        compensateForHugoBug();
        attachToolbarToPreBlocks();
        applySyntaxColoringToPreBlocks();
        attachLinksToHeaders();
@ -595,24 +516,5 @@ function handlePageScroll() {
    controlTOCActivation();
 }

-function saveFile(filename, text) {
-    var element = document.createElement('a');
-    element.setAttribute('href', 'data:text/text;charset=utf-8,' + encodeURI(text));
-    element.setAttribute('download', filename);
-    element.click();
-}
-
-function printText(text) {
-    var html="<html><body><pre><code>" + text + "</code></pre></html>";
-
-    var printWin = window.open('','','left=0,top=0,width=100,height=100,toolbar=0,scrollbars=0,status=0,location=0,menubar=0', false);
-    printWin.document.write(html);
-    printWin.document.close();
-    printWin.focus();
-    printWin.print();
-    printWin.close();
-}
-
-
 document.addEventListener("DOMContentLoaded", handleDOMLoaded);
 window.addEventListener("scroll", handlePageScroll);
--- a/src/js/utils.js
+++ b/src/js/utils.js
@ -0,0 +1,50 @@
+"use strict";
+
+// Scroll the document to the top
+function scrollToTop() {
+    document.body.scrollTop = 0;            // for Safari
+    document.documentElement.scrollTop = 0; // for Chrome, Firefox, IE and Opera
+}
+
+var escapeChars = {
+    '¢'  : 'cent',
+    '£'  : 'pound',
+    '¥'  : 'yen',
+    '€'  : 'euro',
+    '©'  :'copy',
+    '®'  : 'reg',
+    '<'  : 'lt',
+    '>'  : 'gt',
+    '"'  : 'quot',
+    '&'  : 'amp',
+    '\'' : '#39'
+};
+
+var regex = new RegExp("[¢£¥€©®<>\"&']", 'g');
+
+// Escapes special characters into HTML entities
+function escapeHTML(str) {
+    return str.replace(regex, function(m) {
+        return '&' + escapeChars[m] + ';';
+    });
+}
+
+// Saves a string to a particular client-side file
+function saveFile(filename, text) {
+    var element = document.createElement('a');
+    element.setAttribute('href', 'data:text/text;charset=utf-8,' + encodeURI(text));
+    element.setAttribute('download', filename);
+    element.click();
+}
+
+// Sends a string to the printer
+function printText(text) {
+    var html="<html><body><pre><code>" + text + "</code></pre></html>";
+
+    var printWin = window.open('','','left=0,top=0,width=100,height=100,toolbar=0,scrollbars=0,status=0,location=0,menubar=0', false);
+    printWin.document.write(html);
+    printWin.document.close();
+    printWin.focus();
+    printWin.print();
+    printWin.close();
+}
--- a/src/sass/base/_common.scss
+++ b/src/sass/base/_common.scss
@ -205,9 +205,6 @@ div.toolbar {
        position: absolute;
        top: 3px;
        z-index: 5;
-    }
-
-    button.toolbar-hide {
        transition: opacity .4s ease-in-out;
        opacity: 0;
    }
--- a/static/css/dark_theme_archive.css
+++ b/static/css/dark_theme_archive.css
--- a/static/css/dark_theme_archive.css.map
+++ b/static/css/dark_theme_archive.css.map
--- a/static/css/dark_theme_normal.css
+++ b/static/css/dark_theme_normal.css
--- a/static/css/dark_theme_normal.css.map
+++ b/static/css/dark_theme_normal.css.map
--- a/static/css/dark_theme_preliminary.css
+++ b/static/css/dark_theme_preliminary.css
--- a/static/css/dark_theme_preliminary.css.map
+++ b/static/css/dark_theme_preliminary.css.map
--- a/static/css/light_theme_archive.css
+++ b/static/css/light_theme_archive.css
--- a/static/css/light_theme_archive.css.map
+++ b/static/css/light_theme_archive.css.map
--- a/static/css/light_theme_normal.css
+++ b/static/css/light_theme_normal.css
--- a/static/css/light_theme_normal.css.map
+++ b/static/css/light_theme_normal.css.map
--- a/static/css/light_theme_preliminary.css
+++ b/static/css/light_theme_preliminary.css
--- a/static/css/light_theme_preliminary.css.map
+++ b/static/css/light_theme_preliminary.css.map
--- a/static/js/all.min.js
+++ b/static/js/all.min.js
--- a/static/js/all.min.js.map
+++ b/static/js/all.min.js.map