Key webpages in each statement to fix silly rendering issue

Author: SamuelmdLow

src/app.html

@@ -164,6 +164,30 @@
 					}
 				}
 			}
+			.o-card--domain-header {
+				display: flex;
+				width: fit-content;
+				margin-inline: auto;
+					&.no-image {
+						text-align: center;
+					}
+					img.domain {
+						width: 2em;
+						border-radius: 0.5em;
+					}
+					.o-card--domain-header-title {
+						margin-block: auto;
+						padding-inline: 0.75em;
+						font-size: 0.75em;
+						text-transform: uppercase;
+						font-weight: 600;
+						
+						a {
+							color: white;
+							text-decoration: none;
+						}
+					}
+				}
 			.o-hidden-add-form {
 				display: inline-block;
 				height: 0;

src/lib/CardDomainHeader.svelte

@@ -8,40 +8,15 @@
             return 'no-image';
         }
     }
+
+    let src = $derived(domain.image);
 </script>
 
 <div class="o-card--domain-header {is_image(domain)}">
     {#if domain.image != "" && domain.image != null}
     <a href="/domain/{domain.id}">
-        <img class="domain" src="{domain.image}" alt="{domain.title}">
+        <img class="domain" {src} alt={domain.title}>
     </a>
     {/if}
     <div class="o-card--domain-header-title"><a href="/domain/{domain.id}">{domain.title}</a></div>
-</div>
-
-<style lang="scss">
-    .o-card--domain-header {
-    display: flex;
-    width: fit-content;
-    margin-inline: auto;
-    &.no-image {
-        text-align: center;
-    }
-    img.domain {
-        width: 2em;
-        border-radius: 0.5em;
-    }
-    .o-card--domain-header-title {
-        margin-block: auto;
-        padding-inline: 0.75em;
-        font-size: 0.75em;
-        text-transform: uppercase;
-        font-weight: 600;
-        
-        a {
-            color: white;
-            text-decoration: none;
-        }
-    }
-}
-</style>
+</div>

src/lib/DomainWall.svelte

@@ -60,7 +60,7 @@
     <div class="o-month">
         <h3>{month}</h3>
         <div class="c-domain-wall">
-            {#each domainsByMonth[month].sort((({time_updated}) => time_updated)).reverse() as domain}
+            {#each domainsByMonth[month].sort((({time_updated}) => -time_updated)) as domain}
                 <DomainCard domain={domain}/>      
             {/each}
         </div>

src/lib/WebpageWall.svelte

@@ -13,7 +13,7 @@
 <div class="o-month">
     <h3>{month}</h3>
     <div class="c-domain-wall">
-        {#each webpagesByMonth[month].sort((({time_updated}) => time_updated)).reverse() as webpage}
+        {#each webpagesByMonth[month].sort((({time_updated}) => -time_updated)) as webpage (webpage.id)}
             <WebpageCard webpage={webpage}/>      
         {/each}
     </div>

src/routes/(authed)/+page.server.js

@@ -1,7 +1,5 @@
 import { redirect } from '@sveltejs/kit';
 
-import { getPrettyDateString } from '$lib/timeMethods';
-
 export async function load() {
 
     let webpages = [];
@@ -25,7 +23,7 @@ export async function load() {
     }
 
     return {
-        "webpagesByDay": Object.groupBy(webpages, (({time_updated}) => getPrettyDateString(time_updated)))
+        "webpages": webpages
     }
 
     }

src/routes/(authed)/+page.svelte

@@ -1,13 +1,16 @@
 <script>
     import Header from "$lib/Header.svelte";
     import WebpageWall from "$lib/WebpageWall.svelte";
+    import { getPrettyDateString } from '$lib/timeMethods';
     let {data} = $props();
 
     const info = {
         "title": "Thoth",
         "description": "Perhaps the beginning but never the end..."
     }
+
+    let webpagesByDay = $derived(Object.groupBy(data.webpages, (({time_updated}) => getPrettyDateString(time_updated))));
 </script>
 
 <Header info={info} />
-<WebpageWall webpagesByMonth={data.webpagesByDay} />
+<WebpageWall webpagesByMonth={webpagesByDay} />