feat: React SDK

.gitignore

@@ -44,3 +44,7 @@ yarn-error.log*
 
 # Sentry Auth Token
 .sentryclirc
+
+# packages
+dist/
+node_modules/

apps/docs/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@changes-page/docs",
+  "name": "@changespage/docs",
   "version": "1.0.0",
   "private": true,
   "scripts": {

apps/page/components/footer.tsx

@@ -1,4 +1,4 @@
-import { IPageSettings } from "@changes-page/supabase/types/page";
+import { IPageSettings } from "@changespage/supabase/types/page";
 import Image from "next/image";
 import { useEffect } from "react";
 import { PageRoadmap } from "../lib/data";

apps/page/components/page-header.tsx

@@ -1,4 +1,4 @@
-import { IPage, IPageSettings } from "@changes-page/supabase/types/page";
+import { IPage, IPageSettings } from "@changespage/supabase/types/page";
 import { Menu } from "@headlessui/react";
 import { ChevronDownIcon } from "@heroicons/react/outline";
 import classNames from "classnames";

apps/page/components/post.tsx

@@ -1,5 +1,5 @@
-import { PostType } from "@changes-page/supabase/types/page";
-import { PostTypeBadge } from "@changes-page/ui";
+import { PostType } from "@changespage/supabase/types/page";
+import { PostTypeBadge } from "@changespage/ui";
 import classNames from "classnames";
 import dynamic from "next/dynamic";
 import Image from "next/image";
@@ -14,7 +14,7 @@ import { IPostPublicData } from "../lib/data";
 import Reactions from "./reactions";
 
 const PostDateTime = dynamic(
-  () => import("@changes-page/ui").then((mod) => mod.PostDateTime),
+  () => import("@changespage/ui").then((mod) => mod.PostDateTime),
   {
     ssr: false,
   }

apps/page/components/reactions.tsx

@@ -1,4 +1,4 @@
-import { IReactions } from "@changes-page/supabase/types/page";
+import { IReactions } from "@changespage/supabase/types/page";
 import { Transition } from "@headlessui/react";
 import classNames from "classnames";
 import { useCallback, useEffect, useState } from "react";

apps/page/components/seo-tags.tsx

@@ -2,7 +2,7 @@ import {
   IPage,
   IPageSettings,
   PageTypeToLabel,
-} from "@changes-page/supabase/types/page";
+} from "@changespage/supabase/types/page";
 import { NextSeo } from "next-seo";
 import Head from "next/head";
 import { useMemo } from "react";

apps/page/components/subscribe-prompt.tsx

@@ -1,5 +1,5 @@
-import { IPage, IPageSettings } from "@changes-page/supabase/types/page";
-import { Spinner } from "@changes-page/ui";
+import { IPage, IPageSettings } from "@changespage/supabase/types/page";
+import { Spinner } from "@changespage/ui";
 import {
   BellIcon,
   CheckCircleIcon,

apps/page/lib/data.ts

@@ -1,13 +1,13 @@
-import { supabaseAdmin } from "@changes-page/supabase/admin";
-import { Database } from "@changes-page/supabase/types";
+import { supabaseAdmin } from "@changespage/supabase/admin";
+import { Database } from "@changespage/supabase/types";
 import {
   IPage,
   IPageSettings,
   IPost,
   IRoadmapBoard,
   IRoadmapColumn,
   IRoadmapItem,
-} from "@changes-page/supabase/types/page";
+} from "@changespage/supabase/types/page";
 import { sanitizeCss } from "./css";
 
 const PAGINATION_LIMIT = 50;
@@ -441,9 +441,37 @@ async function getRoadmapBySlug(
   return { board, columns, items };
 }
 
+async function fetchPostsWithPagination(
+  pageId: string,
+  { limit, offset }: { limit?: number; offset?: number }
+): Promise<{ posts: IPost[]; postsCount: number }> {
+  const effectiveLimit = Math.min(limit ?? PAGINATION_LIMIT, PAGINATION_LIMIT);
+  const effectiveOffset = offset ?? 0;
+
+  const {
+    data: posts,
+    count: postsCount,
+    error: postsError,
+  } = await supabaseAdmin
+    .from("posts")
+    .select(postSelectParams, { count: "exact" })
+    .eq("page_id", String(pageId))
+    .eq("status", "published")
+    .range(effectiveOffset, effectiveOffset + effectiveLimit - 1)
+    .order("publication_date", { ascending: false });
+
+  if (postsError) {
+    console.error("Fetch post error", postsError);
+    throw new Error("Failed to fetch posts");
+  }
+
+  return { posts: (posts ?? []) as Array<IPost>, postsCount: postsCount ?? 0 };
+}
+
 export {
   fetchPostById,
   fetchPosts,
+  fetchPostsWithPagination,
   fetchRenderData,
   getRoadmapBySlug,
   PAGINATION_LIMIT,

apps/page/lib/notifications.ts

@@ -1,6 +1,6 @@
 import { v4 } from "uuid";
-import { IPageEmailSubscriber } from "@changes-page/supabase/types/page";
-import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { IPageEmailSubscriber } from "@changespage/supabase/types/page";
+import { supabaseAdmin } from "@changespage/supabase/admin";
 
 async function subscribeViaEmail(
   pageId: string,

apps/page/lib/url.ts

@@ -1,4 +1,4 @@
-import { IPage, IPageSettings } from "@changes-page/supabase/types/page";
+import { IPage, IPageSettings } from "@changespage/supabase/types/page";
 import slugify from "slugify";
 import { IPostPublicData } from "./data";
 

apps/page/lib/visitor-auth.ts

@@ -1,4 +1,4 @@
-import { IPageVisitor } from "@changes-page/supabase/types/page";
+import { IPageVisitor } from "@changespage/supabase/types/page";
 import { SignJWT, jwtVerify } from "jose";
 import type { NextApiRequest } from "next";
 import { randomBytes, randomUUID } from "node:crypto";

apps/page/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@changes-page/page",
+  "name": "@changespage/page",
   "version": "1.19.0",
   "private": true,
   "scripts": {
@@ -12,9 +12,9 @@
   },
   "dependencies": {
     "@arcjet/next": "1.0.0-alpha.20",
-    "@changes-page/supabase": "workspace:*",
-    "@changes-page/ui": "workspace:*",
-    "@changes-page/utils": "workspace:*",
+    "@changespage/supabase": "workspace:*",
+    "@changespage/ui": "workspace:*",
+    "@changespage/utils": "workspace:*",
     "@headlessui/react": "^1.4.0",
     "@heroicons/react": "^1.0.3",
     "@sentry/nextjs": "^7.93.0",

apps/page/pages/_sites/[site]/index.tsx

@@ -1,5 +1,5 @@
-import { IPage, IPageSettings, IPost } from "@changes-page/supabase/types/page";
-import { Timeline } from "@changes-page/ui";
+import { IPage, IPageSettings, IPost } from "@changespage/supabase/types/page";
+import { Timeline } from "@changespage/ui";
 import classNames from "classnames";
 import { useCallback, useMemo, useState } from "react";
 import Footer from "../../../components/footer";

apps/page/pages/_sites/[site]/notifications/confirm-email-subscription.tsx

@@ -1,4 +1,4 @@
-import { IPage, IPageSettings } from "@changes-page/supabase/types/page";
+import { IPage, IPageSettings } from "@changespage/supabase/types/page";
 import { CheckCircleIcon } from "@heroicons/react/outline";
 import type { GetServerSideProps } from "next";
 import { usePageTheme } from "../../../../hooks/usePageTheme";

apps/page/pages/_sites/[site]/plain.tsx

@@ -4,8 +4,8 @@ import {
   IPost,
   PostType,
   PostTypeToLabel,
-} from "@changes-page/supabase/types/page";
-import { DateTime } from "@changes-page/utils";
+} from "@changespage/supabase/types/page";
+import { DateTime } from "@changespage/utils";
 import { GetServerSidePropsContext } from "next";
 import { useRouter } from "next/router";
 import { useEffect } from "react";

apps/page/pages/_sites/[site]/post/[postId]/[slug].tsx

@@ -1,5 +1,5 @@
-import { Timeline } from "@changes-page/ui";
-import { convertMarkdownToPlainText } from "@changes-page/utils";
+import { Timeline } from "@changespage/ui";
+import { convertMarkdownToPlainText } from "@changespage/utils";
 import { ArrowLeftIcon, ArrowRightIcon } from "@heroicons/react/solid";
 import { InferGetServerSidePropsType } from "next";
 import Link from "next/link";

apps/page/pages/_sites/[site]/roadmap/[roadmap_slug].tsx

@@ -3,8 +3,8 @@ import {
   IPageSettings,
   IRoadmapBoard,
   IRoadmapColumn,
-} from "@changes-page/supabase/types/page";
-import { getCategoryColorClasses } from "@changes-page/utils";
+} from "@changespage/supabase/types/page";
+import { getCategoryColorClasses } from "@changespage/utils";
 import { Dialog, Transition } from "@headlessui/react";
 import { PlusIcon, XIcon } from "@heroicons/react/outline";
 import { Fragment, useEffect, useMemo, useState } from "react";

apps/page/pages/api/auth/request-magic-link.ts

@@ -1,5 +1,5 @@
 import arcjet, { protectSignup } from "@arcjet/next";
-import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { supabaseAdmin } from "@changespage/supabase/admin";
 import type { NextApiRequest, NextApiResponse } from "next";
 import validator from "validator";
 import {

apps/page/pages/api/auth/verify-magic-link.ts

@@ -1,4 +1,4 @@
-import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { supabaseAdmin } from "@changespage/supabase/admin";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { createVisitorJWT, isTokenExpired } from "../../../lib/visitor-auth";
 

apps/page/pages/api/json.ts

@@ -1,20 +1,25 @@
-import { IPost } from "@changes-page/supabase/types/page";
-import { convertMarkdownToPlainText } from "@changes-page/utils";
+import { IPost } from "@changespage/supabase/types/page";
+import { convertMarkdownToPlainText } from "@changespage/utils";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { allowCors } from "../../lib/cors";
 import {
   fetchPosts,
+  fetchPostsWithPagination,
   fetchRenderData,
   translateHostToPageIdentifier,
 } from "../../lib/data";
 import { getPageUrl, getPostUrl } from "../../lib/url";
 
-async function handler(
-  req: NextApiRequest,
-  res: NextApiResponse<IPost[] | null>
-) {
-  await allowCors(req, res);
+type PostWithUrl = IPost & { url: string; plain_text_content: string };
+
+type V1Response = PostWithUrl[] | null;
 
+type V2Response =
+  | { posts: PostWithUrl[]; totalCount: number }
+  | { error: string }
+  | null;
+
+async function handleV1(req: NextApiRequest, res: NextApiResponse<V1Response>) {
   const hostname = String(req?.headers?.host);
   const { limit } = req?.query;
 
@@ -30,22 +35,78 @@ async function handler(
 
     const pageUrl = getPageUrl(page, settings);
     const { posts } = await fetchPosts(String(page?.id), {
-      limit: Number(limit),
+      limit: limit ? Number(limit) : undefined,
     });
 
-    const postsWithUrl = await Promise.all(
-      (posts ?? []).map((post) => ({
-        ...post,
-        url: getPostUrl(pageUrl, post),
-        plain_text_content: convertMarkdownToPlainText(post.content),
-      }))
-    );
+    const postsWithUrl = (posts ?? []).map((post) => ({
+      ...post,
+      url: getPostUrl(pageUrl, post),
+      plain_text_content: convertMarkdownToPlainText(post.content),
+    }));
 
     res.status(200).json(postsWithUrl);
   } catch (e: unknown) {
-    console.log("Failed to fetch posts [Error]", e);
+    console.log("Failed to fetch posts [V1 Error]", e);
     res.status(200).json([]);
   }
 }
 
+async function handleV2(req: NextApiRequest, res: NextApiResponse<V2Response>) {
+  const hostname = String(req?.headers?.host);
+  const { limit, offset } = req?.query;
+
+  const { domain, page: url_slug } = translateHostToPageIdentifier(hostname);
+
+  try {
+    const { page, settings } = await fetchRenderData(
+      String(domain || url_slug)
+    );
+
+    if (!page) {
+      res.status(404).json({ error: "Page not found" });
+      return;
+    }
+
+    if (!settings) {
+      res.status(404).json({ error: "Page settings not found" });
+      return;
+    }
+
+    const pageUrl = getPageUrl(page, settings);
+    const { posts, postsCount } = await fetchPostsWithPagination(
+      String(page?.id),
+      {
+        limit: limit ? Number(limit) : undefined,
+        offset: offset ? Number(offset) : undefined,
+      }
+    );
+
+    const postsWithUrl = (posts ?? []).map((post) => ({
+      ...post,
+      url: getPostUrl(pageUrl, post),
+      plain_text_content: convertMarkdownToPlainText(post.content),
+    }));
+
+    res.status(200).json({ posts: postsWithUrl, totalCount: postsCount });
+  } catch (e: unknown) {
+    console.log("Failed to fetch posts [V2 Error]", e);
+    res.status(500).json({ error: "Failed to fetch posts" });
+  }
+}
+
+async function handler(
+  req: NextApiRequest,
+  res: NextApiResponse<V1Response | V2Response>
+) {
+  await allowCors(req, res);
+
+  const apiVersion = req.headers["x-api-version"];
+
+  if (apiVersion === "2") {
+    return handleV2(req, res);
+  }
+
+  return handleV1(req, res);
+}
+
 export default handler;

apps/page/pages/api/latest.ts

@@ -1,5 +1,5 @@
-import { supabaseAdmin } from "@changes-page/supabase/admin";
-import { IPost } from "@changes-page/supabase/types/page";
+import { supabaseAdmin } from "@changespage/supabase/admin";
+import { IPost } from "@changespage/supabase/types/page";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { allowCors } from "../../lib/cors";
 import { fetchRenderData, translateHostToPageIdentifier } from "../../lib/data";

apps/page/pages/api/markdown.ts

@@ -1,4 +1,4 @@
-import { DateTime } from "@changes-page/utils";
+import { DateTime } from "@changespage/utils";
 import type { NextApiRequest, NextApiResponse } from "next";
 import {
   fetchPosts,

apps/page/pages/api/pa/view.ts

@@ -1,4 +1,4 @@
-import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { supabaseAdmin } from "@changespage/supabase/admin";
 import type { NextApiRequest, NextApiResponse } from "next";
 import UAParser from "ua-parser-js";
 import { v4 } from "uuid";

apps/page/pages/api/pinned.ts

@@ -1,5 +1,5 @@
-import { supabaseAdmin } from "@changes-page/supabase/admin";
-import { IPost } from "@changes-page/supabase/types/page";
+import { supabaseAdmin } from "@changespage/supabase/admin";
+import { IPost } from "@changespage/supabase/types/page";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { allowCors } from "../../lib/cors";
 import { fetchRenderData, translateHostToPageIdentifier } from "../../lib/data";

apps/page/pages/api/post/[id].ts

@@ -1,6 +1,6 @@
-import { supabaseAdmin } from "@changes-page/supabase/admin";
-import { IPost } from "@changes-page/supabase/types/page";
-import { convertMarkdownToPlainText } from "@changes-page/utils";
+import { supabaseAdmin } from "@changespage/supabase/admin";
+import { IPost } from "@changespage/supabase/types/page";
+import { convertMarkdownToPlainText } from "@changespage/utils";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { allowCors } from "../../../lib/cors";
 import {

apps/page/pages/api/post/react.ts

@@ -1,4 +1,4 @@
-import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { supabaseAdmin } from "@changespage/supabase/admin";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { v4 } from "uuid";
 import { getVisitorId } from "../../../lib/visitor-auth";

apps/page/pages/api/post/reactions.ts

@@ -1,4 +1,4 @@
-import { supabaseAdmin } from "@changes-page/supabase/admin";
+import { supabaseAdmin } from "@changespage/supabase/admin";
 import type { NextApiRequest, NextApiResponse } from "next";
 import { v4 } from "uuid";