Finish go to selected paged from category sidebar #4323

ben-qnimble · 2021-03-01T22:38:50Z

Motivation

Pull #3898 looks very helpful (sidebar category linking to doc) but it seems like it got stalled, so I'm trying to get it over the finish line by addressing issues mentioned in the pull request code review.

Have you read the Contributing Guidelines on pull requests?

Yes

Test Plan

Please see #3898. I set a few categories to have links and verified that they work as expected.

Related PRs

Adding to the commits in #3898 to address code review comments.

netlify · 2021-03-01T22:41:29Z

[V1] Deploy preview failure

Built without sensitive environment variables with commit e2998f7

https://app.netlify.com/sites/docusaurus-1/deploys/60411f70eaefbc00073fd738

netlify · 2021-03-01T22:47:19Z

Deploy preview for docusaurus-2 failed.

Built without sensitive environment variables with commit e2998f7

https://app.netlify.com/sites/docusaurus-2/deploys/60411f70737bf200070b220e

github-actions · 2021-03-01T22:47:32Z

⚡️ Lighthouse report for the changes in this PR:

Category	Score
🟠 Performance	86
🟢 Accessibility	96
🟢 Best practices	100
🟢 SEO	100
🟢 PWA	95

Lighthouse ran on https://deploy-preview-4323--docusaurus-2.netlify.app/classic/

github-actions · 2021-03-01T22:47:59Z

Size Change: 0 B

Total Size: 532 kB

ℹ️ View Unchanged

Filename	Size	Change
`website/build/assets/css/styles.********.css`	87.1 kB	0 B
`website/build/assets/js/main.********.js`	359 kB	0 B
`website/build/blog/2017/12/14/introducing-docusaurus/index.html`	60.3 kB	0 B
`website/build/docs/introduction/index.html`	235 B	0 B
`website/build/index.html`	25.4 kB	0 B

_{compressed-size-action}

…ced guides

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

…xternal links

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

slorber

Thanks for working on this

Left some inline review comments

let me know if you need any help to handle those

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

slorber · 2021-03-04T14:11:59Z

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

+      if (Object.hasOwnProperty.call(item.link, 'type')) {
+        switch (item.link.type) {
+          case 'doc':
+            setInitialLink(item.link.id);


this is not correct, the id is not the URL path, as docs can use slugs they have ids that can be totally different from their final URL.

This requires resolving the id to the doc URL path

(+ shouldn't need setState)

Is there a function for getting the URL path from a document id?

packages/docusaurus-plugin-content-docs/src/plugin-content-docs.d.ts

slorber · 2021-03-04T14:14:58Z

packages/docusaurus-plugin-content-docs/src/sidebars.ts

@@ -97,7 +97,7 @@ function assertItem<K extends string>(
 function assertIsCategory(
  item: unknown,
 ): asserts item is SidebarItemCategoryJSON {
-  assertItem(item, ['items', 'label', 'collapsed', 'customProps']);
+  assertItem(item, ['items', 'label', 'collapsed', 'link', 'customProps']);


We need to validate that the link attribute is valid in this function + add unit tests

I might need some help on this one

ben-qnimble

Thanks for working on this

Left some inline review comments

let me know if you need any help to handle those

Yeah, I think I'll need help on what's left. Mostly decoding the url from the doc id and validation on the link. Thanks

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

ben-qnimble · 2021-03-04T17:48:39Z

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

+      if (Object.hasOwnProperty.call(item.link, 'type')) {
+        switch (item.link.type) {
+          case 'doc':
+            setInitialLink(item.link.id);


Is there a function for getting the URL path from a document id?

Josh-Cena · 2021-08-13T06:10:28Z

Hi, what's the status of this PR? I'd be really looking forward to this feature.

@ben-qnimble In case you are still working on it, here are a few hints:

Is there a function for getting the URL path from a document id?

You need several hooks to extract this information, but here's a reference:

docusaurus/packages/docusaurus-theme-classic/src/theme/NavbarItem/DocNavbarItem.tsx

Lines 49 to 62 in 295e77c

    
           const doc = getDocInVersions(versions, docId); 
        
           const activeDocInfimaClassName = getInfimaActiveClassName(props.mobile); 
        
           return ( 
        
             <DefaultNavbarItem 
        
               exact 
        
               {...props} 
        
               className={clsx(props.className, { 
        
                 [activeDocInfimaClassName]: 
        
                   activeDoc?.sidebar && activeDoc.sidebar === doc.sidebar, 
        
               })} 
        
               activeClassName={activeDocInfimaClassName} 
        
               label={staticLabel ?? doc.id} 
        
               to={doc.path}

We need to validate that the link attribute is valid in this function

Just follow the pattern below to verify that link is an object with type, to, href properties, etc., and it's pointing to a valid location (or not? Maybe just type check is sufficient)

I'm in need of this feature and it's a shame seeing it getting stalled multiple times now 🤦‍♂️

Josh-Cena · 2021-08-13T06:24:23Z

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx

@@ -132,6 +153,7 @@ function DocSidebarItemCategory({
          <DocSidebarItem
            tabIndex={collapsed ? '-1' : '0'}
            key={childItem.label}
+            link={link}


Why bind this to the children elements? Only the category with link attribute should have a link associated right?

slorber · 2021-08-20T17:01:29Z

Hi, what's the status of this PR? I'd be really looking forward to this feature.

This is a complex feature and this PR is not really in the direction I'd like to take to provide a set of useful features to Docusaurus (in particular #2643)

I'll try to see if there's anything to take here, but ultimately it's likely that I close it.

I'll start to work on these features soon, this is the next big task on my todolist.

Josh-Cena · 2021-11-04T23:16:39Z

Closing in favor of #5830

softwarecurator and others added 7 commits December 8, 2020 16:17

added go_to config

5eb20d6

This is temp

112ec81

added go_to functionality

6ba1686

updates from pull request

7765199

Merge branch 'master' into go-to-selected-page

1c3f322

Address code review comments from pull request facebook#3898

7525e54

Pass all automated build and deplay and lint tests

8d319d1

facebook-github-bot added the CLA Signed Signed Facebook CLA label Mar 1, 2021

ben-qnimble added 3 commits March 1, 2021 17:49

Fix typo in link for Getting Started category. Remove link from Advan…

8d6dd4b

…ced guides

Remove unused function

42d59e0

formatting fix to pass prettier check

314d44d

lex111 reviewed Mar 1, 2021

View reviewed changes

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx Outdated Show resolved Hide resolved

Per @lex111 code review comment, remove manually set attributes for e…

a2e8793

…xternal links

ben-qnimble marked this pull request as ready for review March 2, 2021 01:25

ben-qnimble requested a review from slorber as a code owner March 2, 2021 01:25

ben-qnimble mentioned this pull request Mar 2, 2021

Go to selected page #4313

Closed

ben-qnimble requested a review from lex111 March 2, 2021 19:02

lex111 reviewed Mar 4, 2021

View reviewed changes

packages/docusaurus-theme-classic/src/theme/DocSidebar/index.tsx Outdated Show resolved Hide resolved

Change default/empty for category link from empty string to undefined

b8e9f03

slorber requested changes Mar 4, 2021

View reviewed changes

ben-qnimble added 3 commits March 4, 2021 11:17

Make SidebarItemCategory link object get proper typing

1201e5d

Switch from useState to useMemo for storing category link reference

afc8a2f

Remove breaks after returns as circle flags as unreachable code

e2998f7

ben-qnimble requested a review from slorber March 11, 2021 01:12

ben-qnimble requested a review from lex111 March 29, 2021 15:50

ben-qnimble commented Apr 2, 2021

View reviewed changes

Josh-Cena reviewed Aug 13, 2021

View reviewed changes

Josh-Cena closed this Nov 4, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Finish go to selected paged from category sidebar #4323

Finish go to selected paged from category sidebar #4323

ben-qnimble commented Mar 1, 2021 •

edited

Loading

netlify bot commented Mar 1, 2021 •

edited

Loading

netlify bot commented Mar 1, 2021 •

edited

Loading

github-actions bot commented Mar 1, 2021 •

edited

Loading

github-actions bot commented Mar 1, 2021 •

edited

Loading

slorber left a comment

slorber Mar 4, 2021

ben-qnimble Mar 4, 2021

slorber Mar 4, 2021

ben-qnimble Mar 4, 2021

ben-qnimble left a comment

ben-qnimble Mar 4, 2021

Josh-Cena commented Aug 13, 2021 •

edited

Loading

Josh-Cena Aug 13, 2021 •

edited

Loading

slorber commented Aug 20, 2021

Josh-Cena commented Nov 4, 2021

Finish go to selected paged from category sidebar #4323

Finish go to selected paged from category sidebar #4323

Conversation

ben-qnimble commented Mar 1, 2021 • edited Loading

Motivation

Have you read the Contributing Guidelines on pull requests?

Test Plan

Related PRs

netlify bot commented Mar 1, 2021 • edited Loading

netlify bot commented Mar 1, 2021 • edited Loading

github-actions bot commented Mar 1, 2021 • edited Loading

github-actions bot commented Mar 1, 2021 • edited Loading

slorber left a comment

Choose a reason for hiding this comment

slorber Mar 4, 2021

Choose a reason for hiding this comment

ben-qnimble Mar 4, 2021

Choose a reason for hiding this comment

slorber Mar 4, 2021

Choose a reason for hiding this comment

ben-qnimble Mar 4, 2021

Choose a reason for hiding this comment

ben-qnimble left a comment

Choose a reason for hiding this comment

ben-qnimble Mar 4, 2021

Choose a reason for hiding this comment

Josh-Cena commented Aug 13, 2021 • edited Loading

Josh-Cena Aug 13, 2021 • edited Loading

Choose a reason for hiding this comment

slorber commented Aug 20, 2021

Josh-Cena commented Nov 4, 2021

ben-qnimble commented Mar 1, 2021 •

edited

Loading

netlify bot commented Mar 1, 2021 •

edited

Loading

netlify bot commented Mar 1, 2021 •

edited

Loading

github-actions bot commented Mar 1, 2021 •

edited

Loading

github-actions bot commented Mar 1, 2021 •

edited

Loading

Josh-Cena commented Aug 13, 2021 •

edited

Loading

Josh-Cena Aug 13, 2021 •

edited

Loading