render-codeblock.html

<div data-pagefind-ignore class="scroll-mt-20" x-data x-ref="root">
  {{ with .Attributes.title }}
  <div class="text-sm -mb-3 text-gray-light dark:text-gray-dark">{{ . }}</div>
  {{ end }}
  <div class="group relative">
    <button x-data="{ code: '{{encoding.Base64Encode .Inner}}', copying: false }"
      class="absolute right-3 top-3 z-10 text-gray-light-300 dark:text-gray-dark-600" title="copy" @click="window.navigator.clipboard.writeText(atob(code).replaceAll(/^[\$>]\s+/gm, ''));
      copying = true;
      setTimeout(() => copying = false, 2000);">
      <span :class="{ 'group-hover:block' : !copying }" class="icon-svg hidden">{{ partialCached "icon" "content_copy" "content_copy" }}</span>
      <span :class="{ 'group-hover:block' : copying }" class="icon-svg hidden">{{ partialCached "icon" "check_circle" "check_circle" }}</span>
    </button>
    {{ $lang := .Type | default "text" }} {{ $result := transform.Highlight .Inner
    $lang .Options }}
    <div class="syntax-light dark:syntax-dark">
      {{ with .Attributes.collapse }}
      <div x-data="{ collapse: true }" class="relative overflow-clip"
        x-init="$watch('collapse', value => $refs.root.scrollIntoView({ behavior: 'smooth'}))">
        <div x-show="collapse"
          class="to-transparent absolute z-10 flex h-32 w-full flex-col-reverse items-center overflow-clip bg-gradient-to-t from-background-light to-75% bg-cover pb-4 dark:from-background-dark">
          <button @click="collapse = false"
            class="flex items-center rounded-full bg-blue-light px-2 text-sm text-white dark:bg-blue-dark-400">
            <span>Show more</span>
            <span class="icon-svg">{{ partialCached "icon" "arrow_drop_down" "arrow_drop_down" }}</span>
          </button>
        </div>
        <div :class="{ 'h-32': collapse }">
          {{ $result }}
          <button @click="collapse = true" x-show="!collapse"
            class="mx-auto -mt-4 flex items-center rounded-b-lg bg-blue-light px-2 text-sm text-white dark:bg-blue-dark-400">
            <span>Hide</span>
            <span class="icon-svg">{{ partialCached "icon" "arrow_drop_up" "arrow_drop_up" }}</span>
          </button>
        </div>
      </div>
      {{ else }}
        {{ $result }}
      {{ end }}
    </div>
  </div>
</div>