Update content

src/components/Donate.astro

@@ -0,0 +1,42 @@
+---
+import { Icon } from "astro-icon";
+
+/** 
+	Uses https://github.com/natemoo-re/astro-icon#readme
+	Find icons @ https://icones.js.org/
+*/
+const donateLinks: Array<{
+	name: string;
+	friendlyName: string;
+	link: string;
+	isWebmention?: boolean;
+}> = [
+	{
+		name: "liberapay",
+		friendlyName: "Liberapay",
+		link: "https://liberapay.com/Braydofficial",
+		isWebmention: true,
+	},
+];
+---
+
+<div class="flex flex-wrap items-end gap-x-4">
+	<p style="margin-top: 30px;">Unterstütze mich</p>
+	<ul class="flex flex-1 items-center gap-x-2 sm:flex-initial">
+		{
+			donateLinks.map(({ link, name, friendlyName, isWebmention }) => (
+				<li class="flex">
+					<a
+						class="inline-block p-1 sm:hover:text-link"
+						href={link}
+						target="_blank"
+						rel={`noopener noreferrer ${isWebmention ? "me authn" : ""}`}
+					>
+						<Icon class="h-6 w-6" name={name} aria-hidden="true" focusable="false" />
+						<span class="sr-only">{friendlyName}</span>
+					</a>
+				</li>
+			))
+		}
+	</ul>
+</div>

src/components/SocialList.astro

@@ -12,31 +12,26 @@ const socialLinks: Array<{
 	isWebmention?: boolean;
 }> = [
 	{
-		name: "mdi:github",
-		friendlyName: "Github",
-		link: "https://github.com/chrismwilliams/astro-cactus",
+		name: "forgejo",
+		friendlyName: "Forgejo",
+		link: "https://code.braydmedia.de/brayd",
 	},
 	{
-		name: "mdi:mastodon",
-		friendlyName: "Mastodon",
-		link: "#",
-	},
-	{
-		name: "mdi:linkedin",
-		friendlyName: "LinkedIn",
-		link: "#",
+		name: "fediverse",
+		friendlyName: "Braydmedia Connect",
+		link: "https://connect.braydmedia.de/@brayd",
 	},
 	{
 		name: "mdi:email",
-		friendlyName: "email",
-		link: "mailto:astro-cactus@chriswilliams.dev",
+		friendlyName: "E-Mail",
+		link: "mailto:info@braydmedia.de",
 		isWebmention: true,
 	},
 ];
 ---
 
 <div class="flex flex-wrap items-end gap-x-4">
-	<p>Find me on</p>
+	<p>Finde mich bei</p>
 	<ul class="flex flex-1 items-center gap-x-2 sm:flex-initial">
 		{
 			socialLinks.map(({ link, name, friendlyName, isWebmention }) => (

src/icons/fediverse.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 48 48"><circle cx="26.011" cy="6.711" r="4.211" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><circle cx="41.284" cy="22.033" r="4.211" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><circle cx="31.428" cy="41.289" r="4.211" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><circle cx="10.064" cy="37.867" r="4.211" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><circle cx="6.716" cy="16.497" r="4.211" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" d="m24.107 10.468l-12.02 23.706m25.455-10.208L13.919 36.172m16.857.958l-4.113-26.258M9.689 19.48l18.766 18.826m8.67-16.939l-26.282-4.028m11.347-8.69l-11.719 5.944m-1.095 19.12L7.359 20.66m19.857 20.013l-13.037-1.907m25.186-12.984L33.346 37.54M28.984 9.694l9.327 9.357"/></svg>

src/icons/forgejo.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M16.777 0a2.9 2.9 0 1 1-2.529 4.322H12.91a4.266 4.266 0 0 0-4.265 4.195v2.118a7.076 7.076 0 0 1 4.147-1.42l.118-.002h1.338a2.9 2.9 0 0 1 5.43 1.422a2.9 2.9 0 0 1-5.43 1.422H12.91a4.266 4.266 0 0 0-4.265 4.195v2.319A2.9 2.9 0 0 1 7.222 24A2.9 2.9 0 0 1 5.8 18.57V8.589a7.109 7.109 0 0 1 6.991-7.108l.118-.001h1.338A2.9 2.9 0 0 1 16.778 0M7.223 19.905a1.194 1.194 0 1 0 0 2.389a1.194 1.194 0 0 0 0-2.389m9.554-10.464a1.194 1.194 0 1 0 0 2.389a1.194 1.194 0 0 0 0-2.39m0-7.735a1.194 1.194 0 1 0 0 2.389a1.194 1.194 0 0 0 0-2.389"/></svg>

src/icons/liberapay.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" viewBox="0 0 24 24"><path fill="currentColor" d="M2.32 0A2.321 2.321 0 0 0 0 2.32v19.36A2.321 2.321 0 0 0 2.32 24h19.36A2.32 2.32 0 0 0 24 21.68V2.32A2.32 2.32 0 0 0 21.68 0zm9.208 3.98l-2.27 9.405a2.953 2.953 0 0 0-.073.539a.853.853 0 0 0 .09.432a.7.7 0 0 0 .334.302c.157.077.378.126.661.147l-.49 2.008c-.772 0-1.38-.1-1.82-.3c-.441-.203-.757-.477-.947-.826a2.391 2.391 0 0 1-.278-1.2c.005-.452.068-.933.188-1.445l2.074-8.67zm3.9 3.888c.61 0 1.135.092 1.576.277c.44.185.802.438 1.085.76c.283.32.493.696.629 1.126c.136.43.204.89.204 1.379v.001c0 .794-.13 1.52-.392 2.179a5.16 5.16 0 0 1-1.086 1.706a4.84 4.84 0 0 1-1.665 1.118c-.648.267-1.353.4-2.114.4c-.37 0-.74-.033-1.11-.098l-.735 2.956H9.403l2.71-11.298c.435-.13.934-.248 1.494-.351a10.045 10.045 0 0 1 1.821-.155m-.31 2.041a4.67 4.67 0 0 0-.98.098l-1.143 4.752c.185.044.413.065.685.065c.425 0 .812-.079 1.16-.237a2.556 2.556 0 0 0 .89-.661c.244-.283.435-.623.571-1.02a4.03 4.03 0 0 0 .204-1.315c0-.468-.104-.865-.31-1.192c-.207-.326-.566-.49-1.077-.49"/></svg>

src/pages/404.astro

@@ -2,7 +2,7 @@
 import { Image } from "astro:assets";
 
 import PageLayout from "@/layouts/Base";
-import aboutImg from "@/assets/about-astro.png";
+import aboutImg from "@/assets/planet.png";
 
 const meta = {
 	title: "Oh! Die Seite hier gibt's gar nicht!",
@@ -22,6 +22,8 @@ const meta = {
 			src={aboutImg}
 			alt="A cartoon cactus looking at the 'Astro.build' logo"
 			loading="eager"
+			width="250"
+			height="250"
 		/>
 	</div>
 </PageLayout>

src/pages/index.astro

@@ -3,6 +3,7 @@ import PageLayout from "@/layouts/Base";
 import PostPreview from "@/components/blog/PostPreview";
 import SocialList from "@/components/SocialList";
 import { getAllPosts, sortMDByDate } from "@/utils";
+import Donate from "@/components/Donate";
 
 const MAX_POSTS = 10;
 const allPosts = await getAllPosts();
@@ -56,14 +57,14 @@ const cactusTech: Array<{ title: string; desc: string; href: string }> = [
 	<section>
 		<h1 class="title mb-6">Hello World!</h1>
 		<p class="mb-4">
-			Hi, I’m a theme for Astro, an example of how you can use this starter to create a personal
-			blog. If you want to know more about how you can customise me, add more posts, and make it
-			your own, click on the github icon link below and it will take you to my repo.
+			Hey! Mein Name ist Brayd. Ich bin Admin von Braydmedia.de und arbeite was mit Computern. 👀
+			Ich betreibe außerdem diesen Blog hier, auf dem ich über verschiedene Themen wie
+			beispielsweise den Veganismus, den Buddhismus, Linux und vieles mehr schreibe!
 		</p>
 		<SocialList />
 	</section>
 	<section aria-label="Blog post list" class="mt-16">
-		<h2 class="title mb-4 text-xl">Posts</h2>
+		<h2 class="title mb-4 text-xl">Letzte Blogposts</h2>
 		<ul class="space-y-4 sm:space-y-2">
 			{
 				allPostsByDate.map((p) => (
@@ -75,7 +76,7 @@ const cactusTech: Array<{ title: string; desc: string; href: string }> = [
 		</ul>
 	</section>
 	<section class="mt-16">
-		<h2 class="title mb-4 text-xl">Technologies</h2>
+		<h2 class="title mb-4 text-xl">Projekte</h2>
 		<ul class="space-y-4 sm:space-y-2">
 			{
 				cactusTech.map(({ href, title, desc }) => (
@@ -87,11 +88,12 @@ const cactusTech: Array<{ title: string; desc: string; href: string }> = [
 							class="cactus-link inline-block"
 						>
 							{title}
-						</a>: 
-						<p class="inline-block sm:mt-2">{desc}</p>
+						</a>
+						:<p class="inline-block sm:mt-2">{desc}</p>
 					</li>
 				))
 			}
 		</ul>
 	</section>
+	<Donate />
 </PageLayout>