Add avif support

api/serve.mjs

@@ -24,10 +24,14 @@ export function serve(docRoot, pathname, options = {}) {
         || filepath.endsWith('.png')
         || filepath.endsWith('.js')
         || filepath.endsWith('.css')
+        || filepath.endsWith('.avif')
         || filepath.endsWith('.svg')) {
       if (filepath.indexOf('admin') === -1) {
         opts = defaults({ maxage: 2592000 * 1000 }, opts)
       }
+      if (filepath.endsWith('.avif')) {
+        ctx.type = 'image/avif'
+      }
     }
 
     if (filepath === '/index.html') {
@@ -48,6 +52,7 @@ export function serve(docRoot, pathname, options = {}) {
 
     return send(ctx, filepath, opts).catch((er) => {
       if (er.code === 'ENOENT' && er.status === 404) {
+        ctx.type = null
         return serveIndex(ctx, filepath)
         // return send(ctx, '/index.html', options)
       }

app/article/article.js

@@ -50,10 +50,9 @@ const Article = {
     })
   },
 
-  onupdate: function(vnode) {
+  onbeforeupdate: function(vnode) {
     if (this.path !== m.route.param('id')) {
       this.fetchArticle(vnode)
-      m.redraw()
     }
   },
 

app/darkmode.js

@@ -6,11 +6,11 @@ const Darkmode = {
   setDarkMode: function(setOn) {
     if (setOn) {
       localStorage.setItem(storageName, true)
-      document.body.className = 'darkmodeon'
+      document.body.className = 'darkmodeon' + ' ' + (window.supportsavif ? 'avifsupport' : 'jpegonly')
       Darkmode.darkIsOn = true
     } else {
       localStorage.removeItem(storageName)
-      document.body.className = 'daymode'
+      document.body.className = 'daymode' + ' ' + (window.supportsavif ? 'avifsupport' : 'jpegonly')
       Darkmode.darkIsOn = false
     }
   },

app/footer/footer.scss

@@ -87,14 +87,18 @@ footer {
   }
 }
 
-.daymode footer .footer-logo {
+.daymode.jpegonly footer .footer-logo {
   background-image: url("/assets/img/tsun_small.jpg");
 }
 
-.darkmodeon footer .footer-logo {
+.darkmodeon.jpegonly footer .footer-logo {
   background-image: url("/assets/img/dark_tsun_small.jpg");
 }
 
+.avifsupport footer .footer-logo {
+  background-image: url("/assets/img/tsun.avif");
+}
+
 @media
 only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and (   min--moz-device-pixel-ratio: 2),
@@ -102,11 +106,11 @@ only screen and (     -o-min-device-pixel-ratio: 2/1),
 only screen and (        min-device-pixel-ratio: 2),
 only screen and (                min-resolution: 192dpi),
 only screen and (                min-resolution: 2dppx) { 
-  .daymode .footer-logo {
+  .daymode.jpegonly .footer-logo {
     background-image: url("/assets/img/tsun.jpg");
   }
 
-  .darkmodeon .footer-logo {
+  .darkmodeon.jpegonly .footer-logo {
     background-image: url("/assets/img/dark_tsun.jpg");
   }
 }

app/frontpage/frontpage.js

@@ -107,7 +107,8 @@ const Frontpage = {
 
     return [
       (bannerPath
-        ? m('a.frontpage-banner', {
+        ? m(m.route.Link, {
+            class: 'frontpage-banner',
             href: '/article/' + this.featured.path,
             style: { 'background-image': 'url("' + bannerPath + '")' },
           },
@@ -131,7 +132,9 @@ const Frontpage = {
               })
             ),
           ]),
-          m('div.asunaside'),
+          m('div.asunaside', {
+            class: window.supportsavif ? 'avif' : 'jpeg'
+          }),
         ]),
         m('.frontpage-news', [
           (this.loading

app/frontpage/frontpage.scss

@@ -137,13 +137,19 @@ frontpage {
   }
 }
 
-.daymode frontpage .asunaside {
+.daymode.jpegonly frontpage .asunaside {
   background-image: url("/assets/img/asuna_frontpage.jpg");
 }
+.daymode.avifsupport frontpage .asunaside {
+  background-image: url("/assets/img/asuna_frontpage.avif");
+}
 
-.darkmodeon frontpage .asunaside {
+.darkmodeon.jpegonly frontpage .asunaside {
   background-image: url("/assets/img/dark_asuna_frontpage.jpg");
 }
+.darkmodeon.avifsupport frontpage .asunaside {
+  background-image: url("/assets/img/dark_asuna_frontpage.avif");
+}
 
 @media screen and (max-width: 480px){
   .frontpage-banner {

app/index.js

@@ -3,15 +3,6 @@ require('./polyfill')
 const m = require('mithril')
 window.m = m
 
-/*
- * imgsupport.js from leechy/imgsupport 
- */
-const AVIF = new Image();
-AVIF.onload = AVIF.onerror = function () {
-  window.supportsavif = (AVIF.height === 2)
-}
-AVIF.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=';
-
 m.route.setOrig = m.route.set
 m.route.set = function(path, data, options){
   m.route.setOrig(path, data, options)
@@ -119,6 +110,18 @@ const allRoutes = {
   '/admin/:path/:id': AdminResolver,
 }
 
-m.route(mainRoot, '/', allRoutes)
-m.mount(menuRoot, Menu)
-m.mount(footerRoot, Footer)
+// Wait until we finish checking avif support, some views render immediately and will ask for this immediately before the callback gets called.
+
+/*
+ * imgsupport.js from leechy/imgsupport 
+ */
+const AVIF = new Image();
+AVIF.onload = AVIF.onerror = function () {
+  window.supportsavif = (AVIF.height === 2)
+  document.body.className = document.body.className + ' ' + (window.supportsavif ? 'avifsupport' : 'jpegonly')
+
+  m.route(mainRoot, '/', allRoutes)
+  m.mount(menuRoot, Menu)
+  m.mount(footerRoot, Footer)
+}
+AVIF.src = 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=';

app/menu/menu.scss

@@ -26,7 +26,6 @@
       display: flex;
       color: $primary-dark-fg;
       text-decoration: none;
-      background-image: url("/assets/img/logo_small.jpg");
     }
 
     h2 {
@@ -127,6 +126,14 @@
   }
 }
 
+.avifsupport #nav .top a.logo {
+  background-image: url("/assets/img/logo.avif");
+}
+
+.jpegonly #nav .top a.logo {
+  background-image: url("/assets/img/logo_small.jpg");
+}
+
 @media
 only screen and (-webkit-min-device-pixel-ratio: 2),
 only screen and (   min--moz-device-pixel-ratio: 2),
@@ -134,7 +141,7 @@ only screen and (     -o-min-device-pixel-ratio: 2/1),
 only screen and (        min-device-pixel-ratio: 2),
 only screen and (                min-resolution: 192dpi),
 only screen and (                min-resolution: 2dppx) { 
-  #nav .top a.logo {
+  .jpegonly #nav .top a.logo {
     background-image: url("/assets/img/logo.jpg");
   }
 }

app/pages/page.js

@@ -51,13 +51,11 @@ const Page = {
     })
   },
 
-  onupdate: function(vnode) {
+  onbeforeupdate: function(vnode) {
     if (this.path !== m.route.param('id')) {
       this.fetchPage(vnode)
-      m.redraw()
     } else if (m.route.param('page') && m.route.param('page') !== this.lastpage) {
       this.fetchArticles(vnode)
-      m.redraw()
     }
   },
 

app/widgets/common.scss

@@ -146,9 +146,9 @@ newsitem {
     width: 400px;
     text-align: center;
 
-    img {
-      max-height: 360px;
-      max-width: 360px;
+    picture {
+      max-height: 400px;
+      max-width: 400px;
       width: auto;
     }
   }
@@ -224,7 +224,7 @@ pages {
   newsitem a.cover {
     width: 300px;
 
-    img {
+    picture {
       max-width: 300px;
       width: auto;
     }
@@ -237,7 +237,7 @@ pages {
       width: 100%;
       margin-bottom: 20px;
 
-      img {
+      picture {
         max-height: unset;
         max-width: unset;
         width: 100%;

app/widgets/newsentry.js

@@ -25,9 +25,15 @@ const Newsentry = {
     }
     return m('newsentry', [
       imagePath
-        ? m('a.cover', {
+        ? m(m.route.Link, {
+            class: 'cover',
             href: '/article/' + vnode.attrs.path,
-          }, m('img', { src: imagePath, alt: 'Article image for ' + vnode.attrs.name }))
+          }, m('picture', [
+            m('source', { srcset:
+              vnode.attrs.media.small_url + ''
+            }),
+            m('img', { src: imagePath, alt: 'Article image for ' + vnode.attrs.name }),
+          ]))
         : m('a.cover.nobg'),
       m('div.entrycontent', [
         m('div.title', [

app/widgets/newsitem.js

@@ -1,10 +1,21 @@
 const Fileinfo = require('./fileinfo')
 
-const Newsitem = {  
+const Newsitem = {
+  oninit: function(vnode) {
+    this.srcsetJpeg = vnode.attrs.media.small_url + ' 500w, '
+                    + vnode.attrs.media.medium_url + ' 800w '
+    if (vnode.attrs.media.small_url_avif) {
+      this.srcsetAvif = vnode.attrs.media.small_url_avif + ' 500w, '
+                      + vnode.attrs.media.medium_url_avif + ' 800w '
+    } else {
+      this.srcsetAvif = null
+    }
+    this.coverSizes = '(max-width: 639px) calc(100vw - 40px), '
+                    + '(max-width: 1000px) 300px, '
+                    + '400px'
+  },
+
   view: function(vnode) {
-    var pixelRatio = window.devicePixelRatio || 1
-    var jpegImage = pixelRatio > 1 ? vnode.attrs.media.medium_url : vnode.attrs.media.small_url
-    var avifImage = pixelRatio > 1 ? vnode.attrs.media.medium_url_avif : vnode.attrs.media.small_url_avif
     return m('newsitem', [
       m(m.route.Link,
         { href: '/article/' + vnode.attrs.path, class: 'title' },
@@ -12,16 +23,23 @@ const Newsitem = {
       ),
       m('div.newsitemcontent', [
         vnode.attrs.media
-          ? m('a.cover', {
-              href: '/article/' + vnode.attrs.path,
-            },
-            m('picture', [
-              avifImage ? m('source', {
-                srcset: avifImage,
-                type: 'image/avif',
-              }) : null,
-              m('img', { alt: 'Image for news item ' + vnode.attrs.name, src: jpegImage })
-            ]))
+          ? m(m.route.Link, {
+                class: 'cover',
+                href: '/article/' + vnode.attrs.path,
+              },
+              m('picture', [
+                this.srcsetAvif ? m('source', {
+                  srcset: this.srcsetAvif,
+                  sizes: this.coverSizes,
+                  type: 'image/avif',
+                }) : null,
+                m('img', {
+                  srcset: this.srcsetJpeg,
+                  sizes: this.coverSizes,
+                  alt: 'Image for news item ' + vnode.attrs.name,
+                  src: vnode.attrs.media.small_url }),
+              ])
+            )
           : null,
         m('div.entrycontent', {
           class: vnode.attrs.media ? '' : 'extrapadding',