fix: fixed styling bug (prettier problem)

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';
@@ -12,12 +12,16 @@
 
 <svelte:head>
 	<link rel="icon" href={favicon} />
+	<meta property="og:type" content="website" />
 </svelte:head>
 
 <nav class="media-margin">
 	<a href="/">Home</a>
 	<a href="/about">About</a>
-	<a href="https://bsky.app/profile/amyt3a.bsky.social" aria-label="Link to my Bluesky account"
+	<a
+		href="https://bsky.app/profile/amyt3a.bsky.social"
+		aria-label="Link to my Bluesky account"
+		target="_blank"
 		><svg fill="none" class="bsky" viewBox="0 0 64 57"
 			><path
 				fill="var(--rp-moon-pine)"

src/routes/+page.server.ts

@@ -4,7 +4,9 @@ import type { MDsveXComponent } from '$lib/types';
 export interface BlogEntry {
     title: string;
     src: string;
+    src_target: string;
     img: string;
+    scale: string;
     date: string;
     desc: string;
 }
@@ -13,19 +15,30 @@ 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];
+            .map(([key, value]) => {
+                return {
+                    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_cov 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;
             })
-            .sort(([link1, a], [link2, b]) => b.metadata?.date - a.metadata?.date)
-            .map(([link, val]) => { return { src: link, title: val.metadata.title, img: val.metadata.img, date: new Date(val.metadata.date).toDateString(), desc: val.metadata.desc } })
     return {
         blogs: blog_entries
     };

src/routes/+page.svelte

@@ -4,23 +4,37 @@
 
 	let { data } = $props();
 	let blogs = data.blogs as BlogEntry[];
+	let desc =
+		"This is a collection of things I've set up and created that I think might interest others.";
 </script>
 
+<svelte:head>
+	<title>Home - Amys Blog</title>
+	<meta property="og:title" content="Home - Amys Blog" />
+	<meta property="og:description" content={desc} />
+	<meta property="og:image" content="https://madeio.net/blog-covers/flame.jpg" />
+</svelte:head>
+
 <main>
 	<div class="media-margin">
 		<h1>Hi, I'm Amy</h1>
-		<p>
-			This is a collection of things I've set up and created that I think might interest others.
-		</p>
+		<p>{desc}</p>
 	</div>
 	{#each blogs as blog (blog.src)}
-		<a href={blog.src} class="blog-entry">
-			<div>
+		<a href={blog.src} target={blog.src_target} class="blog-entry">
+			<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}
@@ -46,26 +60,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/about/+page.svelte

@@ -1,3 +1,8 @@
+<svelte:head>
+	<title>About - Amys Blog</title>
+	<meta property="og:title" content="About - Amys Blog" />
+</svelte:head>
+
 <main>
 	<div class="media-margin">
 		<h1>About</h1>

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

@@ -3,6 +3,8 @@ 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
+img_cov: blog-1.jpg
 ---
 
 
@@ -14,7 +16,7 @@ The stack consists of:
 
 The core functionallity provides which allow you to combine svelte and markdown.
 
-![Tasd|20rem](/blog-1.png)
+![Tasd|20rem](/blog-covers/blog-1.png)
 
 # Image sizing
 

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

@@ -1,7 +1,9 @@
 ---
 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."
+desc: "Using CLIs is very helpful, but setting up gitea actions in an LXC and using rootless Podman is not as straight forward as expected."
 date: 2025-09-17
+img_cov: gitea-logo.jpg
+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/blog.svelte

@@ -11,10 +11,19 @@
 	export let title;
 	export let date;
 	export let desc;
+	export let img_cov;
 
+	let ogImgage = 'https://madeio.net/blog-covers/' + (img_cov ?? 'flame.png').split('|')[0];
 	let ddate = new Date(Date.parse(date)).toDateString();
 </script>
 
+<svelte:head>
+	<title>{title} - Amys Blog</title>
+	<meta property="og:title" content={title} />
+	<meta property="og:description" content={desc} />
+	<meta property="og:image" content={ogImgage} />
+</svelte:head>
+
 <main>
 	<div class="title media-margin">
 		<!-- prettier-ignore -->

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_cov: 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_cov: flame.jpg
+img_bg: dark
 ---