* add /p/ segment to share urls

* minore fixes

apps/client/src/App.tsx

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

apps/client/src/features/page/components/breadcrumbs/breadcrumb.tsx

@@ -81,7 +81,7 @@ export default function Breadcrumb() {
 
   const renderAnchor = useCallback(
     (node: SpaceTreeNode) => (
-      <Tooltip label={node.name}>
+      <Tooltip label={node.name} key={node.id}>
         <Anchor
           component={Link}
           to={buildPageUrl(spaceSlug, node.slugId, node.name)}
@@ -141,7 +141,7 @@ export default function Breadcrumb() {
           position="bottom"
           withArrow
           shadow="xl"
-          key="hidden-nodes"
+          key="mobile-hidden-nodes"
         >
           <Popover.Target>
             <Tooltip label="Breadcrumbs">

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

@@ -32,5 +32,5 @@ export const buildSharedPageUrl = (opts: {
     return `/share/p/${buildPageSlug(pageSlugId, pageTitle)}`;
   }
 
-  return `/share/${shareId}/${buildPageSlug(pageSlugId, pageTitle)}`;
+  return `/share/${shareId}/p/${buildPageSlug(pageSlugId, pageTitle)}`;
 };

apps/client/src/features/share/components/share-modal.tsx

@@ -11,7 +11,7 @@ import {
   Tooltip,
 } from "@mantine/core";
 import { IconExternalLink, IconWorld } from "@tabler/icons-react";
-import React, { useEffect, useState } from "react";
+import React, { useEffect, useMemo, useState } from "react";
 import {
   useCreateShareMutation,
   useDeleteShareMutation,
@@ -43,7 +43,7 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
   // if level is greater than zero, then it is a descendant page from a shared page
   const isDescendantShared = share && share.level > 0;
 
-  const publicLink = `${getAppUrl()}/share/${share?.key}/${pageSlug}`;
+  const publicLink = `${getAppUrl()}/share/${share?.key}/p/${pageSlug}`;
 
   const [isPagePublic, setIsPagePublic] = useState<boolean>(false);
   useEffect(() => {
@@ -92,6 +92,27 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
     });
   };
 
+  const shareLink = useMemo(() => (
+    <Group my="sm" gap={4} wrap="nowrap">
+      <TextInput
+        variant="filled"
+        value={publicLink}
+        readOnly
+        rightSection={<CopyTextButton text={publicLink} />}
+        style={{ width: "100%" }}
+      />
+      <ActionIcon
+        component="a"
+        variant="default"
+        target="_blank"
+        href={publicLink}
+        size="sm"
+      >
+        <IconExternalLink size={16} />
+      </ActionIcon>
+    </Group>
+  ), [publicLink]);
+
   return (
     <Popover width={350} position="bottom" withArrow shadow="md">
       <Popover.Target>
@@ -110,7 +131,7 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
           }
           variant="default"
         >
-          Share
+          {t("Share")}
         </Button>
       </Popover.Target>
       <Popover.Dropdown style={{ userSelect: "none" }}>
@@ -141,14 +162,7 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
               </Group>
             </Anchor>
 
-            <Group my="sm" grow>
+            {shareLink}
-              <TextInput
-                variant="filled"
-                value={publicLink}
-                readOnly
-                rightSection={<CopyTextButton text={publicLink} />}
-              />
-            </Group>
           </>
         ) : (
           <>
@@ -173,25 +187,7 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
 
             {pageIsShared && (
               <>
-                <Group my="sm" gap={4} wrap="nowrap">
+                {shareLink}
-                  <TextInput
-                    variant="filled"
-                    value={publicLink}
-                    readOnly
-                    rightSection={<CopyTextButton text={publicLink} />}
-                    style={{ width: "100%" }}
-                  />
-                  <ActionIcon
-                    component="a"
-                    variant="default"
-                    target="_blank"
-                    href={publicLink}
-                    size="sm"
-                  >
-                    <IconExternalLink size={16} />
-                  </ActionIcon>
-                </Group>
-
                 <Group justify="space-between" wrap="nowrap" gap="xl">
                   <div>
                     <Text size="sm">{t("Include sub-pages")}</Text>
@@ -207,7 +203,6 @@ export default function ShareModal({ readOnly }: ShareModalProps) {
                     disabled={readOnly}
                   />
                 </Group>
-
                 <Group justify="space-between" wrap="nowrap" gap="xl" mt="sm">
                   <div>
                     <Text size="sm">{t("Search engine indexing")}</Text>

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

@@ -21,7 +21,7 @@ export default function SingleSharedPage() {
   useEffect(() => {
     if (shareId && data) {
       if (data.share.key !== shareId) {
-        navigate(`/share/${data.share.key}/${pageSlug}`, { replace: true });
+        navigate(`/share/${data.share.key}/p/${pageSlug}`, { replace: true });
       }
     }
   }, [shareId, data]);

apps/server/src/core/share/share-seo.controller.ts

@@ -19,7 +19,7 @@ export class ShareSeoController {
   /*
    * add meta tags to publicly shared pages
    */
-  @Get([':shareId/:pageSlug', 'p/:pageSlug'])
+  @Get([':shareId/p/:pageSlug', 'p/:pageSlug'])
   async getShare(
     @Res({ passthrough: false }) res: FastifyReply,
     @Req() req: FastifyRequest,

apps/server/src/main.ts

@@ -32,7 +32,7 @@ async function bootstrap() {
   );
 
   app.setGlobalPrefix('api', {
-    exclude: ['robots.txt', 'share/:shareId/:pageSlug'],
+    exclude: ['robots.txt', 'share/:shareId/p/:pageSlug'],
   });
 
   const reflector = app.get(Reflector);