@rxdrag/website-lib 0.0.143 → 0.0.145

package/components/Document.astro

@@ -1,8 +1,10 @@
 ---
+import "aos/dist/aos.css";
 import { PageType, type PageMeta } from "@rxdrag/rxcms-models";
 import type { Locals } from "@rxdrag/website-lib-core";
 import Meta from "@rxdrag/website-lib/components/Meta.astro";
 import { Entify } from "@rxdrag/website-lib-core";
+import { ClientRouter } from "astro:transitions";
 
 const { env, imageSizes } = Astro.locals as Locals;
 
@@ -31,6 +33,15 @@ const {
   ...rest
 } = Astro.props;
 
+const bodyAttrs = {
+  "data-aos-easing": "ease-out-cubic",
+  "data-aos-duration": "800",
+  "data-aos-delay": "0",
+  "data-aos-offset": "50",
+  "data-aos-once": "true",
+  ...rest,
+};
+
 //TODO: 添加meta获取逻辑，有可能需要重构后端数据结构，现在看来，只有动态内容需要获取meta，其它页面可以传入
 
 let resolvedMeta: PageMeta | undefined = meta;
@@ -40,8 +51,10 @@ let resolvedTitle: string | undefined = title;
 if (!resolvedMeta || !resolvedTitle) {
   try {
     const pathname = Astro.url?.pathname || "";
-    const slug = typeof Astro.params?.slug === "string" ? Astro.params.slug : undefined;
-    const id = typeof Astro.params?.id === "string" ? Astro.params.id : undefined;
+    const slug =
+      typeof Astro.params?.slug === "string" ? Astro.params.slug : undefined;
+    const id =
+      typeof Astro.params?.id === "string" ? Astro.params.id : undefined;
 
     if (slug && pathname.startsWith("/posts/categories/")) {
       const category = await rx.getPostCategoryBySlug(slug);
@@ -63,7 +76,10 @@ if (!resolvedMeta || !resolvedTitle) {
       resolvedTitle = resolvedTitle ?? post?.title;
       resolvedMeta = resolvedMeta ?? post?.meta;
     } else if (slug && pathname.startsWith("/products/")) {
-      const product = await rx.getProductBySlug(slug, { width: 800, height: 800 });
+      const product = await rx.getProductBySlug(slug, {
+        width: 800,
+        height: 800,
+      });
       resolvedTitle = resolvedTitle ?? product?.title;
       resolvedMeta = resolvedMeta ?? product?.meta;
     }
@@ -86,6 +102,99 @@ if (!resolvedMeta || !resolvedTitle) {
     <link rel="sitemap" href="/sitemap-index.xml" />
     <link rel="icon" type="image/png" href="/favicon.png" />
     <!-- 给上层 Layout/页面注入自定义 head 内容（预加载、脚本、样式等） -->
+    <!-- 预连接 -->
+    <link
+      rel="preconnect"
+      href="https://customer-amj1dt4tnge8w6ji.cloudflarestream.com"
+      crossorigin
+    />
+    <script>
+      const w = window as any;
+      const state =
+        w.__aos_state__ ||
+        (w.__aos_state__ = { inited: false, loading: null, aos: null });
+
+      const el = document.documentElement;
+      const raf = () =>
+        new Promise((resolve) =>
+          requestAnimationFrame(() => resolve(undefined)),
+        );
+
+      const ensureAos = async () => {
+        if (state.aos) return state.aos;
+        if (!state.loading) {
+          state.loading = import("aos").then((m) => {
+            state.aos = m.default;
+            return state.aos;
+          });
+        }
+        return state.loading;
+      };
+
+      const bootOrRefresh = async () => {
+        if (
+          window.matchMedia &&
+          window.matchMedia("(prefers-reduced-motion: reduce)").matches
+        ) {
+          el.classList.add("aos-ready");
+          el.classList.remove("aos-preload");
+          return;
+        }
+
+        if (!document.querySelector("[data-aos]")) {
+          el.classList.add("aos-ready");
+          el.classList.remove("aos-preload");
+          return;
+        }
+
+        el.classList.add("aos-preload");
+        el.classList.remove("aos-ready");
+
+        const AOS = await ensureAos();
+        if (!state.inited) {
+          state.inited = true;
+          AOS.init({
+            duration: 800,
+            easing: "ease-out-cubic",
+            once: true,
+            offset: 50,
+          });
+        }
+
+        await raf();
+        await raf();
+        AOS.refresh();
+
+        el.classList.add("aos-ready");
+        el.classList.remove("aos-preload");
+      };
+
+      const boot = () => {
+        bootOrRefresh();
+      };
+
+      if (document.readyState === "loading") {
+        document.addEventListener("DOMContentLoaded", boot, { once: true });
+      } else {
+        boot();
+      }
+
+      document.addEventListener("astro:page-load", boot);
+      document.addEventListener("astro:after-swap", boot);
+    </script>
+    <ClientRouter />
+    <!-- Consent default (Google) -->
+    <script is:inline>
+      window.dataLayer = window.dataLayer || [];
+      function gtag() {
+        dataLayer.push(arguments);
+      }
+      gtag("js", new Date());
+      gtag("consent", "default", {
+        ad_storage: "denied",
+        analytics_storage: "denied",
+      });
+    </script>
     <slot name="head" />
     <Meta title={resolvedTitle} content={resolvedMeta} />
     <style>
@@ -97,7 +206,7 @@ if (!resolvedMeta || !resolvedTitle) {
     </style>
   </head>
   <!-- rest 会被展开到 body 上，方便上层控制 data-* 等属性 -->
-  <body class:list={[className, className2]} {...rest}>
+  <body class:list={[className, className2]} {...bodyAttrs}>
     <slot />
   </body>
 </html>

package/components/HeroCarousel.astro

@@ -0,0 +1,204 @@
+---
+import Section from "./Section.astro";
+import clsx from "clsx";
+import "swiper/css";
+import "swiper/css/pagination";
+import "swiper/css/navigation";
+
+interface Props {
+  class?: string;
+}
+
+const { class: className, ...rest } = Astro.props;
+---
+
+<Section
+  className={clsx(
+    "w-full h-[300px] sm:h-[400px] md:h-screen flex flex-col mt-0 bg-black relative overflow-hidden z-10 py-0",
+    className,
+  )}
+  disableContainer
+  {...rest}
+>
+  <div class="hero-carousel w-full h-full relative" data-hero-carousel>
+    <div class="swiper h-full relative">
+      <div class="swiper-wrapper h-full">
+        <slot />
+      </div>
+      <slot name="navigation" />
+      <slot name="pagination" />
+    </div>
+  </div>
+</Section>
+
+<script>
+  type SwiperRootEl = HTMLElement & { __swiperInstance?: any };
+  type SwiperType = typeof import("swiper").default;
+  type SwiperModulesType = typeof import("swiper/modules");
+
+  type BootWindow = Window & {
+    __heroCarouselBootstrapped?: boolean;
+  };
+
+  const destroyRoot = (root: SwiperRootEl) => {
+    const existing = root.__swiperInstance;
+    if (existing && typeof existing.destroy === "function") {
+      existing.destroy(true, true);
+      root.__swiperInstance = null;
+    }
+    root.dataset.heroCarouselInited = "";
+  };
+
+  const loadSwiperResources = async () => {
+    const [{ default: Swiper }, { Autoplay, Navigation, Pagination }] =
+      await Promise.all([import("swiper"), import("swiper/modules")]);
+    return { Swiper, Autoplay, Navigation, Pagination };
+  };
+
+  let swiperCache: {
+    Swiper: SwiperType;
+    Autoplay: SwiperModulesType["Autoplay"];
+    Navigation: SwiperModulesType["Navigation"];
+    Pagination: SwiperModulesType["Pagination"];
+  } | null = null;
+
+  const getSwiperModules = async () => {
+    if (!swiperCache) {
+      swiperCache = await loadSwiperResources();
+    }
+    return swiperCache;
+  };
+
+  const initRoot = async (root: SwiperRootEl) => {
+    if (root.dataset.heroCarouselInited === "1") {
+      return;
+    }
+
+    const el = root.querySelector(".swiper") as HTMLElement | null;
+    if (!el) return;
+
+    const paginationEl = root.querySelector(
+      ".swiper-pagination",
+    ) as HTMLElement | null;
+    const prevEl = root.querySelector(
+      ".swiper-button-prev",
+    ) as HTMLElement | null;
+    const nextEl = root.querySelector(
+      ".swiper-button-next",
+    ) as HTMLElement | null;
+
+    const wantPagination = !!paginationEl;
+    const wantNavigation = !!prevEl && !!nextEl;
+
+    destroyRoot(root);
+
+    const { Swiper, Autoplay, Navigation, Pagination } =
+      await getSwiperModules();
+
+    const modules = [Autoplay] as any[];
+    if (wantPagination) {
+      modules.push(Pagination);
+    }
+    if (wantNavigation) {
+      modules.push(Navigation);
+    }
+
+    const instance = new Swiper(el, {
+      modules,
+      slidesPerView: 1,
+      spaceBetween: 0,
+      rewind: true,
+      observer: true,
+      observeParents: true,
+      autoplay: {
+        delay: 3500,
+        disableOnInteraction: false,
+        pauseOnMouseEnter: false,
+      },
+      ...(wantPagination && paginationEl
+        ? {
+            pagination: {
+              el: paginationEl,
+              clickable: true,
+              type: "bullets",
+              bulletActiveClass: "swiper-pagination-bullet-active",
+            },
+          }
+        : {}),
+      ...(wantNavigation && prevEl && nextEl
+        ? {
+            navigation: {
+              prevEl,
+              nextEl,
+            },
+          }
+        : {}),
+    });
+
+    try {
+      instance.autoplay?.start?.();
+    } catch {}
+
+    root.__swiperInstance = instance;
+    root.dataset.heroCarouselInited = "1";
+  };
+
+  const initAll = async () => {
+    const roots = document.querySelectorAll(
+      "[data-hero-carousel]",
+    ) as NodeListOf<SwiperRootEl>;
+    if (roots.length === 0) return;
+    await Promise.all(Array.from(roots).map((root) => initRoot(root)));
+  };
+
+  const destroyAll = () => {
+    const roots = document.querySelectorAll(
+      "[data-hero-carousel]",
+    ) as NodeListOf<SwiperRootEl>;
+    roots.forEach((root) => destroyRoot(root));
+  };
+
+  const ensureAutoplayAll = () => {
+    const roots = document.querySelectorAll(
+      "[data-hero-carousel]",
+    ) as NodeListOf<SwiperRootEl>;
+    roots.forEach((root) => {
+      const inst = root.__swiperInstance;
+      try {
+        inst?.autoplay?.start?.();
+      } catch {}
+    });
+  };
+
+  const boot = async () => {
+    try {
+      await initAll();
+    } catch (e) {
+      console.log("HeroCarousel init error:", e);
+    }
+  };
+
+  const w = window as BootWindow;
+  if (!w.__heroCarouselBootstrapped) {
+    w.__heroCarouselBootstrapped = true;
+
+    if (document.readyState === "loading") {
+      document.addEventListener("DOMContentLoaded", boot);
+    } else {
+      boot();
+    }
+
+    document.addEventListener("astro:page-load", boot);
+    document.addEventListener("astro:after-swap", () => {
+      boot();
+      ensureAutoplayAll();
+    });
+    window.addEventListener("astro:before-swap", destroyAll);
+
+    document.addEventListener("visibilitychange", () => {
+      if (!document.hidden) {
+        ensureAutoplayAll();
+      }
+    });
+  }
+</script>

package/components/HeroCarouselPanel.astro

@@ -0,0 +1,24 @@
+---
+import Box from "./Box.astro";
+import Container from "./Container.astro";
+import clsx from "clsx";
+import type { BackgroundConfig } from "@rxdrag/website-lib-core";
+
+interface Props {
+  class?: string;
+  backgrounds?: BackgroundConfig[];
+}
+
+const { class: className, backgrounds } = Astro.props;
+---
+
+<div class={clsx("swiper-slide h-full")}>
+  <Box
+    class={clsx("w-full h-full flex flex-col justify-center")}
+    backgrounds={backgrounds}
+  >
+    <Container class={className}>
+      <slot />
+    </Container>
+  </Box>
+</div>

package/package.json

@@ -1,9 +1,11 @@
 {
   "name": "@rxdrag/website-lib",
-  "version": "0.0.143",
+  "version": "0.0.145",
   "type": "module",
   "exports": {
     ".": "./index.ts",
+    "./components/HeroCarousel.astro": "./components/HeroCarousel.astro",
+    "./components/HeroCarouselPanel.astro": "./components/HeroCarouselPanel.astro",
     "./components/*.astro": "./components/*.astro"
   },
   "files": [
@@ -25,12 +27,13 @@
     "astro": "^5.16.6",
     "eslint": "^9.39.2",
     "gsap": "^3.12.7",
+    "swiper": "^12.0.3",
     "typescript": "^5",
-    "@rxdrag/eslint-config-custom": "0.2.13",
-    "@rxdrag/entify-hooks": "0.2.79",
     "@rxdrag/rxcms-models": "0.3.106",
     "@rxdrag/tiptap-preview": "0.0.3",
-    "@rxdrag/tsconfig": "0.2.1"
+    "@rxdrag/entify-hooks": "0.2.79",
+    "@rxdrag/tsconfig": "0.2.1",
+    "@rxdrag/eslint-config-custom": "0.2.13"
   },
   "dependencies": {
     "aos": "3.0.0-beta.6",
@@ -42,7 +45,8 @@
     "@rxdrag/website-lib-core": "0.0.125"
   },
   "peerDependencies": {
-    "astro": "^5.16.6"
+    "astro": "^5.16.6",
+    "swiper": "^12.0.3"
   },
   "scripts": {
     "lint": "eslint . --ext .ts,tsx",