Sort by newest news & display human readable date

src/lib/posts/NewsCard.svelte

@@ -5,6 +5,11 @@
     export let title = '<title>';
     export let summary = '<summary>';
     export let creation_date = '<date>';
+
+    const monthNames = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+
+    $: human_creation_date = new Date(+creation_date * 1000);
 </script>
 
 <div class="news-card">
@@ -15,7 +20,7 @@
         <div class="content">
             <h3 id="title">{title}</h3>
             <p id="summary-text">{summary}</p>
-            <p id="date">{creation_date}</p>
+            <p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
         </div>
     </a>
 </div>

src/lib/posts/ShowcaseNewsCard.svelte

@@ -5,6 +5,11 @@
     export let title = '<title>';
     export let summary = '<summary>';
     export let creation_date = '<date>';
+
+    const monthNames = ["January", "February", "March", "April", "May", "June",
+                  "July", "August", "September", "October", "November", "December"];
+
+    $: human_creation_date = new Date(+creation_date * 1000);
 </script>
 
 <div class="news-card">
@@ -15,7 +20,7 @@
         <div class="content">
             <h3 id="title">{title}</h3>
             <p id="summary-text">{summary}</p>
-            <p id="date">{creation_date}</p>
+            <p id="date">{human_creation_date.getDate()} {monthNames[human_creation_date.getMonth()]} {human_creation_date.getFullYear()}</p>
         </div>
     </a>
 </div>

src/routes/+layout.server.ts

@@ -17,6 +17,9 @@ type Summary = {
 export function load() {
     let summaries : Summary[] = [];
 
+    // Sort by newest news first
+    posts.sort((a, b) => b.creation_date - a.creation_date);
+
     posts.map((post) => {
         let summary : Summary = {
             url: post.url,