Redesign website (#2628)

* Bump up Bootstrap to v5.3.1, Bootstrap Icon to v1.10.5. * Use autoComplete.js to drop dependency on jQuery and typeahead.js. * Support dark mode. * New svg logo and icon with responsive color mode support. * Normalize section ids to lower kebab-case for easiness of linking. * Use relative paths for links for local development (--root /output). * Various markup cleanups and accessibility improvements.
author: itchyny <itchyny@cybozu.co.jp> 2023-07-31 09:52:52 +0900
committer: GitHub <noreply@github.com> 2023-07-31 09:52:52 +0900
commit: c8e28da12973f8844ac0457e2db6ccd56286b34a (patch)
tree: 614af32689cf652eb7446eb9dfa4f1d91a2f1c97 /docs/templates
parent: 4af3f99728f924b327b6f455c52452ef0ca09e1a (diff)
6 files changed, 220 insertions, 206 deletions
diff --git a/docs/templates/default.html.j2 b/docs/templates/default.html.j2
index 7830eb37..67030e05 100644
--- a/docs/templates/default.html.j2
+++ b/docs/templates/default.html.j2
@@ -2,32 +2,29 @@
 <html lang="en">
 {% include "shared/_head.html.j2" %}
 
-  <body id="{{slug}}">
+  <body>
 {% include "shared/_navbar.html.j2" %}
 
-    <div class="container">
-      <div class="row">
-        <h1>{{headline}}</h1>
-        {% for item in body %}
-          {% if item.text %}
-            {{ item.text | replace('$JQ_VERSION', jq_version) | markdownify }}
-          {% endif %}
+    <main id="main" class="container-lg">
+      <h1>{{ headline }}</h1>
+      {%- for item in body %}
+      {%- if item.text %}
+      {{ item.text | markdownify }}
+      {%- endif %}
 
-          {% if item.command %}
-            {% set resultID = unique_id() %}
-            <div class="tutorial-example">
-              <div class="accordion-heading">
-                <pre>{{item.command}}</pre>
-                <a data-toggle="collapse" href="#result{{resultID}}">Show result</a>
-              </div>
-              <div id="result{{resultID}}" class="accordion-body collapse">
-                <pre>{{item.result}}</pre>
-              </div>
-            </div>
-          {% endif %}
-        {% endfor %}
+      {%- if item.command %}
+      {%- set resultID = unique_id() %}
+      <div class="tutorial-example mb-3">
+        <div class="d-flex accordion-heading me-2">
+          <pre class="flex-grow-1 me-0 mb-0" tabindex="0">{{ item.command }}</pre>
+          <button type="button" class="btn btn-sm btn-secondary text-body-secondary bg-secondary-subtle link-body-emphasis flex-shrink-0 d-flex align-items-center border border-start-0 d-print-none"
+            data-bs-toggle="collapse" data-bs-target="#result{{ resultID }}" aria-expanded="false" aria-controls="result{{ resultID }}">Show result</button>
+        </div>
+        <pre id="result{{ resultID }}" class="accordion-body collapse p-3 border-top-0 d-print-block" tabindex="0">{{ item.result }}</pre>
       </div>
-    </div>
+      {%- endif %}
+      {%- endfor %}
+    </main>
 
 {% include "shared/_footer.html.j2" %}
   </body>
diff --git a/docs/templates/index.html.j2 b/docs/templates/index.html.j2
index 4ec30007..3fd1566e 100644
--- a/docs/templates/index.html.j2
+++ b/docs/templates/index.html.j2
@@ -2,71 +2,54 @@
 <html lang="en">
 {% include "shared/_head.html.j2" %}
 
-  <body id="{{ slug }}">
+  <body>
 {% include "shared/_navbar.html.j2" %}
 
-    <div class="container">
+    <main id="main" class="container-lg">
       <div class="row">
-        <div class="jumbotron">
-          <div class="row">
-            <div class="col-sm-6">
-              <img src="{{root}}/jq.png" class="img-responsive" alt="jq logo"
-                  width="400" height="220">
-            </div>
-            <div class="col-sm-6">
-              <div id="blurb">
-                {{blurb | markdownify}}
-
-                <div class="btn-toolbar" role="toolbar">
-                  <div class="btn-group" role="group">
-                    <a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#">
-                      Download jq 1.6
-                      <span class="caret"></span>
-                    </a>
-                    <ul class="dropdown-menu">
-                      <li><a href="https://github.com/jqlang/jq/releases/download/jq-1.6/jq-linux64">Linux (64-bit)</a></li>
-                      <li><a href="https://github.com/jqlang/jq/releases/download/jq-1.6/jq-osx-amd64">macOS (64-bit)</a></li>
-                      <li><a href="https://github.com/jqlang/jq/releases/download/jq-1.6/jq-win64.exe">Windows (64-bit)</a></li>
-                      <li><a href="{{root}}/download/">Other platforms, older versions, and source</a></li>
-                    </ul>
-                  </div>
-
-                  <div class="btn-group">
-                    <a class="btn btn-primary" href="https://jqplay.org">
-                      Try online at jqplay.org!
-                    </a>
-                  </div>
-                </div>
-              </div>
-            </div>
+        <div class="col-md-6 text-center p-3">
+          <h1><img src="{{ root }}/jq.svg" class="img-fluid" alt="jq" width="400" height="220"></h1>
+        </div>
+        <div class="col-md-6 d-flex flex-column justify-content-center text-center align-items-center">
+          <h2 class="px-1" style="width:16em">{{ blurb }}</h2>
+          <div class="btn-group d-print-none" role="group">
+            <button type="button" class="btn btn-primary dropdown-toggle text-nowrap" data-bs-toggle="dropdown" aria-expanded="false">
+              Download jq 1.6
+              <span class="caret"></span>
+            </button>
+            <ul class="dropdown-menu">
+              <li><a class="dropdown-item" href="https://github.com/jqlang/jq/releases/download/jq-1.6/jq-linux64" aria-label="Link to download executable: Linux (64-bit)"><span class="bi bi-download me-2" aria-hidden="true"></span>Linux (64-bit)</a></li>
+              <li><a class="dropdown-item" href="https://github.com/jqlang/jq/releases/download/jq-1.6/jq-osx-amd64" aria-label="Link to download executable: macOS (64-bit)"><span class="bi bi-download me-2" aria-hidden="true"></span>macOS (64-bit)</a></li>
+              <li><a class="dropdown-item" href="https://github.com/jqlang/jq/releases/download/jq-1.6/jq-win64.exe" aria-label="Link to download executable: Windows (64-bit)"><span class="bi bi-download me-2" aria-hidden="true"></span>Windows (64-bit)</a></li>
+              <li><a class="dropdown-item" href="{{ root }}/download/">Other platforms, older versions, and source</a></li>
+            </ul>
+            <a class="btn btn-primary text-nowrap" href="https://jqplay.org" target="_blank" rel="noopener">
+              Try online at jqplay.org!<span class="bi bi-box-arrow-up-right ms-1" aria-hidden="true"></span>
+            </a>
           </div>
         </div>
       </div>
 
-      <div class="row" id="multiblurb">
-        <div class="col-sm-4">{{body1 | markdownify}}</div>
-        <div class="col-sm-4">{{body2 | markdownify}}</div>
-        <div class="col-sm-4">{{body3 | markdownify}}</div>
+      <div class="row my-3">
+        <div class="col-md-4">{{ body1 | markdownify }}</div>
+        <div class="col-md-4">{{ body2 | markdownify }}</div>
+        <div class="col-md-4">{{ body3 | markdownify }}</div>
       </div>
 
-      <div class="row" style="text-align:center; margin-top: 30px">
-        {{tail | markdownify}}
+      <div class="text-center my-3">
+        {{ tail | markdownify }}
       </div>
 
-      <div class="row">
-        <h2>News</h2>
-        <div id="news">
-          <ul>
-            {% for item in news %}
-              <li>
-                <span class="date">{{item.date}}</span>
-                {{item.body | markdownify}}
-              </li>
-            {% endfor %}
-          </ul>
-        </div>
-      </div>
-    </div>
+      <h2>News</h2>
+      <ul>
+        {%- for item in news %}
+        <li>
+          <span class="fst-italic">{{ item.date }}</span>
+          {{ item.body | markdownify }}
+        </li>
+        {%- endfor %}
+      </ul>
+    </main>
 
 {% include "shared/_footer.html.j2" %}
   </body>
diff --git a/docs/templates/manual.html.j2 b/docs/templates/manual.html.j2
index 21f9ad28..9a2540c8 100644
--- a/docs/templates/manual.html.j2
+++ b/docs/templates/manual.html.j2
@@ -2,98 +2,109 @@
 <html lang="en">
 {% include "shared/_head.html.j2" %}
 
-  <body id="{{slug}}" data-spy="scroll" data-target="#navcolumn" data-offset="100">
+  <body>
 {% include "shared/_navbar.html.j2" %}
 
-    <div class="container">
-      <div class="row">
-        <div class="affix" id="navcolumn">
+    <div class="container-lg row align-items-start mx-auto p-3">
+
+      <button type="button" class="d-md-none w-auto position-fixed bottom-0 end-0 p-2 m-3 bg-body-secondary border-0 text-body d-print-none"
+        data-bs-toggle="offcanvas" data-bs-target="#contents" aria-controls="contents" aria-expanded="false" aria-label="Toggle table of contents">
+        <span class="bi bi-list" aria-hidden="true"></span>
+      </button>
+      <nav id="contents" class="col-md-3 sticky-md-top p-3 overflow-y-auto offcanvas-md offcanvas-end d-print-none" style="top:4.5rem; height:calc(100dvh - 5.5rem);" aria-label="Table of contents">
+        <div class="d-flex justify-content-between">
           <h4>Contents</h4>
-          <ul class="nav nav-pills nav-stacked">
-            {% for section in sections %}
-              <li>
-                <a href="#{{section.title | section_id}}">{{section.title}}</a>
-              </li>
-            {% endfor %}
-          </ul>
-          <form class="form-group" onsubmit="go_to_section(); return false;">
-            <input type="text"
-                  class="form-control"
-                  placeholder="Search"
-                  autocomplete="off"
-                  id="searchbox">
-          </form>
+          <button type="button" class="btn-close d-md-none" data-bs-dismiss="offcanvas" data-bs-target="#contents" aria-label="Close table of contents"></button>
         </div>
+        <ul class="offcanvas-md-body nav nav-pills flex-column">
+          {%- for section in sections %}
+          <li class="nav-item" data-bs-dismiss="offcanvas" data-bs-target="#contents">
+            <a class="nav-link" href="#{{ section.title | section_id }}">{{ section.title }}</a>
+          </li>
+          {%- endfor %}
+        </ul>
+      </nav>
+      {%- set section_ids = {} %}
+      {%- macro check_section_id(id) -%}
+        {%- if section_ids.__contains__(id) %}
+          {{- raise('Duplicate section id: ' ~ id) }}
+        {%- endif %}
+        {%- set _ = section_ids.__setitem__(id, true) %}
+      {%- endmacro %}
+      <main id="main" class="col-md-9" data-bs-spy="scroll" data-bs-target="#contents" data-bs-threshold="0,1" data-bs-root-margin="-30% 0% -70%">
+        <h1>{{ headline }}</h1>
+        {{ history | markdownify }}
+        {{ body | markdownify }}
+        {%- for section in sections %}
+        <section id="{{ section.title | section_id }}">{{ check_section_id(section.title | section_id) }}
+          <h2>{{ section.title }} <a href="#{{ section.title | section_id }}" class="icon-link" aria-label="Link to this section: {{ section.title }}"><span class="bi bi-link-45deg" aria-hidden="true"></span></a></h2>
+          {{ section.body | markdownify if section.body }}
+          {%- for entry in section.entries %}
+          <section id="{{ entry.title | entry_id }}">{{ check_section_id(entry.title | entry_id) }}
+            <h3>
+              {{ entry.title | markdownify | no_paragraph }}
+              <a href="#{{ entry.title | entry_id }}" class="icon-link" aria-label="Link to this section: {{ entry.title }}"><span class="bi bi-link-45deg" aria-hidden="true"></span></a>
+            </h3>
+            {{ entry.body | markdownify }}
+            {%- if entry.examples %}
+            <div class="pb-3">
+              {%- set exampleID = unique_id() %}
+              <button type="button" class="btn btn-sm btn-secondary text-body-secondary bg-transparent link-body-emphasis border-0" data-bs-toggle="collapse" data-bs-target="#example{{ exampleID }}" aria-expanded="false" aria-controls="example{{ exampleID }}">
+                <span class="me-1 d-print-none" aria-hidden="true"><span class="bi bi-chevron-right"></span><span class="bi bi-chevron-down"></span></span>Example{% if entry.examples | length > 1 %}s{% endif %}
+              </button>
+              <div id="example{{ exampleID }}" class="collapse mx-3 small d-print-block">
+                {%- for example in entry.examples %}
+                <table class="table table-borderless table-sm w-auto">
+                  <tr>
+                    <th class="pe-3">Command</th>
+                    <td class="font-monospace">jq '{{ example.program }}'</td>
+                  </tr>
+                  <tr>
+                    <th>Input</th>
+                    <td class="font-monospace">{{ example.input }}</td>
+                  </tr>
+                  {%- if not example.output[0] %}
+                  <tr>
+                    <th>Output</th>
+                    <td class="fst-italic">none</td>
+                  </tr>
+                  {%- endif %}
+                  {%- for output in example.output %}
+                  <tr>
+                    <th>{% if loop.first %}Output{% endif %}</th>
+                    <td class="font-monospace">{{ output }}</td>
+                  </tr>
+                  {%- endfor %}
+                  <tr class="d-print-none">
+                    <th><a href="https://jqplay.org/jq?q={{ example.program | urlencode }}&j={{ example.input | urlencode }}" class="btn btn-outline-primary btn-sm" target="_blank" rel="noopener">Run<span class="bi bi-box-arrow-up-right ms-2" aria-hidden="true"></span></a></th>
+                    <td></td>
+                  </tr>
+                </table>
+                {%- endfor %}
+              </div>
+            </div>
+            {%- endif %}
+          </section>
+          {%- endfor %}
+        </section>
+        {%- endfor %}
+      </main>
 
-        <div id="manualcontent">
-          <h1>{{headline}}</h1>
-          {{ history | markdownify }}
-          {{ body | markdownify }}
-          {% for section in sections %}
-            <section id="{{section.title | section_id}}">
-              <h2>{{section.title}}</h2>
-              {{ (section.body | markdownify) if section.body }}
-              {% for entry in section.entries %}
-                <section id="{{entry.title | entry_id}}">
-                  <h3>
-                    {{entry.title | markdownify | no_paragraph }}
-                    {% if entry.subtitle %}<small>{{entry.subtitle}}</small>{% endif %}
-                  </h3>
-                  {{entry.body | markdownify}}
-
-                  {% if entry.examples %}
-                    <div>
-                      {% set exampleID = unique_id() %}
-                      <a data-toggle="collapse" href="#example{{exampleID}}">
-                        <i class="glyphicon glyphicon-chevron-right"></i>
-                        {% if entry.examples | length > 1 %}Examples{%else%}Example{%endif%}
-                      </a>
-                      <div id="example{{exampleID}}" class="manual-example collapse">
-                        {% for example in entry.examples %}
-                          <table>
-                            <tr><th></th><td class="jqprogram">jq '{{ example.program }}'</td></tr>
-                            <tr><th>Input</th><td>{{ example.input }}</td></tr>
-                            {% if not example.output[0] %}
-                              <tr>
-                                <th>Output</th>
-                                <td><i>none</i></td>
-                              </tr>
-                            {% endif %}
-                            {% for output in example.output %}
-                              <tr>
-                                {% if loop.first %}
-                                  <th>Output</th>
-                                {% else %}
-                                  <th></th>
-                                {% endif %}
-                                <td>{{ output }}</td>
-                              </tr>
-                            {% endfor %}
-                          </table>
-                        {% endfor %}
-                      </div>
-                    </div>
-                  {% endif %}
-                </section>
-              {% endfor %}
-            </section>
-          {% endfor %}
-        </div>
-      </div>
     </div>
 
 {% include "shared/_footer.html.j2" %}
-    <script>
-      var section_map = {
-        {% for section in sections %}
-          {% for entry in section.entries %}
-            {{entry.title | search_id | tojson }} : {{entry.title | entry_id | tojson }},
-          {% endfor %}
-          {{section.title | search_id | tojson }} : {{section.title | section_id | tojson }}
-          {% if not loop.last %},{% endif %}
-        {% endfor %}
-      };
+    <script src="https://cdn.jsdelivr.net/npm/@tarekraafat/autocomplete.js@10.2.7/dist/autoComplete.min.js"
+      integrity="sha384-xbzjoN6H5XHmAqoSSR42hZVRninPGx85y+XZQGlWxVu2y91lTmr/oD80i5cjeUBv" crossorigin="anonymous"></script>
+    <script id="section-ids" type="application/json">
+      {
+        {%- for section in sections %}
+        {%- for entry in section.entries %}
+        {{ entry.title | search_id | tojson }}: {{ entry.title | entry_id | tojson }},
+        {%- endfor %}
+        {{ section.title | search_id | tojson }}: {{ section.title | section_id | tojson }}{{ "," if not loop.last }}
+        {%- endfor %}
+      }
     </script>
-    <script src="{{root}}/js/manual-search.js"></script>
+    <script src="{{ root }}/js/manual-search.js"></script>
   </body>
 </html>
diff --git a/docs/templates/shared/_footer.html.j2 b/docs/templates/shared/_footer.html.j2
index 511f0b1f..dbed4f27 100644
--- a/docs/templates/shared/_footer.html.j2
+++ b/docs/templates/shared/_footer.html.j2
@@ -1,10 +1,14 @@
-    <footer>
-      <div class="container">
-        <p>This website is made with <a href="http://getbootstrap.com">Bootstrap</a>, themed with <a href="https://bootswatch.com">Bootswatch</a>.</p>
-        <p>jq is licensed under the MIT license (code) and the <a href="https://creativecommons.org/licenses/by/3.0/">CC-BY-3.0</a> license (docs).</p>
+    <footer class="bd-footer bg-body-tertiary">
+      <div class="py-3 text-center">
+        <p>
+          This website is made with <a href="https://getbootstrap.com" target="_blank" rel="noopener">Bootstrap</a>,
+          themed with <a href="https://bootswatch.com" target="_blank" rel="noopener">Bootswatch</a>.
+        </p>
+        <p>
+          jq is licensed under the MIT license (code) and the
+          <a href="https://creativecommons.org/licenses/by/3.0/" target="_blank" rel="noopener">CC-BY-3.0</a> license (docs).
+        </p>
       </div>
     </footer>
-
-    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
-    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js" integrity="sha256-Sk3nkD6mLTMOF0EOpNtsIry+s1CsaqQC1rVLTAy+0yc= sha512-K1qjQ+NcF2TYO/eI3M6v8EiNYZfA95pQumfvcVrTHtwQVDG+aHRqLi/ETn2uB+1JqwYqVG3LIvdm9lj6imS/pQ==" crossorigin="anonymous"></script>
-    <script src="https://twitter.github.io/typeahead.js/releases/0.11.1/typeahead.bundle.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"
+      integrity="sha384-HwwvtgBNo3bZJJLYd8oVXjrBZt8cqVSpeBNS5n7C8IVInixGAoxmnlMuBnhbgrkm" crossorigin="anonymous"></script>
diff --git a/docs/templates/shared/_head.html.j2 b/docs/templates/shared/_head.html.j2
index 96c3c4dc..7a240307 100644
--- a/docs/templates/shared/_head.html.j2
+++ b/docs/templates/shared/_head.html.j2
@@ -1,17 +1,23 @@
   <head>
-    <script>
-      if ((window.location.host == "jqlang.github.io") && (window.location.protocol != "https:"))
-        window.location.protocol = "https";
-    </script>
     <meta charset="utf-8">
-    <title>{{headline}}</title>
+    <title>{{ headline }}</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
-    <link rel="canonical" href="{{ url }}/{{ permalink }}" />
-    <link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.5/spacelab/bootstrap.min.css" rel="stylesheet" integrity="sha256-j7Dtnd7ZjexEiPNbscbopFn9+Cs0b3TLipKsWAPHZIM= sha512-RFhfi6P8zWMAJrEGU+CPjuxPh3r/UUBGqQ+/o6WKPIVZmQqeOipGotH2ihRULuQ8wsMBoK15TSZqc/7VYWyuIw==" crossorigin="anonymous">
-    <link rel="stylesheet" href="{{ root }}/css/base.css" type="text/css">
-    <!--[if lt IE 9]>
-      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
-      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
-    <![endif]-->
+    <link rel="icon" href="{{ root }}/icon.svg" type="image/svg+xml">
+    <link rel="apple-touch-icon" href="{{ root }}/icon.png" type="image/png">
+    <link rel="canonical" href="{{ url }}/{{ permalink }}">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootswatch@5.3.1/dist/cosmo/bootstrap.min.css"
+      integrity="sha384-dulfW0vmzZ638jigSgZXvDxMmd70GCnIv6oa+riKq6Kk4E0MKf7qmBfwP02wltv5" crossorigin="anonymous">
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css"
+      integrity="sha384-Ay26V7L8bsJTsX9Sxclnvsn+hkdiwRnrjZJXqKmkIDobPgIIWBOVguEcQQLDuhfN" crossorigin="anonymous">
+    <link rel="stylesheet" href="{{ root }}/css/style.css" type="text/css">
+    <script>
+      (function() {
+        function setTheme(mediaQuery) {
+          document.documentElement.setAttribute('data-bs-theme',
+            document.documentElement.style.colorScheme = mediaQuery.matches ? 'dark' : 'light');
+        }
+        const mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        setTheme(mediaQuery); mediaQuery.addEventListener('change', setTheme);
+      })();
+    </script>
   </head>
diff --git a/docs/templates/shared/_navbar.html.j2 b/docs/templates/shared/_navbar.html.j2
index a3238611..92222902 100644
--- a/docs/templates/shared/_navbar.html.j2
+++ b/docs/templates/shared/_navbar.html.j2
@@ -1,27 +1,40 @@
-    <div class="navbar navbar-default navbar-fixed-top" role="navigation">
-      <div class="container">
-        <div class="navbar-header">
-          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapse">
-            <span class="sr-only">Toggle navigation</span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-            <span class="icon-bar"></span>
-          </button>
-          <a class="navbar-brand" href="{{root}}/">jq</a>
-        </div>
-
-        <div class="navbar-collapse collapse" id="nav-collapse">
-          <ul class="nav navbar-nav">
-            {% for item in navigation %}
-              <li {% if item == navitem %} class="active" {% endif %}>
-                <a href="{{root}}/{{item}}/">{{item | capitalize}}</a>
-              </li>
-            {% endfor %}
-            <li><a href="https://github.com/jqlang/jq/issues">Issues</a></li>
-            <li><a href="https://github.com/jqlang/jq">Source</a></li>
-            <li><a href="https://jqplay.org">Try online!</a></li>
-            <li><a href="https://raw.githubusercontent.com/jqlang/jq/master/NEWS.md">News</a></li>
+    <div class="container visually-hidden-focusable">
+      <a class="d-inline-flex p-2" href="#main">Skip to main content</a>
+      {%- if navitem.startswith('manual') %}
+      <a class="d-inline-flex p-2 m-1" href="#contents">Skip to table of contents</a>
+      {%- endif %}
+    </div>
+    <header class="navbar navbar-expand-md sticky-top bg-body-tertiary d-print-none">
+      <nav class="container-lg" aria-label="Page navigation">
+        <button type="button" class="navbar-toggler" data-bs-toggle="offcanvas" data-bs-target="#navbar-collapse"
+          aria-controls="navbar-collapse" aria-expanded="false" aria-label="Toggle page navigation">
+          <span class="navbar-toggler-icon"></span>
+        </button>
+        <a class="navbar-brand" href="{{ root }}/" aria-label="Top page"><img src="{{ root }}/jq.svg" alt="jq logo" style="height:1.5rem"></a>
+        <div id="navbar-collapse" class="offcanvas offcanvas-start navbar-collapse w-auto" aria-labelledby="navbar-title">
+          <div class="offcanvas-header">
+            <h3 id="navbar-title" class="me-3">jq</h3>
+            <button type="button" class="d-md-none btn-close" data-bs-dismiss="offcanvas" aria-label="Close page navigation"></button>
+          </div>
+          <ul class="offcanvas-body navbar-nav me-auto text-nowrap">
+            <li class="nav-item d-md-none"><a class="nav-link{% if not navitem %} active{% endif %}"{% if not navitem %} aria-current="page"{% endif %} href="{{ root }}/">Top page</a></li>
+            {%- for item in ['tutorial', 'download', 'manual'] %}
+            <li class="nav-item"><a class="nav-link{% if item == navitem %} active{% endif %}"{% if item == navitem %} aria-current="page"{% endif %} href="{{ root }}/{{ item }}/">{{ item | capitalize }}</a></li>
+            {%- endfor %}
+            <li class="nav-item"><a class="nav-link" href="https://github.com/jqlang/jq" target="_blank" rel="noopener">GitHub</a></li>
+            <li class="nav-item"><a class="nav-link" href="https://github.com/jqlang/jq/issues" target="_blank" rel="noopener">Issues</a></li>
+            <li class="nav-item"><a class="nav-link" href="https://jqplay.org" target="_blank" rel="noopener">Try online!</a></li>
+            <li class="nav-item"><a class="nav-link" href="https://raw.githubusercontent.com/jqlang/jq/master/NEWS.md" target="_blank" rel="noopener">News</a></li>
           </ul>
         </div>
-      </div>
-    </div>
+        {%- if navitem.startswith('manual') %}
+        <div class="container-searchbox form-control p-0 d-none d-md-flex d-print-none border" style="width:16rem">
+          <span class="bi bi-search my-auto ms-2 me-1" aria-hidden="true"></span>
+          <input type="text" id="searchbox" class="form-control border-0 px-1" placeholder="Search manual" role="combobox"
+            aria-label="Search manual" aria-keyshortcuts="/" aria-expanded="false" autocomplete="off" spellcheck="false">
+          <kbd class="mx-1 my-auto text-body bg-body rounded border" style="padding:.1rem .2rem" aria-hidden="true">/</kbd>
+        </div>
+        {%- endif %}
+        <a class="d-md-none bi bi-github fs-4 text-body" href="https://github.com/jqlang/jq" target="_blank" rel="noopener" aria-label="GitHub"></a>
+      </nav>
+    </header>
author	itchyny <itchyny@cybozu.co.jp>	2023-07-31 09:52:52 +0900
committer	GitHub <noreply@github.com>	2023-07-31 09:52:52 +0900
commit	c8e28da12973f8844ac0457e2db6ccd56286b34a (patch)
tree	614af32689cf652eb7446eb9dfa4f1d91a2f1c97 /docs/templates
parent	4af3f99728f924b327b6f455c52452ef0ca09e1a (diff)