Demo
Run quillo run app.qwe --watch in the folder, then open http://localhost:8080. The config is read from quillo.toml.
Your API key is
Get it
It needs theme.qwe, as every component does; or take the whole kit, quillo-ui.qwe. Each component brings its own styles to the pages that show it.
$ curl -O https://quillolang.org/components/ui/theme.qwe$ curl -O https://quillolang.org/components/ui/inline_code.qwemain.qwe
import ui/theme.qwe use theme_cssuse ui/inline_code.qweroute GET / = <html><head><style>{theme_css}</style></head><body class="ui-root">...</body></html>Example
The code of the preview above.
demos/inline_code.qwe
view InlineCodeDemo() = <div.demo-stack> <p.demo-note style="color: var(--ui-fg); font-size: 15px"> Run <InlineCode id="inline-code-demo-run">quillo run app.qwe --watch</InlineCode> in the folder, then open{" "} <InlineCode tone="accent">http://localhost:8080</InlineCode>. The config is read from{" "} <InlineCode>quillo.toml</InlineCode>. </p> <p.demo-note style="color: var(--ui-fg); font-size: 15px"> Your API key is <InlineCodeCopy code="qk_live_4f9a0c12e7b3" id="inline-code-demo-copy"/>, and the webhook secret <InlineCodeCopy code="whsec_9d8e7f" label="Copy the webhook secret"/>. </p> </div>Source
ui/inline_code.qwe
// InlineCode: a span of code in running text, in the monospace font on a tint:// a file name, a command, a value. InlineCodeCopy is the same span as a button// that copies its text when clicked, and says "Copied" for a moment.//// Run <InlineCode>quillo run app.qwe</InlineCode> to start.// Your key is <InlineCodeCopy code="qk_live_4f9a…"/>.//// InlineCode: children, the code; tone "default" or "accent"; id.// InlineCodeCopy (a component): code, the text shown and copied; label, what// screen readers call the button ("Copy" + the code); done ("Copied") and failed// ("Could not copy", when the page is not https or the browser refuses).import ui/theme.qwe use ui_clslet inline_code_css = css`.ui-code { padding: .12em .4em; border-radius: 4px; background: var(--ui-subtle); color: var(--ui-fg); font: .9em var(--ui-mono); overflow-wrap: anywhere; }.ui-code-accent { background: var(--ui-accent-soft); color: var(--ui-accent); }.ui-code-btn { position: relative; display: inline-flex; align-items: center; gap: .4em; border: 1px solid transparent; cursor: pointer; vertical-align: baseline; line-height: 1.3; transition: border-color .15s, background .15s; }.ui-code-btn:hover { border-color: var(--ui-border); }.ui-code-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }.ui-code-btn svg { flex: none; width: .95em; height: .95em; color: var(--ui-muted); }.ui-code-ok svg { color: var(--ui-success); }.ui-code-bad svg { color: var(--ui-danger); }.ui-code-tip { position: absolute; left: 50%; bottom: calc(100% + 6px); transform: translateX(-50%); padding: 3px 7px; border-radius: 4px; background: var(--ui-fg); color: var(--ui-bg); font: 500 11px/1.3 var(--ui-font); white-space: nowrap; }@media (prefers-reduced-motion: reduce) { .ui-code-btn { transition: none; } }`view InlineCode(tone: str = "default", id: str? = null, class: str? = null, children) { style global inline_code_css <code class={ui_cls(["ui-code", tone != "default" && `ui-code-${tone}`, class])} id={id}>{children}</code>}component InlineCodeCopy(code: str, label: str? = null, done: str = "Copied", failed: str = "Could not copy", id: str? = null, class: str? = null) { style global inline_code_css state result = "" // "", "ok" or "bad" if result != "" { every(1500, () => { result = "" }) } <span> <button type="button" class={ui_cls(["ui-code", "ui-code-btn", result != "" && `ui-code-${result}`, class])} id={id} aria-label={label ?? `Copy ${code}`} @click={() => { if js("isSecureContext") != true { result = "bad" } else { js("navigator.clipboard.writeText", code).then((_ = null) => { result = "ok" }, (_ = null) => { result = "bad" }) } }}> <code>{code}</code> <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"> <path d={result == "ok" ? "M20 6 9 17l-5-5" : "M10 8h10a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H10a2 2 0 0 1-2-2V10a2 2 0 0 1 2-2ZM4 16a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2"}/> </svg> {result != "" && <span.ui-code-tip aria-hidden="true">{result == "ok" ? done : failed}</span>} </button> <span.ui-sr role="status">{result == "ok" ? done : result == "bad" ? failed : ""}</span> </span>}Related
MarkdownViewA small Markdown subset (headings, emphasis, links, lists, code, quotes) rendered safely as markup, in Quillo, with no HTML let through.4 views · 9 downloadsAbbrAn abbreviation whose expansion shows in a bubble on hover or focus and is read out by screen readers.6 views · 5 downloadsBlockquoteA quotation with the person and the source in a figure, as a bar, with a quote mark, or plain.6 views · 6 downloadsBulletListAn unordered list with dot, tick, arrow, star, dash or any glyph bullets, in a tone and a spacing.6 views · 7 downloadsCaptionSmall muted text under a figure, a table or a field, as the right element for each.5 views · 7 downloadsDropCapA paragraph whose first letter is set large and dropped into the first two, three or four lines.5 views · 6 downloads
Thread
Thread 0 posts
On InlineCode: questions, tips, corrections, and code that uses it.
No posts yet. The first one opens the thread.