Development

api/article/util.mjs

@@ -0,0 +1,21 @@
+export function parseArticles(articles) {
+  for (let i = 0; i < articles.length; i++) {
+    parseArticle(articles[i])
+  }
+  return articles
+}
+
+export function parseArticle(article) {
+  if (!article) {
+    return null
+  }
+  if (article.banner_path) {
+    article.banner_path = 'https://cdn.nfp.is' + article.banner_path
+    article.banner_prefix = 'https://cdn.nfp.is' + article.banner_prefix
+  }
+  if (article.media_path) {
+    article.media_path = 'https://cdn.nfp.is' + article.media_path
+    article.media_prefix = 'https://cdn.nfp.is' + article.media_prefix
+  }
+  return article
+}

api/page/model.mjs

@@ -1,4 +1,5 @@
 import { parseFile } from '../file/util.mjs'
+import { parseArticle, parseArticles } from '../article/util.mjs'
 
 export async function getTree(ctx) {
   let res = await ctx.db.safeCallProc('pages_get_tree', [])
@@ -32,9 +33,9 @@ export async function getPage(ctx, path, page = 0, per_page = 10) {
 
   let out = {
     page: res.results[0][0] || null,
-    articles: res.results[1],
+    articles: parseArticles(res.results[1]),
     total_articles: res.results[2][0].total_articles,
-    featured: res.results[4][0] || null
+    featured: parseArticle(res.results[4][0]),
   }
   out.articles.forEach(article => {
     article.files = []

app/frontpage/frontpage.js

@@ -74,23 +74,23 @@ const Frontpage = {
 
   view: function(vnode) {
     var deviceWidth = window.innerWidth
-    var bannerPath = ''
+    var bannerPath = this.data.featured && this.data.featured.banner_prefix
 
-    if (this.data.featured && this.data.featured.banner) {
+    if (bannerPath) {
       var pixelRatio = window.devicePixelRatio || 1
-      if (deviceWidth < 400 && pixelRatio <= 1) {
+      if ((deviceWidth < 720 && pixelRatio <= 1)
-        bannerPath = window.supportsavif
+          || (deviceWidth < 360 && pixelRatio <= 2)) {
-                      && this.data.featured.banner.small_url_avif
+        bannerPath += '_small'
-                      || this.data.featured.banner.small_url
+      } else if ((deviceWidth < 1300 && pixelRatio <= 1)
-      } else if ((deviceWidth < 800 && pixelRatio <= 1)
+                || (deviceWidth < 650 && pixelRatio <= 2)) {
-                || (deviceWidth < 600 && pixelRatio > 1)) {
+        bannerPath += '_medium'
-        bannerPath = window.supportsavif
-                      && this.data.featured.banner.medium_url_avif
-                      || this.data.featured.banner.medium_url
       } else {
-        bannerPath = window.supportsavif
+        bannerPath += '_large'
-                      && this.data.featured.banner.large_url_avif
+      }
-                      || this.data.featured.banner.large_url
+      if (window.supportsavif) {
+        bannerPath += '.avif'
+      } else {
+        bannerPath += '.jpg'
       }
     }
 

app/widgets/fileupload.js

@@ -37,11 +37,11 @@ const FileUpload = {
     }, [
       this.preview || media
         ? vnode.attrs.useimg
-          ? [ m('img', { src: this.preview && this.preview.preview || media.large_url }), m('div.showicon')]
+          ? [ m('img', { src: this.preview && this.preview.preview || media }), m('div.showicon')]
           : m('a.display.inside', {
-              href: this.preview && this.preview.preview || media.large_url,
+              href: this.preview && this.preview.preview || media,
               style: {
-                'background-image': 'url("' + (this.preview && this.preview.preview || media.large_url) + '")',
+                'background-image': 'url("' + (this.preview && this.preview.preview || media) + '")',
               },
             }, m('div.showicon'))
         : m('div.inside.showbordericon')

app/widgets/newsitem.js

@@ -2,32 +2,40 @@ const Fileinfo = require('./fileinfo')
 
 const Newsitem = {
   oninit: function(vnode) {
-    if (vnode.attrs.article.media) {
+    let article = vnode.attrs.article
-      this.srcsetJpeg = vnode.attrs.article.media.small_url + ' 500w, '
+    if (article.media_prefix) {
-                      + vnode.attrs.article.media.medium_url + ' 800w '
+      this.fallbackImage = article.media_prefix + '_small.jpg'
-      if (vnode.attrs.article.media.small_url_avif) {
+      this.srcsetJpeg = article.media_prefix + '_small.jpg' + ' 720w, '
-        this.srcsetAvif = vnode.attrs.article.media.small_url_avif + ' 500w, '
+                      + article.media_prefix + '_medium.jpg' + ' 1300w, '
-                        + vnode.attrs.article.media.medium_url_avif + ' 800w '
+                      + article.media_prefix + '_large.jpg'
-      } else {
+      this.srcsetAvif = article.media_prefix + '_small.avif' + ' 720w, '
-        this.srcsetAvif = null
+                      + article.media_prefix + '_medium.avif' + ' 1300w, '
-      }
+                      + article.media_prefix + '_large.avif'
+
       this.coverSizes = '(max-width: 639px) calc(100vw - 40px), '
                       + '(max-width: 1000px) 300px, '
                       + '400px'
+    } else {
+      this.fallbackImage = null
+      this.srcsetJpeg = null
+      this.srcsetAvif = null
+      this.coverSizes = null
     }
   },
 
   view: function(vnode) {
+    let article = vnode.attrs.article
+
     return m('newsitem', [
       m(m.route.Link,
-        { href: '/article/' + vnode.attrs.article.path, class: 'title' },
+        { href: '/article/' + article.path, class: 'title' },
-        m('h3', [vnode.attrs.article.name])
+        m('h3', [article.name])
       ),
       m('div.newsitemcontent', [
-        vnode.attrs.article.media
+        this.fallbackImage
           ? m(m.route.Link, {
                 class: 'cover',
-                href: '/article/' + vnode.attrs.article.path,
+                href: '/article/' + article.path,
               },
               m('picture', [
                 this.srcsetAvif ? m('source', {
@@ -38,28 +46,29 @@ const Newsitem = {
                 m('img', {
                   srcset: this.srcsetJpeg,
                   sizes: this.coverSizes,
-                  alt: 'Image for news item ' + vnode.attrs.article.name,
+                  alt: 'Image for news item ' + article.name,
-                  src: vnode.attrs.article.media.small_url }),
+                  src: this.fallbackImage,
+                }),
               ])
             )
           : null,
         m('div.entrycontent', {
-          class: vnode.attrs.article.media ? '' : 'extrapadding',
+          class: article.media ? '' : 'extrapadding',
         }, [
-          (vnode.attrs.article.content
+          (article.content
-              ? m('.fr-view', m.trust(vnode.attrs.article.content))
+              ? m('.fr-view', m.trust(article.content))
               : null),
-          (vnode.attrs.article.files && vnode.attrs.article.files.length
+          (article.files && article.files.length
-            ? vnode.attrs.article.files.map(function(file) {
+            ? article.files.map(function(file) {
                 return m(Fileinfo, { file: file, trim: true })
               })
             : null),
           m('span.entrymeta', [
             'Posted ',
-            (vnode.attrs.article.page_path ? 'in' : ''),
+            (article.page_path ? 'in' : ''),
-            (vnode.attrs.article.page_path ? m(m.route.Link, { href: '/page/' + vnode.attrs.article.page_path }, vnode.attrs.article.page_name) : null),
+            (article.page_path ? m(m.route.Link, { href: '/page/' + article.page_path }, article.page_name) : null),
-            'at ' + (vnode.attrs.article.publish_at.replace('T', ' ').split('.')[0]).substr(0, 16),
+            'at ' + (article.publish_at.replace('T', ' ').split('.')[0]).substr(0, 16),
-            ' by ' + (vnode.attrs.article.admin_name || 'Admin'),
+            ' by ' + (article.admin_name || 'Admin'),
           ]),
         ]),
       ]),