Simplify the nav template

The old nav system had several drawbacks:

- It tried to "automatically" list all of the specification pages using
  the `order` field of each page, but this didn't work correctly and was
  a pain to maintain. Plus the liquid code was complicated.
- There was no way to customize the link text (always page title) or to
  link to custom URLs (e.g. /provenance instead of /provenance/v0.2).
- The mobile and non-mobile templates were duplicate but slightly
  different, which may lead to bugs in the future.

Now we have an explicit configuration in _data/nav.yml and use the same
template for both mobile and non-mobile nav bars. This should be easier
to maintain.
Signed-off-by: Mark Lodato <lodato@google.com>

docs/_config.yml

@@ -2,17 +2,9 @@ title: SLSA
 description: Supply-chain Levels for Software Artifacts
 copyright_html: Copyright 2021 The Linux Foundation<br>under the terms of the <a href="https://github.com/slsa-framework/slsa/blob/main/LICENSE">Apache License 2.0</a>
 repository: slsa-framework/slsa
-header_pages:
-  - index.md
-  - specifications.md
-  - provenance/v0.2.md # WARNING: This is brittle and will not update as per {{ site.current_provenance_version }}
-  - use-cases.md
-  - get-started.md
-  - community.md
 collections:
   spec:
     layout: specifications
-    sort_by: order
     output: true
 exclude:
   - CNAME
@@ -44,6 +36,7 @@ plugins:
   - jekyll-readme-index
   - jekyll-titles-from-headings
   - jekyll-relative-links
+# WARNING: Remember to update _data/nav.yml as well.
 spec_versions: ['v0.1']
 current_spec_version: "v0.1"
 provenance_versions: ['v0.1', "v0.2"]

docs/_data/nav.yml

+# Pages that show in the navbar at the top.
+- title: Overview
+  url: /
+
+- title: Specifications
+  children:
+
+    - title: Introduction
+      url: /spec/v0.1/index
+
+    - title: Security levels
+      url: /spec/v0.1/levels
+
+    - title: Requirements
+      url: /spec/v0.1/requirements
+
+    - title: Threats
+      url: /spec/v0.1/threats
+
+    - title: FAQ
+      url: /spec/faq
+
+- title: Provenance
+  url: /provenance/v0.2
+
+- title: Use cases
+  url: /use-cases
+
+- title: Get started
+  url: /get-started
+
+- title: Community
+  url: /community

docs/_includes/header.html

@@ -15,9 +15,6 @@
   class="site-header {% if page.url != '/spec/{{ site.current_spec_version }}/' and page.url != {{ site.baseurl }} and page.url != '/' or page.url == '/spec/{{ site.current_spec_version }}/' %} is-specification-markdown{% endif %}">
   <div class="wrapper">
   <div class="py-4 md:py-0 flex items-center justify-between">
-      {%- assign default_paths = site.pages | map: "path" -%}
-      {%- assign page_paths = site.header_pages | default: default_paths -%}
-      {%- assign titles_size = site.pages | map: 'title' | join: '' | size -%}
       <a rel="author" href="{{ "/" | relative_url }}" class="relative logo">
         {% if page.url == '/' %}
           <img src="{{ site.baseurl }}/images/logo.svg" alt="{{site.title}} logo" />
@@ -26,42 +23,8 @@
           <img x-cloak x-show="sticky" src="{{ site.baseurl }}/images/logo.svg" alt="{{site.title}} logo" />
         {% endif%}
       </a>
-      {%- if titles_size > 0 -%}
-        {% include mobile-nav.html paths=page_paths %}
-        <nav class="site-nav">
-          <ul class="list flex justify-center">
-            {%- for path in page_paths -%}
-              {%- assign my_page = site.pages | where: "path", path | first -%}
-              {%- if my_page.title -%}
-              <li class="relative">
-                {%- if my_page.url == '/spec' -%}
-                  {%- assign my_page_url = '' -%}
-                {%- else -%}
-                  {%- assign my_page_url =  my_page.url | relative_url -%}
-                {%- endif -%}
-                  {% if my_page.title == 'Specifications' %}
-                    <a {% if my_page.title == page.title %}class="active page-link text-white flex items-center cursor"{% else %}class="page-link text-white flex items-center cursor"{% endif %}>
-                      <button x-on:click="open = ! open" class="flex items-center">{{ my_page.title | escape }} <div class=" ml-2"><svg width="9" height="9" viewBox="0 0 6 6" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M3.05881 5.064L0.972811 0.906H5.13081L3.05881 5.064Z" fill="white"/>
-                        </svg></div></button>
-                    </a>
-                    {% else %}
-                    <a {% if my_page.title == page.title %}class="active page-link text-white flex items-center"{% else %}class="page-link text-white flex items-center"{% endif %}
-                    href="{{my_page_url}}">
-                      {{ my_page.title | escape }}
-                    </a>
-                  {% endif %}
-                  {% if my_page.title == 'Specifications' %}
-                    <div @click.outside="open = false" x-cloak x-show="open" x-transition class="absolute m-0 p-4 -ml-2 mt-4 bg-white rounded-lg shadow-md dropdown">
-                      {% include specifications-nav.html %}
-                    </div>
-                  {% endif %}
-                  {%- endif -%}
-                </li>
-                {%- endfor -%}
-          </ul>
-        </nav>
-      {%- endif -%}
+      {% include nav.html mobile=true %}
+      {% include nav.html %}
       <div class="ml-4 flex justify-end">
         <button  x-on:click="navOpen = ! navOpen" :class="{ 'active': navOpen === true }" class="mobile-menu-button inline-block md:hidden">
           <span></span>

docs/_includes/mobile-nav.html

-{% if include.paths %}
-<nav :class="{ 'active': navOpen === true }" class="site-nav-mobile">
-    <ul class="list flex flex-col md:flex-row flex-wrap justify-center pt-16 pb-8 px-5">
-      {%- for path in include.paths -%}
-        {%- assign my_page = site.pages | where: "path", path | first -%}
-        {%- if my_page.title -%}
-        <li class="relative w-2/4">
-          {%- if my_page.url == '/spec' -%}
-            {%- assign my_page_url = '' -%}
-          {%- else -%}
-            {%- assign my_page_url =  my_page.url | relative_url -%}
-          {%- endif -%}
-            {% if my_page.title == 'Specifications' %}
-              <a {% if my_page.title == page.title %}class="active page-link text-white flex items-center cursor"{% else %}class="page-link text-white flex items-center cursor"{% endif %}>
-                <button x-on:click="open = ! open" class="flex items-center">{{ my_page.title | escape }} <div class="ml-2"><svg width="9" height="9" viewBox="0 0 6 6" fill="#ffffff" xmlns="http://www.w3.org/2000/svg">
-                  <path d="M3.05881 5.064L0.972811 0.906H5.13081L3.05881 5.064Z" fill="#ffffff"/>
-                  </svg></div></button>
-              </a>
-              {% else %}
-              <a {% if my_page.title == page.title %}class="active page-link text-white flex items-center"{% else %}class="page-link text-white flex items-center"{% endif %}
-              href="{{my_page_url}}">
-                {{ my_page.title | escape }}
-              </a>
-            {% endif %}
-            {% if my_page.title == 'Specifications' %}
-              <div @click.outside="open = false" x-show="open" x-transition class="relative md:absolute m-0 md:py-4 md:bg-white rounded-lg md:shadow-md dropdown">
-                {% include specifications-nav.html %}
-              </div>
-            {% endif %}
-          {%- endif -%}
-        </li>
-      {%- endfor -%}
-    </ul>
-  </nav>
-  {% endif %}
\ No newline at end of file

docs/_includes/nav.html

+{%- if include.mobile -%}
+  {% assign ul_class = "list flex flex-col md:flex-row flex-wrap justify-center pt-16 pb-8 px-5" %}
+  {% assign li_class = "relative w-2/4" %}
+  {% assign button_fill = "#ffffff" %}
+  {% assign div_cloak = "" %}
+  {% assign div_class = "relative md:absolute m-0 md:py-4 md:bg-white rounded-lg md:shadow-md dropdown" %}
+{%- else -%}
+  {% assign ul_class = "list flex justify-center" %}
+  {% assign li_class = "relative" %}
+  {% assign button_fill = "none" %}
+  {% assign div_cloak = "x-cloak" %}
+  {% assign div_class = "absolute m-0 p-4 -ml-2 mt-4 bg-white rounded-lg shadow-md dropdown" %}
+{%- endif -%}
+<nav {% if include.mobile -%}
+    :class="{ 'active': navOpen === true }" class="site-nav-mobile"
+    {%- else -%}
+    class="site-nav"
+    {%- endif -%}>
+  <ul class="{{ul_class}}">
+    {%- for item in site.data.nav -%}
+      <li class="{{li_class}}">
+        {%- if item.url -%}
+          <a class="{% if item.url == page.url %}active{% endif %} page-link text-white flex items-center" href="{{ item.url | relative_url }}">
+            {{ item.title | escape }}
+          </a>
+        {%- else -%}
+          {% comment %}TODO: add "active" class if on a child page{% endcomment %}
+          <a class="page-link text-white flex items-center cursor">
+            <button x-on:click="open = ! open" class="flex items-center">{{ item.title | escape }} <div class=" ml-2"><svg width="9" height="9" viewBox="0 0 6 6" fill="{{button_fill}}" xmlns="http://www.w3.org/2000/svg">
+              <path d="M3.05881 5.064L0.972811 0.906H5.13081L3.05881 5.064Z" fill="white"/>
+              </svg></div></button>
+          </a>
+          <div @click.outside="open = false" {{div_cloak}} x-show="open" x-transition class="{{div_class}}">
+            <ul>
+              {%- for subitem in item.children -%}
+                <li>
+                  <a class="text-white md:text-black" href="{{ subitem.url | relative_url }}">
+                    {{ subitem.title | escape }}
+                  </a>
+                </li>
+              {%- endfor %}
+            </ul>
+          </div>
+        {%- endif -%}
+      </li>
+    {%- endfor -%}
+  </ul>
+</nav>

docs/_includes/specifications-nav.html

-<ul>
-{% for collection in site.collections %}
-    {% if collection.label == 'spec' %}
-        {% for item in site[collection.label] %}
-        {% if item.path contains site.current_spec_version %}
-        <li>
-            <a class="text-white md:text-black" href="{{ site.baseurl }}/{{item.path | replace: "_", "" | replace: ".md", "" }}">
-            {{ item.title }}
-            </a>
-        </li>
-        {% endif %}
-        {% endfor %}
-    {% endif%}
-{% endfor %}
-    <li>
-        <a class="text-white md:text-black" href="{{ site.baseurl }}/{{ "_spec" | replace: "_", "" }}/faq">
-        FAQ
-        </a>
-    </li>
-</ul>

docs/_spec/faq.md

 ---
 title: Frequently Asked Questions
-order: 5
 layout: specifications
 description: Questions and more information
 ---

docs/_spec/index.md

 ---
 layout: redirect
 redirect_to_url: v0.1 # WARNING: This is brittle and will not update as per {{ site.current_spec_version }}
-order: 0
 ---

docs/_spec/v0.1/index.md

@@ -2,7 +2,6 @@
 title: Introduction
 layout: standard
 hero_text: SLSA is a set of standards and technical controls you can adopt to improve artifact integrity, and build towards completely resilient systems. It’s not a single tool, but a step-by-step outline to prevent artifacts being tampered with and tampered artifacts from being used, and at the higher levels, hardening up the platforms that make up a supply chain. These requirements are explained below, along with the rest of the essential specifications.
-order: 1
 version: 0.1
 stages:
     - 1:

docs/_spec/v0.1/levels.md

 ---
 title: Security levels
-order: 2
 version: 0.1
 layout: specifications
 description: Start here for the level breakdowns

docs/_spec/v0.1/requirements.md

 ---
 title: Requirements
-order: 3
 version: 0.1
 layout: specifications
 description: The checks and measures for each level

docs/_spec/v0.1/threats.md

 ---
 title: Threats
-order: 4
 version: 0.1
 layout: specifications
 description: Specific supply chain attacks and how SLSA helps

docs/community.md

@@ -2,7 +2,6 @@
 title: Community
 layout: standard
 hero_text: There’s an active community of members, contributors and collaborators behind the SLSA framework. We’re drawn together by the shared goals of improving software supply chain security and codifying best practices for development, deployment and governance, all collaborating on an objective framework that works for open source projects and organizations, influences policy and regulations, empowers engineers and builds for the future.
-order: 0
 ---
 <section class="section bg-white flex flex-col justify-center items-center">
     <div class="wrapper inner w-full">

docs/get-started.md

@@ -2,7 +2,6 @@
 title: Get started
 layout: standard
 hero_text: If you’re looking to jump straight in and try SLSA, here’s a quick start guide for the steps to take to reach the first SLSA level. Level 1 ensures that you’re setting up the foundation of trust in a system and that all your applications are generating appropriate provenance data. It also sets a baseline to achieve higher SLSA compliance later, which we explain in detail below.
-order: 0
 ---
 <section class="section bg-pastel-green flex justify-center items-center">
     <div class="wrapper inner w-full">

docs/provenance/v0.1.md

@@ -2,7 +2,6 @@
 title: Provenance
 layout: standard
 hero_text: To trace software back to the source and define the moving parts in a complex supply chain, provenance needs to be there from the very beginning. It’s the verifiable information about software artifacts describing where, when and how something was produced. For higher SLSA levels and more resilient integrity guarantees, provenance requirements are stricter and need a deeper, more technical understanding of the predicate.
-order: 0
 ---
 <details class="mt-12">
 <summary>Note about 0.x versions</summary>

docs/provenance/v0.2.md

@@ -2,7 +2,6 @@
 title: Provenance
 layout: standard
 hero_text: To trace software back to the source and define the moving parts in a complex supply chain, provenance needs to be there from the very beginning. It’s the verifiable information about software artifacts describing where, when and how something was produced. For higher SLSA levels and more resilient integrity guarantees, provenance requirements are stricter and need a deeper, more technical understanding of the predicate.
-order: 0
 ---
 <details class="mt-12">
 <summary>Note about 0.x versions</summary>

docs/specifications.md

----
-title: Specifications
-order: 0
----
-## Specs landing

docs/use-cases.md

@@ -2,7 +2,6 @@
 title: Use cases
 layout: standard
 hero_text: Here’s what SLSA looks like in practice, typical cases to explore and break down how compliance can provide protection. Whether you’re a developer working on a project or part of an enterprise, SLSA can be helpful both for securing your supply chain and clarifying existing tools and processes. The case studies expand even further, and are a work in progress as SLSA gets adopted in the industry.
-order: 0
 ---
 <section class="section bg-pastel-green flex justify-center items-center">
     <div class="wrapper inner w-full">