Added basic pagination to homepage.

assets/components/home/home.vue

@@ -1,59 +1,76 @@
 <template>
-    <div class="content">
-        <FilterBar
-            :fetch-releases="fetchReleases"
-            :is-home="true"
-        />
+	<div class="content">
+		<FilterBar
+			:fetch-releases="fetchReleases"
+			:is-home="true"
+		/>
 
-        <div class="content-inner">
-            <Releases :releases="releases" />
-        </div>
-    </div>
+		<div class="content-inner">
+			<Pagination
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-top"
+			/>
+
+			<Releases :releases="releases" />
+
+			<Pagination
+				:items-total="totalCount"
+				:items-per-page="limit"
+				class="pagination-bottom"
+			/>
+		</div>
+	</div>
 </template>
 
 <script>
 import FilterBar from '../header/filter-bar.vue';
 import Releases from '../releases/releases.vue';
+import Pagination from '../pagination/pagination.vue';
 
 async function fetchReleases() {
-    this.releases = await this.$store.dispatch('fetchReleases', {
-        limit: (this.$route.query && this.$route.query.limit && Number(this.$route.query.limit)) || 30,
-        range: this.$route.name,
-    });
+	const { releases, totalCount } = await this.$store.dispatch('fetchReleases', {
+		limit: this.limit,
+		pageNumber: Number(this.$route.params.pageNumber) || 1,
+		range: this.$route.name,
+	});
+
+	this.totalCount = totalCount;
+	this.releases = releases;
 }
 
 async function route() {
-    await this.fetchReleases();
+	await this.fetchReleases();
 }
 
 async function mounted() {
-    this.pageTitle = '';
+	this.pageTitle = '';
 
-    await this.fetchReleases();
+	await this.fetchReleases();
 }
 
 export default {
-    components: {
-        FilterBar,
-        Releases,
-    },
-    data() {
-        return {
-            releases: [],
-            networks: [],
-            pageTitle: null,
-            from: null,
-        };
-    },
-    beforeRouteEnter(to, from, next) {
-        next(vm => vm.$set(vm, 'from', from));
-    },
-    watch: {
-        $route: route,
-    },
-    mounted,
-    methods: {
-        fetchReleases,
-    },
+	components: {
+		FilterBar,
+		Releases,
+		Pagination,
+	},
+	data() {
+		return {
+			releases: [],
+			networks: [],
+			pageTitle: null,
+			limit: 15,
+			totalCount: 0,
+			from: null,
+		};
+	},
+	watch: {
+		$route: route,
+	},
+	mounted,
+	methods: {
+		fetchReleases,
+	},
 };
 </script>

assets/components/pagination/pagination.vue

@@ -0,0 +1,112 @@
+<template>
+	<div class="pagination">
+		<template v-if="pageNumber > 1">
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: 1 } }"
+			>&lt;&lt;</router-link>
+
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: pageNumber - 1 } }"
+			>&lt;</router-link>
+		</template>
+
+		<template v-else>
+			<span class="pagination-page disabled">&lt;&lt;</span>
+			<span class="pagination-page disabled">&lt;</span>
+		</template>
+
+		<router-link
+			v-for="pageX in pageCount"
+			:key="`page-${pageX}`"
+			:to="{ params: { pageNumber: pageX } }"
+			:class="{ active: pageX === pageNumber }"
+			class="pagination-page"
+		> {{ pageX }} </router-link>
+
+		<template v-if="pageNumber < pageCount">
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: pageNumber + 1 } }"
+			>&gt;</router-link>
+
+			<router-link
+				class="pagination-page"
+				:to="{ params: { pageNumber: pageCount } }"
+			>&gt;&gt;</router-link>
+		</template>
+
+		<template v-else>
+			<span class="pagination-page disabled">&gt;</span>
+			<span class="pagination-page disabled">&gt;&gt;</span>
+		</template>
+	</div>
+</template>
+
+<script>
+function pageNumber() {
+	return Number(this.$route.params.pageNumber) || 1;
+}
+
+function pageCount() {
+	return Math.ceil(this.itemsTotal / this.itemsPerPage);
+}
+
+export default {
+	props: {
+		itemsTotal: {
+			type: Number,
+			default: 0,
+		},
+		itemsPerPage: {
+			type: Number,
+			default: 10,
+		},
+	},
+	computed: {
+		pageNumber,
+		pageCount,
+	},
+};
+</script>
+
+<style lang="scss" scoped>
+.pagination {
+	width: 100%;
+	display: flex;
+	justify-content: center;
+}
+
+.pagination-page {
+	width: 2rem;
+	height: 2rem;
+	display: inline-flex;
+	align-items: center;
+	margin: 0 .5rem 0 0;
+	justify-content: center;
+	color: var(--shadow);
+	font-weight: bold;
+	text-decoration: none;
+
+	&:hover:not(.active, .disabled) {
+		color: var(--text);
+	}
+
+	&.active {
+		color: var(--primary);
+	}
+
+	&.disabled {
+		color: var(--shadow-weak);
+	}
+}
+
+.pagination-top {
+	margin: 0 0 1rem 0;
+}
+
+.pagination-bottom{
+	margin: 1rem 0 0 0;
+}
+</style>

assets/components/releases/release.vue

@@ -3,6 +3,8 @@
 		v-if="release"
 		class="content"
 	>
+		<Banner :release="release" />
+
 		<div class="details">
 			<div class="column">
 				<a
@@ -93,8 +95,6 @@
 			</div>
 		</div>
 
-		<Banner :release="release" />
-
 		<div class="info column">
 			<h2 class="row title">{{ release.title }}</h2>
 

assets/components/tags/tag.vue

@@ -172,6 +172,7 @@ export default {
     color: var(--text-light);
     display: flex;
     flex-direction: column;
+	flex-shrink: 0;
     width: 25rem;
     box-sizing: border-box;
     overflow: hidden;