histausse/typst-web-template
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Compare commits

base: histausse:f6705c75a0e7614a9aaa4005413c55aae1a65783
Branches Tags
histausse:main
...
compare: histausse:cdcf69db60a4d312b912083c0d474827d0bd6cb0
Branches Tags
histausse:main

3 commits
f6705c75a0 ... cdcf69db60

Author SHA1 Message Date
Jean-Marie 'Histausse' Mineau
cdcf69db60
add copy button to code blocks 2026-04-21 14:05:59 +02:00
Jean-Marie 'Histausse' Mineau
c6f47db8ba
somewhat fix code display 2026-04-21 12:44:24 +02:00
Jean-Marie 'Histausse' Mineau
2db8f2eb1d
tweak summary card style 2026-04-21 11:33:52 +02:00
7 changed files with 129 additions and 20 deletions
Download patch file Download diff file Expand all files Collapse all files

102
lib/code.typ Normal file
View file

@ -0,0 +1,102 @@
#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)
}

2
lib/custom_html.typ
View file

@ -12,6 +12,8 @@
html.elem("theme-picker", attrs: (aria-label: label, role: "radiogroup"), body) html.elem("theme-picker", attrs: (aria-label: label, role: "radiogroup"), body)
} }
#let code-block = html.elem.with("code-block") #let code-block = html.elem.with("code-block")
#let code-block-button-container = html.elem.with("code-block-button-container")
#let icon-container(..args, body) = { #let icon-container(..args, body) = {
html.elem("icon-container", attrs: args.named(), body) html.elem("icon-container", attrs: args.named(), body)
} }

16
lib/html_body.typ
View file

@ -65,7 +65,7 @@
site-container { site-container {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
max-width: 1510px; max-width: 60em;
width: 100%; width: 100%;
padding: 0 20px; padding: 0 20px;
@ -90,20 +90,6 @@
margin-top: 15px; margin-top: 15px;
} }
} }
code-block {
display: flex;
justify-content: center;
align-items: center;
pre {
width: min-content;
padding: 8px;
border-radius: 8px;
background-color: var(--color-code-bg);
box-shadow: inset 0px 0px 5px 0px #000;
}
}
} }
``` ```
set figure(supplement: none) set figure(supplement: none)

3
lib/html_head.typ
View file

@ -1,5 +1,5 @@
#import "./custom_html.typ" as chtml #import "./custom_html.typ" as chtml
#import "./html_utils.typ": get-css #import "./html_utils.typ": get-css, get-js
/// Generate the html <head> element for the page. /// Generate the html <head> element for the page.
#let html_head( #let html_head(
@ -87,6 +87,7 @@
}} }}
html.style(get-css()) html.style(get-css())
html.script(get-js())
}) })
} }

18
lib/html_utils.typ
View file

@ -1,26 +1,40 @@
#import "./custom_html.typ": code-block
#import "./figures.typ": show-rule-figure #import "./figures.typ": show-rule-figure
#import "./code.typ": show-rule-code-block
#let css-list = state("css-list", ()) #let css-list = state("css-list", ())
#let js-list = state("js-list", ())
/// Add string `css` to `css-list` if not already present /// Add string `css` to `css-list` if not already present
#let add-css(css) = context { #let add-css(css) = context {
css-list.update(x => if css in x { x } else { x + (css,) }) css-list.update(x => if css in x { x } else { x + (css,) })
} }
/// Add string `js` to `js-list` if not already present
#let add-js(js) = context {
js-list.update(x => if js in x { x } else { x + (js,) })
}
/// Concatenate all css found in css-list at the end of the document /// Concatenate all css found in css-list at the end of the document
#let get-css() = context { #let get-css() = context {
css-list.final().join("\n\n") css-list.final().join("\n\n")
} }
/// Concatenate all js found in js-list at the end of the document
#let get-js() = context {
js-list.final().join("\n\n")
}
#let html_show(body) = { #let html_show(body) = {
show raw: it => { show raw: it => {
if it.lang == "raw-css" { if it.lang == "raw-css" {
// remove code and add it to css style // remove code and add it to css style
add-css(it.text) add-css(it.text)
} else if it.lang == "raw-js" {
// remove code and add it to css style
add-js(it.text)
} else if it.block { } else if it.block {
// wrap <pre><code> inside a <code-block> // wrap <pre><code> inside a <code-block>
code-block(it) show-rule-code-block(it)
} else { } else {
it it
} }

5
lib/summary.typ
View file

@ -36,7 +36,7 @@
summary-card-description { summary-card-description {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: left; text-align: justify;
height: 100%; height: 100%;
h3 { h3 {
@ -45,8 +45,9 @@
} }
summary-card-details { summary-card-details {
text-align: left;
margin-top: auto; margin-top: auto;
padding-top: 0.5em; padding-top: 1em;
} }
} }

3
test_template/main.typ
View file

@ -75,6 +75,8 @@ def plopliplop(n: int)
print(i) print(i)
``` ```
#raw(range(10).map(i => lorem(100)).join("\n"), block: true)
/* /*
#figure({ #figure({
show table: set text(size: 0.80em) show table: set text(size: 0.80em)
@ -163,6 +165,7 @@ thead {
) )
#card-list( #card-list(
min-width: 200,
range(1, 21).map(i => range(1, 21).map(i =>
summary( summary(
url: "http://test.example.com", url: "http://test.example.com",