Merge pull request #822 from centrapay/code-panel

✨ Add Code Panel

astro.config.mjs

@@ -24,7 +24,7 @@ export default defineConfig({
     shikiConfig: {
       // Choose from Shiki's built-in themes (or add your own)
       // https://github.com/shikijs/shiki/blob/main/docs/themes.md
-      theme: 'github-light',
+      theme: 'material-theme-darker',
       // Add custom languages
       // Note: Shiki has countless langs built-in, including .astro!
       // https://github.com/shikijs/shiki/blob/main/docs/languages.md

src/assets/css/components/index.css

@@ -1,4 +1,3 @@
 @import "./buttons";
 @import "./cards";
-@import "./code";
 @import "./icons";

src/components/Badge.astro

@@ -1,6 +1,6 @@
 ---
 
-const { type = "default", text, link } = Astro.props;
+const { type = "default", text, link, inverse = false } = Astro.props;
 const badgeText = text ? text : type;
 
 const coloursMap = {
@@ -13,7 +13,17 @@ const coloursMap = {
   default: 'text-content-primary border-outline-opaque bg-surface-tertiary'
 }
 
-const badgeClass =`${coloursMap[type]} type-caption-2 px-2 py-0.5 rounded-full border self-center`
+const inverseColoursMap = {
+  experimental: 'bg-surface-accent-light text-content-accent border-outline-opaque',
+  GET: 'border-green-500 bg-green-800 text-content-inverse-primary',
+  POST: 'border-cyan-500 bg-cyan-800 text-content-inverse-primary',
+  PUT: 'border-orange-500 bg-orange-800 text-content-inverse-primary',
+  DELETE: 'border-red-500 bg-rose-800 text-content-inverse-primary',
+  default: 'text-content-primary border-outline-opaque bg-surface-tertiary'
+}
+
+const map = inverse ? inverseColoursMap : coloursMap;
+const badgeClass =`${map[type]} type-caption-2 px-2 py-0.5 rounded-full border self-center`
 
 ---
 {link ?

src/components/CodePanel.astro

@@ -0,0 +1,75 @@
+---
+const { title = 'Example', method, path } = Astro.props;
+import Badge from "./Badge.astro";
+---
+
+<div
+  data-code-block
+  class="flex flex-col mb-8"
+>
+  <div class="flex w-full rounded-t-3xl rounded-b-none border-b border-outline-inverse-opaque bg-surface-inverse-secondary shadow-sm p-4">
+    <span class="truncate type-subtitle-2 text-sm text-content-inverse-primary">
+      { title }
+    </span>
+  </div>
+  { (method && path) &&
+    <div class="flex flex-row items-center border-b border-outline-inverse-opaque bg-surface-inverse-tertiary p-squish-2 space-x-2">
+      <Badge
+        type={method}
+        inverse
+      />
+      <span class="text-content-inverse-primary type-caption-2 truncate">{ path }</span>
+    </div>
+  }
+  <div
+    data-code
+    class="max-h-96 overflow-y-auto"
+  >
+    <slot />
+  </div>
+  <div class="flex justify-end py-2 px-4 bg-surface-inverse-primary rounded-b-3xl border-t border-outline-inverse-opaque">
+    <button
+      id="copy-button"
+      data-copy-button
+      class="type-overline py-2 px-3 bg-interactive-secondary hover:bg-interactive-secondary-hover text-content-inverse-primary transition hover:scale-105 active:scale-100 active:transition-none"
+    >
+      Copy
+    </button>
+  </div>
+</div>
+
+<script>
+  function getElement(
+    selector,
+    Constructor,
+    parent: ParentNode = document,
+  ) {
+    const element = parent.querySelector(selector);
+    if (!(element instanceof Constructor)) {
+      throw new Error(`Element is not of type ${Constructor.name}: ${selector}`);
+    }
+    return element;
+  }
+
+  for (const codeBlock of document.querySelectorAll('[data-code-block]')) {
+    const code = getElement('[data-code]', HTMLElement, codeBlock);
+    const button = getElement('[data-copy-button]', HTMLButtonElement, codeBlock);
+    button.addEventListener('click', () => {
+      navigator.clipboard.writeText(code.innerText);
+      button.innerText = "Copied";
+      button.classList.add('copy-button-active');
+      window.setTimeout(() => {
+        button.innerText = "Copy";
+        button.classList.remove('copy-button-active');
+      }, 2000);
+    });
+  }
+</script>
+
+<style>
+  .copy-button-active {
+    @apply
+      bg-interactive-secondary-active
+    ;
+  }
+</style>

src/components/H2.astro

@@ -5,7 +5,7 @@ const { id } = Astro.props;
 <div class="not-prose">
   <h2
     id={id}
-    class="scroll-mt-32 mt-4 type-headline-4 flex flex-wrap gap-1"
+    class="scroll-mt-32 my-4 type-headline-4 flex flex-wrap gap-1"
   >
     <slot/>
   </h2>

src/components/H3.astro

@@ -5,7 +5,7 @@ const { id } = Astro.props;
 <div class="not-prose">
   <h3
     id={id}
-    class="scroll-mt-20 type-subtitle-1 mt-4"
+    class="scroll-mt-20 type-subtitle-1 my-4"
   >
     <slot/>
 </h3>

src/components/ProseBlockquote.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="not-prose flex p-5 space-x-5 bg-surface-secondary rounded-lg">
+  <div class="not-prose my-5 flex p-5 space-x-5 bg-surface-secondary rounded-lg">
     <InformationCircle class="icon-md text-content-secondary w-6 h-6" />
     <blockquote class="text-content-tertiary m-0 text-sm leading-5 font-normal flex-1">
       <slot />

src/components/ProseCode.astro

@@ -1,7 +1,9 @@
 ---
-import ProseCode from "./ProseCode.vue";
+const { class: className, ...rest } = Astro.props;
 ---
 
-<ProseCode client:load>
-  <slot />
-</ProseCode>
+<div class={className} {...rest}>
+  <pre id="code" class="flex text-sm py-3 px-4">
+    <slot />
+  </pre>
+</div>