@@ -234,28 +337,16 @@
>
- Our events are ,Lorem ipsum, dolor sit amet consectetur
- adipisicing elit. Quibusdam exercitationem delectus ab
- voluptates aspernatur, quia deleniti aut maxime, veniam
- accusantium non dolores saepe error, ipsam laudantium asperiores
- dolorum alias nulla!
+ Our events bring together game developers, founders, and practitioners
+ who are building more equitable workplaces. From hands-on workshops
+ about governance and finance to casual co-working sessions and game nights,
+ there's something for every stage of your journey.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
- sunt in culpa qui officia deserunt mollit anim id est laborum.
- Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
- eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
- enim ad minim veniam, quis nostrud exercitation ullamco laboris
- nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
- in reprehenderit in voluptate velit esse cillum dolore eu fugiat
- nulla pariatur. Excepteur sint occaecat cupidatat non proident,
- sunt in culpa qui officia deserunt mollit anim id est laborum.
+ All events are designed to be accessible, with most offered free to members
+ and sliding-scale pricing for non-members. Can't make it live?
+ Many sessions are recorded and shared in our resource library.
@@ -301,19 +392,64 @@
import { VueCal } from "vue-cal";
import "vue-cal/style.css";
+// Composables
+const { formatDateRange, formatDate, isPastDate } = useEventDateUtils();
+const {
+ searchQuery,
+ includePastEvents,
+ searchResults,
+ selectedCategories,
+ isSearching,
+ saveSearchState,
+ loadSearchState,
+ clearSearch: clearSearchFilters,
+} = useCalendarSearch();
+
// Active tab state
const activeTab = ref("upcoming");
+// Hover state for calendar cells
+const hoveredCells = ref({});
+
+const handleMouseEnter = (date) => {
+ hoveredCells.value[date] = true;
+};
+
+const handleMouseLeave = (date) => {
+ hoveredCells.value[date] = false;
+};
+
+const isHovered = (date) => {
+ return hoveredCells.value[date] || false;
+};
+
// Fetch events from API
const { data: eventsData, pending, error } = await useFetch("/api/events");
// Fetch series from API
const { data: seriesData } = await useFetch("/api/series");
+// Event categories for filtering
+const eventCategories = computed(() => {
+ if (!eventsData.value) return [];
+ const categories = new Set();
+ eventsData.value.forEach((event) => {
+ if (event.eventType) {
+ categories.add(event.eventType);
+ }
+ });
+ return Array.from(categories).map((type) => ({
+ id: type,
+ name: type.charAt(0).toUpperCase() + type.slice(1),
+ }));
+});
+
// Transform events for calendar display
const events = computed(() => {
- if (!eventsData.value) return [];
+ if (!eventsData.value) {
+ return [];
+ }
- return eventsData.value.map((event) => ({
+ const transformed = eventsData.value.map((event) => ({
id: event.id || event._id,
slug: event.slug,
start: new Date(event.startDate),
@@ -329,6 +465,71 @@ const events = computed(() => {
featureImage: event.featureImage,
series: event.series,
}));
+ return transformed;
+});
+
+// Helper function to format date for VueCal
+// When time is disabled, VueCal expects just 'YYYY-MM-DD' format
+const formatDateForVueCal = (date) => {
+ const d = date instanceof Date ? date : new Date(date);
+ const year = d.getFullYear();
+ const month = String(d.getMonth() + 1).padStart(2, "0");
+ const day = String(d.getDate()).padStart(2, "0");
+ return `${year}-${month}-${day}`;
+};
+
+// Transform events for calendar view
+const calendarEvents = computed(() => {
+ const filtered = events.value
+ .filter((event) => {
+ // Filter by past events setting
+ if (!includePastEvents.value && isPastDate(event.start)) {
+ return false;
+ }
+ return true;
+ })
+ .map((event) => {
+ // VueCal expects Date objects when time is disabled
+ // Only pass title (no content/description) for clean display
+ return {
+ start: event.start, // Use Date object directly
+ end: event.end, // Use Date object directly
+ title: event.title, // Only title, no description
+ class: event.class,
+ };
+ });
+
+ return filtered;
+});
+
+// Filter events based on search query and selected categories
+const filteredEvents = computed(() => {
+ return events.value.filter((event) => {
+ // Filter by past events setting
+ if (!includePastEvents.value && isPastDate(event.start)) {
+ return false;
+ }
+
+ // Filter by search query
+ if (searchQuery.value) {
+ const query = searchQuery.value.toLowerCase();
+ const matchesTitle = event.title.toLowerCase().includes(query);
+ const matchesDescription =
+ event.content?.toLowerCase().includes(query) || false;
+ if (!matchesTitle && !matchesDescription) {
+ return false;
+ }
+ }
+
+ // Filter by selected categories
+ if (selectedCategories.value.length > 0) {
+ if (!selectedCategories.value.includes(event.eventType)) {
+ return false;
+ }
+ }
+
+ return true;
+ });
});
// Get active event series
@@ -340,13 +541,13 @@ const activeSeries = computed(() => {
);
});
-// Get upcoming events (future events)
+// Get upcoming events (future events, respecting filters)
const upcomingEvents = computed(() => {
const now = new Date();
- return events.value
+ return filteredEvents.value
.filter((event) => event.start > now)
.sort((a, b) => a.start - b.start)
- .slice(0, 6); // Show max 6 upcoming events
+ .slice(0, 10); // Show max 10 upcoming events
});
// Format event date for display
@@ -426,30 +627,6 @@ const getSeriesTypeBadgeClass = (type) => {
"bg-gray-100 text-gray-700 dark:bg-gray-900/30 dark:text-gray-400"
);
};
-
-const formatDateRange = (startDate, endDate) => {
- if (!startDate || !endDate) return "No dates";
-
- const start = new Date(startDate);
- const end = new Date(endDate);
-
- const startMonth = start.toLocaleDateString("en-US", { month: "short" });
- const endMonth = end.toLocaleDateString("en-US", { month: "short" });
- const startDay = start.getDate();
- const endDay = end.getDate();
- const year = end.getFullYear();
-
- if (
- start.getMonth() === end.getMonth() &&
- start.getFullYear() === end.getFullYear()
- ) {
- return `${startMonth} ${startDay}-${endDay}, ${year}`;
- } else if (start.getFullYear() === end.getFullYear()) {
- return `${startMonth} ${startDay} - ${endMonth} ${endDay}, ${year}`;
- } else {
- return `${formatEventDate(startDate)} - ${formatEventDate(endDate)}`;
- }
-};
+
+
+
+
+
+
Hi ${waitlistEntry.name},
+
+
Great news! A spot has become available for ${eventData.title}, and you're on the waitlist.
+
+
+
+ β° Act fast! Spots are filled on a first-come, first-served basis.
+
+
+
+
+
+
Event
+
${eventData.title}
+
+
+
+
Date
+
${formatDate(eventData.startDate)}
+
+
+
+
Time
+
${formatTime(eventData.startDate, eventData.endDate)}
+
+
+
+
Location
+
${eventData.location}
+
+
+
+
+
+ Register Now β
+
+
+
+
+ If you can no longer attend, no worries! Just ignore this email and the spot will go to the next person on the waitlist.
+
+
+
+
+
+