Fixed some bugs and added contact info

2025-01-30 20:38:38 +00:00
parent 6ba363c2c9
commit 99dba7d0c3
7 changed files with 278 additions and 229 deletions
--- a/src/icons/Bluesky_Logo.svg
+++ b/src/icons/Bluesky_Logo.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="600" height="530" version="1.1" xmlns="http://www.w3.org/2000/svg">
+ <path d="m135.72 44.03c66.496 49.921 138.02 151.14 164.28 205.46 26.262-54.316 97.782-155.54 164.28-205.46 47.98-36.021 125.72-63.892 125.72 24.795 0 17.712-10.155 148.79-16.111 170.07-20.703 73.984-96.144 92.854-163.25 81.433 117.3 19.964 147.14 86.092 82.697 152.22-122.39 125.59-175.91-31.511-189.63-71.766-2.514-7.3797-3.6904-10.832-3.7077-7.8964-0.0174-2.9357-1.1937 0.51669-3.7077 7.8964-13.714 40.255-67.233 197.36-189.63 71.766-64.444-66.128-34.605-132.26 82.697-152.22-67.108 11.421-142.55-7.4491-163.25-81.433-5.9562-21.282-16.111-152.36-16.111-170.07 0-88.687 77.742-60.816 125.72-24.795z" fill="#1185fe"/>
+</svg>
--- a/src/layouts/BlogPost.astro
+++ b/src/layouts/BlogPost.astro
@@ -1,43 +1,60 @@
 ---
-import type { CollectionEntry } from 'astro:content';
-import Main from './Main.astro';
-import Time from '../components/Time.svelte';
-import { Image } from 'astro:assets';
-import patreonWordmark from "../icons/PATREON_WORDMARK_1_WHITE_RGB.svg"
+import type { CollectionEntry } from "astro:content";
+import Main from "./Main.astro";
+import Time from "../components/Time.svelte";
+import { Image } from "astro:assets";
+import patreonWordmark from "../icons/PATREON_WORDMARK_1_WHITE_RGB.svg";

-type Props = CollectionEntry<'blog'>['data'];
+type Props = CollectionEntry<"blog">["data"];

 const { title, author, summary, pubDate, updatedDate, image } = Astro.props;
 ---
+
 <Main title={title} description={summary} image={image}>
 	<article class="m-5 mt-3">
-		<header class="lg:grid grid-cols-[auto_auto_minmax(300px,_1fr)] grid-rows-[auto_auto]">
+		<header
+			class="lg:grid grid-cols-[auto_auto_minmax(300px,_1fr)] grid-rows-[auto_auto]"
+		>
 			<h2 class="font-bold row-span-2 text-2xl m-2 mt-3">{title}</h2>
 			<address class="post-meta inline-block col-start-2">{author}</address>
 			<Time client:load datetime={pubDate} />
-			<div class="italic tracking-[3px] text-emph-fg col-start-2 col-span-2 m-2 mt-0">{summary}</div>
-			{updatedDate && <div>Amended <Time datetime={updatedDate} /></div>}
+			<div
+				class="italic tracking-[3px] text-emph-fg col-start-2 col-span-2 m-2 mt-0"
+			>
+				{summary}
+			</div>
+			{
+				updatedDate && (
+					<div>
+						Amended <Time datetime={updatedDate} />
+					</div>
+				)
+			}
 		</header>
-		<hr class="mb-3">
+		<hr class="mb-3" />
 		<main class="max-w-[100ch] font-prose post-content">
 			<slot />
 		</main>
 		<footer class="mt-20">
 			<p class="post-meta">
-				Don't fund me if you have more important expenses.
-				I will spend all the extra free time on silly experiments.
-				<br>
-				<a href='https://ko-fi.com/D1D4AFWZX' target='_blank'>
-					<img class="inline-block border-0 h-[24px]"
-						src='https://storage.ko-fi.com/cdn/kofi1.png?v=6'
-						alt='Buy Me a Coffee at ko-fi.com' />
-				</a>
-				<a href="https://patreon.com/lbfalvy?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink">
-					<Image class="inline-block border-0 h-[16px] -mx-[200px]"
-						src={patreonWordmark}
-						alt="Support me on Patreon" />
-				</a>
+				I pledge to spend all the extra free time on silly experiments.
 			</p>
+			<a href="https://ko-fi.com/D1D4AFWZX" target="_blank">
+				<img
+					class="inline-block border-0 h-[24px]"
+					src="https://storage.ko-fi.com/cdn/kofi1.png?v=6"
+					alt="Buy Me a Coffee at ko-fi.com"
+				/>
+			</a>
+			<a
+				href="https://patreon.com/lbfalvy?utm_medium=unknown&utm_source=join_link&utm_campaign=creatorshare_creator&utm_content=copyLink"
+			>
+				<Image
+					class="inline-block border-0 h-[16px] w-[90px] object-cover ml-3"
+					src={patreonWordmark}
+					alt="Support me on Patreon"
+				/>
+			</a>
 		</footer>
 	</article>
 </Main>
--- a/src/layouts/Main.astro
+++ b/src/layouts/Main.astro
@@ -1,10 +1,11 @@
 ---
 import { Image } from "astro:assets";
 import NavLink from "../components/NavLink.astro";
-import Layout from "../layouts/Html.astro"
+import Layout from "../layouts/Html.astro";
 import "../styles/global.css";
 import GhLogo from "../icons/github-mark-white.svg";
 import RssLogo from "../icons/rss.svg";
+import BskyLogo from "../icons/Bluesky_Logo.svg";
 import { SITE_DESCRIPTION, SITE_TITLE } from "../consts";

 interface Props {
@@ -18,40 +19,61 @@ const {
  description = SITE_DESCRIPTION,
  image,
 } = Astro.props;
-
 ---

 <Layout title={title} description={description} image={image}>
  <Fragment slot="head">
    <meta name="theme-color" content="#222" />
-    <link rel="icon" type="image/png" href="https://github.com/lbfalvy.png"/>
+    <link rel="icon" type="image/png" href="https://github.com/lbfalvy.png" />
  </Fragment>
-  <div class="
-    w-screen h-screen
+  <div
+    class="w-screen h-screen
    flex flex-col
    md:grid
-    md:grid-rows-[1fr_auto] md:grid-cols-[min-content_auto]
-  ">
-		<header class="
-      emph-bg whitespace-nowrap md:px-3 py-2 flex flex-col
-      text-right
-    ">
-			<h1 class="font-bold text-2xl m-2 mr-0 text-wrap lg:text-nowrap">Lawrence Bet…</h1>
-			<nav class="gutter
+    md:grid-rows-[1fr_auto] md:grid-cols-[min-content_auto]"
+  >
+    <header
+      class="emph-bg whitespace-nowrap md:px-3 py-2 flex flex-col
+      text-right"
+    >
+      <h1 class="font-bold text-2xl m-2 mr-0 text-wrap lg:text-nowrap">
+        Lawrence Bet…
+      </h1>
+      <nav
+        class="gutter
        flex md:flex-col
-        text-center md:text-right">
-				<NavLink href="/" zone="/blog">Blog</NavLink>
-				<NavLink href="/projects">Projects</NavLink>
-				<NavLink href="/about">About me</NavLink>
-				<NavLink href="/fortune">Fortune</NavLink>
-			</nav>
-		</header>
-    <main id="scroll-area" class="md:row-start-1 md:col-start-2 md:row-span-2 md:overflow-y-auto">
+        text-center md:text-right"
+      >
+        <NavLink href="/" zone="/blog">Blog</NavLink>
+        <NavLink href="/projects">Projects</NavLink>
+        <NavLink href="/about">About me</NavLink>
+        <NavLink href="/fortune">Fortune</NavLink>
+      </nav>
+    </header>
+    <main
+      id="scroll-area"
+      class="md:row-start-1 md:col-start-2 md:row-span-2 md:overflow-y-auto"
+    >
      <slot />
    </main>
    <footer class="md:row-start-2 emph-bg flex justify-center gap-3 py-3">
-      <a href="https://github.com/lbfalvy"><Image height="20" width="20" src={GhLogo} alt="Github"/></a>
-      <a href="/rss.xml"><Image height="20" width="20" src={RssLogo} alt="Rss"/></a>
+      <a href="https://github.com/lbfalvy">
+        <Image height="20" width="20" src={GhLogo} alt="Github" />
+      </a>
+      <a href="/rss.xml">
+        <Image height="20" width="20" src={RssLogo} alt="Rss" />
+      </a>
+      <a href="https://bsky.app/profile/lbfalvy.bsky.social">
+        <Image height="20" width="20" src={BskyLogo} alt="BlueSky" />
+      </a>
+      <a href="https://fosstodon.org/@lbfalvy">
+        <img
+          src="https://cdn.fosstodon.org/site_uploads/files/000/000/007/48/91cda647d1c18689.png"
+          alt="Fosstodon"
+          height="20"
+          width="20"
+        />
+      </a>
    </footer>
  </div>
 </Layout>
@@ -59,9 +81,9 @@ const {
 <script>
  const key = `scroll:${window.location.pathname}`;
  const scrollArea = document.getElementById("scroll-area");
-  scrollArea?.addEventListener('scrollend', () => {
-    sessionStorage.setItem(key, scrollArea.scrollTop.toString())
-  })
+  scrollArea?.addEventListener("scrollend", () => {
+    sessionStorage.setItem(key, scrollArea.scrollTop.toString());
+  });
  const savedPos = sessionStorage.getItem(key);
  if (savedPos) scrollArea!.scrollTop = Number.parseFloat(savedPos);
-</script>
+</script>
--- a/src/styles/global.css
+++ b/src/styles/global.css
@@ -100,7 +100,6 @@
    color: var(--color-faint-fg);
    font-style: italic;
    font-weight: 500;
-    white-space: nowrap;
    margin-left: 0.3em;
  }
  .summary {