Skip to content

feat(v2): Sidebar category linking to doc #3898

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
softwarecurator wants to merge 4 commits into from
Closed

feat(v2): Sidebar category linking to doc #3898

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
5eb20d6
added go_to config
softwarecurator Dec 9, 2020
112ec81
This is temp
softwarecurator Dec 9, 2020
6ba1686
added go_to functionality
softwarecurator Dec 9, 2020
7765199
updates from pull request
softwarecurator Dec 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/docusaurus-theme-classic/src/theme/DocPage/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ function DocPageContent({
const {pluginId, permalinkToSidebar, docsSidebars, version} = versionMetadata;
const sidebarName = permalinkToSidebar[currentDocRoute.path];
const sidebar = docsSidebars[sidebarName];

console.log(sidebar);
Copy link
Copy Markdown
Contributor

@swyxio swyxio Jan 5, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

remove

const [hiddenSidebarContainer, setHiddenSidebarContainer] = useState(false);
const [hiddenSidebar, setHiddenSidebar] = useState(false);
const toggleSidebar = useCallback(() => {
Expand Down
49 changes: 41 additions & 8 deletions packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,10 @@ function usePrevious(value) {
return ref.current;
}

function sleep(ms: number) {
return new Promise((resolve) => setTimeout(resolve, ms));
}

const isActiveSidebarItem = (item, activePath) => {
if (item.type === 'link') {
return isSamePath(item.href, activePath);
Expand All @@ -46,6 +50,7 @@ function DocSidebarItemCategory({
onItemClick,
collapsible,
activePath,
link,
...props
}) {
const {items, label} = item;
Expand All @@ -61,6 +66,7 @@ function DocSidebarItemCategory({
}
return isActive ? false : item.collapsed;
});
const [initialLink, setInitialLink] = useState('');

const menuListRef = useRef<HTMLUListElement>(null);
const [menuListHeight, setMenuListHeight] = useState<string | undefined>(
Expand All @@ -78,17 +84,32 @@ function DocSidebarItemCategory({
if (justBecameActive && collapsed) {
setCollapsed(false);
}
if (link && !collapsed) {
for (const i in items) {
if (items.hasOwnProperty(i)) {
const childItem = items[i];
if (childItem.type === 'link') {
if (link.id.includes(childItem.label.toLowerCase())) {
setInitialLink(childItem.href);
}
}
}
}
}
}, [isActive, wasActive, collapsed]);

const handleItemClick = useCallback(
(e) => {
e.preventDefault();

async (e) => {
if (!collapsed) {
e.preventDefault();
}
if (!menuListHeight) {
handleMenuListHeight();
}

setTimeout(() => setCollapsed((state) => !state), 100);
setCollapsed((state) => {
return !state;
});
await sleep(100);
Copy link
Copy Markdown
Collaborator

@slorber slorber Dec 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

here you wait 100ms after setting the state, while before we waited before setting the state
that looks different to me

},
[menuListHeight],
);
Expand All @@ -103,17 +124,27 @@ function DocSidebarItemCategory({
'menu__list-item--collapsed': collapsed,
})}
key={label}>
<a
<Link
to={initialLink}
className={clsx('menu__link', {
'menu__link--sublist': collapsible,
'menu__link--active': collapsible && isActive,
[styles.menuLinkText]: !collapsible,
})}
{...(isInternalUrl(initialLink)
? {
isNavLink: true,
exact: true,
onClick: onItemClick,
}
: {
target: '_blank',
rel: 'noreferrer noopener',
})}
onClick={collapsible ? handleItemClick : undefined}
href={collapsible ? '#!' : undefined}
{...props}>
{label}
</a>
</Link>
<ul
className="menu__list"
ref={menuListRef}
Expand All @@ -129,6 +160,7 @@ function DocSidebarItemCategory({
<DocSidebarItem
tabIndex={collapsed ? '-1' : '0'}
key={childItem.label}
link={link}
item={childItem}
onItemClick={onItemClick}
collapsible={collapsible}
Expand Down Expand Up @@ -268,6 +300,7 @@ function DocSidebar({
<DocSidebarItem
key={item.label}
item={item}
link={item.link}
onItemClick={(e) => {
e.target.blur();
setShowResponsiveSidebar(false);
Expand Down
4 changes: 2 additions & 2 deletions packages/docusaurus-theme-classic/src/types.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,11 +73,11 @@ declare module '@theme/DocPaginator' {
}

declare module '@theme/DocSidebar' {
import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types';
// import type {PropSidebarItem} from '@docusaurus/plugin-content-docs-types';
Copy link
Copy Markdown
Contributor Author

@softwarecurator softwarecurator Dec 10, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is the issue I am having with deployment, since I'm adding a new field to sidebar.js its falling the test is there somewhere where I can add my new link field?

Copy link
Copy Markdown
Collaborator

@slorber slorber Dec 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure what you are talking about

The CI deployment error is currently:

image

This is an error emitted on purpose by the docs plugin, where you should allow/validate the new link attribute


export type Props = {
readonly path: string;
readonly sidebar: readonly PropSidebarItem[];
readonly sidebar: any;
Copy link
Copy Markdown
Collaborator

@slorber slorber Dec 15, 2020

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

should still be a list of sidebar items

readonly sidebarCollapsible?: boolean;
readonly onCollapse: () => void;
readonly isHidden: boolean;
Expand Down
3 changes: 3 additions & 0 deletions website/sidebars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,14 @@ module.exports = {
{
type: 'category',
label: 'Getting Started',
link: {type: 'doc', id: 'introduction'},
collapsed: false,
items: ['installation', 'configuration', 'typescript-support'],
},
{
type: 'category',
label: 'Guides',
link: {type: 'doc', id: 'deployment'},
items: [
'guides/creating-pages',
'styling-layout',
Expand All @@ -37,6 +39,7 @@ module.exports = {
{
type: 'category',
label: 'Advanced Guides',
link: {type: 'doc', id: 'presets'},
items: ['using-plugins', 'using-themes', 'presets'],
},
],
Expand Down