Commit e56c3889 authored by Mark Lodato's avatar Mark Lodato
Browse files

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: default avatarMark Lodato <lodato@google.com>
parent b2c45aea
......@@ -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"]
......
# 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
......@@ -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>
......
{% 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
{%- 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>
<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>
---
title: Frequently Asked Questions
order: 5
layout: specifications
description: Questions and more information
---
......
---
layout: redirect
redirect_to_url: v0.1 # WARNING: This is brittle and will not update as per {{ site.current_spec_version }}
order: 0
---
......@@ -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:
......
---
title: Security levels
order: 2
version: 0.1
layout: specifications
description: Start here for the level breakdowns
......
---
title: Requirements
order: 3
version: 0.1
layout: specifications
description: The checks and measures for each level
......
---
title: Threats
order: 4
version: 0.1
layout: specifications
description: Specific supply chain attacks and how SLSA helps
......
......@@ -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">
......
......@@ -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">
......
......@@ -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>
......
......@@ -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>
......
---
title: Specifications
order: 0
---
## Specs landing
......@@ -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">
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment