<commit_before><template>
  <div class="hidden xl:block xl:col-span-2 mt-16">
    <nav
      v-if="toc.length"
      class="fixed w-sidebar top-16 bottom-0 right-0 pl-4 pr-8 pb-8 overflow-y-auto space-y-4 hide-scroll"
    >
      <h3 class="toc-heading">ON THIS PAGE</h3>
      <scrollactive
        :scroll-on-start="false"
        highlight-first-item
        active-class="scrollactive-item-active"
        :offset="100"
        tag="ul"
      >
        <li
          v-for="link of toc"
          :key="link.id"
          class="text-gray-500 dark:text-gray-300"
        >
          <a
            :href="`#${link.id}`"
            class="block text-sm scrollactive-item pl-1 transition-transform ease-in-out duration-300 transform hover:translate-x-1"
            :class="{
              'py-1': link.depth === 2,
              'ml-2 pb-2': link.depth === 3,
            }"
            >{{ link.text }}</a
          >
        </li>
      </scrollactive>
      <a href="#" class="text-blue text-sm"
        ><Icon name="long-arrow-alt-up" color="inherit" /> Back to Top</a
      >
    </nav>
  </div>
</template>

<script>
import Icon from './global/Icon'

export default {
  components: {
    Icon,
  },<commit_msg>style: indent subsections and add border (#3778)<commit_after><template>
  <div class="hidden xl:block xl:col-span-2 mt-16">
    <nav
      v-if="toc.length"
      class="fixed w-sidebar top-16 bottom-0 right-0 pl-4 pr-8 pb-8 overflow-y-auto space-y-4 hide-scroll"
    >
      <h3 class="toc-heading">ON THIS PAGE</h3>
      <scrollactive
        :scroll-on-start="false"
        highlight-first-item
        active-class="scrollactive-item-active"
        :offset="100"
        tag="ul"
      >
        <li
          v-for="(link, index) of toc"
          :key="link.id"
          class="text-gray-500 dark:text-gray-300"
          :class="{
            'pt-4':
              link.depth === 2 && index !== 0 && toc[index - 1].depth === 3,
            'pb-1': link.depth === 2,
          }"
        >
          <a
            :href="`#${link.id}`"
            class="block text-sm scrollactive-item pl-1 hover:text-green transition-colors"
            :class="{
              'py-1 pb-2 pl-2 font-bold': link.depth === 2,
              'ml-4 py-1 pl-2 border-l-2 border-gray-200': link.depth === 3,
            }"
            >{{ link.text }}</a
          >
        </li>
      </scrollactive>
      <a href="#" class="text-blue text-sm"
        ><Icon name="long-arrow-alt-up" color="inherit" /> Back to Top</a
      >
    </nav>
  </div>
</template>

<script>
import Icon from './global/Icon'

export default {
  components: {
    Icon,
  },
{'fraction_non_alphanumeric': 0.16935786706721742, 'fraction_numerical': 0.02929027412692452, 'mean_word_length': 1.7155963302752293, 'pattern_counts': {'":': 0, '<': 39, '<?xml version=': 0, '>': 39, 'https://': 0, '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': '4600980', 'n_tokens_mistral': 932, 'n_tokens_neox': 890, 'n_words': 184}