Skip to content

Commit cfc8ddf

Browse files
mythzmythz
committed
Upgrade :::sh and ShellCommand
1 parent f771621 commit cfc8ddf

File tree

2 files changed

+125
-8
lines changed

2 files changed

+125
-8
lines changed

‎MyApp/MarkdownPagesBase.cs‎

Lines changed: 59 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -533,6 +533,64 @@ protected override void Write(HtmlRenderer renderer, CustomContainer obj)
533533
}
534534
}
535535

536+
public class ShellContainerRenderer : HtmlObjectRenderer<CustomContainer>
537+
{
538+
public string Class { get; set; } = "mb-4";
539+
540+
protected override void Write(HtmlRenderer renderer, CustomContainer obj)
541+
{
542+
renderer.EnsureLine();
543+
if (renderer.EnableHtmlForBlock)
544+
{
545+
var attrs = obj.TryGetAttributes();
546+
if (attrs != null)
547+
{
548+
attrs.Classes ??= new();
549+
if (attrs.Classes.IsEmpty() || (attrs.Classes.Count == 1 && attrs.Classes[0] == "sh"))
550+
{
551+
attrs.Classes.Add(Class);
552+
}
553+
}
554+
555+
renderer
556+
.Write("<div")
557+
.WriteAttributes(attrs)
558+
.Write(">");
559+
560+
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)"">
561+
<!-- Background pattern -->
562+
<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>
563+
564+
<div class=""relative flex items-center justify-between px-4 py-3"">
565+
<!-- Left side - Terminal icon and command -->
566+
<div class=""flex items-center gap-3 flex-1 min-w-0"">
567+
<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>
568+
<div class=""flex items-center gap-2 min-w-0 flex-1"">
569+
<code class=""text-sm font-mono text-slate-900 dark:text-slate-100 truncate"">");
570+
}
571+
572+
// We don't escape a CustomContainer
573+
renderer.WriteChildren(obj);
574+
if (renderer.EnableHtmlForBlock)
575+
{
576+
renderer.WriteLine(@"</code>
577+
</div>
578+
</div>
579+
580+
<!-- Right side - Copy button -->
581+
<div class=""flex items-center gap-2 ml-4"">
582+
<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"">
583+
<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>
584+
<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>
585+
</button>
586+
</div>
587+
</div>
588+
</div>");
589+
renderer.WriteLine("</div>");
590+
}
591+
}
592+
}
593+
536594
public class CustomInfoRenderer : HtmlObjectRenderer<CustomContainer>
537595
{
538596
public string Title { get; set; } = "TIP";
@@ -780,13 +838,7 @@ public void AddBuiltInContainers(string[]? exclude = null)
780838
Class = "not-prose copy cp",
781839
IconClass = "bg-sky-500",
782840
},
783-
["sh"] = new CopyContainerRenderer
784-
{
785-
Class = "not-prose sh-copy cp",
786-
BoxClass = "bg-gray-800",
787-
IconClass = "bg-green-600",
788-
TextClass = "whitespace-pre text-base text-gray-100",
789-
},
841+
["sh"] = new ShellContainerRenderer(),
790842
["tip"] = new CustomInfoRenderer(),
791843
["info"] = new CustomInfoRenderer
792844
{

‎MyApp/wwwroot/mjs/docs.mjs‎

Lines changed: 66 additions & 1 deletion
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")
@@ -49,3 +49,68 @@ globalThis.copy = function(e) {
4949
document.body.removeChild($el)
5050
setTimeout(() => e.classList.remove('copying'), 3000)
5151
}
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)