@rimelight/ui 0.0.34 → 0.0.36

package/src/components/astro/RLAHead.astro

@@ -63,7 +63,7 @@ const {
   config,
   transitions = true,
   charset = 'utf-8',
-  viewport = 'width=device-width,initial-scale=1',
+  viewport = 'width=device-width, initial-scale=1',
   rssFeed,
 } = Astro.props as HeadProps;
 
@@ -155,12 +155,28 @@ const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : '
 {twitterHandle && <meta property="twitter:site" content={twitterHandle} />}
 {twitterHandle && <meta property="twitter:creator" content={twitterHandle} />}
 
-<!-- Icons -->
+<!-- Icons & Manifest -->
 <link rel="icon" type="image/svg+xml" href={favicon} />
+<link rel="icon" href="/favicon.ico" sizes="32x32" />
+<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
+<link rel="manifest" href="/site.webmanifest" />
 
 <!-- Theme -->
-{themeColor && <meta name="theme-color" content={themeColor} />}
+<meta name="color-scheme" content="light dark" />
+<meta name="theme-color" media="(prefers-color-scheme: light)" content={themeColor || "#ffffff"} />
+<meta name="theme-color" media="(prefers-color-scheme: dark)" content="#0a0a0a" />
 
+<script is:inline>
+  (function() {
+    if (window.trustedTypes && trustedTypes.createPolicy) {
+      trustedTypes.createPolicy('default', {
+        createHTML: function(input) { return input; },
+        createScript: function(input) { return input; },
+        createScriptURL: function(input) { return input; }
+      });
+    }
+  })();
+</script>
 <script is:inline>
   (function() {
     if (!window.initialCspNonce) {
@@ -243,20 +259,16 @@ const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : '
       };
     }
 
-    function getThemeClass() {
+    function getThemePreference() {
       var stored = localStorage.getItem('theme');
-      if (stored === 'dark') return 'dark';
-      if (stored === 'light') return '';
-      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : '';
+      if (stored === 'dark' || stored === 'light') return stored;
+      return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
     }
 
     function applyTheme(doc) {
-      var cls = getThemeClass();
-      if (cls) {
-        doc.documentElement.classList.add('dark');
-      } else {
-        doc.documentElement.classList.remove('dark');
-      }
+      var pref = getThemePreference();
+      doc.documentElement.classList.toggle('dark',  pref === 'dark');
+      doc.documentElement.classList.toggle('light', pref === 'light');
     }
 
     // Apply immediately on initial load
@@ -291,23 +303,45 @@ const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : '
     if (!window.RLHeaderStack) {
       window.RLHeaderStack = {
         layers: [],
-        register: function(id, order, naturalHeight, isVisible, el) {
+        register: function(id, order, naturalHeight, isVisible, el, type) {
+          if (el && !el.isConnected) return;
+          if (type === undefined) type = el && el.getAttribute ? (el.getAttribute('data-layer-type') || 'header') : 'header';
           let layer = this.layers.find(function(l) { return l.id === id; });
           if (!layer) {
-            layer = { id: id, order: order, naturalHeight: naturalHeight, isVisible: isVisible, el: el };
+            layer = { id: id, type: type, order: order, naturalHeight: naturalHeight, isVisible: isVisible, el: el };
             this.layers.push(layer);
-            this.layers.sort(function(a, b) { return a.order - b.order; });
+            this.sortLayers();
           } else {
             layer.naturalHeight = naturalHeight;
             layer.isVisible = isVisible;
             layer.el = el;
           }
+          if (el) {
+            el.rlNaturalHeight = naturalHeight;
+            el.rlIsVisible = isVisible;
+          }
           this.update();
         },
         unregister: function(id) {
+          const layer = this.layers.find(function(l) { return l.id === id; });
+          if (layer && layer.el) {
+            const el = layer.el;
+            if (el.rlScrollListener) {
+              window.removeEventListener('scroll', el.rlScrollListener);
+            }
+            if (el.rlResizeObserver) {
+              el.rlResizeObserver.disconnect();
+            }
+          }
           this.layers = this.layers.filter(function(l) { return l.id !== id; });
           this.update();
         },
+        sortLayers: function() {
+          this.layers.sort(function(a, b) {
+            if (a.type !== b.type) return a.type === 'banner' ? -1 : 1;
+            return a.order - b.order;
+          });
+        },
         update: function() {
           let currentTop = 0;
           for (let i = 0; i < this.layers.length; i++) {
@@ -336,60 +370,116 @@ const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : '
       return h > 0 ? h : 64;
     }
 
-    function initHeader(header) {
-      if (header.rlManaged) return;
-      header.rlManaged = true;
+    function initLayer(el) {
+      const id = el.id;
+      const type = el.getAttribute('data-layer-type') || 'header';
+      const stackIndex = parseInt(el.getAttribute('data-stack-index') || '0', 10);
+      const hideOnScroll = el.getAttribute('data-hide-on-scroll') === 'true';
+      const contentEl = el.querySelector('[data-header-content]');
+
+      if (el.rlManaged) {
+        const naturalHeight = el.rlNaturalHeight || getHeight(contentEl);
+        const isVisible = el.rlIsVisible !== false;
+        RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
+        return;
+      }
+      el.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);
+      RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
 
       if (typeof ResizeObserver !== 'undefined' && contentEl) {
-        new ResizeObserver(function(entries) {
+        const ro = new ResizeObserver(function(entries) {
+          if (!el.isConnected) {
+            ro.disconnect();
+            return;
+          }
           const h = entries[0] && entries[0].contentRect.height;
           if (h && h > 0) {
             naturalHeight = h;
-            RL.update();
+            RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
           }
-        }).observe(contentEl);
+        });
+        ro.observe(contentEl);
+        el.rlResizeObserver = ro;
       }
 
       if (hideOnScroll) {
         let lastScrollY = window.scrollY;
-        window.addEventListener('scroll', function() {
+        const scrollListener = function() {
+          if (!el.isConnected) {
+            window.removeEventListener('scroll', scrollListener);
+            return;
+          }
           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);
+              RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
             }
             lastScrollY = current;
           }
-        }, { passive: true });
+        };
+        el.rlScrollListener = scrollListener;
+        window.addEventListener('scroll', scrollListener, { passive: true });
       }
 
       (function retry() {
+        if (!el.isConnected) return;
         const h = getHeight(contentEl);
         if (h !== naturalHeight) {
           naturalHeight = h;
-          RL.update();
+          RL.register(id, stackIndex, naturalHeight, isVisible, el, type);
         }
         if (h > 0 && h !== 64 && contentEl && contentEl.offsetHeight > 0) return;
         requestAnimationFrame(retry);
       })();
     }
 
+    function dismissBanner(banner) {
+      var key = banner.getAttribute('data-dismiss-key');
+      if (key) localStorage.setItem(key, 'true');
+      banner.style.display = 'none';
+      banner.setAttribute('data-rla-banner', 'false');
+      if (window.RLHeaderStack) RL.unregister(banner.id);
+    }
+
+    function checkDismissed() {
+      var banners = document.querySelectorAll("[data-rla-banner='true']");
+      for (var i = 0; i < banners.length; i++) {
+        var b = banners[i];
+        var key = b.getAttribute('data-dismiss-key');
+        if (key && localStorage.getItem(key) === 'true') {
+          b.style.display = 'none';
+          b.setAttribute('data-rla-banner', 'false');
+        }
+      }
+    }
+
+    if (!window.rlBannerInit) {
+      window.rlBannerInit = true;
+      document.addEventListener('click', function(e) {
+        var btn = e.target.closest('[data-banner-close]');
+        if (!btn) return;
+        var banner = btn.closest('[data-rla-banner]');
+        if (!banner) return;
+        dismissBanner(banner);
+      });
+    }
+
+    function selector() {
+      return "[data-rla-header='true'],[data-rla-banner='true']";
+    }
+
     function startObserver() {
       if (document.body) {
-        const headers = document.querySelectorAll("[data-rla-header='true']");
-        for (let i = 0; i < headers.length; i++) initHeader(headers[i]);
+        checkDismissed();
+        const layers = document.querySelectorAll(selector());
+        for (let i = 0; i < layers.length; i++) initLayer(layers[i]);
 
         window.rlHeaderObserver = new MutationObserver(function(mutations) {
           for (let i = 0; i < mutations.length; i++) {
@@ -397,19 +487,19 @@ const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : '
             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.matches && node.matches(selector())) initLayer(node);
               if (node.querySelectorAll) {
-                const nested = node.querySelectorAll("[data-rla-header='true']");
-                for (let k = 0; k < nested.length; k++) initHeader(nested[k]);
+                const nested = node.querySelectorAll(selector());
+                for (let k = 0; k < nested.length; k++) initLayer(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.matches && node.matches(selector())) RL.unregister(node.id);
               if (node.querySelectorAll) {
-                const nested = node.querySelectorAll("[data-rla-header='true']");
+                const nested = node.querySelectorAll(selector());
                 for (let k = 0; k < nested.length; k++) RL.unregister(nested[k].id);
               }
             }
@@ -425,4 +515,14 @@ const defaultRobots = isIndexable ? 'index, follow, max-image-preview:large' : '
   })();
 </script>
 
-{transitions && <ClientRouter />}
+{transitions && <ClientRouter />}
+
+{config && (
+  <script type="application/ld+json" is:inline set:html={JSON.stringify({
+    "@context": "https://schema.org",
+    "@type": "WebSite",
+    "name": config.name,
+    "url": Astro.site ? Astro.site.toString() : config.url,
+    "description": config.description
+  })} />
+)}

package/src/components/astro/RLAHeader.astro

@@ -35,6 +35,7 @@ const zIndex = 100 - stackIndex;
   id={headerId}
   data-slot="root"
   class:list={[classes.root]}
+  data-contain={contain ? "true" : "false"}
   data-rla-header={fixed ? "true" : undefined}
   data-stack-index={stackIndex}
   data-hide-on-scroll={String(hideOnScroll)}
@@ -42,7 +43,7 @@ const zIndex = 100 - stackIndex;
   {...rest}
 >
   <div class:list={[classes.content]} data-header-content>
-    <div class:list={[classes.container]}>
+    <div class:list={[classes.container]} data-slot="container">
       <div class:list={[classes.left]} data-slot="left">
         <slot name="left" />
       </div>