diff --git a/pkg/arvo/app/neo.hoon b/pkg/arvo/app/neo.hoon index 022255d300..0b13b78b59 100644 --- a/pkg/arvo/app/neo.hoon +++ b/pkg/arvo/app/neo.hoon @@ -792,6 +792,7 @@ ;head ;meta(charset "UTF-8"); ;title: s k y + ;script(src "https://code.jquery.com/jquery-3.7.1.js"); ;script(src "https://unpkg.com/htmx.org@1.9.11"); ;script(src "https://unpkg.com/htmx.org@1.9.11/dist/ext/response-targets.js"); ;script: {html-enc-js} @@ -833,6 +834,8 @@ const sharedStyles = new CSSStyleSheet(); sharedStyles.replaceSync(`{(trip style-css)}`); document.adoptedStyleSheets = [sharedStyles]; + window.log=function()\{if(this.console)\{console.log(Array.prototype.slice.call(arguments));}}; + jQuery.fn.log=function (msg)\{console.log(msg, this); return this;}; """ == ;script: {(trip date-now)} @@ -936,6 +939,7 @@ [(weld #/[p/our.bowl] here) %make %sky `!>([%system ~ 0]) ~] [#/[p/our.bowl]/home/diary %make %diary `!>('') ~] [#/[p/our.bowl]/home/tasks %make %task `!>(['' | ~]) ~] + [#/[p/our.bowl]/home/sail %make %sail `!>(['' 'prose p3' ~]) ~] [#/[p/our.bowl]/home/iframes/wiki %make %iframe `!>('https://en.wikipedia.org/wiki/Main_Page') ~] == |- diff --git a/pkg/arvo/neo/src/std/con/node-sail.hoon b/pkg/arvo/neo/src/std/con/node-sail.hoon new file mode 100644 index 0000000000..bb46b43bc7 --- /dev/null +++ b/pkg/arvo/neo/src/std/con/node-sail.hoon @@ -0,0 +1,33 @@ +/@ node +/@ sail +:- [%node %sail] +|= nod=node +|^ + ^- sail + =/ code-el (snag 1 c.nod) + =/ code (crip (~(got by (malt a.g.code-el)) %value)) + =/ class-el (snag 0 c.nod) + =/ class (crip (~(got by (malt a.g.class-el)) %value)) + [code class `(render-udon code)] +++ render-udon + |= code=@t + ^- (each manx tang) + =/ newline (trip 10) + =/ udon + :: format as udon document + %- crip + ;: welp + ";>" newline newline + (trip code) newline + == + =/ mul + %- mule + |. + !< manx + %+ slap !>(..zuse) + (ream udon) + ?- -.mul + %.y [%.y (manx p.mul)] + %.n [%.n (tang p.mul)] + == +-- diff --git a/pkg/arvo/neo/src/std/con/sail-htmx.hoon b/pkg/arvo/neo/src/std/con/sail-htmx.hoon new file mode 100644 index 0000000000..d3081277cf --- /dev/null +++ b/pkg/arvo/neo/src/std/con/sail-htmx.hoon @@ -0,0 +1,116 @@ +/@ sail +:- [%sail %htmx] +|= =sail +|= =bowl:neo +|^ + ;div.fc.relative.hf + ;+ controls + ;div.frw.js.as.scroll-hidden.hf + ;+ editor + ;+ viewer + == + == +++ id + ^- tape + %- zing + %+ turn (pout here.bowl) + |= smeg=@ta + %+ weld "--" + (trip smeg) +++ controls + ;div.b1.p2.fr.g3.sticky.wf + =style "top:0; left: 0;" + ;label.fr.g1 + ;input + =name "view" + =type "radio" + =oninput "$('#editor-{id}').removeClass('hidden');$('#viewer-{id}').addClass('hidden');" + ; + == + ;span: edit + == + ;label.fr.g1 + ;input + =name "view" + =type "radio" + =oninput "$('#editor-{id}').parent().children().removeClass('hidden');" + ; + == + ;span: both + == + ;label.fr.g1 + ;input + =name "view" + =type "radio" + =checked "" + =oninput "$('#editor-{id}').addClass('hidden');$('#viewer-{id}').removeClass('hidden');" + ; + == + ;span: view + == + ;div.grow; + ;div.loader + =id "ind-{id}" + ;span.loaded.f3: saved + ;span.loading: --- + == + == +++ editor + ;form.fc.hidden.grow.basis-half.border.scroll-y + =id "editor-{id}" + =style "min-width: 300px;" + =hx-post "/neo/hawk{(en-tape:pith:neo here.bowl)}?stud=sail" + =hx-swap "innerHTML" + =hx-select "main > div" + =hx-target "#viewer-{id}" + =hx-trigger "input changed delay:0.4s from:find textarea, input changed delay:0.4s from:find input" + =hx-indicator "#ind-{id}" + ;input.p2.mono + =style "border-bottom: 1px solid var(--f3);" + =name "class" + =placeholder "prose p3" + =type "text" + =autocomplete "off" + =value (trip class.sail) + =oninput "$(this).attr('value', this.value);" + ; + == + ;textarea.p2.pre.mono.scroll-x + =name "code" + =oninput "this.setAttribute('value', this.value); this.rows = this.value.split('\\n').length + 0;" + =rows "{<(add (lent (fand ~[10] (trip code.sail))) 0)>}" + =spellcheck "false" + =placeholder "# new document" + ; {(trip code.sail)} + == + == +++ error + |= =tang + ;div.fc.g3.p3 + ;div.pre.mono + ;* + %+ turn (scag 25 tang) + |= =tank + ;span: {(of-wall:format (~(win re tank) 0 80))} + == + == +++ viewer + ;main.grow.basis-half.scroll-x.scroll-y + =id "viewer-{id}" + =style "min-width: 300px; min-height: 100%;" + ;+ + ?~ result.sail + ;div.prose.p3 + ;h1: nothing rendered + ;p: edit the sail to begin rendering + == + =/ res (need result.sail) + ?- -.res + %.n (error +.res) + %.y + =- -(a.g [[%class (trip class.sail)] a.g.-]) + ^- manx + +.res + == + == +-- diff --git a/pkg/arvo/neo/src/std/imp/sail.hoon b/pkg/arvo/neo/src/std/imp/sail.hoon new file mode 100644 index 0000000000..a56b9f372b --- /dev/null +++ b/pkg/arvo/neo/src/std/imp/sail.hoon @@ -0,0 +1,19 @@ +/@ sail +|% +++ state %sail +++ poke (sy %sail ~) +++ kids *kids:neo +++ deps *deps:neo +++ form + ^- form:neo + |_ [=bowl:neo =ever:neo state-vase=vase *] + ++ poke + |= [=stud:neo vax=vase] + ^- (quip card:neo vase) + ?> =(stud %sail) + `vax + ++ init + |= vas=(unit vase) + `(need vas) + -- +-- diff --git a/pkg/arvo/neo/src/std/pro/sail.hoon b/pkg/arvo/neo/src/std/pro/sail.hoon new file mode 100644 index 0000000000..17263a5b0c --- /dev/null +++ b/pkg/arvo/neo/src/std/pro/sail.hoon @@ -0,0 +1 @@ +,[code=@t class=@t result=(unit (each manx tang))] diff --git a/pkg/arvo/web/style.css b/pkg/arvo/web/style.css index 348423b352..d6ddbb0d84 100644 --- a/pkg/arvo/web/style.css +++ b/pkg/arvo/web/style.css @@ -42,6 +42,9 @@ a { button, input, textarea, iframe { border: unset; } +img { + max-width: 100%; +} .break { word-break: break-word; } @@ -159,6 +162,9 @@ button, input, textarea, iframe { .fixed { position: fixed; } +.sticky { + position: sticky; +} .z-2 { z-index: -20; } @@ -231,6 +237,9 @@ button, input, textarea, iframe { .scroll-x { overflow-x: auto; } +.scroll-hidden { + overflow: hidden; +} .loader { position: relative; } @@ -363,6 +372,20 @@ button { .hover.selected:hover { filter: invert(25%); } +.numbered > *:before { + content: counter(line); + display: inline-block; + border-right: 1px solid var(--f3); + padding: 0 .5em; + margin-right: .5em; + color: var(--f3); + min-width: 34px; + text-align: right; +} +.numbered > * { + display: block; + counter-increment: line; +} .prose h1 { font-size: 1.45rem; margin: 1rem 0; @@ -390,6 +413,9 @@ button { .prose details { margin-bottom: 1rem; } +.prose a { + text-decoration: underline; +} .prose mono { font-size: 1em; }