From 306848c0c81b39e6921078388cb6ede4b465fba2 Mon Sep 17 00:00:00 2001 From: "james.hancock@torchbox.com" Date: Fri, 26 Jul 2024 13:02:51 +0100 Subject: [PATCH] Add six groups and support for ad-hoc groups --- README.md | 2 + data/groups/all-terre-adventures/details.json | 9 +++ data/groups/bristol-grit/details.json | 49 +++++++++++++++ .../girls-who-walk-bristol/details.json | 30 +++++++++ .../newton-park-cycle-club/details.json | 2 +- data/groups/ride-bristol/details.json | 62 +++++++++++++++++++ data/groups/wobbly-socials/details.json | 9 +++ .../AdHocCard/AdHocCard.module.scss | 23 +++++++ src/components/AdHocCard/AdHocCard.tsx | 26 ++++++++ src/components/AdHocCard/index.ts | 3 + src/components/GroupCard/GroupCard.stories.ts | 14 ++++- src/components/GroupCard/GroupCard.tsx | 8 ++- src/pages/events/[slug].tsx | 7 +++ src/pages/index.tsx | 2 +- src/stories/mocks.ts | 4 +- src/types/Group.ts | 2 +- 16 files changed, 243 insertions(+), 9 deletions(-) create mode 100644 data/groups/all-terre-adventures/details.json create mode 100644 data/groups/bristol-grit/details.json create mode 100644 data/groups/girls-who-walk-bristol/details.json create mode 100644 data/groups/ride-bristol/details.json create mode 100644 data/groups/wobbly-socials/details.json create mode 100644 src/components/AdHocCard/AdHocCard.module.scss create mode 100644 src/components/AdHocCard/AdHocCard.tsx create mode 100644 src/components/AdHocCard/index.ts diff --git a/README.md b/README.md index dc644fc..ac6f896 100644 --- a/README.md +++ b/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. diff --git a/data/groups/all-terre-adventures/details.json b/data/groups/all-terre-adventures/details.json new file mode 100644 index 0000000..320bada --- /dev/null +++ b/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" +} diff --git a/data/groups/bristol-grit/details.json b/data/groups/bristol-grit/details.json new file mode 100644 index 0000000..f97d44e --- /dev/null +++ b/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/" + } + ] +} diff --git a/data/groups/girls-who-walk-bristol/details.json b/data/groups/girls-who-walk-bristol/details.json new file mode 100644 index 0000000..3fb1b60 --- /dev/null +++ b/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/" + } + ] +} diff --git a/data/groups/newton-park-cycle-club/details.json b/data/groups/newton-park-cycle-club/details.json index d4b799e..d1684e0 100644 --- a/data/groups/newton-park-cycle-club/details.json +++ b/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", diff --git a/data/groups/ride-bristol/details.json b/data/groups/ride-bristol/details.json new file mode 100644 index 0000000..53bae02 --- /dev/null +++ b/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/" + } + ] +} + + + diff --git a/data/groups/wobbly-socials/details.json b/data/groups/wobbly-socials/details.json new file mode 100644 index 0000000..7f055e4 --- /dev/null +++ b/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/" +} diff --git a/src/components/AdHocCard/AdHocCard.module.scss b/src/components/AdHocCard/AdHocCard.module.scss new file mode 100644 index 0000000..dc1bde3 --- /dev/null +++ b/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(); +} diff --git a/src/components/AdHocCard/AdHocCard.tsx b/src/components/AdHocCard/AdHocCard.tsx new file mode 100644 index 0000000..c49849a --- /dev/null +++ b/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) => ( +
+

+ Events are organized on an ad-hoc basis. Click the below link to + find out when the next event is being run. +

+ + View the group's website + +
+); + +export default AdHocCard; diff --git a/src/components/AdHocCard/index.ts b/src/components/AdHocCard/index.ts new file mode 100644 index 0000000..145b946 --- /dev/null +++ b/src/components/AdHocCard/index.ts @@ -0,0 +1,3 @@ +import AdHocCard from './AdHocCard'; + +export default AdHocCard; diff --git a/src/components/GroupCard/GroupCard.stories.ts b/src/components/GroupCard/GroupCard.stories.ts index 83f76e4..cf0f72b 100644 --- a/src/components/GroupCard/GroupCard.stories.ts +++ b/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/', + }, +}; diff --git a/src/components/GroupCard/GroupCard.tsx b/src/components/GroupCard/GroupCard.tsx index 8ceed26..fa0514a 100644 --- a/src/components/GroupCard/GroupCard.tsx +++ b/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 && } + + {type === 'Ad-hoc' && url && } ); }; diff --git a/src/pages/events/[slug].tsx b/src/pages/events/[slug].tsx index 31cf038..9631cb6 100644 --- a/src/pages/events/[slug].tsx +++ b/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 }) => { )} + + {data.type === 'Ad-hoc' && ( +
+ +
+ )} ); }; diff --git a/src/pages/index.tsx b/src/pages/index.tsx index 4498b6c..a013f74 100644 --- a/src/pages/index.tsx +++ b/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; diff --git a/src/stories/mocks.ts b/src/stories/mocks.ts index 964c20b..b642b6b 100644 --- a/src/stories/mocks.ts +++ b/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', }, ]; diff --git a/src/types/Group.ts b/src/types/Group.ts index 4f53788..d1e5409 100644 --- a/src/types/Group.ts +++ b/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;