rankrunners-cms 0.0.19 → 0.0.21

package/src/tanstack/withCMS.tsx

@@ -0,0 +1,291 @@
+import {
+  notFound,
+  useLoaderData,
+  type RouteComponent,
+} from "@tanstack/react-router";
+import {
+  object,
+  optional,
+  string,
+  type ObjectSchema,
+  type ObjectEntries,
+  type ErrorMessage,
+  type ObjectIssue,
+  type InferOutput,
+} from "valibot";
+import { getPageContents } from "../api/client/pages";
+import { getPublicPosts } from "../api/client/posts";
+import { getPublicPostBySlug } from "../api/client/posts";
+import { EditorTanstack } from "./editor/Editor";
+import { PageRendererSSR } from "../editor/render/PageRendererSSR";
+import React from "react";
+import type { Config } from "@puckeditor/core";
+import type { CMSUserData } from "../editor/types";
+import { NotFound } from "./components/NotFound";
+import type {
+  CMSBlogConfig,
+  CMSConfig,
+} from "./seo/types";
+import type {
+  PublicPostDTO,
+  PublicPostSeoDetailsDTO,
+} from "../api/types/public";
+
+// CMS-specific search entries
+const cmsSearchEntries = {
+  preview: optional(string()),
+};
+
+// ---------------------------------------------------------------------------
+// Blog route matching helpers
+// ---------------------------------------------------------------------------
+
+interface BlogMatch {
+  kind: "list" | "detail";
+  blog: CMSBlogConfig;
+  /** Slug of the post (only set when kind === "detail") */
+  slug?: string;
+}
+
+function matchBlogRoute(
+  pathname: string,
+  blogs?: CMSBlogConfig[],
+): BlogMatch | null {
+  if (!blogs) return null;
+
+  for (const blog of blogs) {
+    const prefix = blog.prefix.replace(/^\/+|\/+$/g, "");
+
+    // Detail: {prefix}/{slug}
+    if (pathname.startsWith(`${prefix}/`)) {
+      const slug = pathname.slice(prefix.length + 1);
+      if (slug.length > 0) {
+        return { kind: "detail", blog, slug };
+      }
+    }
+
+    // List: exact match on prefix
+    if (pathname === prefix) {
+      return { kind: "list", blog };
+    }
+  }
+
+  return null;
+}
+
+// ---------------------------------------------------------------------------
+// withCMS
+// ---------------------------------------------------------------------------
+
+export interface WithCMSOptions<
+  TComponents extends Record<string, unknown> = Record<string, unknown>,
+  TEntries extends ObjectEntries = Record<string, never>,
+  TLoaderDeps extends Record<string, unknown> = Record<string, unknown>,
+  TLoaderReturn extends Record<string, unknown> = Record<string, unknown>,
+> {
+  config: Config;
+  allPageData: Record<string, CMSUserData<TComponents>>;
+  /** Optional CMS-specific settings (blog routing, etc.) */
+  cms?: CMSConfig;
+  loader?: (args: {
+    params: Record<string, string | undefined>;
+    deps: TLoaderDeps & { preview?: string };
+    pageData: CMSUserData<TComponents>;
+    preview?: string;
+  }) => TLoaderReturn | Promise<TLoaderReturn>;
+  component?: RouteComponent;
+  notFoundComponent?: RouteComponent;
+  validateSearch?: ObjectSchema<
+    TEntries,
+    ErrorMessage<ObjectIssue> | undefined
+  >;
+  loaderDeps?: (args: {
+    search: InferOutput<
+      ObjectSchema<TEntries, ErrorMessage<ObjectIssue> | undefined>
+    > & { preview?: string };
+  }) => TLoaderDeps;
+}
+
+export function withCMS<
+  TComponents extends Record<string, unknown> = Record<string, unknown>,
+  TEntries extends ObjectEntries = Record<string, never>,
+  TLoaderDeps extends Record<string, unknown> = Record<string, unknown>,
+  TLoaderReturn extends Record<string, unknown> = Record<string, unknown>,
+>(options: WithCMSOptions<TComponents, TEntries, TLoaderDeps, TLoaderReturn>) {
+  const {
+    config,
+    allPageData,
+    cms,
+    loader,
+    component,
+    notFoundComponent,
+    validateSearch,
+    loaderDeps,
+  } = options;
+
+  const blogs = cms?.blogs;
+
+  const mergedValidateSearch = object({
+    ...(validateSearch?.entries ?? {}),
+    ...cmsSearchEntries,
+  });
+
+  return {
+    ...options,
+    validateSearch: mergedValidateSearch,
+    loaderDeps: (args: {
+      search: InferOutput<typeof mergedValidateSearch>;
+    }): TLoaderDeps & { preview?: string } => {
+      const cmsDeps = { preview: args.search.preview };
+      const userDeps = loaderDeps
+        ? loaderDeps(
+            args as unknown as {
+              search: InferOutput<
+                ObjectSchema<TEntries, ErrorMessage<ObjectIssue> | undefined>
+              > & { preview?: string };
+            },
+          )
+        : ({} as TLoaderDeps);
+      return { ...cmsDeps, ...userDeps };
+    },
+    loader: async (args: {
+      params: { _splat?: string };
+      deps: TLoaderDeps & { preview?: string };
+    }) => {
+      const { params, deps } = args;
+      const pathname = (params._splat || "").replace(/^\/+|\/+$/g, "");
+
+      // ---- Blog route handling ----
+      const blogMatch = matchBlogRoute(pathname, blogs);
+
+      if (blogMatch) {
+        if (blogMatch.kind === "detail" && blogMatch.slug) {
+          // Fetch full post data by slug
+          try {
+            const postData = await getPublicPostBySlug(blogMatch.slug);
+            return {
+              pageData: null,
+              preview: deps.preview,
+              blogMatch: {
+                kind: "detail" as const,
+                blog: blogMatch.blog,
+                postData,
+              },
+            };
+          } catch {
+            throw notFound();
+          }
+        }
+
+        if (blogMatch.kind === "list") {
+          // Fetch post list (optionally filtered by category)
+          const posts = await getPublicPosts(
+            blogMatch.blog.category ?? undefined,
+          );
+
+          // Also try to load CMS page data for the list page itself
+          // (the user may have created a CMS page at the prefix path)
+          const pageData = await getPageContents(
+            pathname,
+            allPageData,
+            deps.preview,
+          );
+
+          return {
+            pageData,
+            preview: deps.preview,
+            blogMatch: {
+              kind: "list" as const,
+              blog: blogMatch.blog,
+              posts,
+            },
+          };
+        }
+      }
+
+      // ---- Normal CMS page handling ----
+      const pageData = await getPageContents(
+        pathname,
+        allPageData,
+        deps.preview,
+      );
+
+      if (!pageData) {
+        throw notFound();
+      }
+
+      let customData = {} as TLoaderReturn;
+      if (loader) {
+        customData = await loader({ ...args, pageData, preview: deps.preview });
+      }
+
+      return {
+        pageData,
+        preview: deps.preview,
+        blogMatch: null,
+        ...customData,
+      };
+    },
+    component:
+      component ||
+      (() => {
+        const loaderData = useLoaderData({
+          strict: false,
+        }) as unknown as {
+          pageData: CMSUserData<TComponents> | null;
+          preview?: string;
+          blogMatch?: {
+            kind: "list" | "detail";
+            blog: CMSBlogConfig;
+            posts?: PublicPostDTO[];
+            postData?: PublicPostSeoDetailsDTO;
+          } | null;
+        };
+
+        const { pageData, preview, blogMatch } = loaderData;
+
+        // ---- Blog rendering ----
+        if (blogMatch) {
+          if (blogMatch.kind === "detail" && blogMatch.postData) {
+            return <>{blogMatch.blog.detailComponent(blogMatch.postData)}</>;
+          }
+
+          if (blogMatch.kind === "list" && blogMatch.posts) {
+            // If there's also a CMS page for the list prefix, render it
+            // above/around the blog list -- or just render the list component.
+            if (pageData && !preview) {
+              return (
+                <>
+                  <PageRendererSSR config={config} data={pageData} />
+                  {blogMatch.blog.listComponent(blogMatch.posts)}
+                </>
+              );
+            }
+            return <>{blogMatch.blog.listComponent(blogMatch.posts)}</>;
+          }
+        }
+
+        // ---- Normal CMS page rendering ----
+        if (preview) {
+          return (
+            <EditorTanstack
+              config={config}
+              allPageData={
+                allPageData as unknown as Record<
+                  string,
+                  CMSUserData<Record<string, unknown>>
+                >
+              }
+            />
+          );
+        }
+
+        if (!pageData) {
+          return <NotFound />;
+        }
+
+        return <PageRendererSSR config={config} data={pageData} />;
+      }),
+    notFoundComponent: notFoundComponent || NotFound,
+  };
+}