fix: fixed styling bug (prettier problem)

.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

package-lock.json

@@ -7,6 +7,11 @@
 		"": {
 			"name": "blog",
 			"version": "0.0.1",
+			"dependencies": {
+				"@rose-pine/palette": "github:rose-pine/rose-pine-palette",
+				"prism-rose-pine": "github:rose-pine/prism#main",
+				"svelte-preprocess": "^6.0.3"
+			},
 			"devDependencies": {
 				"@eslint/compat": "^1.2.5",
 				"@eslint/js": "^9.18.0",
@@ -698,7 +703,6 @@
 			"version": "0.3.13",
 			"resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
 			"integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.0",
@@ -709,7 +713,6 @@
 			"version": "2.3.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/remapping/-/remapping-2.3.5.tgz",
 			"integrity": "sha512-LI9u/+laYG4Ds1TDKSJW2YPrIlcVYOwi2fUC6xB43lueCjgxV4lffOCZCtYFiH6TNOX+tQKXx97T4IKHbhyHEQ==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/gen-mapping": "^0.3.5",
@@ -720,7 +723,6 @@
 			"version": "3.1.2",
 			"resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
 			"integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6.0.0"
@@ -730,14 +732,12 @@
 			"version": "1.5.5",
 			"resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
 			"integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@jridgewell/trace-mapping": {
 			"version": "0.3.30",
 			"resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
 			"integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/resolve-uri": "^3.1.0",
@@ -1083,6 +1083,17 @@
 				"win32"
 			]
 		},
+		"node_modules/@rose-pine/palette": {
+			"version": "4.0.1",
+			"resolved": "git+ssh://git@github.com/rose-pine/rose-pine-palette.git#20998b7abfc40a47d73586140e01d71f53e7e405",
+			"license": "MIT",
+			"engines": {
+				"node": ">=16"
+			},
+			"funding": {
+				"url": "https://github.com/rose-pine/palette?sponsor=1"
+			}
+		},
 		"node_modules/@standard-schema/spec": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@standard-schema/spec/-/spec-1.0.0.tgz",
@@ -1094,7 +1105,6 @@
 			"version": "1.0.5",
 			"resolved": "https://registry.npmjs.org/@sveltejs/acorn-typescript/-/acorn-typescript-1.0.5.tgz",
 			"integrity": "sha512-IwQk4yfwLdibDlrXVE04jTZYlLnwsTT2PIOQQGNLWfjavGifnk1JD1LcZjZaBTRcxZu2FfPfNLOE04DSu9lqtQ==",
-			"dev": true,
 			"license": "MIT",
 			"peerDependencies": {
 				"acorn": "^8.9.0"
@@ -1121,9 +1131,9 @@
 			}
 		},
 		"node_modules/@sveltejs/kit": {
-			"version": "2.37.1",
+			"version": "2.38.0",
-			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.37.1.tgz",
+			"resolved": "https://registry.npmjs.org/@sveltejs/kit/-/kit-2.38.0.tgz",
-			"integrity": "sha512-4T9rF2Roe7RGvHfcn6+n92Yc2NF88k7ljFz9+wE0jWxyencqRpadr2/CvlcQbbTXf1ozmFxgMO6af+qm+1mPFw==",
+			"integrity": "sha512-iLmykJOv4PAZvuC0niq1HUoK/LZdfsTW1CpkPAAnroYeYiV7Bp73Eeh/As8u0Y1n/2IDM+p9cdoHYufcpvkXkQ==",
 			"dev": true,
 			"license": "MIT",
 			"dependencies": {
@@ -1209,7 +1219,6 @@
 			"version": "1.0.8",
 			"resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.8.tgz",
 			"integrity": "sha512-dWHzHa2WqEXI/O1E9OjrocMTKJl2mSrEolh1Iomrv6U+JuNwaHXsXx9bLu5gG7BUWFIN0skIQJQ/L1rIex4X6w==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/@types/json-schema": {
@@ -1498,7 +1507,6 @@
 			"version": "8.15.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
 			"integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
-			"dev": true,
 			"license": "MIT",
 			"bin": {
 				"acorn": "bin/acorn"
@@ -1561,7 +1569,6 @@
 			"version": "5.3.2",
 			"resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.3.2.tgz",
 			"integrity": "sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1571,7 +1578,6 @@
 			"version": "4.1.0",
 			"resolved": "https://registry.npmjs.org/axobject-query/-/axobject-query-4.1.0.tgz",
 			"integrity": "sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==",
-			"dev": true,
 			"license": "Apache-2.0",
 			"engines": {
 				"node": ">= 0.4"
@@ -1655,7 +1661,6 @@
 			"version": "2.1.1",
 			"resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
 			"integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-			"dev": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=6"
@@ -1968,7 +1973,6 @@
 			"version": "1.2.2",
 			"resolved": "https://registry.npmjs.org/esm-env/-/esm-env-1.2.2.tgz",
 			"integrity": "sha512-Epxrv+Nr/CaL4ZcFGPJIYLWFom+YeV1DqMLHJoEd9SYRxNbaFruBwfEX/kkHUJf55j2+TUbmDcmuilbP1TmXHA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/espree": {
@@ -2006,7 +2010,6 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/esrap/-/esrap-2.1.0.tgz",
 			"integrity": "sha512-yzmPNpl7TBbMRC5Lj2JlJZNPml0tzqoqP5B1JXycNUwtqma9AKCO0M2wHrdgsHcy1WRW7S9rJknAMtByg3usgA==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.4.15"
@@ -2320,7 +2323,6 @@
 			"version": "3.0.3",
 			"resolved": "https://registry.npmjs.org/is-reference/-/is-reference-3.0.3.tgz",
 			"integrity": "sha512-ixkJoqQvAP88E6wLydLGGqCJsrFUnqoH6HnaczB8XmDH1oaWU+xxdptvikTgaEhtZ53Ky6YXiBuUI2WXLMCwjw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@types/estree": "^1.0.6"
@@ -2412,7 +2414,7 @@
 			"version": "2.1.0",
 			"resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
 			"integrity": "sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=10"
@@ -2422,7 +2424,6 @@
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
 			"integrity": "sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==",
-			"dev": true,
 			"license": "MIT"
 		},
 		"node_modules/locate-path": {
@@ -2452,7 +2453,6 @@
 			"version": "0.30.19",
 			"resolved": "https://registry.npmjs.org/magic-string/-/magic-string-0.30.19.tgz",
 			"integrity": "sha512-2N21sPY9Ws53PZvsEpVtNuSW+ScYbQdp4b9qUaL+9QkHUrGFKo56Lg9Emg5s9V/qrtNBmiR01sYhUOwu3H+VOw==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/sourcemap-codec": "^1.5.5"
@@ -2557,7 +2557,7 @@
 			"version": "3.3.11",
 			"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
 			"integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
-			"dev": true,
+			"devOptional": true,
 			"funding": [
 				{
 					"type": "github",
@@ -2666,7 +2666,7 @@
 			"version": "1.1.1",
 			"resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
 			"integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC"
 		},
 		"node_modules/picomatch": {
@@ -2686,7 +2686,7 @@
 			"version": "8.5.6",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
 			"integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
-			"dev": true,
+			"devOptional": true,
 			"funding": [
 				{
 					"type": "opencollective",
@@ -2715,7 +2715,7 @@
 			"version": "3.1.4",
 			"resolved": "https://registry.npmjs.org/postcss-load-config/-/postcss-load-config-3.1.4.tgz",
 			"integrity": "sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"lilconfig": "^2.0.5",
@@ -2745,7 +2745,7 @@
 			"version": "1.10.2",
 			"resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
 			"integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"engines": {
 				"node": ">= 6"
@@ -2856,6 +2856,45 @@
 				"svelte": "^3.2.0 || ^4.0.0-next.0 || ^5.0.0-next.0"
 			}
 		},
+		"node_modules/prism-rose-pine": {
+			"version": "0.0.0",
+			"resolved": "git+ssh://git@github.com/rose-pine/prism.git#df6985ddb1e34ba12965552b7040cae9cbd97493",
+			"license": "MIT",
+			"dependencies": {
+				"@rose-pine/palette": "^2.1.0",
+				"prettier": "^2.3.2"
+			},
+			"engines": {
+				"node": ">=12"
+			}
+		},
+		"node_modules/prism-rose-pine/node_modules/@rose-pine/palette": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/@rose-pine/palette/-/palette-2.1.0.tgz",
+			"integrity": "sha512-CVts9RNQU2wCn5rnWJ3QVlLQdjbxJktoGT+U5K8k+9HDgmC8n25C+QjrQ8l4XNTPCl1YzKCdpTy7H8qHutkC5w==",
+			"license": "MIT",
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/rose-pine/palette?sponsor=1"
+			}
+		},
+		"node_modules/prism-rose-pine/node_modules/prettier": {
+			"version": "2.8.8",
+			"resolved": "https://registry.npmjs.org/prettier/-/prettier-2.8.8.tgz",
+			"integrity": "sha512-tdN8qQGvNjw4CHbY+XXk0JgCXn9QiF21a55rBe5LJAU+kDyC4WQn4+awm2Xfk2lQMk5fKup9XgzTZtGkjBdP9Q==",
+			"license": "MIT",
+			"bin": {
+				"prettier": "bin-prettier.js"
+			},
+			"engines": {
+				"node": ">=10.13.0"
+			},
+			"funding": {
+				"url": "https://github.com/prettier/prettier?sponsor=1"
+			}
+		},
 		"node_modules/prism-svelte": {
 			"version": "0.4.7",
 			"resolved": "https://registry.npmjs.org/prism-svelte/-/prism-svelte-0.4.7.tgz",
@@ -3079,7 +3118,7 @@
 			"version": "1.2.1",
 			"resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
 			"integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-			"dev": true,
+			"devOptional": true,
 			"license": "BSD-3-Clause",
 			"engines": {
 				"node": ">=0.10.0"
@@ -3115,7 +3154,6 @@
 			"version": "5.38.7",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-5.38.7.tgz",
 			"integrity": "sha512-1ld9TPZSdUS3EtYGQzisU2nhwXoIzNQcZ71IOU9fEmltaUofQnVfW5CQuhgM/zFsZ43arZXS1BRKi0MYgUV91w==",
-			"dev": true,
 			"license": "MIT",
 			"dependencies": {
 				"@jridgewell/remapping": "^2.3.4",
@@ -3190,6 +3228,61 @@
 				}
 			}
 		},
+		"node_modules/svelte-preprocess": {
+			"version": "6.0.3",
+			"resolved": "https://registry.npmjs.org/svelte-preprocess/-/svelte-preprocess-6.0.3.tgz",
+			"integrity": "sha512-PLG2k05qHdhmRG7zR/dyo5qKvakhm8IJ+hD2eFRQmMLHp7X3eJnjeupUtvuRpbNiF31RjVw45W+abDwHEmP5OA==",
+			"hasInstallScript": true,
+			"license": "MIT",
+			"engines": {
+				"node": ">= 18.0.0"
+			},
+			"peerDependencies": {
+				"@babel/core": "^7.10.2",
+				"coffeescript": "^2.5.1",
+				"less": "^3.11.3 || ^4.0.0",
+				"postcss": "^7 || ^8",
+				"postcss-load-config": ">=3",
+				"pug": "^3.0.0",
+				"sass": "^1.26.8",
+				"stylus": ">=0.55",
+				"sugarss": "^2.0.0 || ^3.0.0 || ^4.0.0",
+				"svelte": "^4.0.0 || ^5.0.0-next.100 || ^5.0.0",
+				"typescript": "^5.0.0"
+			},
+			"peerDependenciesMeta": {
+				"@babel/core": {
+					"optional": true
+				},
+				"coffeescript": {
+					"optional": true
+				},
+				"less": {
+					"optional": true
+				},
+				"postcss": {
+					"optional": true
+				},
+				"postcss-load-config": {
+					"optional": true
+				},
+				"pug": {
+					"optional": true
+				},
+				"sass": {
+					"optional": true
+				},
+				"stylus": {
+					"optional": true
+				},
+				"sugarss": {
+					"optional": true
+				},
+				"typescript": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/tinyglobby": {
 			"version": "0.2.15",
 			"resolved": "https://registry.npmjs.org/tinyglobby/-/tinyglobby-0.2.15.tgz",
@@ -3260,7 +3353,7 @@
 			"version": "5.9.2",
 			"resolved": "https://registry.npmjs.org/typescript/-/typescript-5.9.2.tgz",
 			"integrity": "sha512-CWBzXQrc/qOkhidw1OzBTQuYRbfyxDXJMVJ1XNwUHGROVmuaeiEm3OslpZ1RV96d7SKKjZKrSJu3+t/xlw3R9A==",
-			"dev": true,
+			"devOptional": true,
 			"license": "Apache-2.0",
 			"bin": {
 				"tsc": "bin/tsc",
@@ -3503,21 +3596,6 @@
 				"node": ">=0.10.0"
 			}
 		},
-		"node_modules/yaml": {
-			"version": "2.8.1",
-			"resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
-			"integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
-			"dev": true,
-			"license": "ISC",
-			"optional": true,
-			"peer": true,
-			"bin": {
-				"yaml": "bin.mjs"
-			},
-			"engines": {
-				"node": ">= 14.6"
-			}
-		},
 		"node_modules/yocto-queue": {
 			"version": "0.1.0",
 			"resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
@@ -3535,7 +3613,6 @@
 			"version": "1.1.2",
 			"resolved": "https://registry.npmjs.org/zimmerframe/-/zimmerframe-1.1.2.tgz",
 			"integrity": "sha512-rAbqEGa8ovJy4pyBxZM70hg4pE6gDgaQ0Sl9M3enG3I0d6H4XSAM3GeNGLKnsBpuijUow064sf7ww1nutC5/3w==",
-			"dev": true,
 			"license": "MIT"
 		}
 	}

package.json

@@ -32,5 +32,10 @@
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",
 		"vite": "^7.0.4"
+	},
+	"dependencies": {
+		"@rose-pine/palette": "github:rose-pine/rose-pine-palette",
+		"prism-rose-pine": "github:rose-pine/prism#main",
+		"svelte-preprocess": "^6.0.3"
 	}
 }

src/lib/types.d.ts

@@ -0,0 +1,6 @@
+import type { SvelteComponent } from "svelte";
+
+
+interface MDsveXComponent extends SvelteComponent {
+    metadata: Record<string, unknown>;
+}

src/routes/+layout.svelte

@@ -1,11 +1,63 @@
 <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';
+	import './style.css';
+
+	import './style.css';
 
 	let { children } = $props();
 </script>
 
 <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"
+		target="_blank"
+		><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?.()}
+
+<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,17 +1,110 @@
 <script lang="ts">
-	import type { SvelteComponent } from 'svelte';
+	import './style-entries.css';
+	import type { BlogEntry } from './+page.server.ts';
 
-	const 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]) => [
+	let desc =
-		key.split('/src/routes').pop()?.split('/+page.svx').slice(0, -1).pop() as string,
+		"This is a collection of things I've set up and created that I think might interest others.";
-		value as SvelteComponent
-	]);
-	console.log(blog_entries);
 </script>
 
-<h1>Welcome to SvelteKit</h1>
+<svelte:head>
-<p>Visit <a href="https://svelte.dev/docs/kit">svelte.dev/docs/kit</a> to read the documentation</p>
+	<title>Home - Amys Blog</title>
-{#each blog_entries as [href, page]}
+	<meta property="og:title" content="Home - Amys Blog" />
-	<a {href}>{href}</a><br />
+	<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>{desc}</p>
+	</div>
+	{#each blogs as blog (blog.src)}
+		<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>
+			<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}
+</main>
+
+<style>
+	.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.55));
+		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-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-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%;
+			border-radius: 0 0rem var(--border-round) var(--border-round);
+		}
+	}
+
+	.blog-entry h4 {
+		margin-top: 0.5rem;
+		margin-bottom: 0.5rem;
+	}
+</style>

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

@@ -0,0 +1,56 @@
+---
+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
+---
+
+
+# Static side generation
+The stack consists of:
+- [svelte + svelte-kit](https://svelte.dev/docs/kit/introduction)
+- [mdsvex](https://mdsvex.pngwn.io/) 
+- [static adapter](https://svelte.dev/docs/kit/adapter-static)
+
+The core functionallity provides which allow you to combine svelte and markdown.
+
+![Tasd|20rem](/blog-covers/blog-1.png)
+
+# 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)`.
+To archive that I replace every img that that mdsvex creates with some new written `img` component:
+
+```ts
+//img.svelte
+<script lang="ts">
+	export let src;
+	export let alt;
+
+	let width;
+	[alt, width = '20rem'] = alt.split('|');
+</script>
+
+<img {src} style="width:{width}; max-width:100%; margin:auto; display:block" {alt} />
+```
+
+And then needs to be imported in the mdsvex layout:
+```ts
+<script context="module">
+	import img from './img.svelte';
+	export { img };
+</script>
+```
+
+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
+
+I love the [rose pine](https://rosepinetheme.com/) color palette. I use it privatly for some applications,
+and think it improves this blog too.
+Both the [prism theme](https://github.com/rose-pine/prism) and [color palette](https://github.com/rose-pine/rose-pine-palette)
+can be added as npm package and used without compications.

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

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

@@ -0,0 +1,137 @@
+---
+title: Setup up Gitea Runner with Podman in LXC
+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
+
+
+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
+[Install]
+WantedBy=multi-user.target
+```
+
+In the end, all left to do is, enable the user:
+```bash
+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

@@ -0,0 +1,80 @@
+<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, a, h1, h2, h3 };
+</script>
+
+<script>
+	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 -->
+		<h1>{title}</h1><p class="date">Last updated {ddate}</p>
+	</div>
+	<div class="blog-text media-margin">
+		<p>{desc}</p>
+		<slot>
+			<!-- the mdsvex content will be slotted in here -->
+		</slot>
+	</div>
+</main>
+
+<style>
+	main {
+		padding: 0;
+		border-radius: 1rem;
+	}
+
+	.title h1 {
+		width: calc(100% - 15rem);
+		vertical-align: baseline;
+		display: inline-block;
+	}
+
+	.title p {
+		width: 15rem;
+		display: inline-block;
+		text-align: right;
+		margin: 0;
+		#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;
+		}
+
+		.title h1 {
+			display: block;
+			width: 100%;
+		}
+
+		.title p {
+			width: 100%;
+		}
+	}
+</style>

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

@@ -0,0 +1,9 @@
+---
+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.
+My work are the animations, 3d Models and some texturing"
+listed: true
+img_cov: catastrophe.png
+---

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

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

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/blogs/img.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	export let src;
+	export let alt;
+
+	let width;
+	[alt, width = '20rem'] = alt.split('|');
+</script>
+
+<img {src} style="width:{width}; max-width:100%; margin:auto; display:block" {alt} />

src/routes/blogs/test/+page.svx

@@ -1,11 +0,0 @@
----
-layout: blog
----
-
-# Title
-
----
-
-1. asd
-2. asd
-3. asd

src/routes/style-entries.css

@@ -0,0 +1,47 @@
+
+.blog-entry{
+    background: var(--rp-moon-surface);
+    border-radius: 0.5rem; 
+    width:100%;
+    color: var(--rp-moon-text) !important;
+    text-decoration : none !important;
+    display: flex;
+    flex-flow: row wrap;
+    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.85));
+}
+
+
+
+.blog-entry:hover{
+    box-shadow: 0px 0px 1rem 0px hsl(from var(--rp-moon-base) h s calc(l * 0.75));
+    background: var(--rp-moon-overlay);
+    transition: 0.2s;
+}
+
+.blog-entry div {
+    width: calc(100% - 17rem);
+    padding: 1rem;
+}
+
+.blog-entry img{
+    width:15rem;
+    object-fit: cover;
+    border-radius: 0 0.5rem 0.5rem 0;
+}
+
+@media only screen and (max-width: 700px) {
+    .blog-entry div {
+        width: calc( 100% - 2rem);
+    }
+
+    .blog-entry img {
+        width: 100%;
+        max-height: 15rem;
+        border-radius: 0 0rem 0.5rem 0.5rem;
+    }
+}
+
+.blog-entry h4{
+    margin-top:0.5rem;
+    margin-bottom: 0.5rem;
+}

src/routes/style.css

@@ -0,0 +1,125 @@
+@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;
+    max-width: 60rem;
+    width:100%;
+    margin: auto;
+    text-align: justify;
+    font-family: Inter;
+}
+
+code {
+    background: var(--rp-moon-surface) !important;
+    padding: 3px;
+    border-radius: 0.5rem;
+    font-family: fira;
+}
+
+pre {
+    background: var(--rp-moon-surface) !important;
+    border-radius: 0.5rem;
+}
+
+pre code{
+    padding:0px;
+}
+
+a {
+    color: var(--rp-moon-iris);
+    text-decoration: none;
+
+    &:visited {
+        color: hsl(from var(--rp-moon-iris) h s calc(l * 0.85))
+    }
+}
+
+h1,h2,h3,h4,p:first-child {
+	#margin-top: 0;
+}
+
+
+main {
+    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);
+    font-family: Fraunces;
+}
+
+hr {
+    color: var(--rp-moon-muted);
+}
+
+
+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;
+}
+
+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);
+    }
+}
+
+

svelte.config.js

@@ -2,11 +2,25 @@ import adapter from '@sveltejs/adapter-static';
 import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { mdsvex } from 'mdsvex';
 
+import { join, dirname } from 'path';
+import { fileURLToPath } from 'url';
+
+const __filename = fileURLToPath(import.meta.url);
+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()],
+    preprocess: [vitePreprocess(), mdsvex({
+        layout: {
+            _: path_to_layout
+        }
+    })],
     kit: {
         // adapter-auto only supports some environments, see https://svelte.dev/docs/kit/adapter-auto for a list.
         // If your environment is not supported, or you settled on a specific environment, switch out the adapter.