<commit_before><template>
  <v-card
    v-if="featured.length > 0"
    class="text-xs-center py-5"
    flat
  >
    <h3
      class="font-weight-medium grey--text text--darken-2"
      v-text="$t('Vuetify.Home.madeWithVuetify')"
    />

    <v-container
      grid-list-xl
      mb-3
    >
      <v-layout
        align-center
        fill-height
        justify-center
        wrap
      >
        <v-flex
          v-for="(feature, i) in computedFeatured"
          :key="i"
          xs12
          sm6
          md4
        >
          <v-hover>
            <template v-slot:default="{ hover }">
              <v-card
                :title="`Link to ${feature.title}`"
                :href="`${feature.url}?ref=vuetifyjs.com`"
                class="v-card--mwvjs"
                elevation="24"
                target="_blank"
                rel="noopener"
                @click="$ga.event('home', 'click', 'mwvjs', feature.title)"
              >
                <v-img
                  :alt="feature.title"
                  :src="feature.image"
                  height="300px"
                  width="100%"
                >
                  <v-fade-transition>
                    <v-overlay
                      v-show="hover"
                      absolute
                      opacity="0.9"
                    >
                      <h3
                        class="headline mb-2"
                        v-text="feature.title"
                      />
                      <div
                        class="overline grey--text mb-5 px-4"
                        v-text="feature.teaser"
                      />
                      <v-btn
                        :aria-label="`Link to ${feature.title}`"
                        color="success"
                        fab
                        large
                        tabindex="-1"
                      >
                        <v-icon>mdi-open-in-new</v-icon>
                      </v-btn>
                    </v-overlay>
                  </v-fade-transition>
                </v-img>
              </v-card>
            </template>
          </v-hover>
        </v-flex>
      </v-layout>
    </v-container>

    <div class="text-xs-center">
      <a
        aria-label="Link to madewithvuejs.com"
        href="https://madewithvuejs.com/vuetify?ref=vuetifyjs.com"
        rel="noopener"
        target="_blank"
        title="Link to madewithvuejs.com"
        @click="$ga.event('home', 'click', ' mwvjs')"
      >
        <v-img
          alt="Powered by madewithvuejs.com"
          contain
          src="https://cdn.vuetifyjs.com/images/home/powered-by-madewithvue-1.svg"
          height="65px"
        />
      </a>
    </div>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      featured: [],
    }),

    computed: {
      computedFeatured () {
        return this.featured.slice(0, 6)
      },
    },

    // TODO: Remove when v-img
    // supports lazy loading
    mounted () {
      this.$nextTick(this.init)
    },

    methods: {
      init () {
        fetch('https://madewithvuejs.com/api/tag/vuetify', {
          method: 'get',
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
          },
        })
          .then(res => res.json())
          .then(res => {
            this.featured = this.setFeatured(res)
          })
          .catch(err => console.log(err))
      },
      setFeatured (data) {
        if (!data) return []
        const featured = data.data.map(f => {
          f.hover = false<commit_msg>Revert "docs(Home): remove scroll loading"<commit_after><template>
  <v-card
    v-if="featured.length > 0"
    class="text-xs-center py-5"
    flat
  >
    <h3
      class="font-weight-medium grey--text text--darken-2"
      v-text="$t('Vuetify.Home.madeWithVuetify')"
    />

    <v-container
      grid-list-xl
      mb-3
    >
      <v-layout
        align-center
        fill-height
        justify-center
        wrap
      >
        <v-flex
          v-for="(feature, i) in computedFeatured"
          :key="i"
          xs12
          sm6
          md4
        >
          <v-hover>
            <template v-slot:default="{ hover }">
              <v-card
                :title="`Link to ${feature.title}`"
                :href="`${feature.url}?ref=vuetifyjs.com`"
                class="v-card--mwvjs"
                elevation="24"
                target="_blank"
                rel="noopener"
                @click="$ga.event('home', 'click', 'mwvjs', feature.title)"
              >
                <v-img
                  :alt="feature.title"
                  :src="feature.image"
                  height="300px"
                  width="100%"
                >
                  <v-fade-transition>
                    <v-overlay
                      v-show="hover"
                      absolute
                      opacity="0.9"
                    >
                      <h3
                        class="headline mb-2"
                        v-text="feature.title"
                      />
                      <div
                        class="overline grey--text mb-5 px-4"
                        v-text="feature.teaser"
                      />
                      <v-btn
                        :aria-label="`Link to ${feature.title}`"
                        color="success"
                        fab
                        large
                        tabindex="-1"
                      >
                        <v-icon>mdi-open-in-new</v-icon>
                      </v-btn>
                    </v-overlay>
                  </v-fade-transition>
                </v-img>
              </v-card>
            </template>
          </v-hover>
        </v-flex>
      </v-layout>
    </v-container>

    <div class="text-xs-center">
      <a
        aria-label="Link to madewithvuejs.com"
        href="https://madewithvuejs.com/vuetify?ref=vuetifyjs.com"
        rel="noopener"
        target="_blank"
        title="Link to madewithvuejs.com"
        @click="$ga.event('home', 'click', ' mwvjs')"
      >
        <v-img
          alt="Powered by madewithvuejs.com"
          contain
          src="https://cdn.vuetifyjs.com/images/home/powered-by-madewithvue-1.svg"
          height="65px"
        />
      </a>
    </div>
  </v-card>
</template>

<script>
  export default {
    data: () => ({
      featured: [],
    }),

    computed: {
      computedFeatured () {
        return this.featured.slice(0, 6)
      },
    },

    // TODO: Remove when v-img
    // supports lazy loading
    mounted () {
      window.addEventListener('scroll', this.init, { passive: true })
    },

    beforeDestroy () {
      this.removeListener()
    },

    methods: {
      removeListener () {
        window.removeEventListener('scroll', this.init, { passive: true })
      },
      init () {
        this.removeListener()

        fetch('https://madewithvuejs.com/api/tag/vuetify', {
          method: 'get',
          headers: {
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
          },
        })
          .then(res => res.json())
          .then(res => {
            this.featured = this.setFeatured(res)
          })
          .catch(err => console.log(err))
      },
      setFeatured (data) {
        if (!data) return []
        const featured = data.data.map(f => {
          f.hover = false
{'fraction_non_alphanumeric': 0.1390331602077507, 'fraction_numerical': 0.00772406445598615, 'mean_word_length': 1.0586622807017543, 'pattern_counts': {'":': 0, '<': 73, '<?xml version=': 0, '>': 85, 'https://': 6, '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': '1460571', 'n_tokens_mistral': 2272, 'n_tokens_neox': 2141, 'n_words': 326}