@asteroidcms/core-utils 0.1.7 → 0.2.0

package/dist/client.js

@@ -1,12 +1,13 @@
 "use client";
-import { createContext, memo, useMemo, useRef, useState, useLayoutEffect, Fragment, createElement, useContext } from 'react';
+import { createContext, memo, useMemo, useRef, useState, useLayoutEffect, Fragment, createElement, useContext, useEffect } from 'react';
 import { ApolloProvider, useQuery, useMutation } from '@apollo/client/react';
 import { gql, HttpLink, ApolloClient, InMemoryCache, ApolloLink, CombinedGraphQLErrors, CombinedProtocolErrors } from '@apollo/client';
 import { SetContextLink } from '@apollo/client/link/context';
 import { ErrorLink } from '@apollo/client/link/error';
-import { jsxs, jsx } from 'react/jsx-runtime';
+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() {
@@ -1728,7 +1729,503 @@ function extractHeadingsFromElement(root, options = {}) {
   });
   return out;
 }
+function setMeta(attr, key, content) {
+  let element = document.head.querySelector(
+    `meta[${attr}="${key}"]`
+  );
+  if (!element) {
+    if (!content) return;
+    element = document.createElement("meta");
+    element.setAttribute(attr, key);
+    document.head.appendChild(element);
+  } else if (!content) {
+    element.remove();
+    return;
+  }
+  element.setAttribute("content", content);
+}
+function setCanonical(url) {
+  let canonical = document.head.querySelector(
+    'link[rel="canonical"]'
+  );
+  if (!canonical) {
+    canonical = document.createElement("link");
+    canonical.rel = "canonical";
+    document.head.appendChild(canonical);
+  }
+  canonical.href = url;
+}
+function JsonLd({ data }) {
+  if (!data) return null;
+  const html = JSON.stringify(data).replace(/</g, "\\u003c").replace(/>/g, "\\u003e").replace(/\u2028/g, "\\u2028").replace(/\u2029/g, "\\u2029");
+  return /* @__PURE__ */ jsx(
+    "script",
+    {
+      type: "application/ld+json",
+      dangerouslySetInnerHTML: { __html: html }
+    }
+  );
+}
+function Seo({
+  title,
+  description,
+  url,
+  siteName,
+  keywords,
+  twitter,
+  image,
+  noindex
+}) {
+  useEffect(() => {
+    document.title = title;
+    setMeta("name", "description", description);
+    setCanonical(url);
+    setMeta("property", "og:title", title);
+    setMeta("property", "og:description", description);
+    setMeta("property", "og:url", url);
+    setMeta("property", "og:site_name", siteName || "");
+    setMeta("name", "keywords", keywords || "");
+    setMeta("name", "robots", noindex ? "noindex" : "index");
+    setMeta("name", "twitter:card", image ? "summary_large_image" : "summary");
+    setMeta("name", "twitter:title", title);
+    setMeta("name", "twitter:description", description);
+    setMeta("name", "twitter:site", twitter || "");
+    setMeta("property", "og:image", image || "");
+    setMeta("name", "twitter:image", image || "");
+  }, [title, description, url, siteName, keywords, twitter, image, noindex]);
+  return null;
+}
+
+// src/seo/seo.builders.ts
+function applyTitleTemplate(config, title) {
+  return config.titleTemplate ? config.titleTemplate(title) : `${title} | ${config.siteName}`;
+}
+function buildOgImageUrl(config, params) {
+  if (config.getOgImageUrl) {
+    return config.getOgImageUrl(params);
+  }
+  const palette = config.ogImage?.palette;
+  if (!palette) return void 0;
+  const apiPath = config.ogImage?.apiPath ?? "/api/og";
+  const base = config.baseUrl.replace(/\/$/, "");
+  const searchParams = new URLSearchParams({
+    title: params.title,
+    type: params.type ?? "article",
+    siteName: config.siteName,
+    bg: palette.background,
+    fg: palette.foreground,
+    accent: palette.accent
+  });
+  if (params.subtitle?.trim()) searchParams.set("subtitle", params.subtitle.trim());
+  if (params.eyebrow?.trim()) searchParams.set("eyebrow", params.eyebrow.trim());
+  if (palette.accentMuted) searchParams.set("accentMuted", palette.accentMuted);
+  if (palette.mutedText) searchParams.set("muted", palette.mutedText);
+  return `${base}${apiPath}?${searchParams.toString()}`;
+}
+function resolveArticleImage(post, config) {
+  const featuredImage = config.cmsUrl ? cmsImage(post.featured_image, { cmsUrl: config.cmsUrl }) : "";
+  if (featuredImage) return featuredImage;
+  const description = post.meta_description?.trim() || post.description?.trim() || config.defaultDescription;
+  return buildOgImageUrl(config, {
+    title: post.title,
+    subtitle: description,
+    eyebrow: config.contentLabel ?? "Article",
+    type: "article"
+  });
+}
+function buildArticleSeoValues(post, config, slug, options) {
+  const articlePath = config.articlePath ?? "/blog";
+  const url = `${config.baseUrl.replace(/\/$/, "")}${articlePath}/${slug}`;
+  const description = post.meta_description?.trim() || post.description?.trim() || config.defaultDescription || `Read the latest from ${config.siteName}.`;
+  return {
+    title: applyTitleTemplate(config, post.title),
+    siteName: config.siteName,
+    twitter: config.twitter ?? "",
+    description,
+    url,
+    keywords: config.defaultKeywords ?? post.title,
+    image: resolveArticleImage(post, config),
+    noindex: options?.noindex ?? config.noindex,
+    manifestUrl: config.manifestUrl
+  };
+}
+function buildArticleListingSeoValues(config, options) {
+  const articlePath = config.articlePath ?? "/blog";
+  const base = config.baseUrl.replace(/\/$/, "");
+  const label = config.contentLabel ?? "Articles";
+  const categoryName = options?.categoryName?.trim();
+  const categorySlug = options?.categorySlug?.trim();
+  const titleText = categoryName ? `${categoryName} ${label}` : label;
+  const description = categoryName ? `Explore ${categoryName} ${label.toLowerCase()}, guides, and the latest updates from ${config.siteName}.` : config.defaultDescription || `Browse ${label.toLowerCase()}, insights, and the latest updates from ${config.siteName}.`;
+  const url = categorySlug ? `${base}${articlePath}/category/${categorySlug}` : `${base}${articlePath}`;
+  return {
+    title: applyTitleTemplate(config, titleText),
+    siteName: config.siteName,
+    twitter: config.twitter ?? "",
+    description,
+    url,
+    keywords: config.defaultKeywords ?? (categoryName ? `${categoryName}, ${config.siteName}` : `${config.siteName} ${label.toLowerCase()}`),
+    image: buildOgImageUrl(config, {
+      title: titleText,
+      subtitle: description,
+      eyebrow: categoryName ? "Category" : label,
+      type: "listing"
+    }),
+    noindex: options?.noindex ?? config.noindex,
+    manifestUrl: config.manifestUrl
+  };
+}
+function seoValuesToClientProps(values) {
+  return {
+    title: values.title,
+    description: values.description,
+    url: values.url,
+    siteName: values.siteName,
+    keywords: values.keywords,
+    twitter: values.twitter,
+    image: values.image,
+    noindex: values.noindex
+  };
+}
+
+// src/seo/jsonld.ts
+function buildArticleJsonLd(props) {
+  return {
+    "@context": "https://schema.org",
+    "@type": props.articleType ?? "Article",
+    headline: props.title,
+    description: props.description,
+    url: props.url,
+    ...props.image ? { image: props.image } : {},
+    ...props.publishedTime ? { datePublished: props.publishedTime } : {},
+    ...props.category ? { articleSection: props.category } : {},
+    ...props.tags && props.tags.length > 0 ? { keywords: props.tags.join(", ") } : {},
+    author: { "@type": "Person", name: props.authorName || props.siteName },
+    publisher: { "@id": `${props.siteUrl}/#organization` },
+    isPartOf: { "@id": `${props.siteUrl}/#website` },
+    inLanguage: "en-US"
+  };
+}
+function buildCollectionJsonLd(props) {
+  return {
+    "@context": "https://schema.org",
+    "@type": "CollectionPage",
+    name: props.name,
+    description: props.description,
+    url: props.url,
+    isPartOf: { "@id": `${props.siteUrl}/#website` },
+    publisher: { "@id": `${props.siteUrl}/#organization` },
+    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,
+    noindex,
+    relatedPosts = [],
+    renderRoot,
+    renderSkeleton,
+    renderError,
+    renderJsonLd,
+    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 (loading) {
+    const body2 = renderSkeleton?.() ?? null;
+    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 ? /* @__PURE__ */ jsx(Fragment$1, { children: renderRoot({ children: body2 }) }) : /* @__PURE__ */ jsx(Fragment$1, { children: body2 });
+  }
+  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;
+}
+function defaultGroupPostsByCategory(posts) {
+  const groups = /* @__PURE__ */ new Map();
+  for (const post of posts) {
+    const categoryName = defaultGetCategoryName(post) || "Other";
+    const categorySlug = post.category?.slug || "other";
+    const existing = groups.get(categorySlug);
+    if (existing) {
+      existing.posts.push(post);
+    } else {
+      groups.set(categorySlug, { categoryName, categorySlug, posts: [post] });
+    }
+  }
+  return Array.from(groups.values());
+}
+function applyPostFilters(posts, { categorySlug, articleSlug }) {
+  let filtered = posts;
+  if (categorySlug) {
+    filtered = filtered.filter((post) => post.category?.slug === categorySlug);
+  }
+  if (articleSlug) {
+    filtered = filtered.filter((post) => post.slug === articleSlug);
+  }
+  return filtered;
+}
+function splitFeaturedAndRest(posts) {
+  const featured = posts.find((post) => post.featured) ?? null;
+  const rest = featured ? posts.filter((post) => post.slug !== featured.slug) : [...posts];
+  return { featured, rest };
+}
+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
+    }
+  ] : groupPostsByCategory(rest);
+  return {
+    posts,
+    featured,
+    rest,
+    categoryGroups,
+    isEmpty: !featured && rest.length === 0,
+    isSearching,
+    searchQuery: trimmedQuery
+  };
+}
+function renderArticlesListingBody(args) {
+  const { state, loading, hasError, error, cmsImage: cmsImage2, searchNode, seoNode, jsonLdNode, renderProps } = args;
+  const {
+    eyebrow,
+    title,
+    description,
+    renderRoot,
+    renderHeader,
+    renderFeaturedCard,
+    renderPostCard,
+    renderCategoryHeading,
+    renderPostGrid,
+    renderCategoryGroup,
+    renderSkeleton,
+    renderEmpty,
+    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, 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, 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 /* @__PURE__ */ jsx(Fragment, { children: renderCategoryGroup ? renderCategoryGroup({ group, defaultContent }) : defaultContent }, group.categorySlug);
+  });
+  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
+  ] }) : null;
+  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    seoNode,
+    jsonLdNode,
+    headerNode,
+    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 { AsteroidCMSProvider, RichTextContent, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, 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