Preview/Print with CSS from Drafts

Action

Posted by comfortablynick, Last update over 6 years ago

Shows a list of drafts with “css” tag, and use the CSS for preview and printing if desired.

Action will build a prompt with the titles of all “css” tag drafts, sorted by last modified.

Example CSS (place in a draft tagged with “css” to work with this action):

/* Pretty (Light) */
@charset="utf-8";html{font-size:97%;font-family:"Avenir";line-height:1.6}body{background:#fff;color:#777}h1{color:#313131;font-weight:700;line-height:1.3}h2{color:#ea4c89;font-weight:700}h3{color:#09c;font-weight:700}strong,b{color:#d19a66}em,i{color:#c678dd}a{color:#00a5d8;text-decoration:none}code,pre{font-size:14px}pre{overflow:auto;width:auto;background-color:#f2f9f7;border:1px solid #d5ece4;border-radius:3px;padding:15px;color:#7f835d}pre code{overflow:auto;width:auto;background-color:#f2f9f7;color:#7f835d;border:none;padding:0;white-space:pre-wrap;word-wrap:break-word}code{background-color:#f2f9f7;border:1px solid #d5ece4;border-radius:3px;padding:1px 2px 1px 2px;color:#7f835d}table{margin:1em;border-collapse:collapse;width:90%}td,th{padding:.5em;border:1px solid #d5ece4}thead{background:#f6f6f7}blockquote{color:#bcbdbf;font-style:italic;border-left:4px solid #b6e5e1;padding:0 18px}hr{border:none;border-bottom:1px dotted #b6e5e1}div.footnotes{font-size:14px}@media (min-device-width:481px){body{margin:auto;max-width:600px}}

Install

Steps

script

/* Pick CSS Draft and Preview/Print */
(() => {
   // Add tag(s) that identify your CSS files
	const tags = ['css'];
	const draftsFound = Draft.query("", "all", tags);
	const draftAry = [];

	// Sort CSS drafts by modified date
	draftsFound.sort((a, b) => {
		return a.modifiedAt < b.modifiedAt;
	});

	// Create array with draft names and UUID
	for (let d of draftsFound) {
		draftAry.push([d.title.replace(/[*\/]/g, '').trim(), d.uuid]);
	}
	// Load array in to a Map
	const draftMap = new Map(draftAry);

	const p = Prompt.create();
	p.title = "Choose CSS";
	p.message = "Pick CSS file to render document"

	draftMap.forEach((v, k) => {
		p.addButton(k);
	});

	const response = p.show();

	if (response) {
		const pickedDraft = draftMap.get(p.buttonPressed);
		// Get draft CSS contents and load into template
		if (pickedDraft == draft.uuid) {
			context.fail("Cannot apply CSS file to itself!");
		} else {
			const css = Draft.find(pickedDraft).content;
			draft.setTemplateTag("css", css);
		}
	} else {
		context.cancel();
	};
})();

htmlpreview

<!DOCTYPE html>
<html dir="auto">
<head>
<title>[[title]]</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
[[css]]
</style>
</head>
<body>
  %%[[draft]]%%
</body>
</html>

print

template	[[title]] %%[[draft]]%%
format	html

Options

After Success Nothing

Notification Error

Log Level Error

Items available in the Drafts Directory are uploaded by community members. Use appropriate caution reviewing downloaded items before use.

After Success	Nothing
Notification	Error
Log Level	Error