|
|
|
@@ -23,19 +23,23 @@ const languageIcons: Record<string, string> = {
|
|
|
|
|
const languageIcon = languageIcons[props["data-language"]];
|
|
|
|
|
|
|
|
|
|
const title = meta.title;
|
|
|
|
|
|
|
|
|
|
const copyID = Math.random().toString(36);
|
|
|
|
|
---
|
|
|
|
|
|
|
|
|
|
<figure class="my-4 rounded-b">
|
|
|
|
|
{
|
|
|
|
|
title && (
|
|
|
|
|
<figcaption>
|
|
|
|
|
<div class="bg-primary w-full rounded-t-md border-1 border-black px-4 py-2 text-white">
|
|
|
|
|
<div class="bg-primary w-full rounded-t-md border-1 border-gray-600 px-4 py-2 text-white">
|
|
|
|
|
<div class="flex justify-between">
|
|
|
|
|
<div class="flex items-center justify-between gap-2 font-bold">
|
|
|
|
|
{languageIcon && <Icon name={languageIcon} />}
|
|
|
|
|
<p>{title}</p>
|
|
|
|
|
</div>
|
|
|
|
|
<button id="copy__code">Copy Code</button>
|
|
|
|
|
<button class="font-bold" id=`copy-${copyID}`>
|
|
|
|
|
Copy <Icon name="mdi:content-copy" class="ml-0.5 inline-block" />
|
|
|
|
|
</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</figcaption>
|
|
|
|
@@ -44,8 +48,7 @@ const title = meta.title;
|
|
|
|
|
|
|
|
|
|
<pre
|
|
|
|
|
class:list={[
|
|
|
|
|
"py-2",
|
|
|
|
|
"border-x border-b",
|
|
|
|
|
"border-x border-b border-gray-600",
|
|
|
|
|
"rounded-b",
|
|
|
|
|
!title ? "rounded-t border-t" : "",
|
|
|
|
|
className
|
|
|
|
@@ -53,59 +56,11 @@ const title = meta.title;
|
|
|
|
|
{...props}><slot /></pre>
|
|
|
|
|
</figure>
|
|
|
|
|
|
|
|
|
|
<style is:global>
|
|
|
|
|
.astro-code {
|
|
|
|
|
overflow-x: auto;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.astro-code code {
|
|
|
|
|
/* Define a counter for each <code> inside .astro-code */
|
|
|
|
|
counter-reset: step;
|
|
|
|
|
/* Start from zero, increment the counter */
|
|
|
|
|
counter-increment: step 0;
|
|
|
|
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
|
|
|
|
width: fit-content;
|
|
|
|
|
min-width: 100%;
|
|
|
|
|
display: block;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.astro-code code .line {
|
|
|
|
|
display: inline-block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
padding-right: 2rem;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.astro-code code .line::before {
|
|
|
|
|
content: counter(step);
|
|
|
|
|
counter-increment: step;
|
|
|
|
|
width: 2rem;
|
|
|
|
|
margin-right: 1.25rem;
|
|
|
|
|
display: inline-block;
|
|
|
|
|
margin-left: auto;
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
|
|
|
|
/* Fix element position during horizontal scroll */
|
|
|
|
|
position: sticky;
|
|
|
|
|
left: 0;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
|
|
|
|
|
/* Give a bit of space to counter on horizontal scroll */
|
|
|
|
|
padding-right: 0.25rem;
|
|
|
|
|
|
|
|
|
|
/* Illustrative purpose, please extract the value from the theme instead */
|
|
|
|
|
background-color: white;
|
|
|
|
|
color: hsla(0, 0%, 0%, 0.5);
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script define:vars={{ dataCode }}>
|
|
|
|
|
<script define:vars={{ dataCode, copyID }}>
|
|
|
|
|
if (typeof navigator.clipboard !== undefined) {
|
|
|
|
|
const trigger = document.querySelector("#copy__code");
|
|
|
|
|
const trigger = document.getElementById(`copy-${copyID}`);
|
|
|
|
|
|
|
|
|
|
trigger.addEventListener("click", () => {
|
|
|
|
|
// Write the code to clipboard
|
|
|
|
|
navigator.clipboard.writeText(dataCode);
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
