148 add paging functionality to blog posts podcast episodes events and projects overview

src/lib/components/Pagination.svelte

@@ -0,0 +1,46 @@
+<script>
+  import ArrowLeft from '../svg/Arrow_Left.svelte';
+  import ArrowRight from '../svg/Arrow_Right.svelte';
+  import {t} from '$lib/stores/i18n';
+
+  export let items;
+  export let perPage;
+  export let trimmedItems;
+
+  $: totalItems = items.length;
+  $: currentPage = 0;
+  $: totalPages = Math.ceil(totalItems / perPage);
+  $: start = currentPage * perPage;
+  $: end =
+    currentPage === totalPages - 1 ? totalItems - 1 : start + perPage - 1;
+
+  $: trimmedItems = items.slice(start, end + 1);
+
+  $: totalItems, (currentPage = 0);
+  $: currentPage, start, end;
+</script>
+
+{#if totalItems && totalItems > perPage}
+  <div
+    class="pagination pointer-events-auto flex items-center justify-center"
+    role="navigation"
+    aria-label="Pagination"
+  >
+    <button
+      on:click={() => (currentPage -= 1)}
+      disabled={currentPage === 0 ? true : false}
+      aria-label={$t('access.previous').text}
+    >
+      <ArrowLeft width={30} height={30} />
+    </button>
+    <p class="m-0 mx-2">{start + 1} - {end + 1} of {totalItems}</p>
+    <button
+      class="flex"
+      on:click={() => (currentPage += 1)}
+      disabled={currentPage === totalPages - 1 ? true : false}
+      aria-label={$t('access.next').text}
+    >
+      <ArrowRight width={30} height={30} />
+    </button>
+  </div>
+{/if}

src/lib/data/translations.js

@@ -89,8 +89,8 @@ export default {
     'misc.read_more': {text: 'Mehr lesen'},
     'access.close': {text: 'Navigation schließen'},
     'access.open': {text: 'Navigation öffnen'},
-    'access.next': {text: 'Nächstes Element'},
-    'access.previous': {text: 'Vorheriges Element'},
+    'access.next': {text: 'Nächstes'},
+    'access.previous': {text: 'Vorheriges'},
     'access.date': {text: 'Datum'},
     'access.time': {text: 'Uhrzeit'},
     'access.location': {text: 'Ort'},
@@ -200,8 +200,8 @@ export default {
     'misc.read_more': {text: 'Read more'},
     'access.close': {text: 'Close Navigation'},
     'access.open': {text: 'Open Navigation'},
-    'access.next': {text: 'Go to next item'},
-    'access.previous': {text: 'Go to previous item'},
+    'access.next': {text: 'Next'},
+    'access.previous': {text: 'Previous'},
     'access.date': {text: 'Date'},
     'access.time': {text: 'Time'},
     'access.location': {text: 'Location'},

src/lib/svg/Arrow_Left.svelte

@@ -0,0 +1,19 @@
+<script>
+  export let width;
+  export let height;
+</script>
+
+<svg
+  {width}
+  {height}
+  xmlns="http://www.w3.org/2000/svg"
+  viewBox="0 0 20 20"
+  fill="#cfcfd1"
+  style={`transform: rotate(${180}deg)`}
+>
+  <path
+    fill-rule="evenodd"
+    d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z"
+    clip-rule="evenodd"
+  />
+</svg>

src/routes/[[locale=locale]]/[events=events]/+page.svelte

@@ -5,6 +5,7 @@
   import {timeSplitEntries} from '$lib/js/entries';
   import Events_Card from '$lib/components/Events_Card.svelte';
   import Filter from '../../../lib/components/Filter.svelte';
+  import Pagination from '$lib/components/Pagination.svelte';
 
   onMount(() => {
     $page_key = 'navbar.events';
@@ -16,6 +17,8 @@
   $: events_data = data.events;
 
   let filteredData;
+  let trimmedPastData;
+  let trimmedFutureData;
 
   $: console.log(events_data);
 
@@ -71,22 +74,39 @@
     <p class="px-4">{$t('filter.no_results').text}</p>
   {:else}
     <div class="space-y-8 px-4">
-      {#each events.future as event}
-        <Events_Card {...event} />
-      {/each}
+      {#if trimmedFutureData}
+        {#each trimmedFutureData as event, i}
+          <Events_Card {...event} />
+        {/each}
+      {/if}
+      {#if events.future}
+        <Pagination
+          items={events.future}
+          perPage={8}
+          bind:trimmedItems={trimmedFutureData}
+        />
+      {/if}
     </div>
   {/if}
-
   <h2 class="mb-6 mt-8 px-4 text-2xl font-bold drop-shadow-sm">
     {pastEventSeparator}
   </h2>
   {#if events.past.length === 0}
     <p class="px-4">{$t('filter.no_results').text}</p>
   {:else}
     <div class="space-y-8 px-4">
-      {#each events.past as event}
-        <Events_Card {...event} />
-      {/each}
+      {#if trimmedPastData}
+        {#each trimmedPastData as event}
+          <Events_Card {...event} />
+        {/each}
+      {/if}
+      {#if events.future}
+        <Pagination
+          items={events.past}
+          perPage={8}
+          bind:trimmedItems={trimmedPastData}
+        />
+      {/if}
     </div>
   {/if}
 {/if}

src/routes/[[locale=locale]]/[using_data=using_data]/[project_database=project_database]/+page.svelte

@@ -4,6 +4,7 @@
   import {t} from '$lib/stores/i18n';
   import Filter from '$lib/components/Filter.svelte';
   import ProjectsCard from '$lib/components/ProjectsCard.svelte';
+  import Pagination from '$lib/components/Pagination.svelte';
 
   onMount(() => {
     $page_key = 'navbar.using_data.project_database';
@@ -13,6 +14,7 @@
   export let data;
   $: projects = data.projects;
   let filteredData;
+  let trimmedData;
   let projects;
 
   $: selects = [
@@ -57,9 +59,16 @@
   expanded={true}
 />
 <div class="mt-8 space-y-8 px-4">
-  {#if filteredData}
-    {#each filteredData as project}
+  {#if trimmedData}
+    {#each trimmedData as project}
       <ProjectsCard {...project} />
     {/each}
   {/if}
+  {#if filteredData}
+    <Pagination
+      items={filteredData}
+      perPage={8}
+      bind:trimmedItems={trimmedData}
+    />
+  {/if}
 </div>

src/routes/[[locale=locale]]/blog/+page.svelte

@@ -4,6 +4,7 @@
   import {t} from '$lib/stores/i18n';
   import BlogCard from '$lib/components/Blog_Card.svelte';
   import Filter from '../../../lib/components/Filter.svelte';
+  import Pagination from '$lib/components/Pagination.svelte';
 
   onMount(() => {
     $page_key = 'navbar.blog';
@@ -12,6 +13,7 @@
   /** @type {import('./$types').PageData} */
   export let data;
   let filteredData;
+  let trimmedData;
   let blog_posts;
   $: blog_posts = data.blog_posts;
   $: selects = [
@@ -31,11 +33,18 @@
 
 <Filter orig_data={blog_posts} bind:filteredData {selects} {searchOptions} />
 <div class="mt-8 space-y-8 px-4">
-  {#if filteredData}
-    {#each filteredData as post, i}
+  {#if trimmedData}
+    {#each trimmedData as post, i}
       <div class={i === 0 ? 'col-span-full' : 'col-span-1'}>
         <BlogCard {...post} />
       </div>
     {/each}
   {/if}
+  {#if filteredData}
+    <Pagination
+      items={filteredData}
+      perPage={8}
+      bind:trimmedItems={trimmedData}
+    />
+  {/if}
 </div>

src/routes/[[locale=locale]]/podcast/+page.svelte

@@ -4,13 +4,15 @@
   import {t} from '$lib/stores/i18n';
   import BlogCard from '$lib/components/Blog_Card.svelte';
   import Filter from '../../../lib/components/Filter.svelte';
+  import Pagination from '$lib/components/Pagination.svelte';
 
   onMount(() => {
     $page_key = 'navbar.podcast';
   });
 
   export let data;
   let filteredData;
+  let trimmedData;
   $: podcast_episodes = data.podcast_episodes;
 
   $: selects = [
@@ -36,10 +38,17 @@
 />
 <div class="container mx-auto mt-8 px-4 pb-8">
   <div class="space-y-8">
-    {#if filteredData}
-      {#each filteredData as episode}
+    {#if trimmedData}
+      {#each trimmedData as episode}
         <BlogCard {...episode} external={true} />
       {/each}
     {/if}
+    {#if filteredData}
+      <Pagination
+        items={filteredData}
+        perPage={8}
+        bind:trimmedItems={trimmedData}
+      />
+    {/if}
   </div>
 </div>