@because-dev/astro 0.3.0 → 0.4.0

package/components/IdeaShell.astro

@@ -15,12 +15,14 @@ interface Props {
   description?: string;
   /** Which full-screen view opens first: the map or the article. */
   view?: "map" | "article";
+  /** The idea's title, announced as the page heading while the article is hidden behind the map. */
+  heading?: string;
   /** Home link in the top bar. */
   homeHref: string;
   homeLabel: string;
   indexHref: string;
 }
-const { title, homeHref, homeLabel, indexHref, view = "map" } = Astro.props;
+const { title, homeHref, homeLabel, indexHref, view = "map", heading } = Astro.props;
 ---
 <!doctype html>
 <html lang="en">
@@ -75,6 +77,10 @@ const { title, homeHref, homeLabel, indexHref, view = "map" } = Astro.props;
         :where(.has-map[data-because-view="article"] .bc-side) { flex: none; width: var(--bc-side, 420px); border-left: 1px solid var(--bc-line); }
       }
 
+      /* While the map hides the article, keep a page heading for screen readers (visually hidden). */
+      :where(.bc-maptitle) { display: none; }
+      :where(.has-map[data-because-view="map"] .bc-maptitle) { display: block; position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+
       /* Floating switch between the two views, bottom right (hidden until the map mounts). */
       :where(.bc-viewtoggle) { position: fixed; z-index: 5; right: max(16px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom));
         min-width: 56px; height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--bc-line); background: var(--bc-ink); color: var(--bc-card);
@@ -102,10 +108,11 @@ const { title, homeHref, homeLabel, indexHref, view = "map" } = Astro.props;
       <a class="bc-home" href={homeHref}>{homeLabel}</a>
       <a class="bc-nav" href={indexHref}>All ideas</a>
     </header>
-    <div class="bc-shell" data-because-views data-because-view={view}>
+    <main class="bc-shell" data-because-views data-because-view={view}>
+      <h1 class="bc-maptitle">{heading ?? title}</h1>
       <slot name="map" />
-      <main class="bc-side"><slot /></main>
-    </div>
+      <div class="bc-side"><slot /></div>
+    </main>
     <button type="button" class="bc-viewtoggle" data-because-view-toggle hidden></button>
   </body>
 </html>

package/dist/index.d.ts

@@ -37,7 +37,7 @@ export interface BecauseOptions {
     /**
      * Your own shell for idea pages (with the map on), relative to the project root,
      * e.g. "./src/layouts/IdeaShell.astro". It receives `title`, `description`,
-     * `homeHref`, `homeLabel`, `indexHref` and `view` props and three slots: "head"
+     * `homeHref`, `homeLabel`, `indexHref`, `view` and `heading` (the idea's title) props and three slots: "head"
      * (meta tags; render it in <head>), "map" (the map's root element; give it a
      * size) and the default slot (the idea's article). For map/article switching,
      * wrap both in an element with `data-because-views data-because-view={view}`

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@because-dev/astro",
-  "version": "0.3.0",
+  "version": "0.4.0",
   "description": "Astro integration: one static page per Because idea, the interactive map, and per-idea neighbourhood JSON.",
   "license": "MIT",
   "type": "module",
@@ -39,7 +39,7 @@
     "virtual.d.ts"
   ],
   "dependencies": {
-    "@because-dev/core": "0.3.0"
+    "@because-dev/core": "0.4.0"
   },
   "peerDependencies": {
     "astro": "^5.0.0 || ^6.0.0 || ^7.0.0"

package/routes/idea.astro

@@ -16,7 +16,7 @@ const site = createSite(graph, ctx);
 const page = site.page(Astro.params.slug!)!;
 const { idea } = page;
 const { title, description, jsonLd } = ideaHead(page, config.siteName, Astro.site);
-const shellProps = { title, description, view: config.view, homeHref: ctx.siteBase, homeLabel: config.siteName ?? "Home", indexHref: joinPath(ctx.siteBase, config.base, "/") };
+const shellProps = { title, description, heading: idea.title, view: config.view, homeHref: ctx.siteBase, homeLabel: config.siteName ?? "Home", indexHref: joinPath(ctx.siteBase, config.base, "/") };
 ---
 <!-- The full-screen map view and article view (or the site's own shell). -->
 <Shell {...shellProps}>