feat: implemented open graph

.gitea/workflows/build.yaml

@@ -0,0 +1,61 @@
+
+
+name: Gitea Actions Demo
+run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
+on:
+  push:
+    branches:
+      - master
+
+jobs:
+  Build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Check out repository code
+        uses: actions/checkout@v5
+      - name: Setup Node v20
+        uses: actions/setup-node@v5
+        with:
+          node-version: 20 
+      - name: Install dependencies
+        run: |
+          cd ${{ gitea.workspace }}
+          npm ci
+      - name: Build
+        run: npm run build
+      - name: Save Build Artifact
+        uses: actions/upload-artifact@v3
+        with:
+          name: build-artifact
+          path: ${{ gitea.workspace }}/build/*
+          include-hidden-files: true
+
+  Upload:
+    runs-on: ubuntu-latest
+    needs: Build
+    steps:
+      - name: Download artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: build-artifact
+          path: ${{ gitea.workspace }}/build
+      - name: setup ssh
+        run: |
+          mkdir -p ~/.ssh/
+          echo "$SSH_PRIVATE_KEY" > ../private.key
+          sudo chmod 600 ../private.key
+          echo "$SSH_KNOWN_HOSTS" > ~/.ssh/known_hosts 
+        shell: bash
+        env:
+          SSH_PRIVATE_KEY: ${{secrets.SSH_KEY}}
+          SSH_KNOWN_HOSTS: ${{secrets.SSH_KNOWN_HOSTS}}
+      - name: upload to web
+        run: |
+          scp -r -i ${{ gitea.workspace }}/../private.key -P ${{ secrets.BLOG_PORT }} build blog@madeio.net:/var/www/html/
+          ssh -i ${{ gitea.workspace }}/../private.key -p ${{ secrets.BLOG_PORT }} blog@madeio.net "$PERM_COPY"
+        env:
+          PERM_COPY: chmod -R 775 /var/www/html/build; cp -r /var/www/html/build/* /var/www/html/; rm -r /var/www/html/build
+      - name: cleanup ssh
+        run: |
+          rm ${{ gitea.workspace }}/../private.key
+          rm ~/.ssh/known_hosts

.gitea/workflows/demo.yaml

@@ -1,24 +0,0 @@
-
-
-name: Gitea Actions Demo
-run-name: ${{ gitea.actor }} is testing out Gitea Actions 🚀
-on:
-  push:
-    branches:
-      - main
-
-jobs:
-  Build:
-    runs-on: ubuntu-latest
-    steps:
-      - run: echo "🎉 The job was automatically triggered by a ${{ gitea.event_name }} event."
-      - run: echo "🐧 This job is now running on a ${{ runner.os }} server hosted by Gitea!"
-      - run: echo "🔎 The name of your branch is ${{ gitea.ref }} and your repository is ${{ gitea.repository }}."
-      - name: Check out repository code
-        uses: actions/checkout@v5
-      - run: |
-          cd ${{ gitea.workspace }}
-      - run: npm i
-      - run: npm run build
-      - run: ls build 
-      - run: echo "🍏 This job's status is ${{ job.status }}."

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';
@@ -14,10 +14,13 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-<nav>
+<nav class="media-margin">
 	<a href="/">Home</a>
 	<a href="/about">About</a>
-	<a href="https://bsky.app/profile/amyt3a.bsky.social"
+	<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)"
@@ -27,3 +30,33 @@
 	>
 </nav>
 {@render children?.()}
+
+<style>
+	nav {
+		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;
+	}
+
+	.bsky {
+		display: block;
+		height: 2rem;
+		float: right;
+	}
+
+	nav a {
+		margin: 1rem;
+		margin-left: 0rem;
+		padding-left: 0rem;
+		#border-bottom: solid var(--rp-moon-foam);
+		color: var(--rp-moon-foam);
+		&:visited {
+			color: var(--rp-moon-foam);
+		}
+	}
+</style>

src/routes/+page.server.ts

@@ -0,0 +1,45 @@
+import type { SvelteComponent } from 'svelte';
+import type { MDsveXComponent } from '$lib/types';
+
+export interface BlogEntry {
+    title: string;
+    src: string;
+    src_target: string;
+    img: string;
+    scale: string;
+    date: string;
+    desc: string;
+}
+
+
+export function load() {
+    const blog_entries: BlogEntry[] =
+        Object.entries(import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true }))
+            .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;
+            })
+    return {
+        blogs: blog_entries
+    };
+}

src/routes/+page.svelte

@@ -1,61 +1,54 @@
 <script lang="ts">
-	import type { MDsveXComponent } from '$lib/types';
-	import type { SvelteComponent } from 'svelte';
 	import './style-entries.css';
+	import type { BlogEntry } from './+page.server.ts';
 
-	let blog_entries: [string, SvelteComponent][] = Object.entries(
+	let { data } = $props();
-		import.meta.glob('/src/routes/blogs/**/+page.svx', { eager: true })
+	let blogs = data.blogs as BlogEntry[];
-	).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])=>{
-        if(val.metadata)
-            val.metadata.date = Date.parse(val.metadata?.date);
-        return [link,val];
-    }
-    ).sort(([link1,a],[link2,b])=>b.metadata?.date-a.metadata?.date);
-    console.log(blog_entries);
 </script>
 
+<svelte:head>
+	<title>Home - Amys Blog</title>
+	<meta property="og:title" content="Home - Amys Blog" />
+</svelte:head>
+
 <main>
-    <div class="start">
+	<div class="media-margin">
-        <h1>Welcome to SvelteKit</h1>
+		<h1>Hi, I'm Amy</h1>
 		<p>
-            Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
+			This is a collection of things I've set up and created that I think might interest others.
 		</p>
 	</div>
-	{#each blog_entries as [href, page]}
+	{#each blogs as blog (blog.src)}
-		<a {href}>
+		<a href={blog.src} target={blog.src_target} class="blog-entry">
-			<div class="blog-entry">
+			<div class="blog-text">
-				<div>
+				<h4>{blog.title}</h4>
-					<h4>{page.metadata?.title}</h4>
+				<p>{blog.desc}</p>
-					<p>{page.metadata?.desc}</p>
+				<p class="date">{blog.date}</p>
-					<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
 			</div>
-				<img src="blog-1.png" class="blog-image" />
+			<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>
-		<br />
 		<!-- svelte:component this={page.default} /-->
 	{/each}
 </main>
 
 <style>
-
-    .start {
-        padding: var(--d2);
-    }
-
 	.blog-entry {
+		display: block;
+		margin: var(--d3) 0;
 		background: var(--rp-moon-surface);
 		border-radius: var(--border-round);
 		width: 100%;
 		color: var(--rp-moon-text);
 		display: flex;
 		flex-flow: row wrap;
-		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75));
+		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
 		transition: 0.2s;
 	}
 
@@ -65,26 +58,46 @@
 		transition: 0.2s;
 	}
 
-	.blog-entry div {
+	.blog-text {
-		width: calc(100% - 15rem - var(--d2) * 2);
+		width: calc(100% - 15rem - var(--d3) * 2);
-		padding: var(--d2);
+		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(--d2) * 2);
+			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);
-			border-radius: 0 0rem var(--border-round)  var(--border-round) ;
 		}
 	}
 

src/routes/about/+page.svelte

@@ -0,0 +1,14 @@
+<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>
+		<p>
+			Hi, I'm Amy Retzerau! I'm a computer science student who wants to share my hobby in the hope
+			of helping like-minded people.
+		</p>
+	</div>
+</main>

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.png
 ---
 
 
@@ -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

@@ -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_cov: 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/a.svelte

@@ -0,0 +1,7 @@
+<script lang="ts">
+	export let href;
+
+	let target = href.includes('https://') || href.includes('http://') ? '_blank' : '';
+</script>
+
+<a {href} {target}><slot /></a>

src/routes/blogs/blog.svelte

@@ -1,25 +1,36 @@
 <script context="module">
 	import img from './img.svelte';
+	import a from './a.svelte';
 	import h1 from './h1.svelte';
 	import h2 from './h2.svelte';
 	import h3 from './h3.svelte';
-	export { img, h1, h2, h3 };
+	export { img, a, h1, h2, h3 };
 </script>
 
 <script>
 	export let title;
 	export let date;
 	export let desc;
+	export let img_cov;
 
-	let ddate = new Date(Date.parse(date));
+	let ogImgage = '/blog-covers/' + img_cov.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">
+	<div class="title media-margin">
 		<!-- prettier-ignore -->
-		<h1>{title}</h1><p class="date">Last updated {ddate.toDateString()}</p>
+		<h1>{title}</h1>
+		<p class="date">Last updated {ddate}</p>
 	</div>
-	<div class="blog-text">
+	<div class="blog-text media-margin">
 		<p>{desc}</p>
 		<slot>
 			<!-- the mdsvex content will be slotted in here -->
@@ -33,18 +44,8 @@
 		border-radius: 1rem;
 	}
 
-	.title {
-		padding: 0 var(--d3) 0;
-		#display: table;
-		flex-wrap: row;
-		#height: 5rem;
-		margin-bottom: -12px;
-		#white-space: nowrap;
-	}
-
 	.title h1 {
 		width: calc(100% - 15rem);
-		margin: 0;
 		vertical-align: baseline;
 		display: inline-block;
 	}
@@ -57,6 +58,12 @@
 		#float: right;
 	}
 
+	.blog-text {
+		border-radius: var(--border-round);
+		#background: var(--rp-moon-surface);
+		#box-shadow: 0px 0px 0.5rem 0px hsl(from var(--rp-moon-pine) h calc(s * 0.5) calc(l * 0.25));
+	}
+
 	@media only screen and (max-width: 700px) {
 		.title {
 			margin-bottom: -5.3px;
@@ -71,11 +78,4 @@
 			width: 100%;
 		}
 	}
-
-	.blog-text {
-		border-radius: var(--border-round);
-		background: var(--rp-moon-surface);
-		box-shadow: 0px 0px 0.5rem 0px hsl(from var(--rp-moon-pine) h calc(s * 0.5) calc(l * 0.25));
-		padding: var(--d2) var(--d3) var(--d4);
-	}
 </style>

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.png
+img_bg: dark
 ---

src/routes/blogs/style-blog.css

@@ -1,10 +0,0 @@
-.blog-text{
-    border-radius: 0.5rem;
-    background: var(--rp-moon-surface);
-    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
-    margin: -1rem;
-    padding: 1rem;
-}
-
-
-

src/routes/style.css

@@ -1,5 +1,3 @@
-@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap');
-
 @font-face {
     font-family: 'fira';
     font-style: normal;
@@ -49,14 +47,14 @@ body {
 }
 
 code {
-    background: var(--rp-moon-base);
+    background: var(--rp-moon-surface) !important;
     padding: 3px;
     border-radius: 0.5rem;
     font-family: fira;
 }
 
 pre {
-    background: var(--rp-moon-base);
+    background: var(--rp-moon-surface) !important;
     border-radius: 0.5rem;
 }
 
@@ -78,35 +76,7 @@ h1,h2,h3,h4,p:first-child {
 }
 
 
-nav {
-    margin-top: 1rem;
-
-    padding: 0 var(--d3) 0;
-
-    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;
-}
-
-nav a{
-    margin: 1rem;
-    margin-left: 0rem;
-    padding-left: 0rem;
-    color: var(--rp-moon-foam);
-    #text-decoration: underline;
-    &:visited {
-        color: var(--rp-moon-foam);
-    }
-}
-
 main {
-    #padding: 0 2rem 2rem;
-    margin-top: var(--d3);
     width: 100%;
     #box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
 }
@@ -121,11 +91,6 @@ hr {
     color: var(--rp-moon-muted);
 }
 
-.bsky{
-    display:block;
-    height: 2rem;
-    float:right;
-}
 
 h1{font-size: 2.986rem}
 h2{font-size: 2.488rem}
@@ -147,4 +112,14 @@ h4{
     color: var(--rp-moon-foam);
 }
 
+.media-margin{
+    margin: var(--d3);
+}
+
+@media only screen and (max-width: 700px) {
+    .media-margin{ 
+        margin: var(--d3) var(--d1);
+    }
+}
+