diff --git a/.changeset/sour-stingrays-whisper.md b/.changeset/sour-stingrays-whisper.md new file mode 100644 index 00000000..52c18c18 --- /dev/null +++ b/.changeset/sour-stingrays-whisper.md @@ -0,0 +1,7 @@ +--- +"@hyperbook/markdown": minor +"hyperbook": minor +"@hyperbook/web-component-excalidraw": patch +--- + +Add p5 element diff --git a/.gitignore b/.gitignore index 4554c180..e493b6bb 100644 --- a/.gitignore +++ b/.gitignore @@ -6,6 +6,7 @@ vdirectory.public.json vfiles.json packages/markdown/index.html +packages/markdown/public *.zip diff --git a/packages/markdown/assets/code.css b/packages/markdown/assets/code.css index d763c18a..3d9c400b 100644 --- a/packages/markdown/assets/code.css +++ b/packages/markdown/assets/code.css @@ -178,3 +178,8 @@ code[data-line-numbers-max-digits="3"]>[data-line]::before { code[data-line-numbers-max-digits="4"]>[data-line]::before { width: 2.25rem; } + + +code-input:not(.code-input_registered)::before { + content: "..."!important; +} \ No newline at end of file diff --git a/packages/markdown/assets/directive-abc-music/client.js b/packages/markdown/assets/directive-abc-music/client.js index 59f54e9c..d6763c1d 100644 --- a/packages/markdown/assets/directive-abc-music/client.js +++ b/packages/markdown/assets/directive-abc-music/client.js @@ -1,5 +1,11 @@ hyperbook.abc = (function () { const els = document.querySelectorAll(".directive-abc-music"); + window.codeInput?.registerTemplate( + "abc-highlighted", + codeInput.templates.prism(window.Prism, [ + new codeInput.plugins.Indent(true, 2), + ]) + ); for (let el of els) { const tuneEl = el.getElementsByClassName("tune")[0]; @@ -10,21 +16,33 @@ hyperbook.abc = (function () { if (editor == "true") { const editorEl = el.getElementsByClassName("editor")[0]; - editorEl.value = tune; - let editor = new ABCJS.Editor(editorEl.id, { - canvas_id: tuneEl, - synth: { - el: playerEl, - options: { + + const setupEditor = () => { + try { + new ABCJS.Editor(editorEl.id, { + canvas_id: tuneEl, + synth: { + el: playerEl, + options: { displayRestart: true, displayPlay: true, displayProgress: true, + }, + }, + abcjsParams: { + responsive: "resize", + selectTypes: false, + selectionColor: "currentColor" }, - }, - abcjsParams: { - responsive: "resize", - }, - }); + }); + } catch (e) { + setTimeout(() => { + setupEditor(); + }, 1000); + } + }; + + setupEditor(); } else { const visualObj = ABCJS.renderAbc(tuneEl, tune, { responsive: "resize", diff --git a/packages/markdown/assets/directive-abc-music/style.css b/packages/markdown/assets/directive-abc-music/style.css index b980bc6c..82aa96e6 100644 --- a/packages/markdown/assets/directive-abc-music/style.css +++ b/packages/markdown/assets/directive-abc-music/style.css @@ -1,16 +1,15 @@ .directive-abc-music .editor { - width: 100%; margin-bottom: 8px; - font-family: hyperbook-code, monospace; - height: 150px; - line-height: 1.2; + height: 400px; + border: 1px solid var(--color-spacer); + border-radius: 8px; } .abcjs-inline-audio { height: 26px; padding: 0 5px; - border-radius: 3px; - background-color: #424242; + border-radius: 8px; + background-color: var(--color-spacer); display: flex; align-items: center; box-sizing: border-box; diff --git a/packages/markdown/assets/directive-p5/client.js b/packages/markdown/assets/directive-p5/client.js new file mode 100644 index 00000000..beb458b5 --- /dev/null +++ b/packages/markdown/assets/directive-p5/client.js @@ -0,0 +1,35 @@ +hyperbook.p5 = (function () { + window.codeInput?.registerTemplate( + "p5-highlighted", + codeInput.templates.prism(window.Prism, [ + new codeInput.plugins.AutoCloseBrackets(), + new codeInput.plugins.Indent(true, 2), + ]) + ); + + const elems = document.getElementsByClassName("directive-p5"); + + const wrapSketch = (sketchCode) => { + if (sketchCode !== "" && !sketchCode?.includes("setup")) { + return ` + function setup() { + createCanvas(100, 100); + background(200); + ${sketchCode} + }`; + } + return sketchCode; + }; + + for (let elem of elems) { + const editor = elem.getElementsByClassName("editor")[0]; + const update = elem.getElementsByClassName("update")[0]; + const frame = elem.getElementsByTagName("iframe")[0]; + const template = elem.getAttribute("data-template"); + + update?.addEventListener("click", () => { + const code = editor.value; + frame.srcdoc = template.replace("###SLOT###", wrapSketch(code)); + }); + } +})(); diff --git a/packages/markdown/assets/directive-p5/style.css b/packages/markdown/assets/directive-p5/style.css new file mode 100644 index 00000000..8140c515 --- /dev/null +++ b/packages/markdown/assets/directive-p5/style.css @@ -0,0 +1,79 @@ +.directive-p5 { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; + margin-bottom: 16px; + overflow: hidden; + gap: 8px; +} + +code-input { + margin: 0; +} + +.directive-p5 .container { + width: 100%; + border: 1px solid var(--color-spacer); + border-radius: 8px; + overflow: hidden; +} + +.directive-p5 .editor-container { + width: 100%; + display: flex; + flex-direction: column; + height: 400px; +} + +.directive-p5 .editor { + width: 100%; + border: 1px solid var(--color-spacer); + border-radius: 8px; + border-top-left-radius: 0; + border-top-right-radius: 0; + flex: 1; +} + +.directive-p5 button { + padding: 8px 16px; + border: 1px solid var(--color-spacer); + border-radius: 8px; + border-bottom: none; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + background-color: var(--color--background); + color: var(--color-text); + cursor: pointer; +} + +.directive-p5 button:hover { + background-color: var(--color-spacer); +} + +.directive-p5 iframe { + border: none; + width: 100%; + height: 100%; +} + +.directive-p5 iframe canvas { + margin: 0 auto; +} + +@media screen and (min-width: 1024px) { + .directive-p5:not(.standalone) { + flex-direction: row; + height: calc(100dvh - 128px); + .container { + flex: 1; + height: 100% !important; + } + + .editor-container { + flex: 2; + height: 100%; + overflow: hidden; + } + } +} diff --git a/packages/markdown/assets/directive-protect/client.js b/packages/markdown/assets/directive-protect/client.js index 04860f02..9e6735a3 100644 --- a/packages/markdown/assets/directive-protect/client.js +++ b/packages/markdown/assets/directive-protect/client.js @@ -70,7 +70,6 @@ hyperbook.protect = (function () { onUpdateToast(inputEl, el, hiddenEL); inputEl.addEventListener("input", () => onInputToast(inputEl, el)); inputEl.addEventListener("check", () => { - console.log("update"); onUpdateToast(inputEl, el, hiddenEL); }); } diff --git a/packages/markdown/assets/prism/prism-theme-github-dark.css b/packages/markdown/assets/prism/prism-theme-github-dark.css new file mode 100644 index 00000000..006efca0 --- /dev/null +++ b/packages/markdown/assets/prism/prism-theme-github-dark.css @@ -0,0 +1,133 @@ +/** + * Github Dark theme for Prism.js + * Based on Github: https://github.com + * @author Katorly + */ +/* General */ +pre[class*="language-"], +code[class*="language-"] { + color: #c9d1d9; + font-size: 13px; + text-shadow: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +pre[class*="language-"]::selection, +code[class*="language-"]::selection, +pre[class*="language-"]::mozselection, +code[class*="language-"]::mozselection { + text-shadow: none; + background: #234879; +} +@media print { + pre[class*="language-"], + code[class*="language-"] { + text-shadow: none; + } +} +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + background: #161b22; +} +:not(pre) > code[class*="language-"] { + padding: .1em .3em; + border-radius: .3em; + color: #c9d1d9; + background: #343942; +} +/* Line highlighting */ +pre[data-line] { + position: relative; +} +pre[class*="language-"] > code[class*="language-"] { + position: relative; + z-index: 1; +} +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; + background: #2f2a1e; + box-shadow: inset 5px 0 0 #674c16; + z-index: 0; + pointer-events: none; + line-height: inherit; + white-space: pre; +} +/* Tokens */ +.namespace { + opacity: .7; +} +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #8b949e; +} +.token.punctuation { + color: #c9d1d9; +} +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #79c0ff; +} +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #a5d6ff; +} +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a5d6ff; + background: #161b22; +} +.token.atrule, +.token.attr-value, +.token.keyword { + color: #a5d6ff; +} +.token.function { + color: #d2a8ff; +} +.token.regex, +.token.important, +.token.variable { + color: #a8daff; +} +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} +.token.entity { + cursor: help; +} \ No newline at end of file diff --git a/packages/markdown/assets/prism/prism-theme-github-light.css b/packages/markdown/assets/prism/prism-theme-github-light.css new file mode 100644 index 00000000..d1550c71 --- /dev/null +++ b/packages/markdown/assets/prism/prism-theme-github-light.css @@ -0,0 +1,132 @@ +/** + * Github Light theme for Prism.js + * Based on Github: https://github.com + * @author Katorly + */ +/* General */ +pre[class*="language-"], +code[class*="language-"] { + color: #24292f; + font-size: 13px; + text-shadow: none; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + direction: ltr; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + line-height: 1.5; + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} +pre[class*="language-"]::selection, +code[class*="language-"]::selection, +pre[class*="language-"]::mozselection, +code[class*="language-"]::mozselection { + text-shadow: none; + background: #9fc6e9; +} +@media print { + pre[class*="language-"], + code[class*="language-"] { + text-shadow: none; + } +} +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; + background: #f6f8fa; +} +:not(pre) > code[class*="language-"] { + padding: .1em .3em; + border-radius: .3em; + color: #24292f; + background: #eff1f3; +} +/* Line highlighting */ +pre[data-line] { + position: relative; +} +pre[class*="language-"] > code[class*="language-"] { + position: relative; + z-index: 1; +} +.line-highlight { + position: absolute; + left: 0; + right: 0; + padding: inherit 0; + margin-top: 1em; + background: #fff8c5; + box-shadow: inset 5px 0 0 #eed888; + z-index: 0; + pointer-events: none; + line-height: inherit; + white-space: pre; +} +/* Tokens */ +.namespace { + opacity: .7; +} +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: #6e7781; +} +.token.punctuation { + color: #24292f; +} +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #0550ae; +} +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #0a3069; +} +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #0550ae; +} +.token.atrule, +.token.attr-value, +.token.keyword { + color: #cf222e; +} +.token.function { + color: #8250df; +} +.token.regex, +.token.important, +.token.variable { + color: #0a3069; +} +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} +.token.entity { + cursor: help; +} \ No newline at end of file diff --git a/packages/markdown/assets/prism/prism.css b/packages/markdown/assets/prism/prism.css new file mode 100644 index 00000000..def066e2 --- /dev/null +++ b/packages/markdown/assets/prism/prism.css @@ -0,0 +1,3 @@ +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +code[class*=language-],pre[class*=language-]{color:#000;background:0 0;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono','Ubuntu Mono',monospace;font-size:1em;text-align:left;white-space:pre;word-spacing:normal;word-break:normal;word-wrap:normal;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}}pre[class*=language-]{padding:1em;margin:.5em 0;overflow:auto}:not(pre)>code[class*=language-],pre[class*=language-]{background:#f5f2f0}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em;white-space:normal}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.token.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#9a6e3a;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.class-name,.token.function{color:#dd4a68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help} diff --git a/packages/markdown/assets/prism/prism.js b/packages/markdown/assets/prism/prism.js new file mode 100644 index 00000000..6adbc139 --- /dev/null +++ b/packages/markdown/assets/prism/prism.js @@ -0,0 +1,7 @@ +/* PrismJS 1.29.0 +https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */ +var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(jg.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a"+i.content+""},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism); +Prism.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml; +!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism); +Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/}; +Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript; diff --git a/packages/markdown/assets/shell.css b/packages/markdown/assets/shell.css index 84abb4b6..b0bea7e9 100644 --- a/packages/markdown/assets/shell.css +++ b/packages/markdown/assets/shell.css @@ -309,7 +309,7 @@ main { } article { - max-width: 980px; + max-width: 1280px; margin: 0 auto; grid-area: article; line-height: 1.5; diff --git a/packages/markdown/dev.md b/packages/markdown/dev.md index 7729bf02..834acbf3 100644 --- a/packages/markdown/dev.md +++ b/packages/markdown/dev.md @@ -1,14 +1,138 @@ # Test Site -```abcjs -X: 1 -T: Cooley's -M: 4/4 -L: 1/8 -K: Emin -|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD| +:::p5{height=400 editor=true} + +```js +let circleX = 200; +let circleY = 150; +let circleRadius = 75; + +let graphX = 50; +let graphY = 300; +let graphAmplitude = 50; +let graphPeriod = 300; + +function setup() { + createCanvas(400, 400); + angleMode(DEGREES); + describe( + 'Animated demonstration of a point moving around the unit circle, together with the corresponding sine and cosine values moving along their graphs.' + ); +} + +function draw() { + background(0); + + // Set angle based on frameCount, and display current value + + let angle = frameCount % 360; + + fill(255); + textSize(20); + textAlign(LEFT, CENTER); + text(`angle: ${angle}`, 25, 25); + + // Draw circle and diameters + + noFill(); + stroke(128); + strokeWeight(3); + circle(circleX, circleY, 2 * circleRadius); + line(circleX, circleY - circleRadius, circleX, circleY + circleRadius); + line(circleX - circleRadius, circleY, circleX + circleRadius, circleY); + + // Draw moving points + + let pointX = circleX + circleRadius * cos(angle); + let pointY = circleY - circleRadius * sin(angle); + + line(circleX, circleY, pointX, pointY); + + noStroke(); + + fill('white'); + circle(pointX, pointY, 10); + + fill('orange'); + circle(pointX, circleY, 10); + + fill('red'); + circle(circleX, pointY, 10); + + // Draw graph + + stroke('grey'); + strokeWeight(3); + line(graphX, graphY, graphX + 300, graphY); + line(graphX, graphY - graphAmplitude, graphX, graphY + graphAmplitude); + line( + graphX + graphPeriod, + graphY - graphAmplitude, + graphX + graphPeriod, + graphY + graphAmplitude + ); + + fill('grey'); + strokeWeight(1); + textAlign(CENTER, CENTER); + text('0', graphX, graphY + graphAmplitude + 20); + text('360', graphX + graphPeriod, graphY + graphAmplitude + 20); + text('1', graphX / 2, graphY - graphAmplitude); + text('0', graphX / 2, graphY); + text('-1', graphX / 2, graphY + graphAmplitude); + + fill('orange'); + text('cos', graphX + graphPeriod + graphX / 2, graphY - graphAmplitude); + fill('red'); + text('sin', graphX + graphPeriod + graphX / 2, graphY); + + // Draw cosine curve + + noFill(); + stroke('orange'); + beginShape(); + for (let t = 0; t <= 360; t++) { + let x = map(t, 0, 360, graphX, graphX + graphPeriod); + let y = graphY - graphAmplitude * cos(t); + vertex(x, y); + } + endShape(); + + // Draw sine curve + + noFill(); + stroke('red'); + beginShape(); + for (let t = 0; t <= 360; t++) { + let x = map(t, 0, 360, graphX, graphX + graphPeriod); + let y = graphY - graphAmplitude * sin(t); + vertex(x, y); + } + endShape(); + + // Draw moving line + + let lineX = map(angle, 0, 360, graphX, graphX + graphPeriod); + stroke('grey'); + line(lineX, graphY - graphAmplitude, lineX, graphY + graphAmplitude); + + // Draw moving points on graph + + let orangeY = graphY - graphAmplitude * cos(angle); + let redY = graphY - graphAmplitude * sin(angle); + + noStroke(); + + fill('orange'); + circle(lineX, orangeY, 10); + + fill('red'); + circle(lineX, redY, 10); +} ``` +::: + ```abcjs editor X:1 T: Cooley's Long diff --git a/packages/markdown/devBuild.mjs b/packages/markdown/devBuild.mjs index f390abf7..83c32832 100644 --- a/packages/markdown/devBuild.mjs +++ b/packages/markdown/devBuild.mjs @@ -45,22 +45,6 @@ const result = await process(markdown, { label: "Kontakt 2", icon: "🐦", }, - { - label: "Kontakt 2", - icon: "🐦", - }, - { - label: "Kontakt 2", - icon: "🐦", - }, - { - label: "Kontakt 2", - icon: "🐦", - }, - { - label: "Kontakt 2", - icon: "🐦", - }, ], repo: "https://github.com/openpatch/hyperbook/edit/main/website/de", }, @@ -69,8 +53,10 @@ const result = await process(markdown, { if (typeof p === "string") { p = [p]; } - if (base === "public" || base === "book") { - return path.posix.join("", ...p); + if (base === "public") { + return path.posix.join("/public", ...p); + } else if (base === "book") { + return path.posix.join("/", ...p); } if (base === "assets") { return path.posix.join("/dist", base, ...p); diff --git a/packages/markdown/package.json b/packages/markdown/package.json index 8fe5e267..3a16e37b 100644 --- a/packages/markdown/package.json +++ b/packages/markdown/package.json @@ -79,6 +79,7 @@ "@types/object-hash": "3.0.6", "@types/pako": "2.0.3", "@types/qrcode-svg": "^1.1.5", + "@webcoder49/code-input": "^2.2.1", "abcjs": "^6.4.4", "chalk": "^5.3.0", "chokidar": "3.6.0", @@ -87,6 +88,7 @@ "lunr-languages": "^1.14.0", "mermaid": "11.3.0", "ncp": "^2.0.0", + "p5": "^1.11.1", "scratchblocks": "^3.6.4", "vfile": "^6.0.3", "vitest": "^1.6.0", diff --git a/packages/markdown/postbuild.mjs b/packages/markdown/postbuild.mjs index c7420b54..f3cd12d6 100644 --- a/packages/markdown/postbuild.mjs +++ b/packages/markdown/postbuild.mjs @@ -79,6 +79,20 @@ async function postbuild() { "hyperbook-excalidraw.umd.js", ), }, + { + src: path.join("./node_modules", "p5", "lib", "p5.min.js"), + dst: path.join("./dist", "assets", "directive-p5", "p5.min.js"), + }, + { + src: path.join( + "./node_modules", + "p5", + "lib", + "addons", + "p5.sound.min.js", + ), + dst: path.join("./dist", "assets", "directive-p5", "p5.sound.min.js"), + }, { src: path.join("./node_modules", "lunr", "lunr.min.js"), dst: path.join("./dist", "assets", "lunr.min.js"), @@ -90,7 +104,23 @@ async function postbuild() { { src: path.join("./node_modules", "abcjs", "dist", "abcjs-basic-min.js"), dst: path.join("./dist", "assets", "directive-abc-music", "abcjs-basic-min.js"), - } + }, + { + src: path.join("./node_modules", "@webcoder49", "code-input", "code-input.min.css"), + dst: path.join("./dist", "assets", "code-input", "code-input.min.css"), + }, + { + src: path.join("./node_modules", "@webcoder49", "code-input", "code-input.min.js"), + dst: path.join("./dist", "assets", "code-input", "code-input.min.js"), + }, + { + src: path.join("./node_modules", "@webcoder49", "code-input", "plugins", "indent.min.js"), + dst: path.join("./dist", "assets", "code-input", "indent.min.js"), + }, + { + src: path.join("./node_modules", "@webcoder49", "code-input", "plugins", "auto-close-brackets.min.js"), + dst: path.join("./dist", "assets", "code-input", "auto-close-brackets.min.js"), + }, ]; for (let asset of assets) { diff --git a/packages/markdown/src/index.ts b/packages/markdown/src/index.ts index 535ffd4b..d84848df 100644 --- a/packages/markdown/src/index.ts +++ b/packages/markdown/src/index.ts @@ -9,6 +9,8 @@ declare module "vfile" { styles: string[]; } >; + js: string[][]; + css: string[][]; headings: { level: 1 | 2 | 3 | 4 | 5 | 6; anchor: string; diff --git a/packages/markdown/src/process.ts b/packages/markdown/src/process.ts index 6dc3aa85..28707490 100644 --- a/packages/markdown/src/process.ts +++ b/packages/markdown/src/process.ts @@ -46,6 +46,7 @@ import remarkDirectiveTerm from "./remarkDirectiveTerm"; import remarkLink from "./remarkLink"; import remarkDirectivePagelist from "./remarkDirectivePagelist"; import rehypeQrCode from "./rehypeQrCode"; +import rehypeDirectiveP5 from "./rehypeDirectiveP5"; import remarkCollectSearchDocuments from "./remarkCollectSearchDocuments"; import remarkDirectiveGeogebra from "./remarkDirectiveGeogebra"; import remarkDirectiveAbcMusic from "./remarkDirectiveAbcMusic"; @@ -97,6 +98,7 @@ export const remark = (ctx: HyperbookContext) => { rehypeTableOfContents(ctx), rehypeQrCode(ctx), rehypeKatex, + rehypeDirectiveP5(ctx), [ rehypePrettyCode, { diff --git a/packages/markdown/src/rehypeDirectiveP5.ts b/packages/markdown/src/rehypeDirectiveP5.ts new file mode 100644 index 00000000..f5e32bf5 --- /dev/null +++ b/packages/markdown/src/rehypeDirectiveP5.ts @@ -0,0 +1,172 @@ +// Register directive nodes in mdast: +/// +// +import { HyperbookContext } from "@hyperbook/types"; +import { Root } from "mdast"; +import fs from "fs"; +import path from "path"; +import { visit } from "unist-util-visit"; +import { VFile } from "vfile"; +import { + expectContainerDirective, + registerDirective, + requestCSS, + requestJS, +} from "./remarkHelper"; +import { toText } from "./mdastUtilToText"; + +interface CodeBundle { + js?: string; + scripts?: string[]; +} + +export default (ctx: HyperbookContext) => () => { + const name = "p5"; + const cdnLibraryUrl = ctx.makeUrl( + path.posix.join("directive-p5", "p5.min.js"), + "assets" + ); + + const wrapSketch = (sketchCode?: string) => { + if (sketchCode !== "" && !sketchCode?.includes("setup")) { + return ` + function setup() { + createCanvas(100, 100); + background(200); + ${sketchCode} + }`; + } + return sketchCode; + }; + + // see https://github.com/processing/p5.js-website/blob/main/src/components/CodeEmbed/frame.tsx + const makeWrapInMarkupTemplate = (code: CodeBundle) => + ` + + + +${(code.scripts ? [cdnLibraryUrl, ...code.scripts] : []).map((src) => ``).join("\n")} + + +`.replace(/\u00A0/g, " "); + + return (tree: Root, file: VFile) => { + visit(tree, function (node) { + if (node.type === "element" && node.tagName === "p5") { + const { + src = "", + height = 100, + editor = false, + } = node.properties || {}; + + expectContainerDirective(node, file, name); + registerDirective(file, name, ["client.js"], ["style.css"]); + requestJS(file, ["code-input", "code-input.min.js"]); + requestCSS(file, ["code-input", "code-input.min.css"]); + requestJS(file, ["code-input", "auto-close-brackets.min.js"]); + requestJS(file, ["code-input", "indent.min.js"]); + + let srcFile = ""; + + if (src) { + srcFile = fs.readFileSync( + path.join(ctx.root, "public", String(src)), + "utf8" + ); + } else if (node.children?.length > 0) { + srcFile = toText(node.children); + } + + const template = makeWrapInMarkupTemplate({ + scripts: [ + ctx.makeUrl( + path.posix.join("directive-p5", "p5.sound.min.js"), + "assets" + ), + ], + }); + const srcdoc = template.replace("###SLOT###", wrapSketch(srcFile)); + node.tagName = "div"; + node.properties = { + class: ["directive-p5", editor ? "" : "standalone"].join(" "), + "data-template": template, + }; + node.children = [ + { + type: "element", + tagName: "div", + properties: { + class: "container", + style: `height: ${height}px;`, + }, + children: [ + { + type: "element", + tagName: "iframe", + properties: { + srcdoc: srcdoc, + loading: "eager", + sandbox: + "allow-scripts allow-popups allow-modals allow-forms allow-same-origin", + "aria-label": "Code Preview", + title: "Code Preview", + }, + children: [], + }, + ], + }, + ...(editor + ? [ + { + type: "element", + tagName: "div", + properties: { + class: "editor-container", + }, + children: [ + { + type: "element", + tagName: "button", + properties: { + class: "update", + }, + children: [ + { + type: "text", + value: "Update", + }, + ], + }, + { + type: "element", + tagName: "code-input", + properties: { + class: "editor", + language: "javascript", + }, + children: [ + { + type: "raw", + value: srcFile, + }, + ], + }, + ], + }, + ] + : []), + ]; + } + }); + }; +}; diff --git a/packages/markdown/src/rehypeHtmlStructure.ts b/packages/markdown/src/rehypeHtmlStructure.ts index 5d77ace7..a2ffa603 100644 --- a/packages/markdown/src/rehypeHtmlStructure.ts +++ b/packages/markdown/src/rehypeHtmlStructure.ts @@ -150,7 +150,6 @@ body { margin: 0; padding: 0; } - `; return { @@ -174,6 +173,8 @@ export default (ctx: HyperbookContext) => () => { } = ctx; return (tree: Root, file: VFile) => { const directives = file.data.directives || {}; + const js = file.data.js || []; + const css = file.data.css || []; const originalChildren = tree.children as ElementContent[]; tree.children = [ @@ -206,7 +207,7 @@ export default (ctx: HyperbookContext) => () => { tagName: "meta", properties: { name: "viewport", - content: "width=device-width, initial-scale=1", + content: "width=device-width, initial-scale=1,, interactive-widget=resizes-content", }, children: [], }, @@ -277,7 +278,7 @@ export default (ctx: HyperbookContext) => () => { type: "element", tagName: "noscript", properties: { - id: "dark-mode-toggle-stylesheets" + id: "dark-mode-toggle-stylesheets", }, children: [ { @@ -306,9 +307,12 @@ export default (ctx: HyperbookContext) => () => { type: "element", tagName: "script", properties: { - src: makeUrl(["dark-mode-toggle-stylesheets-loader.js"], "assets"), + src: makeUrl( + ["dark-mode-toggle-stylesheets-loader.js"], + "assets" + ), }, - children: [] + children: [], }, { type: "element", @@ -317,7 +321,63 @@ export default (ctx: HyperbookContext) => () => { type: "module", src: makeUrl(["dark-mode-toggle.mjs"], "assets"), }, - children: [] + children: [], + }, + { + type: "element", + tagName: "script", + properties: {}, + children: [ + { + type: "raw", + value: ` +window.Prism = window.Prism || {}; +window.Prism.manual = true;`, + }, + ], + }, + { + type: "element", + tagName: "script", + properties: { + src: makeUrl(["prism", "prism.js"], "assets"), + }, + children: [], + }, + { + type: "element", + tagName: "link", + properties: { + rel: "stylesheet", + href: makeUrl(["prism", "prism.css"], "assets"), + }, + children: [], + }, + { + type: "element", + tagName: "link", + properties: { + rel: "stylesheet", + href: makeUrl( + ["prism", "prism-theme-github-dark.css"], + "assets" + ), + media: "(prefers-color-scheme: dark)", + }, + children: [], + }, + { + type: "element", + tagName: "link", + properties: { + rel: "stylesheet", + href: makeUrl( + ["prism", "prism-theme-github-light.css"], + "assets" + ), + media: "(prefers-color-scheme: light)", + }, + children: [], }, { type: "element", @@ -355,6 +415,18 @@ export default (ctx: HyperbookContext) => () => { }, children: [], }, + ...css.map( + (style) => + ({ + type: "element", + tagName: "link", + properties: { + rel: "stylesheet", + href: makeUrl(style, "assets"), + }, + children: [], + }) as ElementContent + ), ...(ctx.config.styles || []).map( (style) => ({ @@ -416,6 +488,17 @@ HYPERBOOK_ASSETS = "${makeUrl("/", "assets")}" }, children: [], }, + ...js.map( + (script) => + ({ + type: "element", + tagName: "script", + properties: { + src: makeUrl(script, "assets"), + }, + children: [], + }) as ElementContent + ), ...Object.entries(directives).flatMap(([directive, { styles }]) => styles.map( (style) => diff --git a/packages/markdown/src/remarkDirectiveAbcMusic.ts b/packages/markdown/src/remarkDirectiveAbcMusic.ts index ac05f033..37114e49 100644 --- a/packages/markdown/src/remarkDirectiveAbcMusic.ts +++ b/packages/markdown/src/remarkDirectiveAbcMusic.ts @@ -9,6 +9,8 @@ import { toString } from "mdast-util-to-string"; import { expectContainerDirective, registerDirective, + requestCSS, + requestJS, } from "./remarkHelper"; import hash from "./objectHash"; @@ -30,12 +32,13 @@ export default (ctx: HyperbookContext) => () => { ["abcjs-basic-min.js", "client.js"], ["style.css"] ); + requestJS(file, ["code-input", "code-input.min.js"]); + requestCSS(file, ["code-input", "code-input.min.css"]); + requestJS(file, ["code-input", "indent.min.js"]); - console.log(node) const value = node.value || toString(node.children); const editor = node.meta?.includes("editor"); - console.log(editor); data.hName = "div"; data.hProperties = { class: "directive-abc-music", @@ -50,22 +53,25 @@ export default (ctx: HyperbookContext) => () => { class: "tune", }, children: [ - { - type: "text", - value, - }, ], }, ...(editor ? [ { type: "element", - tagName: "textarea", + tagName: "code-input", properties: { class: "editor", id: hash(node), - spellcheck: "false", + template: "abc-highlighted", + language: "javascript" }, + children: [ + { + type: "raw", + value: value, + } + ] }, ] : []), diff --git a/packages/markdown/src/remarkDirectiveTabs.ts b/packages/markdown/src/remarkDirectiveTabs.ts index f4aaeb94..e1302a11 100644 --- a/packages/markdown/src/remarkDirectiveTabs.ts +++ b/packages/markdown/src/remarkDirectiveTabs.ts @@ -55,7 +55,6 @@ export default (ctx: HyperbookContext) => () => { hastTree = hastTree.children[0]; hastTree.tagName = "span"; } - console.log(JSON.stringify(hastTree, null, 2)); tabTitleElements.push({ type: "element", tagName: "button", diff --git a/packages/markdown/src/remarkHelper.ts b/packages/markdown/src/remarkHelper.ts index 001d3876..d7bc46bb 100644 --- a/packages/markdown/src/remarkHelper.ts +++ b/packages/markdown/src/remarkHelper.ts @@ -41,6 +41,26 @@ export const registerDirective = ( }; }; +export const requestJS = (file: VFile, js: string[]) => { + if (!file.data.js) { + file.data.js = []; + } + + if (!file.data.js.find(s => JSON.stringify(s) === JSON.stringify(js))) { + file.data.js.push(js); + } +} + +export const requestCSS = (file: VFile, css: string[]) => { + if (!file.data.css) { + file.data.css = []; + } + + if (!file.data.css.find(s => JSON.stringify(s) === JSON.stringify(css))) { + file.data.css.push(css); + } +} + export const isImage = (node: Node): node is Image => { return node.type === "image"; }; diff --git a/packages/markdown/tests/__snapshots__/process.test.ts.snap b/packages/markdown/tests/__snapshots__/process.test.ts.snap index 5f4dcf78..c1e3cdd6 100644 --- a/packages/markdown/tests/__snapshots__/process.test.ts.snap +++ b/packages/markdown/tests/__snapshots__/process.test.ts.snap @@ -1,7 +1,7 @@ // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html exports[`process > should add showLineNumbers 1`] = ` -"Markdown Referenz - Hyperbook Dokumenation
Powered by Hyperbook
Hyperbook Dokumenation
Powered by Hyperbook
@@ -67,7 +68,7 @@ HYPERBOOK_ASSETS = "assets/" `; exports[`process > should result in two link 1`] = ` -"Hi - My Hyperbook
Powered by Hyperbook
My Hyperbook
Powered by Hyperbook
@@ -125,7 +127,7 @@ HYPERBOOK_ASSETS = "/assets/" `; exports[`process > should transform 1`] = ` -"Hi - My Hyperbook
Powered by Hyperbook
My Hyperbook
Powered by Hyperbook
@@ -202,7 +205,7 @@ HYPERBOOK_ASSETS = "/assets/" `; exports[`process > should transfrom complex context 1`] = ` -"Markdown Referenz - Hyperbook Dokumenation
Powered by Hyperbook
Hyperbook Dokumenation
Powered by Hyperbook
diff --git a/packages/markdown/tests/__snapshots__/rehypeDirectiveP5.test.ts.snap b/packages/markdown/tests/__snapshots__/rehypeDirectiveP5.test.ts.snap new file mode 100644 index 00000000..9fd91fce --- /dev/null +++ b/packages/markdown/tests/__snapshots__/rehypeDirectiveP5.test.ts.snap @@ -0,0 +1,54 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`remarkDirectiveEmbed > should transform 1`] = ` +" +
+
+ +
+
+" +`; diff --git a/packages/markdown/tests/__snapshots__/remarkDirectiveP5.test.ts.snap b/packages/markdown/tests/__snapshots__/remarkDirectiveP5.test.ts.snap new file mode 100644 index 00000000..995b8290 --- /dev/null +++ b/packages/markdown/tests/__snapshots__/remarkDirectiveP5.test.ts.snap @@ -0,0 +1,33 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`remarkDirectiveEmbed > should transform 1`] = ` +" +
+ +
+" +`; diff --git a/packages/markdown/tests/fixtures/public/testp5.js b/packages/markdown/tests/fixtures/public/testp5.js new file mode 100644 index 00000000..4ce8030b --- /dev/null +++ b/packages/markdown/tests/fixtures/public/testp5.js @@ -0,0 +1,7 @@ +function setup() { + createCanvas(720, 200); + background(0); +} +function draw() { + circle(mouseX, mouseY, 50); +} diff --git a/packages/markdown/tests/rehypeDirectiveP5.test.ts b/packages/markdown/tests/rehypeDirectiveP5.test.ts new file mode 100644 index 00000000..c91a453b --- /dev/null +++ b/packages/markdown/tests/rehypeDirectiveP5.test.ts @@ -0,0 +1,50 @@ +import { HyperbookContext } from "@hyperbook/types/dist"; +import { describe, expect, it } from "vitest"; +import rehypeStringify from "rehype-stringify"; +import remarkParse from "remark-parse"; +import remarkToRehype from "remark-rehype"; +import rehypeFormat from "rehype-format"; +import { unified, PluggableList } from "unified"; +import remarkDirective from "remark-directive"; +import remarkDirectiveRehype from "remark-directive-rehype"; +import { ctx } from "./mock"; +import rehypeDirectiveP5 from "../src/rehypeDirectiveP5"; + +export const toHtml = (md: string, ctx: HyperbookContext) => { + const remarkPlugins: PluggableList = [remarkDirective, remarkDirectiveRehype]; + + return unified() + .use(remarkParse) + .use(remarkPlugins) + .use(remarkToRehype) + .use(rehypeDirectiveP5(ctx)) + .use(rehypeFormat) + .use(rehypeStringify, { + allowDangerousCharacters: true, + allowDangerousHtml: true, + }) + .processSync(md); +}; + +describe("remarkDirectiveEmbed", () => { + it("should transform", async () => { + expect( + toHtml( + ` +::p5{src="testp5.js"} +`, + ctx, + ).value, + ).toMatchSnapshot(); + }); + it("should register directives", async () => { + expect( + toHtml( + ` +::p5{src="testp5.js"} +`, + ctx, + ).data.directives?.["p5"], + ).toBeDefined(); + }); +}); diff --git a/packages/web-component-excalidraw/package.json b/packages/web-component-excalidraw/package.json index 928df479..cc1eeddb 100644 --- a/packages/web-component-excalidraw/package.json +++ b/packages/web-component-excalidraw/package.json @@ -21,7 +21,7 @@ "repository": { "type": "git", "url": "git+https://github.com/openpatch/hyperbook.git", - "directory": "packages/element-excalidraw" + "directory": "packages/web-component-excalidraw" }, "bugs": { "url": "https://github.com/openpatch/hyperbook/issues" diff --git a/platforms/vscode/snipptes/hyperbook.code-snippets b/platforms/vscode/snipptes/hyperbook.code-snippets index 7fed7e42..619b6e52 100644 --- a/platforms/vscode/snipptes/hyperbook.code-snippets +++ b/platforms/vscode/snipptes/hyperbook.code-snippets @@ -155,9 +155,21 @@ "Element Video": { "prefix": [":video"], "body": ["::video{src=\"$1\"}", "$0"] - } + }, "Element Pagelist": { "prefix": [":pagelist"], "body": ["::pagelist{source=\"$1\"}", "$0"] - } + }, + "Element P5": { + "prefix": [":sqlide"], + "body": [ + ":::p5{height=400}", + "", + "```javascript", + "$TM_SELECTED_TEXT$0", + "```", + "", + ":::" + ] + }, } diff --git a/platforms/vscode/syntaxes/hyperbook.json b/platforms/vscode/syntaxes/hyperbook.json index 2f801cbf..8e44b023 100644 --- a/platforms/vscode/syntaxes/hyperbook.json +++ b/platforms/vscode/syntaxes/hyperbook.json @@ -80,6 +80,9 @@ }, { "include": "#directive-pagelist" + }, + { + "include": "#directive-p5" } ], "repository": { @@ -978,6 +981,121 @@ ] } } + }, + "directive-p5-inline": { + "name": "meta.directive.p5inline.hyperbook", + "match": "(^|\\G)(:{2,})(p5){(.*)}\\s*$", + "captures": { + "2": { + "name": "punctuation.definition.directive.level.hyperbook" + }, + "3": { + "name": "entity.name.function.directive.p5.hyperbook" + }, + "4": { + "patterns": [ + { + "match": "(src)=\"([^\"]*)\"", + "captures": { + "1": { + "name": "keyword.parameter.directive.p5.hyperbook" + }, + "2": { + "name": "string.quoted.double.untitled" + } + } + }, + { + "match": "(height)=([0-9]+)", + "captures": { + "1": { + "name": "keyword.parameter.directive.p5.hyperbook" + }, + "2": { + "name": "constant.numeric" + } + } + }, + { + "match": "(editor)=(?:(false)|(true))", + "captures": { + "1": { + "name": "keyword.parameter.directive.p5.hyperbook" + }, + "2": { + "name": "constant.language.boolean.false" + }, + "3": { + "name": "constant.language.boolean.true" + } + } + } + ] + } + } + }, + "directive-p5": { + "name": "meta.directive.p5.hyperbook", + "begin": "(^|\\G)(:{3,})(p5)({.*})?\\s*$", + "end": "(^|\\G)(\\2|:{3,})\\s*$", + "beginCaptures": { + "2": { + "name": "punctuation.definition.directive.level.hyperbook" + }, + "3": { + "name": "entity.name.function.directive.p5.hyperbook" + }, + "4": { + "patterns": [ + { + "match": "(src)=\"([^\"]*)\"", + "captures": { + "1": { + "name": "keyword.parameter.directive.p5.hyperbook" + }, + "2": { + "name": "string.quoted.double.untitled" + } + } + }, + { + "match": "(height)=([0-9]+)", + "captures": { + "1": { + "name": "keyword.parameter.directive.p5.hyperbook" + }, + "2": { + "name": "constant.numeric" + } + } + }, + { + "match": "(editor)=(?:(false)|(true))", + "captures": { + "1": { + "name": "keyword.parameter.directive.p5.hyperbook" + }, + "2": { + "name": "constant.language.boolean.false" + }, + "3": { + "name": "constant.language.boolean.true" + } + } + } + ] + } + }, + "endCaptures": { + "2": { + "name": "punctuation.definition.directive.level.hyperbook" + } + }, + "patterns": [ + { + "include": "text.html.markdown" + } + ] } } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 454cab00..61d1cefc 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -58,7 +58,7 @@ importers: version: 5.0.7 ts-node: specifier: 10.9.2 - version: 10.9.2(@types/node@20.12.12)(typescript@5.4.5) + version: 10.9.2(@swc/core@1.10.4)(@types/node@20.12.12)(typescript@5.4.5) typescript: specifier: 5.4.5 version: 5.4.5 @@ -67,7 +67,7 @@ importers: version: 0.4.1 webpack: specifier: 5.91.0 - version: 5.91.0(esbuild@0.21.3) + version: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3) packages/fs: dependencies: @@ -116,7 +116,7 @@ importers: version: 2.1.3 vitest: specifier: ^1.6.0 - version: 1.6.0(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1) + version: 1.6.0(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1) packages/hyperbook: dependencies: @@ -264,7 +264,7 @@ importers: version: 7.0.1 rehype-pretty-code: specifier: ^0.14.0 - version: 0.14.0(shiki@1.22.0) + version: 0.14.0(shiki@1.24.4) rehype-stringify: specifier: ^10.0.1 version: 10.0.1 @@ -332,6 +332,9 @@ importers: '@types/qrcode-svg': specifier: ^1.1.5 version: 1.1.5 + '@webcoder49/code-input': + specifier: ^2.2.1 + version: 2.2.1 abcjs: specifier: ^6.4.4 version: 6.4.4 @@ -356,6 +359,9 @@ importers: ncp: specifier: ^2.0.0 version: 2.0.0 + p5: + specifier: ^1.11.1 + version: 1.11.1 scratchblocks: specifier: ^3.6.4 version: 3.6.4 @@ -364,7 +370,7 @@ importers: version: 6.0.3 vitest: specifier: ^1.6.0 - version: 1.6.0(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1) + version: 1.6.0(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1) wavesurfer.js: specifier: ^7.8.8 version: 7.8.8 @@ -397,10 +403,10 @@ importers: version: 18.3.0 '@vitejs/plugin-react': specifier: ^4.3.3 - version: 4.3.3(vite@5.4.10(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1)) + version: 4.3.3(vite@5.4.10(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1)) vite: specifier: ^5.4.10 - version: 5.4.10(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1) + version: 5.4.10(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1) platforms/vscode: dependencies: @@ -482,10 +488,10 @@ importers: version: 5.4.5 typescript-json-schema: specifier: 0.63.0 - version: 0.63.0 + version: 0.63.0(@swc/core@1.10.4) webpack: specifier: 5.91.0 - version: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + version: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) webpack-cli: specifier: 5.1.4 version: 5.1.4(webpack@5.91.0) @@ -1352,20 +1358,20 @@ packages: cpu: [x64] os: [win32] - '@shikijs/core@1.22.0': - resolution: {integrity: sha512-S8sMe4q71TJAW+qG93s5VaiihujRK6rqDFqBnxqvga/3LvqHEnxqBIOPkt//IdXVtHkQWKu4nOQNk0uBGicU7Q==} + '@shikijs/core@1.24.4': + resolution: {integrity: sha512-jjLsld+xEEGYlxAXDyGwWsKJ1sw5Pc1pnp4ai2ORpjx2UX08YYTC0NNqQYO1PaghYaR+PvgMOGuvzw2he9sk0Q==} - '@shikijs/engine-javascript@1.22.0': - resolution: {integrity: sha512-AeEtF4Gcck2dwBqCFUKYfsCq0s+eEbCEbkUuFou53NZ0sTGnJnJ/05KHQFZxpii5HMXbocV9URYVowOP2wH5kw==} + '@shikijs/engine-javascript@1.24.4': + resolution: {integrity: sha512-TClaQOLvo9WEMJv6GoUsykQ6QdynuKszuORFWCke8qvi6PeLm7FcD9+7y45UenysxEWYpDL5KJaVXTngTE+2BA==} - '@shikijs/engine-oniguruma@1.22.0': - resolution: {integrity: sha512-5iBVjhu/DYs1HB0BKsRRFipRrD7rqjxlWTj4F2Pf+nQSPqc3kcyqFFeZXnBMzDf0HdqaFVvhDRAGiYNvyLP+Mw==} + '@shikijs/engine-oniguruma@1.24.4': + resolution: {integrity: sha512-Do2ry6flp2HWdvpj2XOwwa0ljZBRy15HKZITzPcNIBOGSeprnA8gOooA/bLsSPuy8aJBa+Q/r34dMmC3KNL/zw==} - '@shikijs/types@1.22.0': - resolution: {integrity: sha512-Fw/Nr7FGFhlQqHfxzZY8Cwtwk5E9nKDUgeLjZgt3UuhcM3yJR9xj3ZGNravZZok8XmEZMiYkSMTPlPkULB8nww==} + '@shikijs/types@1.24.4': + resolution: {integrity: sha512-0r0XU7Eaow0PuDxuWC1bVqmWCgm3XqizIaT7SM42K03vc69LGooT0U8ccSR44xP/hGlNx4FKhtYpV+BU6aaKAA==} - '@shikijs/vscode-textmate@9.3.0': - resolution: {integrity: sha512-jn7/7ky30idSkd/O5yDBfAnVt+JJpepofP/POZ1iMOxK59cOfqIgg/Dj0eFsjOTMw+4ycJN0uhZH/Eb0bs/EUA==} + '@shikijs/vscode-textmate@9.3.1': + resolution: {integrity: sha512-79QfK1393x9Ho60QFyLti+QfdJzRQCVLFb97kOIV7Eo9vQU/roINgk7m24uv0a7AUvN//RDH36FLjjK48v0s9g==} '@sinclair/typebox@0.27.8': resolution: {integrity: sha512-+Fj43pSMwJs4KRrH/938Uf+uAELIgVBmQzg/q1YG10djyfA3TnrU8N8XzqCh/okZdszqBQTZf96idMfE5lnwTA==} @@ -1378,6 +1384,81 @@ packages: resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==} engines: {node: '>=18'} + '@swc/core-darwin-arm64@1.10.4': + resolution: {integrity: sha512-sV/eurLhkjn/197y48bxKP19oqcLydSel42Qsy2zepBltqUx+/zZ8+/IS0Bi7kaWVFxerbW1IPB09uq8Zuvm3g==} + engines: {node: '>=10'} + cpu: [arm64] + os: [darwin] + + '@swc/core-darwin-x64@1.10.4': + resolution: {integrity: sha512-gjYNU6vrAUO4+FuovEo9ofnVosTFXkF0VDuo1MKPItz6e2pxc2ale4FGzLw0Nf7JB1sX4a8h06CN16/pLJ8Q2w==} + engines: {node: '>=10'} + cpu: [x64] + os: [darwin] + + '@swc/core-linux-arm-gnueabihf@1.10.4': + resolution: {integrity: sha512-zd7fXH5w8s+Sfvn2oO464KDWl+ZX1MJiVmE4Pdk46N3PEaNwE0koTfgx2vQRqRG4vBBobzVvzICC3618WcefOA==} + engines: {node: '>=10'} + cpu: [arm] + os: [linux] + + '@swc/core-linux-arm64-gnu@1.10.4': + resolution: {integrity: sha512-+UGfoHDxsMZgFD3tABKLeEZHqLNOkxStu+qCG7atGBhS4Slri6h6zijVvf4yI5X3kbXdvc44XV/hrP/Klnui2A==} + engines: {node: '>=10'} + cpu: [arm64] + os: [linux] + + '@swc/core-linux-arm64-musl@1.10.4': + resolution: {integrity: sha512-cDDj2/uYsOH0pgAnDkovLZvKJpFmBMyXkxEG6Q4yw99HbzO6QzZ5HDGWGWVq/6dLgYKlnnmpjZCPPQIu01mXEg==} + engines: {node: '>=10'} + cpu: [arm64] + os: [linux] + + '@swc/core-linux-x64-gnu@1.10.4': + resolution: {integrity: sha512-qJXh9D6Kf5xSdGWPINpLGixAbB5JX8JcbEJpRamhlDBoOcQC79dYfOMEIxWPhTS1DGLyFakAx2FX/b2VmQmj0g==} + engines: {node: '>=10'} + cpu: [x64] + os: [linux] + + '@swc/core-linux-x64-musl@1.10.4': + resolution: {integrity: sha512-A76lIAeyQnHCVt0RL/pG+0er8Qk9+acGJqSZOZm67Ve3B0oqMd871kPtaHBM0BW3OZAhoILgfHW3Op9Q3mx3Cw==} + engines: {node: '>=10'} + cpu: [x64] + os: [linux] + + '@swc/core-win32-arm64-msvc@1.10.4': + resolution: {integrity: sha512-e6j5kBu4fIY7fFxFxnZI0MlEovRvp50Lg59Fw+DVbtqHk3C85dckcy5xKP+UoXeuEmFceauQDczUcGs19SRGSQ==} + engines: {node: '>=10'} + cpu: [arm64] + os: [win32] + + '@swc/core-win32-ia32-msvc@1.10.4': + resolution: {integrity: sha512-RSYHfdKgNXV/amY5Tqk1EWVsyQnhlsM//jeqMLw5Fy9rfxP592W9UTumNikNRPdjI8wKKzNMXDb1U29tQjN0dg==} + engines: {node: '>=10'} + cpu: [ia32] + os: [win32] + + '@swc/core-win32-x64-msvc@1.10.4': + resolution: {integrity: sha512-1ujYpaqfqNPYdwKBlvJnOqcl+Syn3UrQ4XE0Txz6zMYgyh6cdU6a3pxqLqIUSJ12MtXRA9ZUhEz1ekU3LfLWXw==} + engines: {node: '>=10'} + cpu: [x64] + os: [win32] + + '@swc/core@1.10.4': + resolution: {integrity: sha512-ut3zfiTLORMxhr6y/GBxkHmzcGuVpwJYX4qyXWuBKkpw/0g0S5iO1/wW7RnLnZbAi8wS/n0atRZoaZlXWBkeJg==} + engines: {node: '>=10'} + peerDependencies: + '@swc/helpers': '*' + peerDependenciesMeta: + '@swc/helpers': + optional: true + + '@swc/counter@0.1.3': + resolution: {integrity: sha512-e2BR4lsJkkRlKZ/qCHPw9ZaSxc0MVUd7gtbtaB7aMvHeJVYe8sOB8DBZkP2DtISHGSku9sCK6T6cnY0CtXrOCQ==} + + '@swc/types@0.1.17': + resolution: {integrity: sha512-V5gRru+aD8YVyCOMAjMpWR1Ui577DD5KSJsHP8RAxopAH22jFz6GZd/qxqjO6MJHQhcsjvjOFXyDhyLQUnMveQ==} + '@szmarczak/http-timer@5.0.1': resolution: {integrity: sha512-+PmQX0PiAYPMeVYe237LJAYvOMYW1j2rH5YROyS3b4CTVJum34HfRvKvAzozHAQG0TnHNdUfY9nCeUyRAs//cw==} engines: {node: '>=14.16'} @@ -1739,6 +1820,9 @@ packages: '@webassemblyjs/wast-printer@1.12.1': resolution: {integrity: sha512-+X4WAlOisVWQMikjbcvY2e0rwPsKQ9F688lksZhBcPycBBuii3O7m8FACbDMWDojpAqvjIncrG8J0XHKyQfVeA==} + '@webcoder49/code-input@2.2.1': + resolution: {integrity: sha512-1B+wLZhBR1wyuD1bUICgNZNy5VA/z1YReMmsaGvdEHaV/Jfc7EB/4wnQ+78vEfxx0SZvHyosCivAmfmaq6tIHg==} + '@webpack-cli/configtest@2.1.1': resolution: {integrity: sha512-wy0mglZpDSiSS0XHrVR+BAdId2+yxPSoJW8fsna3ZpYSlufjvxnP4YbKTCBZnNIcGN4r6ZPXV55X4mYExOfLmw==} engines: {node: '>=14.15.0'} @@ -2816,6 +2900,11 @@ packages: resolution: {integrity: sha512-reYkTUJAZb9gUuZ2RvVCNhVHdg62RHnJ7WJl8ftMi4diZ6NWlciOzQN88pUhSELEwflJht4oQDv0F0BMlwaYtA==} engines: {node: '>=8'} + detect-libc@1.0.3: + resolution: {integrity: sha512-pGjwhsmsp4kL2RTz08wcOlGN83otlqHeD/Z5T8GXZB+/YcpQ/dgo+lbU8ZsGxV0HIvqqxo9l7mqYwyYMD9bKDg==} + engines: {node: '>=0.10'} + hasBin: true + detect-libc@2.0.1: resolution: {integrity: sha512-463v3ZeIrcWtdgIg6vI6XUncguvr2TnGl4SzDXinkt9mSLpBJKXT3mW6xT3VQdDN11+WVs29pgvivTc4Lp8v+w==} engines: {node: '>=8'} @@ -2886,6 +2975,9 @@ packages: elliptic@6.5.5: resolution: {integrity: sha512-7EjbcmUm17NQFu4Pmgmq2olYMj8nwMnpcddByChSUjArp8F5DQWcIcpriwO4ZToLNAJig0yiyjswfyGNje/ixw==} + emoji-regex-xs@1.0.0: + resolution: {integrity: sha512-LRlerrMYoIDrT6jgpeZ2YYl/L8EulRTt5hQcYjy5AInh7HWXKimpqx68aknBFpGL2+/IcogTcaydJEgaTmOpDg==} + emoji-regex@8.0.0: resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} @@ -3571,6 +3663,9 @@ packages: hast-util-to-html@9.0.3: resolution: {integrity: sha512-M17uBDzMJ9RPCqLMO92gNNUDuBSq10a25SDBI08iCCxmorf4Yy6sYHK57n9WAbRAAaU+DuR4W6GN9K4DFZesYg==} + hast-util-to-html@9.0.4: + resolution: {integrity: sha512-wxQzXtdbhiwGAUKrnQJXlOPmHnEehzphwkK7aluUPQ+lEc1xefC8pblMgpp2w5ldBTEfveRIrADcrhGIWrlTDA==} + hast-util-to-string@3.0.1: resolution: {integrity: sha512-XelQVTDWvqcl3axRfI0xSeoVKzyIFPwsAGSLIsKdJKQMXDYJS4WYrBNF/8J7RdhIcFI2BOHgAifggsvsxp/3+A==} @@ -4175,6 +4270,70 @@ packages: resolution: {integrity: sha512-rMGwYF8q7g2XhG2ulBmmJgWv25qBsqRbDn5gH0+wnuyeFt7QBJlHJmtg5qEdn4pN6WVAUMgXnIxytMFRX9c1aA==} engines: {node: '>=10.13.0'} + lightningcss-darwin-arm64@1.28.2: + resolution: {integrity: sha512-/8cPSqZiusHSS+WQz0W4NuaqFjquys1x+NsdN/XOHb+idGHJSoJ7SoQTVl3DZuAgtPZwFZgRfb/vd1oi8uX6+g==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [darwin] + + lightningcss-darwin-x64@1.28.2: + resolution: {integrity: sha512-R7sFrXlgKjvoEG8umpVt/yutjxOL0z8KWf0bfPT3cYMOW4470xu5qSHpFdIOpRWwl3FKNMUdbKtMUjYt0h2j4g==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [darwin] + + lightningcss-freebsd-x64@1.28.2: + resolution: {integrity: sha512-l2qrCT+x7crAY+lMIxtgvV10R8VurzHAoUZJaVFSlHrN8kRLTvEg9ObojIDIexqWJQvJcVVV3vfzsEynpiuvgA==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [freebsd] + + lightningcss-linux-arm-gnueabihf@1.28.2: + resolution: {integrity: sha512-DKMzpICBEKnL53X14rF7hFDu8KKALUJtcKdFUCW5YOlGSiwRSgVoRjM97wUm/E0NMPkzrTi/rxfvt7ruNK8meg==} + engines: {node: '>= 12.0.0'} + cpu: [arm] + os: [linux] + + lightningcss-linux-arm64-gnu@1.28.2: + resolution: {integrity: sha512-nhfjYkfymWZSxdtTNMWyhFk2ImUm0X7NAgJWFwnsYPOfmtWQEapzG/DXZTfEfMjSzERNUNJoQjPAbdqgB+sjiw==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + + lightningcss-linux-arm64-musl@1.28.2: + resolution: {integrity: sha512-1SPG1ZTNnphWvAv8RVOymlZ8BDtAg69Hbo7n4QxARvkFVCJAt0cgjAw1Fox0WEhf4PwnyoOBaVH0Z5YNgzt4dA==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [linux] + + lightningcss-linux-x64-gnu@1.28.2: + resolution: {integrity: sha512-ZhQy0FcO//INWUdo/iEdbefntTdpPVQ0XJwwtdbBuMQe+uxqZoytm9M+iqR9O5noWFaxK+nbS2iR/I80Q2Ofpg==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + + lightningcss-linux-x64-musl@1.28.2: + resolution: {integrity: sha512-alb/j1NMrgQmSFyzTbN1/pvMPM+gdDw7YBuQ5VSgcFDypN3Ah0BzC2dTZbzwzaMdUVDszX6zH5MzjfVN1oGuww==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [linux] + + lightningcss-win32-arm64-msvc@1.28.2: + resolution: {integrity: sha512-WnwcjcBeAt0jGdjlgbT9ANf30pF0C/QMb1XnLnH272DQU8QXh+kmpi24R55wmWBwaTtNAETZ+m35ohyeMiNt+g==} + engines: {node: '>= 12.0.0'} + cpu: [arm64] + os: [win32] + + lightningcss-win32-x64-msvc@1.28.2: + resolution: {integrity: sha512-3piBifyT3avz22o6mDKywQC/OisH2yDK+caHWkiMsF82i3m5wDBadyCjlCQ5VNgzYkxrWZgiaxHDdd5uxsi0/A==} + engines: {node: '>= 12.0.0'} + cpu: [x64] + os: [win32] + + lightningcss@1.28.2: + resolution: {integrity: sha512-ePLRrbt3fgjXI5VFZOLbvkLD5ZRuxGKm+wJ3ujCqBtL3NanDHPo/5zicR5uEKAPiIjBYF99BM4K4okvMznjkVA==} + engines: {node: '>= 12.0.0'} + lines-and-columns@1.2.4: resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} @@ -4827,8 +4986,8 @@ packages: resolution: {integrity: sha512-1FlR+gjXK7X+AsAHso35MnyN5KqGwJRi/31ft6x0M194ht7S+rWAvd7PHss9xSKMzE0asv1pyIHaJYq+BbacAQ==} engines: {node: '>=12'} - oniguruma-to-js@0.4.3: - resolution: {integrity: sha512-X0jWUcAlxORhOqqBREgPMgnshB7ZGYszBNspP+tS9hPD3l13CdaXcHbgImoHUHlrvGx/7AvFEkTRhAGYh+jzjQ==} + oniguruma-to-es@0.8.1: + resolution: {integrity: sha512-dekySTEvCxCj0IgKcA2uUCO/e4ArsqpucDPcX26w9ajx+DvMWLc5eZeJaRQkd7oC/+rwif5gnT900tA34uN9Zw==} open@8.4.2: resolution: {integrity: sha512-7x81NCL719oNbsq/3mh+hVrAWmFuEYUqrq/Iw3kUzH8ReypT9QQ0BLoJS7/G9k6N81XjW4qHWtjWwe/9eLy1EQ==} @@ -4938,6 +5097,9 @@ packages: resolution: {integrity: sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==} engines: {node: '>=6'} + p5@1.11.1: + resolution: {integrity: sha512-JWvOwAgInsuSOjzMwAtaiN8gMLzhR1jcyosytNeftH0vnTkywfIyFfVYFfsLSsh6B+DYuqJYu1SVcfkuvrYi1Q==} + package-json-from-dist@1.0.1: resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} @@ -5409,8 +5571,14 @@ packages: resolution: {integrity: sha512-J6SDjUgDxQj5NusnOtdFxDwN/+HWykR8GELwctJ7mdqhcyy1xEc4SRFHUXvxTp661YaVKAjfRLZ9cCqS6tn32A==} engines: {node: '>=0.10.0'} - regex@4.3.3: - resolution: {integrity: sha512-r/AadFO7owAq1QJVeZ/nq9jNS1vyZt+6t1p/E59B56Rn2GCya+gr1KSyOzNL/er+r+B7phv5jG2xU2Nz1YkmJg==} + regex-recursion@5.1.1: + resolution: {integrity: sha512-ae7SBCbzVNrIjgSbh7wMznPcQel1DNlDtzensnFxpiNpXt1U2ju/bHugH422r+4LAVS1FpW1YCwilmnNsjum9w==} + + regex-utilities@2.3.0: + resolution: {integrity: sha512-8VhliFJAWRaUiVvREIiW2NXXTmHs4vMNnSzuJVhscgmGav3g9VDxLrQndI3dZZVVdp0ZO/5v0xmX516/7M9cng==} + + regex@5.1.1: + resolution: {integrity: sha512-dN5I359AVGPnwzJm2jN1k0W9LPZ+ePvoOeVMMfqIMFz53sSwXkxaJoxr50ptnsC771lK95BnTrVSZxq0b9yCGw==} regexp.prototype.flags@1.4.3: resolution: {integrity: sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==} @@ -5753,8 +5921,8 @@ packages: shell-quote@1.7.4: resolution: {integrity: sha512-8o/QEhSSRb1a5i7TFR0iM4G16Z0vYB2OQVs4G3aAFXjn3T6yEx8AZxy1PgDF7I00LZHYA3WxaSYIf5e5sAX8Rw==} - shiki@1.22.0: - resolution: {integrity: sha512-/t5LlhNs+UOKQCYBtl5ZsH/Vclz73GIqT2yQsCBygr8L/ppTdmpL4w3kPLoZJbMKVWtoG77Ue1feOjZfDxvMkw==} + shiki@1.24.4: + resolution: {integrity: sha512-aVGSFAOAr1v26Hh/+GBIsRVDWJ583XYV7CuNURKRWh9gpGv4OdbisZGq96B9arMYTZhTQkmRF5BrShOSTvNqhw==} side-channel@1.0.4: resolution: {integrity: sha512-q5XPytqFEIKHkGdiMIrY10mvLRvnQh42/+GoBlFW3b2LXLE2xxJpZFdm94we0BaoV3RwJyGqg5wS7epxTv0Zvw==} @@ -6276,8 +6444,8 @@ packages: ufo@1.5.4: resolution: {integrity: sha512-UsUk3byDzKd04EyoZ7U4DOlxQaD14JUKQl6/P7wiX4FNvUfm3XL246n9W5AmqwW5RSFJ27NAuM0iLscAOYUiGQ==} - uglify-js@3.17.4: - resolution: {integrity: sha512-T9q82TJI9e/C1TAxYvfb16xO120tMVFZrGA3f9/P4424DNu6ypK103y0GPFVa17yotwSyZW5iYXgjYHkGrJW/g==} + uglify-js@3.19.3: + resolution: {integrity: sha512-v3Xu+yuwBXisp6QYTcH4UbH+xYJXqnq2m/LtQVWKWzYc1iehYnLixoQDN9FH6/j9/oybfd6W9Ghwkl8+UMKTKQ==} engines: {node: '>=0.8.0'} hasBin: true @@ -7635,32 +7803,32 @@ snapshots: '@rollup/rollup-win32-x64-msvc@4.24.3': optional: true - '@shikijs/core@1.22.0': + '@shikijs/core@1.24.4': dependencies: - '@shikijs/engine-javascript': 1.22.0 - '@shikijs/engine-oniguruma': 1.22.0 - '@shikijs/types': 1.22.0 - '@shikijs/vscode-textmate': 9.3.0 + '@shikijs/engine-javascript': 1.24.4 + '@shikijs/engine-oniguruma': 1.24.4 + '@shikijs/types': 1.24.4 + '@shikijs/vscode-textmate': 9.3.1 '@types/hast': 3.0.4 - hast-util-to-html: 9.0.3 + hast-util-to-html: 9.0.4 - '@shikijs/engine-javascript@1.22.0': + '@shikijs/engine-javascript@1.24.4': dependencies: - '@shikijs/types': 1.22.0 - '@shikijs/vscode-textmate': 9.3.0 - oniguruma-to-js: 0.4.3 + '@shikijs/types': 1.24.4 + '@shikijs/vscode-textmate': 9.3.1 + oniguruma-to-es: 0.8.1 - '@shikijs/engine-oniguruma@1.22.0': + '@shikijs/engine-oniguruma@1.24.4': dependencies: - '@shikijs/types': 1.22.0 - '@shikijs/vscode-textmate': 9.3.0 + '@shikijs/types': 1.24.4 + '@shikijs/vscode-textmate': 9.3.1 - '@shikijs/types@1.22.0': + '@shikijs/types@1.24.4': dependencies: - '@shikijs/vscode-textmate': 9.3.0 + '@shikijs/vscode-textmate': 9.3.1 '@types/hast': 3.0.4 - '@shikijs/vscode-textmate@9.3.0': {} + '@shikijs/vscode-textmate@9.3.1': {} '@sinclair/typebox@0.27.8': {} @@ -7668,6 +7836,61 @@ snapshots: '@sindresorhus/merge-streams@2.3.0': {} + '@swc/core-darwin-arm64@1.10.4': + optional: true + + '@swc/core-darwin-x64@1.10.4': + optional: true + + '@swc/core-linux-arm-gnueabihf@1.10.4': + optional: true + + '@swc/core-linux-arm64-gnu@1.10.4': + optional: true + + '@swc/core-linux-arm64-musl@1.10.4': + optional: true + + '@swc/core-linux-x64-gnu@1.10.4': + optional: true + + '@swc/core-linux-x64-musl@1.10.4': + optional: true + + '@swc/core-win32-arm64-msvc@1.10.4': + optional: true + + '@swc/core-win32-ia32-msvc@1.10.4': + optional: true + + '@swc/core-win32-x64-msvc@1.10.4': + optional: true + + '@swc/core@1.10.4': + dependencies: + '@swc/counter': 0.1.3 + '@swc/types': 0.1.17 + optionalDependencies: + '@swc/core-darwin-arm64': 1.10.4 + '@swc/core-darwin-x64': 1.10.4 + '@swc/core-linux-arm-gnueabihf': 1.10.4 + '@swc/core-linux-arm64-gnu': 1.10.4 + '@swc/core-linux-arm64-musl': 1.10.4 + '@swc/core-linux-x64-gnu': 1.10.4 + '@swc/core-linux-x64-musl': 1.10.4 + '@swc/core-win32-arm64-msvc': 1.10.4 + '@swc/core-win32-ia32-msvc': 1.10.4 + '@swc/core-win32-x64-msvc': 1.10.4 + optional: true + + '@swc/counter@0.1.3': + optional: true + + '@swc/types@0.1.17': + dependencies: + '@swc/counter': 0.1.3 + optional: true + '@szmarczak/http-timer@5.0.1': dependencies: defer-to-connect: 2.0.1 @@ -7936,14 +8159,14 @@ snapshots: '@vercel/ncc@0.38.1': {} - '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1))': + '@vitejs/plugin-react@4.3.3(vite@5.4.10(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1))': dependencies: '@babel/core': 7.25.7 '@babel/plugin-transform-react-jsx-self': 7.25.9(@babel/core@7.25.7) '@babel/plugin-transform-react-jsx-source': 7.25.9(@babel/core@7.25.7) '@types/babel__core': 7.20.5 react-refresh: 0.14.2 - vite: 5.4.10(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1) + vite: 5.4.10(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1) transitivePeerDependencies: - supports-color @@ -8152,19 +8375,21 @@ snapshots: '@webassemblyjs/ast': 1.12.1 '@xtuc/long': 4.2.2 + '@webcoder49/code-input@2.2.1': {} + '@webpack-cli/configtest@2.1.1(webpack-cli@5.1.4)(webpack@5.91.0)': dependencies: - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.91.0) '@webpack-cli/info@2.0.2(webpack-cli@5.1.4)(webpack@5.91.0)': dependencies: - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.91.0) '@webpack-cli/serve@2.0.5(webpack-cli@5.1.4)(webpack@5.91.0)': dependencies: - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) webpack-cli: 5.1.4(webpack@5.91.0) '@xtuc/ieee754@1.2.0': {} @@ -8905,7 +9130,7 @@ snapshots: normalize-path: 3.0.0 schema-utils: 4.2.0 serialize-javascript: 6.0.2 - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) core-util-is@1.0.3: {} @@ -9011,7 +9236,7 @@ snapshots: postcss-value-parser: 4.2.0 semver: 7.6.2 optionalDependencies: - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) css-select@5.1.0: dependencies: @@ -9357,6 +9582,9 @@ snapshots: detect-indent@6.1.0: {} + detect-libc@1.0.3: + optional: true + detect-libc@2.0.1: optional: true @@ -9431,6 +9659,8 @@ snapshots: minimalistic-assert: 1.0.1 minimalistic-crypto-utils: 1.0.1 + emoji-regex-xs@1.0.0: {} + emoji-regex@8.0.0: {} emoji-regex@9.2.2: {} @@ -9874,7 +10104,7 @@ snapshots: dependencies: loader-utils: 2.0.4 schema-utils: 3.1.1 - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) file-uri-to-path@1.0.0: optional: true @@ -10216,7 +10446,7 @@ snapshots: source-map: 0.6.1 wordwrap: 1.0.0 optionalDependencies: - uglify-js: 3.17.4 + uglify-js: 3.19.3 hard-rejection@2.1.0: {} @@ -10389,6 +10619,20 @@ snapshots: stringify-entities: 4.0.4 zwitch: 2.0.4 + hast-util-to-html@9.0.4: + dependencies: + '@types/hast': 3.0.4 + '@types/unist': 3.0.3 + ccount: 2.0.1 + comma-separated-tokens: 2.0.3 + hast-util-whitespace: 3.0.0 + html-void-elements: 3.0.0 + mdast-util-to-hast: 13.1.0 + property-information: 6.5.0 + space-separated-tokens: 2.0.2 + stringify-entities: 4.0.4 + zwitch: 2.0.4 + hast-util-to-string@3.0.1: dependencies: '@types/hast': 3.0.4 @@ -10997,6 +11241,52 @@ snapshots: rechoir: 0.8.0 resolve: 1.22.1 + lightningcss-darwin-arm64@1.28.2: + optional: true + + lightningcss-darwin-x64@1.28.2: + optional: true + + lightningcss-freebsd-x64@1.28.2: + optional: true + + lightningcss-linux-arm-gnueabihf@1.28.2: + optional: true + + lightningcss-linux-arm64-gnu@1.28.2: + optional: true + + lightningcss-linux-arm64-musl@1.28.2: + optional: true + + lightningcss-linux-x64-gnu@1.28.2: + optional: true + + lightningcss-linux-x64-musl@1.28.2: + optional: true + + lightningcss-win32-arm64-msvc@1.28.2: + optional: true + + lightningcss-win32-x64-msvc@1.28.2: + optional: true + + lightningcss@1.28.2: + dependencies: + detect-libc: 1.0.3 + optionalDependencies: + lightningcss-darwin-arm64: 1.28.2 + lightningcss-darwin-x64: 1.28.2 + lightningcss-freebsd-x64: 1.28.2 + lightningcss-linux-arm-gnueabihf: 1.28.2 + lightningcss-linux-arm64-gnu: 1.28.2 + lightningcss-linux-arm64-musl: 1.28.2 + lightningcss-linux-x64-gnu: 1.28.2 + lightningcss-linux-x64-musl: 1.28.2 + lightningcss-win32-arm64-msvc: 1.28.2 + lightningcss-win32-x64-msvc: 1.28.2 + optional: true + lines-and-columns@1.2.4: {} linkify-it@3.0.3: @@ -11817,7 +12107,7 @@ snapshots: url: 0.11.3 util: 0.12.5 vm-browserify: 1.1.2 - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) node-releases@2.0.14: {} @@ -11937,9 +12227,11 @@ snapshots: dependencies: mimic-fn: 4.0.0 - oniguruma-to-js@0.4.3: + oniguruma-to-es@0.8.1: dependencies: - regex: 4.3.3 + emoji-regex-xs: 1.0.0 + regex: 5.1.1 + regex-recursion: 5.1.1 open@8.4.2: dependencies: @@ -12063,6 +12355,8 @@ snapshots: p-try@2.2.0: {} + p5@1.11.1: {} + package-json-from-dist@1.0.1: {} package-manager-detector@0.2.1: {} @@ -12551,7 +12845,16 @@ snapshots: extend-shallow: 3.0.2 safe-regex: 1.1.0 - regex@4.3.3: {} + regex-recursion@5.1.1: + dependencies: + regex: 5.1.1 + regex-utilities: 2.3.0 + + regex-utilities@2.3.0: {} + + regex@5.1.1: + dependencies: + regex-utilities: 2.3.0 regexp.prototype.flags@1.4.3: dependencies: @@ -12596,13 +12899,13 @@ snapshots: hast-util-from-html: 2.0.3 unified: 11.0.5 - rehype-pretty-code@0.14.0(shiki@1.22.0): + rehype-pretty-code@0.14.0(shiki@1.24.4): dependencies: '@types/hast': 3.0.4 hast-util-to-string: 3.0.1 parse-numeric-range: 1.3.0 rehype-parse: 9.0.1 - shiki: 1.22.0 + shiki: 1.24.4 unified: 11.0.5 unist-util-visit: 5.0.0 @@ -12858,7 +13161,7 @@ snapshots: neo-async: 2.6.2 optionalDependencies: sass: 1.77.2 - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) sass@1.77.2: dependencies: @@ -13004,13 +13307,13 @@ snapshots: shell-quote@1.7.4: {} - shiki@1.22.0: + shiki@1.24.4: dependencies: - '@shikijs/core': 1.22.0 - '@shikijs/engine-javascript': 1.22.0 - '@shikijs/engine-oniguruma': 1.22.0 - '@shikijs/types': 1.22.0 - '@shikijs/vscode-textmate': 9.3.0 + '@shikijs/core': 1.24.4 + '@shikijs/engine-javascript': 1.24.4 + '@shikijs/engine-oniguruma': 1.24.4 + '@shikijs/types': 1.24.4 + '@shikijs/vscode-textmate': 9.3.1 '@types/hast': 3.0.4 side-channel@1.0.4: @@ -13293,7 +13596,7 @@ snapshots: style-loader@4.0.0(webpack@5.91.0): dependencies: - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) stylis@4.3.4: {} @@ -13347,26 +13650,28 @@ snapshots: term-size@2.2.1: {} - terser-webpack-plugin@5.3.10(esbuild@0.21.3)(webpack@5.91.0(esbuild@0.21.3)): + terser-webpack-plugin@5.3.10(@swc/core@1.10.4)(esbuild@0.21.3)(webpack@5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.31.0 - webpack: 5.91.0(esbuild@0.21.3) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3) optionalDependencies: + '@swc/core': 1.10.4 esbuild: 0.21.3 - terser-webpack-plugin@5.3.10(esbuild@0.21.3)(webpack@5.91.0): + terser-webpack-plugin@5.3.10(@swc/core@1.10.4)(esbuild@0.21.3)(webpack@5.91.0): dependencies: '@jridgewell/trace-mapping': 0.3.25 jest-worker: 27.5.1 schema-utils: 3.3.0 serialize-javascript: 6.0.2 terser: 5.31.0 - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) optionalDependencies: + '@swc/core': 1.10.4 esbuild: 0.21.3 terser@5.31.0: @@ -13456,9 +13761,9 @@ snapshots: semver: 7.6.2 source-map: 0.7.4 typescript: 5.4.5 - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) - ts-node@10.9.2(@types/node@16.18.97)(typescript@5.1.6): + ts-node@10.9.2(@swc/core@1.10.4)(@types/node@16.18.97)(typescript@5.1.6): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.11 @@ -13475,8 +13780,10 @@ snapshots: typescript: 5.1.6 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 + optionalDependencies: + '@swc/core': 1.10.4 - ts-node@10.9.2(@types/node@20.12.12)(typescript@5.4.5): + ts-node@10.9.2(@swc/core@1.10.4)(@types/node@20.12.12)(typescript@5.4.5): dependencies: '@cspotcode/source-map-support': 0.8.1 '@tsconfig/node10': 1.0.11 @@ -13493,6 +13800,8 @@ snapshots: typescript: 5.4.5 v8-compile-cache-lib: 3.0.1 yn: 3.1.1 + optionalDependencies: + '@swc/core': 1.10.4 tslib@2.6.2: {} @@ -13575,14 +13884,14 @@ snapshots: tunnel: 0.0.6 underscore: 1.13.6 - typescript-json-schema@0.63.0: + typescript-json-schema@0.63.0(@swc/core@1.10.4): dependencies: '@types/json-schema': 7.0.15 '@types/node': 16.18.97 glob: 7.2.3 path-equal: 1.2.5 safe-stable-stringify: 2.4.3 - ts-node: 10.9.2(@types/node@16.18.97)(typescript@5.1.6) + ts-node: 10.9.2(@swc/core@1.10.4)(@types/node@16.18.97)(typescript@5.1.6) typescript: 5.1.6 yargs: 17.7.2 transitivePeerDependencies: @@ -13601,7 +13910,7 @@ snapshots: ufo@1.5.4: {} - uglify-js@3.17.4: + uglify-js@3.19.3: optional: true unbox-primitive@1.0.2: @@ -13777,24 +14086,25 @@ snapshots: '@types/unist': 3.0.2 vfile-message: 4.0.2 - vite-node@1.6.0(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1): + vite-node@1.6.0(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1): dependencies: cac: 6.7.14 debug: 4.3.4 pathe: 1.1.2 picocolors: 1.0.1 - vite: 5.2.11(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1) + vite: 5.4.10(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1) transitivePeerDependencies: - '@types/node' - less - lightningcss - sass + - sass-embedded - stylus - sugarss - supports-color - terser - vite@5.2.11(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1): + vite@5.2.11(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1): dependencies: esbuild: 0.20.2 postcss: 8.4.38 @@ -13802,10 +14112,11 @@ snapshots: optionalDependencies: '@types/node': 22.7.4 fsevents: 2.3.3 + lightningcss: 1.28.2 sass: 1.79.4 terser: 5.34.1 - vite@5.4.10(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1): + vite@5.4.10(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1): dependencies: esbuild: 0.21.3 postcss: 8.4.47 @@ -13813,10 +14124,11 @@ snapshots: optionalDependencies: '@types/node': 22.7.4 fsevents: 2.3.3 + lightningcss: 1.28.2 sass: 1.79.4 terser: 5.34.1 - vitest@1.6.0(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1): + vitest@1.6.0(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1): dependencies: '@vitest/expect': 1.6.0 '@vitest/runner': 1.6.0 @@ -13835,8 +14147,8 @@ snapshots: strip-literal: 2.1.0 tinybench: 2.8.0 tinypool: 0.8.4 - vite: 5.2.11(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1) - vite-node: 1.6.0(@types/node@22.7.4)(sass@1.79.4)(terser@5.34.1) + vite: 5.2.11(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1) + vite-node: 1.6.0(@types/node@22.7.4)(lightningcss@1.28.2)(sass@1.79.4)(terser@5.34.1) why-is-node-running: 2.2.2 optionalDependencies: '@types/node': 22.7.4 @@ -13844,6 +14156,7 @@ snapshots: - less - lightningcss - sass + - sass-embedded - stylus - sugarss - supports-color @@ -13899,7 +14212,7 @@ snapshots: import-local: 3.1.0 interpret: 3.1.1 rechoir: 0.8.0 - webpack: 5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4) + webpack: 5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4) webpack-merge: 5.10.0 webpack-merge@5.10.0: @@ -13910,7 +14223,7 @@ snapshots: webpack-sources@3.2.3: {} - webpack@5.91.0(esbuild@0.21.3): + webpack@5.91.0(@swc/core@1.10.4)(esbuild@0.21.3): dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.5 @@ -13933,7 +14246,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(esbuild@0.21.3)(webpack@5.91.0(esbuild@0.21.3)) + terser-webpack-plugin: 5.3.10(@swc/core@1.10.4)(esbuild@0.21.3)(webpack@5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)) watchpack: 2.4.1 webpack-sources: 3.2.3 transitivePeerDependencies: @@ -13941,7 +14254,7 @@ snapshots: - esbuild - uglify-js - webpack@5.91.0(esbuild@0.21.3)(webpack-cli@5.1.4): + webpack@5.91.0(@swc/core@1.10.4)(esbuild@0.21.3)(webpack-cli@5.1.4): dependencies: '@types/eslint-scope': 3.7.7 '@types/estree': 1.0.5 @@ -13964,7 +14277,7 @@ snapshots: neo-async: 2.6.2 schema-utils: 3.3.0 tapable: 2.2.1 - terser-webpack-plugin: 5.3.10(esbuild@0.21.3)(webpack@5.91.0) + terser-webpack-plugin: 5.3.10(@swc/core@1.10.4)(esbuild@0.21.3)(webpack@5.91.0) watchpack: 2.4.1 webpack-sources: 3.2.3 optionalDependencies: diff --git a/website/de/book/elements/p5.md b/website/de/book/elements/p5.md new file mode 100644 index 00000000..722dce26 --- /dev/null +++ b/website/de/book/elements/p5.md @@ -0,0 +1,52 @@ +--- +name: P5 +lang: de +--- + +# P5 + +Dieses Element ermöglicht es Ihnen, [p5.js](https://p5js.org/) Skizzen in Ihrem Buch zu erstellen und auszuführen. Die p5.js-Bibliothek ist eine JavaScript-Bibliothek, die es Ihnen ermöglicht, Grafiken und Animationen im Browser zu erstellen. + +Sie können entweder eine p5.js-Skizze aus einer Datei laden oder sie direkt im Buch schreiben. + +Sie können auch die `editor`-Option verwenden, um einen Editor für die Skizze anzuzeigen. + +Um die Höhe zu ändern, können Sie die `height`-Option verwenden. + +````md +::p5{src="p5test.js"} + + +:::p5{height=400 editor=true} + +```js +function setup() { + createCanvas(400, 400); +} + +function draw() { + background(220); + ellipse(200, 200, 100, 100); +} +``` + +::: +```` + +::p5{src="p5test.js" height=200} + + +:::p5{height=400 editor=true} + +```js +function setup() { + createCanvas(400, 400); +} + +function draw() { + background(220); + ellipse(200, 200, 100, 100); +} +``` + +::: \ No newline at end of file diff --git a/website/de/public/p5test.js b/website/de/public/p5test.js new file mode 100644 index 00000000..4ce8030b --- /dev/null +++ b/website/de/public/p5test.js @@ -0,0 +1,7 @@ +function setup() { + createCanvas(720, 200); + background(0); +} +function draw() { + circle(mouseX, mouseY, 50); +} diff --git a/website/en/book/elements/p5.md b/website/en/book/elements/p5.md new file mode 100644 index 00000000..02243806 --- /dev/null +++ b/website/en/book/elements/p5.md @@ -0,0 +1,52 @@ +--- +name: P5 +--- + +# P5 + +This element allows you to create and run [p5.js](https://p5js.org/) sketches in your book. The p5.js library is a JavaScript library that allows you to create graphics and animations in the browser. + +You can either load a p5.js sketch from a file or write it directly in the book. + +You can also use the `editor` option to display an editor for the sketch. + +For changing the height, you can use the `height` option. + +````md +::p5{src="p5test.js"} + + +:::p5{height=400 editor=true} + +```js +function setup() { + createCanvas(400, 400); +} + +function draw() { + background(220); + ellipse(200, 200, 100, 100); +} +``` + +::: + +```` + +::p5{src="p5test.js" height=200} + + +:::p5{height=400 editor=true} + +```js +function setup() { + createCanvas(400, 400); +} + +function draw() { + background(220); + ellipse(200, 200, 100, 100); +} +``` + +::: \ No newline at end of file diff --git a/website/en/public/p5test.js b/website/en/public/p5test.js new file mode 100644 index 00000000..4ce8030b --- /dev/null +++ b/website/en/public/p5test.js @@ -0,0 +1,7 @@ +function setup() { + createCanvas(720, 200); + background(0); +} +function draw() { + circle(mouseX, mouseY, 50); +}