Jakub Zych
c408eeb2ca
- index and category pages paginate with ?page=N and 404 out of range - category content renders above the list through the html gate - related posts fall back to the latest posts - --journal-* tokens and neutral base styles - pl/en strings registered only for locales the app enables
34 lines
1.3 KiB
Vue
34 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
// Previous/next and a window of page links for the current listing. Links
|
|
// keep the current path and use ?page=N; page 1 drops the query.
|
|
import { paginationWindow } from '../../utils/pagination.ts'
|
|
|
|
const props = defineProps<{ current: number; last: number }>()
|
|
const route = useRoute()
|
|
|
|
const to = (page: number) => {
|
|
const query = { ...route.query }
|
|
if (page > 1) query.page = String(page)
|
|
else delete query.page
|
|
return { path: route.path, query }
|
|
}
|
|
const pages = computed(() => paginationWindow(props.current, props.last))
|
|
</script>
|
|
|
|
<template>
|
|
<nav v-if="last > 1" class="journal-pagination" :aria-label="$t('journal.pagination.label')">
|
|
<NuxtLink v-if="current > 1" :to="to(current - 1)" rel="prev" class="journal-pagination__prev">
|
|
{{ $t('journal.pagination.previous') }}
|
|
</NuxtLink>
|
|
<ol class="journal-pagination__pages">
|
|
<li v-for="page in pages" :key="page">
|
|
<span v-if="page === current" class="journal-pagination__current" aria-current="page">{{ page }}</span>
|
|
<NuxtLink v-else :to="to(page)">{{ page }}</NuxtLink>
|
|
</li>
|
|
</ol>
|
|
<NuxtLink v-if="current < last" :to="to(current + 1)" rel="next" class="journal-pagination__next">
|
|
{{ $t('journal.pagination.next') }}
|
|
</NuxtLink>
|
|
</nav>
|
|
</template>
|