Export Brew as a CBZ file

client/homebrew/editor/metadataEditor/metadataEditor.jsx

@@ -7,10 +7,13 @@ const request = require('../../utils/request-middleware.js');
 const Nav = require('naturalcrit/nav/nav.jsx');
 const Combobox = require('client/components/combobox.jsx');
 const StringArrayEditor = require('../stringArrayEditor/stringArrayEditor.jsx');
+const htmlimg = require('html-to-image');
 
 
 const Themes = require('themes/themes.json');
 const validations = require('./validations.js');
+const base64url = require('base64-url');
+
 
 const SYSTEMS = ['5e', '4e', '3.5e', 'Pathfinder'];
 
@@ -32,6 +35,7 @@ const MetadataEditor = createClass({
 				title       : '',
 				description : '',
 				thumbnail   : '',
+				thumbnailSm : null,
 				tags        : [],
 				published   : false,
 				authors     : [],
@@ -57,9 +61,62 @@ const MetadataEditor = createClass({
 		});
 	},
 
+
+	thumbnailCapture : async function() {
+
+		function urlReplacer(urlMatch, url) {
+			return (`url(/xssp/${base64url.encode(url)})`);
+		}
+		const bR = parent.document.getElementById('BrewRenderer');
+		const brewRenderer = bR.contentDocument || bR.contentWindow.document;
+		const pageOne = brewRenderer.getElementsByClassName('page')[0];
+		const topPage = pageOne.cloneNode(true);
+		pageOne.parentNode.appendChild(topPage);
+		// Walk through Top Page's Source and convert all Images to inline data *in* topPage.
+		const srcImages = pageOne.getElementsByTagName('img');
+		const topImages = topPage.getElementsByTagName('img');
+		const topLinks = brewRenderer.getElementsByTagName('link');
+		const topStyles = brewRenderer.getElementsByTagName('style');
+		// These two should start off with identical contents.
+		for (let imgPos = 0; imgPos < srcImages.length; imgPos++) {
+			topImages[imgPos].src = `/xssp/${base64url.encode(srcImages[imgPos].src)}`;
+		}
+		for (let linkPos = 0; linkPos < topLinks.length; linkPos++) {
+			topLinks[linkPos].href = `/xssp/${base64url.encode(topLinks[linkPos].href)}`;
+		}
+		for (let stylePos = 0; stylePos < topStyles.length; stylePos++) {
+			const urlRegex = /url\(([^\'\"].*[^\'\"])\)/gs;
+			const urlRegexWrapped = /url\(\'(.*)\'\)/gs;
+			topStyles[stylePos].innerText = topStyles[stylePos].innerText.replace(urlRegex,  urlReplacer);
+			topStyles[stylePos].innerText = topStyles[stylePos].innerText.replace(urlRegexWrapped, urlReplacer);
+		}
+		const props = this.props;
+
+		const clientHeightLg = topPage.clientHeight * 0.5;
+		const clientWidthSm = topPage.clientWidth * (115/topPage.clientHeight);
+		const clientWidthLg = topPage.clientWidth * 0.5;
+
+		// HARD Override margins.
+		topPage.style.margin = '0px';
+
+		htmlimg.toPng(topPage, { canvasHeight : clientHeightLg, canvasWidth : clientWidthLg
+		}).then(function(dataURL){
+		  props.metadata.thumbnailLg = dataURL;
+		  	htmlimg.toJpeg(topPage, { canvasHeight : 115, canvasWidth : clientWidthSm, quality : 0.95
+		  	}).then(function(dataURL){
+				props.metadata.thumbnail = 'Page 1';
+				props.metadata.thumbnailSm = dataURL;
+				props.onChange(props.metadata);
+				topPage.remove();
+			});
+		  props.onChange(props.metadata);
+	  	});
+	},
+
 	renderThumbnail : function(){
 		if(!this.state.showThumbnail) return;
-		return <img className='thumbnail-preview' src={this.props.metadata.thumbnail || homebreweryThumbnail}></img>;
+		const imgURL = this.props.metadata.thumbnail.startsWith('Page 1') ? this.props.metadata.thumbnailSm : this.props.metadata.thumbnail;
+		return <img className='thumbnail-preview' src={imgURL || homebreweryThumbnail}></img>;
 	},
 
 	handleFieldChange : function(name, e){
@@ -339,6 +396,9 @@ const MetadataEditor = createClass({
 						<button className='display' onClick={this.toggleThumbnailDisplay}>
 							<i className={`fas fa-caret-${this.state.showThumbnail ? 'right' : 'left'}`} />
 						</button>
+						<button className='display' onClick={this.thumbnailCapture}>
+							<i className={`fas fa-camera`} />
+						</button>
 					</div>
 				</div>
 				{this.renderThumbnail()}

client/homebrew/editor/metadataEditor/validations.js

@@ -16,7 +16,9 @@ module.exports = {
 		(value)=>{
 			if(value?.length == 0){return null;}
 			try {
-				Boolean(new URL(value));
+				if(value != 'Page 1') {
+					Boolean(new URL(value));
+				}
 				return null;
 			} catch (e) {
 				return 'Must be a valid URL';

client/homebrew/navbar/print.navitem.jsx

@@ -1,9 +1,20 @@
 const React = require('react');
 const Nav = require('naturalcrit/nav/nav.jsx');
-const { printCurrentBrew } = require('../../../shared/helpers.js');
+const { printCurrentBrew, createBrewCBZ } = require('../../../shared/helpers.js');
 
 module.exports = function(){
-	return <Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
-		get PDF
-	</Nav.item>;
+	return <Nav.dropdown>
+		<Nav.item
+			className='export'
+			color='purple'
+			icon='fa-solid fa-file-export'>
+			export
+		</Nav.item>
+		<Nav.item onClick={printCurrentBrew} color='purple' icon='far fa-file-pdf'>
+			PDF
+		</Nav.item>
+		<Nav.item onClick={createBrewCBZ} color='purple' icon='far fa-file-archive'>
+			CBZ
+		</Nav.item>
+	</Nav.dropdown>;
 };

config/default.json

@@ -6,5 +6,7 @@
 	"enable_v3" : true,
 	"enable_themes" : true,
 	"local_environments" : ["docker", "local"],
-	"publicUrl" : "https://homebrewery.naturalcrit.com"
+	"publicUrl" : "https://homebrewery.naturalcrit.com",
+	"proxyHost" : "https://172.17.0.1",
+	"proxyPort" : 3128
 }