<template> <main class="main"> <hero class="hero-intro is-primary" containerClass="container-thin" withEntry title="Blog"> <template slot="entry"> <p>StarlingX news, announcements, best practices, use cases and more.</p> </template> </hero> <div class="main-inner"> <div class="container container-thin"> <h4 class="main-title">All Posts</h4><!-- /.main-title --> <div class="main-container"> <div class="content"> <PostList :author='author' :category='category' /> </div><!-- /.content --> <aside class="sidebar"> <ul class="widgets"> <li class="widget"> <div class="widget-head"> <h6 class="widget-title">Categories</h6><!-- /.widget-title --> </div><!-- /.widget-head --> <div class="widget-body"> <ul class="widget-list"> <li> <router-link to="/blog/?category=news">News & Announcements</router-link> </li> <li> <router-link to="/blog/?category=software">Software</router-link> </li> <li> <router-link to="/blog/?category=use-cases">Use Cases</router-link> </li> <li> <router-link to="/blog/?category=features-and-updates">Features & Updates</router-link> </li> </ul><!-- /.widget-list --> </div><!-- /.widget-body --> </li><!-- /.widget --> <li class="widget"> <div class="widget-head"> <h6 class="widget-title">Connect</h6><!-- /.widget-title --> </div><!-- /.widget-head --> <div class="widget-body"> <ul class="widget-list"> <li> <a href="http://lists.starlingx.io">Mailing Lists</a> </li> <li> <a href="//wiki.openstack.org/wiki/StarlingX#Meetings">Weekly Calls</a> </li> <li> <a href="//freenode.net">Freenode IRC: #starlingx</a> </li> <li> <a href="//twitter.com/starlingx">Twitter</a> </li> </ul><!-- /.widget-list --> </div><!-- /.widget-body --> </li><!-- /.widget --> </ul><!-- /.widgets --> </aside><!-- /.sidebar --> </div><!-- /.main-container --> </div><!-- /.container --> </div><!-- /.main-inner --> </main><!-- /.main --> </template> <script> import PostList from "./PostList.vue"; export default { /** * The name of the component. * * @type {Strng} */ name: "Blog", components: { PostList }, /** * Internal state of the component. * * @return {Object} */ data: () => ({ total: 200, current: 2, perPage: 20 }), computed: { category() { return this.$route.query.category || "all"; }, author() { return this.$route.query.author || "any"; } } }; </script>