RTM/rtm-website
0
0
Fork 0
Code Issues 1 Pull Requests 2 Actions Packages Projects Releases Wiki Activity

lots of changes

Browse Source
This commit is contained in:
B
2026-06-22 20:28:11 -07:00
parent 27647ea1f9
commit 9aed60fc01
25 changed files with 540 additions and 632 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/assets/mastodon.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 50 KiB

public/assets/zines/de-monopoly-discotech-101-japanese/page-8.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 459 KiB

After

Width:  |  Height:  |  Size: 326 KiB

public/assets/zines/de-monopoly-discotech-101-japanese/printable.pdf
BIN
View File
Binary file not shown.
public/assets/zines/de-monopoly-discotech-101/page-8.jpg
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 426 KiB

After

Width:  |  Height:  |  Size: 303 KiB

public/assets/zines/de-monopoly-discotech-101/printable.pdf
BIN
View File
Binary file not shown.
public/assets/zines/signal-101/printable.pdf
BIN
View File
Binary file not shown.
src/components/BigTechAlternatives.astro
+122
View File
@@ -0,0 +1,122 @@
---
import Card from "./Card.astro";
---
<div class="pl-4 pr-4">
<h1 class="pb-4 pt-4 text-3xl font-semibold">Big Tech Alternatives</h1>
<p class="mb-4">
Explore open-source and privacy-focused alternatives to popular big tech
software.
</p>
<div class="grid grid-cols-1 gap-8 md:grid-cols-2 lg:grid-cols-3">
<Card
title="Browsers"
bigTech="Chrome (Google)"
alternatives={[
{
name: "Firefox",
description: "Privacy-focused browser.",
url: "https://www.mozilla.org/firefox",
},
]}
bgClass="bg-blue-50"
/>
<Card
title="Cloud Storage"
bigTech="Google Drive"
alternatives={[
{
name: "Nextcloud",
description: "Self-hosted file sync and share.",
url: "https://nextcloud.com",
},
]}
bgClass="bg-indigo-50"
/>
<Card
title="Email"
bigTech="Gmail (Google)"
alternatives={[
{
name: "ProtonMail",
description: "Encrypted email.",
url: "https://protonmail.com",
},
]}
bgClass="bg-yellow-50"
/>
<Card
title="Maps"
bigTech="Google Maps"
alternatives={[
{
name: "OpenStreetMap",
description: "Community-driven maps.",
url: "https://www.openstreetmap.org",
},
]}
bgClass="bg-teal-50"
/>
<Card
title="Messaging"
bigTech="WhatsApp (Meta), Slack"
alternatives={[
{
name: "Signal",
description: "Encrypted messaging (alternative to WhatsApp).",
url: "https://signal.org",
},
{
name: "Element",
description: "Matrix-based chat (alternative to Slack).",
url: "https://element.io",
},
]}
bgClass="bg-red-50"
/>
<Card
title="Search Engines"
bigTech="Google Search"
alternatives={[
{
name: "DuckDuckGo",
description: "Privacy-protecting search.",
url: "https://duckduckgo.com",
},
]}
bgClass="bg-green-50"
/>
<Card
title="Social Media"
bigTech="Twitter (X), Facebook (Meta)"
alternatives={[
{
name: "Mastodon",
description: "Decentralized social network (alternative to Twitter).",
url: "https://joinmastodon.org",
},
]}
bgClass="bg-purple-50"
/>
<Card
title="Video Platforms"
bigTech="YouTube (Google)"
alternatives={[
{
name: "PeerTube",
description: "Decentralized video hosting.",
url: "https://joinpeertube.org",
},
]}
bgClass="bg-pink-50"
/>
</div>
</div>
src/components/Footer.tsx
+12 -2
View File
@@ -4,10 +4,20 @@ export default function Footer() {
return (
<div
className={cn(
"flex h-12 w-screen flex-col place-items-center justify-center bg-white dark:bg-black dark:text-white",
"flex h-12 gap-4 mt-8 w-screen place-items-center justify-center bg-[#dfd9ffff] text-black",
)}
>
<h2>Copyleft {new Date().getFullYear()}</h2>
<h2>Resist Tech Monopolies - Copyleft {new Date().getFullYear()}</h2>
<a href="https://social.coop/@rtm" rel="noopener noreferrer" target="_blank"
>
<img
src={"/assets/mastodon.png"}
alt={"the logo for Mastodon (a purple text bubble with the letter M)"}
width="30"
height="30"
/></a>
</div>
);
}
src/components/Navbar.tsx
+76 -48
View File
@@ -1,63 +1,91 @@
import { cn } from "@/lib/utils";
import { useState } from "react";
interface NavbarProps {
activePage?: string;
}
export default function Navbar({ activePage = "" }: NavbarProps) {
const NAV_ITEMS = [
{ href: "/#aboutus", label: "About Us", activeKey: "AboutUs", text: "text-red-400", darkText: "dark:text-red-400" },
{ href: "/#whatwereupto", label: "What We're Up To", activeKey: "WhatWereUpTo", text: "text-orange-400", darkText: "dark:text-orange-400" },
{ href: "/#bigtechalternatives", label: "Big Tech Alternatives", activeKey: "BigTechAlternatives", text: "text-purple-400", darkText: "dark:text-purple-400" },
// TODO once we have these sections done!
// { href: "", label: "Services", activeKey: "Services", text: "text-green-400", darkText: "dark:text-green-400" },
// { href: "", label: "Calendar", activeKey: "Calendar", text: "text-blue-400", darkText: "dark:text-blue-400" },
];
export default function Navbar(navbarProps: NavbarProps) {
const [activePage, setActivePage] = useState(navbarProps.activePage);
const [isShowingHamburgerFullMenu, setIsShowingHamburgerFullMenu] = useState(false);
return (
<>
<div className={cn("flex flex-row justify-between pb-8 pl-4 pr-4 pt-8")}>
<div>
<strong className={cn("sm:text-2xl md:text-4xl")}>
<div className={cn("bg-white dark:bg-black")}>
<div className={cn("flex flex-row items-center justify-between pb-4 pt-4")}>
<a href="/" onClick={() => { setActivePage("Home") }}>
<div className={cn("flex items-center gap-3")}>
{/*
TODO: uncomment once we have a logo!
<img
src={"/assets/logo.png"}
alt={"the logo for RTM (a cat in graffiti style with the RTM written in red and Resist Tech Monopolies written in black)"}
width="50"
height="50"
/> */}
<h1 className={cn(
"text-2xl md:text-4xl font-bold",
activePage === "Home" && "underline",
)}>Resist Tech Monopolies</h1>
</div>
</a>
<div className={cn("items-center gap-4 hidden md:flex")}>
{NAV_ITEMS.map(({ href, label, activeKey, text, darkText }) => (
<a
key={href}
href={href}
onClick={() => {
setActivePage(activeKey)
}}
className={cn(
activePage === "Home" && "border-b-2 border-black-500",
"transition-colors text-xl md:text-2xl font-bold",
text,
darkText,
activePage == activeKey && "underline",
)}
href="/">Resist Tech Monopolies</a>
</strong>
</div>
<strong className={cn("sm:text-1xl flex gap-10 md:text-4xl")}>
<a
href="/PointsOfUnity/"
className={cn(
"rounded-full px-6 py-2 transition-colors",
"bg-gray-200 text-green-700 hover:bg-gray-300",
"dark:bg-gray-800 dark:text-green-400 dark:hover:bg-gray-700",
activePage === "PointsOfUnity" && "ring-2 ring-green-500 ring-offset-2",
)}
>
Points of Unity
</a>
<a
href="/projects/"
className={cn(
"rounded-full px-6 py-2 transition-colors",
"bg-gray-200 text-red-700 hover:bg-gray-300",
"dark:bg-gray-800 dark:text-red-400 dark:hover:bg-gray-700",
activePage === "OurProjects" && "ring-2 ring-red-500 ring-offset-2",
)}
>
Our Projects
</a>
</strong>
</div>
<div className={cn("flex flex-row justify-between pb-8")}>
<div className="w-full grid grid-flow-col">
{Array.from({ length: 12 }).map((_, index) => (
<div key={index} className="flex justify-center">
<img
src={index % 2 === 0 ? "/assets/computer.png" : "/assets/people.png"}
alt={index % 2 === 0 ? "computer icon" : "people icon"}
width="30"
height="30"
/>
</div>
>
{label}
</a>
))}
</div>
<div className={cn("hamburger block md:hidden")} onClick={() => { setIsShowingHamburgerFullMenu(!isShowingHamburgerFullMenu) }}>
<span className={cn("bg-black dark:bg-white line")}></span>
<span className={cn("bg-black dark:bg-white line")}></span>
<span className={cn("bg-black dark:bg-white line")}></span>
</div>
</div>
</>
{isShowingHamburgerFullMenu && <div className={cn("flex md:hidden flex-col gap-4 bg-[#ece8fc] p-2 mb-2")}>
{NAV_ITEMS.map(({ href, label, activeKey, text, darkText }) => (
<a
key={href}
href={href}
onClick={() => {
setActivePage(activeKey)
setIsShowingHamburgerFullMenu(false)
}}
className={cn(
"transition-colors text-xl md:text-2xl font-bold",
text,
darkText,
activePage == activeKey && "underline",
)}
>
{label}
</a>
))}
</div>}
</div>
);
}
src/components/NewLookNavbar.tsx
-64
View File
@@ -1,64 +0,0 @@
import { cn } from "@/lib/utils";
interface NavbarProps {
activePage?: string;
}
const NAV_PILLS = [
{ href: "/newlook#projects", label: "Our Projects", activeKey: "OurProjects", text: "text-red-700", darkText: "dark:text-red-400", ring: "ring-red-500" },
{ href: "/newlook#points-of-unity", label: "Points of Unity", activeKey: "PointsOfUnity", text: "text-green-700", darkText: "dark:text-green-400", ring: "ring-green-500" },
{ href: "/newlook#get-involved", label: "Get Involved", activeKey: "GetInvolved", text: "text-blue-700", darkText: "dark:text-blue-400", ring: "ring-blue-500" },
];
export default function NewLookNavbar({ activePage = "" }: NavbarProps) {
return (
<>
<div className={cn("flex flex-row items-center justify-between pb-3 pl-4 pr-4 pt-4")}>
<div>
<strong className={cn("sm:text-2xl md:text-4xl")}>
<a
className={cn(
activePage === "Home" && "border-b-2 border-black-500",
)}
href="/newlook">Resist Tech Monopolies</a>
</strong>
</div>
<strong className={cn("flex items-center gap-3")}>
{NAV_PILLS.map(({ href, label, activeKey, text, darkText, ring }) => (
<a
key={href}
href={href}
className={cn(
"rounded-full px-3 py-1 text-sm transition-colors",
"bg-gray-200 hover:bg-gray-300",
"dark:bg-gray-800 dark:hover:bg-gray-700",
text,
darkText,
activePage === activeKey && `ring-2 ${ring} ring-offset-2`,
)}
>
{label}
</a>
))}
</strong>
</div>
<div className={cn("flex flex-row justify-between pb-3")}>
<div className="w-full grid grid-flow-col">
{Array.from({ length: 12 }).map((_, index) => (
<div key={index} className="flex justify-center">
<img
src={index % 2 === 0 ? "/assets/computer.png" : "/assets/people.png"}
alt={index % 2 === 0 ? "computer icon" : "people icon"}
width="30"
height="30"
/>
</div>
))}
</div>
</div>
</>
);
}
src/components/OurProjects.astro → src/components/WhatWereUpTo.astro
+26 -8
View File
@@ -1,6 +1,6 @@
<h1 class="pb-4 text-3xl font-semibold">Our Projects</h1>
<div class="flex gap-8">
<div class="justify-items-center">
<h1 class="pb-4 text-3xl font-semibold">What We're Up To</h1>
<div class="grid grid-cols-1 gap-8 xl:grid-cols-3">
<div class="grid justify-items-center gap-8">
<a href="/projects/bookclub/" class="underline decoration-solid">
<img
src="/assets/book-club.png"
@@ -8,11 +8,17 @@
loading="lazy"
class="h-[250px] border"
/>
Book Club</a
</a>
<a
href="/projects/bookclub/"
class="max-w-[240px] rounded-sm bg-[#fb923c] px-6 py-3 text-center font-semibold text-white transition-colors"
>
What We're Reading
</a>
</div>
<div class="justify-items-center">
<div class="grid justify-items-center gap-8">
<a href="/projects/PetCalendar/" class="underline decoration-solid">
<img
src="/assets/pet-calendar-2026-cover.jpg"
@@ -20,11 +26,17 @@
loading="lazy"
class="h-[250px] border"
/>
Pet Calendar</a
</a>
<a
href="/projects/petcalendar/"
class="max-w-[240px] rounded-sm bg-[#fb923c] px-6 py-3 text-center font-semibold text-white transition-colors"
>
Pet Calendar
</a>
</div>
<div class="justify-items-center">
<div class="grid justify-items-center gap-8">
<a href="/projects/zines/" class="underline decoration-solid">
<img
src="/assets/zines-thumbnail.png"
@@ -32,7 +44,13 @@
loading="lazy"
class="h-[250px] border"
/>
Zines</a
</a>
<a
href="/projects/zines/"
class="max-w-[240px] rounded-sm bg-[#fb923c] px-6 py-3 text-center font-semibold text-white transition-colors"
>
Zines
</a>
</div>
</div>
src/layouts/Layout.astro
+2 -2
View File
@@ -4,7 +4,7 @@ import { cn } from "@/lib/utils";
const title =
"Resist Tech Monopolies";
const description =
"Copyleft 2025";
`Copyleft ${new Date().getFullYear()}`;
const url = "https://placeholder.com";
const image = "/public/preview.webp";
---
@@ -40,7 +40,7 @@ const image = "/public/preview.webp";
"@type": "WebSite",
"url": "https://placeholder.com",
"name": "Resist Tech Monopolies",
"description": "Copyleft 2025"
"description": `Copyleft ${new Date().getFullYear()}`
}
</script>
src/pages/GetInvolved.astro
-20
View File
@@ -1,20 +0,0 @@
---
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import Layout from "../layouts/Layout.astro";
import "../styles/globals.css";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<div>
<Navbar client:load activePage="GetInvolved" />
<div class="pl-4 pr-4">
<h1 class="text-3xl font-semibold">Get Involved</h1>
</div>
</div>
<Footer />
</main>
</Layout>
src/pages/PointsOfUnity.astro → src/pages/aboutus.astro
+4 -2
View File
@@ -7,9 +7,11 @@ import "../styles/globals.css";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<main class="px-4 flex min-h-screen flex-col justify-between">
<div>
<Navbar client:load activePage="PointsOfUnity" />
<section class="sticky top-0">
<Navbar client:load activePage="AboutUs" />
</section>
<div class="pl-4 pr-4">
<PointsOfUnity />
</div>
src/pages/index.astro
+51 -11
View File
@@ -1,16 +1,40 @@
---
import Navbar from "@/components/Navbar";
import Footer from "@/components/Footer";
import BigTechAlternatives from "@/components/BigTechAlternatives.astro";
import WhatWereUpTo from "@/components/WhatWereUpTo.astro";
import Layout from "@/layouts/Layout.astro";
import "@/styles/globals.css";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<div>
<Navbar client:load activePage="Home" />
<main class="px-4">
<section class="sticky top-0">
<Navbar client:load activePage="Home"/>
</section>
<section id="aboutus" class="scroll-m-20">
<section>
<h1 class="pb-4 text-3xl font-semibold">About Us</h1>
<p>
We situate ourselves in our context - as Seattle residents and as
users and creators of the technologies we aim to resist.
</p>
<div class="my-8">
<a
href="/aboutus/"
class="rounded-sm bg-[#fe4f60FF] px-6 py-3 font-semibold text-white transition-colors"
>
Read More
</a>
</div>
</section>
<section>
<h2 class="pb-4 text-3xl font-semibold">Get Involved</h2>
<div class="pl-4 pr-4 text-xl leading-[2]">
<p>
Do you believe technology can and should be used for good? Do you
think a democratic internet could liberate us? Join us!
@@ -19,18 +43,34 @@ import "@/styles/globals.css";
<p>We share this vision, and we want to work together to achieve it.</p>
<div class="my-8">
<a
href="https://shlink.resisttechmonopolies.online/HNrZG"
class="px-6 py-3 bg-[#80aaff] text-white font-semibold rounded-md hover:bg-[#6090e0] transition-colors"
<a
href="https://shlink.resisttechmonopolies.online/HNrZG"
class="rounded-sm bg-[#80aaff] px-6 py-3 font-semibold text-white transition-colors"
target="_blank"
rel="noopener noreferrer"
>
Fill Out Our Interest Form!
</a>
</div>
</div>
</div>
</section>
</section>
<section id="whatwereupto" class="scroll-m-20 ">
<WhatWereUpTo />
</section>
<!-- <section id="services" class="scroll-m-20 my-8">
TODO services
</section> -->
<!-- <section id="calendar" class="scroll-m-20 my-8">
TODO calendar
</section> -->
<section id="bigtechalternatives" class="scroll-m-20 my-8">
<BigTechAlternatives />
</section>
<Footer />
</main></Layout
>
</main>
</Layout>
src/pages/newlook.astro
-50
View File
@@ -1,50 +0,0 @@
---
import NewLookNavbar from "@/components/NewLookNavbar";
import Footer from "@/components/Footer";
import PointsOfUnity from "@/components/PointsOfUnity.astro";
import OurProjects from "@/components/OurProjects.astro";
import Layout from "@/layouts/Layout.astro";
import "@/styles/globals.css";
---
<Layout>
<main>
<section id="home" class="bg-[#FFF8E7] text-gray-900 px-4 pb-2">
<NewLookNavbar client:load activePage="Home" />
</section>
<section id="projects" class="bg-[#FFE5D9] text-gray-900 px-4 py-16">
<OurProjects />
</section>
<section id="points-of-unity" class="bg-[#D8F3DC] text-gray-900 px-4 py-16">
<PointsOfUnity />
</section>
<section id="get-involved" class="bg-[#D4E4F7] text-gray-900 px-4 py-16">
<h1 class="text-3xl font-semibold">Get Involved</h1>
<div class="text-xl leading-[2]">
<p>
Do you believe technology can and should be used for good? Do you
think a democratic internet could liberate us? Join us!
</p>
<p>We share this vision, and we want to work together to achieve it.</p>
<div class="my-8">
<a
href="https://shlink.resisttechmonopolies.online/HNrZG"
class="px-6 py-3 bg-[#80aaff] text-white font-semibold rounded-md hover:bg-[#6090e0] transition-colors"
target="_blank"
rel="noopener noreferrer"
>
Fill Out Our Interest Form!
</a>
</div>
</div>
</section>
<Footer />
</main>
</Layout>
src/pages/projects.astro
-19
View File
@@ -1,19 +0,0 @@
---
import Navbar from "../components/Navbar";
import Footer from "../components/Footer";
import OurProjects from "../components/OurProjects.astro";
import Layout from "../layouts/Layout.astro";
import "../styles/globals.css";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<div>
<Navbar client:load activePage="OurProjects" />
<div class="pl-4 pr-4">
<OurProjects />
</div>
</div>
<Footer />
</main>
</Layout>
src/pages/projects/PetCalendar.astro
+194 -246
View File
@@ -6,16 +6,25 @@ import "../../styles/globals.css";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<main class="px-4 flex min-h-screen flex-col justify-between">
<div>
<Navbar client:load activePage="WhatWereWorkingOn" />
<section class="sticky top-0">
<Navbar client:load activePage="WhatWereUpTo" />
</section>
<div class="pl-4 pr-4">
<h1 class="pb-4 pt-4 text-3xl font-semibold">Pet Calendar</h1>
<div>We created a pet calendar with 12 beautiful pictures of RTM's
animal friends.
<p class="pb-2">Each month, our pets will share with you with a different way you can
Resist Big Tech Monopolies!</p>
<p class="pb-2"> If you'd like to request a calendar, email us at besties@resisttechmonopolies.online</p>
<h1 class="pb-4 pt-4 text-3xl font-semibold">Pet Calendar</h1>
<div>
We created a pet calendar with 12 beautiful pictures of RTM's animal
friends.
<p class="pb-2">
Each month, our pets will share with you with a different way you
can Resist Big Tech Monopolies!
</p>
<p class="pb-2">
If you'd like to request a calendar, email us at
besties@resisttechmonopolies.online
</p>
<div class="justify-items-center">
<img
src="/assets/pet-calendar-2026-cover.jpg"
@@ -23,321 +32,260 @@ import "../../styles/globals.css";
width="500"
class="border"
/>
</div>
<div>
<div></div>
</div>
</div>
<h1 class="pb-4 pt-4 text-2xl font-semibold">2026 Monthly RTM Tutorials</h1>
<h1 class="pb-4 pt-4 text-2xl font-semibold">
2026 Monthly RTM Tutorials
</h1>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="January">January</h2>
<div>
<p class="mb-2"> Try out Mastadon for algorithmless social media that won't sell your data!</p>
<a
class="underline mb-2"
href="https://joinmastodon.org/"
<div>
<p class="mb-2">
Try out Mastadon for algorithmless social media that won't sell
your data!
</p>
<a class="mb-2 underline" href="https://joinmastodon.org/"
>Join Mastadon!
</a >
<p class="mb-2"> Difficulty rating: 🌶️/5
</p>
</div>
</div>
</a>
<p class="mb-2">Difficulty rating: 🌶️/5</p>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="February">February</h2>
<div>
<p class="mb-2"> Learn about hosting your own instances of tech services to protect your data!</p>
<a
class="underline mb-2"
<p class="mb-2">
Learn about hosting your own instances of tech services to
protect your data!
</p>
<a
class="mb-2 underline"
href="https://www.xda-developers.com/tips-for-self-hosting-beginners/"
>Beginner's Guide to Self-Hosting!
</a >
<p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️/5
</p>
</div>
</div>
</a>
<p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️/5</p>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="March">March</h2>
<div>
<p class="mb-2"> Try out Calibre to read Amazon-free e-books!</p>
<a
class="underline mb-2"
<p class="mb-2">Try out Calibre to read Amazon-free e-books!</p>
<a
class="mb-2 underline"
href="https://tutorials.mediaket.net/software-tutorials/calibre-how-to-use-it.html"
>Get Started with Calibre!
</a >
<p class="mb-2"> Difficulty rating: 🌶️🌶️/5
</p>
</div>
</div>
</a>
<p class="mb-2">Difficulty rating: 🌶️🌶️/5</p>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="April">April</h2>
<div>
<p class="mb-2"> Thinking of switching off Windows or MacOS? Try Linux
for a super customizable, privacy-first operating system!
</p>
<a
class="underline mb-2"
<p class="mb-2">
Thinking of switching off Windows or MacOS? Try Linux for a
super customizable, privacy-first operating system!
</p>
<a
class="mb-2 underline"
href="https://www.geeksforgeeks.org/linux-unix/30-days-of-linux/"
>30 Days of Linux for Beginners!
</a >
<p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️/5
</p>
</a>
<p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️/5</p>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="May">May</h2>
<div>
<p class="mb-2"> Try going outside and repping some protest fashion this Spring!</p>
<a
class="underline mb-2"
<p class="mb-2">
Try going outside and repping some protest fashion this Spring!
</p>
<a
class="mb-2 underline"
href="https://graziamagazine.com/me/articles/history-keffiyeh-palestine/"
>Learn the history and meaning of the keffiyeh!
</a >
<p class="mb-2"> Difficulty rating: 🌶️/5
</p>
</div>
</div>
</a>
<p class="mb-2">Difficulty rating: 🌶️/5</p>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="June">June</h2>
<div>
<p class="mb-2"> Try out Ente for a privacy-friendly, open-source photos hosting platform!</p>
<a
class="underline mb-2"
<p class="mb-2">
Try out Ente for a privacy-friendly, open-source photos hosting
platform!
</p>
<a
class="mb-2 underline"
href="https://web.archive.org/web/20260108185516/https://www.androidauthority.com/ente-photos-hands-on-3542198/"
>In-depth overeview of Ente Photos migration!
</a >
<p class="mb-2"> Difficulty rating: 🌶️/5
</p>
</a>
<p class="mb-2">Difficulty rating: 🌶️/5</p>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="July">July</h2>
<div>
<p class="mb-2"> Try installing your own Pi Hole on your home wifi network to block ad and malware servers!</p>
<a
class="underline mb-2"
<p class="mb-2">
Try installing your own Pi Hole on your home wifi network to
block ad and malware servers!
</p>
<a
class="mb-2 underline"
href="https://protasm.com/blogs/news/an-extensive-tutorial-on-how-to-setup-a-pi-hole"
>Extensive PiHole Tutorial!
</a >
<p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5
</p>
</div>
<hr class="mb-4">
<p class="mb-2"> Alternative: Install an adblocker!</p>
<a
class="underline mb-2"
href="https://adblockplus.org/"
>Install Adblock Plus!
</a >
<p class="mb-2"> Difficulty rating: 🌶️/5
</p>
</div>
</a>
<p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5</p>
</div>
<hr class="mb-4" />
<p class="mb-2">Alternative: Install an adblocker!</p>
<a class="mb-2 underline" href="https://adblockplus.org/"
>Install Adblock Plus!
</a>
<p class="mb-2">Difficulty rating: 🌶️/5</p>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="August">August</h2>
<div>
<p class="mb-2"> Try out DuckDuckGo as a privacy-friendly alternative to Google search and Chrome!</p>
<a
class="underline mb-2"
href="https://duckduckgo.com/"
<p class="mb-2">
Try out DuckDuckGo as a privacy-friendly alternative to Google
search and Chrome!
</p>
<a class="mb-2 underline" href="https://duckduckgo.com/"
>Download Duck Duck Go!
</a >
<p class="mb-2"> Difficulty rating: 🌶️/5
</p>
</div>
</div>
</a>
<p class="mb-2">Difficulty rating: 🌶️/5</p>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="September">September</h2>
<h2 class="mb-4 text-2xl font-semibold" id="September">
September
</h2>
<div>
<p class="mb-2"> Instead of relying on surveillance for safety, try making friends with your neighbors!</p>
<a
class="underline mb-2"
<p class="mb-2">
Instead of relying on surveillance for safety, try making
friends with your neighbors!
</p>
<a
class="mb-2 underline"
href="https://www.youtube.com/watch?v=1-Xl6dhDV3Q"
> How to Build Radical Community!
</a >
<p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️/5
>
How to Build Radical Community!
</a>
<p class="mb-2">Difficulty rating: 🌶️🌶️🌶️/5</p>
(hey making friends in Seattle is hard, okay?)
</div>
<hr class="mb-4" />
<p class="mb-2">
Alternative: Neighbor Unions (buliding community power!)
</p>
(hey making friends in Seattle is hard, okay?)
<a
class="mb-2 underline"
href="https://social-ecology.org/wp/neighbor-union-cohort/"
>Learn about Neighbor Unions!
</a>
</div>
<hr class="mb-4">
<p class="mb-2"> Alternative: Neighbor Unions (buliding community power!)</p>
<a
class="underline mb-2"
href="https://social-ecology.org/wp/neighbor-union-cohort/"
>Learn about Neighbor Unions!
</a >
<p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️/5
</p>
<p class="mb-2">Difficulty rating: 🌶️🌶️🌶️/5</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="October">October</h2>
<div>
<p class="mb-2"> Try out JellyFin to host your own media server
and share with friends. You can break up with Netflix, Hulu, Disney+, and more!
</p>
<a
class="underline mb-2"
href="https://jellyfin.org/docs/general/quick-start/"
>Quickstart for JellyFin!
</a >
<p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️/5
</p>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="November">November</h2>
<div>
<p class="mb-2"> Try out Meet.coop as an open-source, privacy-friendly, and renewable energy-powered alternative to Zoom and Hangouts! </p>
<a
class="underline mb-2"
href="https://www.meet.coop/"
>Make a Meet.coop account!
</a >
<p class="mb-2"> Difficulty rating: 🌶️🌶️/5
</p>
</div>
<hr class="mb-4">
<p class="mb-2"> Free alternative: Jitsi</p>
<a
class="underline mb-2"
href="https://meet.jit.si/"
>Start a Meeting with Jitsi!
</a >
<p class="mb-2"> Difficulty rating: 🌶️/5
</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="December">December</h2>
<div>
<p class="mb-2"> Try out Radicale as a privacy-friendly, open-source alternative to Google Calendar and Outlook!</p>
<a
class="underline mb-2"
href="https://radicale.org/master.html#simple-5-minute-setup"
>Setting up Radicale Tutorial!
</a >
<p class="mb-2"> Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5
</p>
</div>
<hr class="mb-4">
<p class="mb-2"> Alternative: Proton Calendar</p>
<a
class="underline mb-2"
href="https://calendar.proton.me/"
>Switch to Proton Calendar!
</a >
<p class="mb-2"> Difficulty rating: 🌶️/5
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<Footer />
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="October">October</h2>
<div>
<p class="mb-2">
Try out JellyFin to host your own media server and share with
friends. You can break up with Netflix, Hulu, Disney+, and more!
</p>
<a
class="mb-2 underline"
href="https://jellyfin.org/docs/general/quick-start/"
>Quickstart for JellyFin!
</a>
<p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️/5</p>
</div>
</div>
</div>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="November">November</h2>
<div>
<p class="mb-2">
Try out Meet.coop as an open-source, privacy-friendly, and renewable
energy-powered alternative to Zoom and Hangouts!
</p>
<a class="mb-2 underline" href="https://www.meet.coop/"
>Make a Meet.coop account!
</a>
<p class="mb-2">Difficulty rating: 🌶️🌶️/5</p>
</div>
<hr class="mb-4" />
<p class="mb-2">Free alternative: Jitsi</p>
<a class="mb-2 underline" href="https://meet.jit.si/"
>Start a Meeting with Jitsi!
</a>
<p class="mb-2">Difficulty rating: 🌶️/5</p>
</div>
</div>
</main>
</Layout>
<div class="flex flex-col gap-8">
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold" id="December">December</h2>
<div>
<p class="mb-2">
Try out Radicale as a privacy-friendly, open-source alternative to
Google Calendar and Outlook!
</p>
<a
class="mb-2 underline"
href="https://radicale.org/master.html#simple-5-minute-setup"
>Setting up Radicale Tutorial!
</a>
<p class="mb-2">Difficulty rating: 🌶️🌶️🌶️🌶️🌶️/5</p>
</div>
<hr class="mb-4" />
<p class="mb-2">Alternative: Proton Calendar</p>
<a class="mb-2 underline" href="https://calendar.proton.me/"
>Switch to Proton Calendar!
</a>
<p class="mb-2">Difficulty rating: 🌶️/5</p>
</div>
</div>
<Footer />
src/pages/projects/alternatives.astro
-99
View File
@@ -1,99 +0,0 @@
---
import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";
import Layout from "../../layouts/Layout.astro";
import "../../styles/globals.css";
import Card from "../../components/Card.astro";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<div>
<Navbar client:load activePage="OurProjects" />
<div class="pl-4 pr-4">
<h1 class="pb-4 pt-4 text-3xl font-semibold">Big Tech Alternatives</h1>
<p class="mb-4">Explore open-source and privacy-focused alternatives to popular big tech software.</p>
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
<Card
title="Browsers"
bigTech="Chrome (Google)"
alternatives={[
{ name: 'Firefox', description: 'Privacy-focused browser.', url: 'https://www.mozilla.org/firefox' },
]}
bgClass="bg-blue-50"
/>
<Card
title="Cloud Storage"
bigTech="Google Drive"
alternatives={[
{ name: 'Nextcloud', description: 'Self-hosted file sync and share.', url: 'https://nextcloud.com' }
]}
bgClass="bg-indigo-50"
/>
<Card
title="Email"
bigTech="Gmail (Google)"
alternatives={[
{ name: 'ProtonMail', description: 'Encrypted email.', url: 'https://protonmail.com' },
]}
bgClass="bg-yellow-50"
/>
<Card
title="Maps"
bigTech="Google Maps"
alternatives={[
{ name: 'OpenStreetMap', description: 'Community-driven maps.', url: 'https://www.openstreetmap.org' }
]}
bgClass="bg-teal-50"
/>
<Card
title="Messaging"
bigTech="WhatsApp (Meta), Slack"
alternatives={[
{ name: 'Signal', description: 'Encrypted messaging (alternative to WhatsApp).', url: 'https://signal.org' },
{ name: 'Element', description: 'Matrix-based chat (alternative to Slack).', url: 'https://element.io' }
]}
bgClass="bg-red-50"
/>
<Card
title="Search Engines"
bigTech="Google Search"
alternatives={[
{ name: 'DuckDuckGo', description: 'Privacy-protecting search.', url: 'https://duckduckgo.com' },
]}
bgClass="bg-green-50"
/>
<Card
title="Social Media"
bigTech="Twitter (X), Facebook (Meta)"
alternatives={[
{ name: 'Mastodon', description: 'Decentralized social network (alternative to Twitter).', url: 'https://joinmastodon.org' },
]}
bgClass="bg-purple-50"
/>
<Card
title="Video Platforms"
bigTech="YouTube (Google)"
alternatives={[
{ name: 'PeerTube', description: 'Decentralized video hosting.', url: 'https://joinpeertube.org' },
]}
bgClass="bg-pink-50"
/>
</div>
</div>
</div>
<Footer />
</main>
</Layout>
src/pages/projects/bookclub.astro
+9 -5
View File
@@ -6,9 +6,12 @@ import "../../styles/globals.css";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<main class="flex min-h-screen flex-col justify-between px-4">
<div>
<Navbar client:load activePage="OurProjects" />
<section class="sticky top-0">
<Navbar client:load activePage="WhatWereUpTo" />
</section>
<div class="px-4">
<h1 class="pb-4 pt-4 text-3xl font-semibold">Book Club</h1>
<p class="mb-4">
@@ -23,10 +26,11 @@ import "../../styles/globals.css";
<div class="rounded-lg border p-6">
<h2 class="mb-4 text-2xl font-semibold">Current Book</h2>
<div>
Race After Technology - Ruha Benjamin (see <a
Teaching Community Technology Handbook - Detroit Community Technology
Project (read for free <a
class="underline"
href="https://www.dropbox.com/scl/fi/jnzvtiry7jn3xrts2n703/RAT-Discussion-Guide.pdf?rlkey=pq6ovaeydhcm8yi2u7lzzmiuj&e=2&dl=0"
>discussion guide
href="https://detroitcommunitytech.org/?q=teachcommtech"
>here
</a>)
</div>
</div>
src/pages/projects/calendar.astro
-21
View File
@@ -1,21 +0,0 @@
---
import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";
import Layout from "../../layouts/Layout.astro";
import "../../styles/globals.css";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<div>
<Navbar client:load activePage="Calendar" />
<div class="pl-4 pr-4">
<h1 class="pb-4 pt-4 text-3xl font-semibold">Calendar</h1>
<div class="flex flex-col gap-4">
<p class="mb-4">See what we're doing next!</p>
</div>
</div>
</div>
<Footer />
</main>
</Layout>
src/pages/projects/pihole.astro
-19
View File
@@ -1,19 +0,0 @@
---
import Navbar from "../../components/Navbar";
import Footer from "../../components/Footer";
import Layout from "../../layouts/Layout.astro";
import "../../styles/globals.css";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<div>
<Navbar />
<div class="pl-4 pr-4">
<h1 class="text-3xl font-semibold">Pihole</h1>
</div>
</div>
<Footer />
</main>
</Layout>
src/pages/projects/zines.astro
+6 -3
View File
@@ -7,13 +7,16 @@ import "../../styles/globals.css";
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<main class="px-4 flex min-h-screen flex-col justify-between">
<div>
<Navbar client:load activePage="OurProjects" />
<section class="sticky top-0">
<Navbar client:load activePage="WhatWereUpTo" />
</section>
<div class="px-4">
<h1 class="pb-4 pt-4 text-3xl font-semibold">Zines</h1>
<p class="mb-6">
We create and share zines about technology, power, and resistance. You are welcome to download the printable version to fold and distribute!
We create and share zines about technology, power, and resistance. You
are welcome to download the printable version to fold and distribute!
</p>
<ZineGrid client:load />
src/pages/projects/zines/[id].astro
+22 -13
View File
@@ -23,9 +23,12 @@ const { zine } = Astro.props;
---
<Layout>
<main class="flex min-h-screen flex-col justify-between">
<main class="px-4 flex min-h-screen flex-col justify-between">
<div>
<Navbar client:load activePage="OurProjects" />
<section class="sticky top-0">
<Navbar client:load activePage="OurProjects" />
</section>
<div class="px-4">
<a
href="/projects/zines"
@@ -36,9 +39,13 @@ const { zine } = Astro.props;
<div class="mx-auto max-w-3xl">
<h1 class="text-2xl font-semibold">{zine.title}</h1>
{zine.description && (
<p class="mt-1 text-sm text-muted-foreground">{zine.description}</p>
)}
{
zine.description && (
<p class="mt-1 text-sm text-muted-foreground">
{zine.description}
</p>
)
}
<div class="mt-4 flex gap-2">
<ShareZineButton client:load zineId={zine.id} />
@@ -53,14 +60,16 @@ const { zine } = Astro.props;
</div>
<div class="flex flex-col gap-4 py-6">
{zine.pages.map((page, i) => (
<img
src={page}
alt={`Page ${i + 1} of ${zine.title}`}
loading={i === 0 ? "eager" : "lazy"}
class="w-full h-auto rounded shadow-sm bg-white"
/>
))}
{
zine.pages.map((page, i) => (
<img
src={page}
alt={`Page ${i + 1} of ${zine.title}`}
loading={i === 0 ? "eager" : "lazy"}
class="h-auto w-full rounded bg-white shadow-sm"
/>
))
}
</div>
</div>
</div>
src/styles/globals.css
+16
View File
@@ -1,6 +1,7 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
:root {
--background: 0 0% 100%;
@@ -29,6 +30,7 @@
--chart-5: 27 87% 67%;
--radius: 0.5rem;
}
.dark {
--background: 0 0% 3.9%;
--foreground: 0 0% 98%;
@@ -56,10 +58,12 @@
--chart-5: 340 75% 55%;
}
}
@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
}
@@ -70,8 +74,20 @@
src: url("/fonts/Geist[wght].ttf") format("truetype");
font-display: swap;
}
@font-face {
font-family: "GeistMono";
src: url("/fonts/GeistMono[wght].ttf") format("truetype");
font-display: swap;
}
.hamburger {
cursor: pointer;
}
.hamburger .line {
display: block;
width: 36px;
height: 2px;
margin-bottom: 8px;
}