astro-theme-popular 0.11.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-theme-popular",
-  "version": "0.11.0",
+  "version": "0.13.0",
   "description": "Popular: a warm, community-first Astro theme for meetups, clubs and fan communities. Ships as an Astro integration.",
   "type": "module",
   "license": "MIT",

package/schemas.ts

@@ -49,6 +49,7 @@ const events = defineCollection({
     time: z.string().optional(),
     venue: z.string().optional(),
     venueWanted: z.boolean().default(false),
+    planning: z.boolean().default(false), // "Planning" badge instead of "Confirmed", and no RSVP button
     address: z.string().optional(),
     speaker: z.string().optional(), // one-liner fallback when no speaker profiles are referenced
     speakers: z.array(z.string()).default([]), // slugs of entries in the speakers collection

package/src/components/CalendarSubscribe.astro

@@ -0,0 +1,24 @@
+---
+/** Calendar subscribe buttons for the events feed: a webcal link that opens
+ *  the user's calendar app subscribed to the live feed (Apple Calendar,
+ *  Outlook, Thunderbird), a Google Calendar deep link (Google registers no
+ *  webcal handler on the web or Android), and the plain .ics download as the
+ *  universal fallback for "add calendar from URL" flows. webcal needs an
+ *  absolute URL, so the feed path goes through absoluteUrl. Mirrors Hugo's
+ *  partials/calendar-subscribe.html; callers supply the wrapping .g-row. */
+import { STRINGS } from 'popular:config';
+import { withBase, absoluteUrl } from '../lib/url';
+
+interface Props {
+  small?: boolean;
+}
+const { small = false } = Astro.props;
+
+const feedPath = '/events/calendar.ics';
+const webcal = absoluteUrl(feedPath, Astro.site ?? Astro.url).replace(/^https?:/, 'webcal:');
+const google = `https://calendar.google.com/calendar/render?cid=${encodeURIComponent(webcal)}`;
+const size = small ? ' g-btn--sm' : '';
+---
+<a class={`g-btn g-btn--outline${size}`} href={webcal}><i class="fa-solid fa-calendar-plus" aria-hidden="true"></i> {STRINGS.subscribeCalendar}</a>
+<a class={`g-btn g-btn--outline${size}`} href={google} rel="noopener" target="_blank"><i class="fa-brands fa-google" aria-hidden="true"></i> {STRINGS.subscribeGoogle}</a>
+<a class={`g-btn g-btn--ghost${size}`} href={withBase(feedPath)} download><i class="fa-solid fa-download" aria-hidden="true"></i> {STRINGS.downloadCalendar}</a>

package/src/components/EventRow.astro

@@ -16,6 +16,10 @@ if (d.venueRef && !venuePage) console.warn(`events/${event.id}: venueRef "${d.ve
 const venueName = venuePage?.data.title ?? d.venue;
 const venueAddress = venuePage?.data.address ?? (venuePage ? undefined : d.address);
 const tbd = d.venueWanted || !venueName;
+/* Planning: the event is on the calendar but its details are not settled.
+   Wins over the venue-wanted badge, which is inferred, and hides the RSVP
+   button even when `rsvp` is already filled in. */
+const planning = d.planning;
 
 /* Speaker line: resolved speaker-profile names, falling back to the string. */
 const allSpeakers = d.speakers.length ? await safeCollection('speakers') : [];
@@ -57,10 +61,12 @@ const day = d.date.toLocaleDateString(SITE.locale, { month: 'short', day: 'numer
   <div class="g-event__aside">
     {d.cancelled
       ? <span class="g-badge g-badge--danger g-badge--soft">{STRINGS.eventCancelled}</span>
+      : planning
+      ? <span class="g-badge g-badge--soft">{STRINGS.eventPlanning}</span>
       : tbd
       ? <span class="g-badge g-badge--warning g-badge--soft">{STRINGS.venueWanted}</span>
       : <span class="g-badge g-badge--success g-badge--soft">{STRINGS.confirmed}</span>}
-    {d.rsvp && (
+    {!planning && d.rsvp && (
       <a class="g-btn g-btn--primary g-btn--sm" href={withBase(d.rsvp)}><i class="fa-solid fa-calendar" aria-hidden="true"></i>{STRINGS.rsvp}</a>
     )}
   </div>

package/src/components/EventsEmpty.astro

@@ -1,26 +1,24 @@
 ---
 /** Designed empty state for zero upcoming events (§5). Shown on the home page
  *  and events list instead of a blank section: a message, then the chat CTA
- *  (if SITE.community.chat is set, §4) and the calendar-subscribe link.
- *  The calendar link mirrors Hugo's OutputFormats "Calendar" endpoint. */
+ *  (if SITE.community.chat is set, §4) and the calendar-subscribe buttons.
+ *  The calendar feed mirrors Hugo's OutputFormats "Calendar" endpoint. */
 import { SITE, STRINGS } from 'popular:config';
 import { withBase } from '../lib/url';
+import CalendarSubscribe from './CalendarSubscribe.astro';
 
 const chat = (SITE as Record<string, any>).community?.chat;
-const calendar = '/events/calendar.ics';
 const external = (url: string) => !url.startsWith('/');
 ---
 <div class="g-empty">
   <span class="g-medallion g-medallion--lg"><i class="fa-solid fa-calendar-day" aria-hidden="true"></i></span>
   <p class="g-lead">{STRINGS.noUpcomingEvents}</p>
-  {(chat?.url || calendar) && (
-    <div class="g-row" style="justify-content:center">
-      {chat?.url && (
-        <a class="g-btn g-btn--primary" href={withBase(chat.url)} {...(external(chat.url) ? { rel: 'noopener', target: '_blank' } : {})}>
-          <i class="fa-solid fa-comments" aria-hidden="true"></i> {chat.label ?? STRINGS.joinChat}
-        </a>
-      )}
-      <a class="g-btn g-btn--outline" href={withBase(calendar)}><i class="fa-solid fa-calendar-plus" aria-hidden="true"></i> {STRINGS.subscribeCalendar}</a>
-    </div>
-  )}
+  <div class="g-row" style="justify-content:center">
+    {chat?.url && (
+      <a class="g-btn g-btn--primary" href={withBase(chat.url)} {...(external(chat.url) ? { rel: 'noopener', target: '_blank' } : {})}>
+        <i class="fa-solid fa-comments" aria-hidden="true"></i> {chat.label ?? STRINGS.joinChat}
+      </a>
+    )}
+    <CalendarSubscribe />
+  </div>
 </div>

package/src/lib/ical.ts

@@ -61,6 +61,10 @@ export function buildIcs(
   L.push(fold('CALSCALE:GREGORIAN'));
   L.push(fold('METHOD:PUBLISH'));
   L.push(fold(`X-WR-CALNAME:${opts.siteTitle} events`));
+  /* Subscription refresh hints (RFC 7986 + the Apple/Outlook legacy twin).
+     Google Calendar ignores both and polls on its own schedule. */
+  L.push(fold('REFRESH-INTERVAL;VALUE=DURATION:PT12H'));
+  L.push(fold('X-PUBLISHED-TTL:PT12H'));
   for (const e of events) {
     L.push(fold('BEGIN:VEVENT'));
     L.push(fold(`UID:${e.permalink}`));

package/src/lib/inline-md.ts

@@ -10,7 +10,7 @@ const escapeHtml = (s: string): string =>
 
 export function inlineMarkdown(src: string): string {
   let s = escapeHtml(src);
-  // [label](http(s)://… | /path) — only http(s) and root-relative targets
+  // [label](http(s)://… | /path): only http(s) and root-relative targets
   s = s.replace(
     /\[([^\]]+)\]\((https?:\/\/[^\s)]+|\/[^\s)]*)\)/g,
     (_m, label, href) =>

package/src/pages/events/[...page].astro

@@ -4,7 +4,7 @@ import BaseLayout from '../../layouts/BaseLayout.astro';
 import PageHero from 'popular:component/PageHero';
 import EventRow from 'popular:component/EventRow';
 import Pagination from '../../components/Pagination.astro';
-import { withBase } from '../../lib/url';
+import CalendarSubscribe from '../../components/CalendarSubscribe.astro';
 import EventsEmpty from '../../components/EventsEmpty.astro';
 import { SECTIONS, STRINGS, PAGINATION } from 'popular:config';
 
@@ -54,7 +54,7 @@ const groupByYear = (events: EventEntry[]) => {
         <span class="g-eyebrow">{STRINGS.comingUp}</span>
         <h2>{STRINGS.upcomingEvents}</h2>
         <p class="g-lead">{STRINGS.upcomingLead}</p>
-        <div class="g-row" style="margin-top:var(--space-3)"><a class="g-btn g-btn--outline g-btn--sm" href={withBase('/events/calendar.ics')}><i class="fa-solid fa-calendar-plus" aria-hidden="true"></i> {STRINGS.subscribeCalendar}</a></div>
+        <div class="g-row" style="margin-top:var(--space-3)"><CalendarSubscribe small /></div>
       </div>
       <div class="g-stack" style="margin-top:var(--space-4);gap:var(--space-3)">
         {groupByYear(upcoming).map((group) => (

package/src/pages/events/[slug].astro

@@ -72,7 +72,7 @@ const eventLd = jsonld(buildEventLd({
           </a>
         </div>
         <span class="g-eyebrow">{dateStr}{d.time && ` · ${d.time}`}</span>
-        <h1 style="margin:.5rem 0 0">{d.title}{d.cancelled && <> <span class="g-badge g-badge--danger" style="vertical-align:middle;font-size:var(--text-sm)">{STRINGS.eventCancelled}</span></>}</h1>
+        <h1 style="margin:.5rem 0 0">{d.title}{d.cancelled ? <> <span class="g-badge g-badge--danger" style="vertical-align:middle;font-size:var(--text-sm)">{STRINGS.eventCancelled}</span></> : d.planning ? <> <span class="g-badge g-badge--soft" style="vertical-align:middle;font-size:var(--text-sm)">{STRINGS.eventPlanning}</span></> : null}</h1>
       </div>
     </header>
     <div class="g-container g-section--sm">
@@ -129,7 +129,8 @@ const eventLd = jsonld(buildEventLd({
         </>
       )}
 
-      {d.rsvp && (
+      {/* An event still being planned takes no RSVPs yet, even with `rsvp` set. */}
+      {!d.planning && d.rsvp && (
         <div class="g-row" style="margin-top:var(--space-4)">
           <a class="g-btn g-btn--primary g-btn--lg" href={withBase(d.rsvp)}><i class="fa-solid fa-calendar" aria-hidden="true"></i> {STRINGS.rsvpExternal}</a>
         </div>

package/src/pages/index.astro

@@ -115,7 +115,7 @@ const orgLd = jsonld(buildOrgLd({
           </div>
           {next.data.description && <p style="margin:0;color:var(--text-muted);max-width:34rem">{next.data.description}</p>}
           <div class="g-row">
-            {next.data.rsvp && <a class="g-btn g-btn--primary" href={withBase(next.data.rsvp)}><i class="fa-solid fa-calendar" aria-hidden="true"></i> {STRINGS.rsvpExternal}</a>}
+            {!next.data.planning && next.data.rsvp && <a class="g-btn g-btn--primary" href={withBase(next.data.rsvp)}><i class="fa-solid fa-calendar" aria-hidden="true"></i> {STRINGS.rsvpExternal}</a>}
             <a class="g-btn g-btn--outline" href={withBase('/events/')}>{STRINGS.allEvents}</a>
           </div>
         </div>