<commit_before><template>
  <nav class="nav-links" v-if="userLinks.length || repoLink">
    <!-- user links -->
    <div class="nav-item" v-for="item in userLinks" :key="item.link">
      <DropdownLink v-if="item.type === 'links'" :item="item" />
      <NavLink v-else :item="item" />
    </div>

    <!-- repo link -->
    <a v-if="repoLink" :href="repoLink" class="repo-link" target="_blank" rel="noopener noreferrer">
      {{ repoLabel }}
      <OutboundLink />
    </a>

    <div class="nav-item versions">
      <span>
        Version:
        <strong>3.x</strong>
      </span>
      <ul class="version-dropdown">
        <li class="is-active">
          <a href="https://logaretm.github.io/vee-validate/">v3.x</a>
        </li>
        <li>
          <a href="http://vee-validate.logaretm.com/v2">v2.x</a>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
import DropdownLink from '@theme/components/DropdownLink.vue';
import { resolveNavLinkItem } from '@parent-theme/util';
import NavLink from '@theme/components/NavLink.vue';

export default {
  components: { NavLink, DropdownLink },

  computed: {
    userNav() {
      return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || [];
    },

    nav() {
      const { locales } = this.$site;
      if (locales && Object.keys(locales).length > 1) {
        const currentLink = this.$page.path;
        const routes = this.$router.options.routes;
        const themeLocales = this.$site.themeConfig.locales || {};
        const languageDropdown = {
          text: this.$themeLocaleConfig.selectText || 'Languages',
          items: Object.keys(locales).map(path => {
            const locale = locales[path];
            const text = (themeLocales[path] && themeLocales[path].label) || locale.lang;
            let link;
            // Stay on the current page
            if (locale.lang === this.$lang) {
              link = currentLink;
            } else {
              // Try to stay on the same page
              link = currentLink.replace(this.$localeConfig.path, path);
              // fallback to homepage
              if (!routes.some(route => route.path === link)) {
                link = path;
              }
            }
            return { text, link };
          })
        };
        return [...this.userNav, languageDropdown];
      }
      return this.userNav;
    },

    userLinks() {
      return (this.nav || []).map(link => {
        return Object.assign(resolveNavLinkItem(link), {
          items: (link.items || []).map(resolveNavLinkItem)
        });
      });
    },

    repoLink() {
      const { repo } = this.$site.themeConfig;
      if (repo) {
        return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`;
      }
    },

    repoLabel() {
      if (!this.repoLink) return;
      if (this.$site.themeConfig.repoLabel) {
        return this.$site.themeConfig.repoLabel;
      }

      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0];
      const platforms = ['GitHub', 'GitLab', 'Bitbucket'];
      for (let i = 0; i < platforms.length; i++) {
        const platform = platforms[i];
        if (new RegExp(platform, 'i').test(repoHost)) {
          return platform;
        }
      }

      return 'Source';
    }
  }
};
</script>

<style lang="stylus">
.nav-links
  display: inline-block

  a
    line-height: 1.4rem
    color: inherit

    &:hover, &.router-link-active
      color: $accentColor

  .nav-item
    position: relative
    display: inline-block
    margin-left: 1.5rem
    line-height: 2rem

    &:first-child
      margin-left: 0

  .repo-link
    margin-left: 1.5rem

.version-dropdown
  list-style: none
  margin: 0
  position: absolute
  display: none
  width: 100%
  padding: 0
  background: #fff
  border: 1px solid #eaecef

  li
    padding: 5px
    text-align: center

    &:hover
      background: #eaecef

    a
      width: 100%

.versions
  min-width: 50px

  span
    background: #3eaf7c
    border-radius: 6px
    padding: 5px 10px
    width: 100%
    display: flex
    justify-content: center
    align-items: center
    text-align: center
    color: #fff

  &:hover
    .version-dropdown
      display: block

@media (max-width: $MQMobile)
  .nav-links
    .nav-item, .repo-link
      margin-left: 0

@media (min-width: $MQMobile)
  .nav-links a
    &:hover, &.router-link-active
      color: $textColor

  .nav-item > a:not(.external)
    &:hover, &.router-link-active
      margin-bottom: -2px
      border-bottom: 2px solid lighten($accentColor, 8%)
</style><commit_msg>docs: minor style improvements<commit_after><template>
  <nav class="nav-links" v-if="userLinks.length || repoLink">
    <!-- user links -->
    <div class="nav-item" v-for="item in userLinks" :key="item.link">
      <DropdownLink v-if="item.type === 'links'" :item="item" />
      <NavLink v-else :item="item" />
    </div>

    <!-- repo link -->
    <a v-if="repoLink" :href="repoLink" class="repo-link" target="_blank" rel="noopener noreferrer">
      {{ repoLabel }}
      <OutboundLink />
    </a>

    <div class="nav-item versions">
      <span>
        Version:
        <strong>3.x</strong>
      </span>
      <ul class="version-dropdown">
        <li class="is-active">
          <a href="https://logaretm.github.io/vee-validate/">v3.x</a>
        </li>
        <li>
          <a href="http://vee-validate.logaretm.com/v2">v2.x</a>
        </li>
      </ul>
    </div>
  </nav>
</template>

<script>
import DropdownLink from '@theme/components/DropdownLink.vue';
import { resolveNavLinkItem } from '@parent-theme/util';
import NavLink from '@theme/components/NavLink.vue';

export default {
  components: { NavLink, DropdownLink },

  computed: {
    userNav() {
      return this.$themeLocaleConfig.nav || this.$site.themeConfig.nav || [];
    },

    nav() {
      const { locales } = this.$site;
      if (locales && Object.keys(locales).length > 1) {
        const currentLink = this.$page.path;
        const routes = this.$router.options.routes;
        const themeLocales = this.$site.themeConfig.locales || {};
        const languageDropdown = {
          text: this.$themeLocaleConfig.selectText || 'Languages',
          items: Object.keys(locales).map(path => {
            const locale = locales[path];
            const text = (themeLocales[path] && themeLocales[path].label) || locale.lang;
            let link;
            // Stay on the current page
            if (locale.lang === this.$lang) {
              link = currentLink;
            } else {
              // Try to stay on the same page
              link = currentLink.replace(this.$localeConfig.path, path);
              // fallback to homepage
              if (!routes.some(route => route.path === link)) {
                link = path;
              }
            }
            return { text, link };
          })
        };
        return [...this.userNav, languageDropdown];
      }
      return this.userNav;
    },

    userLinks() {
      return (this.nav || []).map(link => {
        return Object.assign(resolveNavLinkItem(link), {
          items: (link.items || []).map(resolveNavLinkItem)
        });
      });
    },

    repoLink() {
      const { repo } = this.$site.themeConfig;
      if (repo) {
        return /^https?:/.test(repo) ? repo : `https://github.com/${repo}`;
      }
    },

    repoLabel() {
      if (!this.repoLink) return;
      if (this.$site.themeConfig.repoLabel) {
        return this.$site.themeConfig.repoLabel;
      }

      const repoHost = this.repoLink.match(/^https?:\/\/[^/]+/)[0];
      const platforms = ['GitHub', 'GitLab', 'Bitbucket'];
      for (let i = 0; i < platforms.length; i++) {
        const platform = platforms[i];
        if (new RegExp(platform, 'i').test(repoHost)) {
          return platform;
        }
      }

      return 'Source';
    }
  }
};
</script>

<style lang="stylus">
.nav-links
  display: inline-block

  a
    line-height: 1.4rem
    color: inherit

    &:hover, &.router-link-active
      color: $accentColor

  .nav-item
    position: relative
    display: inline-block
    margin-left: 1.5rem
    line-height: 2rem

    &:first-child
      margin-left: 0

  .repo-link
    margin-left: 1.5rem

.version-dropdown
  list-style: none
  margin: 0
  position: absolute
  display: none
  width: 100%
  padding: 0
  background: #fff
  border: 1px solid #eaecef

  li
    padding: 5px
    text-align: center

    &:hover
      background: #eaecef

    a
      width: 100%

.versions
  min-width: 50px
  box-sizing: border-box

  span
    box-sizing: border-box
    background: #3eaf7c
    border-radius: 6px
    padding: 5px 10px
    width: 100%
    display: flex
    justify-content: center
    align-items: center
    text-align: center
    color: #fff

  &:hover
    .version-dropdown
      display: block

@media (max-width: $MQMobile)
  .nav-links
    .nav-item, .repo-link
      margin-left: 0

  .versions
    span
      text-align: left
      justify-content: flex-start
      min-height: 50px

@media (min-width: $MQMobile)
  .nav-links a
    &:hover, &.router-link-active
      color: $textColor

  .nav-item > a:not(.external)
    &:hover, &.router-link-active
      margin-bottom: -2px
      border-bottom: 2px solid lighten($accentColor, 8%)
</style>
{'fraction_non_alphanumeric': 0.15269557731625955, 'fraction_numerical': 0.008823845905520284, 'mean_word_length': 2.0713813615333776, 'pattern_counts': {'":': 0, '<': 71, '<?xml version=': 0, '>': 79, 'https://': 4, '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': '6636723', 'n_tokens_mistral': 3086, 'n_tokens_neox': 2977, 'n_words': 652}