Add publishing times to default HTML template, various CSS fixes

Author: danburzo

index.js

@@ -67,7 +67,11 @@ const JUSTIFY_CSS = `
 let configured = false;
 function configure() {
 	if (!configured) {
-		nunjucks.configure({ autoescape: false, noCache: true });
+		const env = nunjucks.configure({
+			autoescape: false,
+			noCache: true
+		});
+		env.addFilter('humandate', humanDate);
 		configured = true;
 	}
 }
@@ -299,7 +303,7 @@ async function bundlePdf(items, options) {
 			filetype: 'pdf',
 			title,
 			author,
-			date: humanDate(new Date()),
+			date: new Date(),
 			items,
 			style,
 			options: {
@@ -497,7 +501,7 @@ async function bundleHtml(items, options) {
 			title:
 				options.title ||
 				(items.length === 1 ? items[0].title : 'Untitled'),
-			date: humanDate(new Date()),
+			date: new Date(),
 			items,
 			style,
 			options: {
@@ -552,7 +556,7 @@ async function bundleMd(items, options) {
 			title:
 				options.title ||
 				(items.length === 1 ? items[0].title : 'Untitled'),
-			date: humanDate(new Date()),
+			date: new Date(),
 			items,
 			style,
 			options: {

src/cleanup-item.js

@@ -173,6 +173,8 @@ export default async function cleanupItem(
 		url,
 		title: sanitizer.sanitize(parsed.title),
 		byline: sanitizer.sanitize(parsed.byline),
+		published: sanitizer.sanitize(parsed.published || parsed.publishedTime),
+		updated: sanitizer.sanitize(parsed.updated),
 		dir: sanitizer.sanitize(parsed.dir),
 		excerpt: serializer(sanitize_to_dom(parsed.excerpt)),
 		content: serializer(

src/util/human-date.js

@@ -1,7 +1,13 @@
-const formatter = new Intl.DateTimeFormat('en', {
+const dateTimeFormatter = new Intl.DateTimeFormat('en', {
+	dateStyle: 'medium',
+	timeStyle: 'short'
+});
+
+const dateFormatter = new Intl.DateTimeFormat('en', {
 	dateStyle: 'medium'
 });
 
-export default function humanDate(d) {
-	return formatter.format(d);
+export default function humanDate(date, includeTime = false) {
+	const d = new Date(date);
+	return includeTime ? dateTimeFormatter.format(d) : dateFormatter.format(d);
 }

templates/default.css

@@ -117,6 +117,7 @@ article {
 }
 
 article:not(:last-of-type) {
+	margin-bottom: 2em;
 	page-break-after: always;
 }
 
@@ -136,9 +137,12 @@ article:not(:last-of-type) {
 	line-height: 1.1;
 }
 
+.article__byline,
+.article__time,
 .article__url {
 	font-style: italic;
 	font-size: 0.9em;
+	margin: 0;
 }
 
 /*
@@ -148,6 +152,7 @@ article:not(:last-of-type) {
 
 .article__content img {
 	max-width: 100%;
+	height: auto;
 	display: block;
 	margin: 0 auto;
 }

templates/default.html

@@ -31,7 +31,7 @@
 				<h1 class="cover__title">{{ title }}</h1>
 				<p class="cover__subtitle">
 					<time class="cover__date" datetime="{{ date }}"
-						>{{ date }}</time
+						>{{ date | humandate }}</time
 					>
 				</p>
 			</div>
@@ -57,6 +57,18 @@ <h1 class="toc__title">Table of Contents</h1>
 				<h1 class="article__title">{{ item.title }}</h1>
 				{% if item.byline %}
 				<p class="article__byline">By <span>{{ item.byline }}</span></p>
+				{% endif %} {% if item.published %}
+				<p class="article__time">
+					Published
+					<time datetime="{{item.published}}">
+						{{item.published | humandate(true) }} </time
+					>{%- if item.updated and item.updated !== item.published
+					-%}, updated
+					<time datetime="{{item.updated}}">
+						{{item.updated | humandate(true) }}
+					</time>
+					{%- endif -%}
+				</p>
 				{% endif %}
 				<p class="article__url">
 					Source: