feat: paginaaaaation

loks0n · Jul 29, 2023 · d5196c4 · d5196c4
1 parent a4b1bc1
commit d5196c4
Show file tree

Hide file tree

Showing 2 changed files with 57 additions and 4 deletions.
diff --git a/src/app.css b/src/app.css
@@ -110,6 +110,10 @@ a:visited {
  filter: brightness(0.8);
 }
 
+button {
+ font-family: 'Azeret Mono Variable', monospace;
+}
+
 article pre {
  max-width: 100%;
  overflow-x: scroll;

diff --git a/src/routes/(index)/+page.svelte b/src/routes/(index)/+page.svelte
@@ -3,15 +3,21 @@
  import type { PageData } from './$types';
 
  export let data: PageData;
+
+ const PAGE_SIZE = 5;
+
+ let page = 0;
+
+ $: posts = data.posts.slice(page * PAGE_SIZE, (page + 1) * PAGE_SIZE);
 </script>
 
 <svelte:head>
  <title>{SITE_TITLE}</title>
 </svelte:head>
 
-<article>
+<article class="posts">
  <ul>
- {#each data.posts as post, index}
+ {#each posts as post, index}
  <li>
  <a href={`/${post.slug}`}>
  {post.title}
@@ -20,20 +26,39 @@
  {new Date(post.date).toDateString()}
  </small>
  </li>
- {#if index !== data.posts.length - 1}
+ {#if index !== posts.length - 1}
  <hr />
  {/if}
  {/each}
  </ul>
 </article>
 
+<nav>
+ <button disabled={page === 0} on:click|preventDefault={() => page--}> Newer posts</button>
+
+ <small>
+ {page * PAGE_SIZE + 1} - {Math.min(data.posts.length, (page + 1) * PAGE_SIZE)} of {data.posts
+ .length}
+ </small>
+ <button
+ disabled={(page + 1) * PAGE_SIZE >= data.posts.length}
+ on:click|preventDefault={() => page++}
+ >
+ Older posts
+ </button>
+</nav>
+
 <style>
+ .posts {
+ display: flex;
+ flex-direction: column;
+ }
+
  small {
  color: rgb(186, 186, 186);
  font-size: 0.75rem;
  font-family: monospace;
  text-align: right;
- align-self: center;
  }
 
  ul {
@@ -61,4 +86,28 @@
  font-variation-settings: 'wght' 600;
  }
  }
+
+ nav {
+ display: flex;
+ flex: 1;
+ flex-direction: row;
+ align-items: end;
+ justify-content: space-between;
+ margin-top: 2em;
+ }
+
+ button {
+ background: none;
+ border: none;
+ font-size: 1rem;
+ cursor: pointer;
+ text-decoration: underline;
+ color: darkslategray;
+ }
+
+ button:disabled {
+ cursor: not-allowed;
+ text-decoration: none;
+ opacity: 0.5;
+ }
 </style>