base/serve.mjs

@@ -22,7 +22,7 @@ export default class ServeHandler {
     }
 
     let indexFile = fsSync.readFileSync(path.join(this.root, 'index.html'))
-    this.template = dot.template(indexFile.toString(), { argName: ['headerDescription', 'headerImage', 'headerTitle', 'headerUrl', 'payloadData', 'payloadTree', 'version', 'nonce', 'type', 'banner', 'media', 'in_debug'] })
+    this.template = dot.template(indexFile.toString(), { argName: ['headerDescription', 'headerImage', 'headerTitle', 'headerUrl', 'payloadData', 'payloadTree', 'version', 'nonce', 'type', 'banner'] })
     // console.log(indexFile.toString())
   }
 

nfp_moe/api/serve.mjs

@@ -1,9 +1,7 @@
 import path from 'path'
-import striptags from 'striptags'
 import Parent from '../base/serve.mjs'
 import fs from 'fs/promises'
 import dot from 'dot'
-import config from '../base/config.mjs'
 
 export default class ServeHandler extends Parent {
   traverseTree(set, tree) {
@@ -15,42 +13,9 @@ export default class ServeHandler extends Parent {
     }
   }
 
-  getDescriptionFromBlocks(blocks) {
-    return encodeURI(blocks
-      .filter(x => x.type === 'header'
-                || x.type === 'paragraph'
-                || x.type === 'quote'
-                || x.type === 'list'
-                || x.type === 'code'
-                || x.type === 'htmlraw')
-      .map(x => {
-        if (x.type === 'htmlraw') {
-          return striptags(x.data.html)
-        }
-        if (x.type === 'quote') {
-          return `"${x.data.text}"` + (x.data.caption ? ` - ${x.data.caption}` : '')
-        }
-        if (x.type === 'list') {
-          return x.data.items.join('. ')
-        }
-        return x.data.code ? `"${x.data.code}"` : x.data.text
-      })
-      .map(x => striptags(x))
-      .map(x => {
-        console.log(x)
-        return x
-      })
-      .filter(x => x)
-      .join('. ')
-      .replace('/\.+/g', '.')
-    )
-  }
-
   async serveIndex(ctx) {
-    if (config.get('NODE_ENV') === 'development') {
     let indexFile = await fs.readFile(path.join(this.root, 'index.html'))
-      this.template = dot.template(indexFile.toString(), { argName: ['headerDescription', 'headerImage', 'headerTitle', 'headerUrl', 'payloadData', 'payloadTree', 'version', 'nonce', 'type', 'banner', 'media', 'in_debug'] })
-    }
+    this.template = dot.template(indexFile.toString(), { argName: ['headerDescription', 'headerImage', 'headerTitle', 'headerUrl', 'payloadData', 'payloadTree', 'version', 'nonce', 'type', 'banner', 'media'] })
 
     let payload = {
       headerDescription: 'Small fansubbing and scanlation group translating and encoding our favourite shows from Japan.',
@@ -64,7 +29,6 @@ export default class ServeHandler extends Parent {
       type: 'page',
       banner: false,
       media: false,
-      in_debug: config.get('NODE_ENV') === 'development' && false,
     }
 
     try {
@@ -81,36 +45,16 @@ export default class ServeHandler extends Parent {
         let data = await this.pageRoutes.getPage(ctx, true)
         if (!data.page) {
           payload.type = 'frontpage'
-        } else if (setOfBranches.has(data.page.id)) {
+        }
+        else if (setOfBranches.has(data.page.id)) {
           payload.type = 'page_with_children'
         }
-
-        if (data.page) {
-          payload.headerTitle = data.page.name + ' - NFP Moe'
-          if (data.page.content.blocks.length) {
-            payload.headerDescription = this.getDescriptionFromBlocks(data.page.content.blocks) || payload.headerDescription
-          }
-          if (data.page.media_alt_prefix) {
-            payload.headerImage = data.page.media_alt_prefix + '_small.jpg'
-          }
-        }
         payload.media = data.page?.media_avif_preview || false
         payload.banner = data.featured?.banner_avif_preview || data.page?.banner_avif_preview || false
         payload.payloadData = JSON.stringify(data)
       } else if (ctx.url.startsWith('/article/') && ctx.url.lastIndexOf('/') === 8) {
         ctx.params.path = ctx.url.slice(ctx.url.lastIndexOf('/') + 1)
         let data = await this.articleRoutes.getArticle(ctx, true)
-
-        if (data.article) {
-          payload.headerTitle = data.article.name + ' - NFP Moe'
-          if (data.article.content.blocks.length) {
-            payload.headerDescription = this.getDescriptionFromBlocks(data.article.content.blocks) || payload.headerDescription
-          }
-          if (data.article.media_alt_prefix) {
-            payload.headerImage = data.article.media_alt_prefix + '_small.jpg'
-          }
-        }
-
         payload.media = data.article?.media_avif_preview || false
         payload.payloadData = JSON.stringify(data)
         payload.type = 'article'

nfp_moe/app/media.js

@@ -16,6 +16,52 @@ export function generatePictureSource(item, cover) {
   }
 }
 
+let loadingImage = null
+let loader = null
+
+function cancelLoader() {
+  if (loader) {
+    loader.src = ''
+  }
+  loader = null
+}
+
+export function smartBanner(item) {
+  if (!item) {
+    if (loader) {
+      cancelLoader()
+    }
+    loadingImage = null
+    return null
+  }
+
+  if (!item.preview) {
+    loadingImage = null
+    cancelLoader()
+    return item.banner
+  }
+  if (loadingImage !== item.banner && loader) {
+    cancelLoader()
+  }
+  if (loadingImage === item.banner && !loader) {
+    return item.banner
+  }
+  if (loadingImage === item.banner) {
+    return item.preview
+  }
+
+  loadingImage = item.banner
+  loader = new Image();
+
+  loader.src = item.banner;
+  loader.onload = loader.onerror = function() {
+    loader = null
+    m.redraw()
+  }
+
+  return item.preview
+}
+
 export function getBannerImage(item, prefix) {
   if (!item || !item.banner_alt_prefix) return null
 
@@ -51,12 +97,12 @@ export function getArticlePicture(pictureData, useRouteLink, path, altText, fall
   if (!pictureData) return fallback || null
 
   return m(useRouteLink ? m.route.Link : 'a', {
-    class: 'cover ' + (pictureData.preview && window.supportsavif ? 'haspreview' : ''),
+    class: 'cover ' + (pictureData.preview ? 'haspreview' : ''),
     rel: useRouteLink ? null : 'noopener',
     target: useRouteLink ? null : '_blank',
     href: path,
   }, [
-    pictureData.preview && window.supportsavif ? m('img', { src: pictureData.preview }) : null,
+    pictureData.preview ? m('img', { src: pictureData.preview }) : null,
     m('picture', [
       m('source', {
         srcset: pictureData.avif,

nfp_moe/app/site_page.js

@@ -228,7 +228,7 @@ const SitePage = {
             ? m(m.route.Link, {
                 class: 'page-banner',
                 href: featuredBanner.path,
-                style: window.supportsavif ? { 'background-image': 'url("' + featuredBanner.preview + '")' } : null,
+                style: { 'background-image': 'url("' + featuredBanner.preview + '")' },
               }, [
                 m('div.page-banner-real', {
                   style: { 'background-image': 'url("' + featuredBanner.banner + '")' },
@@ -240,7 +240,7 @@ const SitePage = {
             ? m('a.page-banner', {
                 href: pageBanner.original,
                 target: '_blank',
-                style: window.supportsavif ? { 'background-image': 'url("' + pageBanner.preview + '")' } : null,
+                style: { 'background-image': 'url("' + pageBanner.preview + '")' },
               },
               m('div.page-banner-real', {
                 style: { 'background-image': 'url("' + pageBanner.banner + '")' },

nfp_moe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nfp_moe",
-  "version": "2.1.1",
+  "version": "2.1.0",
   "port": 4110,
   "description": "NFP Moe website",
   "main": "index.js",
@@ -56,8 +56,7 @@
     "flaska": "^1.3.0",
     "formidable": "^1.2.6",
     "msnodesqlv8": "^2.4.7",
-    "nconf-lite": "^2.0.0",
-    "striptags": "^3.2.0"
+    "nconf-lite": "^2.0.0"
   },
   "devDependencies": {
     "asbundle": "^2.6.1",

nfp_moe/public/assets/app.css

@@ -19,5 +19,5 @@
 }
 
 .jpegonly .spritesheet {
-  background-image: url("/assets/img/combined.webp")
+  background-image: url("/assets/img/combined.png")
 }