Add six groups and support for ad-hoc groups

README.md

@@ -2,6 +2,8 @@
 
 A website listing social groups in Bristol, UK. [View the live site](https://bristolsocialgroups.com/), or for an extended introduction to the project, [read the about page](https://bristolsocialgroups.com/about).
 
+The pattern library for this project [is hosted with Storybook](https://jhancock532.github.io/bristol-social-groups/?path=/docs/getting-started--docs).
+
 ## Documentation Index
 
 - [Getting started](https://github.com/jhancock532/bristol-social-groups/blob/main/documentation/getting-started.md) - a guide for developers new to the project to get up and running.

data/groups/all-terre-adventures/details.json

@@ -0,0 +1,9 @@
+{
+  "name": "All Terre Adventures",
+  "slug": "all-terre-adventures",
+  "description": "A group that hosts free to join all-terrain bike rides around Bristol. Open to anyone who has a off-road ready bike, check the events page for the latest rides.",
+  "details": "",
+  "tags": ["cycling", "pubs"],
+  "type": "Ad-hoc",
+  "url": "https://allterre.net/events"
+}

data/groups/bristol-grit/details.json

@@ -0,0 +1,49 @@
+{
+  "name": "Bristol Grit",
+  "slug": "bristol-grit",
+  "description": "Bristol based adventure cyclists, sharing routes, laughs and off road rides. No 🦬💩, just riding bikes.",
+  "details": "",
+  "tags": ["cycling", "pubs"],
+  "type": "Regular",
+  "url": "https://www.instagram.com/bristolgrit/",
+  "events": [
+    {
+      "name": "Wednesday group ride",
+      "details": "",
+      "time": {
+        "frequency": "Weekly",
+        "weekday": "Wednesday",
+        "start": "Jan 1, 1970 18:15",
+        "end": "Jan 1, 1970 21:00",
+        "details": "The meeting and departure time may vary. Check the Instagram page for the latest details."
+      },
+      "locationURL": "https://www.instagram.com/bristolgrit/",
+      "cost": {
+        "sessionPrice": 0.0
+      },
+      "booking": {
+        "required": false
+      },
+      "url": "https://www.instagram.com/bristolgrit/"
+    },
+    {
+      "name": "Saturday group ride",
+      "details": "",
+      "time": {
+        "frequency": "Weekly",
+        "weekday": "Saturday",
+        "start": "Jan 1, 1970 09:00",
+        "end": "Jan 1, 1970 12:00",
+        "details": "The meeting and departure time may vary. Check the Instagram page for the latest details."
+      },
+      "locationURL": "https://www.instagram.com/bristolgrit/",
+      "cost": {
+        "sessionPrice": 0.0
+      },
+      "booking": {
+        "required": false
+      },
+      "url": "https://www.instagram.com/bristolgrit/"
+    }
+  ]
+}

data/groups/girls-who-walk-bristol/details.json

@@ -0,0 +1,30 @@
+{
+  "name": "Girls Who Walk Bristol",
+  "slug": "girls-who-walk-bristol",
+  "description": "Making friends & getting steps in 🩷. A walking group for women that meets on Sundays at various locations around Bristol.",
+  "details": "",
+  "tags": ["walking"],
+  "type": "Regular",
+  "url": "https://www.instagram.com/girlswhowalkbristol/",
+  "events": [
+    {
+      "name": "Sunday walk",
+      "details": "",
+      "time": {
+        "frequency": "Weekly",
+        "weekday": "Wednesday",
+        "start": "Jan 1, 1970 10:30",
+        "end": "Jan 1, 1970 12:00",
+        "details": "Check the Instagram page for the latest details."
+      },
+      "locationURL": "https://www.instagram.com/girlswhowalkbristol/",
+      "cost": {
+        "sessionPrice": 0.0
+      },
+      "booking": {
+        "required": false
+      },
+      "url": "https://www.instagram.com/girlswhowalkbristol/"
+    }
+  ]
+}

data/groups/newton-park-cycle-club/details.json

@@ -34,7 +34,7 @@
       "name": "Sunday Social rides",
       "details": "Longer social rides with groups that cycle at different paces. Routes change, for the latest details check the event announcement on Instagram.",
       "time": {
-        "frequency": "Fortnightly",
+        "frequency": "Fortnightly on Sundays",
         "weekday": "Sunday",
         "start": "Jan 1, 1970 09:30",
         "end": "Jan 1, 1970 12:00",

data/groups/ride-bristol/details.json

@@ -0,0 +1,62 @@
+{
+  "name": "Ride Bristol",
+  "slug": "ride-bristol",
+  "description": "Bristol’s off-road cycling charity, running community cycling events & developing trails. Rides are at a social, no drop pace, you'll need a mountain bike (or similar) and a helmet. Less experienced riders and newbies are 100% welcome! The first Saturday of the month event is for women/marginalised genders, please check the Instagram page for the latest details.",
+  "details": "",
+  "tags": ["cycling", "pubs"],
+  "type": "Regular",
+  "url": "https://www.instagram.com/ridebristol/",
+  "events": [
+    {
+      "name": "Thursday night ride out",
+      "details": "",
+      "time": {
+        "frequency": "Third Thursday of the month",
+        "weekday": "Thursday",
+        "start": "Jan 1, 1970 19:00",
+        "end": "Jan 1, 1970 21:00",
+        "details": ""
+      },
+      "location": {
+        "address": "Pedal Progression, Ashton Court Golf and Cycle Hub, Abbots Leigh Road, BS8 3PX",
+        "latitude": "51.451116",
+        "longitude": "-2.644240",
+        "googleMapsLink": "https://maps.app.goo.gl/Pn9EGvMbMyRSKhSu7"
+      },
+      "cost": {
+        "sessionPrice": 0.0
+      },
+      "booking": {
+        "required": false
+      },
+      "url": "https://www.instagram.com/ridebristol/"
+    },
+    {
+      "name": "The Women's Ride",
+      "details": "These rides are for all women/marginalised genders and are a social, no drop pace. You'll need a mountain bike (or similar) and a helmet and be happy riding the surfaced, blue trails at AC. Less experienced riders and newbies are 100% welcome!",
+      "time": {
+        "frequency": "First Saturday of the month",
+        "weekday": "Saturday",
+        "start": "Jan 1, 1970 09:15",
+        "end": "Jan 1, 1970 12:00",
+        "details": ""
+      },
+      "location": {
+        "address": "Pedal Progression, Ashton Court Golf and Cycle Hub, Abbots Leigh Road, BS8 3PX",
+        "latitude": "51.451116",
+        "longitude": "-2.644240",
+        "googleMapsLink": "https://maps.app.goo.gl/Pn9EGvMbMyRSKhSu7"
+      },
+      "cost": {
+        "sessionPrice": 0.0
+      },
+      "booking": {
+        "required": false
+      },
+      "url": "https://www.instagram.com/ridebristol/"
+    }
+  ]
+}
+
+
+

data/groups/wobbly-socials/details.json

@@ -0,0 +1,9 @@
+{
+  "name": "Wobbly Socials",
+  "slug": "wobbly-socials",
+  "description": "Wobbly Socials are for anyone who often feels a bit nervous about socialising. The aim of the group is to create a safe and welcoming space so that all attendees feel comfortable.",
+  "details": "",
+  "tags": ["walking", "introvert"],
+  "type": "Ad-hoc",
+  "url": "https://www.instagram.com/wobblysocials/"
+}

src/components/AdHocCard/AdHocCard.module.scss

@@ -0,0 +1,23 @@
+@use 'variables' as *;
+
+.container {
+    @include font-size(s);
+    padding: $grid;
+    border-radius: $border-radius;
+    background-color: var(--color--bright-white);
+    margin-bottom: auto;
+    max-width: 600px;
+    box-shadow: $box-shadow;
+}
+
+.description {
+    margin-bottom: $grid;
+    display: flex;
+    gap: $grid / 2;
+    flex-direction: row;
+    align-items: flex-start;
+}
+
+.externalLink {
+    @include external-button-link();
+}

src/components/AdHocCard/AdHocCard.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { ExternalIcon } from '@/components/Icons/ExternalIcon';
+import styles from './AdHocCard.module.scss';
+
+type AdHocCardProps = {
+    url: string;
+};
+
+const AdHocCard = ({ url }: AdHocCardProps) => (
+    <div className={styles.container}>
+        <p className={styles.description}>
+            Events are organized on an ad-hoc basis. Click the below link to
+            find out when the next event is being run.
+        </p>
+        <a
+            className={styles.externalLink}
+            href={url}
+            target="_blank"
+            rel="noreferrer"
+        >
+            View the group&apos;s website <ExternalIcon />
+        </a>
+    </div>
+);
+
+export default AdHocCard;

src/components/AdHocCard/index.ts

@@ -0,0 +1,3 @@
+import AdHocCard from './AdHocCard';
+
+export default AdHocCard;

src/components/GroupCard/GroupCard.stories.ts

@@ -13,7 +13,7 @@ const meta = {
         name: { control: 'text' },
         description: { control: 'text' },
         slug: { control: 'text' },
-        type: { control: 'select', options: ['Discord', 'Meetup', 'Other'] },
+        type: { control: 'select', options: ['Discord', 'Regular', 'Other'] },
         url: { control: 'text' },
         events: { control: 'object' },
     },
@@ -28,7 +28,7 @@ export const Default: Story = {
         description:
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
         slug: 'example-group',
-        type: 'Meetup',
+        type: 'Regular',
         url: 'https://example.com/group',
         events: [MOCK_EVENTS[0]],
     },
@@ -51,3 +51,13 @@ export const DiscordGroup: Story = {
         url: 'https://example.com/',
     },
 };
+
+export const AdHocGroup: Story = {
+    args: {
+        ...Default.args,
+        name: 'Group that arranges ad-hoc events',
+        events: undefined,
+        type: 'Ad-hoc',
+        url: 'https://example.com/',
+    },
+};

src/components/GroupCard/GroupCard.tsx

@@ -3,14 +3,16 @@ import Link from 'next/link';
 import DiscordCard from '@/components/DiscordCard';
 import EventCard from '@/components/EventCard';
 import { Event } from '@/types/Event';
+import { GroupType } from '@/types/Group';
 
 import styles from './GroupCard.module.scss';
+import AdHocCard from '../AdHocCard';
 
 type GroupCardProps = {
     name: string;
     description: string;
     slug: string;
-    type?: string;
+    type?: GroupType;
     url?: string;
     events?: Event[];
 };
@@ -21,7 +23,7 @@ type GroupCardProps = {
  * @param {string} name - The name of the group
  * @param {string} description - A one to two sentence description of the group
  * @param {string} slug - The URL slug where the user can find more information about the group within this website
- * @param {string} type - The type of group, e.g. "Meetup" or "Discord"
+ * @param {string} type - The type of group, e.g. "Regular" or "Ad-hoc"
  * @param {string} url - A URL where the user can find more information about the group
  * @param {Event[]} events - An array of events hosted by the group
  */
@@ -50,6 +52,8 @@ const GroupCard = ({
             )}
 
             {type === 'Discord' && url && <DiscordCard url={url} />}
+
+            {type === 'Ad-hoc' && url && <AdHocCard url={url} />}
         </div>
     );
 };

src/pages/events/[slug].tsx

@@ -4,6 +4,7 @@ import dynamic from 'next/dynamic';
 
 import Layout from '@/components/Layout';
 import Metadata from '@/components/Metadata';
+import AdHocCard from '@/components/AdHocCard';
 import DiscordCard from '@/components/DiscordCard';
 import { ClockIcon } from '@/components/Icons/ClockIcon';
 import { ReceiptIcon } from '@/components/Icons/ReceiptIcon';
@@ -210,6 +211,12 @@ const EventPage = ({ data }: { data: any }) => {
                     <DiscordCard url={data.url} />
                 </div>
             )}
+
+            {data.type === 'Ad-hoc' && (
+                <div className={styles.discordContainer}>
+                    <AdHocCard url={data.url} />
+                </div>
+            )}
         </Layout>
     );
 };

src/pages/index.tsx

@@ -62,7 +62,7 @@ export default function Home({ groups }: any) {
                         (e: any) => e.time.weekday === selectedWeekday,
                     );
             }
-            if (event.type === 'Discord') {
+            if (event.type === 'Discord' || event.type === 'Ad-hoc') {
                 matchesWeekday = true;
             }
             return matchesTags && matchesWeekday;

src/stories/mocks.ts

@@ -55,7 +55,7 @@ export const MOCK_GROUPS: Group[] = [
             'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
         tags: ['lorem', 'ipsum', 'dolor'],
         events: [MOCK_EVENTS[0], MOCK_EVENTS[1]],
-        type: 'Meetup',
+        type: 'Regular',
         url: 'https://lorem.ipsum/dolor',
     },
     {
@@ -75,7 +75,7 @@ export const MOCK_GROUPS: Group[] = [
             'Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.',
         tags: ['adipiscing', 'elit', 'sed'],
         events: MOCK_EVENTS,
-        type: 'Meetup',
+        type: 'Regular',
         url: 'https://adipiscing.elit/sed',
     },
 ];

src/types/Group.ts

@@ -1,6 +1,6 @@
 import { Event } from './Event';
 
-type GroupType = 'Discord' | 'Meetup' | string;
+export type GroupType = 'Discord' | 'Regular' | 'Ad-hoc' | string;
 
 export type Group = {
     name: string;