nattoppet 2.1.1 → 4.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Shiwei Zhang
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/common.ymd

@@ -0,0 +1,94 @@
+[require]=
+const {opts: [id], args: [file]} = std_call()
+const content = read(file)
+switch (extname(file)) {
+    case 'less':
+        `<style ${id ? `id="${id}"` : ''}>${render_less(content)}</style>`; break
+    case 'css':
+        `<style ${id ? `id="${id}"` : ''}>${content}</style>`; break
+    case 'coffee':
+        `<script ${id ? `id="${id}"` : ''}>${render_coffee(content, { bare: true })}</script>`; break
+    case 'js':
+        `<script ${id ? `id="${id}"` : ''}>${content}</script>`; break
+    case 'md':
+        render_markdown(content); break
+    case 'wasm':
+        `<script ${id ? `id="${id}"` : ''}>
+            const ready = (async () => {
+                const raw = await fetch("data:application/octet-stream;base64,${read(file, 'compressed-base64')}")
+                const blob = await raw.blob()
+                const decompressed = await blob.stream().pipeThrough(new DecompressionStream("deflate-raw"))
+                const response = new Response(decompressed, { headers: { 'Content-Type': 'application/wasm' } })
+                const x = await WebAssembly.instantiateStreaming(response, {})
+                window.${file.match(/([^\/]+).wasm$/)[1]} = x.instance.exports
+            })()
+            window.wasm_ready = window.wasm_ready ? Promise.all([window.wasm_ready, ready]) : ready
+        </script>`; break
+    case 'json':
+        `<script ${id ? `id="${id}"` : ''}>
+            const ready = (async () => {
+                const raw = await fetch("data:application/octet-stream;base64,${read(file, 'compressed-base64')}")
+                const blob = await raw.blob()
+                const decompressed = await blob.stream().pipeThrough(new DecompressionStream("deflate-raw"))
+                const response = new Response(decompressed, { headers: { 'Content-Type': 'application/json' } })
+                window.${file.match(/([^\/]+).json$/)[1]} = await response.json()
+            })()
+            window.json_ready = window.json_ready ? Promise.all([window.json_ready, ready]) : ready
+        </script>`; break
+    default:
+        content; break
+}
+
+[img]=
+const {opts, args: [file, alt]} = std_call()
+const classes = opts.join(' ')
+const mimesuf = extname(file) == 'svg' ? 'svg+xml' : extname(file)
+const content = `data:image/${mimesuf};base64,` + read(file, 'base64')
+const htmltag = `<img class="${classes}" src="${content}" alt="${alt || ''}"/>`
+opts.includes('center') ? `<div style="text-align:center">${htmltag}</div>` : htmltag
+
+[h2]= `<h2>${interpret(capture_until('\n'))}</h2>`
+[h3]= `<h3>${interpret(capture_until('\n'))}</h3>`
+[h4]= `<h4>${interpret(capture_until('\n'))}</h4>`
+
+[quote]=
+const {opts, block} = std_call(true)
+;`<blockquote class="${opts.join(' ')}">${interpret(block)}</blockquote>`
+
+[#]= std_call(true), ''
+
+[-]=
+const {opts, block} = std_call(true)
+;`<li class="${opts.join(' ')}">${interpret(block)}</li>`
+
+[file]=
+const {args: [file, text]} = std_call()
+const content = "data:application/octet-stream;base64," + read(file, 'base64')
+;`<a download="${basename(file)}" href="${content}">${text ? interpret(text) : basename(file)}</a>`
+
+[code]=
+const {opts: [language], args: [content], block} = std_call()
+const code = `<code ${language ? `class="language-${language}"` : ''}>${content || block.slice(1)}</code>`
+content ? code : `<pre>${code}</pre>`
+
+[link]=
+const {opts: [id], args: [href, text]} = std_call()
+const content = text || capture_until('\n').trim() || href
+;`<a ${id ? `id="${id}"` : ''} href="${href}">${interpret(content)}</a>`
+
+[sup]=
+const {args: [text]} = std_call()
+;`<sup>${interpret(text)}</sup>`
+
+[eval]=
+const {block} = std_call(true)
+eval(block)
+
+[eval*]=
+const {block} = std_call(true)
+eval(block); ''
+
+[cn]=
+interpret(std_call().block)
+    .replace(/([\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d])\r?\n(?=\S)/g, '$1')
+    .replace(/(?<=\S)\r?\n([\u4E00-\u9FCC\u3400-\u4DB5\uFA0E\uFA0F\uFA11\uFA13\uFA14\uFA1F\uFA21\uFA23\uFA24\uFA27-\uFA29]|[\ud840-\ud868][\udc00-\udfff]|\ud869[\udc00-\uded6\udf00-\udfff]|[\ud86a-\ud86c][\udc00-\udfff]|\ud86d[\udc00-\udf34\udf40-\udfff]|\ud86e[\udc00-\udc1d])/g, '$1')

package/dist/form.css

@@ -0,0 +1,87 @@
+html {
+  font-family: sans-serif;
+  font-size: 16px;
+  line-height: 1.5;
+  text-align: justify;
+  hyphens: auto;
+  color: #33333d;
+}
+@media (max-width: 425px) {
+  html {
+    font-size: 15px;
+  }
+}
+body {
+  max-width: 625px;
+  margin: 0 auto;
+  padding: 1rem 1rem;
+}
+@media (max-width: 425px) {
+  body {
+    padding: 0 0.8rem;
+  }
+}
+h3 {
+  margin: 2rem 0 1rem;
+  position: relative;
+  border-bottom: #bbb 1px solid;
+}
+label {
+  display: block;
+  font-weight: 500;
+  font-size: 0.9rem;
+}
+label input:not([type]),
+label input[type="text"],
+label input[type="number"] {
+  display: block;
+  width: 100%;
+  margin: 0.1rem 0 1rem;
+  padding: 0.4rem;
+  border: 1px solid #bbb;
+  border-radius: 3px;
+  font-size: 0.9rem;
+  box-sizing: border-box;
+}
+label input[type="checkbox"] {
+  margin: 0.1rem 0.5rem 1rem 0;
+  transform: translateY(0.1rem);
+}
+button {
+  display: inline-block;
+  appearance: none;
+  background-color: transparent;
+  border: 1px solid #bbb;
+  border-radius: 0.375rem;
+  cursor: pointer;
+  line-height: 100%;
+  padding: 0.6rem 0.8rem;
+}
+button:active {
+  border-color: #4a4a4a;
+  outline: 0;
+}
+button:focus {
+  border-color: #485fc7;
+  outline: 0;
+}
+button:hover {
+  border-color: #b5b5b5;
+}
+button:focus:not(:active) {
+  box-shadow: rgba(72, 95, 199, 0.25) 0 0 0 0.125rem;
+}
+pre {
+  clear: both;
+  margin-top: 1rem;
+  font-family: monospace;
+  color: #222;
+  border: 1px solid #bcd;
+  background-color: #ebf1f5;
+  padding: 0.8rem;
+  overflow-x: auto;
+  font-size: 0.8rem;
+}
+.hidden {
+  opacity: 0;
+}

package/dist/form.js

@@ -0,0 +1,64 @@
+function gather_inputs() {
+    const args = Object.create(null)
+
+    for (const e of document.querySelectorAll('input')) {
+        switch (e.type) {
+            case 'text':
+                args[e.name] = e.value
+                break;
+            case 'number':
+                args[e.name] = parseFloat(e.value)
+                break;
+            case 'checkbox':
+                args[e.name] = e.checked
+                break;
+        }
+    }
+
+    return args
+}
+
+window.addEventListener('load', async () => {
+    document.querySelector('button').addEventListener('click', async () => {
+        document.querySelector('pre').classList.remove('hidden')
+        document.querySelector('button').disabled = true
+        await new Promise(res => setTimeout(res, 0))
+
+        const args = gather_inputs()
+
+        try {
+            const result = await run(args)
+            if (result)
+                document.querySelector('pre').textContent = result
+        } catch (e) {
+            document.querySelector('pre').textContent = "Error: " + (e.message ?? e)
+            throw e
+        } finally {
+            document.querySelector('button').disabled = false
+            await new Promise(res => setTimeout(res, 0))
+        }
+    })
+
+    document.body.addEventListener('input', () => {
+        const url_params = new URLSearchParams(gather_inputs())
+        history.replaceState(null, '', '#' + url_params.toString())
+    })
+
+    if (location.hash.length > 1) {
+        const url_params = new URLSearchParams(location.hash.slice(1))
+        for (const [name, value] of url_params.entries()) {
+            const e = document.querySelector(`input[name="${name}"]`)
+            if (!e) continue
+
+            switch (e.type) {
+                case 'text':
+                case 'number':
+                    e.value = value
+                    break;
+                case 'checkbox':
+                    e.checked = value == 'true'
+                    break;
+            }
+        }
+    }
+})

package/dist/form.ymd

@@ -0,0 +1,36 @@
+<!doctype html>
+<meta name=viewport content="width=device-width, initial-scale=1.0">
+<meta name=author content="ylxdzsw@gmail.com">
+<meta charset="utf-8">
+<title>[title] | ylxdzsw's blog</title>
+
+<style>
+[mixin] form.css
+</style>
+
+<script>
+[mixin] form.js
+</script>
+
+[#slot]
+
+<button>Run</button>
+<pre class="hidden"></pre>
+
+[h3]=
+const {block: content} = std_call(true)
+;`<h3>${content}</h3>`
+
+[text]=
+const {opts: [name], args: [attr=""], block: desc} = std_call(true)
+;`<label>${interpret(desc).trim()}<input name="${name}" ${attr}></input></label>`
+
+[number]=
+const {opts: [name], args: [attr=""], block: desc} = std_call(true)
+;`<label>${interpret(desc).trim()}<input type="number" name="${name}" ${attr}></input></label>`
+
+[checkbox]=
+const {opts: [name], args: [attr=""], block: desc} = std_call(true)
+;`<label><input type="checkbox" name="${name}" ${attr}></input>${interpret(desc).trim()}</label>`
+
+[mixin] common.ymd