@xexr/blog-platform 1.0.12 → 1.0.13

package/README.md

@@ -442,37 +442,31 @@ Add blog content to your sitemap for better SEO:
 **`app/sitemap.ts`**:
 
 ```tsx
-import { generateBlogSitemapEntries } from "@xexr/blog-platform";
+import { createDynamicBlogSitemap } from "@xexr/blog-platform/sitemap";
 import type { MetadataRoute } from "next";
 import { getBlogData } from "@/lib/blog"; // Your blog data fetching
 
-export default async function sitemap(): Promise<MetadataRoute.Sitemap> {
-  // Your existing static routes
-  const staticRoutes: MetadataRoute.Sitemap = [
-    {
-      url: "https://yoursite.com",
-      lastModified: new Date(),
-      changeFrequency: "yearly",
-      priority: 1,
-    },
-    // ... other routes
-  ];
-
-  // Generate blog entries
-  const { site, articles, authors } = await getBlogData();
-  const blogEntries = await generateBlogSitemapEntries(
-    site,
-    articles,
-    authors,
-    {
-      includeAuthorPages: true,
-      changeFrequency: { articles: "monthly" },
-      priority: { articles: 0.8 },
-    },
-  );
-
-  return [...staticRoutes, ...blogEntries];
-}
+const staticRoutes: MetadataRoute.Sitemap = [
+  {
+    url: "https://yoursite.com",
+    lastModified: new Date(),
+    changeFrequency: "yearly",
+    priority: 1,
+  },
+  // ... other host routes
+];
+
+export default createDynamicBlogSitemap({
+  staticRoutes,
+  getSite: async () => (await getBlogData()).site,
+  getArticles: async () => (await getBlogData()).articles,
+  options: {
+    includeAuthorPages: true,
+    includeTopicPages: true,
+    changeFrequency: { articles: "monthly" },
+    priority: { articles: 0.8 },
+  },
+});
 ```
 
 > 📖 **For detailed sitemap configuration options**, see [SITEMAP-INTEGRATION.md](./SITEMAP-INTEGRATION.md)

package/dist/components/ArticleReadingProgress.tsx

@@ -1,3 +1,7 @@
+"use client";
+
+import { useEffect, useMemo } from "react";
+
 import {
   formatTableOfContentsSummary,
   getTocItemState,
@@ -18,9 +22,15 @@ export function ArticleReadingProgress({
   showProgress = true,
 }: ArticleReadingProgressProps) {
   const activeItemId = items[0]?.id ?? null;
+  const itemIds = useMemo(() => items.map((item) => item.id), [items]);
 
   return (
     <>
+      <ArticleReadingProgressController
+        contentId={contentId}
+        itemIds={itemIds}
+      />
+
       {showProgress && (
         <div
           data-blog-reading-progress={contentId}
@@ -40,18 +50,118 @@ export function ArticleReadingProgress({
         activeItemId={activeItemId}
         variant={variant}
       />
-
-      {showProgress && (
-        <script
-          dangerouslySetInnerHTML={{
-            __html: getReadingProgressScript(contentId, items),
-          }}
-        />
-      )}
     </>
   );
 }
 
+function ArticleReadingProgressController({
+  contentId,
+  itemIds,
+}: {
+  contentId: string;
+  itemIds: string[];
+}) {
+  useEffect(() => {
+    let animationFrameId = 0;
+    let pendingHashItemId = decodeURIComponent(
+      window.location.hash.replace(/^#/, ""),
+    );
+
+    const setActiveItem = (activeItemId: string | null) => {
+      const tocLinks = Array.from(
+        document.querySelectorAll<HTMLElement>("[data-blog-toc-link]"),
+      );
+
+      for (const link of tocLinks) {
+        const isActive = link.getAttribute("data-blog-toc-link") === activeItemId;
+        link.setAttribute("data-active", isActive ? "true" : "false");
+        if (isActive) {
+          link.setAttribute("aria-current", "location");
+        } else {
+          link.removeAttribute("aria-current");
+        }
+      }
+    };
+
+    const updateScrollState = () => {
+      const contentElement = document.getElementById(contentId);
+      if (!contentElement) return;
+
+      const progressElements = Array.from(
+        document.querySelectorAll<HTMLElement>(
+          `[data-blog-reading-progress="${contentId}"]`,
+        ),
+      );
+      const contentRect = contentElement.getBoundingClientRect();
+      const scrollTop = window.scrollY;
+      const contentTop = contentRect.top + scrollTop;
+      const readableDistance = contentElement.offsetHeight - window.innerHeight;
+      const nextProgress =
+        readableDistance <= 0
+          ? scrollTop >= contentTop
+            ? 100
+            : 0
+          : ((scrollTop - contentTop) / readableDistance) * 100;
+      const progress = normalizeProgress(nextProgress);
+
+      for (const progressElement of progressElements) {
+        progressElement.style.transform = `scaleX(${progress / 100})`;
+        progressElement.setAttribute("aria-valuenow", String(Math.round(progress)));
+      }
+
+      const headings = itemIds
+        .map((id) => document.getElementById(id))
+        .filter((heading): heading is HTMLElement => Boolean(heading));
+      if (pendingHashItemId && itemIds.includes(pendingHashItemId)) {
+        setActiveItem(pendingHashItemId);
+        pendingHashItemId = "";
+        return;
+      }
+
+      const activeOffset = Math.max(160, Math.round(window.innerHeight * 0.33));
+      const activeHeading =
+        headings
+          .filter((heading) => heading.getBoundingClientRect().top <= activeOffset)
+          .at(-1) ??
+        headings[0] ??
+        null;
+
+      setActiveItem(activeHeading ? activeHeading.id : null);
+    };
+
+    const scheduleUpdate = () => {
+      window.cancelAnimationFrame(animationFrameId);
+      animationFrameId = window.requestAnimationFrame(updateScrollState);
+    };
+
+    const handleHashChange = () => {
+      pendingHashItemId = decodeURIComponent(
+        window.location.hash.replace(/^#/, ""),
+      );
+      scheduleUpdate();
+    };
+
+    scheduleUpdate();
+    window.addEventListener("scroll", scheduleUpdate, { passive: true });
+    window.addEventListener("resize", scheduleUpdate);
+    window.addEventListener("hashchange", handleHashChange);
+
+    return () => {
+      window.cancelAnimationFrame(animationFrameId);
+      window.removeEventListener("scroll", scheduleUpdate);
+      window.removeEventListener("resize", scheduleUpdate);
+      window.removeEventListener("hashchange", handleHashChange);
+    };
+  }, [contentId, itemIds]);
+
+  return null;
+}
+
+function normalizeProgress(value: number): number {
+  if (!Number.isFinite(value)) return 0;
+  return Math.min(100, Math.max(0, value));
+}
+
 function ArticleTableOfContents({
   items,
   activeItemId,
@@ -127,82 +237,3 @@ function ArticleTableOfContents({
     </aside>
   );
 }
-
-function getReadingProgressScript(contentId: string, items: TocItem[]): string {
-  return `
-(() => {
-  const contentId = ${JSON.stringify(contentId)};
-  const itemIds = ${JSON.stringify(items.map((item) => item.id))};
-  const progressElement = document.querySelector('[data-blog-reading-progress="' + contentId + '"]');
-  let animationFrameId = 0;
-  let pendingHashItemId = decodeURIComponent(window.location.hash.replace(/^#/, ''));
-
-  const normalizeProgress = (value) => {
-    if (!Number.isFinite(value)) return 0;
-    return Math.min(100, Math.max(0, value));
-  };
-
-  const setActiveItem = (activeItemId) => {
-    const tocLinks = Array.from(document.querySelectorAll('[data-blog-toc-link]'));
-
-    for (const link of tocLinks) {
-      const isActive = link.getAttribute('data-blog-toc-link') === activeItemId;
-      link.setAttribute('data-active', isActive ? 'true' : 'false');
-      if (isActive) {
-        link.setAttribute('aria-current', 'location');
-      } else {
-        link.removeAttribute('aria-current');
-      }
-    }
-  };
-
-  const updateScrollState = () => {
-    const contentElement = document.getElementById(contentId);
-    if (!contentElement) return;
-
-    const contentRect = contentElement.getBoundingClientRect();
-    const scrollTop = window.scrollY;
-    const contentTop = contentRect.top + scrollTop;
-    const readableDistance = contentElement.offsetHeight - window.innerHeight;
-    const nextProgress = readableDistance <= 0
-      ? scrollTop >= contentTop ? 100 : 0
-      : ((scrollTop - contentTop) / readableDistance) * 100;
-    const progress = normalizeProgress(nextProgress);
-
-    if (progressElement) {
-      progressElement.style.transform = 'scaleX(' + progress / 100 + ')';
-      progressElement.setAttribute('aria-valuenow', String(Math.round(progress)));
-    }
-
-    const headings = itemIds
-      .map((id) => document.getElementById(id))
-      .filter(Boolean);
-    if (pendingHashItemId && itemIds.includes(pendingHashItemId)) {
-      setActiveItem(pendingHashItemId);
-      pendingHashItemId = '';
-      return;
-    }
-
-    const activeOffset = Math.max(160, Math.round(window.innerHeight * 0.33));
-    const activeHeading = headings
-      .filter((heading) => heading.getBoundingClientRect().top <= activeOffset)
-      .at(-1) || headings[0] || null;
-
-    setActiveItem(activeHeading ? activeHeading.id : null);
-  };
-
-  const scheduleUpdate = () => {
-    window.cancelAnimationFrame(animationFrameId);
-    animationFrameId = window.requestAnimationFrame(updateScrollState);
-  };
-
-  scheduleUpdate();
-  window.addEventListener('scroll', scheduleUpdate, { passive: true });
-  window.addEventListener('resize', scheduleUpdate);
-  window.addEventListener('hashchange', () => {
-    pendingHashItemId = decodeURIComponent(window.location.hash.replace(/^#/, ''));
-    scheduleUpdate();
-  });
-})();
-`;
-}