CodeBlock.astro

---
import * as shiki from "shiki";
import { JSDOM } from "jsdom";

import { Code } from "astro:components";
import Tooltip from "../common/Tooltip.astro";
import Icon from "../common/Icon.astro";

import { faCheck, faCopy } from "@fortawesome/free-solid-svg-icons";

export interface Props {
  lang?: shiki.BundledLanguage | shiki.PlainTextLanguage;
  code?: string;
}

// ID of language as reported by Shiki
const language = Astro.props.lang ?? "plaintext";
let displayName: string | undefined;

if (language && !shiki.isPlainLang(language)) {
  const langImport = await shiki.bundledLanguages[language]();
  const langRegistration = langImport.default.find(
    (l) => l.name === language || l.aliases?.includes(language),
  );
  displayName = langRegistration?.displayName;
}

let code = Astro.props.code ?? "";

// Code has been provided in a slot in a pre tag, we will need to extract the code from it
if (Astro.slots.has("default")) {
  const dom = new JSDOM(await Astro.slots.render("default"));
  code = dom.window.document.querySelector("pre")?.textContent ?? "";
}
---

<div class="code-block" data-language={language}>
  {displayName && <span class="language">{displayName}</span>}
  <button class="copy">
    <Tooltip content="Copy to Clipboard">
      <Icon icon={faCopy} />
      <Icon icon={faCheck} />
    </Tooltip>
  </button>
  <Code code={code} lang={language} />
</div>

<script>
  const copyButtons = document.querySelectorAll("div.code-block button.copy");

  for (const button of copyButtons) {
    button.addEventListener("click", async () => {
      const codeElement = button.parentElement?.querySelector("pre > code");
      const code = codeElement?.textContent;

      if (!code) {
        throw new Error("Failed to copy code to clipboard!");
      }

      try {
        await navigator.clipboard.writeText(code);
        button.classList.add("success");
        setTimeout(() => button.classList.remove("success"), 1000);
      } catch (e) {
        console.error(e);
      }
    });
  }
</script>

<style lang="scss">
  div.code-block {
    position: relative;
    margin: 0.5em auto;
    text-align: left;
    max-height: inherit;
    border-radius: 0.5em;
    overflow: hidden;

    span.language,
    button.copy {
      background-color: #ffffff0e;
      color: white;
    }

    span.language {
      font-size: 0.8em;
      position: absolute;
      top: 0px;
      left: 0px;
      padding: 0px 0.5em;
      border-radius: 0.3em 0px 0.3em 0px;
    }

    button.copy {
      font-size: 1.2em;
      border: none;
      border-radius: 0.3em;
      position: absolute;
      top: 0.3em;
      right: 0.3em;
      width: 1.5em;
      height: 1.5em;
      text-align: center;
      opacity: 0;
      transition: opacity ease-in-out 0.3s;

      :global(.icon.fa-check) {
        display: none;
      }

      &.success {
        :global(.icon.fa-copy) {
          display: none;
        }
        :global(.icon.fa-check) {
          display: block;
        }
      }
    }

    &:hover {
      button.copy {
        opacity: 1;
      }
    }

    &[data-language="plaintext"] pre {
      padding: 0.5em 0.5em;
    }

    :global(pre) {
      max-height: inherit;
      font-family: var(--font-source-code-pro);
      tab-size: 4;
      padding: 1.3em 0.5em 0.5em 0.5em;
      overflow: auto;
      background-color: #0d1117 !important;
    }
  }
</style>