#938 Add dev mode and splash to ease access to orgs and events

CONTRIBUTING.md

@@ -200,7 +200,7 @@ git remote add upstream https://github.com/activist-org/activist.git
    # docker compose --env-file .env.dev down
    ```
 
-5. You can visit <http://localhost:3000/> to see the development build once the container is up and running.
+5. You can visit <http://localhost:3000/> to see the development build once the container is up and running. From there click `View organizations` or `View events` to explore the platform.
 
 > [!NOTE]
 > Feel free to contact the team in the [Development room on Matrix](https://matrix.to/#/!CRgLpGeOBNwxYCtqmK:matrix.org?via=matrix.org&via=acter.global&via=chat.0x7cd.xyz) if you're having problems getting your environment setup!

README.md

@@ -210,7 +210,7 @@ git remote add upstream https://github.com/activist-org/activist.git
    # docker compose --env-file .env.dev down
    ```
 
-6. You can then visit <http://localhost:3000> to see the development frontend build once the container is up and running.
+6. You can then visit <http://localhost:3000> to see the development frontend build once the container is up and running. From there click `View organizations` or `View events` to explore the platform.
 
 > [!NOTE]
 > Feel free to contact the team in the [Development room on Matrix](https://matrix.to/#/!CRgLpGeOBNwxYCtqmK:matrix.org?via=matrix.org&via=acter.global&via=chat.0x7cd.xyz) if you're having problems getting your environment setup! If you're having issues with Docker and just want to get the frontend or backend up and running, please see [the section on this in the contributing guide](https://github.com/activist-org/activist/blob/main/CONTRIBUTING.md#using-yarn-or-python).

frontend/components/FriendlyCaptcha.vue

@@ -7,7 +7,7 @@
     }"
   >
     <vue-friendly-captcha
-      v-if="!inDevMode"
+      v-if="!devMode.active"
       @done="verifyCaptcha"
       class="rounded-md"
       :sitekey="`${FRIENDLY_CAPTCHA_KEY}`"
@@ -35,7 +35,8 @@
 import VueFriendlyCaptcha from "@somushq/vue3-friendly-captcha";
 import { IconMap } from "~/types/icon-map";
 
-const inDevMode = window.location.href.includes("localhost:3000");
+const devMode = useDevMode();
+devMode.check();
 
 const verifyCaptcha = (response: boolean) => {
   console.log("Captcha response:", response);

frontend/components/card/search-result/CardSearchResult.vue

@@ -211,7 +211,7 @@
           <ShieldTopic v-for="(t, i) in topics" :key="i" :topic="t" />
         </div> -->
         <p
-          class="flex justify-center px-3 py-1 md:justify-start md:px-0 md:py-0"
+          class="line-clamp-4 justify-center md:line-clamp-4 md:justify-start md:px-0 md:py-0 lg:line-clamp-5"
         >
           {{ description }}
         </p>

frontend/components/header/HeaderWebsite.vue

@@ -52,7 +52,47 @@
             <DropdownTheme />
             <DropdownLanguage />
             <BtnRouteInternal
-              v-if="aboveLargeBP"
+              v-if="aboveLargeBP && devMode.active"
+              id="btn-sign-in-large"
+              class="block"
+              :cta="true"
+              label="_global.sign_in"
+              linkTo="/auth/sign-in"
+              fontSize="sm"
+              ariaLabel="_global.sign_in_aria_label"
+            />
+            <BtnRouteInternal
+              v-else-if="aboveMediumBP && devMode.active"
+              id="btn-sign-in-medium"
+              class="block"
+              :cta="true"
+              label="_global.sign_in"
+              linkTo="/auth/sign-in"
+              fontSize="xs"
+              ariaLabel="_global.sign_in_aria_label"
+            />
+            <BtnRouteInternal
+              v-if="aboveLargeBP && devMode.active"
+              id="btn-sign-up-large"
+              class="block"
+              :cta="true"
+              label="_global.sign_up"
+              linkTo="/auth/sign-up"
+              fontSize="sm"
+              ariaLabel="_global.sign_up_aria_label"
+            />
+            <BtnRouteInternal
+              v-else-if="aboveMediumBP && devMode.active"
+              id="btn-sign-up-medium"
+              class="block"
+              :cta="true"
+              label="_global.sign_up"
+              linkTo="/auth/sign-up"
+              fontSize="xs"
+              ariaLabel="_global.sign_up_aria_label"
+            />
+            <BtnRouteInternal
+              v-if="aboveLargeBP && !devMode.active"
               id="btn-get-in-touch-large"
               class="block"
               :cta="true"
@@ -62,7 +102,7 @@
               ariaLabel="components.header_website.get_in_touch_aria_label"
             />
             <BtnRouteInternal
-              v-else-if="aboveMediumBP"
+              v-else-if="aboveMediumBP && !devMode.active"
               id="btn-get-in-touch-medium"
               class="block"
               :cta="true"
@@ -82,6 +122,9 @@
 import useBreakpoint from "~/composables/useBreakpoint";
 import { DropdownLocation } from "~/types/location";
 
+const devMode = useDevMode();
+devMode.check();
+
 const aboveMediumBP = useBreakpoint("md");
 const aboveLargeBP = useBreakpoint("lg");
 

frontend/components/landing/LandingSplash.vue

@@ -26,7 +26,26 @@
       </div>
     </div>
     <div class="flex justify-center rounded-md">
+      <BtnRouteInternal
+        v-if="devMode.active"
+        id="view-organizations"
+        :cta="true"
+        label="components.landing_splash.view_organizations"
+        linkTo="/organizations"
+        fontSize="xl"
+        ariaLabel="components.landing_splash.view_organizations_aria_label"
+      />
+      <BtnRouteInternal
+        v-if="devMode.active"
+        id="view-events"
+        :cta="true"
+        label="components.landing_splash.view_events"
+        linkTo="/events"
+        fontSize="xl"
+        ariaLabel="components.landing_splash.view_events_aria_label"
+      />
       <BtnRouteExternal
+        v-else
         id="request-access"
         :cta="true"
         label="_global.request_access"
@@ -42,4 +61,7 @@
 import useBreakpoint from "~/composables/useBreakpoint";
 
 const aboveMediumBP = useBreakpoint("md");
+
+const devMode = useDevMode();
+devMode.check();
 </script>

frontend/i18n/en-US.json

@@ -248,6 +248,10 @@
   "components.landing_splash.message_1": "A platform for growing our movements and organizing actions.",
   "components.landing_splash.message_2": "Free, open-source, privacy-focused and governed by our community.",
   "components.landing_splash.request_access_aria_label": "Request access to activist.org",
+  "components.landing_splash.view_events": "View events",
+  "components.landing_splash.view_events_aria_label": "View the events section of the activist platform",
+  "components.landing_splash.view_organizations": "View organizations",
+  "components.landing_splash.view_organizations_aria_label": "View the organizations section of the activist platform",
   "components.landing_tech_banner.open_header": "Open",
   "components.landing_tech_banner.open_source_tagline": "Our code and processes",
   "components.landing_tech_banner.open_source_text": "We're dedicated to working in the open to build trust with our partner organizations and fellow activists. All who want to help us build are welcome!",

frontend/stores/dev.ts

@@ -0,0 +1,14 @@
+import { useLocalStorage } from "@vueuse/core";
+import { defineStore } from "pinia";
+
+export const useDevMode = defineStore("devMode", {
+  state: () => ({
+    active: useLocalStorage("active", false),
+  }),
+
+  actions: {
+    check() {
+      this.active = window.location.href.includes("localhost:3000");
+    },
+  },
+});

frontend/stores/modals.ts

@@ -11,7 +11,7 @@ export const useModals = defineStore("modals", {
 
   actions: {
     openModal(modalName: string) {
-      const modals = this.modals;
+      const { modals } = this;
       for (const key in modals) {
         modals[key].isOpen = false;
       }