Development

.github/workflows/E2E.yml

@@ -110,5 +110,5 @@ jobs:
         if: always()
         with:
           name: playwright-report
-          path: playwright-report/
+          path: apps/site/playwright-report/
           retention-days: 30

apps/site/src/content/index/members/_index.ts

@@ -3,14 +3,14 @@ import { z } from "zod";
 
 import * as ccaUnsafe from "./CCA.md";
 import * as laborDaoUnsafe from "./laborDAO.md";
-import * as pactUnsafe from "./pact.md";
+import * as symbiotaUnsafe from "./symbiota.md";
 
 const ZMemberCard = z.object({
   frontmatter: ZMemberCardProps,
 });
 
 const { frontmatter: cca } = ZMemberCard.parse(ccaUnsafe);
 const { frontmatter: laborDao } = ZMemberCard.parse(laborDaoUnsafe);
-const { frontmatter: pact } = ZMemberCard.parse(pactUnsafe);
+const { frontmatter: symbiota } = ZMemberCard.parse(symbiotaUnsafe);
 
-export { cca, laborDao, pact };
+export { cca, laborDao, symbiota };

apps/site/src/content/index/members/symbiota.md

@@ -0,0 +1,6 @@
+---
+name: Symbiota
+info: A collective of event-focused organisations devoted to new forms of culture and enquiry, structured as a not-for-profit worker co-operative.
+logo: /img/symbiota_banner.jpg
+link: https://symbiota.coop/
+---

apps/site/src/layouts/Layout.astro

@@ -22,7 +22,7 @@ const { title } = Astro.props;
     <link rel="icon" type="image/svg+xml" href="/img/bread_32x32.png" />
     <meta name="generator" content={Astro.generator} />
     <meta name="description" content="The currency for solidarity." />
-    <meta name="title" content="Breadchain Cooperative" />
+    <meta name="title" content="Breadchain Co-operative" />
 
     <meta property="og:url" content="https://breadchain.xyz" />
     <meta property="og:image" content="/img/breadlogo.png" />

apps/site/src/pages/index.astro

@@ -10,14 +10,14 @@ import {
 import Layout from "../layouts/Layout.astro";
 
 import { heading, subheading } from "../content/index/hero/_index";
-import { cca, laborDao, pact } from "../content/index/members/_index";
+import { cca, laborDao, symbiota } from "../content/index/members/_index";
 import { values } from "../content/index/values/_index";
 ---
 
 <Layout title="Breadchain Cooperative.">
   <Hero heading={heading} subheading={subheading} />
   <InfoCards />
-  <Members members={[cca, laborDao, pact]} />
+  <Members members={[cca, laborDao, symbiota]} />
   <Values values={values} />
   <CTASection />
 </Layout>

apps/site/src/styles/base.css

@@ -15,7 +15,7 @@
     @apply font-redhat;    
   }
   * {
-    @apply focus:outline focus:outline-4 focus:outline-green-400 focus:outline-offset-4 rounded ;
+    @apply focus-visible:outline focus-visible:outline-4 focus-visible:outline-green-400 focus-visible:outline-offset-4 rounded ;
   }
   .transition-display {
     transition: display 1000ms;

apps/site/tests/desktop.spec.ts

@@ -9,10 +9,10 @@ test.describe("desktop - homepage", () => {
   test("should not have any automatically detectable accessibility issues", async ({
     page,
   }) => {
-    await page.goto("/"); // 3
+    await page.goto("/");
 
-    const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); // 4
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
 
-    expect(accessibilityScanResults.violations).toEqual([]); // 5
+    expect(accessibilityScanResults.violations).toEqual([]);
   });
 });

apps/site/tests/mobile.spec.ts

@@ -9,10 +9,10 @@ test.describe("mobile - homepage", () => {
   test("should not have any automatically detectable accessibility issues", async ({
     page,
   }) => {
-    await page.goto("/"); // 3
+    await page.goto("/");
 
-    const accessibilityScanResults = await new AxeBuilder({ page }).analyze(); // 4
+    const accessibilityScanResults = await new AxeBuilder({ page }).analyze();
 
-    expect(accessibilityScanResults.violations).toEqual([]); // 5
+    expect(accessibilityScanResults.violations).toEqual([]);
   });
 });

package.json

@@ -9,7 +9,7 @@
     "app": "pnpm --filter @breadchain.xyz/app",
     "site-ui": "pnpm --filter @breadchain.xyz/site-ui",
     "site:build": "pnpm install && pnpm site run build",
-    "test": "echo \"Error: no test specified\" && exit 1"
+    "site:test": "pnpm site playwright test"
   },
   "keywords": [],
   "author": "",
@@ -18,4 +18,4 @@
     "prettier": "^2.8.4",
     "prettier-plugin-tailwindcss": "^0.2.8"
   }
-}
+}

packages/site-ui/components/Footer/Footer.tsx

@@ -1,3 +1,4 @@
+import React from "react";
 import type { ReactNode } from "react";
 
 import classNames from "classnames";
@@ -88,14 +89,18 @@ export function Footer() {
       <div className={classNames(pageWrap, pageWrapPadding, "pb-16 pt-12")}>
         <FooterGrid>
           <FooterLogoSection>
-            <div className="flex flex-row gap-4">
-              <div className="w-10 pb-0.5">
+            <a
+              href="/"
+              className="flex flex-row items-center gap-4"
+              aria-label="home"
+            >
+              <div className="w-10">
                 <Logo />
               </div>
               <h3 className="dark:text-breadgray-ultra-white text-2xl font-bold">
                 Breadchain
               </h3>
-            </div>
+            </a>
             <p>Funding post-capitalism</p>
             <a
               href="mailto:[email protected]"

packages/site-ui/components/Header.tsx

@@ -33,7 +33,7 @@ export function Header() {
           "flex items-center gap-6 py-6 md:py-8 lg:gap-10"
         )}
       >
-        <div className="w-28 md:w-32">
+        <div className="w-24 md:w-28">
           <Logo />
         </div>
 

packages/site-ui/components/Hero/Hero.tsx

@@ -26,7 +26,7 @@ export function Hero({ subheading, heading }: THeroProps) {
         <div
           className={classNames(
             pageWrapPadding,
-            "py-t flex max-w-[18rem] flex-col gap-2 sm:max-w-[26rem] md:max-w-[42rem] md:pt-24"
+            "flex max-w-[18rem] flex-col gap-2 pt-6 sm:max-w-[26rem] md:max-w-[42rem] md:pt-20"
           )}
         >
           <HeroTagline>

packages/site-ui/components/InfoCards/InfoCards.tsx

@@ -217,7 +217,7 @@ export function InfoCards() {
           </svg>
         </div>
 
-        <div className="col-span-1 col-start-2 row-span-1 row-start-2">
+        <div className="col-span-3 col-start-1 row-span-1 row-start-2 md:col-span-1 md:col-start-2">
           <InfoCard key={`infocard_${0}`}>
             <div className="absolute left-0 top-0 md:hidden">
               <svg
@@ -262,7 +262,7 @@ export function InfoCards() {
           </InfoCard>
         </div>
 
-        <div className="col-span-1 col-start-2 row-span-1 row-start-4 md:col-start-4 md:row-start-2">
+        <div className="col-span-3 col-start-1 row-span-1 row-start-4 md:col-span-1 md:col-start-4 md:row-start-2">
           <InfoCard key={`infocard_${1}`}>
             {/* <BackgroundSVG /> */}
             <InfoCardIcon>{infoCards[1].icon}</InfoCardIcon>
@@ -273,7 +273,7 @@ export function InfoCards() {
           </InfoCard>
         </div>
 
-        <div className="col-span-1 col-start-2 row-span-1 row-start-6 md:col-start-6 md:row-start-2">
+        <div className="col-span-3 col-start-1 row-span-1 row-start-6 md:col-span-1 md:col-start-6 md:row-start-2">
           <InfoCard key={`infocard_${2}`}>
             <div className="absolute bottom-0 right-0 md:hidden">
               <svg

packages/site-ui/components/Logo/Logo.tsx

@@ -2,16 +2,10 @@ import React from "react";
 
 export function Logo() {
   return (
-    <a
-      href="/"
-      className="flex h-full w-full items-center justify-center px-4 py-2"
-      aria-label="home"
-    >
-      <img
-        className="w-full"
-        src="data:image.jpeg;base64, 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"
-        alt=""
-      />
-    </a>
+    <img
+      className="w-full"
+      src="data:image.jpeg;base64, iVBORw0KGgoAAAANSUhEUgAAAeAAAACMCAYAAACklXoAAAAAAXNSR0IArs4c6QAAB7NJREFUeJzt3bFOW0saB/BDACPLGEgFhRFLihQotSWUtFfiEWijvMBKt9omRZqtrrQvEKXlEZBum8iCmirF1SKMRKi4EhaSWcO2qzuDNBzDfrbz+5WjmXMmY5h/Rnwaz339cFwVui/tCGOaqzvw3efuU86DQPYmJtCT7k0vxpoKAFCLAAaAAAIYAAIIYAAIMPdAoUNRUcPb7sbTzuYn8+34InoK066oIEJh1uR76oIre9N47E1jK9qbnIABIIAABoAAAhgAAghgAAgw9/XDsaKGCacgotzmx/WkrdlsBsykqm5ubnLNtW/S2draKup3enpa9xVVlSlyilq/7//4d1E/e1Mce9OjJL/7TsAAEEAAA0AAAQwAAQQwAARYyDUqapgsuc9D8UPe2acfSVuuMCtQ6Vfn1S7WGvO9iQeKyULYmyaLvelRkt9BJ2AACCCAASCAAAaAAAIYAAJki7BglpydnRX16/f7Rf06nU7tuWxubhb1m5+fT9ouLy+Lxg6Hw6RtNBoVjS1dq5ynX79G7bnANHACBoAAAhgAAghgAAgggAEggCIsZt+XRvo1YB/+k3Tb3t4uelyuoOnFi/T/ssvLy7nhRTdSNRqN2jdXNRpp8VLpbVZra2vJWl1fXyf97u7ukrZx1u/uc3Yrqr0GMA2cgAEggAAGgAACGAACCGAACKAIi9n3fpgU82RqiKqdnZ2ix52cnCRtuaKkdrtd9LycqK8AbLfbyVpdXV0VjR1n/ar36e1d1Rc3YTHbnIABIIAABoAAAhgAAghgAAigCIvZl7kJa/XvzaTb+fl50c1Lq6uryfPu77NDa9/k1Ov16g7N2t3drT12ZWUl+ffOzSVNY63fn//KFp25CYuZ5gQMAAEEMAAEEMAAEEAAA0AARVj8lF6+fJm0jUajtLIoY3FxMWlbWEh/lQaDQfK8o6OjosKiVquVjB0MBiVDq1arlbT1er2i93a73eS96+vrSb/b29ukbZz1+7PqlwyFmeIEDAABBDAABBDAABBAAANAAEVYzLzX//zbs9+o1GikX52Xa9vb20vaDg8Pk7ZcwdX+/n7RXA4ODor65eZSZW6fGg7TrwrM/dvG8ea310nbya/fn/QdMGmcgAEggAAGgAACGAACCGAACJAtwvp2fJG0ve1uPPtkyMt9HjzgfVow9P375BTz9PvpjU8bGxvJDVIXF8//meeKvzqdzrO/t1xa6GVvmiz2pkdJfs+dgAEggAAGgAACGAACCGAACLBQZf4wXGVuw1H88PQUMIwt+dnt9/vJz25UYVGu4KrZbBYVXJXeevUIyXuXlpaSThO1fr/8kbR1fn+VtNmbnp69aWxFX83pBAwAAQQwAAQQwAAQQAADQICHvo6wqDALJs3+/n5R8cMsG7OAa2LW7+uH49Ku9iYm3rvP3aTNCRgAAghgAAgggAEggAAGgAALuT8MP6L4AeBZ2JuYdU7AABBAAANAAAEMAAEEMAAEEMAAEEAAA0AAAQwAAQQwAAQQwAAQQAADQAABDAABBDAABBDAABBAAANAAAEMAAEEMAAEEMAAEEAAA0AAAQwAARaiJwB1bX5cv/9r2+nH07m6z9va2irqd3p6WvcVVVVVyZybzeY4z6vt5uYm1zx163f26cc4z4MwTsAAEEAAA0AAAQwAAQQwAARQhMWsSYp0HlC72GjM9yYeKIaKMnXrB9PKCRgAAghgAAgggAEggAAGgACKsJhaZ2dnSdvm5mbR2Pn5+aTt8vKyaOxwOEzaRqNR0djcnEv1+/2ifp1Op/Y7pnP9GkVjYdI4AQNAAAEMAAEEMAAEEMAAEEARFtPrSyO9jelj2Y1KjUaj9s1LjUZa9FN6m9Xa2loy5+vr66Tf3d1d0ra9vV30jlxB04sX6f+1l5eXc8Mnev2yn7lbtJhSTsAAEEAAA0AAAQwAAQQwAARQhMXU2vy4PnVfAdhut5M5X11dFY3d2dkp6ndycpK05Yq62u120fNyotYv95mfffoRMRUYmxMwAAQQwAAQQAADQAABDAABFGHxU+r1ek/6vN3d3dpjV1ZWktud5ubSC5/Oz8+Lis5WV1eTwff32aG1i9gmaf1gWjkBA0AAAQwAAQQwAAQQwAAQQBEWU+vs04+k2Kj/yx9FhUWtVisZOxgMit7barWStl6vV/TebrebvHd9fT3pd3t7m7SNRqPcV/ElFhcXk7aFhfRXfTAYJM87Ojqa6PXr/P7K1xEyM5yAASCAAAaAAAIYAAIIYAAIoAiLqfXmt9dJ8c2b6nXS7/DwMGnLFQzt7+8Xvffg4KCo397eXq45mfNwOEw6NRqNoneUyj0v15ab80St3166fie/fi96HkwaJ2AACCCAASCAAAaAAAIYAAIowmJqnZycJG39fj9p29jYSG5Puri4eJ5J/Y9c8VKn03n2945jOtfvaQvW4P/FCRgAAghgAAgggAEggAAGgABjFWF9O04LMd52N8Z55MzKrRXjyRUMNZvNooKh0lubHiF579LSUtKp3+8nNzlFFWbNzPpVr5J+9qZy9qY4TsAAEEAAA0AAAQwAAQQwAARICh+qqqq+fjguHZ8URMAzyf6s/tW7z93nngeB7E1MoNp7kxMwAAQQwAAQQAADQAABDAAB/gtSp+KG7trJMQAAAABJRU5ErkJggg=="
+      alt=""
+    />
   );
 }