<commit_before><template>
  <nuxt-content :document="document" />
</template>

<script>
export default {
  props: ['document'],
};
</script>

<style lang="postcss" scoped>
* >>> {
  h1 {
    @apply text-4xl mb-8;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }

  h4 {
    @apply text-lg;
  }

  h1,
  h2,
  h3 {
    @apply font-display;
  }

  h2,
  h3,
  h4 {
    @apply font-semibold my-8 relative;
    transform: translateX(2ch);
    &::before {
      @apply absolute text-accent-800;
      margin-left: -2ch;
      content: '#';
    }

    @screen lg {
      transform: none;
    }
  }

  p + p {
    @apply mt-4;
  }

  ul {
    @apply px-8 my-4 list-disc;

    li + li {
      @apply mt-2;
    }
  }

  .features {
    ul {
      li {
        @apply relative flex items-center;
        &:before {
          @apply w-5 h-5 absolute rounded-full flex text-accent-900 bg-accent-100 items-center justify-center;
          content: '✓';
          left: -2rem;
        }
      }
    }
  }

  .nuxt-content-highlight {
    @apply my-4 text-sm;
  }

  blockquote {
    @apply py-4 rounded-r-lg pl-4 bg-black border-l-4 border-accent-800 italic my-8 text-lg;
  }

  pre[class*='language-'] {
    @apply rounded-lg my-4 block border border-gray-100;
  }

  *:not(pre) > code:not([class]) {
    @apply text-sm px-1 rounded bg-gray-100 border border-gray-200 text-gray-900;
  }

  details {
    @apply my-10 px-3;

    summary {
      @apply outline-none mb-8;
    }
  }

  ol {
    @apply list-decimal px-8;
  }

  p,
  li,
  td {
    a[href] {
      @apply text-accent-800;

      &:hover {
        @apply underline;
      }
    }
  }

  /*
    Theme by vue-next docs
    https://github.com/vuejs/docs-next/blob/master/src/.vuepress/theme/styles/code.styl
  */
  code .token.deleted {
    color: #ec5975;
  }
  code .token.inserted {
    color: #f00;
  }
  pre,
  pre[class*='language-'] {
    line-height: 1.4;
    padding: 1.25rem 1.5rem;
    margin: 0.85rem 0;
    background-color: #f6f6f6;
    border-radius: 6px;
    overflow: auto;
    position: relative;
  }
  pre code,
  pre[class*='language-'] code {
    color: #3a385d;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }
  div[class*='language-'] {
    position: relative;
    background-color: #f6f6f6;
    border-radius: 6px;
  }
  div[class*='language-'] .highlight-lines {
    background-color: #f6f6f6;
    color: #3a385d;
    user-select: none;
    padding-top: 1.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 1.4;
  }
  div[class*='language-'] .highlight-lines .highlighted {
    background-color: #f8ec06;
  }
  div[class*='language-'] pre,
  div[class*='language-'] pre[class*='language-'] {
    background: transparent;
    position: relative;
    z-index: 1;
  }

  *[class*='language-']::before {
    position: absolute;
    z-index: 3;
    top: 0.8em;
    right: 1em;
    font-size: 0.75rem;
    color: #00000c;
  }

  div[class*='language-']:not(.line-numbers-mode) .line-numbers-wrapper {
    display: none;
  }
  div[class*='language-'].line-numbers-mode .highlight-lines .highlighted {
    position: relative;
  }
  div[class*='language-'].line-numbers-mode .highlight-lines .highlighted:before {
    content: ' ';
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    display: block;
    width: $lineNumbersWrapperWidth;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
  }
  div[class*='language-'].line-numbers-mode pre {
    padding-left: 1rem;
    vertical-align: middle;
  }
  div[class*='language-'].line-numbers-mode .line-numbers-wrapper {<commit_msg>feat: style diffs<commit_after><template>
  <nuxt-content :document="document" />
</template>

<script>
export default {
  props: ['document'],
};
</script>

<style lang="postcss" scoped>
* >>> {
  h1 {
    @apply text-4xl mb-8;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }

  h4 {
    @apply text-lg;
  }

  h1,
  h2,
  h3 {
    @apply font-display;
  }

  h2,
  h3,
  h4 {
    @apply font-semibold my-8 relative;
    transform: translateX(2ch);
    &::before {
      @apply absolute text-accent-800;
      margin-left: -2ch;
      content: '#';
    }

    @screen lg {
      transform: none;
    }
  }

  p + p {
    @apply mt-4;
  }

  ul {
    @apply px-8 my-4 list-disc;

    li + li {
      @apply mt-2;
    }
  }

  .features {
    ul {
      li {
        @apply relative flex items-center;
        &:before {
          @apply w-5 h-5 absolute rounded-full flex text-accent-900 bg-accent-100 items-center justify-center;
          content: '✓';
          left: -2rem;
        }
      }
    }
  }

  .nuxt-content-highlight {
    @apply my-4 text-sm;
  }

  blockquote {
    @apply py-4 rounded-r-lg pl-4 bg-black border-l-4 border-accent-800 italic my-8 text-lg;
  }

  pre[class*='language-'] {
    @apply rounded-lg my-4 block border border-gray-100;
  }

  *:not(pre) > code:not([class]) {
    @apply text-sm px-1 rounded bg-gray-100 border border-gray-200 text-gray-900;
  }

  details {
    @apply my-10 px-3;

    summary {
      @apply outline-none mb-8;
    }
  }

  ol {
    @apply list-decimal px-8;
  }

  p,
  li,
  td {
    a[href] {
      @apply text-accent-800;

      &:hover {
        @apply underline;
      }
    }
  }

  /*
    Theme by vue-next docs
    https://github.com/vuejs/docs-next/blob/master/src/.vuepress/theme/styles/code.styl
  */
  code .token.deleted {
    color: #ec5975;
  }
  code .token.inserted {
    color: #0a7a34;
  }

  pre,
  pre[class*='language-'] {
    line-height: 1.4;
    padding: 1.25rem 1.5rem;
    margin: 0.85rem 0;
    background-color: #f6f6f6;
    border-radius: 6px;
    overflow: auto;
    position: relative;
  }
  pre code,
  pre[class*='language-'] code {
    color: #3a385d;
    padding: 0;
    background-color: transparent;
    border-radius: 0;
  }
  div[class*='language-'] {
    position: relative;
    background-color: #f6f6f6;
    border-radius: 6px;
  }
  div[class*='language-'] .highlight-lines {
    background-color: #f6f6f6;
    color: #3a385d;
    user-select: none;
    padding-top: 1.3rem;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    line-height: 1.4;
  }
  div[class*='language-'] .highlight-lines .highlighted {
    background-color: #f8ec06;
  }
  div[class*='language-'] pre,
  div[class*='language-'] pre[class*='language-'] {
    background: transparent;
    position: relative;
    z-index: 1;
  }

  *[class*='language-']::before {
    position: absolute;
    z-index: 3;
    top: 0.8em;
    right: 1em;
    font-size: 0.75rem;
    color: #00000c;
  }

  div[class*='language-']:not(.line-numbers-mode) .line-numbers-wrapper {
    display: none;
  }
  div[class*='language-'].line-numbers-mode .highlight-lines .highlighted {
    position: relative;
  }
  div[class*='language-'].line-numbers-mode .highlight-lines .highlighted:before {
    content: ' ';
    position: absolute;
    z-index: 3;
    left: 0;
    top: 0;
    display: block;
    width: 1rem;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.95);
  }
  div[class*='language-'].line-numbers-mode pre {
    padding-left: 1rem;
    vertical-align: middle;
  }
  div[class*='language-'].line-numbers-mode .line-numbers-wrapper {
{'fraction_non_alphanumeric': 0.16068984396386532, 'fraction_numerical': 0.03983027648508076, 'mean_word_length': 2.207638279192274, 'pattern_counts': {'":': 0, '<': 15, '<?xml version=': 0, '>': 23, 'https://': 2, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1358709', 'n_tokens_mistral': 3032, 'n_tokens_neox': 2808, 'n_words': 556}