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,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;
|
||||
}
|
||||
Reference in New Issue
Block a user