obsidian-visualiser/components/prose/ProseBlockquote.vue

<template>
  <blockquote ref="el">
    <slot />
  </blockquote>
</template>

<script setup lang="ts">
const attrs = useAttrs(), el = ref<HTMLQuoteElement>(), title = ref<Element | null>(null);

onMounted(() => {
  if(el && el.value && attrs.hasOwnProperty("dataCalloutFold"))
  {
    title.value = el.value.querySelector('.callout-title');
    title.value?.addEventListener('click', toggle);
  }
});
onUnmounted(() => {
  title.value?.removeEventListener('click', toggle);
})
function toggle() {
  el.value?.classList?.toggle('is-collapsed');
}
</script>

<style>
blockquote:not(.callout)
{
  @apply ps-4;
  @apply my-4;
  @apply relative;
  @apply before:absolute;
  @apply before:-top-1;
  @apply before:-bottom-1;
  @apply before:left-0;
  @apply before:w-1;
  @apply before:bg-light-30;
  @apply dark:before:bg-dark-30;
}
blockquote:empty
{
  @apply before:hidden;
}
.callout {
  @apply bg-light-blue;
  @apply dark:bg-dark-blue;
}
.callout.is-collapsible .callout-title
{
  @apply cursor-pointer;
}
.callout .fold
{
  @apply transition-transform;
}
.callout.is-collapsed .fold
{
  @apply -rotate-90;
}
.callout.is-collapsed > p
{
  @apply hidden;
}
.callout[datacallout="abstract"],
.callout[datacallout="summary"],
.callout[datacallout="tldr"] {
  @apply bg-light-cyan;
  @apply dark:bg-dark-cyan;
  @apply text-light-cyan;
  @apply dark:text-dark-cyan;
}
.callout[datacallout="info"] {
  @apply bg-light-blue;
  @apply dark:bg-dark-blue;
  @apply text-light-blue;
  @apply dark:text-dark-blue;
}
.callout[datacallout="todo"] {
  @apply bg-light-blue;
  @apply dark:bg-dark-blue;
  @apply text-light-blue;
  @apply dark:text-dark-blue;
}
.callout[datacallout="important"] {
  @apply bg-light-cyan;
  @apply dark:bg-dark-cyan;
  @apply text-light-cyan;
  @apply dark:text-dark-cyan;
}
.callout[datacallout="tip"],
.callout[datacallout="hint"] {
  @apply bg-light-cyan;
  @apply dark:bg-dark-cyan;
  @apply text-light-cyan;
  @apply dark:text-dark-cyan;
}
.callout[datacallout="success"],
.callout[datacallout="check"],
.callout[datacallout="done"] {
  @apply bg-light-green;
  @apply dark:bg-dark-green;
  @apply text-light-green;
  @apply dark:text-dark-green;
}
.callout[datacallout="question"],
.callout[datacallout="help"],
.callout[datacallout="faq"] {
  @apply bg-light-orange;
  @apply dark:bg-dark-orange;
  @apply text-light-orange;
  @apply dark:text-dark-orange;
}
.callout[datacallout="warning"],
.callout[datacallout="caution"],
.callout[datacallout="attention"] {
  @apply bg-light-orange;
  @apply dark:bg-dark-orange;
  @apply text-light-orange;
  @apply dark:text-dark-orange;
}
.callout[datacallout="failure"],
.callout[datacallout="fail"],
.callout[datacallout="missing"] {
  @apply bg-light-red;
  @apply dark:bg-dark-red;
  @apply text-light-red;
  @apply dark:text-dark-red;
}
.callout[datacallout="danger"],
.callout[datacallout="error"] {
  @apply bg-light-red;
  @apply dark:bg-dark-red;
  @apply text-light-red;
  @apply dark:text-dark-red;
}
.callout[datacallout="bug"] {
  @apply bg-light-red;
  @apply dark:bg-dark-red;
  @apply text-light-red;
  @apply dark:text-dark-red;
}
.callout[datacallout="example"] {
  @apply bg-light-purple;
  @apply dark:bg-dark-purple;
  @apply text-light-purple;
  @apply dark:text-dark-purple;
}

.callout
{
  @apply overflow-hidden;
  @apply my-4;
  @apply p-3;
  @apply ps-6;
  @apply bg-blend-lighten;
  @apply !bg-opacity-25;
  @apply border-l-4;
  @apply inline-block;
  @apply pe-8;
}
.callout-icon
{
  @apply w-6;
  @apply h-6;
  @apply stroke-2;
}
.callout-title
{
  @apply flex;
  @apply items-center;
  @apply gap-2;
}
.callout-title-inner
{
  @apply inline-block;
  @apply font-bold;
}
.callout > p
{
  @apply mt-2;
  @apply font-semibold;
}
</style>