cover

guybedo · Oct 30, 2018 · 889f3ad · 889f3ad
1 parent ace30e4
commit 889f3ad
Show file tree

Hide file tree

Showing 8 changed files with 99 additions and 2 deletions.
diff --git a/index.js b/index.js
@@ -16,6 +16,7 @@ const blueprints = require('./src/blueprints');
 const {
 	ampToHtml,
 	fixLazyLoadedImages,
+	extractImage,
 	imagesAtFullSize,
 	wikipediaSpecific,
 	noUselessHref,
@@ -92,6 +93,7 @@ async function cleanup(item, blueprint) {
 			----------------
 		*/
 		enhancePage(dom);
+		const img = extractImage(dom.window.document);
 
 		// Run through readability and return
 		const parsed = new Readability(dom.window.document, {
@@ -112,7 +114,7 @@ async function cleanup(item, blueprint) {
 			.toString(36)
 			.replace(/[^a-z]+/g, '')
 			.substr(2, 10);
-		return Object.assign({}, parsed, item, { _id: _id });
+		return Object.assign({}, parsed, item, { _id: _id, img: img });
 	} catch (error) {
 		spinner.fail(error.message);
 		throw error;
@@ -131,6 +133,12 @@ async function bundle(blueprint) {
 	let style = fs.readFileSync(stylesheet, 'utf8');
 	if (blueprint.cover.generate) {
 		style += fs.readFileSync(resolve(blueprint.cover.css), 'utf8');
+		if (!blueprint.cover.title) {
+			blueprint.cover.title = blueprint.document.items[0].title;
+		}
+		if (!blueprint.cover.picture) {
+			blueprint.cover.picture = blueprint.document.items[0].img;
+		}
 	}
 	if (blueprint.toc.generate) {
 		style += fs.readFileSync(resolve(blueprint.toc.css), 'utf8');

diff --git a/src/blueprints.js b/src/blueprints.js
@@ -57,6 +57,10 @@ function _defaultCover() {
 		generate: false,
 		template: './templates/default_cover.html',
 		css: './templates/default_cover.css',
+		title: null,
+		picture: null,
+		header: 'Percollate',
+		footer: new Date(),
 		assets: {}
 	};
 }

diff --git a/src/enhancements.js b/src/enhancements.js
@@ -13,6 +13,27 @@ function ampToHtml(doc) {
 	});
 }
 
+function extractImage(doc) {
+	const selectors = [
+		"meta[name='og:image']",
+		"meta[name='twitter:image']",
+		'amp-img',
+		'img'
+	];
+	for (let idx = 0; idx < selectors.length; idx++) {
+		let imgs = Array.from(doc.querySelectorAll(selectors[idx]));
+		console.log(imgs);
+		if (imgs && imgs.length > 0) {
+			if (imgs[0].getAttribute('content')) {
+				return imgs[0].getAttribute('content');
+			} else {
+				return imgs[0].getAttribute('src');
+			}
+		}
+	}
+	return null;
+}
+
 function fixLazyLoadedImages(doc) {
 	Array.from(
 		doc.querySelectorAll(`
@@ -152,6 +173,7 @@ function singleImgToFigure(doc) {
 module.exports = {
 	ampToHtml,
 	fixLazyLoadedImages,
+	extractImage,
 	imagesAtFullSize,
 	noUselessHref,
 	wikipediaSpecific,

diff --git a/templates/default.css b/templates/default.css
@@ -9,19 +9,21 @@
 
 @page {
 	size: A5 portrait;
-	margin: 1cm 1cm 2cm;
+	margin: 0.5cm 0.5cm 1cm;
 }
 
 html {
 	font-size: 13pt;
 	line-height: 1.3;
 	font-family: var(--main-font);
 	-webkit-print-color-adjust: exact;
+	height: 100%;
 }
 
 body {
 	margin: 0;
 	padding: 0;
+	height: 100%;
 }
 
 h1,

diff --git a/templates/default.html b/templates/default.html
@@ -10,6 +10,10 @@
 </head>
 <body>
 
+	{% if blueprint.cover.generate %}
+	{% include blueprint.cover.template %}
+	{% endif %}
+
 	{% if blueprint.toc.generate %}
 	{% include blueprint.toc.template %}
 	{% endif %}

diff --git a/templates/default_cover.css b/templates/default_cover.css
@@ -0,0 +1,38 @@
+.cover {
+	display: block;
+	position: relative;
+	height: 100%;
+	page-break-after: always;
+}
+.cover-header {
+	position: absolute;
+	top: 5px;
+	left: 5px;
+}
+.cover-jumbo {
+	position: relative;
+	height: 40%;
+	width: 90%;
+	margin: auto;
+	border-bottom: 1px solid #eaeaea;
+}
+.cover-jumbo > h1 {
+	font-size: 1.5rem;
+	position: absolute;
+	bottom: 10px;
+}
+.cover-picture {
+	position: relative;
+	height: 40%;
+	width: 90%;
+	margin: auto;
+}
+.cover-picture > img {
+	max-width: 100%;
+	max-height: 100%;
+}
+.cover-footer {
+	position: absolute;
+	bottom: 25px;
+	left: 5px;
+}
diff --git a/templates/default_cover.html b/templates/default_cover.html
@@ -0,0 +1,16 @@
+<div class="cover">
+	<div class="cover-header">
+		{{blueprint.cover.header}}
+	</div>
+	<div class="cover-jumbo">
+		<h1>{{blueprint.cover.title}}</h1>
+	</div>
+	<div class="cover-picture">
+		{% if blueprint.cover.picture %}
+		<img src="{{blueprint.cover.picture}}" />
+		{% endif %}
+	</div>
+	<div class="cover-footer">
+		{{blueprint.cover.footer}}
+	</div>
+</div>
diff --git a/templates/default_toc.css b/templates/default_toc.css
@@ -1,3 +1,6 @@
 nav.toc {
+	display: block;
+	position: relative;
+	height: 100%;
 	page-break-after: always;
 }