@rimelight/ui 0.0.32 → 0.0.34

package/src/components/astro/RLAHead.astro

@@ -1,181 +1,428 @@
----
-import { ClientRouter } from 'astro:transitions';
-import type { SiteConfig } from '@/config';
-
-export interface OGImage {
-  /** Image URL (relative or absolute) */
-  src: string;
-  /** Alt text for the image */
-  alt: string;
-}
-
-export interface RSSFeed {
-  /** RSS feed URL */
-  href: string;
-  /** Feed title (defaults to "RSS") */
-  title?: string;
-}
-
-export interface HeadProps {
-  /** Page title */
-  title?: string;
-  /** Page description */
-  description?: string;
-  /** Open Graph image with alt text */
-  ogImage?: OGImage;
-  /** Open Graph type (e.g., "website", "article") */
-  ogType?: string;
-  /** Open Graph locale (defaults to "en_US") */
-  ogLocale?: string;
-  /** Whether to prevent indexing */
-  noindex?: boolean;
-  /** Whether this is a 404 page */
-  is404?: boolean;
-  /** Robots metadata (overrides noindex/is404 logic if provided) */
-  robots?: string;
-  /** Canonical URL */
-  canonical?: string;
-  /** Language alternates for i18n */
-  languageAlternates?: Array<{ hreflang: string; href: string }>;
-  /** Site configuration for defaults */
-  config?: SiteConfig;
-  /** Whether to enable View Transitions (ClientRouter) */
-  transitions?: boolean;
-  /** Meta charset */
-  charset?: string;
-  /** Meta viewport */
-  viewport?: string;
-  /** RSS feed configuration */
-  rssFeed?: RSSFeed;
-}
-
-const {
-  title,
-  description,
-  ogImage,
-  ogType = 'website',
-  ogLocale = 'en_US',
-  noindex = false,
-  is404 = false,
-  robots,
-  canonical,
-  languageAlternates = [],
-  config,
-  transitions = true,
-  charset = 'utf-8',
-  viewport = 'width=device-width,initial-scale=1',
-  rssFeed,
-} = Astro.props as HeadProps;
-
-// Resolve defaults from config if available
-const siteName = config?.name || 'Rimelight';
-const siteDescription = config?.description || '';
-const ogImageFallback = config?.seo?.ogImageFallback || config?.ogImage || '';
-const themeColor = config?.branding?.colors?.themeColor;
-const favicon = config?.branding?.favicon?.svg || '/favicon.svg';
-const twitterHandle = config?.seo?.authorHandle;
-const titleTemplate = config?.seo?.titleTemplate || `%s | ${siteName}`;
-
-// Calculated Values
-const displayTitle = is404
-  ? `404 - Not Found | ${siteName}`
-  : title
-    ? titleTemplate.replace('%s', title)
-    : siteName;
-
-const finalDescription = description || siteDescription;
-const safeDescription = finalDescription && config?.seo?.maxDescriptionLength
-  ? (finalDescription.length > config.seo.maxDescriptionLength
-      ? finalDescription.slice(0, config.seo.maxDescriptionLength - 3) + '...'
-      : finalDescription)
-  : finalDescription;
-
-const finalOgImage = ogImage || (ogImageFallback ? { src: ogImageFallback, alt: siteName } : undefined);
-const absoluteOgImage = finalOgImage
-  ? new URL(finalOgImage.src, Astro.site).toString()
-  : undefined;
-
-function formatCanonicalURL(url: string | URL) {
-  const resolved = new URL(url, Astro.site);
-  const path = resolved.toString();
-  const hasQueryParams = path.includes('?');
-  if (hasQueryParams) {
-    return path.replace(/\/?$/, '');
-  }
-  return path.replace(/\/?$/, '/');
-}
-
-const finalCanonical = canonical
-  ? formatCanonicalURL(canonical)
-  : (!is404 ? formatCanonicalURL(Astro.url) : undefined);
-
-const isIndexable = !noindex && !is404;
-const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : 'noindex, nofollow';
----
-
-<!-- Basic Metadata -->
-<meta charset={charset} />
-<meta name="viewport" content={viewport} />
-<meta name="generator" content={Astro.generator} />
-
-<!-- Sitemap -->
-<link rel="sitemap" href="/sitemap-index.xml" />
-
-<!-- RSS Feed -->
-{rssFeed && <link rel="alternate" type="application/rss+xml" href={rssFeed.href} title={rssFeed.title || 'RSS'} />}
-
-<!-- SEO -->
-<title>{displayTitle}</title>
-{safeDescription && <meta name="description" content={safeDescription} />}
-<meta name="robots" content={robots || defaultRobots} />
-{finalCanonical && <link rel="canonical" href={finalCanonical} />}
-
-<!-- i18n Alternates -->
-{languageAlternates.map((alt) => (
-  <link rel="alternate" hreflang={alt.hreflang} href={alt.href} />
-))}
-
-<!-- Open Graph / Facebook -->
-<meta property="og:type" content={ogType} />
-<meta property="og:locale" content={ogLocale} />
-<meta property="og:url" content={Astro.url.href} />
-<meta property="og:title" content={title || siteName} />
-{safeDescription && <meta property="og:description" content={safeDescription} />}
-{absoluteOgImage && <meta property="og:image" content={absoluteOgImage} />}
-{finalOgImage && <meta property="og:image:alt" content={finalOgImage.alt} />}
-<meta property="og:site_name" content={siteName} />
-
-<!-- Twitter -->
-<meta property="twitter:card" content="summary_large_image" />
-<meta property="twitter:url" content={Astro.url.href} />
-<meta property="twitter:title" content={title || siteName} />
-{safeDescription && <meta property="twitter:description" content={safeDescription} />}
-{absoluteOgImage && <meta property="twitter:image" content={absoluteOgImage} />}
-{finalOgImage && <meta property="twitter:image:alt" content={finalOgImage.alt} />}
-{twitterHandle && <meta property="twitter:site" content={twitterHandle} />}
-{twitterHandle && <meta property="twitter:creator" content={twitterHandle} />}
-
-<!-- Icons -->
-<link rel="icon" type="image/svg+xml" href={favicon} />
-
-<!-- Theme -->
-{themeColor && <meta name="theme-color" content={themeColor} />}
-
-<script is:inline>
-  (function() {
-    const stored = localStorage.getItem('theme');
-    if (stored) {
-      if (stored === 'dark') {
-        document.documentElement.classList.add('dark');
-      } else {
-        document.documentElement.classList.remove('dark');
-      }
-    } else {
-      if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
-        document.documentElement.classList.add('dark');
-      }
-    }
-  })();
-</script>
-
+---
+import { ClientRouter } from 'astro:transitions';
+import type { SiteConfig } from '@/config';
+
+export interface OGImage {
+  /** Image URL (relative or absolute) */
+  src: string;
+  /** Alt text for the image */
+  alt: string;
+}
+
+export interface RSSFeed {
+  /** RSS feed URL */
+  href: string;
+  /** Feed title (defaults to "RSS") */
+  title?: string;
+}
+
+export interface HeadProps {
+  /** Page title */
+  title?: string;
+  /** Page description */
+  description?: string;
+  /** Open Graph image with alt text */
+  ogImage?: OGImage;
+  /** Open Graph type (e.g., "website", "article") */
+  ogType?: string;
+  /** Open Graph locale (defaults to "en_US") */
+  ogLocale?: string;
+  /** Whether to prevent indexing */
+  noindex?: boolean;
+  /** Whether this is a 404 page */
+  is404?: boolean;
+  /** Robots metadata (overrides noindex/is404 logic if provided) */
+  robots?: string;
+  /** Canonical URL */
+  canonical?: string;
+  /** Language alternates for i18n */
+  languageAlternates?: Array<{ hreflang: string; href: string }>;
+  /** Site configuration for defaults */
+  config?: SiteConfig;
+  /** Whether to enable View Transitions (ClientRouter) */
+  transitions?: boolean;
+  /** Meta charset */
+  charset?: string;
+  /** Meta viewport */
+  viewport?: string;
+  /** RSS feed configuration */
+  rssFeed?: RSSFeed;
+}
+
+const {
+  title,
+  description,
+  ogImage,
+  ogType = 'website',
+  ogLocale = 'en_US',
+  noindex = false,
+  is404 = false,
+  robots,
+  canonical,
+  languageAlternates = [],
+  config,
+  transitions = true,
+  charset = 'utf-8',
+  viewport = 'width=device-width,initial-scale=1',
+  rssFeed,
+} = Astro.props as HeadProps;
+
+// Resolve defaults from config if available
+const siteName = config?.name || 'Rimelight';
+const siteDescription = config?.description || '';
+const ogImageFallback = config?.seo?.ogImageFallback || config?.ogImage || '';
+const themeColor = config?.branding?.colors?.themeColor;
+const favicon = config?.branding?.favicon?.svg || '/favicon.svg';
+const twitterHandle = config?.seo?.authorHandle;
+const titleTemplate = config?.seo?.titleTemplate || `%s | ${siteName}`;
+
+// Calculated Values
+const displayTitle = is404
+  ? `404 - Not Found | ${siteName}`
+  : title
+    ? titleTemplate.replace('%s', title)
+    : siteName;
+
+const finalDescription = description || siteDescription;
+const safeDescription = finalDescription && config?.seo?.maxDescriptionLength
+  ? (finalDescription.length > config.seo.maxDescriptionLength
+      ? finalDescription.slice(0, config.seo.maxDescriptionLength - 3) + '...'
+      : finalDescription)
+  : finalDescription;
+
+const finalOgImage = ogImage || (ogImageFallback ? { src: ogImageFallback, alt: siteName } : undefined);
+const absoluteOgImage = finalOgImage
+  ? new URL(finalOgImage.src, Astro.site).toString()
+  : undefined;
+
+function formatCanonicalURL(url: string | URL) {
+  const resolved = new URL(url, Astro.site);
+  const path = resolved.toString();
+  const hasQueryParams = path.includes('?');
+  if (hasQueryParams) {
+    return path.replace(/\/?$/, '');
+  }
+  return path.replace(/\/?$/, '/');
+}
+
+const finalCanonical = canonical
+  ? formatCanonicalURL(canonical)
+  : (!is404 ? formatCanonicalURL(Astro.url) : undefined);
+
+const isIndexable = !noindex && !is404;
+const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : 'noindex, nofollow';
+---
+
+<!-- Basic Metadata -->
+<meta charset={charset} />
+<meta name="viewport" content={viewport} />
+<meta name="generator" content={Astro.generator} />
+
+<!-- Sitemap -->
+<link rel="sitemap" href="/sitemap-index.xml" />
+
+<!-- RSS Feed -->
+{rssFeed && <link rel="alternate" type="application/rss+xml" href={rssFeed.href} title={rssFeed.title || 'RSS'} />}
+
+<!-- SEO -->
+<title>{displayTitle}</title>
+{safeDescription && <meta name="description" content={safeDescription} />}
+<meta name="robots" content={robots || defaultRobots} />
+{finalCanonical && <link rel="canonical" href={finalCanonical} />}
+
+<!-- i18n Alternates -->
+{languageAlternates.map((alt) => (
+  <link rel="alternate" hreflang={alt.hreflang} href={alt.href} />
+))}
+
+<!-- Open Graph / Facebook -->
+<meta property="og:type" content={ogType} />
+<meta property="og:locale" content={ogLocale} />
+<meta property="og:url" content={Astro.url.href} />
+<meta property="og:title" content={title || siteName} />
+{safeDescription && <meta property="og:description" content={safeDescription} />}
+{absoluteOgImage && <meta property="og:image" content={absoluteOgImage} />}
+{finalOgImage && <meta property="og:image:alt" content={finalOgImage.alt} />}
+<meta property="og:site_name" content={siteName} />
+
+<!-- Twitter -->
+<meta property="twitter:card" content="summary_large_image" />
+<meta property="twitter:url" content={Astro.url.href} />
+<meta property="twitter:title" content={title || siteName} />
+{safeDescription && <meta property="twitter:description" content={safeDescription} />}
+{absoluteOgImage && <meta property="twitter:image" content={absoluteOgImage} />}
+{finalOgImage && <meta property="twitter:image:alt" content={finalOgImage.alt} />}
+{twitterHandle && <meta property="twitter:site" content={twitterHandle} />}
+{twitterHandle && <meta property="twitter:creator" content={twitterHandle} />}
+
+<!-- Icons -->
+<link rel="icon" type="image/svg+xml" href={favicon} />
+
+<!-- Theme -->
+{themeColor && <meta name="theme-color" content={themeColor} />}
+
+<script is:inline>
+  (function() {
+    if (!window.initialCspNonce) {
+      window.initialCspNonce = document.querySelector('meta[name="csp-nonce"]')?.getAttribute('content') ||
+                               Array.from(document.querySelectorAll('script')).find(function(s) { return s.nonce; })?.nonce ||
+                               document.querySelector('script[nonce]')?.nonce ||
+                               document.querySelector('style[nonce]')?.nonce;
+    }
+
+    var orig = document.createElement;
+    document.createElement = function(tag, opts) {
+      var el = orig.call(document, tag, opts);
+      var lowTag = tag.toLowerCase();
+      if (lowTag === 'script' || lowTag === 'style') {
+        var nonce = window.initialCspNonce;
+        if (nonce) {
+          el.setAttribute('nonce', nonce);
+          el.nonce = nonce;
+        }
+      }
+      return el;
+    };
+
+    // Synchronous DOM insertion overrides to catch cloned, imported, or createElementNS tags
+    var origAppend = Element.prototype.appendChild;
+    Element.prototype.appendChild = function(child) {
+      if (child && (child.tagName === 'SCRIPT' || child.tagName === 'STYLE')) {
+        var nonce = window.initialCspNonce;
+        if (nonce && !child.getAttribute('nonce')) {
+          child.setAttribute('nonce', nonce);
+          child.nonce = nonce;
+        }
+      }
+      return origAppend.apply(this, arguments);
+    };
+
+    var origInsert = Element.prototype.insertBefore;
+    Element.prototype.insertBefore = function(newChild, refChild) {
+      if (newChild && (newChild.tagName === 'SCRIPT' || newChild.tagName === 'STYLE')) {
+        var nonce = window.initialCspNonce;
+        if (nonce && !newChild.getAttribute('nonce')) {
+          newChild.setAttribute('nonce', nonce);
+          newChild.nonce = nonce;
+        }
+      }
+      return origInsert.apply(this, arguments);
+    };
+
+    var origAppendMethod = Element.prototype.append;
+    if (origAppendMethod) {
+      Element.prototype.append = function() {
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg && (arg.tagName === 'SCRIPT' || arg.tagName === 'STYLE')) {
+            var nonce = window.initialCspNonce;
+            if (nonce && !arg.getAttribute('nonce')) {
+              arg.setAttribute('nonce', nonce);
+              arg.nonce = nonce;
+            }
+          }
+        }
+        return origAppendMethod.apply(this, arguments);
+      };
+    }
+
+    var origPrependMethod = Element.prototype.prepend;
+    if (origPrependMethod) {
+      Element.prototype.prepend = function() {
+        for (var i = 0; i < arguments.length; i++) {
+          var arg = arguments[i];
+          if (arg && (arg.tagName === 'SCRIPT' || arg.tagName === 'STYLE')) {
+            var nonce = window.initialCspNonce;
+            if (nonce && !arg.getAttribute('nonce')) {
+              arg.setAttribute('nonce', nonce);
+              arg.nonce = nonce;
+            }
+          }
+        }
+        return origPrependMethod.apply(this, arguments);
+      };
+    }
+
+    function getThemeClass() {
+      var stored = localStorage.getItem('theme');
+      if (stored === 'dark') return 'dark';
+      if (stored === 'light') return '';
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '';
+    }
+
+    function applyTheme(doc) {
+      var cls = getThemeClass();
+      if (cls) {
+        doc.documentElement.classList.add('dark');
+      } else {
+        doc.documentElement.classList.remove('dark');
+      }
+    }
+
+    // Apply immediately on initial load
+    applyTheme(document);
+
+    // Apply to incoming document BEFORE the swap — eliminates the flash
+    document.addEventListener('astro:before-swap', function(e) {
+      applyTheme(e.newDocument);
+      var nonce = window.initialCspNonce;
+      if (nonce) {
+        e.newDocument.querySelectorAll('script').forEach(function(s) {
+          s.setAttribute('nonce', nonce);
+        });
+        e.newDocument.querySelectorAll('style').forEach(function(s) {
+          s.setAttribute('nonce', nonce);
+        });
+      }
+    });
+
+    // Safety net: re-apply after swap in case anything overrides it
+    document.addEventListener('astro:after-swap', function() {
+      applyTheme(document);
+    });
+  })();
+</script>
+
+<script is:inline data-astro-rerun>
+  (function() {
+    'use strict';
+    if (window.rlHeaderObserver) window.rlHeaderObserver.disconnect();
+
+    if (!window.RLHeaderStack) {
+      window.RLHeaderStack = {
+        layers: [],
+        register: function(id, order, naturalHeight, isVisible, el) {
+          let layer = this.layers.find(function(l) { return l.id === id; });
+          if (!layer) {
+            layer = { id: id, order: order, naturalHeight: naturalHeight, isVisible: isVisible, el: el };
+            this.layers.push(layer);
+            this.layers.sort(function(a, b) { return a.order - b.order; });
+          } else {
+            layer.naturalHeight = naturalHeight;
+            layer.isVisible = isVisible;
+            layer.el = el;
+          }
+          this.update();
+        },
+        unregister: function(id) {
+          this.layers = this.layers.filter(function(l) { return l.id !== id; });
+          this.update();
+        },
+        update: function() {
+          let currentTop = 0;
+          for (let i = 0; i < this.layers.length; i++) {
+            const layer = this.layers[i];
+            if (layer.el) {
+              const topPx = layer.isVisible ? currentTop + 'px' : '-' + layer.naturalHeight + 'px';
+              layer.el.style.top = topPx;
+              layer.el.style.opacity = layer.isVisible ? '1' : '0';
+              layer.el.style.pointerEvents = layer.isVisible ? 'auto' : 'none';
+              layer.el.style.setProperty('--rl-header-bottom', 'calc(' + topPx + ' + ' + layer.naturalHeight + 'px)');
+            }
+            if (layer.isVisible) currentTop += layer.naturalHeight;
+          }
+          if (currentTop > 0) {
+            document.documentElement.style.setProperty('--rl-total-header-height', currentTop + 'px');
+          }
+        }
+      };
+    }
+    const RL = window.RLHeaderStack;
+    RL.layers = [];
+
+    function getHeight(el) {
+      if (!el) return 64;
+      const h = el.offsetHeight;
+      return h > 0 ? h : 64;
+    }
+
+    function initHeader(header) {
+      if (header.rlManaged) return;
+      header.rlManaged = true;
+
+      const id = header.id;
+      const stackIndex = parseInt(header.getAttribute('data-stack-index') || '0', 10);
+      const hideOnScroll = header.getAttribute('data-hide-on-scroll') === 'true';
+      const contentEl = header.querySelector('[data-header-content]');
+      let naturalHeight = getHeight(contentEl);
+      let isVisible = true;
+
+      RL.register(id, stackIndex, naturalHeight, isVisible, header);
+
+      if (typeof ResizeObserver !== 'undefined' && contentEl) {
+        new ResizeObserver(function(entries) {
+          const h = entries[0] && entries[0].contentRect.height;
+          if (h && h > 0) {
+            naturalHeight = h;
+            RL.update();
+          }
+        }).observe(contentEl);
+      }
+
+      if (hideOnScroll) {
+        let lastScrollY = window.scrollY;
+        window.addEventListener('scroll', function() {
+          const current = window.scrollY;
+          const diff = current - lastScrollY;
+          if (Math.abs(diff) >= 10) {
+            const newVisible = current <= 50 ? true : diff <= 0;
+            if (newVisible !== isVisible) {
+              isVisible = newVisible;
+              RL.register(id, stackIndex, naturalHeight, isVisible, header);
+            }
+            lastScrollY = current;
+          }
+        }, { passive: true });
+      }
+
+      (function retry() {
+        const h = getHeight(contentEl);
+        if (h !== naturalHeight) {
+          naturalHeight = h;
+          RL.update();
+        }
+        if (h > 0 && h !== 64 && contentEl && contentEl.offsetHeight > 0) return;
+        requestAnimationFrame(retry);
+      })();
+    }
+
+    function startObserver() {
+      if (document.body) {
+        const headers = document.querySelectorAll("[data-rla-header='true']");
+        for (let i = 0; i < headers.length; i++) initHeader(headers[i]);
+
+        window.rlHeaderObserver = new MutationObserver(function(mutations) {
+          for (let i = 0; i < mutations.length; i++) {
+            const added = mutations[i].addedNodes;
+            for (let j = 0; j < added.length; j++) {
+              const node = added[j];
+              if (node.nodeType !== 1) continue;
+              if (node.matches && node.matches("[data-rla-header='true']")) initHeader(node);
+              if (node.querySelectorAll) {
+                const nested = node.querySelectorAll("[data-rla-header='true']");
+                for (let k = 0; k < nested.length; k++) initHeader(nested[k]);
+              }
+            }
+            const removed = mutations[i].removedNodes;
+            for (let j = 0; j < removed.length; j++) {
+              const node = removed[j];
+              if (node.nodeType !== 1) continue;
+              if (node.matches && node.matches("[data-rla-header='true']")) RL.unregister(node.id);
+              if (node.querySelectorAll) {
+                const nested = node.querySelectorAll("[data-rla-header='true']");
+                for (let k = 0; k < nested.length; k++) RL.unregister(nested[k].id);
+              }
+            }
+          }
+        });
+        window.rlHeaderObserver.observe(document.body, { childList: true, subtree: true });
+      } else {
+        document.addEventListener('DOMContentLoaded', startObserver);
+      }
+    }
+
+    startObserver();
+  })();
+</script>
+
 {transitions && <ClientRouter />}