feat: agenda fallback link to plaintext version (ietf-tools#4663)

Author: NGPixel

client/App.vue

@@ -4,6 +4,8 @@ n-theme
     .app-error(v-if='siteStore.criticalError')
       i.bi.bi-x-octagon-fill.me-2
       span {{siteStore.criticalError}}
+    .app-error-link(v-if='siteStore.criticalError && siteStore.criticalErrorLink')
+      a(:href='siteStore.criticalErrorLink') {{siteStore.criticalErrorLinkText}} #[i.bi.bi-arrow-right-square-fill.ms-2]
     .app-container(ref='appContainer')
       router-view.meeting
 </template>
@@ -56,4 +58,23 @@ onBeforeUnmount(() => {
   padding: 1rem;
   text-align: center;
 }
+
+.app-error-link {
+  background-color: lighten($red-100, 5%);
+  border-radius: 0 0 5px 5px;
+  color: #FFF;
+  font-weight: 500;
+  font-size: .9em;
+  padding: .7rem 1rem;
+  text-align: center;
+
+  a {
+    color: $red-700;
+    text-decoration: none;
+
+    &:hover, &:focus {
+      text-decoration: underline;
+    }
+  }
+}
 </style>

client/agenda/store.js

@@ -183,7 +183,9 @@ export const useAgendaStore = defineStore('agenda', {
         console.error(err)
         const siteStore = useSiteStore()
         siteStore.$patch({
-          criticalError: `Failed to load this meeting: ${err.message}`
+          criticalError: `Failed to load this meeting: ${err.message}`,
+          criticalErrorLink: meetingNumber ? `/meeting/${meetingNumber}/agenda.txt` : `/meeting/agenda.txt`,
+          criticalErrorLinkText: 'Switch to text-only agenda version'
         })
       }
 

client/shared/store.js

@@ -3,6 +3,8 @@ import { defineStore } from 'pinia'
 export const useSiteStore = defineStore('site', {
   state: () => ({
     criticalError: null,
+    criticalErrorLink: null,
+    criticalErrorLinkText: null,
     isMobile: /Mobi/i.test(navigator.userAgent),
     viewport: Math.round(window.innerWidth)
   })

ietf/templates/meeting/agenda.html

@@ -65,9 +65,34 @@
     color: #999;
     z-index: 2000000000;
 }
+
+#app-loading-footer {
+    position: absolute;
+    text-align: center;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    z-index: 1000000000;
+}
+
+#app-loading-footer > a {
+    text-decoration: none;
+    font-weight: 500;
+    font-size: .9em;
+    color: #0aa2c0;
+    display: inline-block;
+    padding: 8px 16px;
+    background-color: #F9F9F9;
+    border-radius: 5px;
+    margin-bottom: 12px;
+}
 {% endblock %}
 {% block content %}
     {% origin %}
     <div id="app"></div>
-    <div id="app-loading"></div>
+    <div id="app-loading">
+        <div id="app-loading-footer">
+            <a href="/meeting/{{ meetingData.meetingNumber }}/agenda.txt">Switch to text-only version &#11166;</a>
+        </div>
+    </div>
 {% endblock %}