@hagicode/hagilight-docusaurus 0.10.0 → 0.10.1-dev.123.1.28afdf0

package/dist/client/promoto.d.ts

@@ -1,2 +1,9 @@
+/**
+ * Centers the fixed card in the main content column instead of the viewport: it
+ * starts after the doc sidebar and ends before the desktop table of contents.
+ * Infima's layout cannot be expressed in CSS alone (collapsible sidebar, container
+ * max-width, TOC column), so the two insets are measured and handed to promoto.css.
+ */
+export declare function syncPromotoInsets(doc: Document, banner: HTMLElement): void;
 export declare function mountPromotoBanner(doc: Document, locale: string): void;
 export declare function onRouteDidUpdate(): void;

package/dist/client/promoto.js

@@ -3,6 +3,67 @@ import { PROMOTO_SHELL_MARKUP } from './promoto-markup.js';
 const ELEMENT_NAME = 'hagilight-promoto-banner';
 const DEFAULT_LOCALE = 'en-US';
 const mounts = new WeakMap();
+/** Infima switches to the single-column mobile layout below this width. */
+const DESKTOP_MIN_WIDTH = 997;
+const INSET_START = '--hagilight-promoto-inset-start';
+const INSET_END = '--hagilight-promoto-inset-end';
+let stopWatchingLayout;
+function widest(elements) {
+    return elements
+        .map((element) => element.getBoundingClientRect())
+        .filter((rect) => rect.width > 0)
+        .sort((a, b) => b.width - a.width)[0];
+}
+/**
+ * Centers the fixed card in the main content column instead of the viewport: it
+ * starts after the doc sidebar and ends before the desktop table of contents.
+ * Infima's layout cannot be expressed in CSS alone (collapsible sidebar, container
+ * max-width, TOC column), so the two insets are measured and handed to promoto.css.
+ */
+export function syncPromotoInsets(doc, banner) {
+    const viewport = doc.documentElement.clientWidth;
+    let start = 0;
+    let end = 0;
+    if (viewport >= DESKTOP_MIN_WIDTH) {
+        const main = doc.querySelector('main');
+        const columns = main ? Array.from(main.querySelectorAll(':scope > * > .row > .col, :scope > .row > .col')) : [];
+        const content = widest(columns) ?? main?.getBoundingClientRect();
+        if (content && content.width > 0) {
+            const sidebar = doc.querySelector('.theme-doc-sidebar-container')?.getBoundingClientRect();
+            start = Math.max(content.left, sidebar && sidebar.width > 0 ? sidebar.right : 0);
+            end = Math.max(0, viewport - content.right);
+        }
+    }
+    banner.style.setProperty(INSET_START, `${Math.max(0, Math.round(start))}px`);
+    banner.style.setProperty(INSET_END, `${Math.max(0, Math.round(end))}px`);
+}
+function watchPromotoLayout(doc, banner) {
+    stopWatchingLayout?.();
+    stopWatchingLayout = undefined;
+    const win = doc.defaultView;
+    if (!win || !banner.style || typeof win.ResizeObserver !== 'function')
+        return;
+    let frame = 0;
+    const schedule = () => {
+        if (frame)
+            return;
+        frame = win.requestAnimationFrame(() => {
+            frame = 0;
+            syncPromotoInsets(doc, banner);
+        });
+    };
+    const observer = new win.ResizeObserver(schedule);
+    const main = doc.querySelector('main');
+    if (main)
+        observer.observe(main);
+    observer.observe(doc.documentElement);
+    syncPromotoInsets(doc, banner);
+    stopWatchingLayout = () => {
+        observer.disconnect();
+        if (frame)
+            win.cancelAnimationFrame(frame);
+    };
+}
 function readSiteId(doc) {
     const content = doc.querySelector('meta[name="hagilight-site-id"]')?.getAttribute('content')?.trim();
     return content || undefined;
@@ -10,8 +71,11 @@ function readSiteId(doc) {
 export function mountPromotoBanner(doc, locale) {
     const footer = doc.querySelector('footer');
     const previous = mounts.get(doc);
-    if (previous?.banner.isConnected && previous.footer === footer && previous.locale === locale)
+    if (previous?.banner.isConnected && previous.footer === footer && previous.locale === locale) {
+        // The page layout may have been swapped under the same footer (docs to blog), so re-measure it.
+        watchPromotoLayout(doc, previous.banner);
         return;
+    }
     doc.querySelectorAll(ELEMENT_NAME).forEach((existing) => existing.remove());
     const banner = doc.createElement(ELEMENT_NAME);
     banner.className = 'hagilight-promoto';
@@ -23,6 +87,7 @@ export function mountPromotoBanner(doc, locale) {
     banner.innerHTML = PROMOTO_SHELL_MARKUP;
     doc.body.append(banner);
     mounts.set(doc, { banner, footer, locale });
+    watchPromotoLayout(doc, banner);
 }
 export function onRouteDidUpdate() {
     definePromotoBannerElement();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hagicode/hagilight-docusaurus",
-  "version": "0.10.0",
+  "version": "0.10.1-dev.123.1.28afdf0",
   "type": "module",
   "description": "Docusaurus plugin for HagiCode site features: footer, analytics, promote card, locales, SEO, sitemap, robots.txt, and RSS",
   "repository": {
@@ -38,7 +38,7 @@
   ],
   "dependencies": {
     "@docusaurus/types": "^3.9.2",
-    "@hagicode/hagilight-core": "0.10.0"
+    "@hagicode/hagilight-core": "0.10.1-dev.123.1.28afdf0"
   },
   "peerDependencies": {
     "@docusaurus/core": "^3.9.2",

package/promoto.css

@@ -24,9 +24,11 @@
 .hagilight-promoto__shell {
   position: fixed;
   z-index: 40;
-  inset-inline: 0;
+  /* Centered in the content area: a theme narrows it by setting these two insets on :root. */
+  inset-inline-start: var(--hagilight-promoto-inset-start, 0px);
+  inset-inline-end: var(--hagilight-promoto-inset-end, 0px);
   bottom: max(1rem, env(safe-area-inset-bottom));
-  width: min(42rem, calc(100vw - 1rem - 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))));
+  width: min(42rem, calc(100% - var(--hagilight-promoto-inset-start, 0px) - var(--hagilight-promoto-inset-end, 0px) - 1rem - 2 * max(env(safe-area-inset-left, 0px), env(safe-area-inset-right, 0px))));
   margin-inline: auto;
   overflow: hidden;
   border: 1px solid color-mix(in srgb, var(--ifm-color-primary) 24%, var(--ifm-color-emphasis-300));