1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import style from "./content-bash.module.css"
import { createResource, createSignal } from "solid-js"
import { createOverflow, useShareMessages } from "./common"
import { codeToHtml } from "shiki"
interface Props {
command: string
output: string
description?: string
expand?: boolean
}
export function ContentBash(props: Props) {
const messages = useShareMessages()
const [commandHtml] = createResource(
() => props.command,
async (command) => {
return codeToHtml(command || "", {
lang: "bash",
themes: {
light: "github-light",
dark: "github-dark",
},
})
},
)
const [outputHtml] = createResource(
() => props.output,
async (output) => {
return codeToHtml(output || "", {
lang: "console",
themes: {
light: "github-light",
dark: "github-dark",
},
})
},
)
const [expanded, setExpanded] = createSignal(false)
const overflow = createOverflow()
return (
<div class={style.root} data-expanded={expanded() || props.expand === true ? true : undefined}>
<div data-slot="body">
<div data-slot="header">
<span>{props.description}</span>
</div>
<div data-slot="content">
<div innerHTML={commandHtml()} />
<div data-slot="output" ref={overflow.ref} innerHTML={outputHtml()} />
</div>
</div>
{!props.expand && overflow.status && (
<button
type="button"
data-component="text-button"
data-slot="expand-button"
onClick={() => setExpanded((e) => !e)}
>
{expanded() ? messages.show_less : messages.show_more}
</button>
)}
</div>
)
}
|
