@acms-subir/core 0.3.45 → 0.3.47

package/src/pages/calendar/index.astro

@@ -3,50 +3,69 @@ import Site from '../../layouts/Site.astro';
 import { getRepo } from '../../lib/repo';
 import { effectiveSettings } from '../../lib/designPreview';
 import { siteOrigin } from '../../lib/seo';
-import { siteLocale } from '../../lib/dates';
-import { CALENDAR, calendarFeedUrl, calendarPageUrl } from '../../lib/calendar/config';
+import { siteLang, siteLocale } from '../../lib/dates';
+import { I18N, localePath, requestLocale } from '../../lib/i18n';
+import { isExtraLocale } from '../../lib/translations';
+import { fill } from '../../lib/live/words';
+import { eventStrings } from '../../lib/calendar/event-words';
+import { CALENDAR, calendarFeedUrl, eventUrl } from '../../lib/calendar/config';
 import { calendarWindow, renderCalendarView } from '../../lib/calendar/render';
 import { collectViewEvents, type ViewEvent } from '../../lib/calendar/data';
 import { eventCardHtml } from '../../lib/calendar/cards';
 import { safeColor } from '../../lib/calendar/events';
 import { tzParts } from '../../lib/calendar/ics';
+import { eventFilterQuery, hasEventFilter, readEventFilter, resolveEventFilter, type EventFilter } from '../../lib/calendar/filter';
 
 // The main calendar page: filter chips per public calendar, Month / Week /
 // List views (the same renderer as the calendar card), image cards for
 // what's coming up, and subscribe links for every calendar app. On phones the
 // month grid gives way to a two-week day strip over the agenda.
+// The address carries the filters (filter.ts): ?cal=youth,events, ?tag=Class,
+// ?notag=Class, ?room=chapel. Active ones show as removable chips, and the
+// subscribe links carry them. /es/calendar speaks Spanish (the same languages
+// as event pages) and keeps its links under /es.
 if (!CALENDAR.enabled) return new Response(null, { status: 404, statusText: 'Not found' });
 
 const repo = await getRepo(Astro.locals);
-const settings = await effectiveSettings(await repo.getSettings(), Astro.url, Astro.cookies, Astro.locals);
+const reqLocale = I18N.enabled ? requestLocale(Astro.url, Astro.locals) : '';
+const baseSettings = await effectiveSettings(await repo.getSettings(), Astro.url, Astro.cookies, Astro.locals);
+// dates and the renderer's words follow the page's language, like event pages
+const settings = isExtraLocale(reqLocale) ? { ...baseSettings, locale: reqLocale } : baseSettings;
+const lang = reqLocale || siteLang(settings);
+const w = eventStrings(lang);
+const cw = w.calendar;
+const here = (path: string) => localePath(path, reqLocale);
 const now = Date.now();
 const tz = settings.timezone || 'UTC';
 const locale = siteLocale(settings);
 const origin = siteOrigin(settings, Astro.url);
 
-const all = await repo.listCalendars();
+const filter = readEventFilter(Astro.url.searchParams);
+const filtered = hasEventFilter(filter);
+const [all, resources] = await Promise.all([repo.listCalendars(), filter.room.length ? repo.listResources() : []]);
+const resolved = resolveEventFilter(filter, { calendars: all, resources });
 const listed = all.filter((c) => c.visibility === 'public');
-const calSlug = Astro.url.searchParams.get('cal') ?? '';
-// unlisted calendars work when linked directly, they just aren't offered
-const active = calSlug ? all.find((c) => c.slug === calSlug && c.visibility !== 'private') ?? null : null;
+// exactly one calendar picked: its name, description and own feed
+const active = filter.cal.length === 1 && resolved.calendars.length === 1 ? resolved.calendars[0] : null;
+const picked = new Set(resolved.calendarIds ?? []);
 const viewParam = Astro.url.searchParams.get('view');
 const view = (['month', 'week', 'list'] as const).find((v) => v === viewParam) ?? CALENDAR.defaultView;
-const explicitView = Boolean(viewParam);
-const monthParam = /^(\d{4})-(\d{2})$/.exec(Astro.url.searchParams.get('m') ?? '');
+const explicitView = viewParam === view;
+const monthRaw = Astro.url.searchParams.get('m') ?? '';
+const monthParam = /^(\d{4})-(\d{2})$/.exec(monthRaw);
 
 const win = calendarWindow(settings, now);
-const { events, calendars, errors } = await collectViewEvents(repo, settings, win, {
-  audience: 'public',
-  ...(active ? { calendarIds: [active.id] } : {}),
-});
+const { events, calendars, errors } = await collectViewEvents(repo, settings, win, { audience: 'public', filter: resolved, locale: lang });
 
-const calendarHtml = renderCalendarView(events, settings, now, {
+const gridHtml = renderCalendarView(events, settings, now, {
   view: view === 'list' ? 'upcoming' : view,
   limit: 50,
-  multi: !active && calendars.length > 1,
-  emptyText: 'Nothing on the calendar yet.',
+  multi: calendars.length > 1,
+  emptyText: filtered ? cw.noMatch : cw.empty,
   focus: monthParam ? { y: Number(monthParam[1]), m: Number(monthParam[2]) } : undefined,
 });
+// an empty month or week grid says why (the list says it itself)
+const calendarHtml = (filtered && !events.length && view !== 'list' ? '<p class="pc-cal-empty">' + cw.noMatch + '</p>' : '') + gridHtml;
 
 // coming up: the next occurrence of each distinct native event
 const seen = new Set<string>();
@@ -79,19 +98,44 @@ const stripDays = Array.from({ length: 14 }, (_, i) => {
   return { k, dow: fmt({ weekday: 'narrow' }).format(ms), d: tzParts(ms, tz).d, has: agenda.has(k), today: i === 0 };
 });
 
-const feed = origin + calendarFeedUrl(active?.slug);
+// links keep the filters, the view, the month and the page's language
+const pageHref = (f: EventFilter, opts: { view?: string | null; m?: string | null } = {}) => {
+  const v = opts.view === undefined ? (explicitView ? view : null) : opts.view;
+  const m = opts.m === undefined ? (monthParam ? monthRaw : null) : opts.m;
+  const q = [eventFilterQuery(f), v ? `view=${v}` : '', m ? `m=${m}` : ''].filter(Boolean).join('&');
+  return here(CALENDAR.base) + (q ? `?${q}` : '');
+};
+const viewHref = (v: string) => pageHref(filter, { view: v, m: null });
+const without = (key: keyof EventFilter, value: string) => pageHref({ ...filter, [key]: filter[key].filter((x) => x !== value) });
+// calendar chips switch a calendar on or off; "All" drops the calendar filter
+const toggleCal = (slug: string) => {
+  const on = filter.cal.some((s) => s.toLowerCase() === slug);
+  return pageHref({ ...filter, cal: on ? filter.cal.filter((s) => s.toLowerCase() !== slug) : [...filter.cal, slug] });
+};
+const offered = [...listed, ...resolved.calendars.filter((c) => c.visibility !== 'public')];
+const roomName = (slug: string) => resolved.rooms.find((r) => r.slug === slug.toLowerCase())?.name ?? slug;
+// the removable chips: tags, left-out tags, rooms, and calendars that didn't resolve
+const chips = [
+  ...filter.tag.map((t) => ({ label: t, href: without('tag', t) })),
+  ...filter.notag.map((t) => ({ label: fill(cw.without, { tag: t }), href: without('notag', t) })),
+  ...filter.room.map((r) => ({ label: fill(cw.room, { room: roomName(r) }), href: without('room', r) })),
+  ...filter.cal.filter((s) => !resolved.calendars.some((c) => c.slug === s.toLowerCase())).map((s) => ({ label: s, href: without('cal', s) })),
+];
+
+// subscribe: one calendar alone keeps its own feed; anything else is the
+// site feed with the same filters
+const ownFeed = active && !filter.tag.length && !filter.notag.length && !filter.room.length;
+const feedQuery = eventFilterQuery(filter);
+const feed = origin + (ownFeed ? calendarFeedUrl(active.slug) : calendarFeedUrl() + (feedQuery ? `?${feedQuery}` : ''));
 const webcal = feed.replace(/^https?:\/\//, 'webcal://');
 const googleAdd = `https://calendar.google.com/calendar/r?cid=${encodeURIComponent(webcal)}`;
 const outlookAdd = `https://outlook.live.com/calendar/0/addfromweb?url=${encodeURIComponent(feed)}&name=${encodeURIComponent(active?.name ?? settings.siteTitle)}`;
-const viewHref = (v: string) => {
-  const p = new URLSearchParams(Astro.url.search);
-  p.set('view', v);
-  p.delete('m');
-  return `${CALENDAR.base}?${p}`;
-};
-const title = active ? active.name : 'Calendar';
-const lede = active?.description || `What’s happening at ${settings.siteTitle}. Subscribe to keep it in your own calendar.`;
+const subscribeNote = ownFeed ? fill(cw.subscribeNamed, { name: active.name }) : filtered ? cw.subscribeFiltered : cw.subscribeAll;
+const title = active ? active.name : cw.title;
+const lede = active?.description || fill(cw.lede, { site: settings.siteTitle });
 const zoneName = fmt({ timeZoneName: 'long' }).formatToParts(now).find((p) => p.type === 'timeZoneName')?.value ?? tz;
+const agendaEmpty = filtered && !events.length ? cw.noMatch : cw.emptySoon;
+const cardHref = (v: ViewEvent) => here(eventUrl(v.event!.slug));
 ---
 
 <Site title={title} description={lede}>
@@ -102,40 +146,51 @@ const zoneName = fmt({ timeZoneName: 'long' }).formatToParts(now).find((p) => p.
     </header>
 
     <div class="pc-calpage-bar">
-      {(listed.length > 1 || active) && (
-        <nav class="pc-calpage-chips" aria-label="Calendars">
-          <a class={!active ? 'is-on' : ''} href={CALENDAR.base} aria-current={!active ? 'page' : undefined}>All</a>
-          {listed.map((c) => (
-            <a class={active?.id === c.id ? 'is-on' : ''} href={calendarPageUrl(c.slug)} aria-current={active?.id === c.id ? 'page' : undefined}>
+      {(offered.length > 1 || picked.size > 0) && (
+        <nav class="pc-calpage-chips" aria-label={cw.calendars}>
+          <a class={!filter.cal.length ? 'is-on' : ''} href={pageHref({ ...filter, cal: [] })} aria-current={!filter.cal.length ? 'page' : undefined}>{cw.all}</a>
+          {offered.map((c) => (
+            <a class={picked.has(c.id) ? 'is-on' : ''} href={toggleCal(c.slug)} aria-current={picked.has(c.id) ? 'true' : undefined}>
               <i style={`background:${safeColor(c.color)}`} aria-hidden="true" />{c.name}
             </a>
           ))}
-          {active && active.visibility !== 'public' && <a class="is-on" href={calendarPageUrl(active.slug)}><i style={`background:${safeColor(active.color)}`} aria-hidden="true" />{active.name}</a>}
         </nav>
       )}
       <div class="pc-calpage-tools">
-        <nav class="pc-calpage-views" aria-label="View">
-          <a class={view === 'month' ? 'is-on' : ''} href={viewHref('month')}>Month</a>
-          <a class={view === 'week' ? 'is-on' : ''} href={viewHref('week')}>Week</a>
-          <a class={view === 'list' ? 'is-on' : ''} href={viewHref('list')}>List</a>
+        <nav class="pc-calpage-views" aria-label={cw.views}>
+          <a class={view === 'month' ? 'is-on' : ''} href={viewHref('month')}>{cw.month}</a>
+          <a class={view === 'week' ? 'is-on' : ''} href={viewHref('week')}>{cw.week}</a>
+          <a class={view === 'list' ? 'is-on' : ''} href={viewHref('list')}>{cw.list}</a>
         </nav>
         <details class="pc-calpage-sub">
           <summary>
             <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 4v11M7 10l5 5 5-5M5 20h14" /></svg>
-            Subscribe
+            {cw.subscribe}
           </summary>
           <div class="pc-calpage-sub-menu">
-            <p>Add {active ? `“${active.name}”` : 'this calendar'} to your calendar app. New events show up on their own.</p>
+            <p>{subscribeNote}</p>
             <a href={googleAdd} target="_blank" rel="noopener">Google Calendar</a>
             <a href={webcal}>Apple Calendar</a>
             <a href={outlookAdd} target="_blank" rel="noopener">Outlook</a>
-            <button type="button" data-copy={feed}>Copy link</button>
+            <button type="button" data-copy={feed} data-copied={w.linkCopied}>{cw.copyLink}</button>
           </div>
         </details>
       </div>
     </div>
 
-    <div class="pc-calpage-strip" aria-label="Next two weeks">
+    {chips.length > 0 && (
+      <nav class="pc-calpage-filters" aria-label={cw.filters}>
+        {chips.map((c) => (
+          <a class="pc-calpage-filter" href={c.href} aria-label={fill(cw.remove, { filter: c.label })}>
+            <span>{c.label}</span>
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M7 7l10 10M17 7L7 17" /></svg>
+          </a>
+        ))}
+        {chips.length > 1 && <a class="pc-calpage-clear" href={pageHref({ cal: [], tag: [], notag: [], room: [] })}>{cw.clear}</a>}
+      </nav>
+    )}
+
+    <div class="pc-calpage-strip" aria-label={cw.nextTwoWeeks}>
       {stripDays.map((d) => (
         <a class={`${d.has ? 'has' : ''}${d.today ? ' today' : ''}`} href={d.has ? `#d-${d.k}` : undefined} aria-label={d.k}>
           <small>{d.dow}</small><b>{d.d}</b><i aria-hidden="true" />
@@ -145,13 +200,13 @@ const zoneName = fmt({ timeZoneName: 'long' }).formatToParts(now).find((p) => p.
 
     <div class="pc-calpage-view" set:html={calendarHtml} />
 
-    <section class="pc-calpage-agenda" aria-label="Agenda">
-      {agenda.size === 0 ? <p class="pc-cal-empty">Nothing in the next two months.</p> : [...agenda.entries()].map(([k, list]) => (
+    <section class="pc-calpage-agenda" aria-label={cw.agenda}>
+      {agenda.size === 0 ? <p class="pc-cal-empty">{agendaEmpty}</p> : [...agenda.entries()].map(([k, list]) => (
         <div class="pc-agenda-day" id={`d-${k}`}>
           <h3>{dayLabel.format(list[0].start < now ? now : list[0].start)}</h3>
           {list.map((v) => (
             <a class={`pc-agenda-row${v.cancelled ? ' is-cancelled' : ''}`} href={v.url ?? undefined}>
-              <span class="t">{v.allDay ? 'All day' : timeLabel.format(v.start)}</span>
+              <span class="t">{v.allDay ? w.allDay : timeLabel.format(v.start)}</span>
               <span class="ti">
                 {v.color && <i style={`background:${v.color}`} aria-hidden="true" />}
                 <b>{v.title}</b>
@@ -165,14 +220,14 @@ const zoneName = fmt({ timeZoneName: 'long' }).formatToParts(now).find((p) => p.
 
     {view !== 'list' && comingUp.length > 0 && (
       <section class="pc-calpage-up">
-        <h2>Coming up</h2>
-        <div class="pc-ev-cards" data-layout="grid" set:html={comingUp.map((v) => eventCardHtml({ event: v.event!, start: v.start, end: v.end, allDay: v.allDay, days: v.days, cancelled: v.cancelled }, settings, { showImage: true })).join('')} />
+        <h2>{cw.comingUp}</h2>
+        <div class="pc-ev-cards" data-layout="grid" set:html={comingUp.map((v) => eventCardHtml({ event: v.event!, start: v.start, end: v.end, allDay: v.allDay, days: v.days, cancelled: v.cancelled }, settings, { showImage: true, href: cardHref(v) })).join('')} />
       </section>
     )}
 
     <footer class="pc-calpage-foot">
-      <span>Times in {zoneName}</span>
-      {errors.length > 0 && <span>Some linked calendars couldn’t be loaded right now.</span>}
+      <span>{fill(cw.timesIn, { zone: zoneName })}</span>
+      {errors.length > 0 && <span>{cw.feedErrors}</span>}
     </footer>
   </div>
   <script>
@@ -180,8 +235,9 @@ const zoneName = fmt({ timeZoneName: 'long' }).formatToParts(now).find((p) => p.
       const b = e.target instanceof Element ? e.target.closest<HTMLButtonElement>('[data-copy]') : null;
       if (b) {
         await navigator.clipboard.writeText(b.dataset.copy ?? '');
-        b.textContent = 'Link copied';
-        setTimeout(() => (b.textContent = 'Copy link'), 1400);
+        const label = (b.dataset.label ??= b.textContent ?? '');
+        b.textContent = b.dataset.copied ?? label;
+        setTimeout(() => (b.textContent = label), 1400);
       }
       document.querySelectorAll<HTMLDetailsElement>('details.pc-calpage-sub[open]').forEach((d) => {
         if (!(e.target instanceof Node && d.contains(e.target))) d.open = false;

package/src/pages/embed/calendar/[slug].astro

@@ -1,36 +1,56 @@
 ---
 import Site from '../../../layouts/Site.astro';
 import { getRepo } from '../../../lib/repo';
-import { CALENDAR } from '../../../lib/calendar/config';
+import { siteLang } from '../../../lib/dates';
+import { I18N, localePath } from '../../../lib/i18n';
+import { isExtraLocale } from '../../../lib/translations';
+import { eventStrings } from '../../../lib/calendar/event-words';
+import { CALENDAR, eventUrl } from '../../../lib/calendar/config';
 import { calendarWindow, renderCalendarView } from '../../../lib/calendar/render';
 import { collectViewEvents } from '../../../lib/calendar/data';
 import { upcomingEvents, eventCardHtml } from '../../../lib/calendar/cards';
+import { readEventFilter, resolveEventFilter } from '../../../lib/calendar/filter';
 
 // Embeddable calendar for other websites:
 //   <iframe src="https://site/embed/calendar/all?view=month" …>
 // slug 'all' = every public calendar. view: month | week | list | cards.
-// Links open in the parent window; height is posted to the parent so a
-// small script can auto-size the iframe.
+// The /calendar page's filters work here too (?tag=Class, ?notag=,
+// ?cal=a,b to add calendars, ?room=), and ?lang=es picks one of the site's
+// languages (embeds are never under /es). Links open in the parent window;
+// height is posted to the parent so a small script can auto-size the iframe.
 if (!CALENDAR.enabled) return new Response(null, { status: 404 });
 const repo = await getRepo(Astro.locals);
-const settings = await repo.getSettings();
+const base = await repo.getSettings();
 const slug = Astro.params.slug ?? 'all';
 const cal = slug === 'all' ? null : await repo.getCalendarBySlug(slug);
 if (slug !== 'all' && (!cal || cal.visibility === 'private')) return new Response(null, { status: 404 });
+const langParam = Astro.url.searchParams.get('lang') ?? '';
+const reqLocale = I18N.enabled ? (I18N.locales.includes(langParam) ? langParam : I18N.defaultLocale) : '';
+// the layout's <html lang> reads the request's language
+if (reqLocale) (Astro.locals as { acmsLocale?: string }).acmsLocale = reqLocale;
+const settings = isExtraLocale(reqLocale) ? { ...base, locale: reqLocale } : base;
+const lang = reqLocale || siteLang(settings);
+const w = eventStrings(lang).calendar;
+
+const query = readEventFilter(Astro.url.searchParams);
+const filter = cal ? { ...query, cal: [cal.slug, ...query.cal] } : query;
+const [calendars, resources] = await Promise.all([repo.listCalendars(), filter.room.length ? repo.listResources() : []]);
+const resolved = resolveEventFilter(filter, { calendars, resources });
 const view = (['month', 'week', 'list', 'cards'] as const).find((v) => v === Astro.url.searchParams.get('view')) ?? 'month';
 const now = Date.now();
 let html: string;
 if (view === 'cards') {
-  const items = await upcomingEvents(repo, settings, now, { calendarIds: cal ? [cal.id] : undefined, limit: Math.min(12, Number(Astro.url.searchParams.get('limit')) || 6) });
-  html = `<section class="pc-ev-cards" data-layout="grid">${items.map((o) => eventCardHtml(o, settings, { showImage: true })).join('') || '<p class="pc-ev-empty">No upcoming events.</p>'}</section>`;
+  const items = await upcomingEvents(repo, settings, now, { filter: resolved, locale: lang, limit: Math.min(12, Number(Astro.url.searchParams.get('limit')) || 6) });
+  const cards = items.map((o) => eventCardHtml(o, settings, { showImage: true, href: localePath(eventUrl(o.event.slug), reqLocale) })).join('');
+  html = '<section class="pc-ev-cards" data-layout="grid">' + (cards || '<p class="pc-ev-empty">' + w.noUpcoming + '</p>') + '</section>';
 } else {
-  const { events, calendars } = await collectViewEvents(repo, settings, calendarWindow(settings, now), { audience: 'public', ...(cal ? { calendarIds: [cal.id] } : {}) });
-  html = renderCalendarView(events, settings, now, { view: view === 'list' ? 'upcoming' : view, limit: 30, multi: !cal && calendars.length > 1 });
+  const { events, calendars: shown } = await collectViewEvents(repo, settings, calendarWindow(settings, now), { audience: 'public', filter: resolved, locale: lang });
+  html = renderCalendarView(events, settings, now, { view: view === 'list' ? 'upcoming' : view, limit: 30, multi: shown.length > 1 });
 }
 Astro.response.headers.set('Content-Security-Policy', "frame-ancestors *");
 ---
 
-<Site title={cal?.name ?? 'Calendar'} bare noindex>
+<Site title={cal?.name ?? w.title} bare noindex>
   <base target="_top" />
   <div class="pc-embed" set:html={html} />
   <script is:inline>

package/src/styles/site.css

@@ -930,6 +930,16 @@ li::marker { color: var(--muted); }
   .pc-calpage-chips a:hover { color: var(--ink); }
   .pc-calpage-chips a.is-on { color: var(--ink); font-weight: 600; box-shadow: inset 0 -2px 0 var(--ink); }
   .pc-calpage-chips i { width: 7px; height: 7px; border-radius: 2px; }
+  /* active filters from the address (tag, left-out tag, room): removable chips */
+  .pc-calpage-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -2px 0 16px; }
+  .pc-calpage-filter {
+    display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px 0 11px; border-radius: var(--r-sm);
+    background: var(--soft); color: var(--ink); font-size: 13px; font-weight: 550; text-decoration: none;
+  }
+  .pc-calpage-filter svg { width: 13px; height: 13px; color: var(--muted); }
+  .pc-calpage-filter:hover svg { color: var(--ink); }
+  .pc-calpage-clear { padding: 0 6px; font-size: 13px; color: var(--muted); text-decoration: none; }
+  .pc-calpage-clear:hover { color: var(--ink); }
   .pc-calpage-tools { display: flex; gap: 8px; align-items: center; margin-left: auto; }
   .pc-calpage-views { display: inline-flex; background: var(--soft); border-radius: 10px; padding: 3px; }
   .pc-calpage-views a { padding: 5px 12px; border-radius: 7px; font-size: 13px; font-weight: 550; color: var(--muted); text-decoration: none; }