Content.astro

---
import { tw } from '@nrsk/tw'

export interface Props {
  content: string
  class?: string
}

const { content, class: className } = Astro.props

const proseClasses = tw`
  prose prose-vm dark:prose-invert
  prose-headings:font-semibold
  w-full max-w-none
`
---

<section set:html={content} class:list={[proseClasses, className]} />

<style>
  /** Horizontal divider. */

  .prose :global(hr) {
    @apply block w-3/4 mt-8 mx-auto border-t-2 border-solid border-gray-200;
  }

  /** Links. */

  .prose :global(a) {
    @apply inline leading-5 no-underline font-normal transition-colors
    text-black hover:text-crayola-500
    border-b border-dotted border-black hover:border-crayola-500;
  }

  :global(.dark .prose a) {
    @apply text-white hover:text-crayola-300
    border-white hover:border-crayola-300;
  }

  .prose :global(a:focus),
  .prose :global(a:hover) {
    @apply no-underline;
  }

  /** Headers. */

  .prose :global(:is(h1, h2, h3, h4, h5, h6):focus-visible) {
    @apply outline-none;
  }

  /** -- Headers & anchor links re-styling. */

  .prose :global(.header-anchor) {
    @apply border-none no-underline text-gray-300 opacity-100 transition-[color,opacity];
  }

  :global(.dark .prose .header-anchor) {
    @apply text-gray-500;
  }

  .prose :global(.header-anchor:is(:hover, :focus)) {
    @apply text-gray-900 opacity-100;
  }

  :global(.dark .prose .header-anchor:is(:hover, :focus)) {
    @apply text-gray-50 opacity-100;
  }

  @media screen and (min-width: 768px) {
    .prose :global(.header-anchor) {
      @apply opacity-0;
    }

    .prose :global(:is(h1, h2, h3, h4, h5, h5):hover .header-anchor) {
      @apply opacity-100;
    }
  }

  /** Blockquotes. */

  .prose :global(blockquote) {
    @apply font-normal not-italic border-l-4 border-l-gray-500/25;
  }

  .prose :global(blockquote > p:first-of-type) {
    @apply mt-0;
  }

  .prose :global(blockquote > p:last-of-type) {
    @apply mb-0;
  }

  :global(.dark .prose blockquote) {
    @apply border-l-gray-400/50;
  }

  /** Code highlighting. */

  /** -- General. */

  .prose :global(.shiki) {
    @apply relative rounded-none sm:rounded-lg -mx-8 sm:mx-0 my-4 sm:my-6 p-0;
  }

  .prose blockquote :global(.shiki) {
    @apply my-4;
  }

  .prose :global(.shiki code) {
    @apply flex flex-row whitespace-nowrap;
  }

  /** -- Line numbers. */

  .prose :global(.shiki .line-numbers) {
    @apply py-3 px-0 text-gray-200/30 text-right select-none;
  }

  .prose :global(.shiki .line-numbers .line-number) {
    @apply min-w-[1.5rem] px-4;
  }

  /** -- Lines. */

  .prose :global(.shiki .lines) {
    @apply grid w-full px-0 py-3 overflow-x-auto;
  }

  .prose :global(.shiki .line-numbers + .lines) {
    @apply px-0 py-3;
  }

  .prose :global(.shiki .lines .line) {
    @apply px-8 sm:px-4 whitespace-pre;
  }

  .prose :global(.shiki .line-numbers + .lines .line) {
    @apply pl-0 pr-4;
  }

  /** -- Highlight. */

  .prose :global(.shiki :where(.lines, .line-numbers) :where(.highlight-invert)) {
    @apply opacity-[0.35];
  }

  .prose
    :global(
      .shiki
        :where(.lines, .line-numbers)
        :where(.highlight, .highlight-start, .highlight-inner, .highlight-end)
    ) {
    @apply bg-nord-200 opacity-100 relative
      before:absolute before:content-['_'] before:left-0 before:h-full before:w-1
      before:bg-neutral-600;
  }

  .prose
    :global(
      .shiki
        :where(.line-numbers + .lines)
        :where(.highlight, .highlight-start, .highlight-inner, .highlight-end)
    ) {
    @apply before:content-none;
  }

  /** -- Language label. */

  .prose :global(.shiki .language-id) {
    @apply absolute right-0 sm:right-2 top-2 rounded-md z-10 opacity-0 transition-opacity
    select-none py-1 px-2 text-sm
    bg-nord-100 text-gray-300;
  }

  .prose :global(blockquote .shiki) {
    @apply rounded-lg;
  }

  .prose :global(blockquote .shiki .language-id) {
    @apply rounded-tl-lg rounded-tr-lg;
  }

  .prose :global(.shiki:hover .language-id) {
    @apply opacity-100;
  }
</style>