feat: added images to blog entries

2

@@ -1,135 +0,0 @@
-@import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
-
-.fraunces-me {
- }
-
-body {
-	color: var(--rp-moon-text);
-	background: var(--rp-moon-base);
-    padding: 0;
-    margin: 0;
-    text-align: justify; 
-}
-
-pre {
-    background: var(--rp-moon-base);
-    border-radius: 0.5rem;
-}
-
-a {
-    color: var(--rp-moon-iris);
-    text-decoration: none;
-}
-
-a:visited {
-    color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
-}
-
-.nav { 
-    margin: auto;
-    margin-top: 1rem;
-
-    padding: 2rem;
-    max-width: 60rem;
-    width: calc(100%-4rem);
-
-    font-family: "Fraunces", serif;
-    font-optical-sizing: auto;
-    font-weight: 400;
-    font-style: normal;
-    font-variation-settings:
-        "SOFT" 0,
-        "WONK" 0;
-    font-size:1.728rem;
-}
-
-a.nav{
-    margin: 1rem;
-    margin-left: 0rem;
-    padding-left: 0rem;
-    color: var(--rp-moon-text);
-}
-
-.main {
-    background: var(--rp-moon-surface);
-    padding: 1rem;
-    margin: auto;
-    margin-top: 1rem;
-    max-width: 60rem;
-    width: calc(100%-4rem);
-    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
-    border-radius: 0.5rem;
-}
-
-hr {
-    color: var(--rp-moon-muted);
-}
-
-
-
-.blog-entry{
-    background: var(--rp-moon-overlay);
-    padding-left: 0.5rem;
-    border-radius: 0.5rem;
-    #display: block;
-    #height:10rem;
-    width:100%;
-    color: var(--rp-moon-text) !important;
-    text-decoration : none !important;
-    display: flex;
-}
-
-
-
-.blog-entry:hover{
-    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-surface) h s calc(l * 0.85));
-    transition: 0.15s;
-}
-
-.blog-entry div {
-    width: calc(100% - 15rem);
-    min-width: 20rem;
-}
-
-
-
-.blog-entry img{
-    #height:100%;
-    width:15rem;
-    object-fit: cover;
-    border-radius: 0 0.5rem 0.5rem 0;
-}
-
-@media only screen and (max-width: 600px) {
-    .blog-entry div {
-        width: 100%;
-    }
-
-    .blog-entry img {
-        width: 100%;
-    }
-}
-
-.blog-entry h4{
-    margin-top:1rem;
-}
-
-
-h1{font-size: 2.986rem}
-h2{font-size: 2.488rem}
-h3{font-size: 2.074rem}
-h4{font-size: 1.728rem}
-
- h1, h2, h3, h4{
-    font-family: "Fraunces", serif;
-    font-optical-sizing: auto;
-    font-weight: 400;
-    font-style: normal;
-    text-align: left;
-    font-variation-settings:
-        "SOFT" 0,
-        "WONK" 0;
-}
-
-

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import favicon from '$lib/assets/favicon.svg';
+	import favicon from '/favicon.png';
 	import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
 	import '/node_modules/@rose-pine/palette/dist/css/rose-pine-hsl.css';
 	import 'prism-rose-pine/dist/prism-rose-pine-moon.css';

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]) => [
-                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]) => {
+            .map(([key, value]) => {
                 return {
-                    src: link,
-                    src_target: (link.includes('https://') || link.includes('http://')) ? '_blank' : '',
-                    title: val.metadata.title,
-                    img: val.metadata.img,
-                    date: new Date(val.metadata.date).toDateString(),
-                    desc: val.metadata.desc
-                }
+                    src: key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
+                    metadata: (value as MDsveXComponent).metadata
+                } as Record<string, any>
+            })
+            .filter(entry => entry.metadata.listed)
+            .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);
 		}
 	}

src/routes/blogs/0-The-Creation-of-this-Blog/+page.svx

@@ -3,6 +3,7 @@ title: "The creation of this Blog"
 date: 2025-09-12
 desc: "The goal was to create an easy to maintain blog with while the main focus relays on keeping the effort
 to write new posts minimal. This is more a ressource summery with tips, than an full tutorial."
+listed: true
 ---
 
 

src/routes/blogs/1-64k-Demo/+page.svx

@@ -2,6 +2,7 @@
 title: "64k Demo"
 date: 2025-09-15
 desc: "Dev Diary of the Demo"
+listed: false
 ---
 
 asd

src/routes/blogs/2-gitea-runner-on-podman-in-lxc/+page.svx

@@ -2,6 +2,8 @@
 title: Setup up Gitea Runner with Podman in LXC
 desc: "For some time now I already host a gitea instace and now with this blog I finally have some real usage for CI, but setting up gitea actions in an LXC and using Podman instead of Docker Engine was not as straight forward as expected."
 date: 2025-09-17
+img: gitea-logo.png|0.8
+listed: true
 ---
 
 # Setup PVE
@@ -125,14 +127,11 @@ systemctl edit user@1001 --drop-in=start_act_runner
 and inserting
 
 ```ini
-[Unit]
-After=gitea.service
-
 [Install]
 WantedBy=multi-user.target
 ```
 
 In the end, all left to do is, enable the user:
 ```bash
-systemctl status user@1001
+systemctl enable --now user@<USER_ID>
 ```

src/routes/blogs/e-FemDev-GameJam/+page.svx

@@ -4,4 +4,6 @@ date: 2024-11-10
 src: "https://elkortes.itch.io/catastrophe"
 desc: "I took part in the amazing FemDev Game and helped to creathe this little game.
 My work are the animations, 3d Models and some texturing"
+listed: true
+img: catastrophe.png
 ---

src/routes/blogs/e-Flame/+page.svx

@@ -3,4 +3,7 @@ title: "Flame Demo"
 date: 2024-11-26
 src: "https://madeio.net/fox"
 desc: "A WebGL Project wich shows that deffered rendering and volumetric fog is very possible in Three.js"
+listed: true
+img: flame.png
+img_bg: dark
 ---