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