@asteroidcms/core-utils 0.1.7 → 0.1.8

package/dist/client.js

@@ -1,10 +1,10 @@
 "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';
 
@@ -1728,7 +1728,469 @@ 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 AsteroidArticlePage(props) {
+  const {
+    slug,
+    useArticle,
+    seo,
+    articleType,
+    backLink,
+    renderRoot,
+    renderSkeleton,
+    renderError,
+    renderHeader,
+    renderMeta,
+    renderDescription,
+    renderFeaturedImage,
+    renderToc,
+    renderContent,
+    renderPreArticle,
+    renderMidArticle,
+    renderPostArticle,
+    renderTags,
+    renderAuthorDetails,
+    renderRelatedPosts,
+    renderCTA,
+    renderJsonLd,
+    noindex,
+    children
+  } = props;
+  const { data: article, loading, error } = useArticle(slug);
+  const cmsConfig = useContext(AsteroidCMSContext);
+  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 ? 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 });
+  }
+  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;
+}
+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 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
+        }
+      ];
+    }
+    return groupPostsByCategory(rest);
+  }, [isSearching, posts, debouncedSearchQuery, rest, groupPostsByCategory]);
+  const hasError = Boolean(error);
+  const isEmpty = !featured && rest.length === 0;
+  return {
+    posts,
+    featured,
+    rest,
+    categoryGroups,
+    loading,
+    error,
+    hasError,
+    isEmpty,
+    isSearching,
+    searchQuery,
+    debouncedSearchQuery,
+    setSearchQuery
+  };
+}
+function AsteroidArticlesListing(props) {
+  const {
+    eyebrow,
+    title,
+    description,
+    seo,
+    categorySlug,
+    renderRoot,
+    renderHeader,
+    renderSearch,
+    renderFeaturedCard,
+    renderPostCard,
+    renderCategoryHeading,
+    renderPostGrid,
+    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;
+  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 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 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;
+  });
+  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: [
+    featuredNode,
+    noSearchResultsNode,
+    groupsNode
+  ] }) : null;
+  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    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
+    }) : null,
+    contentNode
+  ] });
+  return renderRoot ? renderRoot({ children: body }) : /* @__PURE__ */ jsx(Fragment$1, { children: body });
+}
 
-export { AsteroidCMSProvider, RichTextContent, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate };
+export { AsteroidArticlePage, AsteroidArticlesListing, AsteroidCMSProvider, JsonLd, RichTextContent, Seo, defaultGetCategoryName, defaultGroupPostsByCategory, extractHeadingsFromElement, extractHeadingsFromHtml, slugify, useAsteroidArticlesState, useAsteroidCMSConfig, useCmsContent, useCmsImage, useCmsMutate };
 //# sourceMappingURL=client.js.map
 //# sourceMappingURL=client.js.map