102 lines
2.6 KiB
Typst
102 lines
2.6 KiB
Typst
#import "custom_html.typ" as chtml
|
|
|
|
|
|
// Need inline svg for css color control, so no `image` element :(
|
|
#let clipboard-icon = html.elem(
|
|
"svg",
|
|
attrs: (
|
|
//width: "16",
|
|
//height: "16",
|
|
style: "width: 1.5em; height: 1.5em;",
|
|
fill: "currentcolor",
|
|
viewBox: "0 0 16 16",
|
|
xmlns: "http://www.w3.org/2000/svg"
|
|
), {
|
|
html.elem("path", attrs: (
|
|
d: "M0 6.75C0 5.784.784 5 1.75 5h1.5a.75.75 0 0 1 0 1.5h-1.5a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-1.5a.75.75 0 0 1 1.5 0v1.5A1.75 1.75 0 0 1 9.25 16h-7.5A1.75 1.75 0 0 1 0 14.25Z"
|
|
))
|
|
html.elem("path", attrs: (
|
|
d: "M5 1.75C5 .784 5.784 0 6.75 0h7.5C15.216 0 16 .784 16 1.75v7.5A1.75 1.75 0 0 1 14.25 11h-7.5A1.75 1.75 0 0 1 5 9.25Zm1.75-.25a.25.25 0 0 0-.25.25v7.5c0 .138.112.25.25.25h7.5a.25.25 0 0 0 .25-.25v-7.5a.25.25 0 0 0-.25-.25Z"
|
|
))
|
|
}
|
|
)
|
|
|
|
#let code-block-counter = state("code-block-counter", 0)
|
|
|
|
#let show-rule-code-block(code) = context {
|
|
let code-id = code-block-counter.get()
|
|
let code-id-name = "code-block-" + str(code-id)
|
|
```raw-css
|
|
code-block {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
margin: 8px;
|
|
background-color: var(--color-code-bg);
|
|
box-shadow: inset 0px 0px 5px 0px #000;
|
|
|
|
pre {
|
|
padding: 8px;
|
|
margin: 0;
|
|
overflow: auto;
|
|
}
|
|
|
|
code-block-button-container {
|
|
display: block;
|
|
|
|
button {
|
|
background-color: inherit;
|
|
border: inherit;
|
|
border-radius: 4px;
|
|
padding: 8px;
|
|
margin: 4px;
|
|
&:hover {
|
|
box-shadow: inset 0px 0px 0.4em 0px var(--color-button-shadow);
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
@media (not (scripting: enabled)) {
|
|
.code-block-clipboard-button {
|
|
display: none;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
```
|
|
|
|
```raw-js
|
|
function copy_code_to_clipboard(id) {
|
|
code = document.getElementById(id).getAttribute("code-value");
|
|
navigator.clipboard.writeText(code).then(
|
|
(r) => alert("copy: " + code),
|
|
(e) => alert("failed to copy code: ", e),
|
|
)
|
|
}
|
|
```
|
|
chtml.code-block(
|
|
attrs: (
|
|
id: code-id-name,
|
|
code-value: code.text,
|
|
),
|
|
{
|
|
code
|
|
chtml.code-block-button-container({
|
|
html.elem(
|
|
"button",
|
|
attrs: (
|
|
class: "code-block-clipboard-button",
|
|
onclick: "copy_code_to_clipboard('" + code-id-name + "');",
|
|
aria-label: "copy to clipboard button",
|
|
),
|
|
{
|
|
clipboard-icon
|
|
}
|
|
)
|
|
})
|
|
}
|
|
)
|
|
code-block-counter.update(x => x+1)
|
|
}
|