nfp_sites/app/widgets/newsitem.js

const Fileinfo = require('./fileinfo')

const Newsitem = {
  oninit: function(vnode) {
    if (vnode.attrs.article.media) {
      this.srcsetJpeg = vnode.attrs.article.media.small_url + ' 500w, '
                      + vnode.attrs.article.media.medium_url + ' 800w '
      if (vnode.attrs.article.media.small_url_avif) {
        this.srcsetAvif = vnode.attrs.article.media.small_url_avif + ' 500w, '
                        + vnode.attrs.article.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) {
    return m('newsitem', [
      m(m.route.Link,
        { href: '/article/' + vnode.attrs.article.path, class: 'title' },
        m('h3', [vnode.attrs.article.name])
      ),
      m('div.newsitemcontent', [
        vnode.attrs.article.media
          ? m(m.route.Link, {
                class: 'cover',
                href: '/article/' + vnode.attrs.article.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.article.name,
                  src: vnode.attrs.article.media.small_url }),
              ])
            )
          : null,
        m('div.entrycontent', {
          class: vnode.attrs.article.media ? '' : 'extrapadding',
        }, [
          (vnode.attrs.article.content
              ? m('.fr-view', m.trust(vnode.attrs.article.content))
              : null),
          (vnode.attrs.article.files && vnode.attrs.article.files.length
            ? vnode.attrs.article.files.map(function(file) {
                return m(Fileinfo, { file: file, trim: true })
              })
            : null),
          m('span.entrymeta', [
            'Posted ',
            (vnode.attrs.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),
            'at ' + (vnode.attrs.article.publish_at.replace('T', ' ').split('.')[0]).substr(0, 16),
            ' by ' + (vnode.attrs.article.admin_name || 'Admin'),
          ]),
        ]),
      ]),
    ])
  },
}

module.exports = Newsitem