Make project images clickable links, make pet calendar alt text more equitable

Reviewed-on: #5

README.md

@@ -55,7 +55,7 @@ version=<specify-version>
 docker build --platform linux/amd64 -t git.coopcloud.tech/rtm/rtmwebsite:$version .
 ```
 
-## Push the image to gitea registry
+## Push the image to gitea registery
 
 Check out [this documentation](https://docs.gitea.com/next/usage/packages/container) for how to login with gitea registery.
 
@@ -66,19 +66,63 @@ docker push git.coopcloud.tech/rtm/rtmwebsite:$version
 
 At [our co-op cloud's packages site](https://git.coopcloud.tech/RTM/-/packages), click on "rtmwebsite" and check that the version mentioned is the version you specified!
 
-## Deploy changes to resisttechmonopolies.online
+## Update recipe
 
-We use coop cloud tooling [private recipe](https://git.coopcloud.tech/RTM/rtm-astro-recipe) to deploy this website to our [fleet](https://git.coopcloud.tech/RTM/rtm-config) of lil cat-named machines. 
+We use a [private recipe](https://git.coopcloud.tech/RTM/rtm-astro-recipe) to deploy this website. This step needs Wireguard to be activated (download Wireguard and ask Sootie's owner to create a config for you and give you Docker permissions). The following examples will assume your name in Sootie's config is "blueberry"!
 
-Read the "Fleet Setup and access" collectives page on our RTM nextcloud to get the `rtm-config` repo set up with the `rtm-astro-recipe` submodule and install the `abra` command line tool!
+You will need to have wget (`brew install wget` on mac) and [abra](https://docs.coopcloud.tech/abra/) installed.
 
-Then, in your `rtm-config` repo update the RTM website image version to the one you just built and published by running:
+Create an SSH key to use with Sootie with the following command. Take note of the file where you save the key. The following examples will assume it is saved to `rtm` and that the `.ssh` directory is in your home directory (which you can find with the command `echo $HOME`).
 
-``` bash
-$ abra app config resisttechmonopolies.online  # Change VERSION to the docker image you just pushed
-$ abra app deploy -f resisttechmonopolies.online  # Re-deploy the RTM website, now with your changes!
-$ git add abra/servers/laylotta.resisttechmonopolies.online/resisttechmonopolies.online
-$ git commit -m 'Updated website to x.x.x'  # Publish this change to the rtm-config repo either via direct commit or a PR
+```ssh-keygen -t ed25519```
+
+
+Run the following commands to install the SSH key to Sootie as an authorized key:
+
+```
+ssh-copy-id -i $HOME/.ssh/rtm.pub blueberry@resisttechmonopolies.online
+ssh -i $HOME/.ssh/rtm 'blueberry@resisttechmonopolies.online'          
 ```
 
-Done! Thank you for your contributions 🏋️⚡📖!
+
+In the `$HOME/.ssh/config` file (which you may have to create if it does not exist), paste the following:
+
+```
+Host resisttechmonopolies.online
+  Hostname resisttechmonopolies.online
+  User blueberry
+  UseKeychain yes
+  IdentityFile ~/.ssh/rtm
+```
+
+You should now be able to SSH into Sootie with just the command `ssh resisttechmonopolies.online`
+
+
+Run the following command (outside of the terminal in which you ran ssh in the previous step)
+
+```abra server add resisttechmonopolies.online```
+
+Clone the `sootie-config` repo into your `$HOME/.abra/servers/resisttechmonopolies.online` directory:
+
+``` bash
+git clone https://git.coopcloud.tech/RTM/sootie-config.git .
+# DON'T FORGET THE . AT THE END OF THE COMMAND
+```
+
+Clone the `rtm-astro-recipe` repo into your `$HOME/.abra/recipes` directory:
+
+```git clone https://git.coopcloud.tech/RTM/rtm-astro-recipe.git```
+
+
+Update the version number to the latest in 
+
+``` bash
+.abra/servers/resisttechmonopolies.online/resisttechmonopolies.online.env
+```
+
+Then
+``` bash
+abra app undeploy resisttechmonopolies.online
+# wait 10 seconds
+abra app deploy resisttechmonopolies.online
+```

src/components/zines/ShareZineButton.tsx

@@ -0,0 +1,40 @@
+import { useEffect, useState } from "react";
+import { Check, Share2 } from "lucide-react";
+import { Button } from "../ui/button";
+
+interface ShareZineButtonProps {
+  zineId: string;
+}
+
+export function ShareZineButton({ zineId }: ShareZineButtonProps) {
+  const [copied, setCopied] = useState(false);
+
+  useEffect(() => {
+    if (!copied) return;
+    const timer = setTimeout(() => setCopied(false), 1500);
+    return () => clearTimeout(timer);
+  }, [copied]);
+
+  const handleClick = async (e: React.MouseEvent) => {
+    e.stopPropagation();
+    const url = `${window.location.origin}/projects/zines/${zineId}`;
+    await navigator.clipboard.writeText(url);
+    setCopied(true);
+  };
+
+  return (
+    <Button variant="outline" size="sm" onClick={handleClick}>
+      {copied ? (
+        <>
+          <Check />
+          Copied!
+        </>
+      ) : (
+        <>
+          <Share2 />
+          Share
+        </>
+      )}
+    </Button>
+  );
+}

src/components/zines/ZineCard.tsx

@@ -1,6 +1,7 @@
 import { Download } from "lucide-react";
 import type { Zine } from "../../data/zines";
 import { Button } from "../ui/button";
+import { ShareZineButton } from "./ShareZineButton";
 
 interface ZineCardProps {
   zine: Zine;
@@ -46,6 +47,7 @@ export function ZineCard({ zine, onClick }: ZineCardProps) {
             Printable
           </a>
         </Button>
+        <ShareZineButton zineId={zine.id} />
       </div>
     </div>
   );

src/components/zines/ZineGrid.tsx

@@ -45,6 +45,7 @@ export function ZineGrid() {
             <ZineViewer
               pages={selectedZine.pages}
               title={selectedZine.title}
+              zineId={selectedZine.id}
             />
           )}
         </DialogContent>

src/components/zines/ZineViewer.tsx

@@ -2,6 +2,7 @@ import React, { useRef, useState, useCallback, forwardRef, useEffect } from "rea
 import HTMLFlipBook from "react-pageflip";
 import { ChevronLeft, ChevronRight, ZoomIn, ZoomOut, Minimize2 } from "lucide-react";
 import { Button } from "../ui/button";
+import { ShareZineButton } from "./ShareZineButton";
 
 interface PageProps {
   src: string;
@@ -25,13 +26,14 @@ Page.displayName = "Page";
 interface ZineViewerProps {
   pages: string[];
   title: string;
+  zineId?: string;
 }
 
 const MIN_ZOOM = 1;
 const MAX_ZOOM = 2.5;
 const ZOOM_STEP = 0.5;
 
-export function ZineViewer({ pages, title }: ZineViewerProps) {
+export function ZineViewer({ pages, title, zineId }: ZineViewerProps) {
   const flipBookRef = useRef<any>(null);
   const [currentPage, setCurrentPage] = useState(0);
   const totalPages = pages.length;
@@ -153,6 +155,7 @@ export function ZineViewer({ pages, title }: ZineViewerProps) {
             <Minimize2 className="h-4 w-4" />
           </Button>
         )}
+        {zineId && <ShareZineButton zineId={zineId} />}
       </div>
 
       <div

src/data/zines.ts

@@ -93,4 +93,21 @@ export const zines: Zine[] = [
     ],
     printablePdf: "/assets/zines/signal-101/printable.pdf",
   },
+  {
+    id: "signal-201",
+    title: "Signal 201",
+    description: "Advanced usage of signal",
+    coverImage: "/assets/zines/signal-201/cover.jpg",
+    pages: [
+      "/assets/zines/signal-201/cover.jpg",
+      "/assets/zines/signal-201/page-1.jpg",
+      "/assets/zines/signal-201/page-2.jpg",
+      "/assets/zines/signal-201/page-3.jpg",
+      "/assets/zines/signal-201/page-4.jpg",
+      "/assets/zines/signal-201/page-5.jpg",
+      "/assets/zines/signal-201/page-6.jpg",
+      "/assets/zines/signal-201/page-7.jpg",
+    ],
+    printablePdf: "/assets/zines/signal-201/printable.pdf",
+  },
 ];

src/pages/projects.astro

@@ -27,66 +27,64 @@ import "../styles/globals.css";
           </div> -->
 
           <div class="justify-items-center">
-            <img
-              src="/assets/book-club.jpg"
-              alt="stack of books"
-              width="280"
-              class="border"
-            />
-            <a
-              href="/projects/bookclub/"
-              class="underline decoration-solid">Book Club</a
-            >
+            <a href="/projects/bookclub/">
+              <img
+                src="/assets/book-club.jpg"
+                alt="stack of books"
+                width="280"
+                class="border"
+              />
+              <p class="underline decoration-solid">Book Club</p>
+            </a>
           </div>
 
-          
-
           <div class="justify-items-center">
-            <img
+            <a href="/projects/alternatives/">
+              <img
               src="/assets/computer.png"
               alt="computer"
               width="250"
               class="border"
-            />
-            <a href="/projects/alternatives/" class="underline decoration-solid">Big Tech Alternatives</a>
+              />
+              <p class="underline decoration-solid">Big Tech Alternatives</p>
+            </a>
           </div>
 
           <div class="justify-items-center">
-            <img
-              src="/assets/zines-thumbnail.png"
-              alt="zines"
-              width="250"
-              class="border object-cover w-[250px] h-[250px]"
-            />
-            <a href="/projects/zines/" class="underline decoration-solid">Zines</a>
+            <a href="/projects/zines/">
+              <img
+                src="/assets/zines-thumbnail.png"
+                alt="zines"
+                width="250"
+                class="border object-cover w-[250px] h-[250px]"
+              />
+              <p class="underline decoration-solid">Zines</p>
+            </a>
           </div>
 
           <div class="justify-items-center">
-            <img
-              src="/assets/pet-calendar-2026-cover.jpg"
-              alt="photo collage of cats"
-              width="500"
-              class="border"
-            />
-            <a
-              href="/projects/PetCalendar/"
-              class="underline decoration-solid">Pet Calendar</a
-            >
+            <a href="/projects/PetCalendar/">
+              <img
+                src="/assets/pet-calendar-2026-cover.jpg"
+                alt="photo collage of cats and dogs"
+                width="500"
+                class="border"
+              />
+              <p class="underline decoration-solid">Pet Calendar</p>
+            </a>
           </div>
 
           <div class="justify-items-center">
-            <img
-              src="/assets/pihole.jpeg"
-              alt="pihole parts"
-              width="250"
-              class="border"
-            />
-            <a
-              href="/projects/pihole/"
-              class="underline decoration-solid">Pihole Workshop</a
-            >
+            <a href="/projects/pihole/">
+              <img
+                src="/assets/pihole.jpeg"
+                alt="pihole parts"
+                width="250"
+                class="border"
+              />
+              <p class="underline decoration-solid">Pihole Workshop</p>
+            </a>
           </div>
-
         </div>
       </div>
     </div>

src/pages/projects/zines/[id].astro

@@ -0,0 +1,64 @@
+---
+import Navbar from "../../../components/Navbar";
+import Footer from "../../../components/Footer";
+import Layout from "../../../layouts/Layout.astro";
+import { ZineViewer } from "../../../components/zines/ZineViewer";
+import { zines, type Zine } from "../../../data/zines";
+import "../../../styles/globals.css";
+
+export async function getStaticPaths() {
+  return zines.map((zine) => ({
+    params: { id: zine.id },
+    props: { zine },
+  }));
+}
+
+interface Props {
+  zine: Zine;
+}
+
+const { zine } = Astro.props;
+---
+
+<Layout>
+  <main class="flex min-h-screen flex-col justify-between">
+    <div>
+      <Navbar client:load activePage="OurProjects" />
+      <div class="px-4">
+        <a
+          href="/projects/zines"
+          class="inline-block pb-4 pt-4 text-sm underline"
+        >
+          ← Back to all zines
+        </a>
+        <ZineViewer
+          client:load
+          pages={zine.pages}
+          title={zine.title}
+          zineId={zine.id}
+        />
+      </div>
+    </div>
+    <Footer />
+  </main>
+</Layout>
+
+<style>
+  :global(.flipbook-container) {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    min-height: 520px;
+  }
+
+  :global(.flipbook) {
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+  }
+
+  :global(.page) {
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+</style>