mirror of
https://github.com/docmost/docmost.git
synced 2026-09-11 07:56:54 +08:00
feat(beta): public spaces (#2473)
This commit is contained in:
Philip Okugbe
@@ -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);
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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>
|
||||
);
|
||||
}
|
||||
@@ -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,
|
||||
});
|
||||
}
|
||||
@@ -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]);
|
||||
}
|
||||
@@ -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",
|
||||
});
|
||||
},
|
||||
});
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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]);
|
||||
}
|
||||
@@ -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[];
|
||||
}
|
||||
@@ -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, []);
|
||||
}
|
||||
@@ -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
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user