krz/org-live
An org-mode editor with live preview.
clone: git clone https://gitbay.org/krz/org-live.git
cbc25df5b41af8500d089646e4ce739a4ef521cf
verified · cmc
author: Christian Cleberg <hello@cleberg.net> · 2024-03-23T02:55:34Z
README.org | 12 ++++-- index.html | 1 + screenshots/dark_preview.png | Bin 0 -> 898714 bytes screenshots/light_preview.png | Bin 0 -> 1036725 bytes static/app.js | 11 +++++ static/styles.css | 95 ++++++++++++++++++++++++------------------ static/styles.min.css | 2 +- 7 files changed, 76 insertions(+), 45 deletions(-) @@ -10,7 +10,13 @@ editing [[https://orgmode.org/][org-mode]]. - Download the org-mode content to a local file. - Download the parsed HTML output to a local file. -** TODO Further Development +** Further Development +*** DONE Explore feasability of parsing org-mode to HTML constantly and sending parsed HTML output to a "viewing" pane. -- Explore feasability of parsing org-mode to HTML constantly and sending parsed - HTML output to a "viewing" pane. +** Screenshots + +#+caption: Light Mode +[[./screenshots/light_preview.png]] + +#+caption: Dark Mode +[[./screenshots/dark_preview.png]] @@ -28,6 +28,7 @@ required ></textarea> </form> + <div id="preview"></div> <dialog id="modal"></dialog> <script src="./static/org.js"></script> <script src="./static/app.js"></script> new file mode 100644 Binary files /dev/null and b/screenshots/dark_preview.png differ new file mode 100644 Binary files /dev/null and b/screenshots/light_preview.png differ @@ -1,3 +1,14 @@ +window.onkeyup = keyup; +var inputText; + +function keyup(e) { + // inputText = e.target.value; + inputText = parseOrg(); + + const preview = document.getElementById("preview"); + preview.innerHTML = inputText; +} + function parseOrg() { var orgCode = document.getElementById("editor").value; var orgParser = new Org.Parser(); @@ -174,7 +174,8 @@ textarea { */ button, -input { /* 1 */ +input { + /* 1 */ overflow: visible; } @@ -184,7 +185,8 @@ input { /* 1 */ */ button, -select { /* 1 */ +select { + /* 1 */ text-transform: none; } @@ -348,66 +350,77 @@ template { display: none; } - /* CUSTOM SITE CSS ========================================================================== */ body { - font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; - overflow-x: hidden; - margin: 0; - padding: 0; + font-family: + Menlo, + Consolas, + Monaco, + Liberation Mono, + Lucida Console, + monospace; + overflow-x: hidden; + margin: 0; + padding: 0; } form { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; } -div { - display: flex; - flex-direction: row; - align-items: center; - justify-content: center; - width: 100vw; +div:not(#preview) { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + width: 100vw; } label { - text-align: center; - width: 20%; + text-align: center; + width: 20%; } .spacer { - width: 60%; + width: 60%; } button { - border: none; - border-radius: 0; - padding: 0.75rem; - width: 20%; + border: none; + border-radius: 0; + padding: 0.75rem; + width: 20%; } textarea { - background-color: inherit; - border: none; - border-radius: 0; - -webkit-box-shadow: none; - -moz-box-shadow: none; - box-shadow: none; - resize: none; - outline: none; - - height: 100vh; - width: 100vw; - max-height: 100vw; - max-width: 90vw; - margin: 0 auto; - padding: 1.5rem; + background-color: inherit; + border: none; + border-bottom: 1px solid black; + border-radius: 0; + -webkit-box-shadow: none; + -moz-box-shadow: none; + box-shadow: none; + resize: none; + outline: none; +} + +textarea, +#preview { + height: 40vh; + width: 100vw; + max-height: 40vh; + max-width: 90vw; + margin: 0 auto; + padding: 1.5rem; + /* white-space: pre-wrap; */ + overflow: scroll; } :modal { - height: 90vh; - width: 90vw; + height: 90vh; + width: 90vw; } @@ -1 +1 @@ -/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:initial}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;overflow-x:hidden;margin:0;padding:0}form{display:flex;flex-direction:column;align-items:center;justify-content:center}div{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100vw}label{text-align:center;width:20%}.spacer{width:60%}button{border:none;border-radius:0;padding:.75rem;width:20%}textarea{background-color:inherit;border:none;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;resize:none;outline:none;height:100vh;width:100vw;max-height:100vw;max-width:90vw;margin:0 auto;padding:1.5rem}:modal{height:90vh;width:90vw} \ No newline at end of file +/*!normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css*/html{line-height:1.15;-webkit-text-size-adjust:100%}body{margin:0}main{display:block}h1{font-size:2em;margin:.67em 0}hr{box-sizing:content-box;height:0;overflow:visible}pre{font-family:monospace,monospace;font-size:1em}a{background-color:initial}abbr[title]{border-bottom:none;text-decoration:underline;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,samp{font-family:monospace,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}img{border-style:none}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,input{overflow:visible}button,select{text-transform:none}button,[type=button],[type=reset],[type=submit]{-webkit-appearance:button}button::-moz-focus-inner,[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner{border-style:none;padding:0}button:-moz-focusring,[type=button]:-moz-focusring,[type=reset]:-moz-focusring,[type=submit]:-moz-focusring{outline:1px dotted ButtonText}fieldset{padding:.35em .75em .625em}legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}progress{vertical-align:baseline}textarea{overflow:auto}[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}[type=search]::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}details{display:block}summary{display:list-item}template{display:none}[hidden]{display:none}body{font-family:Menlo,Consolas,Monaco,Liberation Mono,Lucida Console,monospace;overflow-x:hidden;margin:0;padding:0}form{display:flex;flex-direction:column;align-items:center;justify-content:center}div:not(#preview){display:flex;flex-direction:row;align-items:center;justify-content:center;width:100vw}label{text-align:center;width:20%}.spacer{width:60%}button{border:none;border-radius:0;padding:.75rem;width:20%}textarea{background-color:inherit;border:none;border-bottom:1px solid #000;border-radius:0;-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;resize:none;outline:none}textarea,#preview{height:40vh;width:100vw;max-height:40vh;max-width:90vw;margin:0 auto;padding:1.5rem;overflow:scroll}:modal{height:90vh;width:90vw} \ No newline at end of file