@asteroidcms/core-utils 0.1.8 → 0.2.0

package/dist/client.js

@@ -7,6 +7,7 @@ import { ErrorLink } from '@apollo/client/link/error';
 import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
 import { createPortal } from 'react-dom';
 import hljs from 'highlight.js/lib/common';
+import { useRouter, usePathname, useSearchParams } from 'next/navigation';
 
 var AsteroidCMSContext = createContext(null);
 function useAsteroidCMSConfig() {
@@ -1917,93 +1918,88 @@ function buildCollectionJsonLd(props) {
     inLanguage: "en-US"
   };
 }
+function renderArticleBody(args) {
+  const { post, cmsImage: cmsImage2, relatedPosts, seoNode, jsonLdNode, renderProps: r } = args;
+  const slot = { post, cmsImage: cmsImage2 };
+  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    seoNode,
+    jsonLdNode,
+    r.backLink,
+    r.renderPreArticle?.(slot),
+    r.renderHeader?.(slot),
+    r.renderMeta?.(slot),
+    r.renderDescription?.(slot),
+    r.renderFeaturedImage?.(slot),
+    r.renderToc?.(slot),
+    r.renderContent?.(slot),
+    r.renderMidArticle?.(slot),
+    r.renderTags?.(slot),
+    r.renderAuthorDetails?.(slot),
+    r.renderRelatedPosts?.({ post, relatedPosts, cmsImage: cmsImage2 }),
+    r.renderCTA?.(slot),
+    r.renderPostArticle?.(slot)
+  ] });
+}
 function AsteroidArticlePage(props) {
   const {
     slug,
     useArticle,
     seo,
     articleType,
-    backLink,
+    noindex,
+    relatedPosts = [],
     renderRoot,
     renderSkeleton,
     renderError,
-    renderHeader,
-    renderMeta,
-    renderDescription,
-    renderFeaturedImage,
-    renderToc,
-    renderContent,
-    renderPreArticle,
-    renderMidArticle,
-    renderPostArticle,
-    renderTags,
-    renderAuthorDetails,
-    renderRelatedPosts,
-    renderCTA,
     renderJsonLd,
-    noindex,
-    children
+    children,
+    ...bodyRenderProps
   } = props;
   const { data: article, loading, error } = useArticle(slug);
   const cmsConfig = useContext(AsteroidCMSContext);
+  const cmsImage2 = useCmsImage();
   const seoConfig = seo && !seo.cmsUrl && cmsConfig?.cmsUrl ? { ...seo, cmsUrl: cmsConfig.cmsUrl } : seo;
-  if (children) {
-    return /* @__PURE__ */ jsx(Fragment$1, { children: children({ data: article, loading, error }) });
-  }
+  if (children) return /* @__PURE__ */ jsx(Fragment$1, { children: children({ data: article, loading, error }) });
   if (loading) {
     const body2 = renderSkeleton?.() ?? null;
-    return renderRoot ? renderRoot({ children: body2 }) : /* @__PURE__ */ jsx(Fragment$1, { children: body2 });
+    return renderRoot ? /* @__PURE__ */ jsx(Fragment$1, { children: renderRoot({ children: body2 }) }) : /* @__PURE__ */ jsx(Fragment$1, { children: body2 });
   }
   if (!article || error) {
     const body2 = renderError?.({ error, reason: error ? "error" : "not-found" }) ?? null;
-    return renderRoot ? renderRoot({ children: body2 }) : /* @__PURE__ */ jsx(Fragment$1, { children: body2 });
+    return renderRoot ? /* @__PURE__ */ jsx(Fragment$1, { children: renderRoot({ children: body2 }) }) : /* @__PURE__ */ jsx(Fragment$1, { children: body2 });
   }
-  const seoValues = seoConfig && article ? buildArticleSeoValues(article, seoConfig, slug, { noindex }) : null;
-  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
-    seoValues ? /* @__PURE__ */ jsx(Seo, { ...seoValuesToClientProps(seoValues) }) : null,
-    seoConfig && article ? renderJsonLd?.({ post: article }) ?? /* @__PURE__ */ jsx(
-      JsonLd,
-      {
-        data: buildArticleJsonLd({
-          title: article.title,
-          description: article.description || seoConfig.defaultDescription || "",
-          url: `${(seoConfig.baseUrl || "").replace(/\/$/, "")}${seoConfig.articlePath ?? "/blog"}/${slug}`,
-          siteName: seoConfig.siteName,
-          siteUrl: (seoConfig.baseUrl || "").replace(/\/$/, ""),
-          articleType,
-          image: seoValues?.image,
-          authorName: article.author?.name,
-          publishedTime: article.published_date || void 0,
-          tags: article.tags?.split(",").map((t) => t.trim()).filter(Boolean),
-          category: article.category?.name
-        })
-      }
-    ) : null,
-    backLink,
-    renderPreArticle?.({ post: article }),
-    renderHeader?.({ post: article }),
-    renderMeta?.({ post: article }),
-    renderDescription?.({ post: article }),
-    renderFeaturedImage?.({ post: article }),
-    renderToc?.({ post: article }),
-    renderContent?.({ post: article }),
-    renderMidArticle?.({ post: article }),
-    renderTags?.({ post: article }),
-    renderAuthorDetails?.({ post: article }),
-    renderRelatedPosts?.({ post: article }),
-    renderCTA?.({ post: article }),
-    renderPostArticle?.({ post: article })
-  ] });
-  return renderRoot ? renderRoot({ children: body }) : /* @__PURE__ */ jsx(Fragment$1, { children: body });
-}
-function useDebouncedValue(value, delay) {
-  const [debouncedValue, setDebouncedValue] = useState(value);
-  useEffect(() => {
-    const timer = setTimeout(() => setDebouncedValue(value), delay);
-    return () => clearTimeout(timer);
-  }, [value, delay]);
-  return debouncedValue;
+  const seoValues = seoConfig ? buildArticleSeoValues(article, seoConfig, slug, { noindex }) : null;
+  const seoNode = seoValues ? /* @__PURE__ */ jsx(Seo, { ...seoValuesToClientProps(seoValues) }) : null;
+  const jsonLdNode = seoConfig ? renderJsonLd?.({ post: article }) ?? /* @__PURE__ */ jsx(
+    JsonLd,
+    {
+      data: buildArticleJsonLd({
+        title: article.title,
+        description: article.description || seoConfig.defaultDescription || "",
+        url: `${(seoConfig.baseUrl || "").replace(/\/$/, "")}${seoConfig.articlePath ?? "/blog"}/${slug}`,
+        siteName: seoConfig.siteName,
+        siteUrl: (seoConfig.baseUrl || "").replace(/\/$/, ""),
+        articleType,
+        image: seoValues?.image,
+        authorName: article.author?.name,
+        publishedTime: article.published_date || void 0,
+        tags: article.tags?.split(",").map((t) => t.trim()).filter(Boolean),
+        category: article.category?.name
+      })
+    }
+  ) : null;
+  const body = renderArticleBody({
+    post: article,
+    cmsImage: cmsImage2,
+    relatedPosts,
+    seoNode,
+    jsonLdNode,
+    renderProps: bodyRenderProps
+  });
+  return renderRoot ? /* @__PURE__ */ jsx(Fragment$1, { children: renderRoot({ children: body }) }) : /* @__PURE__ */ jsx(Fragment$1, { children: body });
 }
+
+// src/components/articles/articles.state.ts
 function defaultGetCategoryName(post) {
   return post.category?.name?.trim() || void 0;
 }
@@ -2021,10 +2017,7 @@ function defaultGroupPostsByCategory(posts) {
   }
   return Array.from(groups.values());
 }
-function applyPostFilters(posts, {
-  categorySlug,
-  articleSlug
-}) {
+function applyPostFilters(posts, { categorySlug, articleSlug }) {
   let filtered = posts;
   if (categorySlug) {
     filtered = filtered.filter((post) => post.category?.slug === categorySlug);
@@ -2039,65 +2032,42 @@ function splitFeaturedAndRest(posts) {
   const rest = featured ? posts.filter((post) => post.slug !== featured.slug) : [...posts];
   return { featured, rest };
 }
-function useAsteroidArticlesState({
-  usePosts,
-  categorySlug,
-  articleSlug,
-  searchDebounceMs = 800,
-  groupPostsByCategory = defaultGroupPostsByCategory
-}) {
-  const [searchQuery, setSearchQuery] = useState("");
-  const debouncedSearchQuery = useDebouncedValue(searchQuery, searchDebounceMs);
-  const { posts: rawPosts, loading, error } = usePosts(debouncedSearchQuery);
-  const posts = useMemo(
-    () => applyPostFilters(rawPosts, { categorySlug, articleSlug }),
-    [rawPosts, categorySlug, articleSlug]
-  );
-  const { featured, rest } = useMemo(
-    () => splitFeaturedAndRest(posts),
-    [posts]
-  );
-  const isSearching = debouncedSearchQuery.trim().length > 0;
-  const categoryGroups = useMemo(() => {
-    if (isSearching) {
-      if (posts.length === 0) return [];
-      return [
-        {
-          categoryName: `Search results for "${debouncedSearchQuery.trim()}"`,
-          categorySlug: "search-results",
-          posts
-        }
-      ];
+function buildArticlesViewState(rawPosts, options) {
+  const {
+    categorySlug,
+    articleSlug,
+    searchQuery = "",
+    groupPostsByCategory = defaultGroupPostsByCategory
+  } = options;
+  const posts = applyPostFilters(rawPosts, { categorySlug, articleSlug });
+  const { featured, rest } = splitFeaturedAndRest(posts);
+  const trimmedQuery = searchQuery.trim();
+  const isSearching = trimmedQuery.length > 0;
+  const categoryGroups = isSearching ? posts.length === 0 ? [] : [
+    {
+      categoryName: `Search results for "${trimmedQuery}"`,
+      categorySlug: "search-results",
+      posts
     }
-    return groupPostsByCategory(rest);
-  }, [isSearching, posts, debouncedSearchQuery, rest, groupPostsByCategory]);
-  const hasError = Boolean(error);
-  const isEmpty = !featured && rest.length === 0;
+  ] : groupPostsByCategory(rest);
   return {
     posts,
     featured,
     rest,
     categoryGroups,
-    loading,
-    error,
-    hasError,
-    isEmpty,
+    isEmpty: !featured && rest.length === 0,
     isSearching,
-    searchQuery,
-    debouncedSearchQuery,
-    setSearchQuery
+    searchQuery: trimmedQuery
   };
 }
-function AsteroidArticlesListing(props) {
+function renderArticlesListingBody(args) {
+  const { state, loading, hasError, error, cmsImage: cmsImage2, searchNode, seoNode, jsonLdNode, renderProps } = args;
   const {
     eyebrow,
     title,
     description,
-    seo,
-    categorySlug,
     renderRoot,
     renderHeader,
-    renderSearch,
     renderFeaturedCard,
     renderPostCard,
     renderCategoryHeading,
@@ -2105,73 +2075,27 @@ function AsteroidArticlesListing(props) {
     renderCategoryGroup,
     renderSkeleton,
     renderEmpty,
-    renderContent,
-    renderJsonLd,
-    noindex,
-    children
-  } = props;
-  const state = useAsteroidArticlesState(props);
-  const categoryName = categorySlug ? state.posts[0]?.category?.name?.trim() : void 0;
-  if (children) {
-    return /* @__PURE__ */ jsx(Fragment$1, { children: children(state) });
-  }
-  const seoNode = seo ? /* @__PURE__ */ jsx(
-    Seo,
-    {
-      ...seoValuesToClientProps(
-        buildArticleListingSeoValues(seo, {
-          categoryName,
-          categorySlug,
-          noindex
-        })
-      )
-    }
-  ) : null;
-  const jsonLdNode = seo ? renderJsonLd?.(state) ?? /* @__PURE__ */ jsx(
-    JsonLd,
-    {
-      data: buildCollectionJsonLd({
-        name: categoryName || `${seo.siteName} ${seo.contentLabel ?? "Articles"}`,
-        description: seo.defaultDescription || "",
-        url: `${(seo.baseUrl || "").replace(/\/$/, "")}${seo.articlePath ?? "/blog"}${categorySlug ? `/category/${categorySlug}` : ""}`,
-        siteUrl: (seo.baseUrl || "").replace(/\/$/, "")
-      })
-    }
-  ) : null;
-  const handleSearchSubmit = (event) => {
-    event.preventDefault();
-  };
-  const searchNode = renderSearch ? renderSearch({
-    value: state.searchQuery,
-    onChange: state.setSearchQuery,
-    onSubmit: handleSearchSubmit
-  }) : null;
+    renderContent
+  } = renderProps;
   const headerNode = renderHeader ? renderHeader({ eyebrow, title, description, search: searchNode }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
     eyebrow,
     title,
     description,
     searchNode
   ] });
-  const featuredNode = state.featured && !state.isSearching && renderFeaturedCard ? renderFeaturedCard({ post: state.featured }) : null;
-  const noSearchResultsNode = state.isSearching && !state.loading && state.posts.length === 0 ? renderEmpty?.({
-    reason: "no-results",
-    searchQuery: state.debouncedSearchQuery.trim()
-  }) ?? null : null;
+  const featuredNode = state.featured && !state.isSearching && renderFeaturedCard ? renderFeaturedCard({ post: state.featured, cmsImage: cmsImage2 }) : null;
+  const noSearchResultsNode = state.isSearching && !loading && state.posts.length === 0 ? renderEmpty?.({ reason: "no-results", searchQuery: state.searchQuery }) ?? null : null;
   const groupsNode = noSearchResultsNode ? null : state.categoryGroups.map((group) => {
-    const postCards = group.posts.map((post, index) => /* @__PURE__ */ jsx(Fragment, { children: renderPostCard({ post, index, group }) }, post.slug ?? index));
+    const postCards = group.posts.map((post, index) => /* @__PURE__ */ jsx(Fragment, { children: renderPostCard({ post, index, group, cmsImage: cmsImage2 }) }, post.slug ?? index));
     const gridNode = renderPostGrid ? renderPostGrid({ posts: group.posts, group, children: postCards }) : /* @__PURE__ */ jsx(Fragment$1, { children: postCards });
     const headingNode = renderCategoryHeading ? renderCategoryHeading({ group }) : group.categoryName;
     const defaultContent = /* @__PURE__ */ jsxs(Fragment$1, { children: [
       headingNode,
       gridNode
     ] });
-    return renderCategoryGroup ? renderCategoryGroup({ group, defaultContent }) : defaultContent;
+    return /* @__PURE__ */ jsx(Fragment, { children: renderCategoryGroup ? renderCategoryGroup({ group, defaultContent }) : defaultContent }, group.categorySlug);
   });
-  const contentNode = !state.loading && !state.hasError && (state.featured || state.rest.length > 0) ? renderContent ? renderContent({
-    featured: featuredNode,
-    groups: groupsNode,
-    noSearchResults: noSearchResultsNode
-  }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  const contentNode = !loading && !hasError && (state.featured || state.rest.length > 0) ? renderContent ? renderContent({ featured: featuredNode, groups: groupsNode, noSearchResults: noSearchResultsNode }) : /* @__PURE__ */ jsxs(Fragment$1, { children: [
     featuredNode,
     noSearchResultsNode,
     groupsNode
@@ -2180,17 +2104,128 @@ function AsteroidArticlesListing(props) {
     seoNode,
     jsonLdNode,
     headerNode,
-    state.loading ? renderSkeleton?.() : null,
-    !state.loading && (state.hasError || state.isEmpty) ? renderEmpty?.({
-      reason: state.hasError ? "error" : "no-posts",
-      searchQuery: state.debouncedSearchQuery.trim(),
-      error: state.error
+    loading ? renderSkeleton?.() : null,
+    !loading && (hasError || state.isEmpty) ? renderEmpty?.({
+      reason: hasError ? "error" : state.isSearching ? "no-results" : "no-posts",
+      searchQuery: state.searchQuery,
+      error
     }) : null,
     contentNode
   ] });
   return renderRoot ? renderRoot({ children: body }) : /* @__PURE__ */ jsx(Fragment$1, { children: body });
 }
+function useDebouncedValue(value, delay) {
+  const [debounced, setDebounced] = useState(value);
+  useEffect(() => {
+    const timer = setTimeout(() => setDebounced(value), delay);
+    return () => clearTimeout(timer);
+  }, [value, delay]);
+  return debounced;
+}
+function useAsteroidArticlesState(props) {
+  const { usePosts, categorySlug, articleSlug, searchDebounceMs = 800, groupPostsByCategory } = props;
+  const [inputValue, setSearchQuery] = useState("");
+  const debouncedSearchQuery = useDebouncedValue(inputValue, searchDebounceMs);
+  const { posts: rawPosts, loading, error } = usePosts(debouncedSearchQuery);
+  const view = useMemo(
+    () => buildArticlesViewState(rawPosts, {
+      categorySlug,
+      articleSlug,
+      searchQuery: debouncedSearchQuery,
+      groupPostsByCategory
+    }),
+    [rawPosts, categorySlug, articleSlug, debouncedSearchQuery, groupPostsByCategory]
+  );
+  return {
+    ...view,
+    loading,
+    error,
+    hasError: Boolean(error),
+    inputValue,
+    setSearchQuery
+  };
+}
+function AsteroidArticlesListing(props) {
+  const { seo, categorySlug, noindex, renderSearch, renderJsonLd, children, ...renderProps } = props;
+  const state = useAsteroidArticlesState(props);
+  const cmsImage2 = useCmsImage();
+  if (children) return /* @__PURE__ */ jsx(Fragment$1, { children: children(state) });
+  const categoryName = categorySlug ? state.posts[0]?.category?.name?.trim() : void 0;
+  const seoNode = seo ? /* @__PURE__ */ jsx(
+    Seo,
+    {
+      ...seoValuesToClientProps(
+        buildArticleListingSeoValues(seo, { categoryName, categorySlug, noindex })
+      )
+    }
+  ) : null;
+  const jsonLdNode = seo ? renderJsonLd?.(state) ?? /* @__PURE__ */ jsx(
+    JsonLd,
+    {
+      data: buildCollectionJsonLd({
+        name: categoryName || `${seo.siteName} ${seo.contentLabel ?? "Articles"}`,
+        description: seo.defaultDescription || "",
+        url: `${(seo.baseUrl || "").replace(/\/$/, "")}${seo.articlePath ?? "/blog"}${categorySlug ? `/category/${categorySlug}` : ""}`,
+        siteUrl: (seo.baseUrl || "").replace(/\/$/, "")
+      })
+    }
+  ) : null;
+  const searchNode = renderSearch ? renderSearch({
+    value: state.inputValue,
+    onChange: state.setSearchQuery,
+    onSubmit: (event) => event.preventDefault()
+  }) : null;
+  return /* @__PURE__ */ jsx(Fragment$1, { children: renderArticlesListingBody({
+    state,
+    loading: state.loading,
+    hasError: state.hasError,
+    error: state.error,
+    cmsImage: cmsImage2,
+    searchNode,
+    seoNode,
+    jsonLdNode,
+    renderProps
+  }) });
+}
+function ArticleSearchBox({
+  paramKey = "q",
+  placeholder = "Search articles...",
+  debounceMs = 500,
+  className,
+  render
+}) {
+  const router = useRouter();
+  const pathname = usePathname();
+  const searchParams = useSearchParams();
+  const initial = searchParams.get(paramKey) ?? "";
+  const [value, setValue] = useState(initial);
+  const searchParamsRef = useRef(searchParams);
+  searchParamsRef.current = searchParams;
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      const params = new URLSearchParams(Array.from(searchParamsRef.current.entries()));
+      const trimmed = value.trim();
+      if (trimmed) params.set(paramKey, trimmed);
+      else params.delete(paramKey);
+      const query = params.toString();
+      router.replace(query ? `${pathname}?${query}` : pathname, { scroll: false });
+    }, debounceMs);
+    return () => clearTimeout(timer);
+  }, [value, debounceMs, paramKey, pathname]);
+  const onSubmit = (event) => event.preventDefault();
+  if (render) return /* @__PURE__ */ jsx(Fragment$1, { children: render({ value, onChange: setValue, onSubmit }) });
+  return /* @__PURE__ */ jsx("form", { onSubmit, className, children: /* @__PURE__ */ jsx(
+    "input",
+    {
+      type: "search",
+      value,
+      placeholder,
+      "aria-label": placeholder,
+      onChange: (event) => setValue(event.target.value)
+    }
+  ) });
+}
 
-export { AsteroidArticlePage, AsteroidArticlesListing, AsteroidCMSProvider, JsonLd, RichTextContent, Seo, defaultGetCategoryName, defaultGroupPostsByCategory, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidArticlesState, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate };
+export { ArticleSearchBox, AsteroidArticlePage, AsteroidArticlesListing, AsteroidCMSProvider, JsonLd, RichTextContent, Seo, defaultGetCategoryName, defaultGroupPostsByCategory, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidArticlesState, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate };
 //# sourceMappingURL=client.js.map
 //# sourceMappingURL=client.js.map