Refactor Pages around the verified pipeline

docs/_includes/header.html

@@ -6,8 +6,10 @@
     </a>
 
     <nav class="site-navigation" aria-label="Primary navigation">
-      <a href="{{ '/#documentation' | relative_url }}">Documentation</a>
-      <a href="{{ '/#cross-engine-benchmarks' | relative_url }}">Benchmarks</a>
+      <a href="{{ '/pipeline/' | relative_url }}">Pipeline</a>
+      <a href="{{ '/worked-example/' | relative_url }}">Worked example</a>
+      <a href="{{ '/reference/' | relative_url }}">Reference</a>
+      <a href="{{ '/evidence/' | relative_url }}">Evidence</a>
       <a href="{{ site.repository_url }}">Repository</a>
     </nav>
   </div>

docs/_includes/narrative-animation.html

@@ -0,0 +1,22 @@
+<figure class="narrative-asset narrative-animation" data-asset-id="{{ include.asset_id | escape }}">
+  <picture>
+    <source
+      media="(prefers-reduced-motion: reduce)"
+      srcset="{{ include.fallback | relative_url }}"
+    >
+    <img
+      src="{{ include.animation | relative_url }}"
+      alt="{{ include.alt | escape }}"
+      width="{{ include.width }}"
+      height="{{ include.height }}"
+      loading="lazy"
+      decoding="async"
+    >
+  </picture>
+  <figcaption>
+    <strong>{{ include.label | escape }}.</strong>
+    {{ include.caption | escape }}
+    <a href="{{ include.contact_sheet | relative_url }}">Open the static contact sheet.</a>
+    <span class="asset-source">Source contract: <code>{{ include.source | escape }}</code>.</span>
+  </figcaption>
+</figure>

docs/_includes/narrative-static.html

@@ -0,0 +1,15 @@
+<figure class="narrative-asset narrative-static" data-asset-id="{{ include.asset_id | escape }}">
+  <img
+    src="{{ include.image | relative_url }}"
+    alt="{{ include.alt | escape }}"
+    width="{{ include.width }}"
+    height="{{ include.height }}"
+    loading="lazy"
+    decoding="async"
+  >
+  <figcaption>
+    <strong>{{ include.label | escape }}.</strong>
+    {{ include.caption | escape }}
+    <span class="asset-source">Source contract: <code>{{ include.source | escape }}</code>.</span>
+  </figcaption>
+</figure>

docs/_layouts/default.html

@@ -15,6 +15,8 @@
   </head>
   <body
     data-page-kind="{{ page.page_kind | default: page.layout | default: 'page' }}"
+    data-page-class="{{ page.page_class | default: 'unclassified' }}"
+    data-component-id="{{ page.component_id }}"
     data-jekyll-environment="{{ jekyll.environment | default: 'production' }}"
   >
     <a class="skip-link" href="#main-content">Skip to content</a>

docs/_layouts/page.html

@@ -3,8 +3,14 @@
 ---
 <article class="article article--reference" data-wang-sections>
   <header class="document-context" data-content-column data-wang-landmark>
+    {% assign catalog_route = '/reference/' %}
+    {% assign catalog_label = 'Reference' %}
+    {% if page.page_class == 'evidence' %}
+      {% assign catalog_route = '/evidence/' %}
+      {% assign catalog_label = 'Evidence' %}
+    {% endif %}
     <nav class="document-breadcrumb" aria-label="Breadcrumb">
-      <a href="{{ '/#documentation' | relative_url }}">Documentation</a>
+      <a href="{{ catalog_route | relative_url }}">{{ catalog_label }}</a>
       <span aria-hidden="true">/</span>
       <span>{{ page.section | escape }}</span>
     </nav>
@@ -37,7 +43,7 @@
   </div>
 
   <nav class="document-return" aria-label="Documentation navigation">
-    <a href="{{ '/#documentation' | relative_url }}">Back to documentation index</a>
+    <a href="{{ catalog_route | relative_url }}">Back to {{ catalog_label | downcase }}</a>
   </nav>
 </article>
 <script type="module" src="{{ '/assets/js/document-toc.js' | relative_url }}"></script>

docs/_layouts/story.html

@@ -0,0 +1,33 @@
+---
+layout: default
+---
+<article class="article article--story" data-wang-sections>
+  <header class="story-context" data-content-column data-wang-landmark>
+    <nav class="document-breadcrumb" aria-label="Breadcrumb">
+      <a href="{{ '/' | relative_url }}">Tiling Foundry</a>
+      {% if page.component_id %}
+        <span aria-hidden="true">/</span>
+        <a href="{{ '/pipeline/' | relative_url }}">Pipeline</a>
+        <span aria-hidden="true">/</span>
+        <span>{{ page.title | escape }}</span>
+      {% else %}
+        <span aria-hidden="true">/</span>
+        <span>{{ page.title | escape }}</span>
+      {% endif %}
+    </nav>
+    <p class="document-description">{{ page.description | escape }}</p>
+  </header>
+
+  <div class="article__body story-body" data-content-column>
+    {{ content }}
+  </div>
+
+  <nav class="document-return" aria-label="Story navigation">
+    {% if page.component_id %}
+      <a href="{{ '/pipeline/' | relative_url }}">Back to the complete pipeline</a>
+    {% else %}
+      <a href="{{ '/' | relative_url }}">Back to the project overview</a>
+    {% endif %}
+  </nav>
+</article>
+<script type="module" src="{{ '/assets/js/document-toc.js' | relative_url }}"></script>

docs/assets/css/site.css

@@ -329,6 +329,62 @@ figure {
   color: var(--ink-strong);
 }
 
+.story-context {
+  max-width: var(--reading-width);
+  margin: 0 auto 2rem;
+  padding-bottom: 1.15rem;
+  border-bottom: 1px solid var(--rule);
+  color: var(--muted);
+  font: 0.68rem/1.5 var(--mono);
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+}
+
+.story-context a {
+  color: var(--ink);
+  text-decoration: none;
+}
+
+.story-actions,
+.pipeline-links {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 0.7rem 1.4rem;
+  padding-left: 0;
+  list-style: none;
+  font: 0.76rem/1.5 var(--mono);
+}
+
+.narrative-asset {
+  width: min(100%, 70rem);
+  margin: 2rem auto;
+  overflow: hidden;
+  border: 1px solid var(--rule-strong);
+  background: var(--black-raised);
+}
+
+.narrative-asset picture,
+.narrative-asset img {
+  display: block;
+  width: 100%;
+  height: auto;
+}
+
+.narrative-asset figcaption {
+  margin: 0;
+  padding: 1rem 1.15rem;
+  border-top: 1px solid var(--rule);
+  color: var(--muted);
+  font: 0.74rem/1.55 var(--mono);
+}
+
+.narrative-asset .asset-source {
+  display: block;
+  margin-top: 0.55rem;
+  color: var(--faint);
+  font-size: 0.68rem;
+}
+
 .article-abstract {
   max-width: 40rem;
   margin: 0;
@@ -389,6 +445,7 @@ samp {
 }
 
 :not(pre) > code {
+  overflow-wrap: anywhere;
   padding: 0.13em 0.35em;
   border: 1px solid #292e30;
   background: #101314;