Finish (?) code snippets, add to do regarding blockquote author

This commit is contained in:
2025-08-15 12:01:31 +09:30
parent ee5da382c9
commit e97c58a7a1
3 changed files with 35 additions and 26 deletions

View File

@@ -1,3 +1,7 @@
---
// TODO: Handle author, etc., via inclusion of some sort of tag in the quote, either frontmatter tags or simply [author=Person Name]
---
<div class="flex w-full items-center">
<blockquote
class="border-primary mx-auto my-8 max-w-xl border-l-6 py-2 pl-4 italic"

View File

@@ -17,10 +17,18 @@ if (dataMeta) {
}
const languageIcons: Record<string, string> = {
javascript: "mdi:language-javascript"
javascript: "mdi:language-javascript",
typescript: "mdi:language-typescript",
csharp: "mdi:language-csharp",
css: "mdi:language-css3",
html: "mdi:language-html5",
bash: "mdi:bash",
astro: "simple-icons:astro"
};
const languageIcon = languageIcons[props["data-language"]];
const language = props["data-language"];
const languageIcon = languageIcons[language];
const title = meta.title;
@@ -28,31 +36,29 @@ 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-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 class="font-bold" id=`copy-${copyID}`>
Copy <Icon name="mdi:content-copy" class="ml-0.5 inline-block" />
</button>
</div>
<figcaption>
<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} />}
{
!languageIcon && language !== "plaintext" && (
<p class="uppercase">{language}</p>
)
}
{title && <p>{title}</p>}
</div>
</figcaption>
)
}
<button class="font-bold" id=`copy-${copyID}`>
Copy <Icon name="mdi:content-copy" class="ml-0.5 inline-block" />
</button>
</div>
</div>
</figcaption>
<pre
class:list={[
"border-x border-b border-gray-600",
"rounded-b",
!title ? "rounded-t border-t" : "",
className
]}
class:list={["border-x border-b border-gray-600", "rounded-b", className]}
{...props}><slot /></pre>
</figure>

View File

@@ -96,7 +96,6 @@
@apply inline-block;
@apply w-full;
@apply pr-8;
@apply first:pt-2 last:pb-2;
@apply bg-white dark:bg-gray-100;
}
@@ -105,7 +104,7 @@
counter-increment: step;
@apply w-10;
@apply mr-5 ml-auto pr-2;
@apply mr-2 ml-auto pt-1 pr-2 pb-1;
@apply inline-block;
@apply text-right;