Add ability to hide components which set a 'noversion' version. (quarkiverse#36)

Author: holly-cummins

preview-src/ui-model.yml

@@ -10,11 +10,11 @@ site:
     title: &component_title Index
     url: '#'
     versions:
-    - &latest_version_abc
+    - &component_version
       url: '#'
-      version: 'index'
-      displayVersion: 'index'
-    latestVersion: *latest_version_abc
+      version: 'noversion'
+      displayVersion: 'noversion'
+    latest: *component_version
   - name: xyz
     title: Project NotReally
   - name: xyz
@@ -25,8 +25,7 @@ site:
       url: /xyz/6.0/index.html
       version: '6.0'
       displayVersion: '6.0'
-    - &component_version
-      title: *component_title
+    - title: *component_title
       url: '#'
       version: 'dev'
       displayVersion: 'dev'
@@ -36,7 +35,7 @@ site:
     - url: '#'
       version: '5.0'
       displayVersion: '5.0'
-    latestVersion: *latest_version_xyz
+    latest: *latest_version_xyz
   - name: '123'
     title: Project 123
     url: '#'
@@ -51,15 +50,15 @@ site:
     - url: '#'
       version: '2.0'
       displayVersion: '2.0'
-    latestVersion: *latest_version_123
+    latest: *latest_version_123
 page:
   url: *home_url
   home: true
   title: Minecraft Observability
   component: *component
   componentVersion: *component_version
-  version: 'dev'
-  displayVersion: 'dev'
+  version: 'noversion'
+  displayVersion: 'noversion'
   module: ROOT
   relativeSrcPath: index.adoc
   editUrl: http://example.com/project-xyz/blob/main/index.adoc

src/css/toolbar.css

@@ -34,6 +34,10 @@
   }
 }
 
+.toolbar-padder {
+  flex-shrink: 0;
+}
+
 .nav-toggle.is-active {
   background-image: url(../img/back.svg);
   background-size: 41.5%;

src/partials/nav-explore.hbs

@@ -1,24 +1,31 @@
 <div class="nav-panel-explore{{#unless page.navigation}} is-active{{/unless}}" data-panel="explore">
   {{#if page.component}}
-  <div class="context">
-    <span class="title">{{page.component.title}}</span>
-    <span class="version">{{page.componentVersion.displayVersion}}</span>
-  </div>
+    {{#if (eq "noversion" ./page.componentVersion.version )}}
+        <!--  placeholder toolbar to align with main toolbar-->
+        <div class="toolbar toolbar-padder" style="position: static"></div>
+      {{ else }}
+        <div class="context">
+          <span class="title">{{page.component.title}}</span>
+          <span class="version">{{page.componentVersion.displayVersion}}</span>
+        </div>
+    {{/if}}
   {{/if}}
   <ul class="components">
     {{#each site.components}}
-    <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
-      <a class="title" href="{{{relativize ./url}}}">{{{./title}}}</a>
-      <ul class="versions">
-        {{#each ./versions}}
-        <li class="version
-          {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
-          {{~#if (eq this ../latest)}} is-latest{{/if}}">
-          <a href="{{{relativize ./url}}}">{{./displayVersion}}</a>
-        </li>
-        {{/each}}
-      </ul>
-    </li>
+      {{#unless (eq "noversion" ./latest.version)}}
+        <li class="component{{#if (eq this @root.page.component)}} is-current{{/if}}">
+        <a class="title" href="{{{relativize ./url}}}">{{{./title}}}</a>
+        <ul class="versions">
+          {{#each ./versions}}
+          <li class="version
+            {{~#if (and (eq .. @root.page.component) (eq this @root.page.componentVersion))}} is-current{{/if~}}
+            {{~#if (eq this ../latest)}} is-latest{{/if}}">
+            <a href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+          </li>
+          {{/each}}
+        </ul>
+      </li>
+      {{/unless}}
     {{/each}}
   </ul>
 </div>

src/partials/page-versions.hbs

@@ -1,12 +1,14 @@
 {{#with page.versions}}
 <div class="page-versions">
+  {{#unless (eq "noversion" @root.page.componentVersion.displayVersion )}}
   <button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
   <div class="version-menu">
     {{#each this}}
-    <a class="version
-      {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
-      {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+        <a class="version
+          {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
+          {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
     {{/each}}
   </div>
+  {{/unless}}
 </div>
 {{/with}}