feat: show downtime news if backend is down

Fixes #436

Author: arildm

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Add loading indicators to global filter selectors [#429](https://github.com/spraakbanken/korp-frontend/issues/429)
 - Corpus selector: expand partially selected folders by default [#431](https://github.com/spraakbanken/korp-frontend/issues/431)
+- Show downtime announcements if backend is down [#436](https://github.com/spraakbanken/korp-frontend/issues/436)
 - Statistics: link cells to corpus-filtered search [#455](https://github.com/spraakbanken/korp-frontend/issues/455)
 - More accurate headers in KWIC CSV download
 

app/scripts/main.ts

@@ -8,6 +8,7 @@ import korpLogo from "../img/korp.svg"
 import korpFail from "../img/korp_fail.svg"
 import { findAuthModule } from "@/auth/init"
 import { initAuth, setAuthModule } from "@/auth/auth"
+import { createMaintenanceNewsElement } from "./services/maintenance-news"
 
 const createSplashScreen = () => {
     const splash = document.getElementById("preload")
@@ -16,6 +17,17 @@ const createSplashScreen = () => {
         return
     }
     splash.innerHTML = html`<img class="animate-pulse" height="300" width="300" src="${korpLogo}" />`
+
+    // Add maintenance news if loading is slow.
+    const newsTimeout = 5000
+    setTimeout(async () => {
+        const splash = document.getElementById("preload")
+        // Abort if app has continued loading
+        if (!splash) return
+        const html = await createMaintenanceNewsElement()
+        const element = $(html).get(0)
+        if (element) splash.append(element)
+    }, newsTimeout)
 }
 
 function initApp() {

app/scripts/services/maintenance-news.ts

@@ -0,0 +1,20 @@
+import { html } from "@/util"
+import { fetchNews } from "./news-service"
+import { locObj } from "@/i18n"
+
+/** Show simple HTML for maintenance-tagged news items. */
+export async function createMaintenanceNewsElement(): Promise<string> {
+    const allItems = await fetchNews()
+    const items = allItems.filter((item) => item.tags?.includes("maintenance"))
+    if (!items.length) return ""
+
+    const htmlItems = items.map(
+        (item) => html`
+            <article>
+                <heading><h3>${locObj(item.title)}</h3></heading>
+                <div>${locObj(item.body)}</div>
+            </article>
+        `,
+    )
+    return html`<section class="maintenance-news">${htmlItems.join("\n")}</section>`
+}

app/scripts/services/news-service.ts

@@ -8,7 +8,8 @@ export function isEnabled(): boolean {
 }
 
 export async function fetchNews(): Promise<NewsItem[]> {
-    const response = await fetch(settings.news_url!)
+    if (!settings.news_url) return []
+    const response = await fetch(settings.news_url)
     const feedYaml: string = await response.text()
 
     const itemsRaw = Yaml.load(feedYaml) as NewsItemRaw[]
@@ -45,4 +46,5 @@ export type NewsItem = {
     created: string
     title: LangString
     body: LangString
+    tags?: string[]
 }

app/styles/styles.scss

@@ -1854,10 +1854,16 @@ line.tick {
 
 #preload {
     display: flex;
+    flex-direction: column;
     justify-content: center;
+    align-items: center;
     height: 100vh;
 }
 
+.maintenance-news {
+    width: 40em;
+}
+
 // reading mode
 .word.selected {
     color: #fff !important;