krz/org-live

An org-mode editor with live preview. editor live-preview org-mode web https://org.krz.sh

Commit cbc25df5b4

cbc25df5b41af8500d089646e4ce739a4ef521cf

parent: b052eec657

Verified · cmc

cmc <hello@cleberg.net> · 2024-03-23 02:55 UTC 

create live preview pane

Layout: unified · split

README.org +9 −3
@@ -10,7 +10,13 @@ editing [[https://orgmode.org/][org-mode]].
10- Download the org-mode content to a local file. 10- Download the org-mode content to a local file.
11- Download the parsed HTML output to a local file. 11- Download the parsed HTML output to a local file.
12 12
13** TODO Further Development 13** Further Development
14*** DONE Explore feasability of parsing org-mode to HTML constantly and sending parsed HTML output to a "viewing" pane.
14 15
15- Explore feasability of parsing org-mode to HTML constantly and sending parsed 16** Screenshots
16 HTML output to a "viewing" pane. 17
18#+caption: Light Mode
19[[./screenshots/light_preview.png]]
20
21#+caption: Dark Mode
22[[./screenshots/dark_preview.png]]
index.html +1
@@ -28,6 +28,7 @@
28 required 28 required
29 ></textarea> 29 ></textarea>
30 </form> 30 </form>
31 <div id="preview"></div>
31 <dialog id="modal"></dialog> 32 <dialog id="modal"></dialog>
32 <script src="./static/org.js"></script> 33 <script src="./static/org.js"></script>
33 <script src="./static/app.js"></script> 34 <script src="./static/app.js"></script>
screenshots/dark_preview.png added

Binary file not shown.

screenshots/light_preview.png added

Binary file not shown.

static/app.js +11
@@ -1,3 +1,14 @@
1window.onkeyup = keyup;
2var inputText;
3
4function keyup(e) {
5 // inputText = e.target.value;
6 inputText = parseOrg();
7
8 const preview = document.getElementById("preview");
9 preview.innerHTML = inputText;
10}
11
1function parseOrg() { 12function parseOrg() {
2 var orgCode = document.getElementById("editor").value; 13 var orgCode = document.getElementById("editor").value;
3 var orgParser = new Org.Parser(); 14 var orgParser = new Org.Parser();
static/styles.css +54 −41
@@ -174,7 +174,8 @@ textarea {
174 */ 174 */
175 175
176button, 176button,
177input { /* 1 */ 177input {
178 /* 1 */
178 overflow: visible; 179 overflow: visible;
179} 180}
180 181
@@ -184,7 +185,8 @@ input { /* 1 */
184 */ 185 */
185 186
186button, 187button,
187select { /* 1 */ 188select {
189 /* 1 */
188 text-transform: none; 190 text-transform: none;
189} 191}
190 192
@@ -348,66 +350,77 @@ template {
348 display: none; 350 display: none;
349} 351}
350 352
351
352/* CUSTOM SITE CSS 353/* CUSTOM SITE CSS
353 ========================================================================== */ 354 ========================================================================== */
354body { 355body {
355 font-family: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace; 356 font-family:
356 overflow-x: hidden; 357 Menlo,
357 margin: 0; 358 Consolas,
358 padding: 0; 359 Monaco,
360 Liberation Mono,
361 Lucida Console,
362 monospace;
363 overflow-x: hidden;
364 margin: 0;
365 padding: 0;
359} 366}
360 367
361form { 368form {
362 display: flex; 369 display: flex;
363 flex-direction: column; 370 flex-direction: column;
364 align-items: center; 371 align-items: center;
365 justify-content: center; 372 justify-content: center;
366} 373}
367 374
368div { 375div:not(#preview) {
369 display: flex; 376 display: flex;
370 flex-direction: row; 377 flex-direction: row;
371 align-items: center; 378 align-items: center;
372 justify-content: center; 379 justify-content: center;
373 width: 100vw; 380 width: 100vw;
374} 381}
375 382
376label { 383label {
377 text-align: center; 384 text-align: center;
378 width: 20%; 385 width: 20%;
379} 386}
380 387
381.spacer { 388.spacer {
382 width: 60%; 389 width: 60%;
383} 390}
384 391
385button { 392button {
386 border: none; 393 border: none;
387 border-radius: 0; 394 border-radius: 0;
388 padding: 0.75rem; 395 padding: 0.75rem;
389 width: 20%; 396 width: 20%;
390} 397}
391 398
392textarea { 399textarea {
393 background-color: inherit; 400 background-color: inherit;
394 border: none; 401 border: none;
395 border-radius: 0; 402 border-bottom: 1px solid black;
396 -webkit-box-shadow: none; 403 border-radius: 0;
397 -moz-box-shadow: none; 404 -webkit-box-shadow: none;
398 box-shadow: none; 405 -moz-box-shadow: none;
399 resize: none; 406 box-shadow: none;
400 outline: none; 407 resize: none;
401 408 outline: none;
402 height: 100vh; 409}
403 width: 100vw; 410
404 max-height: 100vw; 411textarea,
405 max-width: 90vw; 412#preview {
406 margin: 0 auto; 413 height: 40vh;
407 padding: 1.5rem; 414 width: 100vw;
415 max-height: 40vh;
416 max-width: 90vw;
417 margin: 0 auto;
418 padding: 1.5rem;
419 /* white-space: pre-wrap; */
420 overflow: scroll;
408} 421}
409 422
410:modal { 423:modal {
411 height: 90vh; 424 height: 90vh;
412 width: 90vw; 425 width: 90vw;
413} 426}
static/styles.min.css +1 −1
@@ -1 +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 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: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