sinvo/docmost
1
0
Fork 0
mirror of https://github.com/docmost/docmost.git synced 2026-09-11 07:56:54 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat(beta): public spaces

Browse Source
This commit is contained in:
Philipinho
2026-09-05 11:25:50 +01:00
parent 5b85464561
commit a12bf42078
117 changed files with 7593 additions and 716 deletions
Download Patch File Download Diff File Expand all files Collapse all files
apps/client/package.json
+1
View File
@@ -21,6 +21,7 @@
"@docmost/base-formula": "workspace:*",
"@docmost/editor-ext": "workspace:*",
"@excalidraw/excalidraw": "0.18.0-3a5ef40",
"@fontsource-variable/inter": "5.3.0",
"@mantine/core": "9.3.2",
"@mantine/dates": "9.3.2",
"@mantine/form": "9.3.2",
apps/client/public/locales/en-US/translation.json
+78 -1
View File
@@ -1337,5 +1337,82 @@
"AI Chat can search and read workspace content, but cannot create or edit pages.": "AI Chat can search and read workspace content, but cannot create or edit pages.",
"Toggle AI Chat read-only mode": "Toggle AI Chat read-only mode",
"Title only": "Title only",
"you": "you"
"you": "you",
"Allow public spaces": "Allow public spaces",
"Space admins can publish their spaces to the web.": "Space admins can publish their spaces to the web.",
"Toggle allow public spaces": "Toggle allow public spaces",
"Publish space to the web": "Publish space to the web",
"Anyone on the internet will be able to read every page in this space, except restricted pages. Are you sure?": "Anyone on the internet will be able to read every page in this space, except restricted pages. Are you sure?",
"Make this space publicly readable by anyone on the internet.": "Make this space publicly readable by anyone on the internet.",
"Toggle publish space to the web": "Toggle publish space to the web",
"Allow search engines to index": "Allow search engines to index",
"Let public pages in this space appear in search engine results.": "Let public pages in this space appear in search engine results.",
"Toggle search engine indexing": "Toggle search engine indexing",
"Public space link": "Public space link",
"Copy public space link": "Copy public space link",
"Renaming the space slug will break public links.": "Renaming the space slug will break public links.",
"Failed to update space": "Failed to update space",
"This space is public": "This space is public",
"Anyone on the internet can read the pages in this space, except restricted pages.": "Anyone on the internet can read the pages in this space, except restricted pages.",
"Open public site": "Open public site",
"Public": "Public",
"This space has no public pages yet.": "This space has no public pages yet.",
"On this page": "On this page",
"Previous": "Previous",
"Next": "Next",
"Show hidden pages": "Show hidden pages",
"Page navigation": "Page navigation",
"Toggle sidebar": "Toggle sidebar",
"Toggle table of contents": "Toggle table of contents",
"Appearance": "Appearance",
"Forest": "Forest",
"Violet": "Violet",
"Light mode color": "Light mode color",
"Dark mode color": "Dark mode color",
"Choose the primary color of the public docs site.": "Choose the primary color of the public docs site.",
"Show page author": "Show page author",
"Display the page creator's name on public pages.": "Display the page creator's name on public pages.",
"Toggle show page author": "Toggle show page author",
"Show last updated": "Show last updated",
"Display when each page was last updated.": "Display when each page was last updated.",
"Toggle show last updated": "Toggle show last updated",
"Open public page": "Open public page",
"Toggle color scheme": "Toggle color scheme",
"Ember": "Ember",
"Rose": "Rose",
"Documentation": "Documentation",
"All published spaces.": "All published spaces.",
"No public spaces yet.": "No public spaces yet.",
"Show public directory": "Show public directory",
"List published spaces at /docs for anyone to browse.": "List published spaces at /docs for anyone to browse.",
"Toggle show public directory": "Toggle show public directory",
"Show in public directory": "Show in public directory",
"List this space in the public directory at /docs.": "List this space in the public directory at /docs.",
"Toggle show in public directory": "Toggle show in public directory",
"Open public space link": "Open public space link",
"Disable public spaces": "Disable public spaces",
"Space admins will be able to make their spaces publicly readable by anyone on the internet. Are you sure?": "Space admins will be able to make their spaces publicly readable by anyone on the internet. Are you sure?",
"This will immediately unpublish every published space. Re-enabling later will not republish them. Are you sure?": "This will immediately unpublish every published space. Re-enabling later will not republish them. Are you sure?",
"Allow": "Allow",
"Shared pages": "Shared pages",
"Published spaces": "Published spaces",
"Spaces published to the web will appear here": "Spaces published to the web will appear here",
"No published spaces": "No published spaces",
"Published by": "Published by",
"Published at": "Published at",
"Open space": "Open space",
"Unpublish": "Unpublish",
"Unpublish space": "Unpublish space",
"This space will no longer be publicly accessible. Are you sure?": "This space will no longer be publicly accessible. Are you sure?",
"More options for {{name}}": "More options for {{name}}",
"Edit page": "Edit page",
"Sign in": "Sign in",
"Open app": "Open app",
"No spaces match your search.": "No spaces match your search.",
"Welcome to our documentation": "Welcome to our documentation",
"Guides, references and answers across all our published spaces.": "Guides, references and answers across all our published spaces.",
"Guides, references and answers across all our spaces.": "Guides, references and answers across all our spaces.",
"Search documentation...": "Search documentation...",
"1 published space": "1 published space",
"{{count}} published spaces": "{{count}} published spaces"
}
apps/client/src/App.tsx
+18
View File
@@ -44,6 +44,15 @@ const ShareLayout = lazy(
() => import("@/features/share/components/share-layout.tsx"),
);
const ShareRedirect = lazy(() => import("@/pages/share/share-redirect.tsx"));
const PublicSpacePage = lazy(
() => import("@/pages/public-space/public-space-page.tsx"),
);
const PublicSpaceLayout = lazy(
() => import("@/features/public-space/components/public-space-layout.tsx"),
);
const PublicSpaceDirectoryPage = lazy(
() => import("@/pages/public-space/public-space-directory-page.tsx"),
);
const SpacesPage = lazy(() => import("@/pages/spaces/spaces.tsx"));
const MfaChallengePage = lazy(() =>
import("@/ee/mfa/pages/mfa-challenge-page").then((m) => ({
@@ -119,6 +128,15 @@ export default function App() {
<Route path={"/share/p/:pageSlug"} element={<SharedPage />} />
</Route>
<Route path={"/docs"} element={<PublicSpaceDirectoryPage />} />
<Route element={<PublicSpaceLayout />}>
<Route path={"/docs/:spaceSlug"} element={<PublicSpacePage />} />
<Route
path={"/docs/:spaceSlug/:pageSlug"}
element={<PublicSpacePage />}
/>
</Route>
<Route path={"/pdf-render/:pageId"} element={<PdfRenderPage />} />
<Route path={"/share/:shareId"} element={<ShareRedirect />} />
<Route path={"/p/:pageSlug"} element={<PageRedirect />} />
apps/client/src/ee/features.ts
+1
View File
@@ -25,4 +25,5 @@ export const Feature = {
OAUTH: 'oauth',
AI_CONTROLS: 'ai:controls',
MCP_CONTROLS: 'mcp:controls',
PUBLIC_SPACE_APPEARANCE: 'public-space:appearance',
} as const;
apps/client/src/ee/security/components/space-public-sharing-toggle.tsx
+1
View File
@@ -82,6 +82,7 @@ export default function SpacePublicSharingToggle({
checked={checked}
onChange={handleChange}
disabled={isDisabled}
size={"xs"}
aria-label={t("Toggle space public sharing")}
/>
</Tooltip>
apps/client/src/ee/security/components/space-viewer-comments-toggle.tsx
+1
View File
@@ -53,6 +53,7 @@ export default function SpaceViewerCommentsToggle({
checked={checked}
onChange={handleChange}
disabled={isDisabled}
size={"xs"}
aria-label={t("Toggle viewer comments")}
/>
</Tooltip>
apps/client/src/features/editor/components/audio/audio-menu.tsx
+3
View File
@@ -85,6 +85,9 @@ export function AudioMenu({ editor }: EditorMenuProps) {
<BaseBubbleMenu
editor={editor}
pluginKey={`audio-menu`}
ref={(element) => {
if (element) element.style.zIndex = "99";
}}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
apps/client/src/features/editor/components/callout/callout-menu.tsx
+3 -1
View File
@@ -121,12 +121,14 @@ export function CalloutMenu({ editor }: EditorMenuProps) {
<BaseBubbleMenu
editor={editor}
pluginKey={`callout-menu`}
ref={(element) => {
if (element) element.style.zIndex = "99";
}}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
placement: "bottom",
// offset: 233, // // offset: [0, 10],
// zIndex: 99,
flip: false,
}}
shouldShow={shouldShow}
apps/client/src/features/editor/components/columns/columns-menu.tsx
+3
View File
@@ -257,6 +257,9 @@ export function ColumnsMenu({ editor }: EditorMenuProps) {
<BaseBubbleMenu
editor={editor}
pluginKey="columns-menu"
ref={(element) => {
if (element) element.style.zIndex = "99";
}}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
apps/client/src/features/editor/components/drawio/drawio-menu.tsx
+3
View File
@@ -273,6 +273,9 @@ export function DrawioMenu({ editor }: EditorMenuProps) {
<BaseBubbleMenu
editor={editor}
pluginKey={`drawio-menu`}
ref={(element) => {
if (element) element.style.zIndex = "99";
}}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
apps/client/src/features/editor/components/image/image-menu.tsx
+3
View File
@@ -156,6 +156,9 @@ export function ImageMenu({ editor }: EditorMenuProps) {
<BaseBubbleMenu
editor={editor}
pluginKey={`image-menu`}
ref={(element) => {
if (element) element.style.zIndex = "99";
}}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
apps/client/src/features/editor/components/link/link-view.tsx
+74 -11
View File
@@ -26,7 +26,12 @@ import { INTERNAL_LINK_REGEX } from "@/lib/constants";
import { LinkEditorPanel } from "@/features/editor/components/link/link-editor-panel.tsx";
import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
import { usePublicSpacePageQuery } from "@/features/public-space/queries/public-space-query.ts";
import {
buildPageUrl,
buildPublicSpaceUrl,
buildSharedPageUrl,
} from "@/features/page/page.utils.ts";
import { extractPageSlugId } from "@/lib";
import { sanitizeUrl, copyToClipboard, isEditorReady } from "@docmost/editor-ext";
import { normalizeUrl } from "@/lib/utils";
@@ -60,9 +65,10 @@ export default function LinkView(props: MarkViewProps) {
const href = mark.attrs.href as string;
const navigate = useNavigate();
const location = useLocation();
const { shareId, pageSlug } = useParams();
const { shareId, spaceSlug, pageSlug } = useParams();
const { t } = useTranslation();
const isShareRoute = location.pathname.startsWith("/share");
const isPublicSpaceRoute = location.pathname.startsWith("/docs/");
const [popoverState, setPopoverState] = useState<
"closed" | "preview" | "edit"
@@ -84,16 +90,33 @@ export default function LinkView(props: MarkViewProps) {
const activeView = isPopoverVisible ? popoverState : lastOpenState.current;
const { data: linkedPage } = usePageQuery({
pageId: isPopoverVisible && slugId && !isShareRoute ? slugId : null,
pageId:
isPopoverVisible && slugId && !isShareRoute && !isPublicSpaceRoute
? slugId
: null,
});
const { data: sharedPageData } = useSharePageQuery({
pageId: isPopoverVisible && slugId && isShareRoute ? slugId : null,
});
const pageTitle = isShareRoute
? sharedPageData?.page?.title
: linkedPage?.title;
// Resolved eagerly (not gated on the popover): an unresolvable target must
// render as inert text rather than a link that dead-ends at /login.
const { data: publicSpacePageData } = usePublicSpacePageQuery({
spaceSlug: isPublicSpaceRoute && slugId ? spaceSlug : undefined,
pageSlugId: slugId,
contentless: true,
});
const isUnresolvedPublicLink =
isPublicSpaceRoute && isInternal && !publicSpacePageData?.page && !slugId;
let pageTitle = linkedPage?.title;
if (isShareRoute) {
pageTitle = sharedPageData?.page?.title;
} else if (isPublicSpaceRoute) {
pageTitle = publicSpacePageData?.page?.title;
}
const pendingTitleRef = useRef<string | null>(null);
const titleInputRef = useRef<HTMLInputElement>(null);
@@ -260,6 +283,27 @@ export default function LinkView(props: MarkViewProps) {
anchorId: anchor || undefined,
});
navigate(sharedUrl);
} else if (isPublicSpaceRoute) {
if (slugId && publicSpacePageData?.page) {
navigate(
buildPublicSpaceUrl({
// cross-space targets resolve to their own space's public URL
spaceSlug: publicSpacePageData.space?.slug ?? spaceSlug,
pageSlugId: slugId,
pageTitle: pageTitle,
anchorId: anchor || undefined,
}),
);
} else if (slugId) {
// no public URL: the /p/ resolver redirects members straight to the
// page and funnels anonymous visitors through login first; a new tab
// keeps the docs tab's history intact through that redirect chain
window.open(
buildPageUrl(undefined, slugId, pageTitle, anchor || undefined),
"_blank",
"noopener,noreferrer",
);
}
} else {
navigate(anchor ? `${targetPath}#${anchor}` : targetPath);
}
@@ -276,8 +320,11 @@ export default function LinkView(props: MarkViewProps) {
location.pathname,
isInternal,
isShareRoute,
isPublicSpaceRoute,
slugId,
shareId,
spaceSlug,
publicSpacePageData,
pageTitle,
pageSlug,
]);
@@ -319,12 +366,18 @@ export default function LinkView(props: MarkViewProps) {
setPopoverState("closed");
}, [editor]);
const internalHref = () => {
if (isShareRoute && slugId) {
return buildSharedPageUrl({ shareId, pageSlugId: slugId, pageTitle });
}
if (isPublicSpaceRoute && slugId && publicSpacePageData?.page) {
return buildPublicSpaceUrl({ spaceSlug, pageSlugId: slugId, pageTitle });
}
return href;
};
const displayHref = sanitizeUrl(
isInternal
? isShareRoute && slugId
? buildSharedPageUrl({ shareId, pageSlugId: slugId, pageTitle })
: href
: normalizeUrl(href),
isInternal ? internalHref() : normalizeUrl(href),
);
const linkTitleInput = (
@@ -374,6 +427,16 @@ export default function LinkView(props: MarkViewProps) {
</>
);
// Targets outside the published space have no public URL, so the label is
// rendered as inert text instead of a link that dead-ends at /login.
if (isUnresolvedPublicLink) {
return (
<span ref={wrapperRef} className={classes.linkWrapper}>
<MarkViewContent />
</span>
);
}
return (
<Popover
opened={isPopoverVisible}
apps/client/src/features/editor/components/mention/mention-view.tsx
+72 -3
View File
@@ -4,8 +4,10 @@ import { IconFileDescription } from "@tabler/icons-react";
import { Link, useLocation, useNavigate, useParams } from "react-router-dom";
import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
import { usePublicSpacePageQuery } from "@/features/public-space/queries/public-space-query.ts";
import {
buildPageUrl,
buildPublicSpaceUrl,
buildSharedPageUrl,
} from "@/features/page/page.utils.ts";
import { extractPageSlugId } from "@/lib";
@@ -21,17 +23,30 @@ export default function MentionView(props: NodeViewProps) {
const location = useLocation();
const isShareRoute = location.pathname.startsWith("/share");
const isPublicSpaceRoute = location.pathname.startsWith("/docs/");
const {
data: page,
isLoading,
isError,
} = usePageQuery({ pageId: isPageMention && !isShareRoute ? slugId : null });
} = usePageQuery({
pageId:
isPageMention && !isShareRoute && !isPublicSpaceRoute ? slugId : null,
});
const { data: sharedPage } = useSharePageQuery({
pageId: isPageMention && isShareRoute ? slugId : undefined,
});
// Without the slugId guard the request resolves to the space home, which
// would render a mention pointing at the wrong page.
const { data: publicPageData } = usePublicSpacePageQuery({
spaceSlug:
isPageMention && isPublicSpaceRoute && slugId ? spaceSlug : undefined,
pageSlugId: slugId,
contentless: true,
});
const currentPageSlugId = extractPageSlugId(pageSlug);
const isSamePage = currentPageSlugId === slugId;
@@ -87,7 +102,61 @@ export default function MentionView(props: NodeViewProps) {
</Anchor>
)}
{isPageMention && !isShareRoute && isError && (
{isPageMention && isPublicSpaceRoute && publicPageData?.page && (
<Anchor
component={Link}
fw={500}
to={buildPublicSpaceUrl({
spaceSlug: publicPageData.space?.slug ?? spaceSlug,
pageSlugId: slugId,
pageTitle: publicPageData.page.title || label,
anchorId,
})}
onClick={handleClick}
underline="never"
className={classes.pageMentionLink}
>
<ActionIcon
variant="transparent"
color="gray"
component="span"
size={18}
style={{ verticalAlign: "text-bottom" }}
>
<IconFileDescription size={18} />
</ActionIcon>
<span className={classes.pageMentionText}>
{publicPageData.page.title || label}
</span>
</Anchor>
)}
{/* No public URL: the /p/ resolver redirects members to the page and
funnels anonymous visitors through login first. New tab, so the
redirect chain never rewrites the docs tab's history. */}
{isPageMention && isPublicSpaceRoute && !publicPageData?.page && (
<Anchor
fw={500}
href={buildPageUrl(undefined, slugId, label, anchorId)}
target="_blank"
rel="noopener noreferrer"
underline="never"
className={classes.pageMentionLink}
>
<ActionIcon
variant="transparent"
color="gray"
component="span"
size={18}
style={{ verticalAlign: "text-bottom" }}
>
<IconFileDescription size={18} />
</ActionIcon>
<span className={classes.pageMentionText}>{label}</span>
</Anchor>
)}
{isPageMention && !isShareRoute && !isPublicSpaceRoute && isError && (
<Anchor
component={Link}
fw={500}
@@ -111,7 +180,7 @@ export default function MentionView(props: NodeViewProps) {
</Anchor>
)}
{isPageMention && !isShareRoute && !isError && (
{isPageMention && !isShareRoute && !isPublicSpaceRoute && !isError && (
<Anchor
component={Link}
fw={500}
apps/client/src/features/editor/components/pdf/pdf-menu.tsx
+3
View File
@@ -106,6 +106,9 @@ export function PdfMenu({ editor }: EditorMenuProps) {
<BaseBubbleMenu
editor={editor}
pluginKey={`pdf-menu`}
ref={(element) => {
if (element) element.style.zIndex = "99";
}}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
apps/client/src/features/editor/components/subpages/subpages-menu.tsx
+3
View File
@@ -61,6 +61,9 @@ export const SubpagesMenu = React.memo(
<BaseBubbleMenu
editor={editor}
pluginKey={`subpages-menu`}
ref={(element) => {
if (element) element.style.zIndex = "99";
}}
updateDelay={0}
shouldShow={shouldShow}
>
apps/client/src/features/editor/components/subpages/subpages-view.tsx
+50 -6
View File
@@ -3,22 +3,30 @@ import { Stack, Text, Anchor, ActionIcon } from "@mantine/core";
import { IconFileDescription } from "@tabler/icons-react";
import { useGetSidebarPagesQuery } from "@/features/page/queries/page-query";
import { useMemo } from "react";
import { Link, useParams } from "react-router-dom";
import { Link, useLocation, useParams } from "react-router-dom";
import classes from "./subpages.module.css";
import styles from "../mention/mention.module.css";
import {
buildPageUrl,
buildPublicSpaceUrl,
buildSharedPageUrl,
} from "@/features/page/page.utils.ts";
import { useTranslation } from "react-i18next";
import { sortPositionKeys } from "@/features/page/tree/utils/utils";
import { useSharedPageSubpages } from "@/features/share/hooks/use-shared-page-subpages";
import { useAtomValue } from "jotai";
import { publicSpaceTreeDataAtom } from "@/features/public-space/atoms/public-space-atoms.ts";
import { findSubpagesInTree } from "@/features/share/utils";
import { extractPageSlugId } from "@/lib";
export default function SubpagesView(props: NodeViewProps) {
const { editor } = props;
const { spaceSlug, shareId, pageSlug } = useParams();
const { t } = useTranslation();
const location = useLocation();
const isPublicSpaceRoute = location.pathname.startsWith("/docs/");
const publicSpaceTreeData = useAtomValue(publicSpaceTreeDataAtom);
// @ts-ignore
const storagePageId = editor.storage.pageId;
@@ -29,11 +37,25 @@ export default function SubpagesView(props: NodeViewProps) {
currentPageId = routePageId;
}
// Public docs must resolve the page from the route, not editor storage:
// storage.pageId is set after this view's first render and is not reactive,
// which froze the list at "No subpages" until something re-rendered it. The
// space home renders at the bare URL, so it falls back to the first root.
if (isPublicSpaceRoute) {
currentPageId = routePageId ?? publicSpaceTreeData?.[0]?.slugId;
}
// Get subpages from shared tree if we're in a shared context
const sharedSubpages = useSharedPageSubpages(currentPageId);
const publicSpaceSubpages = useMemo(
() => findSubpagesInTree(publicSpaceTreeData, currentPageId),
[publicSpaceTreeData, currentPageId],
);
const isPublicView = Boolean(shareId) || isPublicSpaceRoute;
const { data, isLoading, error } = useGetSidebarPagesQuery(
shareId ? null : { pageId: currentPageId },
isPublicView ? null : { pageId: currentPageId },
);
const subpages = useMemo(() => {
@@ -48,17 +70,33 @@ export default function SubpagesView(props: NodeViewProps) {
}));
}
if (isPublicSpaceRoute) {
return publicSpaceSubpages.map((node) => ({
id: node.value,
slugId: node.slugId,
title: node.name,
icon: node.icon,
position: node.position,
}));
}
// Otherwise use the API data
if (!data?.pages) return [];
const allPages = data.pages.flatMap((page) => page.items);
return sortPositionKeys(allPages);
}, [data, shareId, sharedSubpages]);
}, [
data,
shareId,
sharedSubpages,
isPublicSpaceRoute,
publicSpaceSubpages,
]);
if (isLoading && !shareId) {
if (isLoading && !isPublicView) {
return null;
}
if (error && !shareId) {
if (error && !isPublicView) {
return (
<NodeViewWrapper data-drag-handle>
<Text c="dimmed" size="md" py="md">
@@ -96,7 +134,13 @@ export default function SubpagesView(props: NodeViewProps) {
pageSlugId: page.slugId,
pageTitle: page.title,
})
: buildPageUrl(spaceSlug, page.slugId, page.title)
: isPublicSpaceRoute
? buildPublicSpaceUrl({
spaceSlug,
pageSlugId: page.slugId,
pageTitle: page.title,
})
: buildPageUrl(spaceSlug, page.slugId, page.title)
}
underline="never"
className={styles.pageMentionLink}
apps/client/src/features/editor/components/table-of-contents/table-of-contents.tsx
+1 -1
View File
@@ -18,7 +18,7 @@ export type HeadingLink = {
position: number;
};
const recalculateLinks = (nodePos: NodePos[]) => {
export const recalculateLinks = (nodePos: NodePos[]) => {
const nodes: HTMLElement[] = [];
const links: HeadingLink[] = Array.from(nodePos).reduce<HeadingLink[]>(
apps/client/src/features/editor/components/transclusion/transclusion-lookup-context.tsx
+16 -1
View File
@@ -9,6 +9,7 @@ import React, {
} from "react";
import {
lookupTransclusion,
lookupTransclusionForPublicSpace,
lookupTransclusionForShare,
} from "@/features/transclusion/services/transclusion-api";
import type { TransclusionLookup } from "@/features/transclusion/types/transclusion.types";
@@ -38,6 +39,7 @@ const TransclusionLookupContext = createContext<ContextValue | null>(null);
export function TransclusionLookupProvider({
children,
shareId,
spaceSlug,
}: {
children: React.ReactNode;
/**
@@ -47,6 +49,11 @@ export function TransclusionLookupProvider({
* app, where personal permissions gate access.
*/
shareId?: string;
/**
* When set, lookups go through the public-space endpoint and are gated by
* the published space. Used by the public docs viewer.
*/
spaceSlug?: string;
}) {
const subscribersRef = useRef(new Map<LookupKey, Subscriber[]>());
const queueRef = useRef(new Set<LookupKey>());
@@ -55,6 +62,8 @@ export function TransclusionLookupProvider({
// memoized callbacks (and thus doesn't re-render every consumer).
const shareIdRef = useRef<string | undefined>(shareId);
shareIdRef.current = shareId;
const spaceSlugRef = useRef<string | undefined>(spaceSlug);
spaceSlugRef.current = spaceSlug;
// Last looked-up value for each key. Re-subscribers (e.g. when the editor
// remounts after switching from static to live) get this immediately
// instead of triggering a duplicate fetch.
@@ -91,12 +100,18 @@ export function TransclusionLookupProvider({
try {
const activeShareId = shareIdRef.current;
const activeSpaceSlug = spaceSlugRef.current;
const { items } = activeShareId
? await lookupTransclusionForShare({
shareId: activeShareId,
references,
})
: await lookupTransclusion({ references });
: activeSpaceSlug
? await lookupTransclusionForPublicSpace({
spaceSlug: activeSpaceSlug,
references,
})
: await lookupTransclusion({ references });
for (const r of items) {
const key = `${r.sourcePageId}::${r.transclusionId}`;
resultCacheRef.current.set(key, r);
apps/client/src/features/editor/components/video/video-menu.tsx
+3
View File
@@ -132,6 +132,9 @@ export function VideoMenu({ editor }: EditorMenuProps) {
<BaseBubbleMenu
editor={editor}
pluginKey={`video-menu`}
ref={(element) => {
if (element) element.style.zIndex = "99";
}}
updateDelay={0}
getReferencedVirtualElement={getReferencedVirtualElement}
options={{
apps/client/src/features/editor/readonly-page-editor.tsx
+22 -6
View File
@@ -35,6 +35,16 @@ interface PageEditorProps {
* that isn't itself shared.
*/
shareId?: string;
/**
* When rendering inside a public space, pass the space slug. Transclusion
* lookups then resolve against the published space instead of the viewer's
* personal permissions.
*/
spaceSlug?: string;
/** Rendered between the title and the content. */
byline?: React.ReactNode;
/** Set false when the consumer renders its own end matter (e.g. prev/next). */
trailingSpace?: boolean;
}
export default function ReadonlyPageEditor({
@@ -43,12 +53,16 @@ export default function ReadonlyPageEditor({
pageId,
printMode = false,
shareId,
spaceSlug,
byline,
trailingSpace = true,
}: PageEditorProps) {
const [, setReadOnlyEditor] = useAtom(readOnlyEditorAtom);
const [lightboxRequest, setLightboxRequest] = useAtom(lightboxRequestAtom);
const [contentEditor, setContentEditor] = useState<Editor | null>(null);
const isComponentMounted = useRef(false);
const editorCreated = useRef(false);
const isPublicView = Boolean(shareId || spaceSlug);
const canScroll = useCallback(
() => isComponentMounted.current && editorCreated.current,
@@ -64,9 +78,9 @@ export default function ReadonlyPageEditor({
}, []);
useEffect(() => {
if (!shareId) return;
if (!isPublicView) return;
setLightboxRequest(null);
}, [pageId, shareId]);
}, [pageId, isPublicView]);
const extensions = useMemo(() => {
const excludedExtensions = new Set([
@@ -99,7 +113,7 @@ export default function ReadonlyPageEditor({
];
return (
<TransclusionLookupProvider shareId={shareId}>
<TransclusionLookupProvider shareId={shareId} spaceSlug={spaceSlug}>
<div className="page-title">
<EditorProvider
editable={false}
@@ -110,6 +124,8 @@ export default function ReadonlyPageEditor({
></EditorProvider>
</div>
{byline}
<EditorProvider
editable={false}
immediatelyRender={true}
@@ -117,7 +133,7 @@ export default function ReadonlyPageEditor({
extensions={extensions}
content={content}
editorProps={
shareId
isPublicView
? {
handleClickOn: (_view, _pos, node) => {
const request = getLightboxClickRequest(node);
@@ -144,7 +160,7 @@ export default function ReadonlyPageEditor({
}
}}
></EditorProvider>
{shareId && contentEditor && (
{isPublicView && contentEditor && (
<LightboxView
editor={contentEditor}
open={!!lightboxRequest}
@@ -153,7 +169,7 @@ export default function ReadonlyPageEditor({
onClose={() => setLightboxRequest(null)}
/>
)}
<div style={{ paddingBottom: "20vh" }}></div>
{trailingSpace && <div style={{ paddingBottom: "20vh" }}></div>}
</TransclusionLookupProvider>
);
}
apps/client/src/features/page/components/header/page-header.tsx
+49 -2
View File
@@ -1,16 +1,63 @@
import classes from "./page-header.module.css";
import PageHeaderMenu from "@/features/page/components/header/page-header-menu.tsx";
import { Group } from "@mantine/core";
import { Badge, Group, Tooltip } from "@mantine/core";
import { IconExternalLink, IconWorld } from "@tabler/icons-react";
import Breadcrumb from "@/features/page/components/breadcrumbs/breadcrumb.tsx";
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
import { usePageQuery } from "@/features/page/queries/page-query.ts";
import { extractPageSlugId } from "@/lib";
import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
import { isBetaPublicSpaces } from "@/lib/config.ts";
interface Props {
readOnly?: boolean;
}
export default function PageHeader({ readOnly }: Props) {
const { t } = useTranslation();
const { spaceSlug, pageSlug } = useParams();
const { data: space } = useGetSpaceBySlugQuery(spaceSlug);
const { data: page } = usePageQuery({
pageId: extractPageSlugId(pageSlug),
});
// Restricted pages are never publicly reachable, so the chip only shows on
// pages the public site actually serves.
const showPublicBadge =
isBetaPublicSpaces() &&
space?.isPublished &&
page &&
page.permissions?.hasRestriction !== true;
return (
<div className={classes.header} data-page-header="true">
<Group justify="space-between" h="100%" px="md" wrap="nowrap" className={classes.group}>
<Breadcrumb />
<Group gap="xs" wrap="nowrap" style={{ minWidth: 0 }}>
<Breadcrumb />
{showPublicBadge && (
<Tooltip label={t("Open public page")} openDelay={250} withArrow>
<Badge
component="a"
href={buildPublicSpaceUrl({
spaceSlug: space.slug,
pageSlugId: page.slugId,
pageTitle: page.title,
})}
target="_blank"
rel="noopener"
size="sm"
variant="light"
leftSection={<IconWorld size={12} />}
rightSection={<IconExternalLink size={11} />}
style={{ flexShrink: 0, cursor: "pointer" }}
>
{t("Public")}
</Badge>
</Tooltip>
)}
</Group>
<Group justify="flex-end" h="100%" px="md" wrap="nowrap" gap="var(--mantine-spacing-xs)">
<PageHeaderMenu readOnly={readOnly} />
apps/client/src/features/page/page.utils.ts
+13
View File
@@ -55,3 +55,16 @@ export const buildSharedPageUrl = (opts: {
}
return anchorId ? `${url}#${anchorId}` : url;
};
export const buildPublicSpaceUrl = (opts: {
spaceSlug: string;
pageSlugId?: string;
pageTitle?: string;
anchorId?: string;
}): string => {
const { spaceSlug, pageSlugId, pageTitle, anchorId } = opts;
const url = pageSlugId
? `/docs/${spaceSlug}/${buildPageSlug(pageSlugId, pageTitle)}`
: `/docs/${spaceSlug}`;
return anchorId ? `${url}#${anchorId}` : url;
};
apps/client/src/features/page/tree/components/doc-tree-row.tsx
+4 -1
View File
@@ -41,6 +41,7 @@ type Props<T extends object> = {
activeId?: string;
renderRow: (props: RenderRowProps<T>) => ReactNode;
indentPerLevel: number;
rowClassName?: string;
onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
onToggle: (id: string, isOpen: boolean) => void;
readOnly: boolean;
@@ -68,6 +69,7 @@ function DocTreeRowInner<T extends object>(props: Props<T>) {
activeId,
renderRow,
indentPerLevel,
rowClassName,
onMove,
onToggle,
readOnly,
@@ -323,7 +325,7 @@ function DocTreeRowInner<T extends object>(props: Props<T>) {
style={{ paddingLeft: level * indentPerLevel }}
>
<div
className={styles.node}
className={rowClassName ? `${styles.node} ${rowClassName}` : styles.node}
data-dragging={isDragging || undefined}
data-selected={isSelected || undefined}
data-receiving-drop={
@@ -376,6 +378,7 @@ function arePropsEqual<T extends object>(
if (prev.readOnly !== next.readOnly) return false;
if (prev.contextId !== next.contextId) return false;
if (prev.indentPerLevel !== next.indentPerLevel) return false;
if (prev.rowClassName !== next.rowClassName) return false;
if (prev.renderRow !== next.renderRow) return false;
if (prev.onMove !== next.onMove) return false;
if (prev.onToggle !== next.onToggle) return false;
apps/client/src/features/page/tree/components/doc-tree.tsx
+41 -2
View File
@@ -56,6 +56,18 @@ export type DocTreeProps<T extends object> = {
indentPerLevel?: number;
rowHeight?: number;
emptyState?: ReactNode;
// Extra class for the engine's row wrapper (the div carrying data-selected /
// data-dragging), letting consumers restyle hover/selected states.
rowClassName?: string;
// Extra vertical space above a row (e.g. to separate top-level groups).
// Added to the row's virtualized slot and applied as padding above it.
rowGap?: (node: TreeNode<T>, level: number, index: number) => number;
// Measure real row heights so rows may wrap to multiple lines; rowHeight
// then only seeds the estimate. Off by default (fixed-slot fast path).
dynamicRowHeight?: boolean;
// Rendered inside the scroll container after the last row, so it flows
// with the tree content instead of pinning to the container edge.
footer?: ReactNode;
onMove: (sourceId: string, op: DropOp) => void | Promise<void>;
onToggle: (id: string, isOpen: boolean) => void;
@@ -123,6 +135,9 @@ function DocTreeInner<T extends object>(
renderRow,
indentPerLevel = 16,
rowHeight = 32,
rowClassName,
rowGap,
dynamicRowHeight = false,
onMove,
onToggle,
onSelect,
@@ -132,6 +147,7 @@ function DocTreeInner<T extends object>(
getDragLabel,
uniqueContextId,
emptyState,
footer,
'aria-label': ariaLabel,
} = props;
@@ -197,10 +213,20 @@ function DocTreeInner<T extends object>(
return flat[0]?.node.id;
}, [activeId, selectedId, flatIds, flat]);
// Keyed by node id so measured sizes follow their rows across
// expand/collapse instead of sticking to positions. Never reset the
// measurement cache wholesale: ResizeObserver only re-reports elements
// whose size changed, so unchanged mounted rows would be left positioned
// by the estimate and overlap their neighbors.
const virtualizer = useVirtualizer({
count: flat.length,
getScrollElement: () => scrollRef.current,
estimateSize: () => rowHeight,
getItemKey: (index) => flat[index].node.id,
estimateSize: (index) => {
const row = flat[index];
const gap = row && rowGap ? rowGap(row.node, row.level, index) : 0;
return rowHeight + gap;
},
overscan: 10,
});
@@ -471,7 +497,12 @@ function DocTreeInner<T extends object>(
);
if (data.length === 0 && emptyState) {
return <div className={styles.treeContainer}>{emptyState}</div>;
return (
<div className={styles.treeContainer}>
{emptyState}
{footer}
</div>
);
}
const virtualItems = virtualizer.getVirtualItems();
@@ -494,6 +525,9 @@ function DocTreeInner<T extends object>(
>
{virtualItems.map((virtualItem) => {
const row = flat[virtualItem.index];
const gap = rowGap
? rowGap(row.node, row.level, virtualItem.index)
: 0;
return (
<li
key={row.node.id}
@@ -501,12 +535,15 @@ function DocTreeInner<T extends object>(
// (the row's <a>), so screen readers announce "treeitem" on
// navigation. The <li> is just layout glue.
role="none"
ref={dynamicRowHeight ? virtualizer.measureElement : undefined}
data-index={dynamicRowHeight ? virtualItem.index : undefined}
style={{
position: 'absolute',
top: 0,
left: 0,
width: '100%',
transform: `translateY(${virtualItem.start}px)`,
...(gap > 0 ? { paddingTop: gap } : {}),
}}
>
<DocTreeRow
@@ -518,6 +555,7 @@ function DocTreeInner<T extends object>(
activeId={effectiveActiveId}
renderRow={renderRow}
indentPerLevel={indentPerLevel}
rowClassName={rowClassName}
onMove={onMove}
onToggle={onToggle}
readOnly={readOnly}
@@ -532,6 +570,7 @@ function DocTreeInner<T extends object>(
);
})}
</ul>
{footer}
</div>
);
}
apps/client/src/features/public-space/atoms/public-space-atoms.ts
+17
View File
@@ -0,0 +1,17 @@
import { atom } from "jotai";
import { IPublicSpaceTree } from "@/features/public-space/types/public-space.types.ts";
import { SharedPageTreeNode } from "@/features/share/utils.ts";
export const publicSpaceTreeAtom = atom<IPublicSpaceTree | null>(
null as IPublicSpaceTree | null,
);
export const publicSpaceTreeDataAtom = atom<SharedPageTreeNode[] | null>(
null as SharedPageTreeNode[] | null,
);
export const openPublicSpaceTreeNodesAtom = atom<Record<string, boolean>>({});
export const docsMobileSidebarAtom = atom<boolean>(false);
export const docsMobileTocAtom = atom<boolean>(false);
apps/client/src/features/public-space/components/appearance-settings.module.css
+51
View File
@@ -0,0 +1,51 @@
.presetRow {
display: flex;
flex-wrap: wrap;
gap: rem(8px);
}
.presetCard {
display: flex;
flex-direction: column;
align-items: center;
gap: rem(6px);
min-width: rem(72px);
padding: rem(10px) rem(12px);
border: 1px solid var(--mantine-color-default-border);
border-radius: rem(8px);
@media (hover: hover) {
&:hover {
background-color: var(--mantine-color-default-hover);
}
}
&:focus-visible {
outline: 2px solid var(--mantine-primary-color-filled);
outline-offset: 1px;
}
}
.presetCard[data-selected="true"] {
border-color: var(--mantine-primary-color-filled);
background-color: var(--mantine-primary-color-light);
}
.presetSwatch {
width: rem(22px);
height: rem(22px);
border-radius: 50%;
border: 1px solid var(--mantine-color-default-border);
flex-shrink: 0;
}
.customSwatch {
display: inline-flex;
align-items: center;
justify-content: center;
width: rem(22px);
height: rem(22px);
border-radius: 50%;
border: 1px dashed var(--mantine-color-default-border);
color: var(--mantine-color-dimmed);
}
apps/client/src/features/public-space/components/appearance-settings.tsx
+165
View File
@@ -0,0 +1,165 @@
import {
ColorInput,
Group,
Text,
Tooltip,
UnstyledButton,
} from "@mantine/core";
import { IconColorPicker } from "@tabler/icons-react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import {
DEFAULT_DOCS_PRESET,
DOCS_THEME_PRESETS,
isValidDocsColor,
matchDocsPreset,
} from "@/features/public-space/theme/docs-theme.ts";
import { IPublicSpaceAppearance } from "@/features/public-space/types/public-space.types.ts";
import { usePublishSpaceMutation } from "@/features/public-space/queries/public-space-query.ts";
import { useHasFeature } from "@/ee/hooks/use-feature.ts";
import { useUpgradeLabel } from "@/ee/hooks/use-upgrade-label.ts";
import { Feature } from "@/ee/features.ts";
import classes from "./appearance-settings.module.css";
type AppearanceSettingsProps = {
spaceId: string;
appearance?: IPublicSpaceAppearance;
};
export default function AppearanceSettings({
spaceId,
appearance,
}: AppearanceSettingsProps) {
const { t } = useTranslation();
const publishMutation = usePublishSpaceMutation();
const hasAppearance = useHasFeature(Feature.PUBLIC_SPACE_APPEARANCE);
const upgradeLabel = useUpgradeLabel();
const matchedPreset = matchDocsPreset(appearance);
const [customOpen, setCustomOpen] = useState(matchedPreset === null);
const [customLight, setCustomLight] = useState(
appearance?.primaryColorLight ?? DEFAULT_DOCS_PRESET.light,
);
const [customDark, setCustomDark] = useState(
appearance?.primaryColorDark ?? DEFAULT_DOCS_PRESET.dark,
);
useEffect(() => {
setCustomOpen(matchDocsPreset(appearance) === null);
setCustomLight(appearance?.primaryColorLight ?? DEFAULT_DOCS_PRESET.light);
setCustomDark(appearance?.primaryColorDark ?? DEFAULT_DOCS_PRESET.dark);
}, [appearance?.primaryColorLight, appearance?.primaryColorDark]);
const saveAppearance = (payload: {
primaryColorLight: string | null;
primaryColorDark: string | null;
}) => {
if (!hasAppearance) return;
publishMutation.mutate({ spaceId, enabled: true, appearance: payload });
};
const selectPreset = (presetId: string) => {
setCustomOpen(false);
const preset = DOCS_THEME_PRESETS.find((item) => item.id === presetId);
if (!preset) return;
if (preset.id === DEFAULT_DOCS_PRESET.id) {
saveAppearance({ primaryColorLight: null, primaryColorDark: null });
return;
}
saveAppearance({
primaryColorLight: preset.light,
primaryColorDark: preset.dark,
});
};
const commitCustom = (light: string, dark: string) => {
if (!isValidDocsColor(light) || !isValidDocsColor(dark)) return;
saveAppearance({ primaryColorLight: light, primaryColorDark: dark });
};
const swatches = DOCS_THEME_PRESETS.flatMap((preset) => [
preset.light,
preset.dark,
]);
return (
<div>
<Text size="md" mt="md">
{t("Appearance")}
</Text>
<Text size="sm" c="dimmed">
{t("Choose the primary color of the public docs site.")}
</Text>
<Tooltip
label={upgradeLabel}
disabled={hasAppearance}
position="top-start"
>
<div className={classes.presetRow} style={{ marginTop: 10 }}>
{DOCS_THEME_PRESETS.map((preset) => {
const selected = !customOpen && matchedPreset?.id === preset.id;
return (
<UnstyledButton
key={preset.id}
className={classes.presetCard}
data-selected={selected || undefined}
aria-pressed={selected}
disabled={!hasAppearance}
onClick={() => selectPreset(preset.id)}
>
<span
className={classes.presetSwatch}
style={{
background: `linear-gradient(135deg, ${preset.light} 50%, ${preset.dark} 50%)`,
}}
/>
<Text size="xs">{t(preset.nameKey)}</Text>
</UnstyledButton>
);
})}
<UnstyledButton
className={classes.presetCard}
data-selected={customOpen || undefined}
aria-pressed={customOpen}
disabled={!hasAppearance}
onClick={() => setCustomOpen(true)}
>
<span className={classes.customSwatch}>
<IconColorPicker size={13} stroke={2} aria-hidden />
</span>
<Text size="xs">{t("Custom")}</Text>
</UnstyledButton>
</div>
</Tooltip>
{customOpen && hasAppearance && (
<Group grow mt="sm" align="flex-start">
<ColorInput
label={t("Light mode color")}
format="hex"
value={customLight}
swatches={swatches}
onChange={setCustomLight}
onChangeEnd={(value) => {
setCustomLight(value);
commitCustom(value, customDark);
}}
/>
<ColorInput
label={t("Dark mode color")}
format="hex"
value={customDark}
swatches={swatches}
onChange={setCustomDark}
onChangeEnd={(value) => {
setCustomDark(value);
commitCustom(customLight, value);
}}
/>
</Group>
)}
</div>
);
}
apps/client/src/features/public-space/components/docs/docs-breadcrumbs.tsx
+114
View File
@@ -0,0 +1,114 @@
import { Menu } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import { Link, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Fragment, useMemo, type ReactNode } from "react";
import { useDocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
import { findAncestorTrail } from "@/features/public-space/utils/docs-tree.ts";
import { extractPageSlugId } from "@/lib";
import styles from "./docs.module.css";
type Crumb = {
key: string;
name: string;
url: string;
};
export default function DocsBreadcrumbs() {
const { t } = useTranslation();
const { pageSlug } = useParams();
const { treeData, siteName, homeUrl, getNodeUrl } = useDocsSurface();
const isMobile = useMediaQuery("(max-width: 48em)");
const crumbs = useMemo<Crumb[] | null>(() => {
if (!treeData?.length) return null;
const currentSlugId = pageSlug
? extractPageSlugId(pageSlug)
: treeData[0]?.slugId;
if (!currentSlugId) return null;
const trail = findAncestorTrail(treeData, currentSlugId);
if (trail === null) return null;
const siteCrumbs: Crumb[] =
siteName && homeUrl
? [{ key: "site", name: siteName, url: homeUrl }]
: [];
const list = [
...siteCrumbs,
...trail.map((node) => ({
key: node.slugId,
name: node.name || t("untitled"),
url: getNodeUrl(node),
})),
];
return list.length ? list : null;
}, [treeData, siteName, homeUrl, getNodeUrl, pageSlug, t]);
if (!crumbs) return null;
// Mobile keeps a single line (menu + last crumb, like the app header's
// breadcrumb); desktop collapses the middle beyond 4 crumbs.
const collapsed = crumbs.length > (isMobile ? 1 : 4);
const hidden = !collapsed
? []
: isMobile
? crumbs.slice(0, crumbs.length - 1)
: crumbs.slice(1, crumbs.length - 1);
const items: ReactNode[] = [];
if (collapsed && !isMobile) {
items.push(
<Link key={crumbs[0].key} to={crumbs[0].url} className={styles.crumbLink}>
{crumbs[0].name}
</Link>,
);
}
if (collapsed) {
items.push(
<Menu shadow="md" position="bottom-start" key="hidden">
<Menu.Target>
<button
type="button"
className={styles.crumbEllipsis}
aria-label={t("Show hidden pages")}
>
…
</button>
</Menu.Target>
<Menu.Dropdown>
{hidden.map((item) => (
<Menu.Item key={item.key} component={Link} to={item.url}>
{item.name}
</Menu.Item>
))}
</Menu.Dropdown>
</Menu>,
);
}
const trailing = collapsed ? [crumbs[crumbs.length - 1]] : crumbs;
for (const crumb of trailing) {
items.push(
<Link key={crumb.key} to={crumb.url} className={styles.crumbLink}>
{crumb.name}
</Link>,
);
}
return (
<nav className={styles.breadcrumbs} aria-label={t("Breadcrumb")}>
{items.map((item, index) => (
<Fragment key={index}>
{index > 0 && (
<span className={styles.crumbSeparator} aria-hidden>
/
</span>
)}
{item}
</Fragment>
))}
</nav>
);
}
apps/client/src/features/public-space/components/docs/docs-copy-page.tsx
+45
View File
@@ -0,0 +1,45 @@
import { Button } from "@mantine/core";
import { useAtomValue } from "jotai";
import { useTranslation } from "react-i18next";
import { IconCheck, IconCopy } from "@tabler/icons-react";
import { htmlToMarkdown } from "@docmost/editor-ext";
import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
import { useDocsCurrentPage } from "@/features/public-space/hooks/use-docs-current-page.ts";
import { useClipboard } from "@/hooks/use-clipboard";
import styles from "./docs.module.css";
export default function DocsCopyPage() {
const { t } = useTranslation();
const editor = useAtomValue(readOnlyEditorAtom);
const page = useDocsCurrentPage();
const clipboard = useClipboard();
if (!editor) {
return null;
}
const handleCopy = () => {
if (editor.isDestroyed) return;
const markdown = htmlToMarkdown(editor.getHTML());
const title = page?.name ? `# ${page.name}\n\n` : "";
clipboard.copy(`${title}${markdown}`);
};
return (
<Button
variant="default"
size="compact-sm"
className={styles.copyPageButton}
onClick={handleCopy}
leftSection={
clipboard.copied ? (
<IconCheck size={14} stroke={1.8} />
) : (
<IconCopy size={14} stroke={1.8} />
)
}
>
{clipboard.copied ? t("Copied") : t("Copy page")}
</Button>
);
}
apps/client/src/features/public-space/components/docs/docs-edit-page.tsx
+31
View File
@@ -0,0 +1,31 @@
import { Link, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { IconPencil } from "@tabler/icons-react";
import { useAuthenticatedUser } from "@/features/public-space/hooks/use-authenticated-user.ts";
import { useDocsCurrentPage } from "@/features/public-space/hooks/use-docs-current-page.ts";
import { buildPageUrl } from "@/features/page/page.utils.ts";
import styles from "./docs.module.css";
export default function DocsEditPage() {
const { t } = useTranslation();
const { spaceSlug } = useParams();
const page = useDocsCurrentPage();
const { data: currentUser } = useAuthenticatedUser();
if (!currentUser?.user || !page) {
return null;
}
return (
<Link
className={styles.editPageLink}
to={buildPageUrl(spaceSlug, page.slugId, page.name)}
target="_blank"
rel="noopener"
>
<IconPencil size={14} stroke={1.8} aria-hidden />
{t("Edit page")}
</Link>
);
}
apps/client/src/features/public-space/components/docs/docs-footer-branding.tsx
+23
View File
@@ -0,0 +1,23 @@
import clsx from "clsx";
import styles from "./docs.module.css";
export default function DocsFooterBranding({
className,
refSource = "public-space",
}: {
className?: string;
refSource?: string;
}) {
return (
<footer className={clsx(styles.footer, className)}>
<a
className={styles.footerBranding}
href={`https://docmost.com?ref=${refSource}`}
target="_blank"
rel="noreferrer"
>
Powered by Docmost
</a>
</footer>
);
}
apps/client/src/features/public-space/components/docs/docs-hub.module.css
+485
View File
@@ -0,0 +1,485 @@
/* Design tokens for the public docs hub, transcribed from the "1a solid brand
* band" direction of the Directory design spec (a fixed light look). Declared
* on :root like --docs-* so cover/brand customization can override them at
* runtime. */
:root {
--docs-hub-max: 80rem;
--docs-hub-bg: #ffffff;
--docs-hub-fg: #111827;
--docs-hub-muted: #5b6270;
--docs-hub-nav-fg: #4b5563;
--docs-hub-footer-fg: #6b7280;
--docs-hub-border: #eceef2;
--docs-hub-brand: #12275c;
--docs-hub-brand-fg: #ffffff;
--docs-hub-hero-bg: var(--docs-hub-brand);
--docs-hub-hero-fg: #ffffff;
--docs-hub-hero-muted: rgba(255, 255, 255, 0.78);
--docs-hub-search-bg: #ffffff;
--docs-hub-search-fg: #111827;
--docs-hub-search-placeholder: #8a919e;
--docs-hub-search-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
--docs-hub-card-bg: #ffffff;
--docs-hub-card-border: #e6e7ea;
--docs-hub-card-radius: 14px;
--docs-hub-card-shadow: 0 4px 16px rgba(15, 23, 42, 0.06);
--docs-hub-card-border-hover: #c4c8d0;
--docs-hub-card-shadow-hover: 0 12px 32px rgba(15, 23, 42, 0.14);
--docs-hub-tile-fg: #ffffff;
}
.root {
min-height: 100dvh;
background-color: var(--docs-hub-bg);
color: var(--docs-hub-fg);
}
.container {
max-width: var(--docs-hub-max);
margin-inline: auto;
}
/* ---------- Top bar ---------- */
.topBar {
border-bottom: 1px solid var(--docs-hub-border);
padding: 0 rem(48px);
@media (max-width: $mantine-breakpoint-sm) {
padding: 0 rem(20px);
}
}
.topBarInner {
height: rem(64px);
display: flex;
align-items: center;
justify-content: space-between;
@media (max-width: $mantine-breakpoint-sm) {
height: rem(56px);
}
}
.brand {
display: flex;
align-items: center;
gap: rem(10px);
min-width: 0;
color: var(--docs-hub-fg);
text-decoration: none;
font-size: rem(16px);
font-weight: 600;
border-radius: rem(8px);
&:focus-visible {
outline: 2px solid var(--docs-hub-brand);
outline-offset: 4px;
}
@media (max-width: $mantine-breakpoint-sm) {
gap: rem(8px);
font-size: rem(15px);
}
}
.brandTile {
width: rem(28px);
height: rem(28px);
border-radius: rem(8px);
background-color: var(--docs-hub-brand);
color: var(--docs-hub-brand-fg);
display: grid;
place-items: center;
flex-shrink: 0;
font-weight: 700;
font-size: rem(13px);
@media (max-width: $mantine-breakpoint-sm) {
width: rem(26px);
height: rem(26px);
border-radius: rem(7px);
font-size: rem(12px);
}
}
.topActions {
display: flex;
align-items: center;
gap: rem(24px);
font-size: rem(14px);
color: var(--docs-hub-nav-fg);
}
.signIn {
display: inline-block;
padding: rem(8px) rem(14px);
border-radius: rem(8px);
background-color: var(--docs-hub-brand);
color: var(--docs-hub-brand-fg);
text-decoration: none;
font-weight: 500;
white-space: nowrap;
@media (hover: hover) {
&:hover {
filter: brightness(1.15);
}
}
&:focus-visible {
outline: 2px solid var(--docs-hub-brand);
outline-offset: 2px;
}
@media (max-width: $mantine-breakpoint-sm) {
padding: rem(8px) rem(12px);
font-size: rem(13px);
}
}
/* ---------- Hero band ---------- */
.hero {
background-color: var(--docs-hub-hero-bg);
color: var(--docs-hub-hero-fg);
padding: rem(72px) rem(48px) rem(80px);
@media (max-width: $mantine-breakpoint-sm) {
padding: rem(40px) rem(20px) rem(44px);
}
}
.heroInner {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: rem(16px);
@media (max-width: $mantine-breakpoint-sm) {
gap: rem(10px);
}
}
.heading {
margin: 0;
color: var(--docs-hub-hero-fg);
font-size: rem(48px);
font-weight: 700;
letter-spacing: -0.02em;
line-height: 1.15;
@media (max-width: $mantine-breakpoint-sm) {
font-size: rem(30px);
}
}
.subtitle {
margin: 0;
color: var(--docs-hub-hero-muted);
font-size: rem(18px);
@media (max-width: $mantine-breakpoint-sm) {
font-size: rem(15px);
line-height: 1.45;
}
}
.search {
margin-top: rem(16px);
width: rem(640px);
max-width: 100%;
height: rem(56px);
display: flex;
align-items: center;
padding: 0 rem(6px) 0 rem(22px);
border-radius: 999px;
background-color: var(--docs-hub-search-bg);
box-shadow: var(--docs-hub-search-shadow);
&:focus-within {
outline: 2px solid var(--docs-hub-hero-fg);
outline-offset: 3px;
}
@media (max-width: $mantine-breakpoint-sm) {
margin-top: rem(10px);
width: 100%;
height: rem(48px);
padding: 0 rem(5px) 0 rem(18px);
box-shadow: none;
}
}
.searchInput {
flex: 1;
min-width: 0;
height: 100%;
border: 0;
background: transparent;
font: inherit;
font-size: rem(16px);
color: var(--docs-hub-search-fg);
text-align: left;
outline: none;
&::placeholder {
color: var(--docs-hub-search-placeholder);
}
@media (max-width: $mantine-breakpoint-sm) {
font-size: rem(15px);
}
}
.searchButton {
width: rem(44px);
height: rem(44px);
flex-shrink: 0;
border: 0;
border-radius: 999px;
background-color: var(--docs-hub-brand);
color: var(--docs-hub-brand-fg);
display: grid;
place-items: center;
cursor: pointer;
&:focus-visible {
outline: 2px solid var(--docs-hub-search-fg);
outline-offset: 2px;
}
@media (max-width: $mantine-breakpoint-sm) {
width: rem(38px);
height: rem(38px);
}
}
/* ---------- Spaces ---------- */
.main {
padding: rem(48px) rem(48px) rem(56px);
@media (max-width: $mantine-breakpoint-sm) {
padding: rem(24px) rem(20px) rem(28px);
}
}
.mainInner {
display: flex;
flex-direction: column;
gap: rem(24px);
@media (max-width: $mantine-breakpoint-sm) {
gap: rem(16px);
}
}
.sectionHeader {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: rem(16px);
border-bottom: 1px solid var(--docs-hub-border);
padding-bottom: rem(14px);
@media (max-width: $mantine-breakpoint-sm) {
padding-bottom: rem(10px);
}
}
.sectionTitle {
margin: 0;
font-size: rem(13px);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--docs-hub-fg);
@media (max-width: $mantine-breakpoint-sm) {
font-size: rem(12px);
}
}
.sectionCount {
font-size: rem(14px);
color: var(--docs-hub-footer-fg);
@media (max-width: $mantine-breakpoint-sm) {
font-size: rem(13px);
}
}
/* Phones flow one card per row; wider viewports fit two, then 3/4 columns. */
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(rem(220px), 1fr));
gap: rem(12px);
@media (min-width: $mantine-breakpoint-sm) {
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: rem(20px);
}
@media (min-width: 64em) {
grid-template-columns: repeat(4, minmax(0, 1fr));
}
}
.card {
display: flex;
flex-direction: column;
gap: rem(14px);
padding: rem(24px) rem(24px) rem(26px);
background-color: var(--docs-hub-card-bg);
border: 1px solid var(--docs-hub-card-border);
border-radius: var(--docs-hub-card-radius);
box-shadow: var(--docs-hub-card-shadow);
color: inherit;
text-decoration: none;
transition:
border-color 120ms ease,
box-shadow 160ms ease;
@media (hover: hover) {
&:hover {
border-color: var(--docs-hub-card-border-hover);
box-shadow: var(--docs-hub-card-shadow-hover);
}
}
&:focus-visible {
outline: 2px solid var(--docs-hub-brand);
outline-offset: 2px;
}
@media (max-width: $mantine-breakpoint-sm) {
gap: rem(12px);
padding: rem(18px) rem(18px) rem(20px);
}
}
/* Tile and title share a row so titles get the card's full width. */
.cardHeader {
display: flex;
align-items: center;
gap: rem(14px);
min-width: 0;
@media (max-width: $mantine-breakpoint-sm) {
gap: rem(12px);
}
}
.cardTile {
width: rem(40px);
height: rem(40px);
flex-shrink: 0;
border-radius: rem(10px);
display: grid;
place-items: center;
overflow: hidden;
color: var(--docs-hub-tile-fg);
font-weight: 700;
font-size: rem(15px);
img {
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: $mantine-breakpoint-sm) {
width: rem(36px);
height: rem(36px);
border-radius: rem(9px);
font-size: rem(14px);
}
}
.cardName {
min-width: 0;
font-size: rem(18px);
font-weight: 600;
line-height: 1.3;
color: var(--docs-hub-fg);
text-wrap: balance;
@media (max-width: $mantine-breakpoint-sm) {
font-size: rem(16px);
}
}
.cardDescription {
font-size: rem(15px);
line-height: 1.5;
color: var(--docs-hub-muted);
text-wrap: pretty;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
@media (max-width: $mantine-breakpoint-sm) {
font-size: rem(14px);
}
}
.empty {
margin: 0;
padding: rem(48px) 0;
text-align: center;
color: var(--docs-hub-muted);
}
/* ---------- Footer ---------- */
.footer {
border-top: 1px solid var(--docs-hub-border);
padding: rem(24px) rem(48px);
font-size: rem(14px);
color: var(--docs-hub-footer-fg);
@media (max-width: $mantine-breakpoint-sm) {
padding: rem(20px);
font-size: rem(13px);
}
}
.footerInner {
display: flex;
align-items: center;
justify-content: flex-end;
@media (max-width: $mantine-breakpoint-sm) {
flex-direction: column;
align-items: center;
justify-content: center;
gap: rem(12px);
}
}
.footerBranding {
color: var(--docs-hub-fg);
font-weight: 600;
text-decoration: none;
@media (hover: hover) {
&:hover {
color: var(--docs-hub-brand);
}
}
&:focus-visible {
outline: 2px solid var(--docs-hub-brand);
outline-offset: 2px;
border-radius: rem(2px);
}
}
@media (prefers-reduced-motion: reduce) {
.card {
transition: none;
}
}
apps/client/src/features/public-space/components/docs/docs-page-nav.tsx
+70
View File
@@ -0,0 +1,70 @@
import { useMemo } from "react";
import { Link, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { IconArrowLeft, IconArrowRight } from "@tabler/icons-react";
import { useDocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
import { flattenTreePreorder } from "@/features/public-space/utils/docs-tree.ts";
import { extractPageSlugId } from "@/lib";
import { SharedPageTreeNode } from "@/features/share/utils.ts";
import styles from "./docs.module.css";
export default function DocsPageNav() {
const { t } = useTranslation();
const { pageSlug } = useParams();
const { treeData, getNodeUrl } = useDocsSurface();
const { prev, next } = useMemo(() => {
if (!treeData?.length) {
return {
prev: null as SharedPageTreeNode | null,
next: null as SharedPageTreeNode | null,
};
}
const flat = flattenTreePreorder(treeData);
const currentSlugId = pageSlug
? extractPageSlugId(pageSlug)
: treeData[0]?.slugId;
const index = flat.findIndex((node) => node.slugId === currentSlugId);
return {
prev: index > 0 ? flat[index - 1] : null,
next: index >= 0 && index < flat.length - 1 ? flat[index + 1] : null,
};
}, [treeData, pageSlug]);
if (!prev && !next) return null;
return (
<nav className={styles.pageNav} aria-label={t("Page navigation")}>
{prev && (
<Link
to={getNodeUrl(prev)}
className={styles.pageNavCard}
data-direction="prev"
>
<span className={styles.pageNavLabel}>
<IconArrowLeft size={13} stroke={2} aria-hidden />
{t("Previous")}
</span>
<span className={styles.pageNavTitle}>
{prev.name || t("untitled")}
</span>
</Link>
)}
{next && (
<Link
to={getNodeUrl(next)}
className={styles.pageNavCard}
data-direction="next"
>
<span className={styles.pageNavLabel}>
{t("Next")}
<IconArrowRight size={13} stroke={2} aria-hidden />
</span>
<span className={styles.pageNavTitle}>
{next.name || t("untitled")}
</span>
</Link>
)}
</nav>
);
}
apps/client/src/features/public-space/components/docs/docs-search-button.tsx
+22
View File
@@ -0,0 +1,22 @@
import { IconSearch } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { platformModifierLabel } from "@/lib";
import styles from "./docs.module.css";
type DocsSearchButtonProps = {
onClick: () => void;
};
export default function DocsSearchButton({ onClick }: DocsSearchButtonProps) {
const { t } = useTranslation();
return (
<button type="button" className={styles.searchButton} onClick={onClick}>
<IconSearch size={15} stroke={2} aria-hidden />
<span className={styles.searchLabel}>{t("Search")}</span>
<span className={styles.searchKbd} aria-hidden>
{platformModifierLabel} K
</span>
</button>
);
}
apps/client/src/features/public-space/components/docs/docs-shell.tsx
+182
View File
@@ -0,0 +1,182 @@
import React from "react";
import { ActionIcon, Drawer, Tooltip } from "@mantine/core";
import { Link } from "react-router-dom";
import { useAtom } from "jotai";
import { useTranslation } from "react-i18next";
import { IconList, IconMenu2 } from "@tabler/icons-react";
import clsx from "clsx";
import {
docsMobileSidebarAtom,
docsMobileTocAtom,
} from "@/features/public-space/atoms/public-space-atoms.ts";
import {
DocsSurface,
DocsSurfaceProvider,
} from "@/features/public-space/components/docs/docs-surface-context.tsx";
import DocsSidebarTree from "@/features/public-space/components/docs/docs-sidebar-tree.tsx";
import DocsToc from "@/features/public-space/components/docs/docs-toc.tsx";
import DocsEditPage from "@/features/public-space/components/docs/docs-edit-page.tsx";
import DocsCopyPage from "@/features/public-space/components/docs/docs-copy-page.tsx";
import DocsSearchButton from "@/features/public-space/components/docs/docs-search-button.tsx";
import DocsThemeToggle from "@/features/public-space/components/docs/docs-theme-toggle.tsx";
import DocsFooterBranding from "@/features/public-space/components/docs/docs-footer-branding.tsx";
import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
import { SearchMobileControl } from "@/features/search/components/search-control.tsx";
import styles from "./docs.module.css";
const MemoizedDocsSidebarTree = React.memo(DocsSidebarTree);
type DocsShellProps = {
surface: DocsSurface;
onSearchOpen?: () => void;
searchSpotlight?: React.ReactNode;
children: React.ReactNode;
};
export default function DocsShell({
surface,
onSearchOpen,
searchSpotlight,
children,
}: DocsShellProps) {
const { t } = useTranslation();
const { hasSidebar, siteName, homeUrl, showBranding, showEditPage } = surface;
const [mobileSidebarOpen, setMobileSidebarOpen] = useAtom(
docsMobileSidebarAtom,
);
const [mobileTocOpen, setMobileTocOpen] = useAtom(docsMobileTocAtom);
return (
<DocsSurfaceProvider value={surface}>
<div className={clsx(styles.root, "public-typography")}>
<SkipToMain />
<header className={styles.header}>
<div className={styles.headerInner}>
<div className={styles.headerLeft}>
{hasSidebar && (
<Tooltip label={t("Toggle sidebar")}>
<ActionIcon
variant="subtle"
className={clsx(styles.headerAction, styles.sidebarToggle)}
size="md"
onClick={() => setMobileSidebarOpen((value) => !value)}
aria-label={t("Toggle sidebar")}
aria-expanded={mobileSidebarOpen}
>
<IconMenu2 size={18} stroke={2} />
</ActionIcon>
</Tooltip>
)}
{!hasSidebar && siteName && homeUrl && (
<Link to={homeUrl} className={styles.headerSpaceName}>
{siteName}
</Link>
)}
</div>
<div className={styles.headerCenter}>
{onSearchOpen && (
<div className={styles.searchSlot}>
<DocsSearchButton onClick={onSearchOpen} />
</div>
)}
</div>
<div className={styles.headerRight}>
{onSearchOpen && (
<span className={styles.mobileOnly}>
<SearchMobileControl onSearch={onSearchOpen} />
</span>
)}
<DocsThemeToggle />
</div>
</div>
</header>
<div className={styles.body}>
<nav
className={styles.sidebar}
data-hidden={!hasSidebar || undefined}
aria-label={t("Pages")}
aria-hidden={!hasSidebar || undefined}
>
{hasSidebar && (
<>
{siteName && homeUrl && (
<>
<Link to={homeUrl} className={styles.sidebarTitle}>
{siteName}
</Link>
<div className={styles.sidebarDivider} aria-hidden />
</>
)}
<div className={styles.sidebarScroll}>
<MemoizedDocsSidebarTree />
</div>
</>
)}
</nav>
<main className={styles.main} id={MAIN_CONTENT_ID} tabIndex={-1}>
<div className={styles.article}>
<div className={styles.articleActions}>
<DocsCopyPage />
<span className={styles.tocOverlayControl}>
<Tooltip label={t("Table of contents")} withArrow>
<ActionIcon
variant="subtle"
className={styles.headerAction}
onClick={() => setMobileTocOpen(true)}
size="md"
aria-label={t("Table of contents")}
>
<IconList size={18} stroke={2} />
</ActionIcon>
</Tooltip>
</span>
</div>
{children}
{showBranding && (
<DocsFooterBranding refSource={surface.brandingRef} />
)}
</div>
</main>
<aside className={styles.toc} aria-label={t("On this page")}>
<DocsToc />
{showEditPage && <DocsEditPage />}
</aside>
</div>
<Drawer
opened={mobileSidebarOpen}
onClose={() => setMobileSidebarOpen(false)}
title={siteName}
size={300}
padding="sm"
>
<div className={styles.drawerTree}>
{hasSidebar && <MemoizedDocsSidebarTree />}
</div>
</Drawer>
<Drawer
opened={mobileTocOpen}
onClose={() => setMobileTocOpen(false)}
position="right"
size={300}
padding="md"
>
<DocsToc />
{showEditPage && <DocsEditPage />}
</Drawer>
{searchSpotlight}
</div>
</DocsSurfaceProvider>
);
}
apps/client/src/features/public-space/components/docs/docs-sidebar-tree.tsx
+198
View File
@@ -0,0 +1,198 @@
import { SharedPageTreeNode } from "@/features/share/utils.ts";
import React, { useCallback, useEffect, useMemo, useRef } from "react";
import { Link, useParams } from "react-router-dom";
import { useAtom, useSetAtom } from "jotai";
import { useTranslation } from "react-i18next";
import { IconChevronRight } from "@tabler/icons-react";
import { ActionIcon } from "@mantine/core";
import { extractPageSlugId } from "@/lib";
import {
DocTree,
type DocTreeApi,
type RenderRowProps,
} from "@/features/page/tree/components/doc-tree";
import {
docsMobileSidebarAtom,
openPublicSpaceTreeNodesAtom,
} from "@/features/public-space/atoms/public-space-atoms.ts";
import { useDocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
import { findAncestorTrail } from "@/features/public-space/utils/docs-tree.ts";
import styles from "./docs.module.css";
export default function DocsSidebarTree() {
const { t } = useTranslation();
const treeRef = useRef<DocTreeApi | null>(null);
const { pageSlug } = useParams();
const { treeData, getNodeUrl } = useDocsSurface();
const [openTreeNodes, setOpenTreeNodes] = useAtom(
openPublicSpaceTreeNodesAtom,
);
// The first root page is the surface home, served at the bare URL.
const firstRootSlugId = treeData?.[0]?.slugId;
const currentNodeId = pageSlug ? extractPageSlugId(pageSlug) : firstRootSlugId;
const openIds = useMemo(
() => new Set(Object.keys(openTreeNodes).filter((k) => openTreeNodes[k])),
[openTreeNodes],
);
useEffect(() => {
// Auto-open the first level of the tree on initial load.
const root = treeData?.[0];
if (!root) return;
setOpenTreeNodes((prev) => {
if (prev[root.slugId]) return prev;
const next = { ...prev, [root.slugId]: true };
for (const child of root.children ?? []) {
next[child.slugId] = true;
}
return next;
});
}, [treeData, setOpenTreeNodes]);
// Reveal the current page: expand its ancestor trail (deep links land with
// everything collapsed otherwise) and the page itself when it has children.
useEffect(() => {
if (!currentNodeId || !treeData?.length) return;
const trail = findAncestorTrail(treeData, currentNodeId);
if (trail === null) return;
setOpenTreeNodes((prev) => {
const next = { ...prev };
let changed = false;
for (const node of [...trail.map((n) => n.slugId), currentNodeId]) {
if (!next[node]) {
next[node] = true;
changed = true;
}
}
return changed ? next : prev;
});
}, [currentNodeId, treeData, setOpenTreeNodes]);
useEffect(() => {
if (currentNodeId) {
treeRef.current?.select(currentNodeId, { scrollIntoView: true });
}
}, [currentNodeId, treeData]);
const handleToggle = useCallback(
(id: string, isOpen: boolean) =>
setOpenTreeNodes((prev) => ({ ...prev, [id]: isOpen })),
[setOpenTreeNodes],
);
const getDragLabel = useCallback(
(n: SharedPageTreeNode) => n.name || "untitled",
[],
);
const renderRow = useCallback(
(props: RenderRowProps<SharedPageTreeNode>) => (
<DocsTreeRow {...props} getNodeUrl={getNodeUrl} />
),
[getNodeUrl],
);
if (!treeData?.length) {
return null;
}
return (
<DocTree<SharedPageTreeNode>
readOnly
ref={treeRef}
data={treeData}
openIds={openIds}
selectedId={currentNodeId}
renderRow={renderRow}
indentPerLevel={INDENT_PER_LEVEL}
rowHeight={36}
dynamicRowHeight
rowClassName={styles.treeNodeChrome}
onMove={noopMove}
onToggle={handleToggle}
getDragLabel={getDragLabel}
aria-label={t("Pages")}
/>
);
}
// Module-scope noop so it's a stable reference across renders.
const noopMove = () => {};
const INDENT_PER_LEVEL = 16;
type DocsTreeRowProps = RenderRowProps<SharedPageTreeNode> & {
getNodeUrl: (node: Pick<SharedPageTreeNode, "slugId" | "name">) => string;
};
function DocsTreeRow({
node,
level,
isOpen,
hasChildren,
isSelected,
rowRef,
tabIndex,
treeItemProps,
toggleOpen,
getNodeUrl,
}: DocsTreeRowProps) {
const { t } = useTranslation();
const setMobileSidebarOpen = useSetAtom(docsMobileSidebarAtom);
return (
<Link
ref={rowRef as React.Ref<HTMLAnchorElement>}
tabIndex={tabIndex}
{...treeItemProps}
data-selected={isSelected || undefined}
data-open-parent={(level === 0 && isOpen && hasChildren) || undefined}
className={styles.treeRow}
to={getNodeUrl(node)}
onClick={() => {
setMobileSidebarOpen(false);
}}
>
{/* One segment per ancestor level; contiguous rows join into a rail. */}
{Array.from({ length: level }, (_, ancestor) => (
<span
key={ancestor}
className={styles.treeGuide}
style={{ left: -((level - ancestor) * INDENT_PER_LEVEL - 6) }}
aria-hidden
/>
))}
{node.icon && (
<span className={styles.treeIcon} aria-hidden>
{node.icon}
</span>
)}
<span className={styles.treeText}>{node.name || t("untitled")}</span>
{hasChildren && (
<ActionIcon
component="span"
variant="subtle"
color="gray"
size={20}
tabIndex={-1}
aria-hidden
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
toggleOpen();
}}
>
<IconChevronRight
className={styles.treeChevron}
data-open={isOpen || undefined}
stroke={2}
size={14}
/>
</ActionIcon>
)}
</Link>
);
}
apps/client/src/features/public-space/components/docs/docs-surface-context.tsx
+27
View File
@@ -0,0 +1,27 @@
import { createContext, useContext } from "react";
import { SharedPageTreeNode } from "@/features/share/utils.ts";
// What varies between the public surfaces (/docs and /share) rendered by the
// docs shell; every shell component reads this contract instead of a feature.
export type DocsSurface = {
treeData: SharedPageTreeNode[] | null;
hasSidebar: boolean;
siteName?: string;
homeUrl?: string;
getNodeUrl: (node: Pick<SharedPageTreeNode, "slugId" | "name">) => string;
showBranding: boolean;
showEditPage: boolean;
brandingRef?: string;
};
const DocsSurfaceContext = createContext<DocsSurface | null>(null);
export const DocsSurfaceProvider = DocsSurfaceContext.Provider;
export function useDocsSurface(): DocsSurface {
const surface = useContext(DocsSurfaceContext);
if (!surface) {
throw new Error("useDocsSurface must be used within DocsShell");
}
return surface;
}
apps/client/src/features/public-space/components/docs/docs-theme-toggle.tsx
+35
View File
@@ -0,0 +1,35 @@
import {
ActionIcon,
Tooltip,
useComputedColorScheme,
useMantineColorScheme,
} from "@mantine/core";
import { IconMoon, IconSun } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import styles from "./docs.module.css";
export default function DocsThemeToggle() {
const { t } = useTranslation();
const { setColorScheme } = useMantineColorScheme();
const computedColorScheme = useComputedColorScheme("light");
return (
<Tooltip label={t("Toggle color scheme")} withArrow>
<ActionIcon
variant="subtle"
className={styles.headerAction}
size="md"
onClick={() =>
setColorScheme(computedColorScheme === "light" ? "dark" : "light")
}
aria-label={t("Toggle color scheme")}
>
{computedColorScheme === "light" ? (
<IconMoon size={18} stroke={1.75} />
) : (
<IconSun size={18} stroke={1.75} />
)}
</ActionIcon>
</Tooltip>
);
}
apps/client/src/features/public-space/components/docs/docs-toc.tsx
+116
View File
@@ -0,0 +1,116 @@
import { useCallback, useEffect, useState } from "react";
import { TextSelection } from "@tiptap/pm/state";
import { useAtomValue } from "jotai";
import { useTranslation } from "react-i18next";
import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
import {
HeadingLink,
recalculateLinks,
} from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
import styles from "./docs.module.css";
function getHeaderOffset(): number {
const raw = getComputedStyle(document.documentElement).getPropertyValue(
"--docs-header-h",
);
const parsed = parseInt(raw, 10);
return Number.isNaN(parsed) ? 56 : parsed;
}
export default function DocsToc() {
const { t } = useTranslation();
const editor = useAtomValue(readOnlyEditorAtom);
const [links, setLinks] = useState<HeadingLink[]>([]);
const [headingDOMNodes, setHeadingDOMNodes] = useState<HTMLElement[]>([]);
const [activeElement, setActiveElement] = useState<HTMLElement | null>(null);
const handleUpdate = useCallback(() => {
if (!editor || editor.isDestroyed) return;
const result = recalculateLinks(editor.$nodes("heading"));
setLinks(result.links);
setHeadingDOMNodes(result.nodes);
}, [editor]);
useEffect(() => {
// "create" repopulates once the editor view mounts after this component.
editor?.on("create", handleUpdate);
editor?.on("update", handleUpdate);
handleUpdate();
return () => {
editor?.off("create", handleUpdate);
editor?.off("update", handleUpdate);
};
}, [editor, handleUpdate]);
useEffect(() => {
const observer = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
setActiveElement(entry.target as HTMLElement);
}
});
},
{
rootMargin: `-${getHeaderOffset()}px 0px -85% 0px`,
threshold: 0,
root: null,
},
);
headingDOMNodes.forEach((heading) => observer.observe(heading));
return () => {
headingDOMNodes.forEach((heading) => observer.unobserve(heading));
};
}, [headingDOMNodes]);
const handleScrollToHeading = (position: number) => {
if (!editor || editor.isDestroyed) return;
const { view } = editor;
const { node } = view.domAtPos(position);
const element = node as HTMLElement;
const scrollPosition =
element.getBoundingClientRect().top +
window.scrollY -
getHeaderOffset() -
16;
window.scrollTo({ top: scrollPosition, behavior: "smooth" });
const tr = view.state.tr;
tr.setSelection(new TextSelection(tr.doc.resolve(position)));
view.dispatch(tr);
view.focus();
};
if (!links.length) {
return null;
}
const minLevel = Math.min(...links.map((link) => link.level));
const effectiveActive = activeElement ?? links[0]?.element;
return (
<div>
<span className={styles.tocLabel}>{t("On this page")}</span>
<div className={styles.tocList}>
{links.map((item, idx) => (
<button
type="button"
key={idx}
className={styles.tocLink}
data-active={item.element === effectiveActive || undefined}
style={{
paddingLeft: `${(item.level - minLevel) * 12 + 11}px`,
}}
onClick={() => handleScrollToHeading(item.position)}
>
{item.label}
</button>
))}
</div>
</div>
);
}
apps/client/src/features/public-space/components/docs/docs.module.css
+902
View File
@@ -0,0 +1,902 @@
/* Design tokens for the public docs surface. Declared on :root (not .root)
* because mobile drawers and the spotlight render in portals outside the shell
* subtree. The accent pair is overridden at runtime by docs-theme.ts. */
/* light-dark() cannot live in a bare :root block (the transform emits a
* descendant selector that never matches :root), so dark values get their own
* attribute-qualified block; flipping semantics ride Mantine's own vars. */
:root {
--docs-header-h: 56px;
--docs-sidebar-w: 280px;
--docs-toc-w: 240px;
--docs-site-max: 96rem;
--docs-content-max: 54rem;
--docs-radius: 6px;
--docs-accent: #2b7af1;
--docs-accent-soft: color-mix(in srgb, var(--docs-accent) 10%, transparent);
/* Cloudflare-style single-ink model: one foreground for headings, bold, and
* body on a just-off-white page; neither end of the scale is pure. */
--docs-bg: oklch(99% 0 0);
--docs-fg: oklch(21% 0 0);
--docs-content-fg: var(--docs-fg);
--docs-nav-fg: oklch(47% 0 0);
--docs-muted: var(--mantine-color-dimmed);
--docs-hover: var(--mantine-color-default-hover);
--docs-faint: var(--mantine-color-gray-6);
--docs-border: var(--mantine-color-gray-2);
--docs-header-bg: color-mix(in srgb, var(--docs-bg) 78%, transparent);
}
:root[data-mantine-color-scheme="dark"] {
--docs-bg: var(--mantine-color-body);
--docs-fg: oklch(90% 0 0);
--docs-nav-fg: oklch(72% 0 0);
--docs-faint: var(--mantine-color-dark-2);
--docs-border: var(--mantine-color-dark-5);
}
.root {
min-height: 100dvh;
background-color: var(--docs-bg);
color: var(--docs-fg);
}
/* ---------- Header ---------- */
.header {
position: sticky;
top: 0;
z-index: 90;
height: var(--docs-header-h);
padding-inline: rem(20px);
background-color: var(--docs-header-bg);
backdrop-filter: saturate(180%) blur(10px);
-webkit-backdrop-filter: saturate(180%) blur(10px);
border-bottom: 1px solid var(--docs-border);
}
.headerInner {
max-width: var(--docs-site-max);
margin-inline: auto;
height: 100%;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: rem(16px);
}
.headerLeft {
display: flex;
align-items: center;
gap: rem(10px);
min-width: 0;
}
.headerCenter {
display: flex;
justify-content: center;
min-width: 0;
}
.headerRight {
display: flex;
align-items: center;
justify-content: flex-end;
gap: rem(4px);
}
.searchSlot {
@media (max-width: $mantine-breakpoint-sm) {
display: none;
}
}
.mobileOnly {
display: inline-flex;
@media (min-width: $mantine-breakpoint-sm) {
display: none;
}
}
/* Plain space name in the header, used only when there is no sidebar to
* carry it. The brand slot is reserved for future org logo/name support. */
.headerSpaceName {
font-size: rem(14.5px);
font-weight: 600;
letter-spacing: -0.011em;
color: var(--docs-fg);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: var(--docs-radius);
padding: rem(4px) rem(6px);
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: 1px;
}
}
/* Burger appears only once the sidebar column is collapsed. */
@media (min-width: 64em) {
.sidebarToggle {
display: none !important;
}
}
.headerAction {
color: var(--docs-faint);
border-radius: var(--docs-radius);
@media (hover: hover) {
&:hover {
color: var(--docs-fg);
background-color: var(--docs-hover);
}
}
}
/* ---------- Search ---------- */
.searchButton {
display: flex;
align-items: center;
gap: rem(8px);
width: rem(320px);
height: rem(34px);
padding-inline: rem(10px);
border: 1px solid var(--docs-border);
border-radius: rem(8px);
background-color: var(--docs-bg);
color: var(--docs-muted);
font-size: rem(13px);
cursor: pointer;
transition: border-color 120ms ease;
@media (hover: hover) {
&:hover {
border-color: light-dark(
var(--mantine-color-gray-4),
var(--mantine-color-dark-3)
);
}
}
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: 1px;
}
@media (max-width: 62em) {
width: rem(220px);
}
}
.searchLabel {
flex: 1;
text-align: left;
}
.searchKbd {
font-size: rem(11px);
font-weight: 500;
color: var(--docs-faint);
border: 1px solid var(--docs-border);
border-radius: rem(4px);
padding: rem(1px) rem(5px);
line-height: 1.4;
}
/* Quiet bordered chip in the docs palette instead of Mantine's full-ink default. */
.copyPageButton {
color: var(--docs-muted);
border-color: var(--docs-border);
background-color: transparent;
font-size: rem(13px);
font-weight: 500;
border-radius: var(--docs-radius);
@media (hover: hover) {
&:hover {
color: var(--docs-fg);
background-color: var(--docs-hover);
}
}
}
/* Page actions pinned to the article's top-right corner; on small viewports
* they drop into flow above the content so breadcrumbs never run under them. */
.articleActions {
position: absolute;
top: rem(30px);
right: rem(24px);
display: inline-flex;
align-items: center;
gap: rem(6px);
@media (max-width: $mantine-breakpoint-sm) {
position: static;
display: flex;
justify-content: flex-end;
margin-bottom: rem(4px);
}
}
/* Below the rail breakpoint the toc opens as a drawer overlay instead. */
.tocOverlayControl {
display: inline-flex;
@media (min-width: 75em) {
display: none;
}
}
/* ---------- Body grid ---------- */
/* Contained site layout: rails anchor the edges of a centered max-width
* container, the article centers itself in the fixed middle track. Hiding a
* rail keeps its track, so toggling never moves the content column. */
.body {
max-width: var(--docs-site-max);
margin-inline: auto;
display: grid;
grid-template-columns:
var(--docs-sidebar-w)
minmax(0, 1fr)
var(--docs-toc-w);
align-items: start;
}
.sidebar {
grid-column: 1;
width: var(--docs-sidebar-w);
position: sticky;
top: var(--docs-header-h);
height: calc(100dvh - var(--docs-header-h));
display: flex;
flex-direction: column;
padding: rem(20px) rem(10px) rem(16px) rem(20px);
opacity: 1;
transform: translateX(0);
transition:
opacity 160ms ease,
transform 160ms ease;
}
.sidebar[data-hidden="true"] {
visibility: hidden;
opacity: 0;
transform: translateX(rem(-8px));
}
.sidebarTitle {
display: block;
font-size: rem(14px);
font-weight: 600;
letter-spacing: -0.011em;
color: var(--docs-fg);
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
border-radius: var(--docs-radius);
padding: rem(5px) rem(8px);
@media (hover: hover) {
&:hover {
color: var(--docs-accent);
}
}
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: -2px;
}
}
.sidebarDivider {
height: 1px;
background-color: var(--docs-border);
margin: rem(10px) 0 rem(14px);
flex-shrink: 0;
}
.sidebarScroll {
flex: 1;
min-height: 0;
}
.main {
grid-column: 2;
min-width: 0;
}
.article {
max-width: var(--docs-content-max);
margin-inline: auto;
padding: rem(36px) rem(32px) rem(72px);
position: relative;
}
.toc {
grid-column: 3;
width: var(--docs-toc-w);
position: sticky;
top: var(--docs-header-h);
max-height: calc(100dvh - var(--docs-header-h));
overflow-y: auto;
scrollbar-width: thin;
padding: rem(36px) rem(16px) rem(24px) rem(4px);
}
@media (max-width: 75em) {
.body {
grid-template-columns: var(--docs-sidebar-w) minmax(0, 1fr);
}
.toc {
display: none;
}
}
/* Below 64em the sidebar collapses into the burger drawer. */
@media (max-width: 64em) {
.body {
display: block;
}
.sidebar {
display: none;
}
}
@media (max-width: $mantine-breakpoint-sm) {
.article {
padding: rem(24px) rem(20px) rem(56px);
}
}
@media (prefers-reduced-motion: reduce) {
.body,
.sidebar,
.toc,
.searchButton {
transition: none;
}
}
/* ---------- Sidebar tree ---------- */
/* Applied through DocTree's rowClassName onto the engine wrapper that carries
* data-selected. Class doubled to outrank the engine's own module styles. */
.treeNodeChrome.treeNodeChrome {
border-radius: var(--docs-radius);
color: var(--docs-nav-fg);
@media (hover: hover) {
&:hover {
background-color: var(--docs-hover);
color: var(--docs-fg);
}
}
}
.treeNodeChrome.treeNodeChrome[data-selected="true"] {
background-color: var(--docs-accent-soft);
}
.treeRow {
position: relative;
display: flex;
align-items: flex-start;
gap: rem(8px);
width: 100%;
min-width: 0;
min-height: rem(32px);
padding: rem(6px) rem(4px) rem(6px) rem(8px);
text-decoration: none;
color: inherit;
font-size: rem(14px);
font-weight: 400;
line-height: 1.45;
border-radius: var(--docs-radius);
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: -2px;
}
}
/* Expanded parents read as section headers, Cloudflare-style. */
.treeRow[data-open-parent="true"] {
color: var(--docs-fg);
font-weight: 500;
}
.treeRow[data-selected="true"] {
color: var(--docs-accent);
font-weight: 500;
}
.treeIcon {
display: inline-flex;
align-items: center;
justify-content: center;
width: rem(18px);
font-size: rem(14px);
line-height: 1;
flex-shrink: 0;
margin-top: rem(2px);
}
/* Names wrap instead of truncating: the sidebar has a fixed width, so an
* ellipsis would permanently hide the tail of long titles. */
.treeText {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}
/* Nesting rail: each row draws its ancestors' segments in the indent gutter;
* the -2px bleed covers the engine's row padding so segments connect. */
.treeGuide {
position: absolute;
top: 0;
bottom: rem(-2px);
width: 1px;
background-color: var(--docs-border);
pointer-events: none;
}
.treeChevron {
flex-shrink: 0;
color: var(--docs-faint);
transition: transform 140ms ease;
}
.treeChevron[data-open="true"] {
transform: rotate(90deg);
}
@media (prefers-reduced-motion: reduce) {
.treeChevron {
transition: none;
}
}
/* ---------- Table of contents ---------- */
.tocLabel {
display: block;
font-size: rem(11px);
font-weight: 600;
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--docs-muted);
margin-bottom: rem(10px);
}
.tocList {
border-left: 1px solid var(--docs-border);
}
.tocLink {
display: block;
width: 100%;
text-align: left;
background: none;
border: 0;
border-left: 2px solid transparent;
margin-left: -1px;
padding: rem(4px) rem(8px) rem(4px) rem(11px);
font-size: rem(13px);
line-height: 1.45;
color: var(--docs-muted);
cursor: pointer;
overflow-wrap: break-word;
@media (hover: hover) {
&:hover {
color: var(--docs-fg);
}
}
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: -2px;
border-radius: rem(2px);
}
}
.tocLink[data-active="true"] {
color: var(--docs-accent);
border-left-color: var(--docs-accent);
font-weight: 500;
}
/* ---------- Edit page (signed-in visitors) ---------- */
.editPageLink {
display: flex;
align-items: center;
gap: rem(6px);
margin-top: rem(16px);
padding-top: rem(14px);
border-top: 1px solid var(--docs-border);
font-size: rem(13px);
color: var(--docs-muted);
text-decoration: none;
@media (hover: hover) {
&:hover {
color: var(--docs-fg);
}
}
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: 2px;
border-radius: rem(2px);
}
}
/* ---------- Sidebar branding experiments (GitBook card / ReadMe line) ---------- */
/* ---------- Footer branding ---------- */
.footer {
margin-top: rem(40px);
padding-top: rem(16px);
border-top: 1px solid var(--docs-border);
}
.footerBranding {
font-size: rem(14px);
color: var(--docs-muted);
text-decoration: none;
@media (hover: hover) {
&:hover {
color: var(--docs-fg);
}
}
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: 2px;
border-radius: rem(2px);
}
}
/* ---------- Breadcrumbs ---------- */
.breadcrumbs {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: rem(4px);
font-size: rem(13px);
color: var(--docs-muted);
margin-bottom: rem(6px);
/* keep long trails clear of the pinned page actions */
padding-right: rem(160px);
@media (max-width: $mantine-breakpoint-sm) {
padding-right: 0;
}
}
.crumbLink {
color: var(--docs-muted);
text-decoration: none;
border-radius: rem(4px);
padding: rem(1px) rem(3px);
max-width: rem(220px);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
@media (hover: hover) {
&:hover {
color: var(--docs-accent);
}
}
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: 0;
}
}
.crumbSeparator {
color: light-dark(
var(--mantine-color-gray-4),
var(--mantine-color-dark-3)
);
user-select: none;
}
.crumbEllipsis {
color: var(--docs-muted);
border: 0;
background: none;
cursor: pointer;
border-radius: rem(4px);
padding: rem(1px) rem(4px);
@media (hover: hover) {
&:hover {
color: var(--docs-accent);
background-color: var(--docs-hover);
}
}
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: 0;
}
}
/* ---------- Byline ---------- */
/* Pulled up into the title's own bottom margin so it reads as one block. */
.byline {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: rem(8px);
margin-top: rem(-16px);
margin-bottom: rem(28px);
font-size: rem(13px);
color: var(--docs-muted);
}
.bylineAuthor {
display: inline-flex;
align-items: center;
gap: rem(6px);
}
.bylineDot {
color: var(--docs-faint);
user-select: none;
}
/* ---------- Prev / next ---------- */
.pageNav {
display: grid;
grid-template-columns: 1fr 1fr;
gap: rem(12px);
margin-top: rem(48px);
}
.pageNavCard {
display: flex;
flex-direction: column;
gap: rem(4px);
padding: rem(12px) rem(16px);
border: 1px solid var(--docs-border);
border-radius: rem(10px);
text-decoration: none;
min-width: 0;
transition: border-color 120ms ease;
@media (hover: hover) {
&:hover {
border-color: var(--docs-accent);
}
&:hover .pageNavTitle {
color: var(--docs-accent);
}
}
&:focus-visible {
outline: 2px solid var(--docs-accent);
outline-offset: 1px;
}
}
.pageNavCard[data-direction="next"] {
grid-column: 2;
align-items: flex-end;
text-align: right;
}
.pageNavLabel {
display: inline-flex;
align-items: center;
gap: rem(4px);
font-size: rem(12px);
color: var(--docs-muted);
}
.pageNavTitle {
font-size: rem(14px);
font-weight: 500;
color: var(--docs-fg);
max-width: 100%;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 120ms ease;
}
@media (max-width: $mantine-breakpoint-sm) {
.pageNav {
grid-template-columns: 1fr;
}
.pageNavCard[data-direction="next"] {
grid-column: auto;
}
}
/* ---------- Content ---------- */
/* Reading typography: body copy softens to a blue-gray with relaxed leading
* while headings and bold keep full contrast. Class doubled to outrank the
* shared .public-typography metrics regardless of stylesheet order. */
.root.root :global(.ProseMirror) {
color: var(--docs-content-fg);
line-height: 1.75;
letter-spacing: normal;
/* The article owns horizontal spacing here; the editor's 3rem gutter would
* misalign content with the breadcrumb, and its own background bands
* against the off-white page. */
padding-left: 0;
padding-right: 0;
background-color: transparent;
}
/* Wide columns bleed into the editor gutter that no longer exists here. */
.root.root :global(div[data-type="columns"][data-width-mode="wide"]) {
margin-left: 0;
margin-right: 0;
width: 100%;
}
/* One ink by inheritance: Mantine's baseline gives headings an explicit
* color, which forks them from the body. Neutralize instead of re-declaring,
* so changing the single content foreground repaints all text. */
.root.root :global(.ProseMirror) h1,
.root.root :global(.ProseMirror) h2,
.root.root :global(.ProseMirror) h3,
.root.root :global(.ProseMirror) h4,
.root.root :global(.ProseMirror) h5,
.root.root :global(.ProseMirror) h6,
.root.root :global(.ProseMirror) strong {
color: inherit;
}
/* Modest semibold heading scale (Cloudflare-style); class doubled to outrank
* the shared editor and .public-typography rules. */
.root.root :global(.ProseMirror) h1 {
font-size: 2.1875rem;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.25;
}
.root.root :global(.ProseMirror) h2 {
font-size: 1.3rem;
font-weight: 600;
letter-spacing: -0.015em;
line-height: 1.4;
}
.root.root :global(.ProseMirror) h3 {
font-size: 1.1rem;
font-weight: 600;
letter-spacing: -0.01em;
line-height: 1.45;
}
.root.root :global(.ProseMirror) h4,
.root.root :global(.ProseMirror) h5,
.root.root :global(.ProseMirror) h6 {
font-size: 1rem;
font-weight: 600;
line-height: 1.5;
}
.root.root :global(.ProseMirror) strong {
font-weight: 600;
}
.root.root :global(.page-title .ProseMirror) h1 {
font-size: 2.1875rem;
font-weight: 600;
letter-spacing: -0.025em;
line-height: 1.25;
}
.root :global(.ProseMirror) a {
color: var(--docs-accent);
}
/* Internal page links (mentions, subpages lists) follow the accent like any
* other link; the app skin pins them to ink with !important, hence the
* counter-!important, and the underline tint softens to match. */
.root :global(.ProseMirror) a[class*="pageMentionLink"] {
color: var(--docs-accent) !important;
}
.root :global(.ProseMirror) [class*="pageMentionText"] {
border-bottom-color: color-mix(in srgb, var(--docs-accent) 40%, transparent);
}
.root :global(.ProseMirror) h1,
.root :global(.ProseMirror) h2,
.root :global(.ProseMirror) h3,
.root :global(.ProseMirror) h4 {
scroll-margin-top: calc(var(--docs-header-h) + rem(16px));
}
/* ---------- Content tables ---------- */
/* The wrapper carries the rounded outer border so border-collapse never
* fights border-radius; its overflow-x clips the corners. */
.root.root :global(.ProseMirror .tableWrapper) {
border: 1px solid var(--docs-border);
border-radius: rem(10px);
}
.root.root :global(.ProseMirror table td),
.root.root :global(.ProseMirror table th) {
border: 0;
border-bottom: 1px solid var(--docs-border);
border-right: 1px solid var(--docs-border);
padding: rem(10px) rem(14px);
}
.root.root :global(.ProseMirror table :is(td, th):last-child) {
border-right: 0;
}
.root.root :global(.ProseMirror table tr:last-child td),
.root.root :global(.ProseMirror table tr:last-child th) {
border-bottom: 0;
}
.root.root :global(.ProseMirror table th) {
background-color: var(--docs-hover);
color: var(--docs-fg);
font-weight: 600;
}
/* Round the corner cells too for the no-overflow (pinned header) variant,
* where the wrapper does not clip. */
.root.root :global(.ProseMirror table tr:first-child :is(th, td):first-child) {
border-top-left-radius: rem(9px);
}
.root.root :global(.ProseMirror table tr:first-child :is(th, td):last-child) {
border-top-right-radius: rem(9px);
}
.root.root :global(.ProseMirror table tr:last-child :is(th, td):first-child) {
border-bottom-left-radius: rem(9px);
}
.root.root :global(.ProseMirror table tr:last-child :is(th, td):last-child) {
border-bottom-right-radius: rem(9px);
}
.emptyState {
padding-top: rem(96px);
text-align: center;
color: var(--docs-muted);
}
/* ---------- Mobile drawers ---------- */
.drawerTree {
height: calc(100dvh - rem(60px));
display: flex;
flex-direction: column;
}
apps/client/src/features/public-space/components/public-space-layout.tsx
+69
View File
@@ -0,0 +1,69 @@
import "@fontsource-variable/inter";
import "@/styles/public-typography.css";
import { useEffect, useMemo } from "react";
import { Outlet, useParams } from "react-router-dom";
import { useSetAtom } from "jotai";
import { usePublicSpaceTreeQuery } from "@/features/public-space/queries/public-space-query.ts";
import { buildSharedPageTree } from "@/features/share/utils.ts";
import {
publicSpaceTreeAtom,
publicSpaceTreeDataAtom,
} from "@/features/public-space/atoms/public-space-atoms.ts";
import { useDocsAccent } from "@/features/public-space/theme/docs-theme.ts";
import DocsShell from "@/features/public-space/components/docs/docs-shell.tsx";
import { DocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
import { PublicSpaceSearchSpotlight } from "@/features/search/components/public-space-search-spotlight.tsx";
import { publicSpaceSearchSpotlight } from "@/features/search/constants";
export default function PublicSpaceLayout() {
const { spaceSlug } = useParams();
const { data } = usePublicSpaceTreeQuery(spaceSlug);
useDocsAccent(data?.appearance);
const setPublicSpaceTree = useSetAtom(publicSpaceTreeAtom);
const setPublicSpaceTreeData = useSetAtom(publicSpaceTreeDataAtom);
const treeData = useMemo(() => {
if (!data?.pageTree) return null;
return buildSharedPageTree(data.pageTree);
}, [data?.pageTree]);
useEffect(() => {
setPublicSpaceTree(data || null);
setPublicSpaceTreeData(treeData);
}, [data, treeData, setPublicSpaceTree, setPublicSpaceTreeData]);
const surface = useMemo<DocsSurface>(() => {
const homeUrl = buildPublicSpaceUrl({ spaceSlug });
// The first root page is the space home, served at the bare space URL.
const firstRootSlugId = treeData?.[0]?.slugId;
return {
treeData,
hasSidebar: (data?.pageTree?.length ?? 0) > 1,
siteName: data?.space?.name,
homeUrl,
getNodeUrl: (node) =>
node.slugId === firstRootSlugId
? homeUrl
: buildPublicSpaceUrl({
spaceSlug,
pageSlugId: node.slugId,
pageTitle: node.name,
}),
showBranding: Boolean(data),
showEditPage: true,
};
}, [data, treeData, spaceSlug]);
return (
<DocsShell
surface={surface}
onSearchOpen={publicSpaceSearchSpotlight.open}
searchSpotlight={<PublicSpaceSearchSpotlight spaceSlug={spaceSlug} />}
>
<Outlet />
</DocsShell>
);
}
apps/client/src/features/public-space/components/publish-space-settings.tsx
+283
View File
@@ -0,0 +1,283 @@
import { ActionIcon, Group, Text, Switch, TextInput } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useAtom } from "jotai";
import React, { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
import { IconExternalLink, IconWorld } from "@tabler/icons-react";
import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
import { ISpace } from "@/features/space/types/space.types.ts";
import { IPublicSpace } from "@/features/public-space/types/public-space.types.ts";
import {
usePublicSpaceForSpaceQuery,
usePublishSpaceMutation,
} from "@/features/public-space/queries/public-space-query.ts";
import { getAppUrl } from "@/lib/config.ts";
import CopyTextButton from "@/components/common/copy.tsx";
import AppearanceSettings from "@/features/public-space/components/appearance-settings.tsx";
import { isPublicSpacesAllowed } from "@/features/public-space/utils/public-space-access.ts";
type PublishSpaceSettingsProps = {
space: ISpace;
};
export default function PublishSpaceSettings({
space,
}: PublishSpaceSettingsProps) {
const { t } = useTranslation();
const [workspace] = useAtom(workspaceAtom);
const allowPublicSpaces = isPublicSpacesAllowed(workspace);
const { data: publicSpace } = usePublicSpaceForSpaceQuery(
allowPublicSpaces ? space?.id : undefined,
);
const publishMutation = usePublishSpaceMutation();
const [published, setPublished] = useState(false);
const [searchIndexing, setSearchIndexing] = useState(false);
const [bylineAuthor, setBylineAuthor] = useState(false);
const [bylineUpdatedAt, setBylineUpdatedAt] = useState(true);
const [directoryListed, setDirectoryListed] = useState(false);
const workspaceDirectoryEnabled =
workspace?.settings?.publicSpaces?.directory === true;
const syncFromPublicSpace = (state?: IPublicSpace | null) => {
const byline = state?.settings?.byline;
setPublished(state?.enabled === true);
setSearchIndexing(state?.searchIndexing === true);
setBylineAuthor(byline?.author === true);
setBylineUpdatedAt(byline?.updatedAt !== false);
setDirectoryListed(state?.settings?.directory === true);
};
useEffect(() => {
syncFromPublicSpace(publicSpace);
}, [publicSpace]);
if (!allowPublicSpaces || !space) {
return null;
}
const publicUrl = `${getAppUrl()}/docs/${space.slug}`;
const applyPublish = async (enabled: boolean) => {
try {
const result = await publishMutation.mutateAsync({
spaceId: space.id,
enabled,
});
syncFromPublicSpace(result);
} catch {
// error handled by mutation
}
};
const handlePublishChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.currentTarget.checked;
if (!value) {
applyPublish(false);
return;
}
modals.openConfirmModal({
title: t("Publish space to the web"),
children: (
<Text size="sm">
{t(
"Anyone on the internet will be able to read every page in this space, except restricted pages. Are you sure?",
)}
</Text>
),
centered: true,
labels: { confirm: t("Publish"), cancel: t("Cancel") },
onConfirm: () => applyPublish(true),
});
};
const handleIndexingChange = async (
event: React.ChangeEvent<HTMLInputElement>,
) => {
const value = event.currentTarget.checked;
try {
await publishMutation.mutateAsync({
spaceId: space.id,
enabled: true,
searchIndexing: value,
});
setSearchIndexing(value);
} catch {
// error handled by mutation
}
};
const handleBylineAuthorChange = async (
event: React.ChangeEvent<HTMLInputElement>,
) => {
const value = event.currentTarget.checked;
try {
await publishMutation.mutateAsync({
spaceId: space.id,
enabled: true,
bylineAuthor: value,
});
setBylineAuthor(value);
} catch {
// error handled by mutation
}
};
const handleBylineUpdatedAtChange = async (
event: React.ChangeEvent<HTMLInputElement>,
) => {
const value = event.currentTarget.checked;
try {
await publishMutation.mutateAsync({
spaceId: space.id,
enabled: true,
bylineUpdatedAt: value,
});
setBylineUpdatedAt(value);
} catch {
// error handled by mutation
}
};
const handleDirectoryChange = async (
event: React.ChangeEvent<HTMLInputElement>,
) => {
const value = event.currentTarget.checked;
try {
await publishMutation.mutateAsync({
spaceId: space.id,
enabled: true,
directory: value,
});
setDirectoryListed(value);
} catch {
// error handled by mutation
}
};
return (
<div>
<Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
<div>
<Text size="md">{t("Publish space to the web")}</Text>
<Text size="sm" c="dimmed">
{t("Make this space publicly readable by anyone on the internet.")}
</Text>
</div>
<Switch
checked={published}
onChange={handlePublishChange}
size={"xs"}
aria-label={t("Toggle publish space to the web")}
/>
</Group>
{published && (
<>
<Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
<div>
<Text size="md">{t("Allow search engines to index")}</Text>
<Text size="sm" c="dimmed">
{t(
"Let public pages in this space appear in search engine results.",
)}
</Text>
</div>
<Switch
checked={searchIndexing}
onChange={handleIndexingChange}
size={"xs"}
aria-label={t("Toggle search engine indexing")}
/>
</Group>
<Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
<div>
<Text size="md">{t("Show page author")}</Text>
<Text size="sm" c="dimmed">
{t("Display the page creator's name on public pages.")}
</Text>
</div>
<Switch
checked={bylineAuthor}
onChange={handleBylineAuthorChange}
size={"xs"}
aria-label={t("Toggle show page author")}
/>
</Group>
<Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
<div>
<Text size="md">{t("Show last updated")}</Text>
<Text size="sm" c="dimmed">
{t("Display when each page was last updated.")}
</Text>
</div>
<Switch
checked={bylineUpdatedAt}
onChange={handleBylineUpdatedAtChange}
size={"xs"}
aria-label={t("Toggle show last updated")}
/>
</Group>
{workspaceDirectoryEnabled && (
<Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
<div>
<Text size="md">{t("Show in public directory")}</Text>
<Text size="sm" c="dimmed">
{t("List this space in the public directory at /docs.")}
</Text>
</div>
<Switch
checked={directoryListed}
onChange={handleDirectoryChange}
size={"xs"}
aria-label={t("Toggle show in public directory")}
/>
</Group>
)}
<Group mt="md" gap={4} wrap="nowrap">
<TextInput
value={publicUrl}
readOnly
style={{ width: "100%" }}
leftSection={<IconWorld size={16} />}
aria-label={t("Public space link")}
rightSection={
<CopyTextButton
text={publicUrl}
label={t("Copy public space link")}
/>
}
/>
<ActionIcon
component="a"
variant="default"
size="input-sm"
target="_blank"
href={publicUrl}
aria-label={t("Open public space link")}
>
<IconExternalLink size={16} />
</ActionIcon>
</Group>
<Text size="sm" c="dimmed" mt="xs">
{t("Renaming the space slug will break public links.")}
</Text>
<AppearanceSettings
spaceId={space.id}
appearance={publicSpace?.settings?.appearance}
/>
</>
)}
</div>
);
}
apps/client/src/features/public-space/components/published-spaces-list.tsx
+210
View File
@@ -0,0 +1,210 @@
import { Table, Group, Text, Anchor, Menu, ActionIcon } from "@mantine/core";
import React from "react";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { modals } from "@mantine/modals";
import { notifications } from "@mantine/notifications";
import {
IconCopy,
IconDots,
IconExternalLink,
IconWorld,
IconWorldOff,
} from "@tabler/icons-react";
import Paginate from "@/components/common/paginate.tsx";
import { useCursorPaginate } from "@/hooks/use-cursor-paginate";
import {
usePublishedSpacesQuery,
usePublishSpaceMutation,
} from "@/features/public-space/queries/public-space-query.ts";
import { IPublishedSpaceItem } from "@/features/public-space/types/public-space.types.ts";
import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
import { getAppUrl, getSpaceUrl } from "@/lib/config.ts";
import { useClipboard } from "@/hooks/use-clipboard";
import { formatLocalized, useDateFnsLocale } from "@/lib/date-locale.ts";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
import { EmptyState } from "@/components/ui/empty-state.tsx";
import rowClasses from "@/components/ui/clickable-table-row.module.css";
export default function PublishedSpacesList() {
const { t } = useTranslation();
const { cursor, goNext, goPrev } = useCursorPaginate();
const { data, isLoading } = usePublishedSpacesQuery({ cursor });
const locale = useDateFnsLocale();
if (!isLoading && data?.items.length === 0) {
return <EmptyState icon={IconWorld} title={t("No published spaces")} />;
}
return (
<>
<Table.ScrollContainer minWidth={500}>
<Table verticalSpacing="xs">
<Table.Thead>
<Table.Tr>
<Table.Th>{t("Space")}</Table.Th>
<Table.Th>{t("Published by")}</Table.Th>
<Table.Th>{t("Published at")}</Table.Th>
</Table.Tr>
</Table.Thead>
<Table.Tbody>
{data?.items.map((item: IPublishedSpaceItem) => (
<Table.Tr key={item.id} className={rowClasses.row}>
<Table.Td>
<Anchor
size="sm"
underline="never"
style={{
cursor: "pointer",
color: "var(--mantine-color-text)",
}}
className={rowClasses.link}
href={buildPublicSpaceUrl({ spaceSlug: item.space.slug })}
target="_blank"
>
<Group gap="8" wrap="nowrap">
<CustomAvatar
name={item.space.name}
avatarUrl={item.space.logo}
type={AvatarIconType.SPACE_ICON}
color="initials"
variant="filled"
size={20}
radius="sm"
/>
<Text fz="sm" fw={500} lineClamp={1}>
{item.space.name}
</Text>
</Group>
</Anchor>
</Table.Td>
<Table.Td>
<Group gap="4" wrap="nowrap">
<CustomAvatar
avatarUrl={item.creator?.avatarUrl}
name={item.creator?.name}
size="sm"
/>
<Text fz="sm" lineClamp={1}>
{item.creator?.name}
</Text>
</Group>
</Table.Td>
<Table.Td>
<Text fz="sm" style={{ whiteSpace: "nowrap" }}>
{formatLocalized(
item.createdAt,
"MMM dd, yyyy",
"PP",
locale,
)}
</Text>
</Table.Td>
<Table.Td>
<PublishedSpaceActionMenu item={item} />
</Table.Td>
</Table.Tr>
))}
</Table.Tbody>
</Table>
</Table.ScrollContainer>
{data?.items.length > 0 && (
<Paginate
hasPrevPage={data?.meta?.hasPrevPage}
hasNextPage={data?.meta?.hasNextPage}
onNext={() => goNext(data?.meta?.nextCursor)}
onPrev={goPrev}
/>
)}
</>
);
}
function PublishedSpaceActionMenu({ item }: { item: IPublishedSpaceItem }) {
const { t } = useTranslation();
const navigate = useNavigate();
const clipboard = useClipboard();
const publishMutation = usePublishSpaceMutation();
const publicPath = buildPublicSpaceUrl({ spaceSlug: item.space.slug });
const copyLink = () => {
clipboard.copy(`${getAppUrl()}${publicPath}`);
notifications.show({ message: t("Link copied") });
};
const onUnpublish = async () => {
try {
await publishMutation.mutateAsync({
spaceId: item.spaceId,
enabled: false,
});
} catch {
// error handled by mutation
}
};
const openUnpublishModal = () =>
modals.openConfirmModal({
title: t("Unpublish space"),
children: (
<Text size="sm">
{t(
"This space will no longer be publicly accessible. Are you sure?",
)}
</Text>
),
centered: true,
labels: { confirm: t("Unpublish"), cancel: t("Cancel") },
confirmProps: { color: "red" },
onConfirm: onUnpublish,
});
return (
<Menu
shadow="xl"
position="bottom-end"
offset={20}
width={200}
withArrow
arrowPosition="center"
>
<Menu.Target>
<ActionIcon
variant="subtle"
c="gray"
aria-label={t("More options for {{name}}", {
name: item.space.name,
})}
>
<IconDots size={20} stroke={2} />
</ActionIcon>
</Menu.Target>
<Menu.Dropdown>
<Menu.Item onClick={copyLink} leftSection={<IconCopy size={16} />}>
{t("Copy link")}
</Menu.Item>
<Menu.Item
onClick={() => navigate(getSpaceUrl(item.space.slug))}
leftSection={<IconExternalLink size={16} />}
>
{t("Open space")}
</Menu.Item>
<Menu.Item
c="red"
onClick={openUnpublishModal}
leftSection={<IconWorldOff size={16} />}
disabled={item.space?.userRole !== "admin"}
>
{t("Unpublish")}
</Menu.Item>
</Menu.Dropdown>
</Menu>
);
}
apps/client/src/features/public-space/components/space-public-notice.tsx
+47
View File
@@ -0,0 +1,47 @@
import { Alert, Anchor, Group, Text } from "@mantine/core";
import { IconExternalLink, IconWorld } from "@tabler/icons-react";
import { useTranslation } from "react-i18next";
import { ISpace } from "@/features/space/types/space.types.ts";
import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
import { isBetaPublicSpaces } from "@/lib/config.ts";
type SpacePublicNoticeProps = {
space: ISpace;
};
export default function SpacePublicNotice({ space }: SpacePublicNoticeProps) {
const { t } = useTranslation();
if (!isBetaPublicSpaces() || !space?.isPublished) {
return null;
}
return (
<Alert
variant="light"
color="blue"
icon={<IconWorld size={18} />}
title={t("This space is public")}
mb="lg"
>
<Group justify="space-between" gap="xs">
<Text size="sm">
{t(
"Anyone on the internet can read the pages in this space, except restricted pages.",
)}
</Text>
<Anchor
size="sm"
fw={500}
href={buildPublicSpaceUrl({ spaceSlug: space.slug })}
target="_blank"
rel="noopener"
style={{ display: "inline-flex", alignItems: "center", gap: 4 }}
>
{t("Open public site")}
<IconExternalLink size={14} />
</Anchor>
</Group>
</Alert>
);
}
apps/client/src/features/public-space/hooks/use-authenticated-user.ts
+14
View File
@@ -0,0 +1,14 @@
import { useQuery } from "@tanstack/react-query";
import { getMyInfo } from "@/features/user/services/user-service";
import { ICurrentUser } from "@/features/user/types/user.types";
/** Probes login state from public surfaces; the /docs 401 exemption keeps anonymous visitors off the login redirect. */
export function useAuthenticatedUser(enabled = true) {
return useQuery<ICurrentUser>({
queryKey: ["currentUser"],
queryFn: getMyInfo,
retry: false,
staleTime: 5 * 60 * 1000,
enabled,
});
}
apps/client/src/features/public-space/hooks/use-docs-current-page.ts
+23
View File
@@ -0,0 +1,23 @@
import { useMemo } from "react";
import { useParams } from "react-router-dom";
import { useDocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
import { flattenTreePreorder } from "@/features/public-space/utils/docs-tree.ts";
import { extractPageSlugId } from "@/lib";
import { SharedPageTreeNode } from "@/features/share/utils.ts";
export function useDocsCurrentPage(): SharedPageTreeNode | null {
const { pageSlug } = useParams();
const { treeData } = useDocsSurface();
return useMemo(() => {
if (!treeData?.length) return null;
const currentSlugId = pageSlug
? extractPageSlugId(pageSlug)
: treeData[0]?.slugId;
return (
flattenTreePreorder(treeData).find(
(node) => node.slugId === currentSlugId,
) ?? null
);
}, [treeData, pageSlug]);
}
apps/client/src/features/public-space/queries/public-space-query.ts
+109
View File
@@ -0,0 +1,109 @@
import {
keepPreviousData,
useMutation,
useQuery,
useQueryClient,
UseQueryResult,
} from "@tanstack/react-query";
import { notifications } from "@mantine/notifications";
import { useTranslation } from "react-i18next";
import {
getPublicSpaceDirectory,
getPublicSpaceForSpace,
getPublicSpacePage,
getPublicSpaceTree,
getPublishedSpaces,
publishSpace,
} from "@/features/public-space/services/public-space-service.ts";
import {
IPublicSpace,
IPublicSpaceDirectory,
IPublicSpacePage,
IPublicSpaceTree,
IPublishedSpaceItem,
IPublishSpace,
} from "@/features/public-space/types/public-space.types.ts";
import { IPagination, QueryParams } from "@/lib/types.ts";
export function usePublicSpaceTreeQuery(
spaceSlug: string,
): UseQueryResult<IPublicSpaceTree, Error> {
return useQuery({
queryKey: ["public-space-tree", spaceSlug],
queryFn: () => getPublicSpaceTree(spaceSlug),
enabled: !!spaceSlug,
placeholderData: keepPreviousData,
staleTime: 60 * 60 * 1000,
});
}
export function usePublicSpacePageQuery(params: {
spaceSlug: string;
pageSlugId?: string;
contentless?: boolean;
}): UseQueryResult<IPublicSpacePage, Error> {
return useQuery({
queryKey: ["public-space-page", params],
queryFn: () => getPublicSpacePage(params),
enabled: !!params.spaceSlug,
});
}
export function usePublicSpaceDirectoryQuery(): UseQueryResult<
IPublicSpaceDirectory,
Error
> {
return useQuery({
queryKey: ["public-space-directory"],
queryFn: () => getPublicSpaceDirectory(),
});
}
export function usePublicSpaceForSpaceQuery(
spaceId: string,
): UseQueryResult<IPublicSpace | null, Error> {
return useQuery({
queryKey: ["public-space-for-space", spaceId],
queryFn: () => getPublicSpaceForSpace(spaceId),
enabled: !!spaceId,
staleTime: 60 * 1000,
retry: false,
});
}
export function usePublishedSpacesQuery(
params?: QueryParams,
): UseQueryResult<IPagination<IPublishedSpaceItem>, Error> {
return useQuery({
queryKey: ["published-spaces", params],
queryFn: () => getPublishedSpaces(params),
placeholderData: keepPreviousData,
});
}
export function usePublishSpaceMutation() {
const { t } = useTranslation();
const queryClient = useQueryClient();
return useMutation<IPublicSpace, Error, IPublishSpace>({
mutationFn: (data) => publishSpace(data),
onSuccess: () => {
queryClient.invalidateQueries({
predicate: (item) =>
[
"public-space-for-space",
"published-spaces",
"space",
"spaces",
].includes(item.queryKey[0] as string),
});
},
onError: (error) => {
notifications.show({
message:
error?.["response"]?.data?.message || t("Failed to update space"),
color: "red",
});
},
});
}
apps/client/src/features/public-space/services/public-space-service.ts
+73
View File
@@ -0,0 +1,73 @@
import api from "@/lib/api-client";
import { IPagination, QueryParams } from "@/lib/types.ts";
import {
IPublicSpace,
IPublicSpaceDirectory,
IPublicSpaceInfo,
IPublicSpacePage,
IPublicSpaceTree,
IPublishedSpaceItem,
IPublishSpace,
} from "@/features/public-space/types/public-space.types.ts";
export async function getPublishedSpaces(
params?: QueryParams,
): Promise<IPagination<IPublishedSpaceItem>> {
const req = await api.post<IPagination<IPublishedSpaceItem>>(
"/public-spaces",
params,
);
return req.data;
}
export async function getPublicSpaceInfo(
spaceSlug: string,
): Promise<IPublicSpaceInfo> {
const req = await api.post<IPublicSpaceInfo>("/public-spaces/info", {
spaceSlug,
});
return req.data;
}
export async function getPublicSpaceTree(
spaceSlug: string,
): Promise<IPublicSpaceTree> {
const req = await api.post<IPublicSpaceTree>("/public-spaces/tree", {
spaceSlug,
});
return req.data;
}
export async function getPublicSpacePage(params: {
spaceSlug: string;
pageSlugId?: string;
contentless?: boolean;
}): Promise<IPublicSpacePage> {
const req = await api.post<IPublicSpacePage>(
"/public-spaces/page-info",
params,
);
return req.data;
}
export async function getPublicSpaceDirectory(): Promise<IPublicSpaceDirectory> {
const req = await api.post<IPublicSpaceDirectory>(
"/public-spaces/directory",
{},
);
return req.data;
}
export async function getPublicSpaceForSpace(
spaceId: string,
): Promise<IPublicSpace | null> {
const req = await api.post<IPublicSpace | null>("/public-spaces/for-space", {
spaceId,
});
return req.data;
}
export async function publishSpace(data: IPublishSpace): Promise<IPublicSpace> {
const req = await api.post<IPublicSpace>("/public-spaces/publish", data);
return req.data;
}
apps/client/src/features/public-space/theme/docs-theme.ts
+91
View File
@@ -0,0 +1,91 @@
import { useEffect } from "react";
import { useComputedColorScheme } from "@mantine/core";
import { IPublicSpaceAppearance } from "@/features/public-space/types/public-space.types.ts";
export type DocsThemePreset = {
id: string;
nameKey: string;
light: string;
dark: string;
};
export const DOCS_THEME_PRESETS: DocsThemePreset[] = [
{ id: "default", nameKey: "Default", light: "#2b7af1", dark: "#6ea6f6" },
{ id: "forest", nameKey: "Forest", light: "#0f766e", dark: "#2dd4bf" },
{ id: "violet", nameKey: "Violet", light: "#6d28d9", dark: "#a78bfa" },
{ id: "ember", nameKey: "Ember", light: "#c2410c", dark: "#fb923c" },
{ id: "rose", nameKey: "Rose", light: "#be123c", dark: "#fb7185" },
];
export const DEFAULT_DOCS_PRESET = DOCS_THEME_PRESETS[0];
const HEX_COLOR_REGEX = /^#[0-9a-fA-F]{6}$/;
export function isValidDocsColor(value: unknown): value is string {
return typeof value === "string" && HEX_COLOR_REGEX.test(value);
}
export function resolveDocsAccent(
appearance: IPublicSpaceAppearance | undefined,
scheme: "light" | "dark",
): string {
const custom =
scheme === "dark"
? appearance?.primaryColorDark
: appearance?.primaryColorLight;
if (isValidDocsColor(custom)) return custom;
return scheme === "dark"
? DEFAULT_DOCS_PRESET.dark
: DEFAULT_DOCS_PRESET.light;
}
export function matchDocsPreset(
appearance: IPublicSpaceAppearance | undefined,
): DocsThemePreset | null {
const light = appearance?.primaryColorLight;
const dark = appearance?.primaryColorDark;
if (!light && !dark) return DEFAULT_DOCS_PRESET;
return (
DOCS_THEME_PRESETS.find(
(preset) =>
preset.light.toLowerCase() === light?.toLowerCase() &&
preset.dark.toLowerCase() === dark?.toLowerCase(),
) ?? null
);
}
// Set on documentElement (not the shell root) so portaled Mantine surfaces on
// /docs routes (spotlight, drawers) follow the space accent too.
const ACCENT_VARIABLES = (accent: string): Record<string, string> => ({
"--docs-accent": accent,
"--docs-accent-soft": `color-mix(in srgb, ${accent} 10%, transparent)`,
"--mantine-primary-color-filled": accent,
"--mantine-primary-color-filled-hover": `color-mix(in srgb, ${accent} 85%, black)`,
"--mantine-primary-color-light": `color-mix(in srgb, ${accent} 10%, transparent)`,
"--mantine-primary-color-light-hover": `color-mix(in srgb, ${accent} 15%, transparent)`,
"--mantine-primary-color-light-color": accent,
"--mantine-color-anchor": accent,
});
export function useDocsAccent(appearance: IPublicSpaceAppearance | undefined) {
const scheme = useComputedColorScheme("light");
const light = appearance?.primaryColorLight;
const dark = appearance?.primaryColorDark;
useEffect(() => {
const accent = resolveDocsAccent(
{ primaryColorLight: light, primaryColorDark: dark },
scheme,
);
const root = document.documentElement;
const variables = ACCENT_VARIABLES(accent);
for (const [name, value] of Object.entries(variables)) {
root.style.setProperty(name, value);
}
return () => {
for (const name of Object.keys(variables)) {
root.style.removeProperty(name);
}
};
}, [light, dark, scheme]);
}
apps/client/src/features/public-space/types/public-space.types.ts
+105
View File
@@ -0,0 +1,105 @@
import { IPage } from "@/features/page/types/page.types.ts";
export interface IPublicSpaceSummary {
id: string;
name: string;
slug: string;
description?: string;
logo?: string;
}
export interface IPublicSpaceAppearance {
primaryColorLight?: string;
primaryColorDark?: string;
}
export interface IPublicSpaceByline {
author: boolean;
updatedAt: boolean;
}
export interface IPublicSpaceInfo {
space: IPublicSpaceSummary;
searchIndexing: boolean;
appearance?: IPublicSpaceAppearance;
features?: string[];
}
export interface IPublicSpaceTree {
space: IPublicSpaceSummary;
pageTree: Partial<IPage[]>;
appearance?: IPublicSpaceAppearance;
features?: string[];
}
export interface IPublicSpacePage {
page: IPage | null;
space: IPublicSpaceSummary;
searchIndexing: boolean;
appearance?: IPublicSpaceAppearance;
byline?: IPublicSpaceByline;
features?: string[];
}
export interface IPublicSpace {
id: string;
spaceId: string;
workspaceId: string;
enabled: boolean;
searchIndexing: boolean;
settings?: {
appearance?: IPublicSpaceAppearance;
byline?: Partial<IPublicSpaceByline>;
directory?: boolean;
} | null;
creatorId?: string;
createdAt: string;
updatedAt: string;
}
export interface IPublishedSpaceItem {
id: string;
spaceId: string;
workspaceId: string;
searchIndexing: boolean;
settings?: IPublicSpace["settings"];
createdAt: string;
updatedAt: string;
space: {
id: string;
name: string;
slug: string;
logo?: string;
userRole: string;
};
creator: {
id: string;
name: string;
avatarUrl: string | null;
};
}
export interface IPublishSpace {
spaceId: string;
enabled: boolean;
searchIndexing?: boolean;
appearance?: {
primaryColorLight?: string | null;
primaryColorDark?: string | null;
};
bylineAuthor?: boolean;
bylineUpdatedAt?: boolean;
directory?: boolean;
}
export interface IPublicSpaceDirectoryEntry {
name: string;
slug: string;
description?: string;
logo?: string;
}
export interface IPublicSpaceDirectory {
spaces: IPublicSpaceDirectoryEntry[];
features?: string[];
}
apps/client/src/features/public-space/utils/docs-tree.ts
+39
View File
@@ -0,0 +1,39 @@
import { SharedPageTreeNode } from "@/features/share/utils.ts";
// Preorder walk of the whole tree, matching the sidebar's visual order. Drives
// prev/next navigation independently of which nodes are expanded.
export function flattenTreePreorder(
nodes: SharedPageTreeNode[],
): SharedPageTreeNode[] {
const out: SharedPageTreeNode[] = [];
const walk = (list: SharedPageTreeNode[]) => {
for (const node of list) {
out.push(node);
if (node.children?.length) walk(node.children);
}
};
walk(nodes);
return out;
}
// Ancestors of the node with the given slugId, root-first, excluding the node
// itself. Null when the slugId is not in the tree.
export function findAncestorTrail(
nodes: SharedPageTreeNode[],
slugId: string,
): SharedPageTreeNode[] | null {
const walk = (
list: SharedPageTreeNode[],
trail: SharedPageTreeNode[],
): SharedPageTreeNode[] | null => {
for (const node of list) {
if (node.slugId === slugId) return trail;
if (node.children?.length) {
const found = walk(node.children, [...trail, node]);
if (found) return found;
}
}
return null;
};
return walk(nodes, []);
}
apps/client/src/features/public-space/utils/public-space-access.ts
+8
View File
@@ -0,0 +1,8 @@
import { isBetaPublicSpaces } from "@/lib/config.ts";
import { IWorkspace } from "@/features/workspace/types/workspace.types.ts";
export function isPublicSpacesAllowed(workspace?: IWorkspace): boolean {
return (
isBetaPublicSpaces() && workspace?.settings?.publicSpaces?.enabled === true
);
}
apps/client/src/features/search/components/public-space-search-spotlight.tsx
+112
View File
@@ -0,0 +1,112 @@
import { Group, Center, Text, Button } from "@mantine/core";
import { Spotlight } from "@mantine/spotlight";
import { IconLetterCase, IconSearch } from "@tabler/icons-react";
import React, { useState } from "react";
import { Link } from "react-router-dom";
import { useDebouncedValue } from "@mantine/hooks";
import { usePublicSpaceSearchQuery } from "@/features/search/queries/search-query";
import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
import { getPageIcon } from "@/lib";
import { useTranslation } from "react-i18next";
import { publicSpaceSearchSpotlightStore } from "@/features/search/constants.ts";
import DOMPurify from "dompurify";
interface PublicSpaceSearchSpotlightProps {
spaceSlug: string;
}
export function PublicSpaceSearchSpotlight({
spaceSlug,
}: PublicSpaceSearchSpotlightProps) {
const { t } = useTranslation();
const [query, setQuery] = useState("");
const [titleOnly, setTitleOnly] = useState(false);
const [debouncedSearchQuery] = useDebouncedValue(query, 300);
const { data: searchResults } = usePublicSpaceSearchQuery({
query: debouncedSearchQuery,
spaceSlug,
...(titleOnly && { titleOnly: true }),
});
const pages = (
searchResults && searchResults.length > 0 ? searchResults : []
).map((page) => (
<Spotlight.Action
key={page.id}
component={Link}
//@ts-ignore
to={buildPublicSpaceUrl({
spaceSlug: spaceSlug,
pageTitle: page.title,
pageSlugId: page.slugId,
})}
style={{ userSelect: "none" }}
>
<Group wrap="nowrap" w="100%">
<Center>{getPageIcon(page?.icon)}</Center>
<div style={{ flex: 1 }}>
<Text>{page.title}</Text>
{page?.highlight && (
<Text
opacity={0.6}
size="xs"
dangerouslySetInnerHTML={{
__html: DOMPurify.sanitize(page.highlight, {
ALLOWED_TAGS: ["mark", "em", "strong", "b"],
ALLOWED_ATTR: [],
}),
}}
/>
)}
</div>
</Group>
</Spotlight.Action>
));
return (
<>
<Spotlight.Root
store={publicSpaceSearchSpotlightStore}
query={query}
onQueryChange={setQuery}
scrollable
overlayProps={{
backgroundOpacity: 0.55,
}}
>
<Spotlight.Search
placeholder={t("Search...")}
aria-label={t("Search")}
leftSection={<IconSearch size={20} stroke={1.5} />}
/>
<Group px="sm" py={6}>
<Button
variant={titleOnly ? "light" : "subtle"}
color={titleOnly ? undefined : "gray"}
size="compact-sm"
radius="xl"
fw={500}
leftSection={<IconLetterCase size={15} />}
aria-pressed={titleOnly}
onClick={() => setTitleOnly((value) => !value)}
>
{t("Title only")}
</Button>
</Group>
<Spotlight.ActionsList>
{query.length === 0 && pages.length === 0 && (
<Spotlight.Empty>{t("Start typing to search...")}</Spotlight.Empty>
)}
{query.length > 0 && pages.length === 0 && (
<Spotlight.Empty>{t("No results found...")}</Spotlight.Empty>
)}
{pages.length > 0 && pages}
</Spotlight.ActionsList>
</Spotlight.Root>
</>
);
}
apps/client/src/features/search/constants.ts
+3
View File
@@ -5,3 +5,6 @@ export const [searchSpotlightStore, searchSpotlight] = createSpotlight();
export const [shareSearchSpotlightStore, shareSearchSpotlight] =
createSpotlight();
export const [publicSpaceSearchSpotlightStore, publicSpaceSearchSpotlight] =
createSpotlight();
apps/client/src/features/search/queries/search-query.ts
+11
View File
@@ -2,6 +2,7 @@ import { keepPreviousData, useQuery, UseQueryResult } from "@tanstack/react-quer
import {
searchAttachments,
searchPage,
searchPublicSpace,
searchShare,
searchSuggestions,
} from '@/features/search/services/search-service';
@@ -55,3 +56,13 @@ export function useAttachmentSearchQuery(
enabled: !!params.query,
});
}
export function usePublicSpaceSearchQuery(
params: IPageSearchParams & { spaceSlug: string },
): UseQueryResult<IPageSearch[], Error> {
return useQuery({
queryKey: ["public-space-search", params],
queryFn: () => searchPublicSpace(params),
enabled: !!params.query && !!params.spaceSlug,
});
}
apps/client/src/features/search/services/search-service.ts
+10
View File
@@ -28,6 +28,16 @@ export async function searchShare(
return req.data.items;
}
export async function searchPublicSpace(
params: IPageSearchParams & { spaceSlug: string },
): Promise<IPageSearch[]> {
const req = await api.post<{ items: IPageSearch[] }>(
"/search/public-space-search",
params,
);
return req.data.items;
}
export async function searchAttachments(
params: IPageSearchParams,
): Promise<IAttachmentSearch[]> {
apps/client/src/features/share/atoms/open-shared-tree-nodes-atom.ts
-3
View File
@@ -1,3 +0,0 @@
import { atom } from "jotai";
export const openSharedTreeNodesAtom = atom<Record<string, boolean>>({});
apps/client/src/features/share/atoms/shared-page-atom.ts
+6 -7
View File
@@ -1,11 +1,10 @@
import { atom } from "jotai";
import { atomWithStorage } from "jotai/utils";
import { ISharedPageTree } from "@/features/share/types/share.types";
import { SharedPageTreeNode } from "@/features/share/utils";
export const sharedPageTreeAtom = atom<ISharedPageTree | null>(null);
export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(null);
export const sharedPageFullWidthAtom = atomWithStorage<boolean>(
"sharedPageFullWidth",
false,
);
export const sharedPageTreeAtom = atom<ISharedPageTree | null>(
null as ISharedPageTree | null,
);
export const sharedTreeDataAtom = atom<SharedPageTreeNode[] | null>(
null as SharedPageTreeNode[] | null,
);
apps/client/src/features/share/atoms/sidebar-atom.ts
-9
View File
@@ -1,9 +0,0 @@
import { atomWithWebStorage } from "@/lib/jotai-helper.ts";
import { atom } from 'jotai';
export const tableOfContentAsideAtom = atomWithWebStorage<boolean>(
"showTOC",
true,
);
export const mobileTableOfContentAsideAtom = atom<boolean>(false);
apps/client/src/features/share/components/share-branding.tsx
-16
View File
@@ -1,16 +0,0 @@
import { Affix, Button } from "@mantine/core";
export default function ShareBranding() {
return (
<Affix position={{ bottom: 20, right: 20 }}>
<Button
variant="default"
component="a"
target="_blank"
href="https://docmost.com?ref=public-share"
>
Powered by Docmost
</Button>
</Affix>
);
}
apps/client/src/features/share/components/share-layout.tsx
+61 -4
View File
@@ -1,10 +1,67 @@
import { Outlet } from "react-router-dom";
import ShareShell from "@/features/share/components/share-shell.tsx";
import "@fontsource-variable/inter";
import "@/styles/public-typography.css";
import { useEffect, useMemo } from "react";
import { Outlet, useParams } from "react-router-dom";
import { useSetAtom } from "jotai";
import { useGetSharedPageTreeQuery } from "@/features/share/queries/share-query.ts";
import { buildSharedPageTree } from "@/features/share/utils.ts";
import {
sharedPageTreeAtom,
sharedTreeDataAtom,
} from "@/features/share/atoms/shared-page-atom.ts";
import DocsShell from "@/features/public-space/components/docs/docs-shell.tsx";
import { DocsSurface } from "@/features/public-space/components/docs/docs-surface-context.tsx";
import { useDocsAccent } from "@/features/public-space/theme/docs-theme.ts";
import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
import { ShareSearchSpotlight } from "@/features/search/components/share-search-spotlight.tsx";
import { shareSearchSpotlight } from "@/features/search/constants";
export default function ShareLayout() {
const { shareId } = useParams();
const { data } = useGetSharedPageTreeQuery(shareId);
// Shares have no appearance settings; apply the default docs accent.
useDocsAccent(undefined);
const setSharedPageTree = useSetAtom(sharedPageTreeAtom);
const setSharedTreeData = useSetAtom(sharedTreeDataAtom);
const treeData = useMemo(() => {
if (!data?.pageTree) return null;
return buildSharedPageTree(data.pageTree);
}, [data?.pageTree]);
useEffect(() => {
setSharedPageTree(data || null);
setSharedTreeData(treeData);
}, [data, treeData, setSharedPageTree, setSharedTreeData]);
const surface = useMemo<DocsSurface>(
() => ({
treeData,
hasSidebar: (data?.pageTree?.length ?? 0) > 1,
getNodeUrl: (node) =>
buildSharedPageUrl({
shareId,
pageSlugId: node.slugId,
pageTitle: node.name,
}),
showBranding: Boolean(data),
showEditPage: true,
brandingRef: "public-share",
}),
[data, treeData, shareId],
);
return (
<ShareShell>
<DocsShell
surface={surface}
onSearchOpen={shareId ? shareSearchSpotlight.open : undefined}
searchSpotlight={
shareId ? <ShareSearchSpotlight shareId={shareId} /> : undefined
}
>
<Outlet />
</ShareShell>
</DocsShell>
);
}
apps/client/src/features/share/components/share-shell.tsx
-272
View File
@@ -1,272 +0,0 @@
import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
import {
ActionIcon,
AppShell,
Group,
ScrollArea,
Tooltip,
} from "@mantine/core";
import { useGetSharedPageTreeQuery } from "@/features/share/queries/share-query.ts";
import { useParams } from "react-router-dom";
import SharedTree from "@/features/share/components/shared-tree.tsx";
import { TableOfContents } from "@/features/editor/components/table-of-contents/table-of-contents.tsx";
import { readOnlyEditorAtom } from "@/features/editor/atoms/editor-atoms.ts";
import { ThemeToggle } from "@/components/theme-toggle.tsx";
import { useAtomValue, useSetAtom } from "jotai";
import { useAtom } from "jotai";
import {
sharedPageFullWidthAtom,
sharedPageTreeAtom,
sharedTreeDataAtom,
} from "@/features/share/atoms/shared-page-atom";
import { buildSharedPageTree } from "@/features/share/utils";
import {
desktopSidebarAtom,
mobileSidebarAtom,
sidebarWidthAtom,
} from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
import SidebarToggle from "@/components/ui/sidebar-toggle-button.tsx";
import { useTranslation } from "react-i18next";
import { useToggleSidebar } from "@/components/layouts/global/hooks/hooks/use-toggle-sidebar.ts";
import {
mobileTableOfContentAsideAtom,
tableOfContentAsideAtom,
} from "@/features/share/atoms/sidebar-atom.ts";
import { IconArrowsHorizontal, IconList } from "@tabler/icons-react";
import { useToggleToc } from "@/features/share/hooks/use-toggle-toc.ts";
import classes from "./share.module.css";
import {
SearchControl,
SearchMobileControl,
} from "@/features/search/components/search-control.tsx";
import { ShareSearchSpotlight } from "@/features/search/components/share-search-spotlight.tsx";
import { shareSearchSpotlight } from "@/features/search/constants";
import ShareBranding from '@/features/share/components/share-branding.tsx';
import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
const MemoizedSharedTree = React.memo(SharedTree);
export default function ShareShell({
children,
}: {
children: React.ReactNode;
}) {
const { t } = useTranslation();
const [mobileOpened] = useAtom(mobileSidebarAtom);
const [desktopOpened] = useAtom(desktopSidebarAtom);
const toggleMobile = useToggleSidebar(mobileSidebarAtom);
const toggleDesktop = useToggleSidebar(desktopSidebarAtom);
const [tocOpened] = useAtom(tableOfContentAsideAtom);
const [mobileTocOpened] = useAtom(mobileTableOfContentAsideAtom);
const toggleTocMobile = useToggleToc(mobileTableOfContentAsideAtom);
const toggleToc = useToggleToc(tableOfContentAsideAtom);
const [fullWidth, setFullWidth] = useAtom(sharedPageFullWidthAtom);
const [sidebarWidth, setSidebarWidth] = useAtom(sidebarWidthAtom);
const [isResizing, setIsResizing] = useState(false);
const sidebarRef = useRef<HTMLDivElement>(null);
const startResizing = useCallback((e: React.MouseEvent) => {
e.preventDefault();
setIsResizing(true);
}, []);
const stopResizing = useCallback(() => {
setIsResizing(false);
}, []);
const resize = useCallback(
(e: MouseEvent) => {
if (!isResizing || !sidebarRef.current) return;
const newWidth =
e.clientX - sidebarRef.current.getBoundingClientRect().left;
if (newWidth < 220) {
setSidebarWidth(220);
return;
}
if (newWidth > 600) {
setSidebarWidth(600);
return;
}
setSidebarWidth(newWidth);
},
[isResizing, setSidebarWidth],
);
useEffect(() => {
window.addEventListener("mousemove", resize);
window.addEventListener("mouseup", stopResizing);
return () => {
window.removeEventListener("mousemove", resize);
window.removeEventListener("mouseup", stopResizing);
};
}, [resize, stopResizing]);
const { shareId } = useParams();
const { data } = useGetSharedPageTreeQuery(shareId);
const readOnlyEditor = useAtomValue(readOnlyEditorAtom);
// @ts-ignore
const setSharedPageTree = useSetAtom(sharedPageTreeAtom);
// @ts-ignore
const setSharedTreeData = useSetAtom(sharedTreeDataAtom);
// Build and set the tree data when it changes
const treeData = useMemo(() => {
if (!data?.pageTree) return null;
return buildSharedPageTree(data.pageTree);
}, [data?.pageTree]);
useEffect(() => {
setSharedPageTree(data || null);
setSharedTreeData(treeData);
}, [data, treeData, setSharedPageTree, setSharedTreeData]);
return (
<>
<SkipToMain />
<AppShell
header={{ height: 50 }}
{...(data?.pageTree?.length > 1 && {
navbar: {
width: sidebarWidth,
breakpoint: "sm",
collapsed: {
mobile: !mobileOpened,
desktop: !desktopOpened,
},
},
})}
aside={{
width: 300,
breakpoint: "sm",
collapsed: {
mobile: !mobileTocOpened,
desktop: !tocOpened,
},
}}
padding="md"
>
<AppShell.Header>
<Group wrap="nowrap" justify="space-between" py="sm" px="xl">
<Group wrap="nowrap">
{data?.pageTree?.length > 1 && (
<>
<Tooltip label={t("Sidebar toggle")}>
<SidebarToggle
aria-label={t("Sidebar toggle")}
opened={mobileOpened}
onClick={toggleMobile}
hiddenFrom="sm"
size="sm"
/>
</Tooltip>
<Tooltip label={t("Sidebar toggle")}>
<SidebarToggle
aria-label={t("Sidebar toggle")}
opened={desktopOpened}
onClick={toggleDesktop}
visibleFrom="sm"
size="sm"
/>
</Tooltip>
</>
)}
</Group>
{shareId && (
<Group visibleFrom="sm">
<SearchControl onClick={shareSearchSpotlight.open} />
</Group>
)}
<Group>
<>
{shareId && (
<Group hiddenFrom="sm">
<SearchMobileControl onSearch={shareSearchSpotlight.open} />
</Group>
)}
<Tooltip label={t("Table of contents")} withArrow>
<ActionIcon
variant="default"
style={{ border: "none" }}
onClick={toggleTocMobile}
hiddenFrom="sm"
size="sm"
aria-label={t("Table of contents")}
>
<IconList size={20} stroke={2} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Table of contents")} withArrow>
<ActionIcon
variant="default"
style={{ border: "none" }}
aria-label={t("Table of contents")}
onClick={toggleToc}
visibleFrom="sm"
size="sm"
>
<IconList size={20} stroke={2} />
</ActionIcon>
</Tooltip>
<Tooltip label={t("Full width")} withArrow>
<ActionIcon
variant={fullWidth ? "light" : "default"}
style={fullWidth ? undefined : { border: "none" }}
aria-label={t("Full width")}
aria-pressed={fullWidth}
onClick={() => setFullWidth((v) => !v)}
visibleFrom="sm"
size="sm"
>
<IconArrowsHorizontal size={20} stroke={2} />
</ActionIcon>
</Tooltip>
</>
<ThemeToggle />
</Group>
</Group>
</AppShell.Header>
{data?.pageTree?.length > 1 && (
<AppShell.Navbar p="md" className={classes.navbar} ref={sidebarRef}>
<div
className={classes.resizeHandle}
onMouseDown={startResizing}
/>
<MemoizedSharedTree sharedPageTree={data} />
</AppShell.Navbar>
)}
<AppShell.Main id={MAIN_CONTENT_ID} tabIndex={-1}>
{children}
{data && shareId && !(data.features?.length > 0) && <ShareBranding />}
</AppShell.Main>
<AppShell.Aside
p="md"
withBorder={mobileTocOpened}
className={classes.aside}
>
<ScrollArea style={{ height: "80vh" }} scrollbarSize={5} type="scroll">
<div style={{ paddingBottom: "50px" }}>
{readOnlyEditor && (
<TableOfContents isShare={true} editor={readOnlyEditor} />
)}
</div>
</ScrollArea>
</AppShell.Aside>
<ShareSearchSpotlight shareId={shareId} />
</AppShell>
</>
);
}
apps/client/src/features/share/components/share.module.css
-36
View File
@@ -6,39 +6,3 @@
border-bottom: 0.05em solid var(--mantine-color-dark-2);
}
}
.treeNode {
text-decoration: none;
user-select: none;
padding-bottom: 0;
}
.navbar,
.aside {
@media (max-width: $mantine-breakpoint-sm) {
width: 350px;
}
}
.resizeHandle {
width: 3px;
cursor: col-resize;
position: absolute;
right: 0;
top: 0;
bottom: 0;
z-index: 1;
&:hover,
&:active {
width: 5px;
background: light-dark(
var(--mantine-color-gray-4),
var(--mantine-color-dark-5)
);
}
@media (max-width: $mantine-breakpoint-sm) {
display: none;
}
}
apps/client/src/features/share/components/shared-tree.tsx
-220
View File
@@ -1,220 +0,0 @@
import { ISharedPageTree } from "@/features/share/types/share.types.ts";
import {
buildSharedPageTree,
SharedPageTreeNode,
} from "@/features/share/utils.ts";
import { useCallback, useEffect, useMemo, useRef } from "react";
import { Link, useParams } from "react-router-dom";
import { useAtom } from "jotai";
import { useTranslation } from "react-i18next";
import { buildSharedPageUrl } from "@/features/page/page.utils.ts";
import clsx from "clsx";
import {
IconChevronDown,
IconChevronRight,
IconFileDescription,
IconPointFilled,
} from "@tabler/icons-react";
import { ActionIcon, Box } from "@mantine/core";
import { extractPageSlugId } from "@/lib";
import classes from "@/features/page/tree/styles/tree.module.css";
import styles from "./share.module.css";
import { mobileSidebarAtom } from "@/components/layouts/global/hooks/atoms/sidebar-atom.ts";
import EmojiPicker from "@/components/ui/emoji-picker.tsx";
import {
DocTree,
type DocTreeApi,
type RenderRowProps,
} from "@/features/page/tree/components/doc-tree";
import { openSharedTreeNodesAtom } from "@/features/share/atoms/open-shared-tree-nodes-atom";
interface SharedTreeProps {
sharedPageTree: ISharedPageTree;
}
export default function SharedTree({ sharedPageTree }: SharedTreeProps) {
const { t } = useTranslation();
const treeRef = useRef<DocTreeApi | null>(null);
const { pageSlug } = useParams();
const [openTreeNodes, setOpenTreeNodes] = useAtom(openSharedTreeNodesAtom);
const currentNodeId = extractPageSlugId(pageSlug);
const treeData: SharedPageTreeNode[] = useMemo(() => {
if (!sharedPageTree?.pageTree) return [] as SharedPageTreeNode[];
return buildSharedPageTree(sharedPageTree.pageTree);
}, [sharedPageTree?.pageTree]);
const openIds = useMemo(
() =>
new Set(
Object.keys(openTreeNodes).filter((k) => openTreeNodes[k]),
),
[openTreeNodes],
);
useEffect(() => {
// Auto-open the first level of the shared tree on initial load.
const root = treeData?.[0];
if (!root) return;
setOpenTreeNodes((prev) => {
if (prev[root.slugId]) return prev;
const next = { ...prev, [root.slugId]: true };
for (const child of root.children ?? []) {
next[child.slugId] = true;
}
return next;
});
}, [treeData, setOpenTreeNodes]);
useEffect(() => {
if (currentNodeId) {
treeRef.current?.select(currentNodeId, { scrollIntoView: true });
}
}, [currentNodeId, treeData]);
// Stable callbacks so memo(DocTreeRow) actually saves work — see I2 in the
// post-implementation code review.
const handleToggle = useCallback(
(id: string, isOpen: boolean) =>
setOpenTreeNodes((prev) => ({ ...prev, [id]: isOpen })),
[setOpenTreeNodes],
);
const getDragLabel = useCallback(
(n: SharedPageTreeNode) => n.name || "untitled",
[],
);
if (!sharedPageTree || !sharedPageTree?.pageTree) {
return null;
}
return (
<div className={classes.treeContainer}>
<DocTree<SharedPageTreeNode>
readOnly
ref={treeRef}
data={treeData}
openIds={openIds}
selectedId={currentNodeId}
renderRow={SharedTreeRow}
onMove={noopMove}
onToggle={handleToggle}
getDragLabel={getDragLabel}
aria-label={t("Pages")}
/>
</div>
);
}
// Module-scope noop so it's a stable reference across renders.
const noopMove = () => {};
function SharedTreeRow({
node,
isOpen,
hasChildren,
isSelected,
rowRef,
tabIndex,
treeItemProps,
toggleOpen,
}: RenderRowProps<SharedPageTreeNode>) {
const { shareId } = useParams();
const { t } = useTranslation();
const [, setMobileSidebarState] = useAtom(mobileSidebarAtom);
const pageUrl = buildSharedPageUrl({
shareId: shareId,
pageSlugId: node.slugId,
pageTitle: node.name,
});
return (
<Box
ref={rowRef as React.Ref<HTMLAnchorElement>}
tabIndex={tabIndex}
{...treeItemProps}
data-selected={isSelected || undefined}
className={clsx(classes.node, styles.treeNode)}
component={Link}
to={pageUrl}
onClick={() => {
setMobileSidebarState(false);
}}
>
<SharedPageArrow
isOpen={isOpen}
hasChildren={hasChildren}
onToggle={toggleOpen}
/>
<div style={{ marginRight: "4px" }}>
<EmojiPicker
onEmojiSelect={() => {}}
icon={
node.icon ? (
node.icon
) : (
<IconFileDescription size="18" />
)
}
readOnly={true}
removeEmojiAction={() => {}}
actionIconProps={{ tabIndex: -1 }}
/>
</div>
<span className={classes.text}>{node.name || t("untitled")}</span>
</Box>
);
}
interface SharedPageArrowProps {
isOpen: boolean;
hasChildren: boolean;
onToggle: () => void;
}
function SharedPageArrow({
isOpen,
hasChildren,
onToggle,
}: SharedPageArrowProps) {
if (!hasChildren) {
return (
<span
aria-hidden
style={{
width: 20,
height: 20,
display: "inline-flex",
alignItems: "center",
justifyContent: "center",
color: "var(--mantine-color-gray-6)",
flexShrink: 0,
}}
>
<IconPointFilled size={4} />
</span>
);
}
return (
<ActionIcon
size={20}
variant="subtle"
c="gray"
tabIndex={-1}
onClick={(e) => {
e.preventDefault();
e.stopPropagation();
onToggle();
}}
>
{isOpen ? (
<IconChevronDown stroke={2} size={16} />
) : (
<IconChevronRight stroke={2} size={16} />
)}
</ActionIcon>
);
}
apps/client/src/features/share/hooks/use-shared-page-subpages.ts
+5 -21
View File
@@ -1,29 +1,13 @@
import { useMemo } from "react";
import { useAtomValue } from "jotai";
import { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom";
import { SharedPageTreeNode } from "@/features/share/utils";
import { findSubpagesInTree } from "@/features/share/utils";
export function useSharedPageSubpages(pageId: string | undefined) {
const treeData = useAtomValue(sharedTreeDataAtom);
return useMemo(() => {
if (!treeData || !pageId) return [];
function findSubpages(nodes: SharedPageTreeNode[]): SharedPageTreeNode[] {
for (const node of nodes) {
if (node.value === pageId || node.slugId === pageId) {
return node.children || [];
}
if (node.children && node.children.length > 0) {
const subpages = findSubpages(node.children);
if (subpages.length > 0) {
return subpages;
}
}
}
return [];
}
return findSubpages(treeData);
}, [treeData, pageId]);
return useMemo(
() => findSubpagesInTree(treeData, pageId),
[treeData, pageId],
);
}
apps/client/src/features/share/hooks/use-toggle-toc.ts
-8
View File
@@ -1,8 +0,0 @@
import { useAtom } from "jotai";
export function useToggleToc(tocAtom: any) {
const [tocState, setTocState] = useAtom(tocAtom);
return () => {
setTocState(!tocState);
}
}
apps/client/src/features/share/utils.ts
+21
View File
@@ -68,6 +68,27 @@ export function buildSharedPageTree(
}
// Returns the children of the node matching the page id or slugId.
export function findSubpagesInTree(
tree: SharedPageTreeNode[] | null | undefined,
pageId: string | undefined,
): SharedPageTreeNode[] {
if (!tree || !pageId) return [];
for (const node of tree) {
if (node.value === pageId || node.slugId === pageId) {
return node.children || [];
}
if (node.children && node.children.length > 0) {
const subpages = findSubpagesInTree(node.children, pageId);
if (subpages.length > 0) {
return subpages;
}
}
}
return [];
}
// Recursively checks if a page exists in the shared page tree.
export function isPageInTree(
tree: SharedPageTreeNode[],
apps/client/src/features/space/components/settings-modal.tsx
+27 -4
View File
@@ -4,6 +4,8 @@ import AddSpaceMembersModal from "@/features/space/components/add-space-members-
import React from "react";
import SpaceDetails from "@/features/space/components/space-details.tsx";
import SpaceSecuritySettings from "@/features/space/components/space-security-settings.tsx";
import PublishSpaceSettings from "@/features/public-space/components/publish-space-settings.tsx";
import { isPublicSpacesAllowed } from "@/features/public-space/utils/public-space-access.ts";
import { useSpaceQuery } from "@/features/space/queries/space-query.ts";
import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
import {
@@ -11,6 +13,8 @@ import {
SpaceCaslSubject,
} from "@/features/space/permissions/permissions.type.ts";
import { useTranslation } from "react-i18next";
import { useAtom } from "jotai";
import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
interface SpaceSettingsModalProps {
spaceId: string;
@@ -29,6 +33,13 @@ export default function SpaceSettingsModal({
const spaceRules = space?.membership?.permissions;
const spaceAbility = useSpaceAbility(spaceRules);
const [workspace] = useAtom(workspaceAtom);
const allowPublicSpaces = isPublicSpacesAllowed(workspace);
const canManageSettings = spaceAbility.can(
SpaceCaslAction.Manage,
SpaceCaslSubject.Settings,
);
return (
<>
<Modal.Root
@@ -60,10 +71,12 @@ export default function SpaceSettingsModal({
<Tabs.Tab fw={500} value="members">
{t("Members")}
</Tabs.Tab>
{spaceAbility.can(
SpaceCaslAction.Manage,
SpaceCaslSubject.Settings,
) && (
{canManageSettings && allowPublicSpaces && (
<Tabs.Tab fw={500} value="publish">
{t("Publish")}
</Tabs.Tab>
)}
{canManageSettings && (
<Tabs.Tab fw={500} value="security">
{t("Security")}
</Tabs.Tab>
@@ -114,6 +127,16 @@ export default function SpaceSettingsModal({
</div>
</ScrollArea>
</Tabs.Panel>
<Tabs.Panel value="publish">
<ScrollArea h={580} scrollbarSize={5} pr={8}>
<div style={{ paddingBottom: "100px" }}>
{canManageSettings && allowPublicSpaces && (
<PublishSpaceSettings space={space} />
)}
</div>
</ScrollArea>
</Tabs.Panel>
</Tabs>
</div>
</Modal.Body>
apps/client/src/features/space/components/sidebar/space-sidebar.tsx
+2 -1
View File
@@ -35,7 +35,7 @@ import clsx from "clsx";
import { useDisclosure } from "@mantine/hooks";
import SpaceSettingsModal from "@/features/space/components/settings-modal.tsx";
import { useGetSpaceBySlugQuery } from "@/features/space/queries/space-query.ts";
import { getSpaceUrl } from "@/lib/config.ts";
import { getSpaceUrl, isBetaPublicSpaces } from "@/lib/config.ts";
import SpaceTree from "@/features/page/tree/components/space-tree.tsx";
import { useSpaceAbility } from "@/features/space/permissions/use-space-ability.ts";
import {
@@ -106,6 +106,7 @@ export function SpaceSidebar() {
spaceName={space?.name}
spaceSlug={space?.slug}
spaceIcon={space?.logo}
isPublished={isBetaPublicSpaces() && space?.isPublished}
/>
</Group>
</div>
apps/client/src/features/space/components/sidebar/switch-space.tsx
+20 -2
View File
@@ -2,24 +2,32 @@ import classes from "./switch-space.module.css";
import { useNavigate } from "react-router-dom";
import { SpaceSelect } from "./space-select";
import { getSpaceUrl } from "@/lib/config";
import { Button, Popover, Text } from "@mantine/core";
import { IconChevronDown, IconChevronUp } from "@tabler/icons-react";
import { Button, Popover, Text, Tooltip } from "@mantine/core";
import {
IconChevronDown,
IconChevronUp,
IconWorld,
} from "@tabler/icons-react";
import { useDisclosure } from "@mantine/hooks";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
import React from "react";
import { useTranslation } from "react-i18next";
interface SwitchSpaceProps {
spaceName: string;
spaceSlug: string;
spaceIcon?: string;
isPublished?: boolean;
}
export function SwitchSpace({
spaceName,
spaceSlug,
spaceIcon,
isPublished,
}: SwitchSpaceProps) {
const { t } = useTranslation();
const navigate = useNavigate();
const [opened, { close, toggle }] = useDisclosure(false);
@@ -61,6 +69,16 @@ export function SwitchSpace({
<Text className={classes.spaceName} size="md" fw={500} lineClamp={1}>
{spaceName}
</Text>
{isPublished && (
<Tooltip label={t("This space is public")}>
<IconWorld
size={14}
aria-label={t("This space is public")}
style={{ flexShrink: 0 }}
/>
</Tooltip>
)}
</Button>
</Popover.Target>
<Popover.Dropdown>
apps/client/src/features/space/types/space.types.ts
+1
View File
@@ -30,6 +30,7 @@ export interface ISpace {
createdAt: Date;
updatedAt: Date;
memberCount?: number;
isPublished?: boolean;
spaceId?: string;
membership?: IMembership;
settings?: ISpaceSettings;
apps/client/src/features/transclusion/services/transclusion-api.ts
+8
View File
@@ -19,6 +19,14 @@ export async function lookupTransclusionForShare(params: {
return r.data;
}
export async function lookupTransclusionForPublicSpace(params: {
spaceSlug: string;
references: Array<{ sourcePageId: string; transclusionId: string }>;
}): Promise<{ items: TransclusionLookup[] }> {
const r = await api.post("/public-spaces/transclusion/lookup", params);
return r.data;
}
export async function listReferences(params: {
sourcePageId: string;
transclusionId: string;
apps/client/src/features/workspace/components/settings/components/allow-public-spaces.tsx
+129
View File
@@ -0,0 +1,129 @@
import { Group, Text, Switch } from "@mantine/core";
import { modals } from "@mantine/modals";
import { useAtom } from "jotai";
import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
import { useState } from "react";
import { useTranslation } from "react-i18next";
import { updateWorkspace } from "@/features/workspace/services/workspace-service.ts";
import { notifications } from "@mantine/notifications";
export default function AllowPublicSpaces() {
const { t } = useTranslation();
const [workspace] = useAtom(workspaceAtom);
return (
<>
<Group justify="space-between" wrap="nowrap" gap="xl">
<div>
<Text size="md">{t("Allow public spaces")}</Text>
<Text size="sm" c="dimmed">
{t("Space admins can publish their spaces to the web.")}
</Text>
</div>
<AllowPublicSpacesToggle />
</Group>
{workspace?.settings?.publicSpaces?.enabled === true && (
<Group justify="space-between" wrap="nowrap" gap="xl" mt="md">
<div>
<Text size="md">{t("Show public directory")}</Text>
<Text size="sm" c="dimmed">
{t("List published spaces at /docs for anyone to browse.")}
</Text>
</div>
<PublicSpacesDirectoryToggle />
</Group>
)}
</>
);
}
function PublicSpacesDirectoryToggle() {
const { t } = useTranslation();
const [workspace, setWorkspace] = useAtom(workspaceAtom);
const [checked, setChecked] = useState(
workspace?.settings?.publicSpaces?.directory === true,
);
const handleChange = async (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.currentTarget.checked;
try {
const updatedWorkspace = await updateWorkspace({
publicSpacesDirectory: value,
});
setChecked(value);
setWorkspace(updatedWorkspace);
} catch (err) {
notifications.show({
message: err?.response?.data?.message,
color: "red",
});
}
};
return (
<Switch
checked={checked}
onChange={handleChange}
aria-label={t("Toggle show public directory")}
/>
);
}
function AllowPublicSpacesToggle() {
const { t } = useTranslation();
const [workspace, setWorkspace] = useAtom(workspaceAtom);
const [checked, setChecked] = useState(
workspace?.settings?.publicSpaces?.enabled === true,
);
const applyChange = async (value: boolean) => {
try {
const updatedWorkspace = await updateWorkspace({
allowPublicSpaces: value,
});
setChecked(value);
setWorkspace(updatedWorkspace);
} catch (err) {
notifications.show({
message: err?.response?.data?.message,
color: "red",
});
}
};
const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
const value = event.currentTarget.checked;
modals.openConfirmModal({
title: value ? t("Allow public spaces") : t("Disable public spaces"),
children: (
<Text size="sm">
{value
? t(
"Space admins will be able to make their spaces publicly readable by anyone on the internet. Are you sure?",
)
: t(
"This will immediately unpublish every published space. Re-enabling later will not republish them. Are you sure?",
)}
</Text>
),
centered: true,
labels: {
confirm: value ? t("Allow") : t("Disable"),
cancel: t("Cancel"),
},
confirmProps: value ? undefined : { color: "red" },
onConfirm: () => applyChange(value),
});
};
return (
<Switch
checked={checked}
onChange={handleChange}
aria-label={t("Toggle allow public spaces")}
/>
);
}
apps/client/src/features/workspace/types/workspace.types.ts
+8
View File
@@ -24,6 +24,8 @@ export interface IWorkspace {
aiSearch?: boolean;
generativeAi?: boolean;
disablePublicSharing?: boolean;
allowPublicSpaces?: boolean;
publicSpacesDirectory?: boolean;
mcpEnabled?: boolean;
aiChatReadOnly?: boolean;
aiChatWorkspaceKnowledgeOnly?: boolean;
@@ -42,6 +44,7 @@ export interface IWorkspaceSettings {
api?: IWorkspaceApiSettings;
templates?: IWorkspaceTemplateSettings;
spaces?: IWorkspaceSpaceSettings;
publicSpaces?: IWorkspacePublicSpacesSettings;
defaultPageEditMode?: string;
}
@@ -71,6 +74,11 @@ export interface IWorkspaceSpaceSettings {
allowPersonal?: boolean;
}
export interface IWorkspacePublicSpacesSettings {
enabled?: boolean;
directory?: boolean;
}
export interface ICreateInvite {
role: string;
emails: string[];
apps/client/src/lib/api-client.ts
+7
View File
@@ -32,6 +32,13 @@ api.interceptors.response.use(
const url = new URL(error.request.responseURL)?.pathname;
if (url === "/api/auth/collab-token") return;
if (window.location.pathname.startsWith("/share/")) return;
// public docs probe authed endpoints; reject without the login redirect
if (
window.location.pathname === "/docs" ||
window.location.pathname.startsWith("/docs/")
) {
break;
}
// Handle unauthorized error
redirectToLogin();
apps/client/src/lib/config.ts
+4
View File
@@ -43,6 +43,10 @@ export function isCloud(): boolean {
return castToBoolean(getConfigValue("CLOUD"));
}
export function isBetaPublicSpaces(): boolean {
return castToBoolean(getConfigValue("BETA_PUBLIC_SPACES"));
}
export function getAiVectorDriver(): string {
return getConfigValue("AI_VECTOR_DRIVER");
}
apps/client/src/pages/public-space/public-space-directory-page.tsx
+235
View File
@@ -0,0 +1,235 @@
import "@fontsource-variable/inter";
import "@/styles/public-typography.css";
import { useMemo, useState } from "react";
import { Skeleton } from "@mantine/core";
import { useMediaQuery } from "@mantine/hooks";
import clsx from "clsx";
import { Link } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { IconSearch } from "@tabler/icons-react";
import { usePublicSpaceDirectoryQuery } from "@/features/public-space/queries/public-space-query.ts";
import { useAuthenticatedUser } from "@/features/public-space/hooks/use-authenticated-user.ts";
import { buildPublicSpaceUrl } from "@/features/page/page.utils.ts";
import { getAvatarUrl } from "@/lib/config.ts";
import { Error404 } from "@/components/ui/error-404.tsx";
import { DocumentTitle } from "@/components/ui/document-title.tsx";
import { MAIN_CONTENT_ID, SkipToMain } from "@/components/ui/skip-to-main.tsx";
import { AvatarIconType } from "@/features/attachments/types/attachment.types.ts";
import styles from "@/features/public-space/components/docs/docs-hub.module.css";
const TILE_COLORS = [
"#1f9d55",
"#2b4bd6",
"#7c3aed",
"#0e7490",
"#d9480f",
"#b42318",
"#a16207",
"#475569",
"#be185d",
"#0f766e",
"#4338ca",
"#65a30d",
];
function getInitials(name: string) {
return name
.split(/[\s&]+/)
.filter(Boolean)
.slice(0, 2)
.map((word) => word[0])
.join("")
.toUpperCase();
}
export default function PublicSpaceDirectoryPage() {
const { t } = useTranslation();
const { data, isLoading, isError, error } = usePublicSpaceDirectoryQuery();
const { data: currentUser } = useAuthenticatedUser();
const isMobile = useMediaQuery("(max-width: 48em)");
const [query, setQuery] = useState("");
const spaces = useMemo(() => {
const all = (data?.spaces ?? []).map((space, index) => ({
...space,
color: TILE_COLORS[index % TILE_COLORS.length],
initials: getInitials(space.name),
}));
const needle = query.trim().toLowerCase();
if (!needle) return all;
return all.filter(
(space) =>
space.name.toLowerCase().includes(needle) ||
space.description?.toLowerCase().includes(needle),
);
}, [data?.spaces, query]);
if (isError) {
if ([401, 403, 404].includes(error?.["response"]?.status)) {
return <Error404 />;
}
return <div>{t("Error fetching page data.")}</div>;
}
const total = data?.spaces.length ?? 0;
const title = t("Documentation");
const searchLabel = isMobile ? t("Search...") : t("Search documentation...");
return (
<div className={clsx(styles.root, "public-typography")}>
<SkipToMain />
<DocumentTitle title={title} withAppName={false} />
<div className={styles.topBar}>
<div className={clsx(styles.container, styles.topBarInner)}>
<Link to="/docs" className={styles.brand}>
<span className={styles.brandTile} aria-hidden>
{title.charAt(0).toUpperCase()}
</span>
<span>{title}</span>
</Link>
<div className={styles.topActions}>
{currentUser?.user ? (
<Link to="/home" className={styles.signIn}>
{t("Open app")}
</Link>
) : (
<Link to="/login" className={styles.signIn}>
{t("Sign in")}
</Link>
)}
</div>
</div>
</div>
<header className={styles.hero}>
<div className={clsx(styles.container, styles.heroInner)}>
<h1 className={styles.heading}>
{t("Welcome to our documentation")}
</h1>
<p className={styles.subtitle}>
{isMobile
? t("Guides, references and answers across all our spaces.")
: t(
"Guides, references and answers across all our published spaces.",
)}
</p>
<form
className={styles.search}
role="search"
onSubmit={(event) => event.preventDefault()}
>
<input
type="search"
className={styles.searchInput}
value={query}
onChange={(event) => setQuery(event.target.value)}
placeholder={searchLabel}
aria-label={searchLabel}
/>
<button
type="submit"
className={styles.searchButton}
aria-label={t("Search")}
>
<IconSearch size={isMobile ? 16 : 18} stroke={2.4} aria-hidden />
</button>
</form>
</div>
</header>
<main id={MAIN_CONTENT_ID} tabIndex={-1} className={styles.main}>
<div className={clsx(styles.container, styles.mainInner)}>
<div className={styles.sectionHeader}>
<h2 className={styles.sectionTitle}>{t("Spaces")}</h2>
{!isLoading && (
<span className={styles.sectionCount}>
{total === 1
? t("1 published space")
: t("{{count}} published spaces", { count: total })}
</span>
)}
</div>
{isLoading && (
<div className={styles.grid} aria-hidden>
<Skeleton height={220} radius={14} />
<Skeleton height={220} radius={14} />
<Skeleton height={220} radius={14} />
<Skeleton height={220} radius={14} />
</div>
)}
{!isLoading && total === 0 && (
<p className={styles.empty}>{t("No public spaces yet.")}</p>
)}
{!isLoading && total > 0 && spaces.length === 0 && (
<p className={styles.empty}>
{t("No spaces match your search.")}
</p>
)}
{spaces.length > 0 && (
<div className={styles.grid}>
{spaces.map((space) => {
const logoUrl = getAvatarUrl(
space.logo,
AvatarIconType.SPACE_ICON,
);
return (
<Link
key={space.slug}
to={buildPublicSpaceUrl({ spaceSlug: space.slug })}
className={styles.card}
>
<span className={styles.cardHeader}>
<span
className={styles.cardTile}
style={{ backgroundColor: space.color }}
aria-hidden
>
{logoUrl ? (
<img src={logoUrl} alt="" />
) : (
space.initials
)}
</span>
<span className={styles.cardName}>{space.name}</span>
</span>
{space.description && (
<span className={styles.cardDescription}>
{space.description}
</span>
)}
</Link>
);
})}
</div>
)}
</div>
</main>
{data && (
<footer className={styles.footer}>
<div className={clsx(styles.container, styles.footerInner)}>
<div>
Powered by{" "}
<a
className={styles.footerBranding}
href="https://docmost.com?ref=public-space"
target="_blank"
rel="noreferrer"
>
Docmost
</a>
</div>
</div>
</footer>
)}
</div>
);
}
apps/client/src/pages/public-space/public-space-page.tsx
+125
View File
@@ -0,0 +1,125 @@
import { useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { Skeleton, Stack, Text } from "@mantine/core";
import React from "react";
import ReadonlyPageEditor from "@/features/editor/readonly-page-editor.tsx";
import { extractPageSlugId } from "@/lib";
import { Error404 } from "@/components/ui/error-404.tsx";
import { usePublicSpacePageQuery } from "@/features/public-space/queries/public-space-query.ts";
import { DocumentTitle } from "@/components/ui/document-title.tsx";
import DocsBreadcrumbs from "@/features/public-space/components/docs/docs-breadcrumbs.tsx";
import DocsPageNav from "@/features/public-space/components/docs/docs-page-nav.tsx";
import { CustomAvatar } from "@/components/ui/custom-avatar.tsx";
import { timeAgo } from "@/lib/time.ts";
import styles from "@/features/public-space/components/docs/docs.module.css";
export default function PublicSpacePage() {
const { t } = useTranslation();
const { spaceSlug, pageSlug } = useParams();
const { data, isLoading, isError, error } = usePublicSpacePageQuery({
spaceSlug,
pageSlugId: pageSlug ? extractPageSlugId(pageSlug) : undefined,
});
if (isLoading) {
return (
<Stack gap="md" pt={4} aria-hidden>
<Skeleton height={13} width={180} radius="sm" />
<Skeleton height={34} width="55%" radius="sm" mt={10} />
<Skeleton height={12} width="90%" radius="sm" mt={18} />
<Skeleton height={12} width="97%" radius="sm" />
<Skeleton height={12} width="85%" radius="sm" />
<Skeleton height={12} width="60%" radius="sm" />
</Stack>
);
}
if (isError || !data) {
if ([401, 403, 404].includes(error?.["status"])) {
return <Error404 />;
}
return <div>{t("Error fetching page data.")}</div>;
}
if (data.page === null) {
return (
<div className={styles.emptyState}>
<Text c="dimmed">{t("This space has no public pages yet.")}</Text>
</div>
);
}
const showAuthor =
data.byline?.author === true && Boolean(data.page.creator?.name);
const showUpdatedAt =
data.byline?.updatedAt === true && Boolean(data.page.updatedAt);
return (
<div>
<DocumentTitle
title={data.page.title || data.space.name || t("untitled")}
withAppName={false}
>
{!data.searchIndexing && <meta name="robots" content="noindex" />}
</DocumentTitle>
<DocsBreadcrumbs />
<ReadonlyPageEditor
key={data.page.id}
title={data.page.title}
content={data.page.content}
pageId={data.page.id}
spaceSlug={spaceSlug}
byline={
<DocsByline
creator={showAuthor ? data.page.creator : undefined}
updatedAt={showUpdatedAt ? data.page.updatedAt : undefined}
/>
}
trailingSpace={false}
/>
<DocsPageNav />
</div>
);
}
type DocsBylineProps = {
creator?: { name: string; avatarUrl: string };
updatedAt?: Date | string;
};
function DocsByline({ creator, updatedAt }: DocsBylineProps) {
const { t } = useTranslation();
if (!creator && !updatedAt) return null;
return (
<div className={styles.byline}>
{creator && (
<span className={styles.bylineAuthor}>
<CustomAvatar
avatarUrl={creator.avatarUrl}
name={creator.name}
size={20}
/>
{t("By {{name}}", { name: creator.name })}
</span>
)}
{creator && updatedAt && (
<span className={styles.bylineDot} aria-hidden>
•
</span>
)}
{updatedAt && (
<span>
{t("Updated {{date}}", { date: timeAgo(new Date(updatedAt)) })}
</span>
)}
</div>
);
}
apps/client/src/pages/settings/shares/shares.tsx
+43 -5
View File
@@ -1,19 +1,23 @@
import SettingsTitle from "@/components/settings/settings-title.tsx";
import { useTranslation } from "react-i18next";
import { useAtom } from "jotai";
import ShareList from "@/features/share/components/share-list.tsx";
import { Alert, Text } from "@mantine/core";
import PublishedSpacesList from "@/features/public-space/components/published-spaces-list.tsx";
import { isPublicSpacesAllowed } from "@/features/public-space/utils/public-space-access.ts";
import { workspaceAtom } from "@/features/user/atoms/current-user-atom.ts";
import { Alert, Tabs } from "@mantine/core";
import { IconInfoCircle } from "@tabler/icons-react";
import React from "react";
import { DocumentTitle } from "@/components/ui/document-title.tsx";
export default function Shares() {
const { t } = useTranslation();
const [workspace] = useAtom(workspaceAtom);
return (
const allowPublicSpaces = isPublicSpacesAllowed(workspace);
const sharedPages = (
<>
<DocumentTitle title={t("Public sharing")} />
<SettingsTitle title={t("Public sharing")} />
<Alert variant="light" color="blue" icon={<IconInfoCircle />}>
{t(
"Publicly shared pages from spaces you are a member of will appear here",
@@ -23,4 +27,38 @@ export default function Shares() {
<ShareList />
</>
);
return (
<>
<DocumentTitle title={t("Public sharing")} />
<SettingsTitle title={t("Public sharing")} />
{allowPublicSpaces ? (
<Tabs color="dark" defaultValue="pages">
<Tabs.List>
<Tabs.Tab fw={500} value="pages">
{t("Shared pages")}
</Tabs.Tab>
<Tabs.Tab fw={500} value="spaces">
{t("Published spaces")}
</Tabs.Tab>
</Tabs.List>
<Tabs.Panel value="pages" pt="md">
{sharedPages}
</Tabs.Panel>
<Tabs.Panel value="spaces" pt="md">
<Alert variant="light" color="blue" icon={<IconInfoCircle />}>
{t("Spaces published to the web will appear here")}
</Alert>
<PublishedSpacesList />
</Tabs.Panel>
</Tabs>
) : (
sharedPages
)}
</>
);
}
apps/client/src/pages/settings/workspace/workspace-settings.tsx
+9 -1
View File
@@ -2,12 +2,13 @@ import SettingsTitle from "@/components/settings/settings-title.tsx";
import WorkspaceNameForm from "@/features/workspace/components/settings/components/workspace-name-form";
import WorkspaceIcon from "@/features/workspace/components/settings/components/workspace-icon.tsx";
import { useTranslation } from "react-i18next";
import { isCloud } from "@/lib/config.ts";
import { isBetaPublicSpaces, isCloud } from "@/lib/config.ts";
import ManageHostname from "@/ee/components/manage-hostname.tsx";
import { Divider } from "@mantine/core";
import AllowMemberTemplates from "@/ee/security/components/allow-member-templates.tsx";
import WorkspaceDefaultPageEditMode from "@/features/workspace/components/settings/components/workspace-default-page-edit-mode.tsx";
import PersonalSpacesSetting from "@/ee/personal-space/components/personal-spaces-setting.tsx";
import AllowPublicSpaces from "@/features/workspace/components/settings/components/allow-public-spaces.tsx";
import { DocumentTitle } from "@/components/ui/document-title.tsx";
export default function WorkspaceSettings() {
@@ -25,6 +26,13 @@ export default function WorkspaceSettings() {
<Divider my="md" />
<PersonalSpacesSetting />
{isBetaPublicSpaces() && (
<>
<Divider my="md" />
<AllowPublicSpaces />
</>
)}
{isCloud() && (
<>
<Divider my="md" />
apps/client/src/pages/share/shared-page.tsx
+29 -18
View File
@@ -1,19 +1,18 @@
import { useNavigate, useParams } from "react-router-dom";
import { useTranslation } from "react-i18next";
import { useSharePageQuery } from "@/features/share/queries/share-query.ts";
import { Container } from "@mantine/core";
import { Skeleton, Stack } from "@mantine/core";
import React, { useEffect } from "react";
import ReadonlyPageEditor from "@/features/editor/readonly-page-editor.tsx";
import { extractPageSlugId } from "@/lib";
import { Error404 } from "@/components/ui/error-404.tsx";
import ShareBranding from "@/features/share/components/share-branding.tsx";
import { useAtomValue } from "jotai";
import {
sharedPageFullWidthAtom,
sharedTreeDataAtom,
} from "@/features/share/atoms/shared-page-atom.ts";
import { sharedTreeDataAtom } from "@/features/share/atoms/shared-page-atom.ts";
import { isPageInTree } from "@/features/share/utils.ts";
import { DocumentTitle } from "@/components/ui/document-title.tsx";
import DocsBreadcrumbs from "@/features/public-space/components/docs/docs-breadcrumbs.tsx";
import DocsPageNav from "@/features/public-space/components/docs/docs-page-nav.tsx";
import DocsFooterBranding from "@/features/public-space/components/docs/docs-footer-branding.tsx";
export default function SharedPage() {
const { t } = useTranslation();
@@ -26,7 +25,6 @@ export default function SharedPage() {
});
const sharedTreeData = useAtomValue(sharedTreeDataAtom);
const fullWidth = useAtomValue(sharedPageFullWidthAtom);
useEffect(() => {
if (shareId && data) {
@@ -44,7 +42,16 @@ export default function SharedPage() {
}, [shareId, data, sharedTreeData]);
if (isLoading) {
return <></>;
return (
<Stack gap="md" pt={4} aria-hidden>
<Skeleton height={13} width={180} radius="sm" />
<Skeleton height={34} width="55%" radius="sm" mt={10} />
<Skeleton height={12} width="90%" radius="sm" mt={18} />
<Skeleton height={12} width="97%" radius="sm" />
<Skeleton height={12} width="85%" radius="sm" />
<Skeleton height={12} width="60%" radius="sm" />
</Stack>
);
}
if (isError || !data) {
@@ -65,17 +72,21 @@ export default function SharedPage() {
)}
</DocumentTitle>
<Container fluid={fullWidth} size={fullWidth ? undefined : 900} p={0}>
<ReadonlyPageEditor
key={data.page.id}
title={data.page.title}
content={data.page.content}
pageId={data.page.id}
shareId={data.share.id}
/>
</Container>
<DocsBreadcrumbs />
{data && !shareId && !(data.features?.length > 0) && <ShareBranding />}
<ReadonlyPageEditor
key={data.page.id}
title={data.page.title}
content={data.page.content}
pageId={data.page.id}
shareId={data.share.id}
trailingSpace={false}
/>
<DocsPageNav />
{/* No tree query without a shareId, so the shell can't own branding here. */}
{!shareId && <DocsFooterBranding refSource="public-share" />}
</div>
);
}
apps/client/src/pages/space/space-home.tsx
+2
View File
@@ -1,5 +1,6 @@
import {Container} from "@mantine/core";
import SpaceHomeTabs from "@/features/space/components/space-home-tabs.tsx";
import SpacePublicNotice from "@/features/public-space/components/space-public-notice.tsx";
import {useParams} from "react-router-dom";
import {useGetSpaceBySlugQuery} from "@/features/space/queries/space-query.ts";
import { DocumentTitle } from "@/components/ui/document-title.tsx";
@@ -12,6 +13,7 @@ export default function SpaceHome() {
<>
<DocumentTitle title={space?.name || 'Overview'} />
<Container size={"900"} pt="xl">
{space && <SpacePublicNotice space={space} />}
{space && <SpaceHomeTabs/>}
</Container>
</>
apps/client/src/styles/a11y-overrides.css
+10
View File
@@ -61,3 +61,13 @@
var(--mantine-color-dark-5)
);
}
/* The skip-link target main is tabindex="-1", so clicks in readonly content
* focus it and overlays (e.g. the lightbox) return focus to it on close,
* ringing the whole content region. The skip link's purpose is reading
* position, not a visible ring around everything, so suppress the outline.
*/
#main-content:focus,
#main-content:focus-visible {
outline: none;
}
apps/client/src/styles/public-typography.css
+39
View File
@@ -0,0 +1,39 @@
/* Reading typography for the public surfaces (public spaces and share links).
* Scoped to the .public-typography root so the authenticated app keeps the
* system font stack. Loaded only from the lazy public layouts. */
.public-typography {
font-family: "Inter Variable", var(--mantine-font-family);
letter-spacing: -0.011em;
-webkit-font-smoothing: antialiased;
}
/* Code keeps its own mono family; only undo the inherited tracking. */
.public-typography code,
.public-typography pre {
letter-spacing: normal;
}
/* Pins the reading metrics that core.css otherwise takes from the Mantine
* type scale. rem, not px, so browser font-size preferences still apply. */
.public-typography .ProseMirror {
font-size: 1rem;
line-height: 1.65;
}
.public-typography .ProseMirror h1 {
letter-spacing: -0.021em;
}
.public-typography .ProseMirror h2 {
letter-spacing: -0.017em;
}
.public-typography .ProseMirror h3,
.public-typography .ProseMirror h4 {
letter-spacing: -0.014em;
}
.public-typography .page-title .ProseMirror h1 {
letter-spacing: -0.022em;
}
apps/client/vite.config.ts
+2
View File
@@ -17,6 +17,7 @@ export default defineConfig(({ mode }) => {
POSTHOG_HOST,
POSTHOG_KEY,
AI_VECTOR_DRIVER,
BETA_PUBLIC_SPACES,
} = loadEnv(mode, envPath, "");
return {
@@ -33,6 +34,7 @@ export default defineConfig(({ mode }) => {
POSTHOG_HOST,
POSTHOG_KEY,
AI_VECTOR_DRIVER,
BETA_PUBLIC_SPACES,
},
APP_VERSION: JSON.stringify(process.env.npm_package_version),
},