Wild experiment for better navigation

_includes/guide-metadata-bar.html

@@ -0,0 +1,154 @@
+{% assign current_filename = include.current_filename %}
+{% assign docversion = include.docversion %}
+{% assign docversion_index = docversion | replace: '.', '-' %}
+{% assign cat_data = site.data.versioned[docversion_index].index.categories.categories %}
+
+{% unless cat_data %}{% break %}{% endunless %}
+
+{% assign guide_cat_labels = "" | split: "," %}
+{% assign guide_cat_ids = "" | split: "," %}
+{% assign guide_topics = nil %}
+
+{% for cat in cat_data %}
+  {% if cat.subcategories %}
+    {% for sub in cat.subcategories %}
+      {% for g in sub.guides %}
+        {% if g.filename == current_filename %}
+          {% assign cat_label = cat.title | append: " › " | append: sub.title %}
+          {% assign guide_cat_labels = guide_cat_labels | push: cat_label %}
+          {% assign guide_cat_ids = guide_cat_ids | push: sub.id %}
+          {% if g.topics %}
+            {% assign guide_topics = g.topics %}
+          {% endif %}
+        {% endif %}
+      {% endfor %}
+    {% endfor %}
+  {% else %}
+    {% for g in cat.guides %}
+      {% if g.filename == current_filename %}
+        {% assign guide_cat_labels = guide_cat_labels | push: cat.title %}
+        {% assign guide_cat_ids = guide_cat_ids | push: cat.id %}
+        {% if g.topics %}
+          {% assign guide_topics = g.topics %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+{% endfor %}
+
+{% if guide_cat_labels.size > 0 or guide_topics %}
+<div class="guide-metadata-bar">
+  {% for cat_label in guide_cat_labels %}
+    {% assign cat_id = guide_cat_ids[forloop.index0] %}
+    {% assign panel_guides = "" | split: "," %}
+    {% for cat in cat_data %}
+      {% if cat.subcategories %}
+        {% for sub in cat.subcategories %}
+          {% if sub.id == cat_id %}
+            {% for g in sub.guides %}
+              {% if g.title and g.url and g.filename != current_filename %}
+                {% assign panel_guides = panel_guides | push: g %}
+              {% endif %}
+            {% endfor %}
+          {% endif %}
+        {% endfor %}
+      {% else %}
+        {% if cat.id == cat_id %}
+          {% for g in cat.guides %}
+            {% if g.title and g.url and g.filename != current_filename %}
+              {% assign panel_guides = panel_guides | push: g %}
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+      {% endif %}
+    {% endfor %}
+    {% assign panel_guides = panel_guides | sort: "title" %}
+    {% if panel_guides.size > 0 %}
+      <span class="guide-meta-dropdown">
+        <button class="guide-meta-label guide-meta-category" onclick="toggleMetaDropdown(event, 'meta-cat-{{ cat_id }}')">{{ cat_label }}</button>
+        <div class="guide-meta-panel" id="meta-cat-{{ cat_id }}">
+          <div class="guide-meta-panel-header">{{ cat_label }}</div>
+          <ul>
+            {% for g in panel_guides %}
+              {% if docversion == 'latest' %}
+                {% assign gurl = site.baseurl | append: g.url %}
+              {% else %}
+                {% assign gurl = site.baseurl | append: '/version/' | append: docversion | append: g.url %}
+              {% endif %}
+              <li><a href="{{ gurl }}">{{ g.title }}</a></li>
+            {% endfor %}
+          </ul>
+        </div>
+      </span>
+    {% else %}
+      <button class="guide-meta-label guide-meta-category guide-meta-noclick" disabled>{{ cat_label }}</button>
+    {% endif %}
+  {% endfor %}
+  {% if guide_topics %}
+    {% for topic in guide_topics %}
+      {% assign topic_id = topic | slugify %}
+      {% assign topic_guides = "" | split: "," %}
+      {% for cat in cat_data %}
+        {% if cat.subcategories %}
+          {% for sub in cat.subcategories %}
+            {% for g in sub.guides %}
+              {% if g.topics contains topic and g.title and g.url and g.filename != current_filename %}
+                {% assign topic_guides = topic_guides | push: g %}
+              {% endif %}
+            {% endfor %}
+          {% endfor %}
+        {% else %}
+          {% for g in cat.guides %}
+            {% if g.topics contains topic and g.title and g.url and g.filename != current_filename %}
+              {% assign topic_guides = topic_guides | push: g %}
+            {% endif %}
+          {% endfor %}
+        {% endif %}
+      {% endfor %}
+      {% assign topic_guides = topic_guides | sort: "title" %}
+      {% if topic_guides.size > 0 %}
+        <span class="guide-meta-dropdown">
+          <button class="guide-meta-label guide-meta-topic" onclick="toggleMetaDropdown(event, 'meta-topic-{{ topic_id }}')">{{ topic }}</button>
+          <div class="guide-meta-panel" id="meta-topic-{{ topic_id }}">
+            <div class="guide-meta-panel-header">{{ topic }}</div>
+            <ul>
+              {% for g in topic_guides %}
+                {% if docversion == 'latest' %}
+                  {% assign gurl = site.baseurl | append: g.url %}
+                {% else %}
+                  {% assign gurl = site.baseurl | append: '/version/' | append: docversion | append: g.url %}
+                {% endif %}
+                <li><a href="{{ gurl }}">{{ g.title }}</a></li>
+              {% endfor %}
+            </ul>
+          </div>
+        </span>
+      {% else %}
+        <button class="guide-meta-label guide-meta-topic guide-meta-noclick" disabled>{{ topic }}</button>
+      {% endif %}
+    {% endfor %}
+  {% endif %}
+</div>
+
+<script>
+function toggleMetaDropdown(event, id) {
+  event.stopPropagation();
+  var panel = document.getElementById(id);
+  var wasOpen = panel.classList.contains('open');
+  closeAllMetaDropdowns();
+  if (!wasOpen) {
+    panel.classList.add('open');
+  }
+}
+function closeAllMetaDropdowns() {
+  document.querySelectorAll('.guide-meta-panel.open').forEach(function(p) {
+    p.classList.remove('open');
+  });
+}
+document.addEventListener('click', function(e) {
+  if (!e.target.closest('.guide-meta-dropdown')) {
+    closeAllMetaDropdowns();
+  }
+});
+</script>
+{% endif %}

_includes/guide-nav-sidebar.html

@@ -0,0 +1,79 @@
+{% assign docversion = include.docversion %}
+{% assign current_filename = include.current_filename %}
+{% assign docversion_index = docversion | replace: '.', '-' %}
+{% assign cat_data = site.data.versioned[docversion_index].index.categories.categories %}
+
+{% unless cat_data %}{% break %}{% endunless %}
+
+<nav class="guide-nav-sidebar">
+  {% for cat in cat_data %}
+    {% assign cat_has_current = false %}
+    {% if cat.subcategories %}
+      {% for sub in cat.subcategories %}
+        {% for g in sub.guides %}
+          {% if g.filename == current_filename %}
+            {% assign cat_has_current = true %}
+          {% endif %}
+        {% endfor %}
+      {% endfor %}
+    {% else %}
+      {% for g in cat.guides %}
+        {% if g.filename == current_filename %}
+          {% assign cat_has_current = true %}
+        {% endif %}
+      {% endfor %}
+    {% endif %}
+
+    <details class="guide-nav-cat" {% if cat_has_current %}open{% endif %}>
+      <summary>{{ cat.title }}</summary>
+
+      {% if cat.subcategories %}
+        {% for sub in cat.subcategories %}
+          {% assign sub_has_current = false %}
+          {% for g in sub.guides %}
+            {% if g.filename == current_filename %}
+              {% assign sub_has_current = true %}
+            {% endif %}
+          {% endfor %}
+
+          <details class="guide-nav-subcat" {% if sub_has_current %}open{% endif %}>
+            <summary>{{ sub.title }}</summary>
+            <ul>
+              {% for g in sub.guides %}
+                {% if g.title %}
+                  {% if g.url %}
+                    {% if docversion == 'latest' %}
+                      {% assign guide_url = site.baseurl | append: g.url %}
+                    {% else %}
+                      {% assign guide_url = site.baseurl | append: '/version/' | append: docversion | append: g.url %}
+                    {% endif %}
+                    <li {% if g.filename == current_filename %}class="active"{% endif %}>
+                      <a href="{{ guide_url }}">{{ g.title }}</a>
+                    </li>
+                  {% endif %}
+                {% endif %}
+              {% endfor %}
+            </ul>
+          </details>
+        {% endfor %}
+      {% else %}
+        <ul>
+          {% for g in cat.guides %}
+            {% if g.title %}
+              {% if g.url %}
+                {% if docversion == 'latest' %}
+                  {% assign guide_url = site.baseurl | append: g.url %}
+                {% else %}
+                  {% assign guide_url = site.baseurl | append: '/version/' | append: docversion | append: g.url %}
+                {% endif %}
+                <li {% if g.filename == current_filename %}class="active"{% endif %}>
+                  <a href="{{ guide_url }}">{{ g.title }}</a>
+                </li>
+              {% endif %}
+            {% endif %}
+          {% endfor %}
+        </ul>
+      {% endif %}
+    </details>
+  {% endfor %}
+</nav>

_includes/index-categories-guides.html

@@ -0,0 +1,27 @@
+<ul class="guide-list">
+  {% for g in include.guides %}
+    {% if g.title %}
+      {% assign is_external = g.url | slice: 0, 4 %}
+      {% if is_external == "http" %}
+        {% assign guide_url = g.url %}
+      {% elsif include.docversion == 'latest' %}
+        {% assign guide_url = site.baseurl | append: g.url %}
+      {% else %}
+        {% assign guide_url = site.baseurl | append: '/version/' | append: include.docversion | append: g.url %}
+      {% endif %}
+      <li>
+        <qs-guide type="{{ g.type | escape }}"
+                  title="{{ g.title | escape }}"
+                  url="{{ guide_url }}"
+                  summary="{{ g.summary | escape }}"
+                  keywords="{{ g.keywords | escape }}"
+                  categories="{{ g.categories | escape }}"
+                  origin="{{ g.origin | escape }}"
+        >
+          <a href="{{ guide_url }}">{{ g.title }}</a>
+          {% if g.summary %}<span class="guide-summary">{{ g.summary }}</span>{% endif %}
+        </qs-guide>
+      </li>
+    {% endif %}
+  {% endfor %}
+</ul>

_includes/index-categories.html

@@ -0,0 +1,80 @@
+{% assign docversion = include.docversion %}
+{% assign docversion_index = docversion | replace: '.', '-' %}
+{% assign cat_data = site.data.versioned[docversion_index].index.categories.categories %}
+
+<div id="guides-app">
+  <qs-form server="{{ site.search.host }}"
+           quarkus-version="{{ docversion }}"
+           language="{{ site.language }}"
+           initial-timeout="{{ site.search.initial-timeout }}"
+           more-timeout="{{ site.search.more-timeout }}"
+           min-chars="{{ site.search.min-chars }}"
+  >
+    <section class="full-width-version-bg flexfilterbar">
+      <div class="flexcontainer">
+        <div class="flexlabel">
+          <label>{{site.data.index-docs.texts.by_version}}</label>
+        </div>
+        <div class="pulldown version">
+          <select id="guidesindex-version-dropdown">
+            {% for version in site.data.versions.documentation %}
+            <option value="{{ version }}" {% if docversion== version %}selected{% endif %}>{% if version ==
+              'latest' %}{{ site.data.versions.quarkus.version | replace_regex: "\.[0-9+]\.Final", "" }} -
+              {% endif %}{{ version | capitalize }}{% if version == 'main' %} - SNAPSHOT{% endif %}
+            </option>
+            {% endfor %}
+          </select>
+        </div>
+        <div class="search">
+          <input name="q" type="search" placeholder="{{site.data.index-docs.texts.filter_by_keyword}}" autocomplete="off"/>
+        </div>
+      </div>
+    </section>
+  </qs-form>
+
+  <div>
+    <h1 class="title">{{ page.title }}</h1>
+  </div>
+
+  <qs-target origins-with-relative-urls="quarkus">
+    <div class="categories-index">
+      <nav class="categories-toc">
+        <h3>Categories</h3>
+        <ul>
+          {% for cat in cat_data %}
+          <li>
+            <a href="#cat-{{ cat.id }}">{{ cat.title }}</a>
+            {% if cat.subcategories %}
+            <ul>
+              {% for sub in cat.subcategories %}
+              <li><a href="#cat-{{ sub.id }}">{{ sub.title }}</a></li>
+              {% endfor %}
+            </ul>
+            {% endif %}
+          </li>
+          {% endfor %}
+        </ul>
+      </nav>
+
+      <div class="categories-content" id="all-docs">
+        {% for cat in cat_data %}
+        <section class="category-section" id="cat-{{ cat.id }}">
+          <h2>{{ cat.title }}</h2>
+          {% if cat.description %}<p class="category-desc">{{ cat.description }}</p>{% endif %}
+
+          {% if cat.subcategories %}
+            {% for sub in cat.subcategories %}
+            <div class="subcategory-section" id="cat-{{ sub.id }}">
+              <h3>{{ sub.title }}</h3>
+              {% include index-categories-guides.html guides=sub.guides docversion=docversion %}
+            </div>
+            {% endfor %}
+          {% else %}
+            {% include index-categories-guides.html guides=cat.guides docversion=docversion %}
+          {% endif %}
+        </section>
+        {% endfor %}
+      </div>
+    </div>
+  </qs-target>
+</div>

_layouts/documentation.html

@@ -13,8 +13,10 @@
 
 {% assign docversion_index = docversion | replace: '.', '-' %}
 
-{% if site.data.versioned[docversion_index].index %}
-  {% include index-docs.html docversion=docversion %}  
+{% if site.data.versioned[docversion_index].index.categories %}
+  {% include index-categories.html docversion=docversion %}
+{% elsif site.data.versioned[docversion_index].index %}
+  {% include index-docs.html docversion=docversion %}
 {% else %}
   {% assign data_source = "guides-" | append: docversion | replace: '.', '-' %}
   {% include index-guides.html source=data_source docversion=docversion %}