Tissevert/hablo
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Fix missing metadata when landing on articles, factorize resource identification code and simplify ubiquitous argument pair

Browse source
This commit is contained in:
Tissevert 2021-01-17 21:32:41 +01:00
parent 3e223e7169
commit ccff2653e6
2 changed files with 65 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

80
share/js/DomRenderer.js
View file

@ -7,15 +7,37 @@ import {defined} from UnitJS.Fun;
return { return {
articlesList: articlesList, articlesList: articlesList,
getResource: getResource,
render: render, render: render,
replaceMarkdown: replaceMarkdown replaceMarkdown: replaceMarkdown
}; };
function getResource(url) {
var i = url.lastIndexOf('/');
var path = url.slice(1, i);
if(path == blog.path.articlesPath) {
return {type: 'article', key: url.slice(i+1).replace(/\.html/, '')};
} else if(path == blog.path.pagesPath) {
return {type: 'page', key: url.slice(i+1).replace(/\.html/, '')};
} else if(path == '' || blog.tags[path] != undefined) {
var tag = path.length > 0 ? path : undefined;
return {type: 'list', tag: tag, all: url.slice(i+1) == 'all.html'};
} else {
return {type: 'unknown'};
}
}
function resourceUrl(resource, limit) {
var directory = blog.path[resource.type + 'sPath'];
var extension = limit != undefined ? '.html' : '.md';
return ["", directory, resource.key + extension].join('/');
}
function replaceMarkdown() { function replaceMarkdown() {
var div = document.getElementById('contents'); var div = document.getElementById('contents');
if(div.children[0] && div.children[0].tagName.toLowerCase() == 'article') { if(div.children[0] && div.children[0].tagName.toLowerCase() == 'article') {
var contentType = window.location.pathname.slice(1).replace(/\/.*/, ''); var resourceType = getResource(window.location.pathname).type;
convertContent(contentType, div.children[0], true); convertContent(resourceType, div.children[0], true);
} else { } else {
var articles = div.getElementsByClassName('articles')[0]; var articles = div.getElementsByClassName('articles')[0];
if(articles != undefined) { if(articles != undefined) {
@ -28,15 +50,15 @@ function replaceMarkdown() {
} }
} }
function convertContent(contentType, article, comments) { function convertContent(resourceType, article, comments) {
var header = article.getElementsByTagName('header')[0]; var header = article.getElementsByTagName('header')[0];
if(contentType == 'article') { if(resourceType == 'article') {
header.appendChild(Metadata.get(article.id)); header.appendChild(Metadata.get(article.id));
} }
var text = article.getElementsByTagName('pre')[0]; var text = article.getElementsByTagName('pre')[0];
if(text != undefined) { if(text != undefined) {
article.replaceChild(getDiv(text.innerText), text); article.replaceChild(getDiv(text.innerText), text);
if(contentType == 'article' && comments) { if(resourceType == 'article' && comments) {
Metadata.getComments(article.id) Metadata.getComments(article.id)
.forEach(article.appendChild.bind(article)); .forEach(article.appendChild.bind(article));
} }
@ -59,59 +81,53 @@ function getDiv(markdown) {
return d; return d;
} }
function contentUrl(contentType, key, limit) { function commentsSection(resource, limit) {
var directory = blog.path[contentType + 'sPath']; if(resource.type != 'article' || limit != undefined) {
var extension = limit != undefined ? '.html' : '.md';
return ["", directory, key + extension].join('/');
}
function commentsSection(contentType, key, limit) {
if(contentType != 'article' || limit != undefined) {
return []; return [];
} else { } else {
return Metadata.getComments(key); return Metadata.getComments(resource.key);
} }
} }
function render(contentType, key, markdown, limit) { function render(resource, markdown, limit) {
var url = contentUrl(contentType, key, limit); var url = resourceUrl(resource, limit);
var resource = blog[contentType + 's'][key]; var content = blog[resource.type + 's'][resource.key];
var lines = markdown.split(/\n/).slice(resource.bodyOffset); var lines = markdown.split(/\n/).slice(content.bodyOffset);
var div = getDiv(lines.slice(0, limit).join('\n')); var div = getDiv(lines.slice(0, limit).join('\n'));
return Dom.make('article', {}, [ return Dom.make('article', {}, [
Dom.make('header', {}, [ Dom.make('header', {}, [
Dom.make('h1', {}, [ Dom.make('h1', {}, [
Dom.make('a', {href: url, innerText: resource.title}) Dom.make('a', {href: url, innerText: content.title})
])].concat(contentType == 'article' ? Metadata.get(key) : []) ])].concat(resource.type == 'article' ? Metadata.get(resource.key) : [])
), ),
div div
].concat(commentsSection(contentType, key, limit))); ].concat(commentsSection(resource, limit)));
} }
function pageTitle(tag, all) { function pageTitle(resource) {
return Template.render(all ? 'allPage' : 'latestPage', {tag: tag}); return Template.render(resource.all ? 'allPage' : 'latestPage', {tag: resource.tag});
} }
function otherUrl(tag, all) { function otherUrl(resource) {
var path = [tag, all ? '' : 'all.html']; var path = [resource.tag, resource.all ? '' : 'all.html'];
return '/' + path.filter(defined).join('/'); return '/' + path.filter(defined).join('/');
} }
function articlesList(tag, all) { function articlesList(resource) {
return function(articlePreviews) { return function(articlePreviews) {
return [ return [
Dom.make('h2', {innerText: pageTitle(tag, all)}), Dom.make('h2', {innerText: pageTitle(resource)}),
Dom.make('ul', {}, articlesListLinks(tag, all)), Dom.make('ul', {}, articlesListLinks(resource)),
Dom.make('div', {class: 'articles'}, articlePreviews.filter(defined)) Dom.make('div', {class: 'articles'}, articlePreviews.filter(defined))
]; ];
}; };
} }
function articlesListLinks(tag, all) { function articlesListLinks(resource) {
var links = [ var links = [
Dom.make('a', { Dom.make('a', {
innerText: all ? blog.wording.latestLink : blog.wording.allLink, innerText: resource.all ? blog.wording.latestLink : blog.wording.allLink,
href: otherUrl(tag, all), href: otherUrl(resource),
class: 'other' class: 'other'
}) })
]; ];
@ -120,7 +136,7 @@ function articlesListLinks(tag, all) {
innerText: blog.wording.rssLink, innerText: blog.wording.rssLink,
href: 'rss.xml', href: 'rss.xml',
class: 'RSS', class: 'RSS',
title: Template.render('rssTitle', {tag: tag}) title: Template.render('rssTitle', {tag: resource.tag})
})); }));
} }
return links.map(function(e) {return Dom.make('li', {}, [e]);}); return links.map(function(e) {return Dom.make('li', {}, [e]);});

37
share/js/Navigation.js
View file

@ -1,4 +1,4 @@
import {articlesList, render} from DomRenderer; import {articlesList, getResource, render} from DomRenderer;
import blog from Hablo.Config; import blog from Hablo.Config;
import * as Async from UnitJS.Async; import * as Async from UnitJS.Async;
import * as Cache from UnitJS.Cache; import * as Cache from UnitJS.Cache;
@ -60,23 +60,20 @@ function visit(url) {
} }
function navigate(url) { function navigate(url) {
var path = decodeURI(url).split("/").slice(1); var resource = getResource(url);
if(blog.tags[path[0]] != undefined) { switch(resource.type) {
show(getArticlesList(path[0], path[1] == "all.html")); case 'list': show(getArticlesList(resource)); break;
} else if(path[0] == blog.path.articlesPath) { case 'article':
show(getResource('article', path[1].replace(/\.html$/, ''))); case 'page': show(getCached(resource)); break;
} else if(path[0] == blog.path.pagesPath) { default: console.log("No idea how to navigate to " + url);
show(getResource('page', path[1].replace(/\.html$/, '')));
} else {
show(getArticlesList(null, path[0] == "all.html"));
} }
} }
function getResource(contentType, key) { function getCached(resource) {
return Async.bind( return Async.bind(
cache[contentType].get(key), cache[resource.type].get(resource.key),
Async.map( Async.map(
function(contents) {return [render(contentType, key, contents)];} function(contents) {return [render(resource, contents)];}
) )
); );
} }
@ -86,23 +83,23 @@ function preview(key) {
cache.article.get(key), cache.article.get(key),
function(contents) { function(contents) {
return Async.wrap( return Async.wrap(
render('article', key, contents, blog.skin.previewLinesCount) render({type: 'article', key: key}, contents, blog.skin.previewLinesCount)
); );
} }
); );
} }
function articleIds(tag, all) { function articleIds(resource) {
var ids = tag != undefined ? blog.tags[tag] : Object.keys(blog.articles); var ids = resource.tag != undefined ? blog.tags[resource.tag] : Object.keys(blog.articles);
var reverseDate = function (id) {return -blog.articles[id].metadata.date;}; var reverseDate = function (id) {return -blog.articles[id].metadata.date;};
ids.sort(Fun.compare(reverseDate)); ids.sort(Fun.compare(reverseDate));
return ids.slice(0, all ? undefined : blog.skin.previewArticlesCount); return ids.slice(0, resource.all ? undefined : blog.skin.previewArticlesCount);
} }
function getArticlesList(tag, all) { function getArticlesList(resource) {
return Async.bind( return Async.bind(
Async.parallel.apply(null, articleIds(tag, all).map(preview)), Async.parallel.apply(null, articleIds(resource).map(preview)),
Async.map(articlesList(tag, all)) Async.map(articlesList(resource))
); );
} }