refactor: changed svelts server processing

src/routes/+page.server.ts

@@ -6,6 +6,7 @@ export interface BlogEntry {
     src: string;
     src_target: string;
     img: string;
+    scale: string;
     date: string;
     desc: string;
 }
@@ -14,27 +15,29 @@ export interface BlogEntry {
 export function load() {
     const blog_entries: BlogEntry[] =
         Object.entries(import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true }))
-            .map(([key, value]) => [
+            .map(([key, value]) => {
-                key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
-                value as MDsveXComponent
-            ])
-            .map(([link, val]) =>
-                typeof val.metadata?.src !== 'undefined' ? [val.metadata?.src, val] : [link, val]
-            )
-            .map(([link, val]) => {
-                val.metadata.date = Date.parse(val.metadata.date);
-                return [link, val];
-            })
-            .sort(([link1, a], [link2, b]) => b.metadata?.date - a.metadata?.date)
-            .map(([link, val]) => {
                 return {
-                    src: link,
+                    src: key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
-                    src_target: (link.includes('https://') || link.includes('http://')) ? '_blank' : '',
+                    metadata: (value as MDsveXComponent).metadata
-                    title: val.metadata.title,
+                } as Record<string, any>
-                    img: val.metadata.img,
+            })
-                    date: new Date(val.metadata.date).toDateString(),
+            .filter(entry => entry.metadata.listed)
-                    desc: val.metadata.desc
+            .map(entry => {
-                }
+                entry.src = (entry.metadata.src ?? entry.src) as string;
+                entry.title = entry.metadata.title as string ?? "Needs Title!!";
+                entry.desc = entry.metadata.desc as string ?? "Needs Description!!";
+                entry.date = Date.parse(entry.metadata.date as string ?? "");
+                entry.src_target = (entry.src.includes('https://') || entry.src.includes('http://')) ? '_blank' : '';
+                [entry.img, entry.scale = ""] = (entry.metadata?.img as string ?? "blog-1.png").split('|');
+                entry.img_bg = entry.metadata.img_bg == "dark" ? "var(--rp-moon-base" : "var(--rp-moon-text)";
+                entry.scale = (entry.scale == "") ? "" : "transform: scale(" + entry.scale + "); height:auto;border-radius:0;";
+
+                return entry;
+            })
+            .sort((a, b) => b.date - a.date)
+            .map((entry) => {
+                entry.date = new Date(entry.date).toDateString();
+                return entry as BlogEntry;
             })
     return {
         blogs: blog_entries

src/routes/+page.svelte

@@ -20,12 +20,19 @@
 	</div>
 	{#each blogs as blog (blog.src)}
 		<a href={blog.src} target={blog.src_target} class="blog-entry">
-			<div>
+			<div class="blog-text">
 				<h4>{blog.title}</h4>
 				<p>{blog.desc}</p>
 				<p class="date">{blog.date}</p>
 			</div>
-			<img src="blog-1.png" alt="Preview of the described article" />
+			<div class="blog-img" style={'background-color:' + blog.img_bg}>
+				<span style="display: inline-block;height: 100%;vertical-align: middle;"></span><img
+					src={'/blog-covers/' + blog.img}
+					alt="Preview of the described article"
+					style={blog.scale}
+				/>
+				<!---->
+			</div>
 		</a>
 		<!-- svelte:component this={page.default} /-->
 	{/each}
@@ -51,26 +58,45 @@
 		transition: 0.2s;
 	}
 
-	.blog-entry div {
+	.blog-text {
 		width: calc(100% - 15rem - var(--d3) * 2);
 		padding: var(--d3);
 	}
 
+	.blog-img {
+		width: 15rem;
+		margin: 0;
+		padding: 0;
+		background-color: var(--rp-moon-text);
+		border-radius: 0 calc(var(--border-round) + 3px) calc(var(--border-round) + 3px) 0;
+	}
+
 	.blog-entry img {
 		width: 15rem;
+		display: inline-block;
+		vertical-align: middle;
+		height: 100%;
 		object-fit: cover;
 		border-radius: 0 var(--border-round) var(--border-round) 0;
 	}
 
 	@media only screen and (max-width: 700px) {
-		.blog-entry div {
+		.blog-text {
 			width: calc(100% - var(--d1) * 2);
 			padding: var(--d1);
 		}
 
+		.blog-img {
+			border-radius: 0 0rem var(--border-round) var(--border-round);
+			max-height: 10rem;
+		}
+
+		.blog-img {
+			width: 100%;
+		}
+
 		.blog-entry img {
 			width: 100%;
-			max-height: 14rem;
 			border-radius: 0 0rem var(--border-round) var(--border-round);
 		}
 	}