generate index.html with embedded style and script

diff --git a/editor.js b/editor.js
index b25ee0bf8886113abe4efff2f5276d54497c6e44..b1c890b6fd9afa2f75d8fee8be837ca5ec2aae91 100644 (file)
--- 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 (executable)
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 62bfc6bf61156c0cf23c8a0402aa4cefffdb20ee..d0c1e85f8cfeeeaac9cdf7bec07c8c6d77d5b16b 100644 (file)
--- 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>