mirror of
https://github.com/facebook/docusaurus.git
synced 2025-05-10 23:57:22 +02:00
feat(v2): redesign mobile UX: inline TOC + doc sidebar in main menu (#4273)
* feat(v2): mobile TOC * Bug fixes and various improvements * Redesign * extract TOCCollapsible component * TS improvements * Assign sidebar name directly to the doc route => no need for either permalinkToSidebar or GlobalData * revert changes to useWindowSize, fix FOUC issues * extract DocSidebarDesktop component * remove now useless menu infima classes * TOCHeadings => rename + remove unused onClick prop * Extract DocSidebarItem * minor renaming * replace GlobalData usage by a React teleport system to render in the navbar mobile sidebar menu directly from the DocPage component * useWindowSize => simulate SSR size in dev to make FOUC issues more obvious * fix remaining sidebar layout shift * update docs snapshots * remove unused code translations * remove unused code translations * fix minor update-code-translations bug * Add more build-size paths to watch * Restyle back button * Add missing`menu` class * extract useShallowMemoizedObject * fix routes tests + better routes formatting * use Translate api for labels * use Translate api for labels * Update translations * Improve dark mode support for back button * Merge branch 'master' into lex111/inline-color-code # Conflicts: # packages/core/dist/css/default-dark/default-dark-rtl.min.css # packages/core/dist/css/default-dark/default-dark.min.css # packages/core/dist/css/default/default-rtl.min.css # packages/core/dist/css/default/default.min.css * replace useCollapse by new useCollapsible * Cleanup and use clean-btn for TOCCollapsible button * Make TOC links clickable over full width * Cleanup * fix uncollapsible sidebar that can be collapsed + create <Collapsible> component * dependency array typo * rollback sidebars community commit typo Co-authored-by: slorber <lorber.sebastien@gmail.com>
This commit is contained in:
Alexey Pyltsyn
GitHub
parent
f03479f69e
commit
9536ef900d
58 changed files with 1006 additions and 633 deletions
|
|
@ -456,11 +456,6 @@ Object {
|
|||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
\\"permalinkToSidebar\\": {
|
||||
\\"/docs/foo/bar\\": \\"docs\\",
|
||||
\\"/docs/foo/bazSlug.html\\": \\"docs\\",
|
||||
\\"/docs/\\": \\"docs\\"
|
||||
}
|
||||
}",
|
||||
}
|
||||
|
|
@ -575,6 +570,7 @@ Array [
|
|||
"content": "@site/docs/hello.md",
|
||||
},
|
||||
"path": "/docs/",
|
||||
"sidebar": "docs",
|
||||
},
|
||||
Object {
|
||||
"component": "@theme/DocItem",
|
||||
|
|
@ -591,6 +587,7 @@ Array [
|
|||
"content": "@site/docs/foo/bar.md",
|
||||
},
|
||||
"path": "/docs/foo/bar",
|
||||
"sidebar": "docs",
|
||||
},
|
||||
Object {
|
||||
"component": "@theme/DocItem",
|
||||
|
|
@ -599,6 +596,7 @@ Array [
|
|||
"content": "@site/docs/foo/baz.md",
|
||||
},
|
||||
"path": "/docs/foo/bazSlug.html",
|
||||
"sidebar": "docs",
|
||||
},
|
||||
Object {
|
||||
"component": "@theme/DocItem",
|
||||
|
|
@ -883,9 +881,6 @@ Object {
|
|||
\\"href\\": \\"/community/team\\"
|
||||
}
|
||||
]
|
||||
},
|
||||
\\"permalinkToSidebar\\": {
|
||||
\\"/community/team\\": \\"version-1.0.0/community\\"
|
||||
}
|
||||
}",
|
||||
"version-current-metadata-prop-751.json": "{
|
||||
|
|
@ -902,9 +897,6 @@ Object {
|
|||
\\"href\\": \\"/community/next/team\\"
|
||||
}
|
||||
]
|
||||
},
|
||||
\\"permalinkToSidebar\\": {
|
||||
\\"/community/next/team\\": \\"community\\"
|
||||
}
|
||||
}",
|
||||
}
|
||||
|
|
@ -968,6 +960,7 @@ Array [
|
|||
"content": "@site/i18n/en/docusaurus-plugin-content-docs-community/current/team.md",
|
||||
},
|
||||
"path": "/community/next/team",
|
||||
"sidebar": "community",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -987,6 +980,7 @@ Array [
|
|||
"content": "@site/community_versioned_docs/version-1.0.0/team.md",
|
||||
},
|
||||
"path": "/community/team",
|
||||
"sidebar": "version-1.0.0/community",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -1439,11 +1433,6 @@ Object {
|
|||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
\\"permalinkToSidebar\\": {
|
||||
\\"/docs/1.0.0/foo/barSlug\\": \\"version-1.0.0/docs\\",
|
||||
\\"/docs/1.0.0/foo/baz\\": \\"version-1.0.0/docs\\",
|
||||
\\"/docs/1.0.0/\\": \\"version-1.0.0/docs\\"
|
||||
}
|
||||
}",
|
||||
"version-1-0-1-metadata-prop-e87.json": "{
|
||||
|
|
@ -1479,10 +1468,6 @@ Object {
|
|||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
\\"permalinkToSidebar\\": {
|
||||
\\"/docs/foo/bar\\": \\"version-1.0.1/docs\\",
|
||||
\\"/docs/\\": \\"version-1.0.1/docs\\"
|
||||
}
|
||||
}",
|
||||
"version-current-metadata-prop-751.json": "{
|
||||
|
|
@ -1518,10 +1503,6 @@ Object {
|
|||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
\\"permalinkToSidebar\\": {
|
||||
\\"/docs/next/foo/barSlug\\": \\"docs\\",
|
||||
\\"/docs/next/\\": \\"docs\\"
|
||||
}
|
||||
}",
|
||||
"version-with-slugs-metadata-prop-2bf.json": "{
|
||||
|
|
@ -1545,9 +1526,6 @@ Object {
|
|||
]
|
||||
}
|
||||
]
|
||||
},
|
||||
\\"permalinkToSidebar\\": {
|
||||
\\"/docs/withSlugs/rootAbsoluteSlug\\": \\"version-1.0.1/docs\\"
|
||||
}
|
||||
}",
|
||||
}
|
||||
|
|
@ -1714,6 +1692,7 @@ Array [
|
|||
"content": "@site/i18n/en/docusaurus-plugin-content-docs/version-1.0.0/hello.md",
|
||||
},
|
||||
"path": "/docs/1.0.0/",
|
||||
"sidebar": "version-1.0.0/docs",
|
||||
},
|
||||
Object {
|
||||
"component": "@theme/DocItem",
|
||||
|
|
@ -1722,6 +1701,7 @@ Array [
|
|||
"content": "@site/versioned_docs/version-1.0.0/foo/bar.md",
|
||||
},
|
||||
"path": "/docs/1.0.0/foo/barSlug",
|
||||
"sidebar": "version-1.0.0/docs",
|
||||
},
|
||||
Object {
|
||||
"component": "@theme/DocItem",
|
||||
|
|
@ -1730,6 +1710,7 @@ Array [
|
|||
"content": "@site/versioned_docs/version-1.0.0/foo/baz.md",
|
||||
},
|
||||
"path": "/docs/1.0.0/foo/baz",
|
||||
"sidebar": "version-1.0.0/docs",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
@ -1749,6 +1730,7 @@ Array [
|
|||
"content": "@site/docs/hello.md",
|
||||
},
|
||||
"path": "/docs/next/",
|
||||
"sidebar": "docs",
|
||||
},
|
||||
Object {
|
||||
"component": "@theme/DocItem",
|
||||
|
|
@ -1765,6 +1747,7 @@ Array [
|
|||
"content": "@site/docs/foo/bar.md",
|
||||
},
|
||||
"path": "/docs/next/foo/barSlug",
|
||||
"sidebar": "docs",
|
||||
},
|
||||
Object {
|
||||
"component": "@theme/DocItem",
|
||||
|
|
@ -1824,6 +1807,7 @@ Array [
|
|||
"content": "@site/versioned_docs/version-withSlugs/rootAbsoluteSlug.md",
|
||||
},
|
||||
"path": "/docs/withSlugs/rootAbsoluteSlug",
|
||||
"sidebar": "version-1.0.1/docs",
|
||||
},
|
||||
Object {
|
||||
"component": "@theme/DocItem",
|
||||
|
|
@ -1883,6 +1867,7 @@ Array [
|
|||
"content": "@site/versioned_docs/version-1.0.1/hello.md",
|
||||
},
|
||||
"path": "/docs/",
|
||||
"sidebar": "version-1.0.1/docs",
|
||||
},
|
||||
Object {
|
||||
"component": "@theme/DocItem",
|
||||
|
|
@ -1891,6 +1876,7 @@ Array [
|
|||
"content": "@site/versioned_docs/version-1.0.1/foo/bar.md",
|
||||
},
|
||||
"path": "/docs/foo/bar",
|
||||
"sidebar": "version-1.0.1/docs",
|
||||
},
|
||||
],
|
||||
},
|
||||
|
|
|
|||
|
|
@ -151,7 +151,6 @@ Object {
|
|||
],
|
||||
"isLast": true,
|
||||
"mainDocId": "",
|
||||
"permalinkToSidebar": Object {},
|
||||
"routePriority": undefined,
|
||||
"sidebarFilePath": "any",
|
||||
"sidebars": Object {
|
||||
|
|
@ -292,7 +291,6 @@ Object {
|
|||
],
|
||||
"isLast": true,
|
||||
"mainDocId": "",
|
||||
"permalinkToSidebar": Object {},
|
||||
"routePriority": undefined,
|
||||
"sidebarFilePath": "any",
|
||||
"sidebars": Object {
|
||||
|
|
@ -433,7 +431,6 @@ Object {
|
|||
],
|
||||
"isLast": true,
|
||||
"mainDocId": "",
|
||||
"permalinkToSidebar": Object {},
|
||||
"routePriority": undefined,
|
||||
"sidebarFilePath": "any",
|
||||
"sidebars": Object {
|
||||
|
|
|
|||
|
|
@ -105,9 +105,6 @@ Entries created:
|
|||
`version-${kebabCase(version.versionName)}-metadata-prop`,
|
||||
);
|
||||
expect(versionMetadataProp.docsSidebars).toEqual(toSidebarsProp(version));
|
||||
expect(versionMetadataProp.permalinkToSidebar).toEqual(
|
||||
version.permalinkToSidebar,
|
||||
);
|
||||
},
|
||||
|
||||
expectSnapshot: () => {
|
||||
|
|
|
|||
|
|
@ -40,7 +40,6 @@ function createSampleVersion(
|
|||
versionLabel: `${version.versionName} label`,
|
||||
versionPath: '/docs/',
|
||||
mainDocId: '',
|
||||
permalinkToSidebar: {},
|
||||
routePriority: undefined,
|
||||
sidebarFilePath: 'any',
|
||||
isLast: true,
|
||||
|
|
|
|||
|
|
@ -37,7 +37,6 @@ import {
|
|||
DocFile,
|
||||
DocsMarkdownOption,
|
||||
} from './types';
|
||||
import {PermalinkToSidebar} from '@docusaurus/plugin-content-docs-types';
|
||||
import {RuleSetRule} from 'webpack';
|
||||
import {cliDocsVersionCommand} from './cli';
|
||||
import {VERSIONS_JSON_FILE} from './constants';
|
||||
|
|
@ -224,14 +223,6 @@ export default function pluginContentDocs(
|
|||
// sort to ensure consistent output for tests
|
||||
docs.sort((a, b) => a.id.localeCompare(b.id));
|
||||
|
||||
// TODO really useful? replace with global state logic?
|
||||
const permalinkToSidebar: PermalinkToSidebar = {};
|
||||
Object.values(docs).forEach((doc) => {
|
||||
if (doc.sidebar) {
|
||||
permalinkToSidebar[doc.permalink] = doc.sidebar;
|
||||
}
|
||||
});
|
||||
|
||||
// The "main doc" is the "version entry point"
|
||||
// We browse this doc by clicking on a version:
|
||||
// - the "home" doc (at '/docs/')
|
||||
|
|
@ -256,7 +247,6 @@ export default function pluginContentDocs(
|
|||
...versionMetadata,
|
||||
mainDocId: getMainDoc().unversionedId,
|
||||
sidebars,
|
||||
permalinkToSidebar,
|
||||
docs: docs.map(addNavData),
|
||||
};
|
||||
}
|
||||
|
|
@ -300,30 +290,36 @@ export default function pluginContentDocs(
|
|||
JSON.stringify(metadataItem, null, 2),
|
||||
);
|
||||
|
||||
return {
|
||||
const docRoute: RouteConfig = {
|
||||
path: metadataItem.permalink,
|
||||
component: docItemComponent,
|
||||
exact: true,
|
||||
modules: {
|
||||
content: metadataItem.source,
|
||||
},
|
||||
// Because the parent (DocPage) comp need to access it easily
|
||||
// This permits to render the sidebar once without unmount/remount when navigating (and preserve sidebar state)
|
||||
...(metadataItem.sidebar && {
|
||||
sidebar: metadataItem.sidebar,
|
||||
}),
|
||||
};
|
||||
|
||||
return docRoute;
|
||||
}),
|
||||
);
|
||||
|
||||
return routes.sort((a, b) => a.path.localeCompare(b.path));
|
||||
};
|
||||
|
||||
async function doCreateVersionRoutes(loadedVersion: LoadedVersion) {
|
||||
async function doCreateVersionRoutes(
|
||||
loadedVersion: LoadedVersion,
|
||||
): Promise<void> {
|
||||
const versionMetadata = toVersionMetadataProp(pluginId, loadedVersion);
|
||||
const versionMetadataPropPath = await createData(
|
||||
`${docuHash(
|
||||
`version-${loadedVersion.versionName}-metadata-prop`,
|
||||
)}.json`,
|
||||
JSON.stringify(
|
||||
toVersionMetadataProp(pluginId, loadedVersion),
|
||||
null,
|
||||
2,
|
||||
),
|
||||
JSON.stringify(versionMetadata, null, 2),
|
||||
);
|
||||
|
||||
addRoute({
|
||||
|
|
@ -341,7 +337,9 @@ export default function pluginContentDocs(
|
|||
});
|
||||
}
|
||||
|
||||
async function createVersionRoutes(loadedVersion: LoadedVersion) {
|
||||
async function createVersionRoutes(
|
||||
loadedVersion: LoadedVersion,
|
||||
): Promise<void> {
|
||||
try {
|
||||
return await doCreateVersionRoutes(loadedVersion);
|
||||
} catch (e) {
|
||||
|
|
|
|||
|
|
@ -10,10 +10,6 @@
|
|||
declare module '@docusaurus/plugin-content-docs-types' {
|
||||
import type {VersionBanner} from './types';
|
||||
|
||||
export type PermalinkToSidebar = {
|
||||
[permalink: string]: string;
|
||||
};
|
||||
|
||||
export type PropVersionMetadata = {
|
||||
pluginId: string;
|
||||
version: string;
|
||||
|
|
@ -21,7 +17,6 @@ declare module '@docusaurus/plugin-content-docs-types' {
|
|||
banner: VersionBanner;
|
||||
isLast: boolean;
|
||||
docsSidebars: PropSidebars;
|
||||
permalinkToSidebar: PermalinkToSidebar;
|
||||
};
|
||||
|
||||
type PropsSidebarItemBase = {
|
||||
|
|
@ -60,6 +55,7 @@ declare module '@theme/DocItem' {
|
|||
readonly component: () => JSX.Element;
|
||||
readonly exact: boolean;
|
||||
readonly path: string;
|
||||
readonly sidebar?: string;
|
||||
};
|
||||
|
||||
export type FrontMatter = {
|
||||
|
|
|
|||
|
|
@ -77,6 +77,5 @@ export function toVersionMetadataProp(
|
|||
banner: loadedVersion.versionBanner,
|
||||
isLast: loadedVersion.isLast,
|
||||
docsSidebars: toSidebarsProp(loadedVersion),
|
||||
permalinkToSidebar: loadedVersion.permalinkToSidebar,
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -239,7 +239,6 @@ export type LoadedVersion = VersionMetadata & {
|
|||
mainDocId: string;
|
||||
docs: DocMetadata[];
|
||||
sidebars: Sidebars;
|
||||
permalinkToSidebar: Record<string, string>;
|
||||
};
|
||||
|
||||
export type LoadedContent = {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue