@sarimarcus/content-sites-ui 0.17.0 → 0.19.0

package/src/layout/ListingShell.astro

@@ -0,0 +1,32 @@
+---
+/**
+ * ListingShell — the frame of a listing hub: breadcrumb band, hero, optional full-width bands, <main> with a
+ * Container, and trailing bands, all inside one Pagefind-ignore wrapper (listings are not indexed). The route keeps
+ * Layout and passes StructuredData to Layout directly, so its JSON-LD lands in <head>; everything else comes in by slot.
+ */
+import BreadcrumbBand from './BreadcrumbBand.astro';
+import Container from './Container.astro';
+
+interface Props {
+  mainClass?: string;
+}
+
+const { mainClass = 'py-12 lg:py-20' } = Astro.props;
+---
+
+<div data-pagefind-ignore>
+  <BreadcrumbBand ignore={false}>
+    <slot name="breadcrumb" />
+  </BreadcrumbBand>
+
+  <slot name="hero" />
+  <slot name="before-main" />
+
+  <main class={mainClass}>
+    <Container>
+      <slot />
+    </Container>
+  </main>
+
+  <slot name="after-main" />
+</div>

package/src/layout/index.ts

@@ -1,6 +1,7 @@
 // Public surface of @sarimarcus/content-sites-ui/layout.
 export { default as Container } from './Container.astro';
 export { default as BreadcrumbBand } from './BreadcrumbBand.astro';
+export { default as ListingShell } from './ListingShell.astro';
 export { default as AsyncStylesheet } from './AsyncStylesheet.astro';
 export { default as DocumentShell } from './DocumentShell.astro';
 export { default as ConsentAnalytics } from './ConsentAnalytics.astro';

package/src/search/SearchPage.astro

@@ -0,0 +1,222 @@
+---
+/**
+ * SearchPage — the markup of a site search page over its Pagefind index: hero and search box, type chips, an optional
+ * audience row (Pagefind `audience` filter values), the result states and the type-icon template the result cards
+ * clone. The route keeps Layout (`noindex`), imports `@sarimarcus/content-sites-ui/search.css` and calls
+ * `initSearchPage` from `@sarimarcus/content-sites-ui/search-page` in its own <script> with the same taxonomy and copy.
+ */
+import Container from '../layout/Container.astro';
+import Icon from '../primitives/Icon.astro';
+import SearchSuggestions from './SearchSuggestions.astro';
+import type { SearchPageStrings, SearchPageType } from './searchPage.ts';
+
+interface Props {
+  strings: SearchPageStrings;
+  /** Insertion order is the chip order. */
+  types: Record<string, SearchPageType>;
+  suggestions: { label: string; query: string }[];
+  fallbackLinks: { label: string; href: string }[];
+  /** Renders the audience row when set (needs the audience strings). */
+  audienceFacets?: { value: string; label: string; count: number }[];
+}
+
+const { strings, types, suggestions, fallbackLinks, audienceFacets } = Astro.props;
+const typeOrder = Object.keys(types);
+---
+
+<main class="search-page" data-pagefind-ignore>
+  <section class="search-hero" aria-labelledby="search-hero-heading">
+    <Container>
+      <p class="search-hero__eyebrow">{strings.heroEyebrow}</p>
+      <h1 id="search-hero-heading" class="search-hero__heading">
+        {strings.heroHeading}
+      </h1>
+      <p class="search-hero__subhead">{strings.heroSubhead}</p>
+
+      <form class="search-form" role="search" autocomplete="off" novalidate>
+        <span class="search-form__icon" aria-hidden="true">
+          <Icon name="search" class="w-5 h-5" />
+        </span>
+        <label class="sr-only" for="search-input">{strings.inputLabel}</label>
+        <input
+          id="search-input"
+          type="search"
+          class="search-form__input"
+          placeholder={strings.inputPlaceholder}
+          spellcheck="false"
+          autocapitalize="off"
+          autocorrect="off"
+          enterkeyhint="search"
+          aria-controls="search-results-region"
+          aria-describedby="search-announce"
+        />
+        <div id="search-announce" class="sr-only" role="status" aria-live="polite" aria-atomic="true"></div>
+        <button
+          type="button"
+          class="search-form__clear"
+          aria-label={strings.clearLabel}
+          data-search-clear
+          hidden
+        >
+          <Icon name="x" class="w-4 h-4" />
+        </button>
+      </form>
+
+      <div
+        class="search-filters"
+        role="group"
+        aria-label={strings.filterGroupLabel}
+        hidden
+      >
+        <button
+          type="button"
+          class="search-chip search-chip--active"
+          data-search-filter=""
+          aria-pressed="true"
+        >
+          {strings.filterAllLabel}
+        </button>
+        {
+          typeOrder.map((t) => (
+            <button
+              type="button"
+              class="search-chip"
+              data-search-filter={t}
+              aria-pressed="false"
+            >
+              <Icon name={types[t].iconName} class="search-chip__icon" />
+              <span>{types[t].pluralLabel}</span>
+            </button>
+          ))
+        }
+      </div>
+
+      {audienceFacets && (
+        <div
+          class="search-filters search-filters--audience"
+          role="group"
+          aria-label={strings.audienceGroupLabel}
+          hidden
+        >
+          <span class="search-filters__label" aria-hidden="true">{strings.audienceRowLabel}</span>
+          <button
+            type="button"
+            class="search-chip search-chip--active"
+            data-search-audience=""
+            aria-pressed="true"
+          >
+            {strings.audienceAllLabel}
+          </button>
+          {
+            audienceFacets.map((f) => (
+              <button
+                type="button"
+                class="search-chip"
+                data-search-audience={f.value}
+                data-search-audience-total={f.count}
+                aria-pressed="false"
+              >
+                <span>{f.label}</span>
+                <span class="search-chip__count">{f.count}</span>
+              </button>
+            ))
+          }
+        </div>
+      )}
+    </Container>
+  </section>
+
+  {/* Hidden icon template: result cards clone an icon node by type. */}
+  <template id="search-type-icons">
+    {
+      typeOrder.map((t) => (
+        <span data-icon-for={t}>
+          <Icon name={types[t].iconName} class="search-card__badge-icon" />
+        </span>
+      ))
+    }
+  </template>
+
+  <section
+    id="search-results-region"
+    class="search-results-region"
+    aria-busy="false"
+  >
+    <Container>
+      <div class="search-state" data-search-state="empty">
+        <SearchSuggestions label={strings.emptySuggestionsLabel} suggestions={suggestions} />
+      </div>
+
+      <div class="search-state" data-search-state="loading" hidden>
+        <p class="search-state__loading">
+          <span class="search-state__spinner" aria-hidden="true"></span>
+          {strings.loadingLabel}
+        </p>
+      </div>
+
+      <div class="search-state" data-search-state="results" hidden>
+        <h2 class="search-results__heading" data-search-results-heading></h2>
+        {/* Only the entity templates and articles carry an `audience` filter value,
+            so an audience-filtered search cannot return guides, /discover/ pages,
+            neighborhoods or walks — they have no audience tags to match. Rather
+            than drop them silently, say how many the filter removed. */}
+        <p class="search-filter-note" data-search-filter-note hidden></p>
+        <ul class="search-results__list" data-search-results-list></ul>
+        <div class="search-results__actions">
+          <button
+            type="button"
+            class="search-load-more"
+            data-search-load-more
+            hidden
+          >
+            {strings.loadMoreLabel}
+          </button>
+        </div>
+      </div>
+
+      <div class="search-state" data-search-state="zero" hidden>
+        <h2 class="search-state__heading" data-search-zero-heading></h2>
+        <p class="search-state__subhead">{strings.zeroSubhead}</p>
+        <SearchSuggestions label={strings.emptySuggestionsLabel} suggestions={suggestions} />
+        <p class="search-fallback__label">{strings.zeroFallbackLabel}</p>
+        <ul class="search-fallback__links">
+          {
+            fallbackLinks.map((l) => (
+              <li>
+                <a href={l.href} class="search-fallback__link">{l.label}</a>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+
+      <div class="search-state" data-search-state="filter-empty" hidden>
+        <h2 class="search-state__heading" data-search-filter-empty-heading>{strings.filterEmptyHeading}</h2>
+        <button
+          type="button"
+          class="search-chip search-chip--suggest"
+          data-search-clear-filter
+        >
+          {strings.filterEmptyClearLabel}
+        </button>
+      </div>
+
+      <div class="search-state" data-search-state="error" hidden>
+        <h2 class="search-state__heading">{strings.errorHeading}</h2>
+        <p class="search-state__subhead">{strings.errorSubhead}</p>
+        <button type="button" class="search-load-more" data-search-retry>
+          {strings.errorRetryLabel}
+        </button>
+        <ul class="search-fallback__links" style="margin-top: 1.5rem">
+          {
+            fallbackLinks.map((l) => (
+              <li>
+                <a href={l.href} class="search-fallback__link">{l.label}</a>
+              </li>
+            ))
+          }
+        </ul>
+      </div>
+    </Container>
+  </section>
+</main>

package/src/search/index.ts

@@ -1,5 +1,7 @@
 // Public surface of @sarimarcus/content-sites-ui/search: search-page building blocks. The site keeps its page, its
 // type taxonomy, its copy and its Pagefind index.
 export { default as SearchSuggestions } from './SearchSuggestions.astro';
+export { default as SearchPage } from './SearchPage.astro';
+export type { SearchPageStrings, SearchPageType } from './searchPage.ts';
 export { appendResults } from './renderResult.ts';
 export type { PagefindResultFragment, SearchTaxonomy, SearchTypeMeta } from './renderResult.ts';