<commit_before><template>
  <div class="container">
    <div class="blogposts__heading">
      <div class="line__wrapper"></div>
      <h2>Blogposts</h2>
    </div>
    <div class="blogposts__articles pure-g" style="padding-left: 24px; padding-right: 24px;" v-bind:key="blogpostChunk[0].title + blogpostChunk[0].url" v-for="blogpostChunk in chunkedBlogPosts">
      <div class="pure-u-lg-1-3 pure-u-md-1-2 pure-u-1-1" v-for="blogpost in blogpostChunk" v-bind:key="blogpost.title" @click="redirect(blogpost)">
        <div class="blogpost__article">
          <div class="blogpost__article__image">
            <img :src="blogpost.previewImage" :alt="blogpost.altTag"></img>
          </div>
          <div class="blogpost__article__content">
            <h2 v-text="blogpost.title"></h2>
            <p v-text="blogpost.description"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import blogPosts from '../../content/blogposts';
export default {
  computed: {
    chunkedBlogPosts: function getChunkedBlogposts() {
      return this.chunkArray(this.blogposts, 3);
    }
  },
  data () {
    return {
      blogposts: blogPosts,
      online: true
    }
  },
  head: {
    title: '',
    meta: [
      { name: 'description', content: '' },
      { name: 'subject', content: '' },
      { name: 'abstract', content: '' },
      { name: 'url', content: '' },

      { name: 'og:url', content: '' },
      { name: 'og:type', content: '' },
      { name: 'og:title', content: '' },
      { name: 'og:image', content: '' },
      { name: 'og:description', content: '' },
      { name: 'og:locale', content: '' },

      { name: 'article:author', content: '' },
      { name: 'twitter:card', content: '' },
      { name: 'twitter:site', content: '' },
      { name: 'twitter:creator', content: '' },
      { name: 'twitter:url', content: '' },
      { name: 'twitter:title', content: '' },
      { name: 'twitter:description', content: '' },
      { name: 'twitter:image', content: '' },
      { name: 'twitter:image:alt', content: '' }
    ]
  },
  mounted () {
    if (!window.navigator) {
      this.online = false
      return
    }
    this.online = Boolean(window.navigator.onLine)
    window.addEventListener('offline', this._toggleNetworkStatus)
    window.addEventListener('online', this._toggleNetworkStatus)
  },
  methods: {
    _toggleNetworkStatus ({ type }) {
      this.online = type === 'online'
    },
    chunkArray(arr, len) {
      var chunks = [];
      var i = 0;
      var n = arr.length;
      while (i < n) {
        chunks.push(arr.slice(i, i += len));
      }
      return chunks;
    },
    redirect(blogpost) {
      this.$router.push(blogpost.url);<commit_msg>feat(seo)<commit_after><template>
  <div class="container">
    <div class="blogposts__heading">
      <div class="line__wrapper"></div>
      <h2>Blogposts</h2>
    </div>
    <div class="blogposts__articles pure-g" style="padding-left: 24px; padding-right: 24px;" v-bind:key="blogpostChunk[0].title + blogpostChunk[0].url" v-for="blogpostChunk in chunkedBlogPosts">
      <div class="pure-u-lg-1-3 pure-u-md-1-2 pure-u-1-1" v-for="blogpost in blogpostChunk" v-bind:key="blogpost.title" @click="redirect(blogpost)">
        <div class="blogpost__article">
          <div class="blogpost__article__image">
            <img :src="blogpost.previewImage" :alt="blogpost.altTag"></img>
          </div>
          <div class="blogpost__article__content">
            <h2 v-text="blogpost.title"></h2>
            <p v-text="blogpost.description"></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import blogPosts from '../../content/blogposts';
export default {
  computed: {
    chunkedBlogPosts: function getChunkedBlogposts() {
      return this.chunkArray(this.blogposts, 3);
    }
  },
  data () {
    return {
      blogposts: blogPosts,
      online: true
    }
  },
  head: {
    title: 'Blog | Web Dev Stories by <NAME>',
    meta: [
      { name: 'description', content: 'Blog articles by <NAME>. Interesting articles about Vue.js, .NET and the whole world of JavaScript.' },
      { name: 'subject', content: 'Blog articles of <NAME>.' },
      { name: 'abstract', content: 'Blog articles of <NAME>.' },
      { name: 'url', content: 'https://kevinpeters.net/blog/' },
      { name: 'article:author', content: '<NAME>' },

      { name: 'og:url', content: 'https://kevinpeters.net/about/' },
      { name: 'og:type', content: 'website' },
      { name: 'og:title', content: 'Blog | Web Dev Stories by <NAME>' },
      { name: 'og:image', content: '' },
      { name: 'og:description', content: 'Blog articles by <NAME>. Interesting articles about Vue.js, .NET and the whole world of JavaScript.' },

      { name: 'twitter:card', content: 'summary' },
      { name: 'twitter:site', content: '@kevinpeters_' },
      { name: 'twitter:creator', content: '@kevinpeters_' },
      { name: 'twitter:url', content: 'https://kevinpeters.net/about/' },
      { name: 'twitter:title', content: 'Blog | Web Dev Stories by <NAME>' },
      { name: 'twitter:description', content: 'Blog articles by <NAME>. Interesting articles about Vue.js, .NET and the whole world of JavaScript.' },
      { name: 'twitter:image', content: '' },
      { name: 'twitter:image:alt', content: '' }
    ]
  },
  mounted () {
    if (!window.navigator) {
      this.online = false
      return
    }
    this.online = Boolean(window.navigator.onLine)
    window.addEventListener('offline', this._toggleNetworkStatus)
    window.addEventListener('online', this._toggleNetworkStatus)
  },
  methods: {
    _toggleNetworkStatus ({ type }) {
      this.online = type === 'online'
    },
    chunkArray(arr, len) {
      var chunks = [];
      var i = 0;
      var n = arr.length;
      while (i < n) {
        chunks.push(arr.slice(i, i += len));
      }
      return chunks;
    },
    redirect(blogpost) {
      this.$router.push(blogpost.url);
{'fraction_non_alphanumeric': 0.17818971275885104, 'fraction_numerical': 0.006012024048096192, 'mean_word_length': 2.7572145545796736, 'pattern_counts': {'":': 0, '<': 68, '<?xml version=': 0, '>': 66, 'https://': 3, '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': '7517143', 'n_tokens_mistral': 1956, 'n_tokens_neox': 1914, 'n_words': 411}