nfp_moe: Fixed few bugs, fixed fallback posters, fixed metadata, numerous other slight changes.

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'] })
+    this.template = dot.template(indexFile.toString(), { argName: ['headerDescription', 'headerImage', 'headerTitle', 'headerUrl', 'payloadData', 'payloadTree', 'version', 'nonce', 'type', 'banner', 'media', 'in_debug'] })
     // console.log(indexFile.toString())
   }
 

nfp_moe/api/serve.mjs

@@ -1,7 +1,9 @@
 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) {
@@ -13,9 +15,42 @@ 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'] })
+      this.template = dot.template(indexFile.toString(), { argName: ['headerDescription', 'headerImage', 'headerTitle', 'headerUrl', 'payloadData', 'payloadTree', 'version', 'nonce', 'type', 'banner', 'media', 'in_debug'] })
+    }
 
     let payload = {
       headerDescription: 'Small fansubbing and scanlation group translating and encoding our favourite shows from Japan.',
@@ -29,6 +64,7 @@ export default class ServeHandler extends Parent {
       type: 'page',
       banner: false,
       media: false,
+      in_debug: config.get('NODE_ENV') === 'development' && false,
     }
 
     try {
@@ -45,16 +81,36 @@ 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,52 +16,6 @@ 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
 
@@ -97,12 +51,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 ? 'haspreview' : ''),
+    class: 'cover ' + (pictureData.preview && window.supportsavif ? 'haspreview' : ''),
     rel: useRouteLink ? null : 'noopener',
     target: useRouteLink ? null : '_blank',
     href: path,
   }, [
-    pictureData.preview ? m('img', { src: pictureData.preview }) : null,
+    pictureData.preview && window.supportsavif ? 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: { 'background-image': 'url("' + featuredBanner.preview + '")' },
+                style: window.supportsavif ? { 'background-image': 'url("' + featuredBanner.preview + '")' } : null,
               }, [
                 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: { 'background-image': 'url("' + pageBanner.preview + '")' },
+                style: window.supportsavif ? { 'background-image': 'url("' + pageBanner.preview + '")' } : null,
               },
               m('div.page-banner-real', {
                 style: { 'background-image': 'url("' + pageBanner.banner + '")' },

nfp_moe/package.json

@@ -56,7 +56,8 @@
     "flaska": "^1.3.0",
     "formidable": "^1.2.6",
     "msnodesqlv8": "^2.4.7",
-    "nconf-lite": "^2.0.0"
+    "nconf-lite": "^2.0.0",
+    "striptags": "^3.2.0"
   },
   "devDependencies": {
     "asbundle": "^2.6.1",

nfp_moe/public/assets/app.css

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