From: Michael D. Lowis <mike@mdlowis.com>
Date: Fri, 1 Dec 2017 02:53:16 +0000 (-0500)
Subject: generate index.html with embedded style and script
X-Git-Url: https://git.mdlowis.com/?a=commitdiff_plain;h=00feba0e986fe338353c120b78557b6412c87353;p=proto%2Fjournal.git

generate index.html with embedded style and script
---

diff --git a/editor.js b/editor.js
index b25ee0b..b1c890b 100644
--- a/editor.js
+++ b/editor.js
@@ -1,64 +1,67 @@
 "use strict";
 
 (() => {
-	const getSelNode = () => {
-		const node = document.getSelection().anchorNode;
-		return (node.nodeType === 3 ? node.parentNode : node);
-	};
+    const doc = document;
+    doc.exec = doc.execCommand;
 
-	const ymd_string = () => {
-		const dt = new Date(), month = (dt.getMonth() + 1), day = dt.getDate();
-		return [dt.getFullYear(), (month > 9 ? '' : '0') + month, (day > 9 ? '' : '0') + day].join('.')
-	};
+    const getSelNode = () => {
+        const node = doc.getSelection().anchorNode;
+        return (node.nodeType === 3 ? node.parentNode : node);
+    };
 
-	const exec = document.execCommand;
-	const ctrlHeld = (ev) => (ev.ctrlKey || ev.metaKey)
-	const inTag = (tag) => (getSelNode().nodeName === tag);
-	const keyCmd = (ev, cmd, arg) => (ctrlHeld() ? !exec(cmd, false, arg) : true);
+    const ymd_string = () => {
+        const dt = new Date(), month = (dt.getMonth() + 1), day = dt.getDate();
+        return [dt.getFullYear(), (month > 9 ? '' : '0') + month, (day > 9 ? '' : '0') + day].join('.');
+    };
 
-	const keys = {
-		"b": (ev) => keyCmd(ev, "bold"),
-		"i": (ev) => keyCmd(ev, "italic"),
-		"u": (ev) => keyCmd(ev, "underline"),
-		"0": (ev) => keyCmd(ev, "formatBlock", "<p>"),
-		"1": (ev) => keyCmd(ev, "formatBlock", "<h1>"),
-		"2": (ev) => keyCmd(ev, "formatBlock", "<h2>"),
-		"3": (ev) => keyCmd(ev, "formatBlock", "<h3>"),
-		"4": (ev) => keyCmd(ev, "formatBlock", "<h4>"),
-		"5": (ev) => keyCmd(ev, "formatBlock", "<h5>"),
-		"6": (ev) => keyCmd(ev, "formatBlock", "<h6>"),
-		"7": (ev) => keyCmd(ev, "insertOrderedList"),
-		"8": (ev) => keyCmd(ev, "insertUnorderedList"),
-		"9": (ev) => {
-			if (ctrlHeld()) {
-				const defurl = (inTag("A") ? getSelNode().href : "http://");
-				const url = prompt("Enter URL:", defurl);
-				return !exec((url !== null && url !== "" ? "createLink" : "unlink"), false, url);
-			}
-			return true;
-		},
+    const ctrlHeld = (ev) => (ev.ctrlKey || ev.metaKey);
+    const inTag = (tag) => (getSelNode().nodeName === tag);
+    const keyCmd = (ev, cmd, arg) => (ctrlHeld(ev) ? !doc.exec(cmd, false, arg) : true);
 
-		"Enter": () => !exec(inTag("CODE") ? "insertHTML" : "insertParagraph", false, "\n"),
+    const keys = {
+        "b": (ev) => keyCmd(ev, "bold"),
+        "i": (ev) => keyCmd(ev, "italic"),
+        "u": (ev) => keyCmd(ev, "underline"),
+        "0": (ev) => keyCmd(ev, "formatBlock", "<p>"),
+        "1": (ev) => keyCmd(ev, "formatBlock", "<h1>"),
+        "2": (ev) => keyCmd(ev, "formatBlock", "<h2>"),
+        "3": (ev) => keyCmd(ev, "formatBlock", "<h3>"),
+        "4": (ev) => keyCmd(ev, "formatBlock", "<h4>"),
+        "5": (ev) => keyCmd(ev, "formatBlock", "<h5>"),
+        "6": (ev) => keyCmd(ev, "formatBlock", "<h6>"),
+        "7": (ev) => keyCmd(ev, "insertOrderedList"),
+        "8": (ev) => keyCmd(ev, "insertUnorderedList"),
+        "9": (ev) => {
+            if (ctrlHeld(ev)) {
+                const defurl = (inTag("A") ? getSelNode().href : "http://");
+                const url = prompt("Enter URL:", defurl);
+                return !doc.exec((url !== null && url !== "" ? "createLink" : "unlink"), false, url);
+            }
+            return true;
+        },
 
-		"Tab": (ev) => {
-			if (inTag("CODE"))
-				return !exec("insertHTML",false,"\t");
-			else
-				return !exec((ev.shiftKey ? "out" : "in")+"dent",false);
-		},
+        "Enter": () =>  !doc.exec(inTag("CODE") ? "insertHTML" : "insertParagraph", false, "\n"),
 
-		";": (ev) => keyCmd(ev, "insertHTML", "<code>\r\n</code>"),
-		"'": (ev) => {
-			if (ctrlHeld()) {
-				const block = (inTag("BLOCKQUOTE") ? "<p>" : "<blockquote>");
-				return !exec("formatBlock", false, block);
-			}
-			return true;
-		},
-	};
+        "Tab": (ev) => {
+            if (inTag("CODE"))
+                return !doc.exec("insertHTML",false,"\t");
+            else
+                return !doc.exec((ev.shiftKey ? "out" : "in")+"dent",false);
+        },
 
-	header.onkeyup = (ev) => (document.title = header.innerText)
-	content.onkeydown = (ev) => (keys[ev.key] ? keyfn(keys[ev.key]) : true),
-	header.innerHTML = '<h1 align="center" contenteditable="true">' + ymd_string() + '</h1><hr/>';
-	document.title = header.innerText;
+        ";": (ev) => keyCmd(ev, "insertHTML", "<code>\r\n</code>"),
+        "'": (ev) => {
+            if (ctrlHeld(ev)) {
+                const block = (inTag("BLOCKQUOTE") ? "<p>" : "<blockquote>");
+                return !doc.exec("formatBlock", false, block);
+            }
+            return true;
+        },
+    };
+
+    header.onkeyup = (ev) => (doc.title = header.innerText);
+    content.onkeydown = (ev) => (keys[ev.key] ? (keys[ev.key])(ev) : true);
+    header.innerHTML = '<h1 align="center" contenteditable="true">' + ymd_string() + '</h1><hr/>';
+    doc.title = header.innerText;
+    content.focus();
 })();
diff --git a/generate.sh b/generate.sh
new file mode 100755
index 0000000..7bd0928
--- /dev/null
+++ b/generate.sh
@@ -0,0 +1,27 @@
+#!/bin/bash
+style="$(cat "style.css")"
+script="$(cat "editor.js")"
+
+cat <<-eos
+<!DOCTYPE html>
+<html>
+<head>
+    <title></title>
+    <meta charset="utf-8">
+    <style>
+$style
+    </style>
+</head>
+<body>
+    <section>
+        <header id="header"></header>
+        <article id="content" contenteditable="true">
+            <p>Edit here...</p>
+        </article>
+    </section>
+    <script>
+$script
+    </script>
+</body>
+</html>
+eos
diff --git a/index.html b/index.html
index 62bfc6b..d0c1e85 100644
--- a/index.html
+++ b/index.html
@@ -1,17 +1,151 @@
 <!DOCTYPE html>
 <html>
 <head>
-	<title></title>
-	<meta charset="utf-8">
-	<link rel="stylesheet" type="text/css" href="style.css">
+    <title></title>
+    <meta charset="utf-8">
+    <style>
+* { -moz-box-sizing: border-box; box-sizing: border-box; }
+*:focus { outline: none; }
+
+body {
+	font-family: sans-serif;
+	font-size: 16px;
+	max-width: 75%;
+	margin-left: auto;
+	margin-right: auto;
+}
+
+h1 { font-size: 2.0rem; }
+h2 { font-size: 1.5rem; }
+h3 { font-size: 1.17rem; }
+h4 { font-size: 1.0rem; }
+h5 { font-size: 0.83rem; }
+h6 { font-size: 0.67rem; }
+a { color: deepskyblue; }
+
+table {
+	display: block;
+	width: 100%;
+	overflow: auto;
+	border-spacing: 0;
+	border-collapse: collapse;
+}
+
+code {
+	display: block;
+	padding: 1rem 1.5rem;
+	white-space: pre;
+	margin: 0.2rem;
+	background: #F1F1F1;
+	border: 1px solid #E1E1E1;
+	border-radius: 4px;
+	-moz-tab-size: 4;
+	-o-tab-size:   4;
+	tab-size:      4;
+}
+
+blockquote {
+	display: block;
+	border-left: 4px solid deepskyblue;
+	margin-left: -19px;
+	padding-left: 15px;
+	margin-right: 0px;
+}
+
+table {
+	width: 100%;
+	display: table;
+	border-collapse: separate;
+	border-color: grey;
+	text-align: left;
+	vertical-align: middle;
+}
+
+th, td {
+	padding: 0.80rem 0.80rem;
+	border-bottom: 1px solid #E1E1E1;
+}
+
+th:first-child, td:first-child {
+	padding-left: 0;
+}
+    </style>
 </head>
 <body>
-	<section>
-		<header id="header"></header>
-		<article id="content" contenteditable="true">
-			<p>Edit here...</p>
-		</article>
-	</section>
-	<script src="editor.js"></script>
+    <section>
+        <header id="header"></header>
+        <article id="content" contenteditable="true">
+            <p>Edit here...</p>
+        </article>
+    </section>
+    <script>
+"use strict";
+
+(() => {
+    const doc = document;
+    doc.exec = doc.execCommand;
+
+    const getSelNode = () => {
+        const node = doc.getSelection().anchorNode;
+        return (node.nodeType === 3 ? node.parentNode : node);
+    };
+
+    const ymd_string = () => {
+        const dt = new Date(), month = (dt.getMonth() + 1), day = dt.getDate();
+        return [dt.getFullYear(), (month > 9 ? '' : '0') + month, (day > 9 ? '' : '0') + day].join('.');
+    };
+
+    const ctrlHeld = (ev) => (ev.ctrlKey || ev.metaKey);
+    const inTag = (tag) => (getSelNode().nodeName === tag);
+    const keyCmd = (ev, cmd, arg) => (ctrlHeld(ev) ? !doc.exec(cmd, false, arg) : true);
+
+    const keys = {
+        "b": (ev) => keyCmd(ev, "bold"),
+        "i": (ev) => keyCmd(ev, "italic"),
+        "u": (ev) => keyCmd(ev, "underline"),
+        "0": (ev) => keyCmd(ev, "formatBlock", "<p>"),
+        "1": (ev) => keyCmd(ev, "formatBlock", "<h1>"),
+        "2": (ev) => keyCmd(ev, "formatBlock", "<h2>"),
+        "3": (ev) => keyCmd(ev, "formatBlock", "<h3>"),
+        "4": (ev) => keyCmd(ev, "formatBlock", "<h4>"),
+        "5": (ev) => keyCmd(ev, "formatBlock", "<h5>"),
+        "6": (ev) => keyCmd(ev, "formatBlock", "<h6>"),
+        "7": (ev) => keyCmd(ev, "insertOrderedList"),
+        "8": (ev) => keyCmd(ev, "insertUnorderedList"),
+        "9": (ev) => {
+            if (ctrlHeld(ev)) {
+                const defurl = (inTag("A") ? getSelNode().href : "http://");
+                const url = prompt("Enter URL:", defurl);
+                return !doc.exec((url !== null && url !== "" ? "createLink" : "unlink"), false, url);
+            }
+            return true;
+        },
+
+        "Enter": () =>  !doc.exec(inTag("CODE") ? "insertHTML" : "insertParagraph", false, "\n"),
+
+        "Tab": (ev) => {
+            if (inTag("CODE"))
+                return !doc.exec("insertHTML",false,"\t");
+            else
+                return !doc.exec((ev.shiftKey ? "out" : "in")+"dent",false);
+        },
+
+        ";": (ev) => keyCmd(ev, "insertHTML", "<code>\r\n</code>"),
+        "'": (ev) => {
+            if (ctrlHeld(ev)) {
+                const block = (inTag("BLOCKQUOTE") ? "<p>" : "<blockquote>");
+                return !doc.exec("formatBlock", false, block);
+            }
+            return true;
+        },
+    };
+
+    header.onkeyup = (ev) => (doc.title = header.innerText);
+    content.onkeydown = (ev) => (keys[ev.key] ? (keys[ev.key])(ev) : true);
+    header.innerHTML = '<h1 align="center" contenteditable="true">' + ymd_string() + '</h1><hr/>';
+    doc.title = header.innerText;
+    content.focus();
+})();
+    </script>
 </body>
 </html>