feat: add static mode

.gitignore

@@ -6,3 +6,4 @@
 .DS_Store
 node_modules
 server/data
+server/static

client/package.json

@@ -15,7 +15,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^2.0.8",
     "@openlab/deconf-shared": "^3.5.0",
-    "@openlab/deconf-ui-toolkit": "^2.28.1",
+    "@openlab/deconf-ui-toolkit": "^2.29.0",
     "bulma": "^0.9.4",
     "copy-to-clipboard": "^3.3.2",
     "core-js": "^3.26.0",

client/public/config.js

@@ -9,3 +9,10 @@ window.CONFIG = {
   JWT_ISSUER: 'mozfest-localhost',
   // DISABLE_SOCKETS: false,
 }
+
+//
+// Static mode
+//
+window.CONFIG.SERVER_URL = 'http://localhost:3000/static/schedule/'
+window.CONFIG.STATIC_BUILD = true
+window.CONFIG.DISABLE_SOCKETS = true

client/src/lib/api.ts

@@ -1,7 +1,14 @@
+import { EnvRecord } from '@/plugins/env-plugin'
 import {
   PageFlag,
   ScheduleRecord as DeconfScheduleRecord,
+  Session,
 } from '@openlab/deconf-shared'
+import {
+  DeconfApiClient,
+  DeconfStaticFiles,
+  StaticDeconfApiClient,
+} from '@openlab/deconf-ui-toolkit'
 
 export interface MozConferenceConfig {
   atrium?: PageFlag
@@ -40,3 +47,35 @@ export interface MozConferenceConfig {
 export type ScheduleRecord = Omit<DeconfScheduleRecord, 'settings'> & {
   settings: MozConferenceConfig
 }
+
+interface MozApiClient {
+  getWhatsOn(): Promise<Session[]>
+}
+
+export function pickApi(env: EnvRecord) {
+  return env.STATIC_BUILD
+    ? new StaticApiClient(env.SERVER_URL.href)
+    : new LiveApiClient(env.SERVER_URL.href)
+}
+
+type MozStaticFiles = DeconfStaticFiles & {
+  'whats-on.json': Session[]
+}
+
+export class LiveApiClient extends DeconfApiClient implements MozApiClient {
+  async getWhatsOn(): Promise<Session[]> {
+    const response = await this.fetchJson<{ sessions: Session[] }>(
+      'schedule/whats-on'
+    )
+    return response?.sessions ?? []
+  }
+}
+
+export class StaticApiClient
+  extends StaticDeconfApiClient<MozStaticFiles>
+  implements MozApiClient
+{
+  getWhatsOn(): Promise<Session[]> {
+    return this.getStaticFile('whats-on.json')
+  }
+}

client/src/plugins/env-plugin.ts

@@ -2,21 +2,20 @@
 
 import _Vue from 'vue'
 
+// TODO: replace `DISABLE_SOCKETS` with `SOCKETS_URL`
+
 export interface EnvRecord {
-  readonly SELF_URL: string
-  readonly SERVER_URL: string
+  readonly SELF_URL: URL
+  readonly SERVER_URL: URL
   readonly BUILD_NAME: string | null
   readonly GA_TOKEN: string | null
   readonly JWT_ISSUER: string | null
   readonly DISABLE_SOCKETS: boolean
+  readonly STATIC_BUILD: boolean
 }
 
 // window.CONFIG is from public/config.js
 
-function normaliseUrl(input: string) {
-  return input.replace(/\/*$/, '/')
-}
-
 interface WindowWithConfig {
   CONFIG?: Record<string, string | undefined>
 }
@@ -28,15 +27,17 @@ const {
   GA_TOKEN = null,
   JWT_ISSUER = 'deconf-app',
   DISABLE_SOCKETS = false,
+  STATIC_BUILD = false,
 } = (window as WindowWithConfig).CONFIG || {}
 
-export const env: EnvRecord = Object.seal({
-  SELF_URL: normaliseUrl(SELF_URL),
-  SERVER_URL: normaliseUrl(SERVER_URL),
+export const env = Object.seal<EnvRecord>({
+  SELF_URL: new URL(SELF_URL),
+  SERVER_URL: new URL(SERVER_URL),
   BUILD_NAME,
   GA_TOKEN,
   JWT_ISSUER,
   DISABLE_SOCKETS: Boolean(DISABLE_SOCKETS),
+  STATIC_BUILD: Boolean(STATIC_BUILD),
 })
 
 //

client/src/plugins/socketio-plugin.ts

@@ -19,7 +19,7 @@ export class SocketIoPlugin {
     this.sharedSocket?.emit('deauth')
   }
 
-  constructor(serverUrl: string) {
+  constructor(serverUrl: URL) {
     // Concat the path onto the server url, e.g.
     // "/api/socket.io"
     // "/socket.io"

client/src/store/api-module.ts

@@ -4,19 +4,19 @@ import {
   createApiStoreActions,
   createApiStoreModule,
   decodeJwt,
-  DeconfApiClient,
   FullAuthToken,
 } from '@openlab/deconf-ui-toolkit'
 import { Session } from '@openlab/deconf-shared'
 import { env } from '@/plugins/env-plugin'
 
 import { SocketIoPlugin } from '@/plugins/socketio-plugin'
+import { pickApi } from '@/lib/api'
 
 // TODO: work out how to filter themes again
 // import { StorageKey, themeAllowlist } from '@/lib/module'
 
 export function apiModule(): ApiStoreModule {
-  const apiClient = new DeconfApiClient(env.SERVER_URL)
+  const apiClient = pickApi(env)
 
   const baseActions = createApiStoreActions(apiClient)
 
@@ -60,11 +60,7 @@ export function apiModule(): ApiStoreModule {
       //   return data !== null
       // },
       async fetchWhatsOn() {
-        const response = await apiClient.fetchJson<{ sessions: Session[] }>(
-          'schedule/whats-on'
-        )
-
-        return response?.sessions ?? []
+        return apiClient.getWhatsOn()
       },
     },
   }