Skip to content

Commit 386ca8d

Browse files
mythzmythz
committed
Modernize markdown :::sh shell command
1 parent a6621a0 commit 386ca8d

File tree

3 files changed

+197
-48
lines changed

3 files changed

+197
-48
lines changed

‎MyApp/MarkdownPagesBase.cs‎

Lines changed: 59 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -525,6 +525,64 @@ protected override void Write(HtmlRenderer renderer, CustomContainer obj)
525525
}
526526
}
527527

528+
public class ShellContainerRenderer : HtmlObjectRenderer<CustomContainer>
529+
{
530+
public string Class { get; set; } = "mb-4";
531+
532+
protected override void Write(HtmlRenderer renderer, CustomContainer obj)
533+
{
534+
renderer.EnsureLine();
535+
if (renderer.EnableHtmlForBlock)
536+
{
537+
var attrs = obj.TryGetAttributes();
538+
if (attrs != null)
539+
{
540+
attrs.Classes ??= new();
541+
if (attrs.Classes.IsEmpty() || (attrs.Classes.Count == 1 && attrs.Classes[0] == "sh"))
542+
{
543+
attrs.Classes.Add(Class);
544+
}
545+
}
546+
547+
renderer
548+
.Write("<div")
549+
.WriteAttributes(attrs)
550+
.Write(">");
551+
552+
renderer.Write(@"<div class=""not-prose group relative overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700 bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800 shadow-sm hover:shadow-md transition-all duration-200 cursor-pointer"" onclick=""shellCopy(this)"">
553+
<!-- Background pattern -->
554+
<div class=""absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800 opacity-50"" style=""background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 16px 16px;""></div>
555+
556+
<div class=""relative flex items-center justify-between px-4 py-3"">
557+
<!-- Left side - Terminal icon and command -->
558+
<div class=""flex items-center gap-3 flex-1 min-w-0"">
559+
<svg class=""w-4 h-4 text-slate-500 dark:text-slate-400 flex-shrink-0"" xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 24 24"" fill=""none"" stroke=""currentColor"" stroke-width=""2"" stroke-linecap=""round"" stroke-linejoin=""round""><path d=""M12 19h8""/><path d=""m4 17 6-6-6-6""/></svg>
560+
<div class=""flex items-center gap-2 min-w-0 flex-1"">
561+
<code class=""text-sm font-mono text-slate-900 dark:text-slate-100 truncate"">");
562+
}
563+
564+
// We don't escape a CustomContainer
565+
renderer.WriteChildren(obj);
566+
if (renderer.EnableHtmlForBlock)
567+
{
568+
renderer.WriteLine(@"</code>
569+
</div>
570+
</div>
571+
572+
<!-- Right side - Copy button -->
573+
<div class=""flex items-center gap-2 ml-4"">
574+
<button class=""shell-copy-btn flex items-center justify-center p-2 rounded-md transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-400 dark:hover:border-slate-500"" aria-label=""Copy command"">
575+
<svg class=""copied w-4 h-4"" style=""display:none"" xmlns=""http://www.w3.org/2000/svg"" viewBox=""0 0 24 24"" fill=""none"" stroke=""currentColor"" stroke-width=""2"" stroke-linecap=""round"" stroke-linejoin=""round""><path d=""M20 6 9 17l-5-5""/></svg>
576+
<svg class=""nocopy w-4 h-4"" xmlns=""http://www.w3.org/2000/svg"" width=""24"" height=""24"" viewBox=""0 0 24 24"" fill=""none"" stroke=""currentColor"" stroke-width=""2"" stroke-linecap=""round"" stroke-linejoin=""round""><rect width=""14"" height=""14"" x=""8"" y=""8"" rx=""2"" ry=""2""/><path d=""M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2""/></svg>
577+
</button>
578+
</div>
579+
</div>
580+
</div>");
581+
renderer.WriteLine("</div>");
582+
}
583+
}
584+
}
585+
528586
public class CustomInfoRenderer : HtmlObjectRenderer<CustomContainer>
529587
{
530588
public string Title { get; set; } = "TIP";
@@ -772,13 +830,7 @@ public void AddBuiltInContainers(string[]? exclude = null)
772830
Class = "not-prose copy cp",
773831
IconClass = "bg-sky-500",
774832
},
775-
["sh"] = new CopyContainerRenderer
776-
{
777-
Class = "not-prose sh-copy cp",
778-
BoxClass = "bg-gray-800",
779-
IconClass = "bg-green-600",
780-
TextClass = "whitespace-pre text-base text-gray-100",
781-
},
833+
["sh"] = new ShellContainerRenderer(),
782834
["tip"] = new CustomInfoRenderer(),
783835
["info"] = new CustomInfoRenderer
784836
{

‎MyApp/wwwroot/mjs/components/ShellCommand.mjs‎

Lines changed: 71 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,47 +1,79 @@
11
import { ref } from "vue"
2-
import { map } from "@servicestack/client"
32

43
export default {
5-
template:`<div class="lang relative bg-gray-700 text-gray-300 pl-5 py-3 sm:rounded flex">
6-
<div class="flex ml-2 w-full justify-between cursor-pointer" @click="copy">
7-
<div>
8-
<span>$ </span>
9-
<label class="">
10-
<slot>{{text}}</slot>
11-
</label>
12-
</div>
13-
<small class="text-xs text-gray-400 px-3 -mt-1">sh</small>
14-
</div>
15-
<div v-if="successText" class="-mr-24 right-0 absolute text-md text-gray-200 bg-green-700 px-1 rounded">
16-
<div class="flex pr-1">
17-
<svg class="w-5 h-5 mt-0.5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="currentColor" d="m9.55 18l-5.7-5.7l1.425-1.425L9.55 15.15l9.175-9.175L20.15 7.4Z"/></svg>
18-
{{ successText }}
19-
</div>
20-
</div>
21-
</div>`,
22-
props:['text'],
4+
template:`
5+
<div :class="['group relative overflow-hidden rounded-lg border border-slate-200 dark:border-slate-700',
6+
'bg-gradient-to-br from-slate-50 to-slate-100 dark:from-slate-900 dark:to-slate-800',
7+
'shadow-sm hover:shadow-md transition-all duration-200']"
8+
@click="copy">
9+
<!-- Background pattern -->
10+
<div class="absolute inset-0 bg-grid-slate-100 dark:bg-grid-slate-800 opacity-50"
11+
style="background-image: radial-gradient(circle, rgba(0,0,0,0.05) 1px, transparent 1px); background-size: 16px 16px;" />
12+
13+
<div class="relative flex items-center justify-between px-4 py-3">
14+
<!-- Left side - Terminal icon and command -->
15+
<div class="flex items-center gap-3 flex-1 min-w-0 cursor-pointer">
16+
<svg class="w-4 h-4 text-slate-500 dark:text-slate-400 flex-shrink-0" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 19h8"/><path d="m4 17 6-6-6-6"/></svg>
17+
<div class="flex items-center gap-2 min-w-0 flex-1">
18+
<code ref="commandRef" class="text-sm font-mono text-slate-900 dark:text-slate-100 truncate">
19+
<slot>{{text}}</slot>
20+
</code>
21+
</div>
22+
</div>
23+
24+
<!-- Right side - Copy button -->
25+
<div class="flex items-center gap-2 ml-4">
26+
<button
27+
@click="copy"
28+
:class="[
29+
'flex items-center justify-center p-2 rounded-md',
30+
'transition-all duration-200',
31+
'focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2',
32+
copied
33+
? 'bg-green-100 dark:bg-green-900/30 text-green-700 dark:text-green-400 border border-green-300 dark:border-green-700'
34+
: 'bg-white dark:bg-slate-800 text-slate-700 dark:text-slate-300 border border-slate-300 dark:border-slate-600 hover:bg-slate-50 dark:hover:bg-slate-700 hover:border-slate-400 dark:hover:border-slate-500'
35+
]"
36+
:aria-label="copied ? 'Copied!' : 'Copy command'"
37+
>
38+
<svg v-if="copied" class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
39+
<svg v-else class="w-4 h-4" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"/><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"/></svg>
40+
</button>
41+
</div>
42+
</div>
43+
</div>`,
44+
props: ['text'],
2345
setup(props) {
24-
let successText = ref('')
25-
/** @param {MouseEvent} e */
26-
function copy(e) {
27-
let $el = document.createElement("input")
28-
let $lbl = e.target.parentElement.querySelector('label')
29-
$el.setAttribute("value", $lbl.innerText)
30-
document.body.appendChild($el)
31-
$el.select()
32-
document.execCommand("copy")
33-
document.body.removeChild($el)
34-
if (typeof window.getSelection == "function") {
35-
const range = document.createRange()
36-
range.selectNodeContents($lbl)
37-
map(window.getSelection(), sel => {
38-
sel.removeAllRanges()
39-
sel.addRange(range)
40-
})
46+
const copied = ref(false)
47+
const commandRef = ref(null)
48+
49+
async function copy(e) {
50+
e.preventDefault()
51+
52+
// Get the text content from the command element
53+
const textToCopy = commandRef.value?.textContent?.trim() || ""
54+
55+
try {
56+
// Use modern Clipboard API
57+
await navigator.clipboard.writeText(textToCopy)
58+
59+
copied.value = true
60+
setTimeout(() => copied.value = false, 2000)
61+
} catch (err) {
62+
// Fallback for older browsers
63+
const $el = document.createElement("textarea")
64+
$el.value = textToCopy
65+
$el.style.position = "fixed"
66+
$el.style.opacity = "0"
67+
document.body.appendChild($el)
68+
$el.select()
69+
document.execCommand("copy")
70+
document.body.removeChild($el)
71+
72+
copied.value = true
73+
setTimeout(() => copied.value = false, 2000)
4174
}
42-
successText.value = 'copied'
43-
setTimeout(() => successText.value = '', 3000)
4475
}
45-
return { successText, copy }
76+
77+
return { copied, commandRef, copy }
4678
}
4779
}

‎MyApp/wwwroot/mjs/docs.mjs‎

Lines changed: 67 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ if (active && !isInView(active)) {
3737
(active.parentElement.previousElementSibling || active.parentElement.parentElement || active).scrollIntoView()
3838
}
3939

40-
/* used in :::copy and :::sh CopyContainerRenderer */
40+
/* used in :::copy */
4141
globalThis.copy = function(e) {
4242
e.classList.add('copying')
4343
let $el = document.createElement("textarea")
@@ -48,4 +48,69 @@ globalThis.copy = function(e) {
4848
document.execCommand("copy")
4949
document.body.removeChild($el)
5050
setTimeout(() => e.classList.remove('copying'), 3000)
51-
}
51+
}
52+
53+
/* used in :::sh CopyContainerRenderer */
54+
globalThis.shellCopy = async function(e) {
55+
// Get the text content from the code element
56+
const codeEl = e.querySelector('code')
57+
const textToCopy = codeEl?.textContent?.trim() || ""
58+
59+
// Find the button element and icons
60+
const btn = e.querySelector('.shell-copy-btn')
61+
if (!btn) return
62+
63+
const copiedIcon = btn.querySelector('.copied')
64+
const nocopyIcon = btn.querySelector('.nocopy')
65+
66+
try {
67+
// Use modern Clipboard API
68+
await navigator.clipboard.writeText(textToCopy)
69+
70+
// Show checkmark, hide copy icon
71+
if (copiedIcon) copiedIcon.style.display = 'block'
72+
if (nocopyIcon) nocopyIcon.style.display = 'none'
73+
74+
// Add copied state to button
75+
btn.classList.remove('bg-white', 'dark:bg-slate-800', 'text-slate-700', 'dark:text-slate-300', 'border-slate-300', 'dark:border-slate-600', 'hover:bg-slate-50', 'dark:hover:bg-slate-700', 'hover:border-slate-400', 'dark:hover:border-slate-500')
76+
btn.classList.add('bg-green-100', 'dark:bg-green-900/30', 'text-green-700', 'dark:text-green-400', 'border-green-300', 'dark:border-green-700')
77+
78+
// Reset after 2 seconds
79+
setTimeout(() => {
80+
// Hide checkmark, show copy icon
81+
if (copiedIcon) copiedIcon.style.display = 'none'
82+
if (nocopyIcon) nocopyIcon.style.display = 'block'
83+
84+
btn.classList.remove('bg-green-100', 'dark:bg-green-900/30', 'text-green-700', 'dark:text-green-400', 'border-green-300', 'dark:border-green-700')
85+
btn.classList.add('bg-white', 'dark:bg-slate-800', 'text-slate-700', 'dark:text-slate-300', 'border-slate-300', 'dark:border-slate-600', 'hover:bg-slate-50', 'dark:hover:bg-slate-700', 'hover:border-slate-400', 'dark:hover:border-slate-500')
86+
}, 2000)
87+
} catch (err) {
88+
// Fallback for older browsers
89+
const $el = document.createElement("textarea")
90+
$el.value = textToCopy
91+
$el.style.position = "fixed"
92+
$el.style.opacity = "0"
93+
document.body.appendChild($el)
94+
$el.select()
95+
document.execCommand("copy")
96+
document.body.removeChild($el)
97+
98+
// Show checkmark, hide copy icon
99+
if (copiedIcon) copiedIcon.style.display = 'block'
100+
if (nocopyIcon) nocopyIcon.style.display = 'none'
101+
102+
// Add copied state to button
103+
btn.classList.remove('bg-white', 'dark:bg-slate-800', 'text-slate-700', 'dark:text-slate-300', 'border-slate-300', 'dark:border-slate-600', 'hover:bg-slate-50', 'dark:hover:bg-slate-700', 'hover:border-slate-400', 'dark:hover:border-slate-500')
104+
btn.classList.add('bg-green-100', 'dark:bg-green-900/30', 'text-green-700', 'dark:text-green-400', 'border-green-300', 'dark:border-green-700')
105+
106+
// Reset after 2 seconds
107+
setTimeout(() => {
108+
// Hide checkmark, show copy icon
109+
if (copiedIcon) copiedIcon.style.display = 'none'
110+
if (nocopyIcon) nocopyIcon.style.display = 'block'
111+
112+
btn.classList.remove('bg-green-100', 'dark:bg-green-900/30', 'text-green-700', 'dark:text-green-400', 'border-green-300', 'dark:border-green-700')
113+
btn.classList.add('bg-white', 'dark:bg-slate-800', 'text-slate-700', 'dark:text-slate-300', 'border-slate-300', 'dark:border-slate-600', 'hover:bg-slate-50', 'dark:hover:bg-slate-700', 'hover:border-slate-400', 'dark:hover:border-slate-500')
114+
}, 2000)
115+
}
116+
}

0 commit comments

Comments
 (0)