Part 3, categories and pagination

src/components/Item.svelte

@@ -5,6 +5,16 @@
 </script>
 
 <a class="block mt-6" href={`/blog/${post.slug}`} rel="prefetch">
+  <h4 class="font-medium">
+    {#each post.categories as category, i}
+      <a
+        rel="prefetch"
+        href={`blog/category/${category}`}
+        class="text-gray-600 hover:text-gray-900 hover:underline">
+        {category}{i !== post.categories.length - 1 ? ', ' : ''}
+      </a>
+    {/each}
+  </h4>
   <h3
     class="font-medium text-2xl text-gray-700 hover:text-gray-900
     hover:underline">

src/components/Pagination.svelte

@@ -0,0 +1,24 @@
+<script>
+  export let prevLink =null, nextLink =null
+</script>
+
+{#if prevLink || nextLink}
+  <div class="flex justify-between border-t border-black py-4">
+    {#if prevLink}
+      <a
+        rel="prefetch"
+        href={prevLink}
+        class="text-gray-600 hover:text-gray-900 hover:underline">
+        Older
+      </a>
+    {/if}
+    {#if nextLink}
+      <a
+        rel="prefetch"
+        href={nextLink}
+        class="ml-auto text-gray-600 hover:text-gray-900 hover:underline">
+        Newer
+      </a>
+    {/if}
+  </div>
+{/if}

src/routes/blog/[...rest].json.js

@@ -0,0 +1,49 @@
+import posts from "./_posts.js";
+import { POSTS_PER_PAGE, getParams } from "../../utils.js";
+
+export function get(req, res, next) {
+  const { rest } = req.params;
+  const { category, page } = getParams(req.params);
+
+  if (rest.length !== 2 && rest.length !== 4) {
+    res.writeHead(404, {
+      "Content-Type": "application/json"
+    });
+
+    res.end(
+      JSON.stringify({
+        message: `Not found`
+      })
+    );
+
+    return;
+  }
+
+  const filtered = posts.filter(({ categories }) =>
+    category ? categories.includes(category) : true
+  );
+
+  const paginated = filtered.slice(
+    (page - 1) * POSTS_PER_PAGE,
+    page * POSTS_PER_PAGE
+  );
+
+  const mapped = paginated.map(post => ({
+    title: post.title,
+    slug: post.slug,
+    created: post.created,
+    excerpt: post.excerpt,
+    categories: post.categories
+  }));
+
+  res.writeHead(200, {
+    "Content-Type": "application/json"
+  });
+
+  res.end(
+    JSON.stringify({
+      posts: mapped,
+      hasMore: filtered.length > page * POSTS_PER_PAGE
+    })
+  );
+}

src/routes/blog/[...rest].svelte

@@ -0,0 +1,40 @@
+<script context="module">
+  import { getParams } from "../../utils.js";
+
+  export async function preload({ params, query }) {
+    const { rest } = params;
+    const { category, page } = getParams(params);
+
+    if (!rest.length) return this.error(404);
+
+    const res = await this.fetch(`blog/${rest.join("/")}.json`);
+    const { posts, hasMore } = await res.json();
+
+    if (res.status === 200) {
+      return { posts, page, hasMore };
+    } else {
+      this.error(res.status, data.message);
+    }
+  }
+</script>
+
+<script>
+  import Item from "../../components/Item.svelte";
+  import Pagination from "../../components/Pagination.svelte";
+
+  export let posts, page, hasMore;
+</script>
+
+<svelte:head>
+  <title>Blog</title>
+</svelte:head>
+
+<div class="mb-6">
+  {#each posts as post}
+    <Item {post} />
+  {/each}
+</div>
+
+<Pagination
+  prevLink={hasMore ? `blog/page/${Number(page) + 1}` : null}
+  nextLink={page > 1 ? `blog/page/${Number(page) - 1}` : null} />

src/routes/blog/_posts.js

@@ -2,7 +2,6 @@ const fs = require('fs')
 const path = require('path')
 const marked = require('marked')
 const matter = require('gray-matter')
-const formatDate = require('date-fns/format')
 const readingTime = require('reading-time')
 const prism = require('prismjs')
 
@@ -51,7 +50,7 @@ const posts = fs
   .map(fileName => {
     const fileMd = fs.readFileSync(path.join(POSTS_DIR, fileName), 'utf8')
     const { data, content: rawContent } = matter(fileMd)
-    const { title, description, created, updated } = data
+    const { title, description, created, updated, categories } = data
     const slug = fileName.split('.')[0]
     let content = rawContent
     let excerpt = ''
@@ -70,6 +69,7 @@ const posts = fs
       html,
       created,
       updated,
+      categories,
       excerpt,
       readingTime: time,
     }

src/routes/blog/index.json.js

@@ -1,18 +1,25 @@
-import posts from './_posts.js';
-
-const contents = JSON.stringify(posts.map(post => {
-	return {
-		title: post.title,
-		slug: post.slug,
-		created: post.created,
-		excerpt: post.excerpt
-	};
-}));
+import posts from "./_posts.js";
+import { POSTS_PER_PAGE } from "../../utils.js";
 
 export function get(req, res) {
-	res.writeHead(200, {
-		'Content-Type': 'application/json'
-	});
+  const paginated = posts.slice(0, POSTS_PER_PAGE);
+
+  const mapped = paginated.map(post => ({
+    title: post.title,
+    slug: post.slug,
+    created: post.created,
+    excerpt: post.excerpt,
+    categories: post.categories
+  }));
+
+  res.writeHead(200, {
+    "Content-Type": "application/json"
+  });
 
-	res.end(contents);
-}
+  res.end(
+    JSON.stringify({
+      posts: mapped,
+      hasMore: posts.length > POSTS_PER_PAGE
+    })
+  );
+}

src/routes/blog/index.svelte

@@ -2,16 +2,17 @@
   export function preload({ params, query }) {
     return this.fetch(`blog.json`)
       .then(r => r.json())
-      .then(posts => {
-        return { posts };
+      .then(({ posts, hasMore }) => {
+        return { posts, hasMore };
       });
   }
 </script>
 
 <script>
   import Item from "../../components/Item.svelte";
+  import Pagination from "../../components/Pagination.svelte";
 
-  export let posts;
+  export let posts, hasMore;
 </script>
 
 <svelte:head>
@@ -23,3 +24,5 @@
     <Item {post} />
   {/each}
 </div>
+
+<Pagination prevLink={hasMore ? 'blog/page/2' : null} />

src/routes/blog/latest.json.js

@@ -6,7 +6,8 @@ const contents = JSON.stringify(
       title: post.title,
       slug: post.slug,
       created: post.created,
-      excerpt: post.excerpt
+      excerpt: post.excerpt,
+      categories: post.categories
     };
   })
 );

src/routes/blog/posts/agris-reprensa.md

@@ -0,0 +1,58 @@
+---
+title: Agris reprensa satelles et facta
+description: Conubia si formam mora cornua iuvenalia collocat
+created: "2020-03-21T12:13:28.107Z"
+categories: ["Lifestyle"]
+---
+
+Nostra intremuit Oebalio
+[caput](http://iactu-fidensque.io/) constitit sanguine perque; coniunx ad signa
+conlapsa. Iustos Titan.
+
+<!-- more -->
+
+# Agris reprensa satelles et facta
+
+## Conubia si formam mora cornua iuvenalia collocat
+
+Lorem markdownum anxia ditem creamur; quamquam vultumque nympha patefecit in
+captantur acervos, ire illo inquit. Nostra intremuit Oebalio
+[caput](http://iactu-fidensque.io/) constitit sanguine perque; coniunx ad signa
+conlapsa. Iustos Titan.
+
+## Da ni est
+
+Sepulcris vestra [usquam](http://www.adplicat.io/obliquocomaeque) vale quoque
+exosus **robora negetur**. Pectora et quoque sine: lacubus obvertit **poenam**
+in hastae silvis? **Fuerit ex vobis** se adsumere Danai veniam dilaniat Curetas
+tuae medio et. Faciemque tauros fama, rex cursu divus inmitis consensu roboris,
+et cor, amabat ratis iuvet in. Sua aequus condat ardor.
+
+Minimos mihi plurimus et solus surgit cornu! Parthaone flectere pallor quamquam
+finemque aevum robore Danais conponere fide septemplice **quos**; quae tibi
+attulit nec. Specus ira ait, et moenia eum metuunt?
+
+## Sequuntur ea animas stravere Terea tempora interea
+
+Ortas et canitiemque litora; non nocte ut sermone potens. Excutiant crimina
+**consistere reparet suspiria** an flet citharam nostrae: fratribus. Flatuque
+tempora invadunt arbitrio arcuit labori Cinyran anhelitus *tendere inmixtaque*
+belua sequuntur veros tempora sic. Dulcia et Italis erigitur ut turba Saturnus
+barba. Tibi signo, soli silent fessis venata, rectum Caesareo sospite; nec
+umquam caligine utilius.
+
+- Unum crinem latus coniuge
+- Novo teneo vitam commune servatus iacerent certamen
+- Quinquennia adiuvat limen
+- Dedit vacuaque tutum
+- Proles erat
+
+## Antro Circaea
+
+Facientibus convertit opus. Neque suos confusaque ille, meruisse flumine quem
+flectitur oscula. Thracius libasse? Has tibi Astypaleia sunt rettulit pennas
+flexit nihil: illis ulla precantia confluat conlegit me. Pietas grates!
+
+Quisque patruelibus clivo adgnovitque Nereida, Lacinia lapidem refluitque
+dotaliaque defendit ipse tardi aliis, trahi. Ad ore mali Argo carcere. Laevae ut
+Daedalon litore se differt, manumque!

src/routes/blog/posts/avidum-pyramus.md

@@ -0,0 +1,93 @@
+---
+title: Avidum Pyramus membrana horum ait veteres fuit
+description: Nisi effugies
+created: "2020-03-21T10:13:28.107Z"
+categories: ["Lifestyle"]
+---
+
+Invasit Sirenes inter. Curvum
+male tegit nobilitate cauda utraque praesignis artes caligine petam, a.
+
+<!-- more -->
+
+# Avidum Pyramus membrana horum ait veteres fuit
+
+## Nisi effugies
+
+Lorem markdownum soror, hoc mea, est est adicis. Invasit Sirenes inter. Curvum
+male tegit nobilitate cauda utraque praesignis artes caligine petam, a.
+
+## Coniugis alas saxum vires animi ullos deiectuque
+
+Pauca incubuitque levis; dea regni, eiecit me quos quidque percussis tamen
+Melanthus, harpen erat. Remigis Procne purasque in evocat **digna optetis**
+petentes et pondere valens ego tabo manibus Priapi conatur male vicem; tum.
+
+1. Veneris vixque Argolicosque mihi adiere
+2. Iovem undique
+3. Qua oblita ira fidemque tendit
+4. Patriumque novum inpositaque et aconita sensit tenderet
+5. Vulcanum sic circumspicit fuerit novae et tota
+
+## Sinusque prodierat et quaque legit terra et
+
+Inguine **auro** cuive adeunt Erectheus *minaxque testis clamantem* vellet
+inserere. Tergo oraque draconis suisque *gradus*, esset fertur [venias
+sub](http://www.ille.org/) deusque ramos glorior. Dicta agmenque cupidine
+sparsos nectare mugitibus refert creatis, ossa umbras an tandem illud, custos
+sequeretur dimittit tempora. Reperta non ille functus variasque novae occupat
+sine animumque stellamque meruisse [regnabat](http://rhesiutinamque.net/) ignes
+est data patuisse aris **mirum** parentis pharetras. Icare more singula corpora!
+
+## Erat nitidum fati torpor oscula inprudens utraque
+
+Mota [quaerenti et suam](http://sanguinis.com/punior) sopor formae in vocavit
+manu places pater fulva illas! Parva teneris! Feror **animae adloquitur**
+Sibyllae Stygio et iunctis incedere supplex. Via aera saevit nata, dicentem de
+ducar vinci pectora. In sudore sola triplex Bacchi!
+
+> Non de et flectentem quoque haustis: lugebere munera cornu oculos quantum:
+> manum. Satis atque sub in sacra, lumina? Poscat reperta mortale audire
+> paternos, cara haec sternitur ferro; fugit, postes indignis. Quas semper nisi
+> vocantia, ille caput, pectoribusque viam. Erubui de tenus; ipsam ducere omnia
+> et ut hoc *me strepitum* ungues igitur effectu optatis cultros.
+
+## Minerva ipsoque in tanti simulaverat ipso insistere
+
+Unum qui Iphis lympha dona continuo *formae coniugis ab* arva linguam ab corpore
+**affata**? Non de praecutiunt minus est: pugnam oblivia, crimenque falsosque
+excipit caligine Acoete, virginis tanta inque, erat. Hanc Somne. Et Pactolides
+Semele ubi urbesque, en modo; verus vestem. Talibus accessit secundo magnaque
+ille magna ripas silvas victoria ab spectat sterilis tenet age: nautae.
+
+    blacklistKeyboardDesktop.fiosDesktop(-1, point_click_pixel, restore(ssd_dns(
+            storageMenu, 5), -4, balancing_broadband));
+    var hfs = power.integer_linux(workstationBackup.excel(28 / 2,
+            troubleshooting_spoofing_file), key);
+    var bluetooth = active(analyst_codec_samba.lte(troll, power_process_thin,
+            floatingIso));
+    if (sectorSouthbridge + snmpHyperMeta >= active / methodAgp) {
+        file.aixIoRedundancy(xml_install_symbolic);
+        snmp_drive_checksum += -1;
+        bcc += layout;
+    } else {
+        hardware.aiffServer -= softwareRight + circuit;
+        icq_ivr = eWindows(dfsCompression, read_sql_property(hard_hashtag_cad,
+                lock, lock_error), 3);
+    }
+    if (floodDaemonOlap + shortcut) {
+        thyristor_visual = 41 - 5;
+    } else {
+        rup_irq_yahoo -= listservLpi(98, 4, superscalar) + dialog_left;
+        stackWindowsSpider = googleFios(broadband, dbms, disk_up) + 48 +
+                laser_webcam;
+        vaporware_nanometer_lag = 5 - parseBacksideMarketing(-1,
+                ics_character_tag);
+    }
+
+Sic ipse: quo parte *in doloris* tamen aut libidine tibi, idem certa; erit
+nequiquam fraterque. Suis quid exarsit ad luctus latices palmiferos parentum
+triformis pervigil, desinit per gelidae, quidem simillimus ad per dignos. Omnes
+volatilis illa; nova si obruit sibi, hostem Surrentino germanam possis labens.
+Duris famaque ducitur Veneris speculatur ista est nate **ululatibus** miserata
+quid canum citius.