nfp_sites/app/widgets/newsitem.js

const Fileinfo = require('./fileinfo')
const EditorBlock = require('./editorblock')

const Newsitem = {
  oninit: function(vnode) {
    this.lastId = null
    this.onbeforeupdate(vnode)
  },

  onbeforeupdate: function(vnode) {
    let article = vnode.attrs.article

    if (this.lastId !== article.id) {
      this.lastId = article.id

      if (article.media_alt_prefix) {
        this.pictureFallback = article.media_alt_prefix + '_small.jpg'
        this.pictureJpeg = article.media_alt_prefix + '_small.jpg' + ' 720w, '
                        + article.media_alt_prefix + '_medium.jpg' + ' 1300w, '
                        + article.media_alt_prefix + '_large.jpg 1920w'
        this.pictureAvif = article.media_alt_prefix + '_small.avif' + ' 720w, '
                        + article.media_alt_prefix + '_medium.avif' + ' 1300w, '
                        + article.media_alt_prefix + '_large.avif 1920w'

        this.pictureCover = '(max-width: 639px) calc(100vw - 40px), '
                        + '(max-width: 1000px) 300px, '
                        + '400px'
      } else {
        this.pictureFallback = null
        this.pictureJpeg = null
        this.pictureAvif = null
        this.pictureCover = null
      }
    }
  },

  view: function(vnode) {
    let article = vnode.attrs.article

    return m('newsitem', [
      m(m.route.Link,
        { href: '/article/' + article.path, class: 'title' },
        m('h3', [article.name])
      ),
      m('div.newsitemcontent', [
        this.pictureFallback
          ? m(m.route.Link, {
                class: 'cover',
                href: '/article/' + article.path,
              },
              m('picture', [
                m('source', {
                  srcset: this.pictureAvif,
                  sizes: this.pictureCover,
                  type: 'image/avif',
                }),
                m('img', {
                  srcset: this.pictureJpeg,
                  sizes: this.pictureCover,
                  alt: 'Image for news item ' + article.name,
                  src: this.pictureFallback,
                }),
              ])
            )
          : null,
        m('div.entrycontent', [
          article.content.blocks.map(block => {
            return m(EditorBlock, { block: block })
          }),
          (article.files && article.files.length
            ? article.files.map(function(file) {
                return m(Fileinfo, { file: file, trim: true })
              })
            : null),
          m('span.entrymeta', [
            'Posted ',
            (article.page_path ? 'in' : ''),
            (article.page_path ? m(m.route.Link, { href: '/page/' + article.page_path }, article.page_name) : null),
            'at ' + (article.publish_at.replace('T', ' ').split('.')[0]).substr(0, 16),
            ' by ' + (article.admin_name || 'Admin'),
          ]),
        ]),
      ]),
    ])
  },
}

module.exports = Newsitem