From 0cbb96f23c33d3b67d7a75251c70a7ca1fa2bc27 Mon Sep 17 00:00:00 2001 From: Jonatan Nilsson Date: Tue, 26 Jul 2022 02:55:37 +0000 Subject: [PATCH] Development --- api/article/util.mjs | 21 ++++++++++++++ api/page/model.mjs | 5 ++-- app/frontpage/frontpage.js | 28 +++++++++---------- app/widgets/fileupload.js | 6 ++-- app/widgets/newsitem.js | 57 ++++++++++++++++++++++---------------- 5 files changed, 74 insertions(+), 43 deletions(-) create mode 100644 api/article/util.mjs diff --git a/api/article/util.mjs b/api/article/util.mjs new file mode 100644 index 0000000..37f434d --- /dev/null +++ b/api/article/util.mjs @@ -0,0 +1,21 @@ +export function parseArticles(articles) { + for (let i = 0; i < articles.length; i++) { + parseArticle(articles[i]) + } + return articles +} + +export function parseArticle(article) { + if (!article) { + return null + } + if (article.banner_path) { + article.banner_path = 'https://cdn.nfp.is' + article.banner_path + article.banner_prefix = 'https://cdn.nfp.is' + article.banner_prefix + } + if (article.media_path) { + article.media_path = 'https://cdn.nfp.is' + article.media_path + article.media_prefix = 'https://cdn.nfp.is' + article.media_prefix + } + return article +} \ No newline at end of file diff --git a/api/page/model.mjs b/api/page/model.mjs index 3f25f38..583a1eb 100644 --- a/api/page/model.mjs +++ b/api/page/model.mjs @@ -1,4 +1,5 @@ import { parseFile } from '../file/util.mjs' +import { parseArticle, parseArticles } from '../article/util.mjs' export async function getTree(ctx) { let res = await ctx.db.safeCallProc('pages_get_tree', []) @@ -32,9 +33,9 @@ export async function getPage(ctx, path, page = 0, per_page = 10) { let out = { page: res.results[0][0] || null, - articles: res.results[1], + articles: parseArticles(res.results[1]), total_articles: res.results[2][0].total_articles, - featured: res.results[4][0] || null + featured: parseArticle(res.results[4][0]), } out.articles.forEach(article => { article.files = [] diff --git a/app/frontpage/frontpage.js b/app/frontpage/frontpage.js index acab10e..8058804 100644 --- a/app/frontpage/frontpage.js +++ b/app/frontpage/frontpage.js @@ -74,23 +74,23 @@ const Frontpage = { view: function(vnode) { var deviceWidth = window.innerWidth - var bannerPath = '' + var bannerPath = this.data.featured && this.data.featured.banner_prefix - if (this.data.featured && this.data.featured.banner) { + if (bannerPath) { var pixelRatio = window.devicePixelRatio || 1 - if (deviceWidth < 400 && pixelRatio <= 1) { - bannerPath = window.supportsavif - && this.data.featured.banner.small_url_avif - || this.data.featured.banner.small_url - } else if ((deviceWidth < 800 && pixelRatio <= 1) - || (deviceWidth < 600 && pixelRatio > 1)) { - bannerPath = window.supportsavif - && this.data.featured.banner.medium_url_avif - || this.data.featured.banner.medium_url + if ((deviceWidth < 720 && pixelRatio <= 1) + || (deviceWidth < 360 && pixelRatio <= 2)) { + bannerPath += '_small' + } else if ((deviceWidth < 1300 && pixelRatio <= 1) + || (deviceWidth < 650 && pixelRatio <= 2)) { + bannerPath += '_medium' } else { - bannerPath = window.supportsavif - && this.data.featured.banner.large_url_avif - || this.data.featured.banner.large_url + bannerPath += '_large' + } + if (window.supportsavif) { + bannerPath += '.avif' + } else { + bannerPath += '.jpg' } } diff --git a/app/widgets/fileupload.js b/app/widgets/fileupload.js index 1cd99df..31391ac 100644 --- a/app/widgets/fileupload.js +++ b/app/widgets/fileupload.js @@ -37,11 +37,11 @@ const FileUpload = { }, [ this.preview || media ? vnode.attrs.useimg - ? [ m('img', { src: this.preview && this.preview.preview || media.large_url }), m('div.showicon')] + ? [ m('img', { src: this.preview && this.preview.preview || media }), m('div.showicon')] : m('a.display.inside', { - href: this.preview && this.preview.preview || media.large_url, + href: this.preview && this.preview.preview || media, style: { - 'background-image': 'url("' + (this.preview && this.preview.preview || media.large_url) + '")', + 'background-image': 'url("' + (this.preview && this.preview.preview || media) + '")', }, }, m('div.showicon')) : m('div.inside.showbordericon') diff --git a/app/widgets/newsitem.js b/app/widgets/newsitem.js index 41369f5..b0403af 100644 --- a/app/widgets/newsitem.js +++ b/app/widgets/newsitem.js @@ -2,32 +2,40 @@ 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 - } + let article = vnode.attrs.article + if (article.media_prefix) { + this.fallbackImage = article.media_prefix + '_small.jpg' + this.srcsetJpeg = article.media_prefix + '_small.jpg' + ' 720w, ' + + article.media_prefix + '_medium.jpg' + ' 1300w, ' + + article.media_prefix + '_large.jpg' + this.srcsetAvif = article.media_prefix + '_small.avif' + ' 720w, ' + + article.media_prefix + '_medium.avif' + ' 1300w, ' + + article.media_prefix + '_large.avif' + this.coverSizes = '(max-width: 639px) calc(100vw - 40px), ' + '(max-width: 1000px) 300px, ' + '400px' + } else { + this.fallbackImage = null + this.srcsetJpeg = null + this.srcsetAvif = null + this.coverSizes = null } }, view: function(vnode) { + let article = vnode.attrs.article + return m('newsitem', [ m(m.route.Link, - { href: '/article/' + vnode.attrs.article.path, class: 'title' }, - m('h3', [vnode.attrs.article.name]) + { href: '/article/' + article.path, class: 'title' }, + m('h3', [article.name]) ), m('div.newsitemcontent', [ - vnode.attrs.article.media + this.fallbackImage ? m(m.route.Link, { class: 'cover', - href: '/article/' + vnode.attrs.article.path, + href: '/article/' + article.path, }, m('picture', [ this.srcsetAvif ? m('source', { @@ -38,28 +46,29 @@ const Newsitem = { m('img', { srcset: this.srcsetJpeg, sizes: this.coverSizes, - alt: 'Image for news item ' + vnode.attrs.article.name, - src: vnode.attrs.article.media.small_url }), + alt: 'Image for news item ' + article.name, + src: this.fallbackImage, + }), ]) ) : null, m('div.entrycontent', { - class: vnode.attrs.article.media ? '' : 'extrapadding', + class: article.media ? '' : 'extrapadding', }, [ - (vnode.attrs.article.content - ? m('.fr-view', m.trust(vnode.attrs.article.content)) + (article.content + ? m('.fr-view', m.trust(article.content)) : null), - (vnode.attrs.article.files && vnode.attrs.article.files.length - ? vnode.attrs.article.files.map(function(file) { + (article.files && article.files.length + ? 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'), + (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'), ]), ]), ]),