New rating feature for docs & many updates and hopefully improvements

- SEO: Added `rel="noopener"` to Github links (Links to cross-origin destinations are unsafe) - Updated/removed Bootstrap and jQuery packages (9 vulnerabilities detected) - SEO: Added `height: auto;` to the logo css (lighthouse cought a wrong AR) - SEO: Added alt & title tags to logos in header and footer - Moved esi to the correct position - SEO: Added dns-prefech/preconnect to googleapis.com and cdn.crate.io - Updated version tag for css/js in `base.html` for cleaner caches - SEO: Added language `xml:lang="en" lang="en"` - Added Favicon - SEO: Preloading Font - SEO: Minified/Combined static js/css files (except custom and doctools) - SEO: Removed `maximum-scale=1` from meta viewport to allow zooming - Added new rating feature below the feedbackbox - SEO: Changed h3 to h2 for feedbackbox and new rating - Fixed a minor css error in `crateio.css` and added `font-display: swap;` - Fixed colors of the `Toggle Doc Menu` (mobile)
crate · Jan 26, 2021 · 02bcb18 · 02bcb18
1 parent 9cb9ba2
commit 02bcb18
Show file tree

Hide file tree

Showing 14 changed files with 14,179 additions and 3,122 deletions.
diff --git a/CHANGES.rst b/CHANGES.rst
@@ -6,6 +6,23 @@ CHANGES for Crate.io Documentation Theme
 Unreleased
 ----------
 
+- SEO: Added `rel="noopener"` to Github links 
+  (Links to cross-origin destinations are unsafe)
+- Updated/removed Bootstrap and jQuery packages (9 vulnerabilities detected)
+- SEO: Added `height: auto;` to the logo css (lighthouse cought a wrong AR)
+- SEO: Added alt & title tags to logos in header and footer
+- Moved esi to the correct position
+- SEO: Added dns-prefech/preconnect to googleapis.com and cdn.crate.io
+- Updated version tag for css/js in `base.html` for cleaner caches
+- SEO: Added language `xml:lang="en" lang="en"`
+- Added Favicon
+- SEO: Preloading Font
+- SEO: Minified/Combined static js/css files (except custom and doctools)
+- SEO: Removed `maximum-scale=1` from meta viewport to allow zooming
+- Added new rating feature below the feedbackbox
+- SEO: Changed h3 to h2 for feedbackbox and new rating
+- Fixed a minor css error in `crateio.css` and added `font-display: swap;`
+- Fixed colors of the `Toggle Doc Menu` (mobile)
 
 2020/12/01 0.12.0
 -----------------

diff --git a/src/crate/theme/rtd/crate/base.html b/src/crate/theme/rtd/crate/base.html
@@ -95,30 +95,35 @@ <h3>{{ _('Navigation') }}</h3>
       };
     </script>
 
-    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
+    <link rel="preconnect" href="https://ajax.googleapis.com/" crossorigin>
+    <link rel="dns-prefetch" href="https://ajax.googleapis.com/">
+    <link rel="preconnect" href="https://cdn.crate.io/" crossorigin>
+    <link rel="dns-prefetch" href="https://cdn.crate.io/">
+
+    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
     <!--[if lte IE 9]><script src="https://cdnjs.cloudflare.com/ajax/libs/placeholders/3.0.2/placeholders.min.js"></script><![endif]-->
     <script type="text/javascript" src="https://cdn.crate.io/libs/jquery-cookie/1.4.1/jquery.cookie.min.js"></script>
 
     {%- for scriptfile in script_files %}
-    <script type="text/javascript" src="{{ pathto(scriptfile, 1) }}?ver=1.1"></script>
+    <script type="text/javascript" src="{{ pathto(scriptfile, 1) }}?ver=1.2"></script>
     {%- endfor %}
     {%- for scriptfile in extra_script_files %}
-    <script type="text/javascript" src="{{ pathto(scriptfile, 1) }}?ver=1.1"></script>
+    <script type="text/javascript" src="{{ pathto(scriptfile, 1) }}?ver=1.2"></script>
     {%- endfor %}
 {%- endmacro %}
 
 {%- macro css() %}
-    <link rel="stylesheet" href="{{ pathto('_static/' + style, 1) }}?ver=1.1" type="text/css" />
-    <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1) }}?ver=1.1" type="text/css" />
+    <link rel="stylesheet" href="{{ pathto('_static/' + style, 1) }}?ver=1.2" type="text/css" />
+    <link rel="stylesheet" href="{{ pathto('_static/pygments.css', 1) }}?ver=1.2" type="text/css" />
     {%- for cssfile in css_files %}
-    <link rel="stylesheet" href="{{ pathto(cssfile, 1) }}?ver=1.1" type="text/css" />
+    <link rel="stylesheet" href="{{ pathto(cssfile, 1) }}?ver=1.2" type="text/css" />
     {%- endfor %}
     {%- for cssfile in extra_css_files %}
-    <link rel="stylesheet" href="{{ pathto(cssfile, 1) }}?ver=1.1" type="text/css" />
+    <link rel="stylesheet" href="{{ pathto(cssfile, 1) }}?ver=1.2" type="text/css" />
     {%- endfor %}
 {%- endmacro %}
 
-<html xmlns="http://www.w3.org/1999/xhtml">
+<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
   <head>
     <meta http-equiv="Content-Type" content="text/html; charset={{ encoding }}" />
     {{ metatags }}
@@ -133,9 +138,9 @@ <h3>{{ _('Navigation') }}</h3>
           title="{% trans docstitle=docstitle|e %}Search within {{ docstitle }}{% endtrans %}"
           href="{{ pathto('_static/opensearch.xml', 1) }}"/>
     {%- endif %}
-    {%- if favicon %}
-    <link rel="shortcut icon" href="{{ pathto('_static/images/' + favicon, 1) }}"/>
-    {%- endif %}
+
+    <link rel="shortcut icon" href="{{ pathto('_static', 1) }}/images/favicon.ico"/>
+    <link rel="preload" href="{{ pathto('_static', 1) }}/fonts/BlenderPro-Bold.ttf" as="font" type="font/ttf" crossorigin>
     {%- endif %}
 {%- block linktags %}
     {%- if hasdoc('about') %}

diff --git a/src/crate/theme/rtd/crate/footer.html b/src/crate/theme/rtd/crate/footer.html
@@ -59,28 +59,27 @@
             </ul>
           </div>
           <div class="w-col w-col-2">
-            <ul class="footer-list w-list-unstyled" style="margin-top: 0; padding-left: 0;">
-              <div class="mobileHoriztonalMenu">
+            <div class="mobileHoriztonalMenu">
+              <ul class="footer-list w-list-unstyled" style="margin-top: 0; padding-left: 0;">
                 <li class="footer-listitem-new"><a href="https://crate.io/legal/">Legal</a></li>
                 <li class="footer-listitem-new"><a href="https://crate.io/legal/privacy-policy/">Privacy Policy</a></li>
                 <li class="footer-listitem-new"><a href="https://crate.io/legal/imprint/">Imprint</a></li>
-
-              </div>
-              <li class="footer-listitem link-list">
-                <a class="footer-link-eu w-inline-block" href="/erdf/">
-                  <img class="logo-eu" sizes="100px" src="{{ pathto('_static', 1) }}/images/logo-eu-optimized-1.jpg" width="101">
-                </a>
-              </li>
-            </ul>
+                <li class="footer-listitem link-list">
+                  <a class="footer-link-eu w-inline-block" href="/erdf/" title="European Regional Development Funds">
+                    <img class="logo-eu" sizes="100px" src="{{ pathto('_static', 1) }}/images/logo-eu-optimized-1.jpg" alt="European Regional Development Funds Logo" width="100" height="28">
+                  </a>
+                </li>
+              </ul>
+            </div>
           </div>
         </esi:remove>
         <!--esi
           <esi:include src="https://crate.io/navi-footer.php" />
           -->
       </div>
       <div class="w-row">
-        <a class="brand footer-brand w-inline-block" href="/">
-          <img src="{{ pathto('_static', 1) }}/images/logo-crate.png" width="217">
+        <a class="brand footer-brand w-inline-block" href="/" title="crate.io">
+          <img src="{{ pathto('_static', 1) }}/images/logo-crate.png" alt="crate.io Logo" width="217" height="36">
         </a>
       </div>
     </div>

diff --git a/src/crate/theme/rtd/crate/layout.html b/src/crate/theme/rtd/crate/layout.html
@@ -1,27 +1,15 @@
 {% extends "base.html" %}
 
   {% set css_files = [
-    '_static/css/normalize.css',
-    '_static/css/bootstrap.css',
-
-    '_static/css/components.css',
-    '_static/css/crateio.css',
-    '_static/css/crateio-rtd.css',
+    '_static/css/style.min.css',
     '_static/css/custom.css',
     ]
   %}
 
   {% set script_files = [
-    '_static/js/modernizr.js',
-    '_static/js/underscore.min.js',
+    '_static/js/script.min.js',
     '_static/doctools.js',
-    '_static/js/searchtools.js',
-    '_static/js/webflow.js',
-    '_static/js/bootstrap.js',
-
-    '_static/js/fontawesome.js',
-    '_static/js/custom.js',
-    '_static/js/sticky-sidebar.min.js'
+    '_static/js/custom.js'
     ]
   %}
 
@@ -38,7 +26,7 @@
   {%- block extra_head %}
   <meta charset='utf-8'>
   <meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
-  <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1'>
+  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
   <meta name="apple-mobile-web-app-capable" content="yes">
   {% endblock %}
 
@@ -93,15 +81,15 @@
             <div class="view-on-github">
             {% if check_meta and 'github_url' in meta %}
               <!-- User defined GitHub URL -->
-              <a href="{{ meta['github_url'] }}" class="fa fa-github"><span class="edit-on-github-link"> Edit on GitHub</span></a>
+              <a href="{{ meta['github_url'] }}" rel="noopener" class="fa fa-github"><span class="edit-on-github-link"> Edit on GitHub</span></a>
             {% else %}
               <div id="cr-docs-feedback" class="cr-docs-feedback-container">
                   <div class="cr-docs-feedback-header">
                       <div class="cr-docs-feedback-headline">
-                          <h3>Feedback</h3>
+                          <h2>Feedback</h2>
                       </div>
                       <div class="cr-docs-feedback-meta">
-                          <a id="docs-feedback-open-issue" href="https://{{ github_host|default('github.com') }}/{{ github_user }}/{{ github_repo }}/issues/new?labels=team:%20tech%20writing,triage&body={{
+                          <a id="docs-feedback-open-issue" rel="noopener" href="https://{{ github_host|default('github.com') }}/{{ github_user }}/{{ github_repo }}/issues/new?labels=team:%20tech%20writing,triage&body={{
                               '###  Documentation feedback'|urlencode }}{{ '%0A'
                             }}{{ '%0A'
                             }}{{
@@ -120,16 +108,40 @@ <h3>Feedback</h3>
                               '<!-- Please add your comments here -->'|urlencode }}{{ '%0A'
                             }}{{ '%0A'
                             }}" target="_blank" title="New issue">New issue</a>
-                          <a id="docs-feedback-edit-document" href="https://{{ github_host|default('github.com') }}/{{ github_user }}/{{ github_repo }}/{{ theme_vcs_pageview_mode|default('edit') }}/{{ github_version }}{{ conf_py_path }}{{ pagename }}{{ suffix }}" target="_blank" title="Edit on GitHub">Edit on GitHub</a>
+                          <a id="docs-feedback-edit-document" href="https://{{ github_host|default('github.com') }}/{{ github_user }}/{{ github_repo }}/{{ theme_vcs_pageview_mode|default('edit') }}/{{ github_version }}{{ conf_py_path }}{{ pagename }}{{ suffix }}" rel="noopener" target="_blank" title="Edit on GitHub">Edit on GitHub</a>
                       </div>
                   </div>
 
                   <div id="cr-feedback-content"></div>
 
                   <div class="cr-docs-feedback-footer">
-                      <a id="docs-feedback-open-github" href="https://{{ github_host|default('github.com') }}/{{ github_user }}/{{ github_repo }}/{{ theme_vcs_pageview_mode|default('blob') }}/{{ github_version }}{{ conf_py_path }}{{ pagename }}{{ suffix }}" target="_blank" title="View on GitHub">View on GitHub</a>
+                      <a id="docs-feedback-open-github" href="https://{{ github_host|default('github.com') }}/{{ github_user }}/{{ github_repo }}/{{ theme_vcs_pageview_mode|default('blob') }}/{{ github_version }}{{ conf_py_path }}{{ pagename }}{{ suffix }}" rel="noopener" target="_blank" title="View on GitHub">View on GitHub</a>
                   </div>
               </div>
+
+              <div id="cr-docs-rating" class="cr-docs-rating-container">
+                <div class="cr-docs-rating-headline">
+                        <h2>Rate this page</h2>
+                    </div>
+                    <div class="cr-rating-content">
+                        <div class="cr-rating">
+                          <form id="ratingForm">
+                            <span class="cr-ratingtext">How helpful was this page?</span>
+                            <fieldset class="rating">
+                              <input type="radio" id="star5" name="rating" value="5" /><label for="star5" title="Great!">5 stars</label>
+                              <input type="radio" id="star4" name="rating" value="4" /><label for="star4" title="Pretty good">4 stars</label>
+                              <input type="radio" id="star3" name="rating" value="3" /><label for="star3" title="Meh">3 stars</label>
+                              <input type="radio" id="star2" name="rating" value="2" /><label for="star2" title="Bad">2 stars</label>
+                              <input type="radio" id="star1" name="rating" value="1" /><label for="star1" title="Ugh...">1 star</label>
+                            </fieldset>
+                            <button id="ratingVote" class="submit">Submit</button>
+                            <div id="ratingStatus"></div>
+                          </form>
+                      </div>
+                    </div>
+                </div>
+            </div>
+
             {% endif %}
             </div>
           {% endif %}
@@ -256,18 +268,18 @@ <h3>Feedback</h3>
 
               else {
                 issues.forEach((issue) => {
-                  html += `<li><div class='cr-docs-feedback-entry'><div class='cr-docs-feedback-title'><strong><a href='${issue.html_url}' class='cr-docs-link' title='View issue on GitHub' target='blank'>${issue.title}</a></strong></div>`;
+                  html += `<li><div class='cr-docs-feedback-entry'><div class='cr-docs-feedback-title'><strong><a href='${issue.html_url}' rel='noopener' class='cr-docs-link' title='View issue on GitHub' target='blank'>${issue.title}</a></strong></div>`;
 
                     // show PR if applicable
                     if (issue.pull_request != undefined) {
                       html += `<div class='cr-docs-feedback-pr'><svg viewBox='0 0 12 16' version='1.1' width='12' height='16' aria-hidden='true'><path fill-rule='evenodd' d='M11 11.28V5c-.03-.78-.34-1.47-.94-2.06C9.46 2.35 8.78 2.03 8 2H7V0L4 3l3 3V4h1c.27.02.48.11.69.31.21.2.3.42.31.69v6.28A1.993 1.993 0 0010 15a1.993 1.993 0 001-3.72zm-1 2.92c-.66 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2zM4 3c0-1.11-.89-2-2-2a1.993 1.993 0 00-1 3.72v6.56A1.993 1.993 0 002 15a1.993 1.993 0 001-3.72V4.72c.59-.34 1-.98 1-1.72zm-.8 10c0 .66-.55 1.2-1.2 1.2-.65 0-1.2-.55-1.2-1.2 0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2zM2 4.2C1.34 4.2.8 3.65.8 3c0-.65.55-1.2 1.2-1.2.65 0 1.2.55 1.2 1.2 0 .65-.55 1.2-1.2 1.2z'><title>Pull Request</title></path></svg></div>`;
                     }
                     // show # of comments
                     if (issue.comments != 0) {
-                      html += `<div class='cr-docs-feedback-comments'><a href='${issue.html_url}' class='cr-docs-link' title='View issue on GitHub' target='blank'><svg viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'><path fill-rule='evenodd' d='M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z'><title>Comment</title></path></svg> ${issue.comments}</a></div>`;
+                      html += `<div class='cr-docs-feedback-comments'><a href='${issue.html_url}' rel='noopener' class='cr-docs-link' title='View issue on GitHub' target='blank'><svg viewBox='0 0 16 16' version='1.1' width='16' height='16' aria-hidden='true'><path fill-rule='evenodd' d='M14 1H2c-.55 0-1 .45-1 1v8c0 .55.45 1 1 1h2v3.5L7.5 11H14c.55 0 1-.45 1-1V2c0-.55-.45-1-1-1zm0 9H7l-2 2v-2H2V2h12v8z'><title>Comment</title></path></svg> ${issue.comments}</a></div>`;
                     }
                     // show issue number + link to it
-                    html += `</div><div class='cr-docs-feedback-details'><a href='${issue.html_url}' class='cr-docs-link' title='View issue on GitHub' target='blank'>#${issue.number}</a> `;
+                    html += `</div><div class='cr-docs-feedback-details'><a href='${issue.html_url}' rel='noopener' class='cr-docs-link' title='View issue on GitHub' target='blank'>#${issue.number}</a> `;
 
                     var date = new Date(issue.created_at);
 
@@ -276,7 +288,7 @@ <h3>Feedback</h3>
                     + months[date.getMonth()] + " "
                     + date.getFullYear();
 
-                    html += `opened on ${formatted_date} by <a href='${issue.user.html_url}' class='cr-docs-link' title='View ${issue.user.login} on GitHub' `;
+                    html += `opened on ${formatted_date} by <a href='${issue.user.html_url}' rel='noopener' class='cr-docs-link' title='View ${issue.user.login} on GitHub' `;
                     html += ` target='blank'>${issue.user.login}</a></br>`;
                     html += "</div></li>";
                   });

diff --git a/src/crate/theme/rtd/crate/navbar.html b/src/crate/theme/rtd/crate/navbar.html
@@ -3,15 +3,15 @@
 <header class="header-nav">
   <div class="container">
     <div class="navbar w-nav" data-animation="default" data-collapse="small" data-contain="1" data-duration="400">
-      <a class="brand w-nav-brand" href="https://crate.io">
-        <img src="{{ pathto('_static', 1) }}/images/logo-crate.png" width="217">
+      <a class="brand w-nav-brand" href="https://crate.io" title="crate.io">
+        <img src="{{ pathto('_static', 1) }}/images/logo-crate.png" alt="crate.io Logo" width="217" height="36">
       </a>
       <nav class="w-nav-menu main-nav" role="navigation">
         <div class="dropdownBackground">
           <span class="arrow"></span>
         </div>
-        <ul id="menu-top-navigation" class="menu">
           <esi:remove>
+          <ul id="menu-top-navigation" class="menu">
             <li class="navlink w-nav-link menu-item menu-item-has-children">
               <a href="https://crate.io/products/">Products</a>
               <ul class="sub-menu">
@@ -50,11 +50,11 @@
             </li>
             <li class="navlink w-nav-link menu-item"><a href="https://crate.io/blog/">Blog</a></li>
             <li class="btn-link w-nav-link menu-item"><a href="https://crate.io/download/#cratedb-cloud">Try CrateDB</a></li>
+          </ul>
           </esi:remove>
           <!--esi
             <esi:include src="https://crate.io/navi-header.php" />
             -->
-        </ul>
       </nav>
 
       <label for="mobile-nav-new" class="fa fa-bars mobile-nav-button"></label>