astro-theme-popular 0.12.0 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "astro-theme-popular",
-  "version": "0.12.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/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/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/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) => (