Fixed centered blog posting, and added sharing buttons

package.json

@@ -12,9 +12,9 @@
   "dependencies": {
     "@astrojs/check": "^0.9.4",
     "@astrojs/rss": "^4.0.11",
-    "@astrojs/tailwind": "^6.0.0",
+    "@astrojs/tailwind": "^6.0.2",
     "@tailwindcss/typography": "^0.5.16",
-    "astro": "^5.4.2",
+    "astro": "^5.7.7",
     "dayjs": "^1.11.13",
     "tailwindcss": "^3.4.13",
     "typescript": "^5.6.2"

public/images/fediverse-svgrepo-com.svg

@@ -0,0 +1,11 @@
+<?xml version="1.0" standalone="no"?>
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" >
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="-10 -5 1034 1034" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
+   <path fill="#000000"
+d="M539 176q-32 0 -55 22t-25 55t20.5 58t56 27t58.5 -20.5t27 -56t-20.5 -59t-56.5 -26.5h-5zM452 271l-232 118q20 20 25 48l231 -118q-19 -20 -24 -48zM619 298q-13 25 -38 38l183 184q13 -25 39 -38zM477 320l-135 265l40 40l143 -280q-28 -5 -48 -25zM581 336
+q-22 11 -46 10l-8 -1l21 132l56 9zM155 370q-32 0 -55 22.5t-25 55t20.5 58t56.5 27t59 -21t26.5 -56t-21 -58.5t-55.5 -27h-6zM245 438q1 9 1 18q-1 19 -10 35l132 21l26 -50zM470 474l-26 51l311 49q-1 -8 -1 -17q1 -19 10 -36zM842 480q-32 1 -55 23t-24.5 55t21 58
+t56 27t58.5 -20.5t27 -56.5t-20.5 -59t-56.5 -27h-6zM236 493q-13 25 -39 38l210 210l51 -25zM196 531q-21 11 -44 10l-9 -1l40 256q21 -10 45 -9l8 1zM560 553l48 311q21 -10 44 -9l10 1l-46 -294zM755 576l-118 60l8 56l135 -68q-20 -20 -25 -48zM781 625l-119 231
+q28 5 48 25l119 -231q-28 -5 -48 -25zM306 654l-68 134q28 5 48 25l60 -119zM568 671l-281 143q19 20 24 48l265 -135zM513 771l-51 25l106 107q13 -25 39 -38zM222 795q-32 0 -55.5 22.5t-25 55t21 57.5t56 27t58.5 -20.5t27 -56t-20.5 -58.5t-56.5 -27h-5zM311 863
+q2 9 1 18q-1 19 -9 35l256 41q-1 -9 -1 -18q1 -18 10 -35zM646 863q-32 0 -55 22.5t-24.5 55t20.5 58t56 27t59 -21t27 -56t-20.5 -58.5t-56.5 -27h-6z" />
+</svg>

src/layouts/Layout.astro

@@ -115,7 +115,7 @@ const { title } = Astro.props;
               </div>
               <div><img src="/images/buttons/xeniatrans_now.webp" /></div>
               <div><img src="/images/buttons/twopaws.webp" /></div>
-              <div><img src="/images/buttons/madewith_macos.webp" /></div>
+              <div><img src="/images/buttons/made-on-linux.gif" /></div>
             </div>
           </div>
         </div>

src/pages/blog/[...slug].astro

@@ -1,6 +1,6 @@
 ---
 import { getCollection, render } from "astro:content";
-import Layout from "../../layouts/Blog.astro";
+import Layout from "../../layouts/Layout.astro";
 import dayjs from "dayjs";
 // 1. Generate a new path for every collection entry
 export async function getStaticPaths() {
@@ -16,18 +16,51 @@ const { Content } = await render(post);
 ---
 
 <Layout title=`Blog - ${post.data.title}`>
-  <div class="flex justify-stretch justify-self-center">
+  <div class="max-w-4xl mx-auto px-4">
-    <div>
+    <div class="flex flex-col items-center">
       <h1 class="text-3xl text-center font-bold">{post.data.title}</h1>
       <p class="italic text-center">
         {dayjs(post.data.published).format("MMMM DD, YYYY")}
       </p>
       <br />
       <article
-        class="prose text-black prose-blockquote:bg-transparent"
+        class="prose text-black prose-blockquote:bg-transparent w-full"
       >
         <Content />
       </article>
+      <div class="flex flex-col gap-4 mt-8 items-center">
+        <form class="fsb-prompt">
+          <label>Share this page from your <a href="https://jointhefediverse.net/">fediverse</a> server</label>
+          <div class="fsb-input-group mb-3">
+            <span class="fsb-input-group-text">https://</span>
+            <input required
+              type="text"
+              name="fediverse-domain"
+              placeholder="mastodon.social"
+              class="fsb-input fsb-domain"
+              aria-label="Server domain">
+            <button class="fsb-button flex items-center justify-center gap-2"
+              type="submit">
+              <img src="/images/fediverse-svgrepo-com.svg" class="w-10 h-10 -mx-6 -my-6"/>
+              <span class="text-sm my-2">Share</span>
+            </button>
+          </div>
+          <p class="fsb-support-note fsb-d-none">This server does not support sharing. Please visit <a
+              class="fsb-support-note-link"
+              target="_blank"
+              href=""></a>.</p>
+        </form>
+        <a
+          href={`https://bsky.app/intent/compose?text=${encodeURIComponent(post.data.title + ' ' + Astro.url.href)}`}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700 transition-colors"
+        >
+          Share on Bluesky
+        </a>
+      </div>
     </div>
   </div>
+  <link rel="stylesheet" href="https://fediverse-share-button.stefanbohacek.dev/fediverse-share-button/styles.min.css">
+  <script src="https://fediverse-share-button.stefanbohacek.dev/fediverse-share-button/script.min.js" defer class="fsb-script"></script>
 </Layout>