feat: started to write deploy ci

.gitea/workflows/demo.yaml

@@ -0,0 +1,24 @@
+
+
+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 }}."

src/routes/+layout.svelte

@@ -1,9 +1,12 @@
 <script lang="ts">
 	import favicon from '$lib/assets/favicon.svg';
 	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';
 	import './style.css';
 
+	import './style.css';
+
 	let { children } = $props();
 </script>
 
@@ -11,11 +14,16 @@
 	<link rel="icon" href={favicon} />
 </svelte:head>
 
-<div class="nav">
-	<a class="nav" href="/">Home</a>
-	<a class="nav" href="/about">About</a>
-</div>
-
-<div class="main">
-	{@render children?.()}
-</div>
+<nav>
+	<a href="/">Home</a>
+	<a href="/about">About</a>
+	<a href="https://bsky.app/profile/amyt3a.bsky.social"
+		><svg fill="none" class="bsky" viewBox="0 0 64 57"
+			><path
+				fill="var(--rp-moon-pine)"
+				d="M13.873 3.805C21.21 9.332 29.103 20.537 32 26.55v15.882c0-.338-.13.044-.41.867-1.512 4.456-7.418 21.847-20.923 7.944-7.111-7.32-3.819-14.64 9.125-16.85-7.405 1.264-15.73-.825-18.014-9.015C1.12 23.022 0 8.51 0 6.55 0-3.268 8.579-.182 13.873 3.805ZM50.127 3.805C42.79 9.332 34.897 20.537 32 26.55v15.882c0-.338.13.044.41.867 1.512 4.456 7.418 21.847 20.923 7.944 7.111-7.32 3.819-14.64-9.125-16.85 7.405 1.264 15.73-.825 18.014-9.015C62.88 23.022 64 8.51 64 6.55c0-9.818-8.578-6.732-13.873-2.745Z"
+			></path></svg
+		></a
+	>
+</nav>
+{@render children?.()}

src/routes/+page.svelte

@@ -3,27 +3,36 @@
 	import type { SvelteComponent } from 'svelte';
 	import './style-entries.css';
 
-	const blog_entries: [string, SvelteComponent][] = Object.entries(
+	let blog_entries: [string, SvelteComponent][] = 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])=>{
+        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>
 
 <main>
+    <div class="start">
         <h1>Welcome to SvelteKit</h1>
         <p>
             Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation
         </p>
+    </div>
 	{#each blog_entries as [href, page]}
 		<a {href}>
-			<div class="blog-entry" {href}>
+			<div class="blog-entry">
 				<div>
 					<h4>{page.metadata?.title}</h4>
 					<p>{page.metadata?.desc}</p>
-					<p class="date">{new Date(Date.parse(page.metadata?.date)).toDateString()}</p>
+					<p class="date">{new Date(page.metadata?.date).toDateString()}</p>
 				</div>
 				<img src="blog-1.png" class="blog-image" />
 			</div>
@@ -32,3 +41,55 @@
 		<!-- svelte:component this={page.default} /-->
 	{/each}
 </main>
+
+<style>
+
+    .start {
+        padding: var(--d2);
+    }
+
+	.blog-entry {
+		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));
+        transition: 0.2s;
+	}
+
+	.blog-entry:hover {
+		box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.55));
+		background: var(--rp-moon-overlay);
+		transition: 0.2s;
+	}
+
+	.blog-entry div {
+		width: calc(100% - 15rem - var(--d2) * 2);
+		padding: var(--d2);
+	}
+
+	.blog-entry img {
+		width: 15rem;
+		object-fit: cover;
+		border-radius: 0 var(--border-round) var(--border-round) 0;
+	}
+
+	@media only screen and (max-width: 700px) {
+		.blog-entry div {
+			width: calc(100% - var(--d2) * 2);
+		}
+
+		.blog-entry img {
+			width: 100%;
+			max-height: 14rem;
+			border-radius: 0 0rem var(--border-round)  var(--border-round) ;
+		}
+	}
+
+	.blog-entry h4 {
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+</style>

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

@@ -1,13 +1,12 @@
 ---
 title: "The creation of this Blog"
-layout: 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."
 ---
 
 
-## Static side generation
+# Static side generation
 The stack consists of:
 - [svelte + svelte-kit](https://svelte.dev/docs/kit/introduction)
 - [mdsvex](https://mdsvex.pngwn.io/) 
@@ -17,7 +16,7 @@ The core functionallity provides which allow you to combine svelte and markdown.
 
 ![Tasd|20rem](/blog-1.png)
 
-## Image sizing
+# Image sizing
 
 I want to be able to rezise an image in markdown without using HTML,
 just like in obsidian, by declaring the width after the alt text `![some alt text|<width>](/some-image.png)`.
@@ -47,7 +46,7 @@ And then needs to be imported in the mdsvex layout:
 This is desctibed in furhter details by the [mdsvex docs](https://mdsvex.pngwn.io/docs#custom-components)
 and this [issue](https://github.com/pngwn/MDsveX/discussions/292).
 
-## Colors
+# Colors
 
 I love the [rose pine](https://rosepinetheme.com/) color palette. I use it privatly for some applications,
 and think it improves this blog too.

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

@@ -0,0 +1,7 @@
+---
+title: "64k Demo"
+date: 2025-09-15
+desc: "Dev Diary of the Demo"
+---
+
+asd

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

@@ -0,0 +1,138 @@
+---
+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
+---
+
+# Setup PVE
+
+
+Setup Proxmox, so podman can run in unpreviliged container.
+Podman uses high user ids for it's containers, so we need to extend the range that is usable by LXCs.
+
+
+It is also required to change the limit explictly in the containers config, and we need to add a kernel module.
+Those ranges are defined in `/etc/subuid` for user ids and  `/etc/subgid` for group ids,
+in the from of `<usr>:<start_uid>:<count>`.
+You could change them manually or change them with
+
+(the first number defines the start and the secound the end of ids)
+
+```bash
+usermod --add-subuids 100000-300000 --add-subgids 100000-300000 root
+```
+
+So `/etc/subuid` should contains `root:100000:200000`.
+
+We also need to edit the LXC config `/etc/pve/lxc/<VMID>.conf`.
+
+```yaml
+# <container_uid> <host_uid> <count>
+lxc.idmap: u 0 100000 165536 # uids 0..165536 (container) -> 100000..265536 (host)
+lxc.idmap: g 0 100000 165536 # gids
+lxc.cgroup2.devices.allow: c 10:200 rwm  # cgroup2 for PVE >= 7.0
+lxc.mount.entry: /dev/net dev/net none bind,create=dir
+```
+
+I got the information from [here](https://forum.proxmox.com/threads/podman-in-rootless-mode-on-lxc-container.141790/)
+together with infos from the [official docu](https://github.com/containers/podman/blob/main/docs/tutorials/rootless_tutorial.md#etcsubuid-and-etcsubgid-configuration).
+
+
+# Setup LXC
+
+As we want to run podman as an unpreviliged user, lets create on:
+```bash
+useradd -U <USER_NAME>
+```
+
+```bash
+apt install podman
+systemctl --user -M act@ enable podman.socket
+```
+
+First, since we wanna run this rootless, we need a new unpreviliged user.
+
+The binary is [here available](https://dl.gitea.com/act_runner/).
+I placed it there `/usr/local/bin/act_runner` and made it executable by the new created user.
+```bash
+cd /usr/local/bin
+curl https://dl.gitea.com/act_runner/0.2.13/act_runner-0.2.13-linux-amd64 > act_runner
+chmod +x act_runner
+chown act:act act_runner
+```
+
+A config that references the regrister file and the podman socket is needed, I placed it in
+`/etc/act_runner/config.yaml`
+
+``` bash
+mkdir /etc/act_runner
+chown -R act:act /etc/act_runner
+```
+
+
+```yaml
+# config.yaml
+runner:
+  file: /etc/act_runner/.runner
+  envs:
+    XDG_RUNTIME_DIR directory: "/run/user/1000"
+
+container:
+  docker_host: "unix:///run/user/<USER_ID>/podman/docker.sock"
+
+cache:
+  # Enable cache server to use actions/cache.
+  enabled: true
+  # The directory to store the cache data.
+  # If it's empty, the cache data will be stored in $HOME/.cache/actcache.
+  dir: "/etc/act_runner/cache"
+```
+
+And last but not least, we need to regristrate the runner, wich will create the runner file:
+The token is accsasible through `Settings -> Actions -> Runners -> Create new Runner`. 
+
+(I'd recommend running the regristration as the unpreviliged user.)
+```bash
+/usr/local/bin/act_runner register -c /etc/act_runner/config.yaml \
+    --instance <GITEA ADRESS> --token <TOKEN>
+    --no-interactive
+```
+
+### Create Act Runner User Service
+Create a user service in in the following file: `/usr/lib/systemd/user/act_runner.servic`
+```ini
+Description=Gitea Actions runner
+Documentation=https://gitea.com/gitea/act_runner
+After=podman.socket
+
+[Service]
+ExecStart=/usr/local/bin/act_runner daemon -c /etc/act_runner/config.yaml
+Delegate=true
+Type=simple
+
+[Install]
+WantedBy=default.target
+```
+
+## Auto start user Services
+
+To start the user services, you can add a drop-in and add the Install, by running:
+
+```bash
+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
+```

src/routes/blogs/blog.svelte

@@ -1,6 +1,9 @@
 <script context="module">
 	import img from './img.svelte';
-	export { img };
+	import h1 from './h1.svelte';
+	import h2 from './h2.svelte';
+	import h3 from './h3.svelte';
+	export { img, h1, h2, h3 };
 </script>
 
 <script>
@@ -9,14 +12,13 @@
 	export let desc;
 
 	let ddate = new Date(Date.parse(date));
-	import './style-blog.css';
 </script>
 
-export let alt;
-
-<h1>{title}</h1>
 <main>
-	<p class="date">Last updated {ddate.toDateString()}</p>
+	<div class="title">
+		<!-- prettier-ignore -->
+		<h1>{title}</h1><p class="date">Last updated {ddate.toDateString()}</p>
+	</div>
 	<div class="blog-text">
 		<p>{desc}</p>
 		<slot>
@@ -27,6 +29,53 @@ export let alt;
 
 <style>
 	main {
-		background-color: var(--rp-moon-surface);
+		padding: 0;
+		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;
+	}
+
+	.title p {
+		width: 15rem;
+		display: inline-block;
+		text-align: right;
+		margin: 0;
+		#float: right;
+	}
+
+	@media only screen and (max-width: 700px) {
+		.title {
+			margin-bottom: -5.3px;
+		}
+
+		.title h1 {
+			display: block;
+			width: 100%;
+		}
+
+		.title p {
+			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

@@ -1,5 +1,5 @@
 ---
-title: "FemDev GameJam - Catrastrophe"
+title: "FemDev GameJam - Catastrophe"
 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.

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

@@ -0,0 +1,6 @@
+---
+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"
+---

src/routes/blogs/h1.svelte

@@ -0,0 +1 @@
+<h2><slot /></h2>

src/routes/blogs/h2.svelte

@@ -0,0 +1 @@
+<h3><slot /></h3>

src/routes/blogs/h3.svelte

@@ -0,0 +1 @@
+<h4><slot /></h4>

src/routes/style.css

@@ -1,12 +1,58 @@
 @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;
+    font-weight: 500;
+    src: url('/fonts/FiraCode-Regular.ttf') format('truetype');
+}
+
+@font-face {
+    font-family: 'Fraunces';
+    font-style: normal;
+    font-weight: 100 900;
+    src: url('/fonts/Fraunces.woff2') format('woff2');
+}
+
+@font-face {
+    font-family: 'Inter';
+    font-style: normal;
+    font-weight: 400;
+    src: url('/fonts/Inter.ttf') format('truetype');
+}
+
+:root{
+    --d1:1.0rem;
+    --d2:1.5rem;
+    --d3:2.25rem;
+    --d4:3.375rem;
+    --d5:5.0625rem;
+    --d6:7.59375rem;
+    --d7:11.390625rem;
+    --d8:17.0859375rem;
+    --d9:25.62890625rem;
+    --d10:38.443359375rem;
+
+    --border-round:var(--d2);
+}
+
 
 body {
 	color: var(--rp-moon-text);
 	background: var(--rp-moon-base);
     padding: 0;
-    margin: 0;
+    max-width: 60rem;
+    width:100%;
+    margin: auto;
     text-align: justify;
+    font-family: Inter;
+}
+
+code {
+    background: var(--rp-moon-base);
+    padding: 3px;
+    border-radius: 0.5rem;
+    font-family: fira;
 }
 
 pre {
@@ -14,23 +60,28 @@ pre {
     border-radius: 0.5rem;
 }
 
+pre code{
+    padding:0px;
+}
+
 a {
     color: var(--rp-moon-iris);
     text-decoration: none;
-}
 
-a:visited {
+    &:visited {
         color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
+    }
+}
+
+h1,h2,h3,h4,p:first-child {
+	#margin-top: 0;
 }
 
 
-.nav { 
-    margin: auto;
+nav {
     margin-top: 1rem;
 
-    padding: 1rem;
-    max-width: 60rem;
-    width: calc(100% - 2rem);
+    padding: 0 var(--d3) 0;
 
     font-family: "Fraunces", serif;
     font-optical-sizing: auto;
@@ -42,32 +93,39 @@ a:visited {
     font-size:1.728rem;
 }
 
-a.nav{
+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: 1rem;
-    margin: auto;
-    #margin-top: 1rem;
-    max-width: 60rem;
-    width: calc(100% - 2rem);
+    #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));
 }
 
 .date{
     text-align: right;
-    color: var(--rp-moon-subtle)
+    color: var(--rp-moon-subtle);
+    font-family: Fraunces;
 }
 
 hr {
     color: var(--rp-moon-muted);
 }
 
+.bsky{
+    display:block;
+    height: 2rem;
+    float:right;
+}
 
 h1{font-size: 2.986rem}
 h2{font-size: 2.488rem}
@@ -86,7 +144,7 @@ h4{font-size: 1.728rem}
 }
 
 h4{
-    color: var(--rp-moon-rose);
+    color: var(--rp-moon-foam);
 }
 
 

svelte.config.js

@@ -10,13 +10,15 @@ const __dirname = dirname(__filename);
 
 const path_to_layout = join(__dirname, './src/routes/blogs/blog.svelte');
 
+
+
 /** @type {import('@sveltejs/kit').Config} */
 const config = {
     // Consult https://svelte.dev/docs/kit/integrations
     // for more information about preprocessors
     preprocess: [vitePreprocess(), mdsvex({
         layout: {
-            blog: path_to_layout
+            _: path_to_layout
         }
     })],
     kit: {