Jennie Robinson Faber
622cc8e53b
- Public event detail page renders description/series-description/content as markdown via useMarkdown, with prose styles; agenda becomes an unordered list with the same custom bullets. - Events list API returns `isRegistered` per event (derived from the requester's registrations, ignoring cancelled rows), and the list page shows a "Registered" tag. Stops exposing the full registrations array in the list response. - Removes the seats/sold-out/limited capacity UI from list and detail pages. - EventTicketPurchase: minor template formatting (self-closing inputs, prettier wrapping).
520 lines
12 KiB
Vue
520 lines
12 KiB
Vue
<template>
|
||
<div v-if="pending" class="loading">Loading event details...</div>
|
||
|
||
<div v-else-if="error" class="loading">
|
||
<h2>Event Not Found</h2>
|
||
<p>The event you're looking for doesn't exist.</p>
|
||
<NuxtLink to="/events">← Back to Events</NuxtLink>
|
||
</div>
|
||
|
||
<div v-else class="page-fill">
|
||
<!-- EVENT HEADER -->
|
||
<div class="event-header">
|
||
<h1>{{ event.title }}</h1>
|
||
<div class="event-meta-row">
|
||
<div class="event-meta-item">
|
||
<span class="meta-label">Date</span>
|
||
{{ formatDate(event.startDate) }}
|
||
</div>
|
||
<div class="event-meta-item">
|
||
<span class="meta-label">Time</span>
|
||
{{ formatTime(event.startDate, event.endDate) }}
|
||
</div>
|
||
<div class="event-meta-item">
|
||
<span class="meta-label">Location</span>
|
||
<span v-if="event.location?.trim().toUpperCase() === 'TBD'">
|
||
Platform TBD
|
||
</span>
|
||
<template v-else>{{ event.location }}</template>
|
||
</div>
|
||
<div v-if="event.circle" class="event-meta-item">
|
||
<CircleBadge :circle="event.circle" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- CANCELLED NOTICE -->
|
||
<div v-if="event.isCancelled" class="cancelled-notice">
|
||
<strong>Event Cancelled</strong>
|
||
<p v-if="event.cancellationMessage">{{ event.cancellationMessage }}</p>
|
||
<p v-else>
|
||
This event has been cancelled. We apologize for any inconvenience.
|
||
</p>
|
||
</div>
|
||
|
||
<!-- FEATURE IMAGE -->
|
||
<div v-if="event.featureImage?.url" class="event-feature-image">
|
||
<img
|
||
:src="event.featureImage.url"
|
||
:alt="event.featureImage.alt || event.title"
|
||
>
|
||
</div>
|
||
|
||
<!-- TWO-COLUMN BODY -->
|
||
<div class="event-body">
|
||
<!-- LEFT: MAIN CONTENT -->
|
||
<div class="event-main">
|
||
<!-- Series Badge -->
|
||
<div v-if="event.series?.isSeriesEvent" class="section">
|
||
<div class="series-note">
|
||
<span class="section-label">Part of Series</span>
|
||
<NuxtLink :to="`/series/${event.series.id}`">{{
|
||
event.series.title
|
||
}}</NuxtLink>
|
||
— Event {{ event.series.position }} of
|
||
{{ event.series.totalEvents }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Target Circles -->
|
||
<div v-if="event.targetCircles?.length" class="section">
|
||
<span class="section-label">Recommended for</span>
|
||
<div class="circle-badges">
|
||
<CircleBadge
|
||
v-for="circle in event.targetCircles"
|
||
:key="circle"
|
||
:circle="circle"
|
||
/>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Description -->
|
||
<div class="section">
|
||
<h2>About This Event</h2>
|
||
<div class="prose" v-html="renderMarkdown(event.description)" />
|
||
</div>
|
||
|
||
<!-- Series Description -->
|
||
<div
|
||
v-if="event.series?.isSeriesEvent && event.series.description"
|
||
class="section"
|
||
>
|
||
<h2>About the {{ event.series.title }} Series</h2>
|
||
<div class="prose" v-html="renderMarkdown(event.series.description)" />
|
||
</div>
|
||
|
||
<!-- Additional Information -->
|
||
<div v-if="event.content" class="section">
|
||
<h2>Additional Information</h2>
|
||
<div class="prose" v-html="renderMarkdown(event.content)" />
|
||
</div>
|
||
|
||
<!-- Agenda -->
|
||
<div v-if="event.agenda?.length" class="section">
|
||
<h2>Agenda</h2>
|
||
<ul class="agenda-list">
|
||
<li v-for="(item, index) in event.agenda" :key="index">
|
||
{{ item }}
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<!-- Speakers -->
|
||
<div v-if="event.speakers?.length" class="section">
|
||
<h2>Speakers</h2>
|
||
<div
|
||
v-for="speaker in event.speakers"
|
||
:key="speaker.name"
|
||
class="speaker"
|
||
>
|
||
<div class="speaker-name">{{ speaker.name }}</div>
|
||
<div v-if="speaker.role" class="speaker-role">
|
||
{{ speaker.role }}
|
||
</div>
|
||
<div v-if="speaker.bio" class="speaker-bio">{{ speaker.bio }}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- RIGHT: SIDEBAR PANELS -->
|
||
<div v-if="!event.isCancelled" class="event-aside">
|
||
<!-- Ticket System -->
|
||
<EventTicketPurchase
|
||
:event-id="event._id || event.id"
|
||
:event-start-date="event.startDate"
|
||
:event-title="event.title"
|
||
:event-timezone="eventTimeZone"
|
||
:user-email="memberData?.email"
|
||
:user-name="memberData?.name"
|
||
@success="handleTicketSuccess"
|
||
@error="handleTicketError"
|
||
/>
|
||
|
||
<!-- Event Details Box -->
|
||
<div class="dashed-box">
|
||
<div class="box-title">Event Details</div>
|
||
<div v-if="event.eventType" class="detail-row">
|
||
<span class="detail-key">Type</span>
|
||
<span class="detail-val">{{ eventTypeLabel(event.eventType) }}</span>
|
||
</div>
|
||
<div v-if="event.membersOnly" class="detail-row">
|
||
<span class="detail-key">Members only</span>
|
||
<span class="detail-val">Yes</span>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Questions -->
|
||
<div class="dashed-box">
|
||
<div class="box-title">Questions?</div>
|
||
<p
|
||
style="font-size: 12px; color: var(--text-dim); margin-bottom: 4px"
|
||
>
|
||
Drop us a line.
|
||
</p>
|
||
<a href="mailto:events@ghostguild.org" style="font-size: 12px"
|
||
>events@ghostguild.org</a
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { eventTypeLabel } from "~/config/eventTypes";
|
||
|
||
const route = useRoute();
|
||
const toast = useToast();
|
||
|
||
const {
|
||
data: event,
|
||
pending,
|
||
error,
|
||
} = await useFetch(`/api/events/${route.params.slug}`);
|
||
|
||
const pageBreadcrumbTitle = useState("pageBreadcrumbTitle", () => "");
|
||
pageBreadcrumbTitle.value = event.value?.title || "";
|
||
onUnmounted(() => {
|
||
pageBreadcrumbTitle.value = "";
|
||
});
|
||
|
||
if (error.value?.statusCode === 404) {
|
||
throw createError({ statusCode: 404, statusMessage: "Event not found" });
|
||
}
|
||
|
||
const { memberData, checkMemberStatus } = useAuth();
|
||
const { trackGoal, isComplete } = useOnboarding();
|
||
const { render: renderMarkdown } = useMarkdown();
|
||
|
||
onMounted(async () => {
|
||
await checkMemberStatus();
|
||
if (memberData.value && !isComplete.value) {
|
||
trackGoal('eventPageVisited');
|
||
}
|
||
});
|
||
|
||
const eventTimeZone = computed(
|
||
() => event.value?.displayTimezone || "America/Toronto",
|
||
);
|
||
|
||
const formatDate = (dateStr) => {
|
||
if (!dateStr) return "";
|
||
const d = new Date(dateStr);
|
||
return new Intl.DateTimeFormat("en-US", {
|
||
weekday: "long",
|
||
year: "numeric",
|
||
month: "long",
|
||
day: "numeric",
|
||
timeZone: eventTimeZone.value,
|
||
}).format(d);
|
||
};
|
||
|
||
const formatTime = (start, end) => {
|
||
if (!start || !end) return "";
|
||
const fmt = new Intl.DateTimeFormat("en-US", {
|
||
hour: "numeric",
|
||
minute: "2-digit",
|
||
timeZoneName: "short",
|
||
timeZone: eventTimeZone.value,
|
||
});
|
||
return `${fmt.format(new Date(start))} – ${fmt.format(new Date(end))}`;
|
||
};
|
||
|
||
const handleTicketSuccess = () => {
|
||
if (event.value.registeredCount !== undefined) event.value.registeredCount++;
|
||
};
|
||
const handleTicketError = (err) => {
|
||
console.error("Ticket purchase failed:", err);
|
||
};
|
||
|
||
useSiteMeta(() => ({
|
||
title: event.value ? `${event.value.title} · Events` : "Event",
|
||
description:
|
||
event.value?.description || "View event details and register.",
|
||
type: "article",
|
||
image: event.value?.slug ? `/og/events/${event.value.slug}.png` : undefined,
|
||
}));
|
||
</script>
|
||
|
||
<style scoped>
|
||
.loading {
|
||
padding: 48px 32px;
|
||
color: var(--text-dim);
|
||
}
|
||
.loading h2 {
|
||
font-family: "Brygada 1918", serif;
|
||
font-size: 22px;
|
||
color: var(--text-bright);
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.event-feature-image {
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
.event-feature-image img {
|
||
display: block;
|
||
width: 100%;
|
||
max-height: 400px;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.event-header {
|
||
padding: 28px 32px;
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
.event-header h1 {
|
||
font-family: "Brygada 1918", serif;
|
||
font-size: 28px;
|
||
font-weight: 600;
|
||
color: var(--text-bright);
|
||
line-height: 1.15;
|
||
margin-bottom: 16px;
|
||
}
|
||
.event-meta-row {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 24px;
|
||
font-size: 12px;
|
||
color: var(--text-dim);
|
||
}
|
||
.meta-label {
|
||
font-size: 10px;
|
||
letter-spacing: 0.08em;
|
||
text-transform: uppercase;
|
||
color: var(--text-faint);
|
||
display: block;
|
||
margin-bottom: 2px;
|
||
}
|
||
|
||
.cancelled-notice {
|
||
padding: 20px 32px;
|
||
border-bottom: 1px dashed var(--border);
|
||
color: var(--ember);
|
||
font-size: 12px;
|
||
}
|
||
.cancelled-notice strong {
|
||
display: block;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
/* ---- PAGE FILL (aside border reaches viewport bottom) ---- */
|
||
.page-fill {
|
||
display: flex;
|
||
flex-direction: column;
|
||
flex: 1;
|
||
min-height: 0;
|
||
}
|
||
|
||
/* ---- TWO-COLUMN BODY ---- */
|
||
.event-body {
|
||
display: grid;
|
||
grid-template-columns: 1fr 280px;
|
||
flex: 1;
|
||
}
|
||
.event-main {
|
||
min-width: 0;
|
||
}
|
||
.event-aside {
|
||
border-left: 1px dashed var(--border);
|
||
padding: 0;
|
||
}
|
||
.event-aside .dashed-box {
|
||
margin: 0;
|
||
border: none;
|
||
border-bottom: 1px dashed var(--border);
|
||
padding: 20px 24px;
|
||
}
|
||
.event-aside .dashed-box:hover {
|
||
border-color: var(--border);
|
||
}
|
||
|
||
.section {
|
||
padding: 24px 32px;
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
.section h2 {
|
||
font-family: "Brygada 1918", serif;
|
||
font-size: 18px;
|
||
font-weight: 500;
|
||
color: var(--text-bright);
|
||
margin-bottom: 8px;
|
||
}
|
||
.section p {
|
||
font-size: 14px;
|
||
color: var(--text-dim);
|
||
line-height: 1.7;
|
||
max-width: 560px;
|
||
}
|
||
|
||
.prose {
|
||
font-size: 14px;
|
||
color: var(--text-dim);
|
||
line-height: 1.7;
|
||
max-width: 560px;
|
||
}
|
||
.prose :deep(p) {
|
||
margin-bottom: 12px;
|
||
}
|
||
.prose :deep(p:last-child) {
|
||
margin-bottom: 0;
|
||
}
|
||
.prose :deep(a) {
|
||
color: var(--ember);
|
||
text-decoration: underline;
|
||
text-underline-offset: 2px;
|
||
}
|
||
.prose :deep(strong) {
|
||
color: var(--text-bright);
|
||
}
|
||
.prose :deep(ul),
|
||
.prose :deep(ol) {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 8px 0 12px;
|
||
}
|
||
.prose :deep(ul li),
|
||
.prose :deep(ol li) {
|
||
position: relative;
|
||
padding: 2px 0 2px 16px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.prose :deep(ul li::before) {
|
||
content: "›";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 2px;
|
||
color: var(--candle-faint);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
.prose :deep(ol) {
|
||
counter-reset: prose-item;
|
||
}
|
||
.prose :deep(ol li) {
|
||
counter-increment: prose-item;
|
||
padding-left: 28px;
|
||
}
|
||
.prose :deep(ol li::before) {
|
||
content: counter(prose-item) ".";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 2px;
|
||
color: var(--candle-faint);
|
||
}
|
||
.prose :deep(blockquote) {
|
||
border-left: 2px solid var(--candle-faint);
|
||
padding-left: 12px;
|
||
margin: 12px 0;
|
||
color: var(--text-faint);
|
||
}
|
||
.prose :deep(code) {
|
||
font-family: "Commit Mono", monospace;
|
||
background: var(--input-bg);
|
||
padding: 0 4px;
|
||
}
|
||
|
||
.circle-badges {
|
||
display: flex;
|
||
gap: 6px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.series-note {
|
||
font-size: 12px;
|
||
color: var(--text-dim);
|
||
}
|
||
|
||
.agenda-list {
|
||
list-style: none;
|
||
padding: 0;
|
||
margin: 8px 0 0;
|
||
font-size: 14px;
|
||
color: var(--text-dim);
|
||
line-height: 1.7;
|
||
max-width: 560px;
|
||
}
|
||
.agenda-list li {
|
||
position: relative;
|
||
padding: 2px 0 2px 16px;
|
||
margin-bottom: 4px;
|
||
}
|
||
.agenda-list li::before {
|
||
content: "›";
|
||
position: absolute;
|
||
left: 0;
|
||
top: 2px;
|
||
color: var(--candle-faint);
|
||
font-size: 14px;
|
||
line-height: 1.7;
|
||
}
|
||
|
||
.speaker {
|
||
padding: 8px 0;
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
.speaker:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.speaker-name {
|
||
font-size: 13px;
|
||
color: var(--text-bright);
|
||
font-weight: 500;
|
||
}
|
||
.speaker-role {
|
||
font-size: 11px;
|
||
color: var(--text-dim);
|
||
}
|
||
.speaker-bio {
|
||
font-size: 11px;
|
||
color: var(--text-faint);
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.box-title {
|
||
font-size: 10px;
|
||
letter-spacing: 0.1em;
|
||
text-transform: uppercase;
|
||
color: var(--text-faint);
|
||
margin-bottom: 8px;
|
||
}
|
||
.detail-row {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 4px 0;
|
||
font-size: 12px;
|
||
border-bottom: 1px dashed var(--border);
|
||
}
|
||
.detail-row:last-child {
|
||
border-bottom: none;
|
||
}
|
||
.detail-key {
|
||
color: var(--text-faint);
|
||
}
|
||
.detail-val {
|
||
color: var(--text);
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.event-body {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
.event-aside {
|
||
border-left: none;
|
||
border-top: 1px dashed var(--border);
|
||
}
|
||
.event-meta-row {
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
}
|
||
}
|
||
</style>
|