filadelfia_archive: Fix header

filadelfia_archive: Fix mobile experience a bit, make it at least usable.
filadelfia_archive: Rename website
2023-12-06 05:06:01 +00:00 · 2023-12-06 04:54:37 +00:00 · 2023-12-05 23:01:48 +00:00 · 2023-12-05 22:57:59 +00:00 · 2023-11-30 04:31:01 +00:00 · 2023-11-30 04:29:41 +00:00
58 changed files with 1885 additions and 793 deletions
--- a/base/article/routes.mjs
+++ b/base/article/routes.mjs
@ -77,6 +77,7 @@ export default class ArticleRoutes {
      params = params.concat(mediaToDatabase(banner, body.remove_banner === 'true'))
      params = params.concat(mediaToDatabase(media, body.remove_media === 'true'))
    }
+
    let res = await ctx.db.safeCallProc('article_auth_get_update_create', params)

    ctx.body = this.private_getUpdateArticle_resOutput(res)
--- a/base/config.mjs
+++ b/base/config.mjs
@ -53,6 +53,7 @@ nconf.defaults({
    "iss": "dev",
    "path": "https://media.nfp.is/media/resize",
    "filePath": "https://media.nfp.is/media",
+    "directFilePath": "https://media.nfp.is/media/noprefix",
    "removePath": "https://media.nfp.is/media/",
    "preview": {
      "out": "base64",
--- a/base/db.mjs
+++ b/base/db.mjs
@ -33,7 +33,10 @@ export function initPool(core, config) {
          if (err.lineNumber && err.procName) {
            message = `Error at ${err.procName}:${err.lineNumber} => ${message}`
          }
-          throw new HttpErrorInternal(message, err)
+          throw new HttpErrorInternal(message, err, !err.lineNumber ? {
+            name,
+            params
+          } : null)
        })
    },
    promises: pool.promises,
--- a/base/error.mjs
+++ b/base/error.mjs
@ -1,7 +1,7 @@
 import { HttpError } from 'flaska'

 export class HttpErrorInternal extends HttpError {
-  constructor(message, inner) {
+  constructor(message, inner, extra) {
    super(500, message);

    Error.captureStackTrace(this, HttpError);
@ -10,5 +10,6 @@ export class HttpErrorInternal extends HttpError {
    proto.name = 'HttpErrorInternal';

    this.inner = inner
+    this.extra = extra
  }
 }
--- a/base/media/upload.mjs
+++ b/base/media/upload.mjs
@ -15,8 +15,6 @@ export function uploadMedia(file) {
    }
  }

-  console.log(media)
-
  let body = {}

  if (media.preview) {
--- a/base/media/util.mjs
+++ b/base/media/util.mjs
@ -5,9 +5,9 @@ export function mediaToDatabase(media, removeFlag) {
      media.type,
      media.path,
      media.size,
-      media.preview.base64,
-      media.sizes.small.avif.path.replace(/_small\.avif$/, ''),
-      JSON.stringify(media.sizes),
+      media.preview?.base64 || null,
+      media.sizes?.small?.avif?.path?.replace(/_small\.avif$/, '') || null,
+      JSON.stringify(media.sizes || {}),
      removeFlag ? 1 : 0,
    ]
  } else {
--- a/base/server.mjs
+++ b/base/server.mjs
@ -54,6 +54,9 @@ export default class Server {
        ctx.log.warn(err.message)
      } else {
        ctx.log.error(err.inner || err)
+        if (err.extra) {
+          ctx.log.error({ extra: err.extra }, 'Database parameters')
+        }
        ctx.status = 500
      }
      ctx.body = {
--- a/base/util.mjs
+++ b/base/util.mjs
@ -23,11 +23,11 @@ export function decode(base64StringUrlSafe) {
 export function parseMediaAndBanner(item) {
  if (item.banner_path) {
    item.banner_path = 'https://cdn.nfp.is' + item.banner_path
-    item.banner_alt_prefix = 'https://cdn.nfp.is' + item.banner_alt_prefix
+    item.banner_alt_prefix = 'https://cdn.nfp.is' + (item.banner_alt_prefix || '')
  }
  if (item.media_path) {
    item.media_path = 'https://cdn.nfp.is' + item.media_path
-    item.media_alt_prefix = 'https://cdn.nfp.is' + item.media_alt_prefix
+    item.media_alt_prefix = 'https://cdn.nfp.is' + (item.media_alt_prefix || '')
  }
 }

--- a/filadelfia_archive/.npmrc
+++ b/filadelfia_archive/.npmrc
--- a/filadelfia_archive/api/article/routes.mjs
+++ b/filadelfia_archive/api/article/routes.mjs
@ -0,0 +1,52 @@
+import config from '../../base/config.mjs'
+import Client from '../../base/media/client.mjs'
+import OriginalArticleRoutes from '../../base/article/routes.mjs'
+import { deleteFile, uploadFile } from '../../base/media/upload.mjs'
+import { parseVideos, parseVideo } from './util.mjs'
+import { RankLevels } from '../../base/authentication/security.mjs'
+
+export default class ArticleRoutes extends OriginalArticleRoutes {
+  constructor(opts = {}) {
+    opts.requireAuth = true
+    super(opts)
+
+    Object.assign(this, {
+      uploadFile: uploadFile,
+      deleteFile: deleteFile,
+    })
+  }
+
+  register(server) {
+    server.flaska.get('/api/articles', this.getVideos.bind(this))
+    server.flaska.get('/api/articles/:path', this.getArticle.bind(this))
+    server.flaska.put('/api/auth/articles/:id', [server.authenticate(), server.jsonHandler()], this.updateCreateArticle.bind(this))
+    server.flaska.get('/api/auth/uploadToken', server.authenticate(RankLevels.Admin), this.getUploadToken.bind(this))
+    server.flaska.delete('/api/auth/articles/:id', server.authenticate(RankLevels.Admin), this.auth_removeSingleArticle.bind(this))
+  }
+
+  /** GET: /api/auth/articles */
+  async getVideos(ctx) {
+    let res = await ctx.db.safeCallProc('filadelfia_archive.article_get_all', [])
+
+    ctx.body = {
+      videos: parseVideos(res.results[0]),
+    }
+  }
+
+  /** GET: /api/auth/uploadToken */
+  async getUploadToken(ctx) {
+    const media = config.get('media')
+
+    ctx.body = {
+      token: Client.createJwt({ iss: media.iss }, media.secret),
+      path: config.get('media:directFilePath'),
+      resize: config.get('media:path'),
+      delete: config.get('media:removePath'),
+    }
+  }
+
+  /** PUT: /api/auth/articles/:id */
+  async updateCreateArticle(ctx) {
+    return this.private_getUpdateArticle(ctx, ctx.req.body, ctx.req.body.banner, ctx.req.body.media)
+  }
+}
--- a/filadelfia_archive/api/article/util.mjs
+++ b/filadelfia_archive/api/article/util.mjs
@ -12,5 +12,8 @@ export function parseVideo(video) {
    return null
  }
  parseMediaAndBanner(video)
+  video.metadata = JSON.parse(video.metadata || '{}')
+  delete video.banner_alt_prefix
+  delete video.media_alt_prefix
  return video
 }
--- a/filadelfia_archive/api/serve.mjs
+++ b/filadelfia_archive/api/serve.mjs
--- a/filadelfia_archive/api/server.mjs
+++ b/filadelfia_archive/api/server.mjs
@ -3,19 +3,19 @@ import Parent from '../base/server.mjs'
 import StaticRoutes from '../base/static_routes.mjs'
 import ServeHandler from './serve.mjs'
 import AuthenticationRoutes from '../base/authentication/routes.mjs'
-import VideoRoutes from './video/routes.mjs'
+import ArticleRoutes from './article/routes.mjs'

 export default class Server extends Parent {
  init() {
    super.init()
    let localUtil = new this.core.sc.Util(import.meta.url)

-    delete this.flaskaOptions.appendHeaders['Content-Security-Policy']
+    this.flaskaOptions.appendHeaders['Content-Security-Policy'] = `default-src 'self'; style-src 'self' 'unsafe-inline'; img-src * data: blob:; font-src 'self' data:; object-src 'none'; frame-ancestors 'none'; connect-src 'self' https://media.nfp.is/; media-src 'self' https://cdn.nfp.is/`,
    this.flaskaOptions.nonce = []
    this.routes = {
      static: new StaticRoutes(),
      auth: new AuthenticationRoutes(),
-      videos: new VideoRoutes(),
+      article: new ArticleRoutes(),
    }
    this.routes.serve = new ServeHandler({
      root: localUtil.getPathFromRoot('../public'),
--- a/filadelfia_archive/app/api.js
+++ b/filadelfia_archive/app/api.js
@ -0,0 +1,284 @@
+const Authentication = require('./authentication')
+const lang = require('./lang')
+
+function safeParseReponse(str, status, url) {
+  if (status === 0) {
+    return new Error(lang.api_down)
+  }
+  if (str.slice(0, 9) === '<!doctype') {
+    if (status === 500) {
+      return new Error('Server is temporarily down, try again later.')
+    }
+    return new Error('Expected JSON but got HTML (' + status + ': ' + url.split('?')[0] + ')')
+  }
+  if (!str) {
+    return {}
+  }
+  try {
+    return JSON.parse(str)
+  } catch (err) {
+    return new Error('Unexpected non-JSON response: ' + err.message)
+  }
+}
+
+let requests = new Set()
+let requestIndex = 0
+
+function clearLoading(request) {
+  requests.delete(request)
+  if (!requests.size) {
+    api.loading = false
+    window.requestAnimationFrame(m.redraw.bind(m))
+  }
+}
+
+const api = {
+  loading: false,
+  sendRequest: function(options, isPagination) {
+    let request = requestIndex++
+    requests.add(request)
+    api.loading = true
+    let token = Authentication.getToken()
+    let pagination = isPagination
+  
+    if (token) {
+      options.headers = options.headers || {}
+      options.headers['Authorization'] = 'Bearer ' + token
+    }
+  
+    options.extract = function(xhr) {
+      let out = safeParseReponse(xhr.responseText, xhr.status, this.url)
+
+      if (out instanceof Error) {
+        throw out
+      }
+      if (xhr.status >= 300) {
+        if (out.message) {
+          throw out
+        }
+        console.error('Got error ' + xhr.status + ' but no error message:', out)
+        throw new Error('Unknown or empty response from server.')
+      }
+      if (pagination) {
+        let headers = {}
+  
+        xhr.getAllResponseHeaders().split('\r\n').forEach(function(item) {
+          let splitted = item.split(': ')
+          headers[splitted[0]] = splitted[1]
+        })
+
+        out = {
+          headers: headers || {},
+          data: out,
+        }
+      }
+      return out
+    }
+
+    return m.request(options)
+      .then(function(res) {
+        clearLoading(request)
+        return res
+      })
+      .catch(function (error) {
+        clearLoading(request)
+        window.requestAnimationFrame(m.redraw.bind(m))
+        if (error.status === 403) {
+          Authentication.clearToken()
+          m.route.set('/', { redirect: m.route.get() })
+        }
+        if (error.response && error.response.status) {
+          return Promise.reject(error.response)
+        }
+        return Promise.reject(error)
+      })
+  },
+
+  uploadBanner: function(bannerFile, token, reporter) {
+    let request = requestIndex++
+    requests.add(request)
+    api.loading = true
+
+    var report = reporter || function() {}
+    var data = new FormData()
+    data.append('file', bannerFile)
+    /*data.append('preview', JSON.stringify({
+      "out": "base64",
+      "format": "avif",
+      "resize": {
+        "width": 360,
+        "height": 203,
+        "fit": "cover",
+        "withoutEnlargement": true,
+        "kernel": "mitchell"
+      },
+      "avif": {
+        "quality": 40,
+        "effort": 9
+      }
+    }))*/
+    data.append('medium', JSON.stringify({
+      "format": "avif",
+      "resize": {
+        "width": 1280,
+        "height": 720,
+        "fit": "cover",
+        "withoutEnlargement": true,
+        "kernel": "mitchell"
+      },
+      "avif": {
+        "quality": 75,
+        "effort": 3
+      }
+    }))
+
+    report(lang.api_banner_upload)
+
+    return api.sendRequest({
+      method: 'POST',
+      url: token.resize + '?token=' + token.token,
+      body: data,
+    })
+    .then(async (banner) => {
+      let preview = null
+      let quality = 60
+      while (!preview && quality > 10) {
+        report(lang.format(lang.api_banner_generate, quality))
+        let check = await api.sendRequest({
+          method: 'POST',
+          url: token.resize + '/' + banner.filename + '?token=' + token.token,
+          body: {
+            "preview": {
+              "out": "base64",
+              "format": "avif",
+              "resize": {
+                "width": 360,
+                "height": 203,
+                "fit": "cover",
+                "withoutEnlargement": true,
+                "kernel": "mitchell"
+              },
+              "avif": {
+                "quality": quality,
+                "effort": 9
+              }
+            },
+          },
+        })
+
+        if (check.preview.base64.length < 8000) {
+          preview = check.preview.base64
+        } else {
+          quality -= 5
+        }
+      }
+      report(null)
+
+      api.sendRequest({
+        method: 'DELETE',
+        url: token.delete + banner.filename + '?token=' + token.token,
+      }).catch(err => console.error(err))
+
+      return {
+        file: bannerFile,
+        size: bannerFile.size,
+        medium: {
+          filename: banner.medium.filename,
+          path: banner.medium.path,
+        },
+        preview: {
+          base64: preview,
+        },
+      }
+    })
+    .then(
+      function(res) {
+        clearLoading(request)
+        return res
+      },
+      function(err) {
+        clearLoading(request)
+        return Promise.reject(err)
+      }
+    )
+  },
+
+  prettyFormatBytes: function(bytes) {
+    if (bytes < 1024) {
+      return `${bytes} B`
+    }
+    if (bytes < 1024 * 1024) {
+      return `${(bytes / 1024).toFixed(1)} KB`
+    }
+    if (bytes < 1024 * 1024 * 1024) {
+      return `${(bytes / 1024 / 1024).toFixed(1)} MB`
+    }
+  },
+
+  uploadFileProgress: function(options, file, reporter) {
+    let request = requestIndex++
+    requests.add(request)
+    api.loading = true
+
+    return new Promise(function(res, rej) {
+      let report = reporter || function() {}
+      let formdata = new FormData()
+
+      formdata.append('file', file)
+
+      let request = new XMLHttpRequest()
+
+      let finished = false
+      let lastMarker = new Date()
+      let lastMarkerLoaded = 0
+      let lastMarkerSpeed = '...'
+
+      request.abortRequest = function() {
+        finished = true
+        request.abort()
+      }
+
+      request.upload.addEventListener('progress', function (e) {
+        let check = new Date()
+        if (check - lastMarker >= 1000) {
+          let loaded = e.loaded - lastMarkerLoaded
+          lastMarkerSpeed = api.prettyFormatBytes(loaded / ((check - lastMarker) / 1000))
+          lastMarker = check
+          lastMarkerLoaded = e.loaded
+        }
+        report(request, Math.min(e.loaded / file.size * 100, 100), lastMarkerSpeed)
+      })
+      request.addEventListener('abort', function(e) {
+        finished = true
+        window.requestAnimationFrame(m.redraw.bind(m))
+        rej()
+      })
+
+      request.addEventListener('readystatechange', function(e) {
+        if (finished) return
+        if (request.readyState !== 4) return
+
+        finished = true
+        let out = safeParseReponse(request.responseText, request.status, options.url)
+        if (out instanceof Error || request.status >= 300) {
+          return rej(out)
+        }
+        return res(out)
+      })
+
+      request.open(options.method || 'POST', options.url)
+      request.send(formdata)
+
+      report(request, 0)
+    })
+    .then(function(res) {
+      clearLoading(request)
+      return res
+    }, function(err) {
+      clearLoading(request)
+      return Promise.reject(err)
+    })
+  },
+}
+
+module.exports = api
--- a/filadelfia_archive/app/authentication.js
+++ b/filadelfia_archive/app/authentication.js
@ -35,14 +35,25 @@ const Authentication = {
    return localStorage.getItem(storageName)
  },

+  getTokenDecoded: function() {
+    let token = Authentication.getToken()
+    var base64Url = token.split('.')[1];
+    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
+    var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function(c) {
+        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
+    }).join(''));
+  
+    return JSON.parse(jsonPayload);
+  },
+
  requiresLogin: function() {
    if (Authentication.currentUser) return
-    m.route.set('/')
+    m.route.set('/login')
  },

  requiresNotLogin: function() {
    if (!Authentication.currentUser) return
-    m.route.set('/browse')
+    m.route.set('/')
  },
 }

--- a/filadelfia_archive/app/header.js
+++ b/filadelfia_archive/app/header.js
@ -0,0 +1,72 @@
+const m = require('mithril')
+const videos = require('./videos')
+const Authentication = require('./authentication')
+const lang = require('./lang')
+
+const Menu = {
+  oninit: function(vnode) {
+    this.currentActive = 'home'
+    this.loading = false
+    if (!videos.Tree.length) {
+      videos.refreshTree()
+    }
+    this.onbeforeupdate()
+  },
+
+  onbeforeupdate: function() {
+    videos.calculateActiveBranches()
+    let currentPath = m.route.get()
+  },
+
+  logOut: function() {
+    Authentication.clearToken()
+    m.route.set('/')
+  },
+
+  view: function() {
+    let tree = videos.Tree
+    let last = videos.Tree[videos.Tree.length - 1]
+    let hasId = m.route.param('id')
+
+    return [
+      m('nav', [
+        m('h4', m(m.route.Link, { href: '/' }, lang.header_title /* Filadelfia archival center */)),
+        m('a.link.changelang', { onclick: lang.langtoggle }, lang.lang_current),
+        Authentication.currentUser?.rank >= 100
+          ? m(m.route.Link, { class: 'upload', href: '/upload' }, lang.upload_goto) // Upload
+          : null,
+        Authentication.currentUser
+          ? m(m.route.Link, { class: 'link', href: '/logout' }, lang.logout)
+          : m(m.route.Link, { class: 'upload', href: '/login' }, lang.login_submit) // Upload,
+        // m('button.logout', { onclick: this.logOut }, lang.header_logout), // Log out
+      ]),
+      videos.error
+        ? m('div.error', { onclick: videos.refreshTree }, [
+            videos.error, m('br'), 'Click here to try again'
+          ])
+        : null,
+      !videos.error
+        ? [
+            m('.nav', m('.inner', tree.map(year => {
+              return m(m.route.Link, {
+                class: [videos.year === year ? 'active' : '',
+                        !year.videos.length ? 'empty' : ''].join(' '),
+                href: ['', (videos.year !== year && year !== last) || hasId ? year.title : '' ].filter(x => x).join('/') || '/',
+              }, year.title)
+            }))),
+            videos.year
+              ? m('.nav', m('.inner', videos.year.branches.map(month => {
+                  return m(m.route.Link, {
+                    class: [videos.month === month ? 'active' : '',
+                            !month.videos.length ? 'empty' : ''].join(' '),
+                    href: ['', videos.year.title, videos.month !== month || hasId ? month.title : null ].filter(x => x).join('/'),
+                  }, lang.months[month.title])
+                })))
+              : null,
+          ]
+        : null,
+    ]
+  },
+}
+
+module.exports = Menu
--- a/filadelfia_archive/app/holdbutton.js
+++ b/filadelfia_archive/app/holdbutton.js
@ -0,0 +1,68 @@
+const m = require('mithril')
+
+const HoldButton = {
+  oninit: function(vnode) {
+    this.timer = null
+    this.holding = false
+    this.windowBlur = () => {
+      this.timerStop()
+      m.redraw()
+    }
+    window.addEventListener('blur', this.windowBlur)
+  },
+
+  onremove: function(vnode) {
+    this.timerStop()
+    window.removeEventListener('blur', this.windowBlur)
+  },
+
+  keydown(vnode, e) {
+    if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
+      this.timerStart(vnode)
+      m.redraw()
+    }
+  },
+
+  keyup(e) {
+    if (e.key === " " || e.key === "Enter" || e.key === "Spacebar") {
+      this.timerStop()
+      m.redraw()
+    }
+  },
+  
+  timerStart(vnode) {
+    if (this.timer) return
+
+    this.timer = setTimeout(this.timerConfirmed.bind(this), 2000, vnode)
+    this.holding = true
+  },
+
+  timerStop() {
+    clearTimeout(this.timer)
+    this.timer = null
+    this.holding = false
+  },
+
+  timerConfirmed(vnode) {
+    this.timerStop()
+    vnode.attrs.onclick()
+    m.redraw()
+  },
+  
+  view: function(vnode) {
+    return m('button.holdbutton', {
+      style: '--hold-bg: var(--error-bg); --hold-color: var(--error); --hold-fill: var(--error);',
+      hidden: vnode.attrs.hidden,
+      class: (vnode.attrs.class || '')
+        + (this.holding ? ' holdbutton-active' : ''),
+      onpointerdown: this.timerStart.bind(this, vnode),
+      onpointerup: this.timerStop.bind(this),
+      onpointerleave: this.timerStop.bind(this),
+      onkeydown: this.keydown.bind(this, vnode),
+      onkeyup: this.keyup.bind(this),
+      onclick: e => { return false },
+    }, m('div.inner', vnode.attrs.text))
+  },
+}
+
+module.exports = HoldButton
--- a/filadelfia_archive/app/index.js
+++ b/filadelfia_archive/app/index.js
@ -2,8 +2,10 @@ const m = require('mithril')
 const Authentication = require('./authentication')
 const Header = require('./header')
 const Login = require('./page_login')
+const Logout = require('./page_logout')
 const Browse = require('./page_browse')
 const Upload = require('./page_upload')
+const Article = require('./page_article')
 window.m = m

 let css = [
@ -35,9 +37,13 @@ m.route.link = function(vnode){
 m.route.prefix = ''

 const allRoutes = {
-  '/': Login,
-  '/browse': Browse,
+  '/': Browse,
+  '/login': Login,
+  '/logout': Logout,
  '/upload': Upload,
+  '/:year': Browse,
+  '/:year/:month': Browse,
+  '/:year/:month/:path': Article,
 }

 // Wait until we finish checking avif support, some views render immediately and will ask for this immediately before the callback gets called.
--- a/filadelfia_archive/app/input.js
+++ b/filadelfia_archive/app/input.js
@ -0,0 +1,143 @@
+const m = require('mithril')
+const api = require('./api')
+const tempus = require('@eonasdan/tempus-dominus')
+
+const tempusLocalization = {
+  locale: 'is',
+  startOfTheWeek: 0,
+  hourCycle: 'h23',
+  dateFormats: {
+    LTS: 'H:mm:ss',
+    LT: 'H:mm',
+    L: 'dd.MM.yyyy',
+    LL: 'd [de] MMMM [de] yyyy',
+    LLL: 'd [de] MMMM [de] yyyy H:mm',
+    LLLL: 'dddd, d [de] MMMM [de] yyyy H:mm',
+  },
+}
+
+const Input = {
+  oninit: function(vnode) {
+    this.tempus = null
+    this.subscription = null
+    this.input = null
+    this.preview = null
+  },
+
+  onremove: function(vnode) {
+    if (this.subscription) this.subscription.unsubscribe()
+    if (this.tempus) {
+      this.tempus.dispose()
+      this.tempus = null
+    }
+    if (this.preview) {
+      this.preview.clear()
+    }
+  },
+
+  onupdate: function(vnode) {
+    if (this.tempus && vnode.attrs.form[vnode.attrs.formKey]) {
+      if (vnode.attrs.form[vnode.attrs.formKey].getTime() !== this.tempus.viewDate?.getTime()) {
+        this.tempus.dates.setValue(new tempus.DateTime(vnode.attrs.form[vnode.attrs.formKey]))
+      }
+    }
+  },
+
+  imageChanged: function(vnode, e) {
+    let file = e.currentTarget.files?.[0] || null
+    this.updateValue(vnode, file)
+    if (this.preview) {
+      this.preview.clear()
+      this.preview = null
+    }
+    if (!file) return
+
+    if (file.type.startsWith('image')) {
+      this.preview = {
+        file: file,
+        preview: URL.createObjectURL(file),
+        clear: function() {
+          URL.revokeObjectURL(this.preview)
+        },
+      }
+    }
+  },
+
+  updateValue: function(vnode, value) {
+    vnode.attrs.form[vnode.attrs.formKey] = value
+    if (typeof(vnode.attrs.oninput) === 'function') {
+      vnode.attrs.oninput(vnode.attrs.form[vnode.attrs.formKey])
+    }
+    return false
+  },
+
+  getInput: function(vnode) {
+    switch (vnode.attrs.utility) {
+      case 'file':
+        return m('div.form-row', [
+          m('input', {
+            type: 'text',
+            disabled: api.loading,
+            value: vnode.attrs.form[vnode.attrs.formKey]?.name || '',
+          }),
+          m('button.fal', { class: vnode.attrs.button || 'file' }),
+          m('input.cover', {
+            type: 'file',
+            accept: vnode.attrs.accept,
+            disabled: api.loading,
+            oninput: (e) => this.updateValue(vnode, e.currentTarget.files?.[0] || null),
+          }),
+        ])
+      case 'datetime':
+        return m('div.form-row', [
+          m('input', {
+            type: 'text',
+            disabled: api.loading,
+            oncreate: (e) => {
+              this.tempus = new tempus.TempusDominus(e.dom, {
+                localization: tempusLocalization,
+              })
+              this.tempus.dates.setValue(new tempus.DateTime(vnode.attrs.form[vnode.attrs.formKey]))
+              this.subscription = this.tempus.subscribe(tempus.Namespace.events.change, (e) => {
+                this.updateValue(vnode, e.date)
+              });
+            },
+          }),
+          m('button.fal.fa-calendar', {
+            onclick: () => { this.tempus.toggle(); return false },
+          })
+        ])
+      case 'image':
+        let imageLink = this.preview && this.preview.preview || vnode.attrs.form[vnode.attrs.formKey]
+
+        return m('div.form-row.image-banner', {
+          style: {
+            'background-image': typeof imageLink === 'string' ? 'url("' + (imageLink) + '")' : null,
+          },
+        }, [
+          m('input.cover', {
+            type: 'file',
+            accept: vnode.attrs.accept,
+            disabled: api.loading,
+            onchange: this.imageChanged.bind(this, vnode),
+          }),
+        ])
+      default:
+        return m('input', {
+          disabled: api.loading,
+          type: vnode.attrs.type || 'text',
+          value: vnode.attrs.form[vnode.attrs.formKey],
+          oninput: (e) => this.updateValue(vnode, e.currentTarget.value),
+        })
+    }
+  },
+
+  view: function(vnode) {
+    return [
+      vnode.attrs.label ? m('label', vnode.attrs.label) : null,
+      this.getInput(vnode),
+    ]
+  },
+}
+
+module.exports = Input
--- a/filadelfia_archive/app/lang.js
+++ b/filadelfia_archive/app/lang.js
@ -0,0 +1,156 @@
+const out = {
+	currentlang:	'en',
+}
+
+const i18n = {
+	lang_change_long:			['Skipta yfir á íslensku',
+														'Change to english'],
+	lang_current:					['en',
+														'is'],
+	header_title:					['Fíladelfia archival center',
+														'Fíladelfia myndhvelfing'],
+	header_logout:					['Log out',
+														'Skrá út'],
+	title:									['Title',
+														'Titill'],
+	date:									['Date',
+														'Dagsetning'],
+	language:							['EN',
+														'IS'],
+	upload_goto:						['Upload',
+														'Upphlaða'],
+	login_error:						['Error while logging in: {0}',
+														'Villa við innskráningu: {0}'],
+	login_error_auth:			['Unknown error from server. Try again later.',
+														'Óþekkt villa frá vefþjóni. Reyndu aftur seinna.'],
+	login_missing_email:		['Email is missing',
+														'Email eða nafn vantar'],
+	login_missing_password:['Password is missing',
+														'Lykilorð vantar'],
+	login_email:						['Email or name',
+														'Email eða nafn'],
+	login_password:				['Password',
+														'Lykilorð'],
+	login_submit:					['Log in',
+														'Skrá inn'],
+	logout:									['Log out',
+														'Skrá út'],
+	upload_missing_title:	['Title is missing',
+														'Titill vantar'],
+	upload_missing_date:	['Date is missing',
+														'Dagsetning vantar'],
+	upload_missing_file:	['Video file missing',
+														'Myndaskrá vantar'],
+	upload_missing_banner:	['Poster image missing',
+														'Mynd vantar'],
+	upload_error:					['Error while uploading: {0}',
+														'Villa við að hlaða upp myndefni: {0}'],
+	unsplash:							['Photo by {0} on {1}',
+														'Mynd eftir {0} frá {1}'],
+	api_down:							['No internet or browser blocked the request.',
+														'Ekkert net eða vafri blockaði fyrirspurn.'],
+	edit:										['Edit',
+														'Breyta'],
+	delete:									['Delete',
+														'Eyða'],
+	article_speaker:			['Speaker',
+														'Ræðumaður'],
+	delete_error:					['Error while deleting: {0}',
+														'Villa við að eyða efni: {0}'],
+	article_error:				['Error while saving: {0}',
+														'Villa við að vista: {0}'],
+	api_banner_upload:	['Uploading banner image',
+														'Er að senda mynd'],
+	api_banner_generate:['Generating preview, testing quality {0}%',
+														'Bý til forsíðumynd, prufa {0}% gæði'],
+	months: {
+		'1':									['January',
+														'Janúar'],
+		'2':									['February',
+														'Febrúar'],
+		'3':									['March',
+														'Mars'],
+		'4':									['April',
+														'Apríl'],
+		'5':									['May',
+														'Maí'],
+		'6':									['June',
+														'Júní'],
+		'7':									['July',
+														'Júlí'],
+		'8':									['August',
+														'Ágúst'],
+		'9':									['September',
+														'September'],
+		'10':									['Oktober',
+														'Október'],
+		'11':									['November',
+														'Nóvember'],
+		'12':									['December',
+														'Desember'],
+	},
+}
+const langs = {
+	'en': 0,
+	'is': 1,
+}
+
+const regexNumber = new RegExp('^\\d+$')
+
+out.printdate = function(date) {
+	let day = date.getDate().toString()
+	if (out.currentlang === 'en') {
+		let last = day[day.length - 1]
+		if (last === '1') {
+			day += 'st'
+		} else if (last === '2') {
+			day += 'nd'
+		} else if (last === '3') {
+			day += 'rd'
+		} else {
+			day += 'th'
+		}
+	} else {
+		day += '.'
+	}
+	return `${day} ${out.months[date.getMonth() + 1]} ${date.getFullYear()}, ${date.getHours().toString().padStart(2, '0')}:${date.getMinutes().toString().padStart(2, '0')}`
+}
+
+out.langset = function(lang) {
+	out.currentlang = lang
+	let index = langs[lang]
+
+	for (let key of Object.keys(i18n)) {
+		if (!Array.isArray(i18n[key])) {
+			out[key] = {}
+			for (let subKey of Object.keys(i18n[key])) {
+				out[key][subKey] = i18n[key][subKey][index]
+			}
+		} else {
+			out[key] = i18n[key][index]
+		}
+	}
+}
+
+out.langtoggle = function() {
+	out.langset(out.currentlang === 'en' ? 'is' : 'en')
+	return false
+}
+
+out.format = function(str, ...args) {
+	return out.mformat(str, ...args).join('')
+}
+
+out.mformat = function(str, ...args) {
+	let split = (str || '').split(/\{|\}/)
+	return split.map(function(item) {
+		if (regexNumber.test(item)) {
+			return args[Number(item)] || item
+		}
+		return item
+	})
+}
+
+out.langset('is')
+
+module.exports = out
--- a/filadelfia_archive/app/page_article.js
+++ b/filadelfia_archive/app/page_article.js
@ -0,0 +1,265 @@
+const m = require('mithril')
+const api = require('./api')
+const Authentication = require('./authentication')
+const Input = require('./input')
+const lang = require('./lang')
+const videos = require('./videos')
+const HoldButton = require('./holdbutton')
+
+const Article = {
+  oninit: function(vnode) {
+    this.error = ''
+    this.path = ''
+    this.data = null
+    this.editing = false
+    this.cacheImage = null
+    this.form = {
+      title: 'Sunnudagssamkoma',
+      date: new Date(),
+      banner: null,
+      metadata: {
+        speaker: '',
+      },
+    }
+    this.onbeforeupdate(vnode)
+  },
+
+  onbeforeupdate: function(vnode) {
+    let path = m.route.param('year').padStart(4, '0')
+      + '-' + m.route.param('month').padStart(2, '0')
+      + '-' + m.route.param('path')
+    if (this.path === path) return
+
+    this.fetchArticle(vnode, path)
+  },
+
+  fetchArticle: function(vnode, path) {
+    this.error = ''
+    this.data = null
+    this.path = path
+    this.cacheImage = null
+    this.editing = false
+
+    api.sendRequest({
+      method: 'GET',
+      url: '/api/articles/' + this.path,
+    })
+    .then((result) => {
+      this.data = result.article
+      this.gotArticle(vnode)
+    }, (err) => {
+      this.error = err.message
+    })
+  },
+
+  gotArticle: function(vnode) {
+    if (!this.data) {
+      return this.error = 'Article not found'
+    }
+    this.form.title = this.data.name
+    this.form.date = new Date(this.data.publish_at)
+    this.form.banner = this.data.banner_path
+    this.form.metadata.speaker = this.data.content.speaker
+  },
+
+  updatevideo: function(vnode, e) {
+    this.error = ''
+
+    if (!this.form.title) this.error = lang.upload_missing_title // Title is missing
+    if (!this.form.date) this.error = lang.upload_missing_date // Date is missing
+    if (this.error) return false
+    
+    let promise = Promise.resolve()
+
+    if (Authentication.currentUser && (typeof(this.form.banner) !== 'string' && this.cacheImage?.file !== this.form.banner)) {
+      promise = api.sendRequest({
+        method: 'GET',
+        url: '/api/auth/uploadToken',
+      })
+      .then(res => {
+        return api.uploadBanner(this.form.banner, res)
+        .then(imageData => {
+          this.cacheImage = imageData
+          
+          if (this.data.banner_path) {
+            api.sendRequest({
+              method: 'DELETE',
+              url: res.delete + this.data.banner_path.slice(this.data.banner_path.lastIndexOf('/') + 1) + '?token=' + res.token,
+            }).catch(err => console.error(err))
+          }
+  
+          return res
+        })
+      })
+    }
+    
+    promise.then(() => {
+      return api.sendRequest({
+        method: 'PUT',
+        url: '/api/auth/articles/' + this.data.id,
+        body: {
+          name: this.form.title,
+          page_id: 'null',
+          path: this.form.date.toISOString().replace('T', '_').replace(/:/g, '').split('.')[0],
+          content: JSON.stringify(this.form.metadata),
+          publish_at: this.form.date,
+          admin_id: Authentication.getTokenDecoded().user_id,
+          is_featured: false,
+          media: null,
+          banner: this.cacheImage ? {
+            filename: this.cacheImage.medium.filename,
+            path: this.cacheImage.medium.path,
+            type: 'image/avif',
+            size: this.cacheImage.size,
+            preview: {
+              base64: this.cacheImage.preview.base64,
+            },
+          } : null,
+        },
+      })
+    })
+    .then(res => {
+      this.fetchArticle(vnode, this.path)
+    })
+    .catch((error) => {
+      console.error(error)
+      this.error = lang.format(lang.article_error, error.message) // Error while saving:
+    })
+
+
+    return false
+  },
+
+  deletevideo: function(vnode) {
+    api.sendRequest({
+      method: 'GET',
+      url: '/api/auth/uploadToken',
+      body: this.form,
+    })
+    .then(res => {
+      return Promise.all([
+        this.data.banner_path ? api.sendRequest({
+          method: 'DELETE',
+          url: res.delete + this.data.banner_path.slice(this.data.banner_path.lastIndexOf('/') + 1) + '?token=' + res.token,
+        }).catch(err => console.error(err)) : Promise.resolve(),
+        this.data.media_path ? api.sendRequest({
+          method: 'DELETE',
+          url: res.delete + this.data.media_path.slice(this.data.media_path.lastIndexOf('/') + 1) + '?token=' + res.token,
+        }).catch(err => console.error(err)) : Promise.resolve(),
+      ])
+    })
+    .then(() => {
+      return api.sendRequest({
+        method: 'DELETE',
+        url: '/api/auth/articles/' + this.data.id,
+      })
+    })
+    .then(res => {
+      videos.removeArticle(this.data.id)
+      m.route.set('/')
+    })
+    .catch((error) => {
+      if (!error) return
+
+      this.error = lang.format(lang.delete_error, error.message) // Error while uploading:
+    })
+  },
+
+  view: function(vnode) {
+    return [
+      api.loading && !this.data ? m('div.loading-spinner') : null,
+      this.data ? [
+        this.data.media_path
+          ? [
+              m('.player', [
+                m('video', {
+                  crossorigin: '',
+                  controls: true,
+                  preload: 'none',
+                  poster: this.data.banner_path || '/assets/placeholder.avif',
+                }, [
+                  m('source', {
+                    src: this.data.media_path
+                  })
+                ]),
+              ]),
+            ]
+          : null,
+        this.editing
+          ? m('form.article', {
+              onsubmit: this.updatevideo.bind(this, vnode),
+            }, [
+              m('div.form-row', [
+                m('div.form-columns', [
+                  m(Input, {
+                    label: '',
+                    type: 'file',
+                    accept: 'image/*',
+                    utility: 'image',
+                    form: this.form,
+                    formKey: 'banner',
+                  }),
+                ]),
+                m('div.form-columns.article-name', [
+                  m(Input, {
+                    label: 'Title',
+                    form: this.form,
+                    formKey: 'title',
+                  }),
+                  m(Input, {
+                    label: 'Date (dd.mm.yyyy)',
+                    type: 'text',
+                    utility: 'datetime',
+                    form: this.form,
+                    formKey: 'date',
+                  }),
+                ]),
+              ]),
+              m('p.separator', 'Optional'),
+              m(Input, {
+                label: 'Speaker',
+                form: this.form.metadata,
+                formKey: 'speaker',
+              }),
+              this.error ? m('div.full-error', this.error) : null,
+              m('div.row', [
+                m('input.spinner', {
+                  hidden: api.loading,
+                  type: 'submit',
+                  value: lang.edit,
+                }),
+                m('div.filler', {
+                  hidden: api.loading,
+                }),
+                api.loading ? m('div.loading-spinner') : null,
+                m(HoldButton, {
+                  class: 'button spinner',
+                  onclick: () => this.deletevideo(vnode),
+                  hidden: api.loading,
+                  text: lang.delete,
+                }),
+              ]),
+            ])
+          : m('div.article', [
+              m('h1', this.data.name),
+              m('p', [
+                lang.printdate(this.form.date),
+              ]),
+              m('div.table', [
+                m('div.table-row', [
+                  m('div.table-item', lang.article_speaker),
+                  m('div.table-item', this.data.content.speaker || '...'),
+                ]),
+              ]),
+              Authentication.currentUser?.rank >= 10
+                ? m('button.button', { onclick: () => this.editing = true },lang.edit)
+                : null,
+            ]),
+      ] : [
+        this.error ? m('div.full-error', this.error) : null,
+      ],
+    ]
+  },
+}
+
+module.exports = Article
--- a/filadelfia_archive/app/page_browse.js
+++ b/filadelfia_archive/app/page_browse.js
@ -0,0 +1,62 @@
+const m = require('mithril')
+const api = require('./api')
+const Authentication = require('./authentication')
+const videos = require('./videos')
+const lang = require('./lang')
+
+const Browse = {
+  oninit: function(vnode) {
+  },
+
+  mArticles: function(vnode, articles) {
+    return articles.map(article => {
+      return m(m.route.Link, {
+        href: ['', article.publish_at.getFullYear(), article.publish_at.getMonth() + 1, article.path_short].join('/'),
+        style: article.avif_preview ? `background-image: url('${article.avif_preview}')` : null,
+      }, [
+        m('span', lang.printdate(article.publish_at)),
+        m('span', article.name),
+      ])
+    })
+  },
+  
+  mMonth: function(vnode, year) {
+    return year.branches.map(month => {
+      return [
+        m('.gallery-month', lang.months[month.title]),
+        m('.group', this.mArticles(vnode, month.videos))
+      ]
+    })
+  },
+
+  view: function(vnode) {
+    let articles = videos.month?.videos || videos.year?.videos || videos.Articles
+
+    return [
+      api.loading ? m('div.loading-spinner') : null,
+      videos.error
+        ? m('div.full-error', { onclick: videos.refreshTree }, [
+            videos.error, m('br'), 'Click here to try again'
+          ])
+        : null,
+      m('.gallery', [
+        videos.month
+          ? m('.group', this.mArticles(vnode, articles))
+          : null,
+        videos.year && !videos.month
+          ? this.mMonth(vnode, videos.year)
+          : null,
+        !videos.year
+          ? videos.Tree.slice(-1).map(year => {
+              return [
+                m('.gallery-year', year.title),
+                this.mMonth(vnode, year),
+              ]
+            })
+          : null
+      ]),
+    ]
+  },
+}
+
+module.exports = Browse
--- a/filadelfia_archive/app/page_login.js
+++ b/filadelfia_archive/app/page_login.js
@ -3,6 +3,7 @@ const Authentication = require('./authentication')
 const api = require('./api')
 const Input = require('./input')
 const lang = require('./lang')
+const videos = require('./videos')

 const Login = {
  oninit: function(vnode) {
@ -33,7 +34,8 @@ const Login = {
    .then((result) => {
      if (!result.token) return Promise.reject(new Error(lang.login_error_auth)) // Unknown error from server. Try again later
      Authentication.updateToken(result.token)
-      m.route.set(this.redirect || '/browse')
+      m.route.set(this.redirect || '/')
+      videos.refreshTree()
    })
    .catch((error) => {
      this.error = lang.format(lang.login_error, error.message) // Error while logging in:
@ -69,11 +71,10 @@ const Login = {
              value: lang.login_submit, // Log in
            }),
            api.loading ? m('div.loading-spinner') : null,
-            m('a', { onclick: lang.langtoggle }, lang.lang_change_long /* Skipta yfir á íslensku */),
          ]),
        ]),
        m('footer', lang.mformat(
-            lang.login_footer, // Photo by X on Y
+            lang.unsplash, // Photo by X on Y
            m('a', { href: 'https://unsplash.com/@franhotchin?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash', target: '_blank' }, 'Francesca Hotchin'),
            m('a', { href: 'https://unsplash.com/photos/landscape-photo-of-mountain-covered-with-snow-FN-cedy6NHA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash', target: '_blank' }, 'Unsplash'),
        )),
--- a/filadelfia_archive/app/page_logout.js
+++ b/filadelfia_archive/app/page_logout.js
@ -0,0 +1,15 @@
+const m = require('mithril')
+const Authentication = require('./authentication')
+
+const Logout = {
+  oninit: function(vnode) {
+    Authentication.clearToken()
+    m.route.set(vnode.attrs.redirect || '/')
+  },
+
+  view: function(vnode) {
+    return []
+  },
+}
+
+module.exports = Logout
--- a/filadelfia_archive/app/page_upload.js
+++ b/filadelfia_archive/app/page_upload.js
@ -0,0 +1,227 @@
+const m = require('mithril')
+const Authentication = require('./authentication')
+const api = require('./api')
+const Input = require('./input')
+const lang = require('./lang')
+const videos = require('./videos')
+
+const Upload = {
+  oninit: function(vnode) {
+    Authentication.requiresLogin()
+    this.error = ''
+    let d = new Date()
+    d.setDate(d.getDate() - d.getDay())
+    d.setHours(11)
+    d.setMinutes(0)
+    d.setSeconds(0)
+    d.setMilliseconds(0)
+
+    this.cacheVideo = null
+    this.cacheImage = null
+    this.uploading = null
+    this.bannerStatus = null
+    this.form = {
+      title: 'Sunnudagssamkoma',
+      date: d,
+      file: null,
+      banner: null,
+      metadata: {
+        speaker: '',
+      },
+    }
+  },
+  
+  uploadvideo: function(vnode, e) {
+    this.error = ''
+
+    if (!this.form.title) this.error = lang.upload_missing_title // Title is missing
+    if (!this.form.date) this.error = lang.upload_missing_date // Date is missing
+    if (!this.form.file) this.error = lang.upload_missing_file // Video file missing
+    if (!this.form.banner) this.error = lang.upload_missing_banner // Poster image missing
+
+    if (this.error) return false
+
+    api.sendRequest({
+      method: 'GET',
+      url: '/api/auth/uploadToken',
+    })
+    .then(res => {
+      if (this.cacheImage?.file === this.form.banner) {
+        return this.cacheImage
+      }
+
+      return api.uploadBanner(this.form.banner, res, (status) => {
+        this.bannerStatus = status
+        m.redraw()
+      })
+      .then(imageData => {
+        this.cacheImage = imageData
+        return res
+      })
+    })
+    .then(res => {
+      if (this.cacheVideo?.file === this.form.file) {
+        return this.cacheVideo
+      }
+
+      return api.uploadFileProgress({
+        url: res.path + '?token=' + res.token,
+      }, this.form.file, (xhr, progress, perSecond) => {
+        this.uploading = {
+          progress,
+          xhr,
+          perSecond
+        }
+        m.redraw()
+      })
+    })
+    .then(res => {
+      this.cacheVideo = {
+        file: this.form.file,
+        filename: res.filename,
+        path: res.path,
+      }
+      this.uploading = null
+
+      return api.sendRequest({
+        method: 'PUT',
+        url: '/api/auth/articles/0',
+        body: {
+          name: this.form.title,
+          page_id: 'null',
+          path: this.form.date.toISOString().replace('T', '_').replace(/:/g, '').split('.')[0],
+          content: JSON.stringify(this.form.metadata),
+          publish_at: this.form.date,
+          admin_id: Authentication.getTokenDecoded().user_id,
+          is_featured: false,
+          media: {
+            filename: res.filename,
+            path: res.path,
+            type: this.form.file.type,
+            size: this.form.file.size,
+          },
+          banner: {
+            filename: this.cacheImage.medium.filename,
+            path: this.cacheImage.medium.path,
+            type: 'image/avif',
+            size: this.cacheImage.size,
+            preview: {
+              base64: this.cacheImage.preview.base64,
+            },
+          },
+        },
+      })
+    })
+    .then(res => {
+      videos.refreshTree()
+      m.route.set('/')
+    })
+    .catch((error) => {
+      this.bannerStatus = null
+      this.uploading = null
+      if (!error) return
+
+      this.error = lang.format(lang.upload_error, error.message) // Error while uploading:
+    })
+
+    return false
+  },
+
+  cancelUpload(e) {
+    e.stopPropagation()
+    this.uploading.xhr.abortRequest()
+    this.uploading = null
+    return false
+  },
+
+  filechanged(file) {
+    if (!file || !file.name) return
+    
+    let matches = /^(\d{4})-(\d\d)-(\d\d)_(\d\d)-(\d\d)/.exec(file.name)
+    if (!matches) return
+
+    var date = new Date(matches.slice(1, 4).join('-') + 'T' + matches.slice(4,6).join(':') + ':00')
+    if (isNaN(date.getTime())) return
+
+    if (date.getMinutes() >= 30 || date.getHours() === 10) {
+      date.setHours(date.getHours() + 1)
+    }
+    date.setMinutes(0)
+    this.form.date = date
+  },
+
+  view: function(vnode) {
+    return [
+      m('div.page.page-upload', [
+        m('div.modal', [
+          m('form', {
+            onsubmit: this.uploadvideo.bind(this, vnode),
+          }, [
+            m('h3', 'Upload new video'),
+            this.error ? m('p.error', this.error) : null,
+            m(Input, {
+              label: 'Title',
+              form: this.form,
+              formKey: 'title',
+            }),
+            m(Input, {
+              label: 'Date (dd.mm.yyyy)',
+              type: 'text',
+              utility: 'datetime',
+              form: this.form,
+              formKey: 'date',
+            }),
+            m(Input, {
+              label: 'Video',
+              type: 'file',
+              accept: '.webm',
+              utility: 'file',
+              button: 'fa-video',
+              form: this.form,
+              formKey: 'file',
+              oninput: (file) => this.filechanged(file),
+            }),
+            m(Input, {
+              label: 'Mynd',
+              type: 'file',
+              accept: 'image/*',
+              utility: 'image',
+              form: this.form,
+              formKey: 'banner',
+            }),
+            m('p.separator', 'Optional'),
+            m(Input, {
+              label: 'Speaker',
+              form: this.form.metadata,
+              formKey: 'speaker',
+            }),
+            m('input.spinner', {
+              hidden: api.loading,
+              type: 'submit',
+              value: 'Begin upload',
+            }),
+            api.loading ? m('div.loading-spinner') : null,
+            this.bannerStatus ? [
+              m('p', this.bannerStatus),
+              m('.loading-bar', { style: `--progress: 0%` }),
+            ] : null,
+            this.uploading ? [
+              m('p', `${Math.floor(this.uploading.progress)}% (${this.uploading.perSecond}/s)`),
+              m('.loading-bar', { style: `--progress: ${this.uploading.progress}%` }),
+              m('button.button.button-alert', {
+                onclick: this.cancelUpload.bind(this),
+              }, 'Cancel upload'),
+            ] : null,
+          ]),
+        ]),
+        m('footer', lang.mformat(
+            lang.unsplash, // Photo by X on Y
+            m('a', { href: 'https://unsplash.com/@franhotchin?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash', target: '_blank' }, 'Francesca Hotchin'),
+            m('a', { href: 'https://unsplash.com/photos/landscape-photo-of-mountain-covered-with-snow-FN-cedy6NHA?utm_content=creditCopyText&utm_medium=referral&utm_source=unsplash', target: '_blank' }, 'Unsplash'),
+        )),
+      ]),
+    ]
+  },
+}
+
+module.exports = Upload
--- a/filadelfia_archive/app/videos.js
+++ b/filadelfia_archive/app/videos.js
@ -0,0 +1,120 @@
+const m = require('mithril')
+const api = require('./api')
+
+const Tree = []
+const Articles = []
+
+exports.Tree = Tree
+exports.Articles = Articles
+
+exports.loading = false
+exports.error = ''
+exports.year = null
+exports.month = null
+
+const matcher = /\/(\d+)(\/\d+)?/
+
+function calculateActiveBranches() {
+  let path = matcher.exec(m.route.get())
+  if (path && path[1] !== exports.year?.title) {
+    for (let year of Tree) {
+      if (year.title === path[1]) {
+        exports.year = year
+        break
+      }
+    }
+  } else if (!path && m.route.get() === '/') {
+    exports.year = Tree[Tree.length - 1]
+  } else if (!path) {
+    exports.year = null
+  }
+  if (path && exports.year && path[2]) {
+    exports.month = exports.year.branches[Number(path[2].slice(1)) - 1] || null
+  } else if (!path?.[2]) {
+    exports.month = null
+  }
+}
+
+function rebuildTree() {
+  Tree.splice(0, Tree.length)
+
+  if (!Articles.length) return
+
+  let startYear = Articles[0].publish_at
+  let target = new Date()
+  let articleIndex = 0
+
+  for (let year = startYear.getFullYear(); year <= target.getFullYear(); year++) {
+    let branchYear = {
+      title: year.toString(),
+      type: 'year',
+      branches: [],
+      videos: []
+    }
+    Tree.push(branchYear)
+    let lastMonth = year === target.getFullYear() ? target.getMonth() + 1 : 12
+
+    for (let month = 1; month <= lastMonth; month++) {
+      let branchMonth = {
+        title: month.toString(),
+        type: 'month',
+        branches: [],
+        videos: []
+      }
+      branchYear.branches.push(branchMonth)
+
+      let start = new Date(year, month - 1)
+      let end = new Date(year, month)
+
+      for (; Articles[articleIndex] && Articles[articleIndex].publish_at >= start && Articles[articleIndex].publish_at < end; articleIndex++) {
+        branchYear.videos.push(Articles[articleIndex])
+        branchMonth.videos.push(Articles[articleIndex])
+      }
+    }
+  }
+}
+
+function removeArticle(id) {
+  let index = Articles.findIndex(article => article.id === id)
+  if (index >= 0) {
+    Articles.splice(index, 1)
+    rebuildTree()
+  }
+}
+
+function refreshTree() {
+  exports.error = ''
+
+  if (exports.loading) return Promise.resolve()
+
+  exports.loading = true
+
+  m.redraw()
+
+  return api.sendRequest({
+    method: 'GET',
+    url: '/api/articles',
+  })
+  .then(result => {
+    result.videos.forEach(video => {
+      video.publish_at = new Date(video.publish_at)
+      video.path_short = video.path.split('-')[2]
+    })
+
+    Articles.splice(0, Articles.length)
+    Articles.push.apply(Articles, result.videos)
+
+    rebuildTree()
+  }, err => {
+    exports.error = 'Error fetching videos: ' + err.message
+  })
+  .then(() => {
+    exports.loading = false
+    m.redraw()
+  })
+}
+
+exports.removeArticle = removeArticle
+exports.rebuildTree = rebuildTree
+exports.refreshTree = refreshTree
+exports.calculateActiveBranches = calculateActiveBranches
--- a/filadelfia_archive/base
+++ b/filadelfia_archive/base
--- a/filadelfia_archive/build-package.json
+++ b/filadelfia_archive/build-package.json
@ -0,0 +1,13 @@
+{
+  "scripts": {
+    "build": "esbuild app/index.js --bundle --outfile=public/assets/app.js"
+  },
+  "dependencies": {
+    "@eonasdan/tempus-dominus": "^6.7.19",
+    "@popperjs/core": "^2.11.8",
+    "eltro": "^1.4.4",
+    "esbuild": "^0.19.5",
+    "mithril": "^2.2.2",
+    "service-core": "^3.0.0-beta.17"
+  }
+}
--- a/filadelfia_archive/index.mjs
+++ b/filadelfia_archive/index.mjs
@ -0,0 +1,38 @@
+import fs from 'fs'
+import { pathToFileURL } from 'url'
+import config from './base/config.mjs'
+
+export function start(http, port, ctx) {
+  config.sources[1].store = ctx.config
+
+  return import('./api/server.mjs')
+  .then(function(module) {
+    let server = new module.default(http, port, ctx)
+    return server.run()
+  })
+}
+
+if (import.meta.url === pathToFileURL(process.argv[1]).href) {
+  import('service-core').then(core => {
+    const port = 4130
+
+    var core = new core.ServiceCore('filadelfia_web', import.meta.url, port, '')
+
+    let config = {
+      frontend: {
+        url: 'http://localhost:' + port
+      }
+    }
+
+    try {
+      config = JSON.parse(fs.readFileSync('./config.json'))
+    } catch {}
+
+    config.port = port
+
+    core.setConfig(config)
+    core.init({ start }).then(function() {
+      return core.run()
+    })
+  })
+}
--- a/filadelfia_archive/package.json
+++ b/filadelfia_archive/package.json
@ -1,8 +1,8 @@
 {
-  "name": "filadelfia_web",
-  "version": "1.0.0",
+  "name": "filadelfia_archive",
+  "version": "1.0.8",
  "port": 4130,
-  "description": "Filadelfia web portal",
+  "description": "Filadelfia archive",
  "main": "index.js",
  "directories": {
    "test": "test"
@ -16,7 +16,7 @@
    "dev:server": "eltro --watch server --npm server",
    "dev:build:old": "npm-watch build",
    "dev:server:old": "npm-watch server",
-    "server": "node dev.mjs | bunyan"
+    "server": "node index.mjs | bunyan"
  },
  "watch": {
    "server": {
@ -50,7 +50,9 @@
  "homepage": "https://git.nfp.is/nfp/nfp_sites",
  "dependencies": {
    "dot": "^2.0.0-beta.1",
-    "msnodesqlv8": "^2.4.7",
+    "flaska": "^1.3.2",
+    "formidable": "^1.2.6",
+    "msnodesqlv8": "^4.1.1",
    "nconf-lite": "^2.0.0"
  },
  "devDependencies": {
@ -58,7 +60,6 @@
    "@popperjs/core": "^2.11.8",
    "eltro": "^1.4.4",
    "esbuild": "^0.19.5",
-    "flaska": "^1.3.2",
    "mithril": "^2.2.2",
    "service-core": "^3.0.0-beta.17"
  }
--- a/filadelfia_archive/public/assets/app.css
+++ b/filadelfia_archive/public/assets/app.css
--- a/filadelfia_archive/public/assets/apple-touch-icon.png
+++ b/filadelfia_archive/public/assets/apple-touch-icon.png
--- a/filadelfia_archive/public/assets/bg.avif
+++ b/filadelfia_archive/public/assets/bg.avif
--- a/filadelfia_archive/public/assets/fa-light-300.woff2
+++ b/filadelfia_archive/public/assets/fa-light-300.woff2
--- a/filadelfia_archive/public/assets/favicon.png
+++ b/filadelfia_archive/public/assets/favicon.png
--- a/filadelfia_archive/public/assets/fontawesome.css
+++ b/filadelfia_archive/public/assets/fontawesome.css
--- a/filadelfia_archive/public/assets/logo.svg
+++ b/filadelfia_archive/public/assets/logo.svg
@ -0,0 +1,101 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="26.656599mm"
+   height="26.65659mm"
+   viewBox="0 0 26.656599 26.65659"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.1 (91b66b0783, 2023-11-16)"
+   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
+   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <sodipodi:namedview
+     id="namedview1"
+     pagecolor="#ffffff"
+     bordercolor="#111111"
+     borderopacity="1"
+     inkscape:showpageshadow="0"
+     inkscape:pageopacity="0"
+     inkscape:pagecheckerboard="1"
+     inkscape:deskcolor="#d1d1d1"
+     inkscape:document-units="mm"
+     showguides="true"
+     showgrid="false"
+     inkscape:zoom="4.2083894"
+     inkscape:cx="-36.712382"
+     inkscape:cy="66.890197"
+     inkscape:window-width="2560"
+     inkscape:window-height="1377"
+     inkscape:window-x="1912"
+     inkscape:window-y="-8"
+     inkscape:window-maximized="1"
+     inkscape:current-layer="layer1">
+    <sodipodi:guide
+       position="21.496619,297"
+       orientation="0,-1"
+       id="guide1"
+       inkscape:locked="false" />
+    <inkscape:grid
+       id="grid2"
+       units="mm"
+       originx="-90.44421"
+       originy="-127.62701"
+       spacingx="0.99999998"
+       spacingy="1"
+       empcolor="#0099e5"
+       empopacity="0.30196078"
+       color="#0099e5"
+       opacity="0.14901961"
+       empspacing="5"
+       dotted="false"
+       gridanglex="30"
+       gridanglez="30"
+       visible="false" />
+    <sodipodi:guide
+       position="-2.3731349e-07,282.22545"
+       orientation="1,0"
+       id="guide2"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="26.656599,279.39628"
+       orientation="1,0"
+       id="guide3"
+       inkscape:locked="false" />
+    <sodipodi:guide
+       position="8.8910958,270.34341"
+       orientation="0,-1"
+       id="guide4"
+       inkscape:locked="false" />
+  </sodipodi:namedview>
+  <defs
+     id="defs1" />
+  <g
+     inkscape:label="Layer 1"
+     inkscape:groupmode="layer"
+     id="layer1"
+     transform="translate(-90.444211,-127.62701)">
+    <path
+       id="path1"
+       d="M 90.444211,154.2836 H 117.10081 V 127.62701 H 90.444211 Z"
+       style="fill:#18597d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.159661" />
+    <path
+       id="path224"
+       d="m 103.77216,127.62701 c 7.36141,0 13.32865,5.96724 13.32865,13.3283 0,7.36106 -5.96724,13.32829 -13.32865,13.32829 -7.360713,0 -13.327947,-5.96723 -13.327947,-13.32829 0,-7.36106 5.967234,-13.3283 13.327947,-13.3283"
+       style="fill:#18597d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path225"
+       d="m 103.77216,128.3629 c -6.954663,0 -12.592405,5.63774 -12.592405,12.5924 0,6.95466 5.637742,12.5924 12.592405,12.5924 6.95501,0 12.59275,-5.63774 12.59275,-12.5924 0,-6.95466 -5.63774,-12.5924 -12.59275,-12.5924"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path226"
+       d="m 103.74393,129.68123 c 6.19478,0 11.21586,5.02179 11.21586,11.21622 0,6.19477 -5.02108,11.21621 -11.21586,11.21621 -6.19442,0 -11.216219,-5.02144 -11.216219,-11.21621 0,-6.19443 5.021799,-11.21622 11.216219,-11.21622"
+       style="fill:#18597d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+    <path
+       id="path227"
+       d="m 102.98229,131.02708 v 5.04931 h 3.34469 c 0.56162,-1.17581 2.25918,-2.76684 3.26989,-3.64631 l -0.45332,1.06045 c 0.0794,-0.067 -0.70238,1.29046 0.009,2.81799 0.63217,1.35713 1.07032,2.09867 1.2894,3.73097 0.35278,-0.94015 0.56691,-1.62736 1.04034,-2.17628 0.27552,-0.31856 0.31538,-0.93698 0.27023,-1.63971 0.38488,0.42192 0.93556,2.09126 0.82726,3.4364 -0.0536,0.67134 0.10936,2.83175 -2.17523,3.46358 -0.36794,1.33879 -1.24283,2.57704 -2.68993,3.37961 -1.78646,0.9906 -2.58057,0.20249 -3.81987,2.15512 -0.0596,-0.33691 -0.0677,-0.71932 -0.0773,-0.99554 -0.12065,-0.1584 -0.20885,-0.26988 -0.26494,-0.57397 -0.0603,-0.16052 0.001,-0.51082 0.26423,-0.57256 -0.0127,-1.36984 1.36384,-1.15641 1.60585,-1.95474 0.52422,-1.24848 -1.57445,-1.39877 -2.44052,-2.12513 v 6.70877 c 0.30127,0.17286 0.58526,0.44062 0.84772,0.85478 1.29082,-2.03412 3.09175,-0.54151 4.95265,-1.57339 l 1.83021,0.63077 -0.1337,0.1076 c -2.52412,1.23119 -4.95406,-0.67381 -6.70772,2.0902 -1.78223,-2.80846 -4.264368,-0.79586 -6.832603,-2.15229 l 1.937463,-0.67628 c 0.670632,0.37183 1.33315,0.41593 1.96744,0.41522 v -10.6306 h -5.036613 c -0.20179,0.0473 -0.21449,-2.18899 0,-2.13713 l 5.036613,0.002 -0.001,-5.04931 c -0.0483,-0.21449 2.18969,-0.19614 2.1396,0 z m 3.31576,7.18397 h -1.01177 c 0.004,0.32773 10e-4,0.62194 10e-4,0.85901 0,0.78317 1.59526,1.75789 2.0387,1.95827 0.14958,-1.2125 -0.12029,-1.60549 -0.8128,-2.50049 -0.0832,-0.10689 -0.15451,-0.21167 -0.21519,-0.31679"
+       style="fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.352778" />
+  </g>
+</svg>
--- a/filadelfia_archive/public/assets/logo_nobg.svg
+++ b/filadelfia_archive/public/assets/logo_nobg.svg
@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="100.749" height="100.749" viewBox="0 0 26.657 26.657"><path d="M103.772 127.627c7.362 0 13.329 5.967 13.329 13.328s-5.967 13.329-13.329 13.329c-7.36 0-13.328-5.968-13.328-13.329 0-7.36 5.967-13.328 13.328-13.328" style="fill:#18597d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.352778" transform="translate(-90.444 -127.627)"/><path d="M103.772 128.363c-6.955 0-12.592 5.638-12.592 12.592 0 6.955 5.637 12.593 12.592 12.593 6.955 0 12.593-5.638 12.593-12.593 0-6.954-5.638-12.592-12.593-12.592" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.352778" transform="translate(-90.444 -127.627)"/><path d="M103.744 129.681c6.195 0 11.216 5.022 11.216 11.216 0 6.195-5.021 11.217-11.216 11.217-6.194 0-11.216-5.022-11.216-11.217 0-6.194 5.022-11.216 11.216-11.216" style="fill:#18597d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.352778" transform="translate(-90.444 -127.627)"/><path d="M102.982 131.027v5.05h3.345c.562-1.176 2.26-2.767 3.27-3.647l-.453 1.06c.079-.066-.703 1.291.009 2.819.632 1.357 1.07 2.098 1.289 3.73.353-.94.567-1.627 1.04-2.176.276-.318.316-.937.27-1.64.385.422.936 2.092.828 3.437-.054.671.11 2.832-2.175 3.463-.368 1.34-1.243 2.578-2.69 3.38-1.787.99-2.581.203-3.82 2.155-.06-.337-.068-.72-.078-.995-.12-.159-.208-.27-.264-.574-.06-.16 0-.511.264-.573-.013-1.37 1.364-1.156 1.606-1.955.524-1.248-1.575-1.398-2.44-2.125v6.709c.3.173.584.44.847.855 1.29-2.034 3.092-.542 4.952-1.574l1.83.631-.133.108c-2.524 1.231-4.954-.674-6.708 2.09-1.782-2.808-4.264-.796-6.832-2.152l1.937-.677c.67.372 1.333.416 1.968.416v-10.63h-5.037c-.202.046-.215-2.19 0-2.138l5.037.002-.001-5.05c-.049-.214 2.19-.196 2.14 0zm3.316 7.184h-1.012c.004.328.001.622.001.86 0 .782 1.596 1.757 2.039 1.957.15-1.212-.12-1.605-.813-2.5a2.774 2.774 0 0 1-.215-.317" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.352778" transform="translate(-90.444 -127.627)"/></svg>
--- a/filadelfia_archive/public/assets/placeholder.avif
+++ b/filadelfia_archive/public/assets/placeholder.avif
--- a/filadelfia_archive/public/assets/tempus-dominus.css
+++ b/filadelfia_archive/public/assets/tempus-dominus.css
--- a/filadelfia_archive/public/favicon.ico
+++ b/filadelfia_archive/public/favicon.ico
--- a/filadelfia_archive/public/index.html
+++ b/filadelfia_archive/public/index.html
@ -0,0 +1,213 @@
+<!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8">
+  <title>Filadelfia myndhvelfing</title>
+  <base href="/">
+  <meta name="viewport" content="width=device-width, initial-scale=1">
+  <link rel="apple-touch-icon" sizes="180x180" href="/assets/apple-touch-icon.png">
+  <link rel="icon" type="image/png" href="/assets/favicon.png">
+  <style>
+
+[hidden] { display: none !important; }
+
+:root { --bg: #fff; --bg-component: #f3f7ff; --bg-component-half: #f3f7ff77; --bg-component-alt: #ffd99c; --color: #031131; --color-alt: #7a9ad3; --main: #18597d; --main-fg: #fff; --error: red; --error-bg: hsl(0, 75%, 80%); }  /* Box sizing rules */
+*, *::before, *::after { box-sizing: border-box;
+}
+
+/* Remove default margin */
+body, h1, h2, h3, h4, p, figure, blockquote, dl, dd { margin: 0; }
+
+body { min-height: 100vh; text-rendering: optimizeSpeed; line-height: 1.5; font-size: 16px; font-family: 'Inter var', Helvetica, Arial, sans-serif; font-variation-settings: "slnt" 0; font-feature-settings: "case", "frac", "tnum", "ss02", "calt", "ccmp", "kern"; background: var(--bg); color: var(--color); display: flex; flex-direction: column; }
+
+.italic { font-variation-settings: "slnt" 10deg; }
+
+input, button, textarea, select { font: inherit; }
+
+h1 { font-size: 1.88rem; }
+h2 { font-size: 1.66rem; }
+h3 { font-size: 1.44rem; }
+h4 { font-size: 1.22rem; }
+h5 { font-size: 1.0rem; }
+
+a, a:visited, button { text-decoration: underline; border: none; padding: 0; margin: 0; font-weight: bold; cursor: pointer; color: var(--main); background: transparent; }
+h1 { margin-bottom: 1rem; }
+#main { flex: 2 1 auto; display: flex; flex-direction: column; }
+.page { flex: 2 1 auto; display: flex; flex-direction: column; }
+.modal { flex: 2 1 auto; display: flex; flex-direction: column; justify-content: center; align-items: center; }
+.modal h3 { text-align: center; margin-bottom: 1rem; }
+.error { color: var(--error); }
+.modal form { background: var(--bg-component); border-radius: 20px; width: 100%; max-width: 500px; margin: 2rem; padding: 1rem; display: flex; flex-direction: column; }
+.loading-spinner { display: inline-block; width: 80px; height: 80px; margin-top: 0.5rem; align-self: center; }
+.loading-spinner:after { content: " "; display: block; width: 64px; height: 64px; margin: 8px; border-radius: 50%; border: 6px solid var(--main); border-color: var(--main) transparent var(--main) transparent; animation: loading-spinner 1.2s linear infinite; }
+@keyframes loading-spinner { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
+
+/* Common components */
+
+.row { display: flex; }
+.column { display: flex; flex-direction: column; }
+.filler { flex-grow: 2; }
+
+input[type=text],
+input[type=password],
+input[type=datetime] { border: 1px solid var(--main); background: #fff; color: var(--color); border-radius: 0; padding: 0.25rem; line-height: 1rem; outline: none; width: 100%; }
+
+input[type=text]:disabled,
+input[type=password]:disabled,
+input[type=datetime]:disabled { background: var(--bg-component); border-color: var(--color-alt); color: var(--color-alt); }
+
+.form-row input:disabled + button { border-color: var(--color-alt); }
+.form-row { display: flex; position: relative; flex-wrap: wrap; }
+.form-row input { flex: 2 1 auto; }
+.form-row > input { width: auto; }
+.form-row .form-column { display: flex; flex-direction: column; justify-content: space-around; }
+.form-row button { min-width: 30px; text-align: center; border: 1px solid var(--main); border-left: none; background: var(--bg-component); text-decoration: none; }
+.form-row.image-banner { background-size: cover; background-color: white; border: 2px dashed var(--main); aspect-ratio: 16 / 9; align-self: center; width: 100%; max-width: 360px; }
+.form-row .cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
+
+input[type=text]:focus,
+input[type=password]:focus,
+input[type=datetime]:focus { outline: 1px solid var(--main); }
+.button, input[type=submit] { background: var(--main); color:var(--main-fg); border-radius: 10px; padding: 0.25rem 1rem; border: none; margin: 1rem 0 2rem; align-self: center; cursor: pointer; text-decoration: none; }
+
+.button.spinner, input[type=submit].spinner { height: 2rem; margin-top: 2rem; margin-bottom: 1.5rem; }
+.button-alert { background: var(--error-bg); color: var(--color); }
+
+.loading-bar { border: 1px solid var(--main); background: var(--bg-component); }
+.loading-bar::after { height: 1rem; background: var(--main); min-width: 1px; content: ''; display: block; width: var(--progress); transition: width 3s; }
+
+form p, label { font-size: 0.75rem; font-weight: 500; margin: 0.75rem 0 0.5rem 0; display: block; }
+form p.separator { color: var(--color-alt); margin-top: 1.5rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--color-alt); }
+
+/* Nav */
+
+#header { background: var(--bg-component); }
+
+#header nav { display: flex; }
+#header nav,
+#header .nav { text-align: center; padding: 0.5rem 1rem 0.5rem 0; justify-content: flex-end; flex-wrap: wrap; }
+
+#header nav a,
+#header nav button { margin-left: 1rem; }
+
+#header h4 { flex: 2 1 auto; margin: -0.5rem;  }
+
+#header h4 a,
+#header h4 a:visited { background: url('/assets/logo_nobg.svg') left center no-repeat; background-size: auto calc(3rem - 4px); height: 3rem; display: inline-block; padding-left: 3rem; line-height: 3rem; }
+
+#header .link { font-size: 1.0rem; line-height: 2rem; font-weight: normal; padding: 0 0.5rem; }
+#header .changelang { font-size: 1.2rem; }
+#header .logout,
+#header .upload { padding: 0.25rem 1.5rem; border-radius: 2rem; text-decoration: none; }
+
+#header .logout { background: var(--bg-component-alt); color: var(--color); }
+#header .upload { background: var(--main); color: var(--main-fg); }
+#header .nav { overflow-x: hidden; padding: 0.75rem 1rem 0.25rem; min-height: 4rem; align-items: flex-start; border-bottom: 1px solid #0001; }
+#header .nav:hover { overflow-x: auto; }
+#header .nav .inner { padding-top: 0.5rem; }
+#header .nav a { margin: 0 0.25rem; padding: 0.25rem 1.5rem; border-radius: 3rem; }
+#header .nav a.empty { opacity: 0.5; }
+#header .nav a.active { background: var(--bg-component-alt); color: var(--color); text-decoration: none; }
+#header .error { background: var(--error-bg); color: var(--color); font-size: 0.8rem; text-align: center; padding: 0.25rem; cursor: pointer; }
+
+/* Main */
+
+.full-error { background: var(--error-bg); color: var(--color); font-size: 0.8rem; text-align: center; padding: 0.25rem; cursor: pointer; flex: 2 1 auto; display: flex; justify-content: center; align-items: center; }
+
+footer { text-align: center; padding: 1rem; }
+
+footer a { font-size: 0.8rem; }
+
+/* login */
+/* upload */
+
+.page-login,
+.page-upload { background-image: url('./assets/bg.avif'); background-repeat: no-repeat; background-position: center; background-size: cover; }
+.page-login .modal form,
+.page-upload .modal form { backdrop-filter: blur(10px); background: var(--bg-component-half); }
+
+/* browse */
+
+.gallery { margin: 1rem; display: flex; flex-direction: column; }
+.gallery-year { margin: 1rem; padding: 0 0 1rem; border-bottom: 1px solid var(--main); text-align: center; font-size: 2rem; }
+.gallery-month { margin: 0rem 1rem 1rem; font-size: 1.2rem; border-bottom: 1px solid #0003; }
+.gallery .group { display: flex; flex-wrap: wrap; }
+.gallery .group a { width: calc(50vw - 4rem); max-width: 320px; aspect-ratio: 16 / 9; display: flex; flex-direction: column; justify-content: flex-end; background: url('./assets/placeholder.avif') center no-repeat; background-size: cover; margin: 0 1rem 1rem; text-align: center; border: 1px solid var(--main); }
+
+.gallery .group a span { align-self: stretch; text-align: center; background: #fffb; }
+
+/* Player */
+
+.player { background: black; text-align: center; margin-bottom: 1rem; }
+.player video { margin: 0 auto; width: 1280px; max-width: 100%; aspect-ratio: 16 / 9; }
+
+/* article */
+
+.article { width: 100%; max-width: 1280px; padding: 0.5rem; align-self: center; margin-bottom: 5rem; }
+.article .full-error { margin-top: 1rem; }
+.article-name { flex: 2 1 auto; margin-left: 1rem; }
+.article h1 { margin: 0; }
+.article h1,
+.article p { padding: 0 0.5rem 0.5rem; }
+
+/* table */
+
+.table { display: grid; column-gap: 0; row-gap: 0; grid-template-columns: minmax(150px, 1.33fr) minmax(150px, 2.33fr); }
+.table-row { display: contents; }
+.table-row:nth-child(odd) .table-item { background: #f8f6ff; }
+.table-item { padding: 0.5rem; }
+
+/* holdbutton */
+.holdbutton {
+  --hold-bg: var(--bg-component);
+  --hold-color: var(--main);
+  --hold-fill: var(--main);
+  --hold-fill-fg: white;
+  display: inline-block;
+  background: var(--hold-bg);
+  position: relative;
+  padding: 0;
+}
+.holdbutton .inner {
+  padding: 0.25rem 1rem; 
+  display: flex;
+  align-items: center;
+  text-align: center;
+  justify-content: center;
+  height: 100%;
+  background: var(--hold-color);
+  background-clip: text;
+  color: transparent;
+}
+.holdbutton.holdbutton-active {
+  background: linear-gradient( var(--hold-fill) , var(--hold-fill)) var(--hold-bg) no-repeat 0 0;
+  background-size: 0 100%;
+  animation: stripes 2s linear 1 forwards;
+}
+.holdbutton.holdbutton-active div.inner {
+  background: linear-gradient( var(--hold-fill-fg), var(--hold-fill-fg)) var(--hold-color) no-repeat 0 0;
+  background-size: 0 100%;
+  animation: stripes 2s linear 1 forwards;
+  background-clip: text;
+}
+
+@keyframes stripes { to { background-size: 100% 100%; } }
+
+@media (pointer:coarse) {
+  #header .nav { overflow-x: scroll; }
+}
+@media screen and (max-width: 700px){
+  .gallery, .gallery-year { margin: 0.25rem; }
+  .gallery-month { margin: 0rem 0.25rem 0.25rem; }
+  .gallery .group a { margin: 0 0.25rem 0.25rem; width: calc(50vw - 1rem); font-size: min(3vw, 1rem); }
+  
+}
+
+  </style>
+</head>
+<body>
+  <div id="header"></div>
+  <main id="main"></main>
+  <script type="text/javascript" src="/assets/app.js?v=2"></script>
+</body>
+</html>
--- a/filadelfia_archive/rawassets/bg.png
+++ b/filadelfia_archive/rawassets/bg.png
--- a/filadelfia_archive/rawassets/bg_admin.jpg
+++ b/filadelfia_archive/rawassets/bg_admin.jpg
--- a/filadelfia_web/api/video/routes.mjs
+++ b/filadelfia_web/api/video/routes.mjs
@ -1,36 +0,0 @@
-import config from '../../base/config.mjs'
-import Client from '../../base/media/client.mjs'
-import { deleteFile, uploadFile } from '../../base/media/upload.mjs'
-import { parseVideos, parseVideo } from './util.mjs'
-
-export default class VideoRoutes {
-  constructor(opts = {}) {
-    Object.assign(this, {
-      uploadFile: uploadFile,
-      deleteFile: deleteFile,
-    })
-  }
-
-  register(server) {
-    server.flaska.get('/api/videos', server.authenticate(), this.getVideos.bind(this))
-    server.flaska.get('/api/videos/uploadToken', server.authenticate(), this.getUploadToken.bind(this))
-  }
-
-  /** GET: /api/videos */
-  async getVideos(ctx) {
-    console.log(ctx.state.auth_token)
-    let res = await ctx.db.safeCallProc('filadelfia_archive.videos_auth_get_all', [ctx.state.auth_token])
-
-    ctx.body = {
-      videos: parseVideos(res.results[0]),
-    }
-  }
-
-  async getUploadToken(ctx) {
-    const media = config.get('media')
-
-    return {
-      token: Client.createJwt({ iss: media.iss }, media.secret),
-    }
-  }
-}
--- a/filadelfia_web/app/api.js
+++ b/filadelfia_web/app/api.js
@ -1,73 +0,0 @@
-const Authentication = require('./authentication')
-
-const api = {
-  loading: false,
-  sendRequest: function(options, isPagination) {
-    api.loading = true
-    let token = Authentication.getToken()
-    let pagination = isPagination
-  
-    if (token) {
-      options.headers = options.headers || {}
-      options.headers['Authorization'] = 'Bearer ' + token
-    }
-  
-    options.extract = function(xhr) {
-      if (xhr.responseText && xhr.responseText.slice(0, 9) === '<!doctype') {
-        if (xhr.status === 500) {
-          throw new Error('Server is temporarily down, try again later.')
-        }
-        throw new Error('Expected JSON but got HTML (' + xhr.status + ': ' + this.url.split('?')[0] + ')')
-      }
-      let out = null
-      if (pagination && xhr.status < 300) {
-        let headers = {}
-  
-        xhr.getAllResponseHeaders().split('\r\n').forEach(function(item) {
-          var splitted = item.split(': ')
-          headers[splitted[0]] = splitted[1]
-        })
-  
-        out = {
-          headers: headers || {},
-          data: JSON.parse(xhr.responseText),
-        }
-      } else {
-        if (xhr.responseText) {
-          out = JSON.parse(xhr.responseText)
-        } else {
-          out = {}
-        }
-      }
-      if (xhr.status >= 300) {
-        if (out.message) {
-          throw out
-        }
-        console.error('Got error ' + xhr.status + ' but no error message:', out)
-        throw new Error('Unknown or empty response from server.')
-      }
-      return out
-    }
-  
-    return m.request(options)
-      .then(function(res) {
-        api.loading = false
-        window.requestAnimationFrame(m.redraw.bind(m))
-        return res
-      })
-      .catch(function (error) {
-        api.loading = false
-        window.requestAnimationFrame(m.redraw.bind(m))
-        if (error.status === 403) {
-          Authentication.clearToken()
-          m.route.set('/', { redirect: m.route.get() })
-        }
-        if (error.response && error.response.status) {
-          return Promise.reject(error.response)
-        }
-        return Promise.reject(error)
-      })
-  }
-}
-
-module.exports = api
--- a/filadelfia_web/app/header.js
+++ b/filadelfia_web/app/header.js
@ -1,42 +0,0 @@
-const m = require('mithril')
-const videos = require('./videos')
-const Authentication = require('./authentication')
-const lang = require('./lang')
-
-const Menu = {
-  oninit: function(vnode) {
-    this.currentActive = 'home'
-    this.loading = false
-    this.onbeforeupdate()
-  },
-
-  onbeforeupdate: function() {
-    let currentPath = m.route.get()
-
-    /*if (currentPath === '/') this.currentActive = 'home'
-    else if (currentPath === '/login') this.currentActive = 'login'
-    else if (currentPath && currentPath.startsWith('/page')) this.currentActive = currentPath.slice(currentPath.lastIndexOf('/') + 1)*/
-  },
-
-  logOut: function() {
-    Authentication.clearToken()
-    m.route.set('/')
-  },
-
-  view: function() {
-    return Authentication.currentUser
-      ? [
-          m('nav', [
-            m('h4', m(m.route.Link, { href: '/browse' }, lang.header_title /* Filadelfia archival center */)),
-            m('a.change', { onclick: lang.langtoggle }, lang.lang_current),
-            Authentication.currentUser.rank > 10
-              ? m(m.route.Link, { class: 'upload', href: '/upload' }, lang.upload_goto) // Upload
-              : null,
-            m('button.logout', { onclick: this.logOut }, lang.header_logout), // Log out
-          ])
-        ]
-      : null
-  },
-}
-
-module.exports = Menu
--- a/filadelfia_web/app/input.js
+++ b/filadelfia_web/app/input.js
@ -1,72 +0,0 @@
-const m = require('mithril')
-const popper = require('@popperjs/core')
-const tempus = require('@eonasdan/tempus-dominus')
-
-const Input = {
-  oninit: function(vnode) {
-    this.tempus = null
-    this.subscription = null
-  },
-
-  onremove: function(vnode) {
-    if (!this.tempus) return
-    this.tempus.dispose()
-    this.tempus = null
-  },
-
-  getInput: function(vnode) {
-    switch (vnode.attrs.utility) {
-      case 'datetime':
-        return m('input', {
-          type: 'text',
-          oncreate: (e) => {
-            this.tempus = new tempus.TempusDominus(e.dom, {
-              defaultDate: vnode.attrs.form[vnode.attrs.formKey],
-              viewDate: vnode.attrs.form[vnode.attrs.formKey],
-              localization: {
-                locale: 'is',
-                startOfTheWeek: 0,
-                hourCycle: 'h23',
-                dateFormats: {
-                  LTS: 'H:mm:ss',
-                  LT: 'H:mm',
-                  L: 'dd.MM.yyyy',
-                  LL: 'd [de] MMMM [de] yyyy',
-                  LLL: 'd [de] MMMM [de] yyyy H:mm',
-                  LLLL: 'dddd, d [de] MMMM [de] yyyy H:mm',
-                },
-              },
-            })
-            this.subscription = this.tempus.subscribe(tempus.Namespace.events.change, (e) => {
-              console.log(e);
-            });
-          },
-        })
-      default:
-        return m('input', {
-          type: vnode.attrs.type || 'text',
-          value: vnode.attrs.form[vnode.attrs.formKey],
-          oninput: (e) => { vnode.attrs.form[vnode.attrs.formKey] = e.currentTarget.value },
-        })
-    }
-  },
-
-  view: function(vnode) {
-    let input = m('input', {
-      type: vnode.attrs.type || 'text',
-      value: vnode.attrs.form[vnode.attrs.formKey],
-      oninput: (e) => { vnode.attrs.form[vnode.attrs.formKey] = e.currentTarget.value },
-    })
-
-    if (vnode.attrs.utility === 'datetime') {
-
-    }
-
-    return [
-      m('label', vnode.attrs.label),
-      this.getInput(vnode),
-    ]
-  },
-}
-
-module.exports = Input
--- a/filadelfia_web/app/lang.js
+++ b/filadelfia_web/app/lang.js
@ -1,76 +0,0 @@
-const out = {
-  currentlang: 'en',
-}
-
-const i18n = {
-  lang_change_long:       ['Skipta yfir á íslensku',
-                           'Change to english'],
-  lang_current:           ['en',
-                           'is'],
-  header_title:           ['Fíladelfia archival center',
-                           'Fíladelfia myndhvelfing'],
-  header_logout:          ['Log out',
-                           'Skrá út'],
-  title:                  ['Title',
-                           'Titill'],
-  date:                   ['Date',
-                           'Dagsetning'],
-  language:               ['EN',
-                           'IS'],
-  upload_goto:            ['Upload',
-                           'Upphlaða'],
-  login_error:            ['Error while logging in: {0}',
-                           'Villa við innskráningu: {0}'],
-  login_error_auth:       ['Unknown error from server. Try again later.',
-                           'Óþekkt villa frá vefþjóni. Reyndu aftur seinna.'],
-  login_missing_email:    ['Email is missing',
-                           'Email eða nafn vantar'],
-  login_missing_password: ['Password is missing',
-                           'Lykilorð vantar'],
-  login_email:            ['Email or name',
-                           'Email eða nafn'],
-  login_password:         ['Password',
-                           'Lykilorð'],
-  login_submit:           ['Log in',
-                           'Skrá inn'],
-  login_footer:           ['Photo by {0} on {1}',
-                           'Mynd eftir {0} frá {1}'],
-}
-const langs = {
-  'en': 0,
-  'is': 1,
-}
-
-const regexNumber = new RegExp('^\\d+$')
-
-out.langset = function(lang) {
-  out.currentlang = lang
-  let index = langs[lang]
-  let keys = Object.keys(i18n)
-  for (let key of keys) {
-    out[key] = i18n[key][index]
-  }
-}
-
-out.langtoggle = function() {
-  out.langset(out.currentlang === 'en' ? 'is' : 'en')
-  return false
-}
-
-out.format = function(str, ...args) {
-  return out.mformat(str, ...args).join('')
-}
-
-out.mformat = function(str, ...args) {
-  let split = (str || '').split(/\{|\}/)
-  return split.map(function(item) {
-    if (regexNumber.test(item)) {
-      return args[Number(item)] || item
-    }
-    return item
-  })
-}
-
-out.langset('is')
-
-module.exports = out
--- a/filadelfia_web/app/page_browse.js
+++ b/filadelfia_web/app/page_browse.js
@ -1,28 +0,0 @@
-const m = require('mithril')
-const Authentication = require('./authentication')
-const videos = require('./videos')
-
-const Browse = {
-  oninit: function(vnode) {
-    Authentication.requiresLogin()
-    if (!videos.Tree.length) {
-      this.refreshTree()
-    }
-  },
-
-  refreshTree: function(vnode) {
-    videos.refreshTree()
-  },
-
-  view: function(vnode) {
-    return [
-      videos.error
-        ? m('div.full-error', { onclick: this.refreshTree.bind(this) }, [
-            videos.error, m('br'), 'Click here to try again'
-          ])
-        : null,
-    ]
-  },
-}
-
-module.exports = Browse
--- a/filadelfia_web/app/page_upload.js
+++ b/filadelfia_web/app/page_upload.js
@ -1,63 +0,0 @@
-const m = require('mithril')
-const Authentication = require('./authentication')
-const api = require('./api')
-const Input = require('./input')
-
-const Upload = {
-  oninit: function(vnode) {
-    Authentication.requiresLogin()
-    this.error = ''
-    let d = new Date()
-    d.setDate(d.getDate() - d.getDay())
-    d.setHours(11)
-    d.setMinutes(0)
-    d.setSeconds(0)
-    d.setMilliseconds(0)
-
-    this.form = {
-      title: '',
-      date: d,
-      file: null,
-    }
-  },
-  
-  uploadvideo: function(vnode, e) {
-    console.log(this.form)
-    return false
-  },
-
-  view: function(vnode) {
-    return [
-      m('div.page.page-upload', [
-        m('div.modal', [
-          m('form', {
-            onsubmit: this.uploadvideo.bind(this, vnode),
-          }, [
-            m('h3', 'Upload new video'),
-            this.error ? m('p.error', this.error) : null,
-            m(Input, {
-              label: 'Title',
-              form: this.form,
-              formKey: 'title',
-            }),
-            m(Input, {
-              label: 'Date',
-              type: 'text',
-              utility: 'datetime',
-              form: this.form,
-              formKey: 'date',
-            }),
-            m('input.spinner', {
-              hidden: api.loading,
-              type: 'submit',
-              value: 'Begin upload',
-            }),
-            api.loading ? m('div.loading-spinner') : null,
-          ]),
-        ]),
-      ]),
-    ]
-  },
-}
-
-module.exports = Upload
--- a/filadelfia_web/app/videos.js
+++ b/filadelfia_web/app/videos.js
@ -1,35 +0,0 @@
-const m = require('mithril')
-const api = require('./api')
-
-const Tree = []
-
-exports.Tree = Tree
-
-exports.loading = false
-exports.error = ''
-
-exports.refreshTree = function() {
-  exports.error = ''
-
-  if (exports.loading) return Promise.resolve()
-
-  exports.loading = true
-
-  m.redraw()
-
-  return api.sendRequest({
-    method: 'GET',
-    url: '/api/videos',
-  })
-  .then(pages => {
-    console.log(pages)
-    Tree.splice(0, Tree.length)
-    Tree.push.apply(Tree, pages.videos)
-    exports.loading = false
-    m.redraw()
-  }, err => {
-    exports.loading = false
-    m.redraw()
-    exports.error = 'Error fetching videos: ' + err.message
-  })
-}
--- a/filadelfia_web/build-package.json
+++ b/filadelfia_web/build-package.json
@ -1,8 +0,0 @@
-{
-  "scripts": {
-    "build": "echo done;"
-  },
-  "dependencies": {
-    "service-core": "^3.0.0-beta.17"
-  }
-}
--- a/filadelfia_web/dev.mjs
+++ b/filadelfia_web/dev.mjs
@ -1,24 +0,0 @@
-import fs from 'fs'
-import { ServiceCore } from 'service-core'
-import * as index from './index.mjs'
-
-const port = 4130
-
-var core = new ServiceCore('filadelfia_web', import.meta.url, port, '')
-
-let config = {
-  frontend: {
-    url: 'http://localhost:' + port
-  }
-}
-
-try {
-  config = JSON.parse(fs.readFileSync('./config.json'))
-} catch {}
-
-config.port = port
-
-core.setConfig(config)
-core.init(index).then(function() {
-  return core.run()
-})
--- a/filadelfia_web/index.mjs
+++ b/filadelfia_web/index.mjs
@ -1,11 +0,0 @@
-import config from './base/config.mjs'
-
-export function start(http, port, ctx) {
-  config.sources[1].store = ctx.config
-
-  return import('./api/server.mjs')
-  .then(function(module) {
-    let server = new module.default(http, port, ctx)
-    return server.run()
-  })
-}
--- a/filadelfia_web/public/assets/bg.jpg
+++ b/filadelfia_web/public/assets/bg.jpg
--- a/filadelfia_web/public/index.html
+++ b/filadelfia_web/public/index.html
@ -1,299 +0,0 @@
-<!doctype html>
-<html lang="en">
-<head>
-  <meta charset="utf-8">
-  <title>Filadelfia web portal</title>
-  <base href="/">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="icon" type="image/png" href="/favicon.png">
-  <style>
-
-[hidden] { display: none !important; }
-
-:root {
-  --bg: #fff;
-  --bg-component: #f3f7ff;
-  --bg-component-half: #f3f7ff77;
-  --bg-component-alt: #ffd99c;
-  --color: #031131;
-  --main: #1066ff;
-  --main-fg: #fff;
-  --error: red;
-  --error-bg: hsl(0, 75%, 80%);
-}
-    
-/* Box sizing rules */
-*, *::before, *::after { box-sizing: border-box;
-}
-
-/* Remove default margin */
-body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
-  margin: 0;
-}
-
-body {
-  min-height: 100vh;
-  text-rendering: optimizeSpeed;
-  line-height: 1.5;
-  font-size: 16px;
-  font-family: 'Inter var', Helvetica, Arial, sans-serif;
-  font-variation-settings: "slnt" 0;
-  font-feature-settings: "case", "frac", "tnum", "ss02", "calt", "ccmp", "kern";
-  background: var(--bg);
-  color: var(--color);
-  display: flex;
-  flex-direction: column;
-}
-
-.italic { font-variation-settings: "slnt" 10deg; }
-
-input, button, textarea, select {
-  font: inherit;
-}
-
-h1 {
-  font-size: 1.88rem;
-}
-h2 {
-  font-size: 1.66rem;
-}
-h3 {
-  font-size: 1.44rem;
-}
-h4 {
-  font-size: 1.22rem;
-}
-h5 {
-  font-size: 1.0rem;
-}
-
-a, a:visited, button {
-  text-decoration: underline;
-  border: none;
-  padding: 0;
-  margin: 0;
-  font-weight: bold;
-  cursor: pointer;
-  color: var(--main);
-  background: transparent;
-}
-
-
-input[type=text],
-input[type=password],
-input[type=datetime] {
-  border: 1px solid var(--main);
-  background: #fff;
-  color: var(--color);
-  border-radius: 0;
-  padding: 0.25rem;
-  line-height: 1rem;
-  outline: none;
-  width: 100%;
-}
-
-.button, input[type=submit] {
-  background: var(--main);
-  color:var(--main-fg);
-  border-radius: 10px;
-  padding: 0.25rem 1rem;
-  border: none;
-  margin: 1rem 0 2rem;
-  align-self: center;
-  cursor: pointer;
-}
-
-.button.spinner, input[type=submit].spinner {
-  height: 2rem;
-  margin-top: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-input[type=text]:focus,
-input[type=password]:focus,
-input[type=datetime]:focus {
-  outline: 1px solid var(--main);
-}
-
-h1 {
-  margin-bottom: 1rem;
-}
-
-#main {
-  flex: 2 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.page {
-  flex: 2 1 auto;
-  display: flex;
-  flex-direction: column;
-}
-
-.modal {
-  flex: 2 1 auto;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-
-.modal h3 {
-  text-align: center;
-  margin-bottom: 1rem;
-}
-
-form p, label {
-  font-size: 0.75rem;
-  font-weight: 500;
-  margin: 0.5rem 0;
-  display: block;
-}
-
-.error {
-  color: var(--error);
-}
-
-.modal form {
-  background: var(--bg-component);
-  border-radius: 20px;
-  width: 100%;
-  max-width: 500px;
-  margin: 2rem;
-  padding: 1rem;
-  display: flex;
-  flex-direction: column;
-}
-
-.loading-spinner {
-  display: inline-block;
-  width: 80px;
-  height: 80px;
-  align-self: center;
-}
-.loading-spinner:after {
-  content: " ";
-  display: block;
-  width: 64px;
-  height: 64px;
-  margin: 8px;
-  border-radius: 50%;
-  border: 6px solid var(--main);
-  border-color: var(--main) transparent var(--main) transparent;
-  animation: loading-spinner 1.2s linear infinite;
-}
-@keyframes loading-spinner {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-/* Nav */
-
-#header nav {
-  display: flex;
-  background: var(--bg-component);
-  padding: 0.5rem 1rem 0.5rem 0;
-}
-
-#header nav a,
-#header nav button {
-  margin-left: 1rem;
-}
-
-#header h4 {
-  flex: 2 1 auto;
-}
-
-#header h4 a,
-#header h4 a:visited {
-  color: var(--color);
-}
-
-#header .change {
-  font-size: 1.2rem;
-  line-height: 2rem;
-  font-weight: normal;
-  padding: 0 0.5rem;
-}
-
-#header .logout,
-#header .upload {
-  padding: 0.25rem 1.5rem;
-  border-radius: 2rem;
-  text-decoration: none;
-}
-
-#header .logout {
-  background: var(--bg-component-alt);
-  color: var(--color);
-}
-
-#header .upload {
-  background: var(--main);
-  color: var(--main-fg);
-}
-
-/* Main */
-
-.full-error {
-  background: var(--error-bg);
-  color: var(--color);
-  font-size: 0.8rem;
-  text-align: center;
-  padding: 0.25rem;
-  cursor: pointer;
-  flex: 2 1 auto;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-footer {
-  text-align: center;
-  padding: 1rem;
-}
-
-footer a {
-  font-size: 0.8rem;
-}
-
-/* login */
-
-.page-login form a {
-  text-align: center;
-  font-weight: normal;
-}
-
-.page-login {
-  background-repeat: no-repeat;
-  background-position: center;
-  background-size: cover;
-}
-
-.page-login .modal form {
-  backdrop-filter: blur(10px);
-  background: var(--bg-component-half);
-}
-
-.avifsupport .page-login {
-  background-image: url('./assets/bg.avif');
-}
-
-.jpegonly .page-login {
-  background-image: url('./assets/bg.jpg');
-}
-
-
-  </style>
-</head>
-<body>
-  <div id="header"></div>
-  <main id="main"></main>
-  <script type="text/javascript" src="/assets/app.js?v=2"></script>
-</body>
-</html>
--- a/nfp_moe/package.json
+++ b/nfp_moe/package.json
@ -14,7 +14,7 @@
    "build": "asbundle app/index.js public/assets/app.js && asbundle app/admin/admin.js public/assets/admin.js",
    "dev:build": "npm-watch build",
    "dev:server": "node index.mjs | bunyan",
-    "dev": "npm-watch dev:server",
+    "dev": "npm-watch dev:server"
  },
  "watch": {
    "dev:server": {
Author	SHA1	Message	Date
Jonatan Nilsson	852f37dc8d	filadelfia_archive: Fix header / deploy (push) Successful in -22h4m50s Details	2023-12-06 05:06:01 +00:00
Jonatan Nilsson	14a3bc3123	filadelfia_archive: Fix mobile experience a bit, make it at least usable. / deploy (push) Successful in -22h5m43s Details	2023-12-06 04:54:37 +00:00
Jonatan Nilsson	ab2e7b93c4	filadelfia_archive: Rename website / deploy (push) Successful in -22h35m14s Details	2023-12-05 23:01:48 +00:00
Jonatan Nilsson	2e7b3be8d5	filadelfia_archive: When generating a banner, do incremental lower quality to fit 8000 character limit / deploy (push) Successful in -22h35m19s Details	2023-12-05 22:57:59 +00:00
Jonatan Nilsson	533e279b0b	filadelfia_archive: Add another missing dependency / deploy (push) Successful in -34h4m28s Details	2023-11-30 04:31:01 +00:00
Jonatan Nilsson	e75719682e	filadelfia_archive: Fix missing dependency / deploy (push) Successful in -34h4m36s Details	2023-11-30 04:29:41 +00:00
Jonatan Nilsson	c55f0c9a02	filadelfia_archive: Update msnodesqlv8 / deploy (push) Successful in -34h4m35s Details	2023-11-30 04:27:15 +00:00
Jonatan Nilsson	0b686a462f	filadelfia_archive: Fix name in package.json / deploy (push) Failing after -34h5m19s Details	2023-11-30 04:22:35 +00:00
Jonatan Nilsson	329a3e267c	filadelfia_archive: Rename / deploy (push) Has been cancelled Details	2023-11-30 04:21:05 +00:00
Jonatan Nilsson	ab9ed32196	filadelfia_archive: Finished implementing 1.0	2023-11-30 04:14:42 +00:00
Jonatan Nilsson	3a6996bfbb	base: Fix logging of sql parameter errors	2023-11-30 04:13:08 +00:00
TheThing	bdeeff3794	dev / deploy (push) Successful in -34h50m18s Details	2023-11-29 19:19:41 +00:00
Jonatan Nilsson	fad7acd5f7	nfp_moe: Fix typo in package.json / deploy (push) Successful in -53h46m37s Details	2023-11-20 07:12:40 +00:00
Jonatan Nilsson	2d7101d666	filadelfia_web: More development	2023-11-20 07:12:08 +00:00
Jonatan Nilsson	16b87aabcf	base: Slight changes	2023-11-20 07:11:57 +00:00
				`@ -0,0 +1 @@`
				<svg xmlns="http://www.w3.org/2000/svg" width="100.749" height="100.749" viewBox="0 0 26.657 26.657"><path d="M103.772 127.627c7.362 0 13.329 5.967 13.329 13.328s-5.967 13.329-13.329 13.329c-7.36 0-13.328-5.968-13.328-13.329 0-7.36 5.967-13.328 13.328-13.328" style="fill:#18597d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.352778" transform="translate(-90.444 -127.627)"/><path d="M103.772 128.363c-6.955 0-12.592 5.638-12.592 12.592 0 6.955 5.637 12.593 12.592 12.593 6.955 0 12.593-5.638 12.593-12.593 0-6.954-5.638-12.592-12.593-12.592" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.352778" transform="translate(-90.444 -127.627)"/><path d="M103.744 129.681c6.195 0 11.216 5.022 11.216 11.216 0 6.195-5.021 11.217-11.216 11.217-6.194 0-11.216-5.022-11.216-11.217 0-6.194 5.022-11.216 11.216-11.216" style="fill:#18597d;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.352778" transform="translate(-90.444 -127.627)"/><path d="M102.982 131.027v5.05h3.345c.562-1.176 2.26-2.767 3.27-3.647l-.453 1.06c.079-.066-.703 1.291.009 2.819.632 1.357 1.07 2.098 1.289 3.73.353-.94.567-1.627 1.04-2.176.276-.318.316-.937.27-1.64.385.422.936 2.092.828 3.437-.054.671.11 2.832-2.175 3.463-.368 1.34-1.243 2.578-2.69 3.38-1.787.99-2.581.203-3.82 2.155-.06-.337-.068-.72-.078-.995-.12-.159-.208-.27-.264-.574-.06-.16 0-.511.264-.573-.013-1.37 1.364-1.156 1.606-1.955.524-1.248-1.575-1.398-2.44-2.125v6.709c.3.173.584.44.847.855 1.29-2.034 3.092-.542 4.952-1.574l1.83.631-.133.108c-2.524 1.231-4.954-.674-6.708 2.09-1.782-2.808-4.264-.796-6.832-2.152l1.937-.677c.67.372 1.333.416 1.968.416v-10.63h-5.037c-.202.046-.215-2.19 0-2.138l5.037.002-.001-5.05c-.049-.214 2.19-.196 2.14 0zm3.316 7.184h-1.012c.004.328.001.622.001.86 0 .782 1.596 1.757 2.039 1.957.15-1.212-.12-1.605-.813-2.5a2.774 2.774 0 0 1-.215-.317" style="fill:#fff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:.352778" transform="translate(-90.444 -127.627)"/></svg>