WIP

apps/client/src/App.tsx

@@ -52,7 +52,7 @@ export default function App() {
           </>
         )}
 
-        <Route path={"/share/:shareId/:pageId"} element={<SharedPage />} />
+        <Route path={"/share/:shareId/:pageSlug"} element={<SharedPage />} />
 
         <Route path={"/p/:pageSlug"} element={<PageRedirect />} />
 

apps/client/src/features/editor/components/mention/mention-view.tsx

@@ -3,19 +3,29 @@ import { ActionIcon, Anchor, Text } from "@mantine/core";
 import { IconFileDescription } from "@tabler/icons-react";
 import { Link, useParams } from "react-router-dom";
 import { usePageQuery } from "@/features/page/queries/page-query.ts";
-import { buildPageUrl } from "@/features/page/page.utils.ts";
+import {
+  buildPageUrl,
+  buildSharedPageUrl,
+} from "@/features/page/page.utils.ts";
 import classes from "./mention.module.css";
 
 export default function MentionView(props: NodeViewProps) {
   const { node } = props;
   const { label, entityType, entityId, slugId } = node.attrs;
   const { spaceSlug } = useParams();
+  const { shareId } = useParams();
   const {
     data: page,
     isLoading,
     isError,
   } = usePageQuery({ pageId: entityType === "page" ? slugId : null });
 
+  const shareSlugUrl = buildSharedPageUrl({
+    shareId,
+    pageSlugId: slugId,
+    pageTitle: label,
+  });
+
   return (
     <NodeViewWrapper style={{ display: "inline" }}>
       {entityType === "user" && (
@@ -28,7 +38,7 @@ export default function MentionView(props: NodeViewProps) {
         <Anchor
           component={Link}
           fw={500}
-          to={buildPageUrl(spaceSlug, slugId, label)}
+          to={shareId ? shareSlugUrl : buildPageUrl(spaceSlug, slugId, label)}
           underline="never"
           className={classes.pageMentionLink}
         >

apps/client/src/features/page/page.utils.ts

@@ -1,6 +1,9 @@
 import slugify from "@sindresorhus/slugify";
 
-export const buildPageSlug = (pageSlugId: string, pageTitle?: string): string => {
+export const buildPageSlug = (
+  pageSlugId: string,
+  pageTitle?: string,
+): string => {
   const titleSlug = slugify(pageTitle?.substring(0, 70) || "untitled", {
     customReplacements: [
       ["♥", ""],
@@ -21,3 +24,12 @@ export const buildPageUrl = (
   }
   return `/s/${spaceName}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
 };
+
+export const buildSharedPageUrl = (opts: {
+  shareId: string;
+  pageSlugId: string;
+  pageTitle?: string;
+}): string => {
+  const { shareId, pageSlugId, pageTitle } = opts;
+  return `/share/${shareId}/${buildPageSlug(pageSlugId, pageTitle)}`;
+};

apps/client/src/features/share/queries/share-query.ts

@@ -8,22 +8,22 @@ import { validate as isValidUuid } from "uuid";
 import { useTranslation } from "react-i18next";
 import {
   ICreateShare,
-  IShareInput,
+  IShareInfoInput,
 } from "@/features/share/types/share.types.ts";
 import {
   createShare,
   deleteShare,
-  getShare,
+  getShareInfo,
   updateShare,
 } from "@/features/share/services/share-service.ts";
 import { IPage } from "@/features/page/types/page.types.ts";
 
 export function useShareQuery(
-  shareInput: Partial<IShareInput>,
+  shareInput: Partial<IShareInfoInput>,
 ): UseQueryResult<IPage, Error> {
   const query = useQuery({
     queryKey: ["shares", shareInput],
-    queryFn: () => getShare(shareInput),
+    queryFn: () => getShareInfo(shareInput),
     enabled: !!shareInput.shareId,
     staleTime: 5 * 60 * 1000,
   });
@@ -43,7 +43,7 @@ export function useCreateShareMutation() {
 }
 
 export function useUpdateShareMutation() {
-  return useMutation<any, Error, Partial<IShareInput>>({
+  return useMutation<any, Error, Partial<IShareInfoInput>>({
     mutationFn: (data) => updateShare(data),
   });
 }

apps/client/src/features/share/services/share-service.ts

@@ -1,17 +1,9 @@
 import api from "@/lib/api-client";
-import {
-  IExportPageParams,
-  IMovePage,
-  IMovePageToSpace,
-  IPage,
-  IPageInput,
-  SidebarPagesParams,
-} from "@/features/page/types/page.types";
-import { IAttachment, IPagination } from "@/lib/types.ts";
-import { saveAs } from "file-saver";
+import { IPage } from "@/features/page/types/page.types";
+
 import {
   ICreateShare,
-  IShareInput,
+  IShareInfoInput,
 } from "@/features/share/types/share.types.ts";
 
 export async function createShare(data: ICreateShare): Promise<any> {
@@ -19,14 +11,16 @@ export async function createShare(data: ICreateShare): Promise<any> {
   return req.data;
 }
 
-export async function getShare(
-  shareInput: Partial<IShareInput>,
+export async function getShareInfo(
+  shareInput: Partial<IShareInfoInput>,
 ): Promise<IPage> {
   const req = await api.post<IPage>("/shares/info", shareInput);
   return req.data;
 }
 
-export async function updateShare(data: Partial<IShareInput>): Promise<any> {
+export async function updateShare(
+  data: Partial<IShareInfoInput>,
+): Promise<any> {
   const req = await api.post<IPage>("/shares/update", data);
   return req.data;
 }

apps/client/src/features/share/types/share.types.ts

@@ -1,12 +1,10 @@
-
 export interface ICreateShare {
-  slugId: string;
+  slugId: string; // share slugId
+  pageId: string;
+  includeSubPages?: boolean;
+}
+
+export interface IShareInfoInput {
+  shareId: string;
   pageId: string;
 }
-
-
-export interface IShareInput {
-  shareId: string;
-  pageId?: string;
-}
-

apps/client/src/pages/share/shared-page.tsx

@@ -1,29 +1,23 @@
-import { useNavigate, useParams } from "react-router-dom";
+import { useParams } from "react-router-dom";
 import { Helmet } from "react-helmet-async";
 import { useTranslation } from "react-i18next";
 import { useShareQuery } from "@/features/share/queries/share-query.ts";
 import { Container } from "@mantine/core";
-import React, { useEffect } from "react";
+import React from "react";
 import ReadonlyPageEditor from "@/features/editor/readonly-page-editor.tsx";
-import { buildPageSlug } from "@/features/page/page.utils.ts";
+import { extractPageSlugId } from "@/lib";
 
 export default function SharedPage() {
   const { t } = useTranslation();
   const { shareId } = useParams();
+  const { pageSlug } = useParams();
+
   const {
     data: page,
     isLoading,
     isError,
     error,
-  } = useShareQuery({ shareId: shareId });
-  const navigate = useNavigate();
-
-  useEffect(() => {
-    if (!page) return;
-    const pageSlug = buildPageSlug(page.slugId, page.title);
-    const shareSlug = `/share/${shareId}/${pageSlug}`;
-    navigate(shareSlug, { replace: true });
-  }, [page]);
+  } = useShareQuery({ shareId: shareId, pageId: extractPageSlugId(pageSlug) });
 
   if (isLoading) {
     return <></>;