feat: implement logic to parse the toc.toml and render it
#1329
Conversation
✅ Deploy Preview for docs-frontend-dotcomstg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
❌ Deploy Preview for docs-frontend-stg failed. Why did it fail? →
|
❌ Deploy Preview for docs-frontend-stg failed. Why did it fail? →
|
✅ Deploy Preview for docs-frontend-dotcomstg ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
| @@ -1,4 +1,5 @@ | |||
| const swc = require('@swc/core'); | |||
| const { load } = require('js-toml'); | |||
There was a problem hiding this comment.
Should we remove from here?
| `; | ||
|
|
||
| function isSelectedTab(slug) { | ||
| if (typeof window === 'undefined') return false; |
There was a problem hiding this comment.
We have an existing is-browser util. Is that something we can leverage here?
| const FormatTitle = styled.div` | ||
| margin-left: var(--margin-left); | ||
| scroll-margin-bottom: ${theme.size.xxlarge}; | ||
| `; | ||
|
|
||
| const caretStyle = css` | ||
| margin-top: 3px; | ||
| margin-right: 5px; | ||
| min-width: 16px; | ||
| `; |
There was a problem hiding this comment.
(Nit) Going forward, we might want to consolidate to using LG's emotion package instead so we don't have so many different ways of adding css
| // This prevents LG's SideNav component from being seen in its collapsed state on mobile | ||
| return ( | ||
| <> | ||
| <Global /> |
There was a problem hiding this comment.
What's the purpose of the empty Global component here?
There was a problem hiding this comment.
Oh, I removed the mobile styling in this Global component. I didn't remove the rest of it, though, which I'll do right now! Thanks!
| onClick={() => setIsOpen(!isOpen)} | ||
| > | ||
| <Icon className={cx(caretStyle)} glyph={iconType} fill={palette.gray.base} onClick={onCaretClick} /> | ||
| <FormatTitle style={{ '--margin-left': '3px' }}>{label}</FormatTitle> |
There was a problem hiding this comment.
Is this style needed? I see margin-left: 3px already declared
| @@ -0,0 +1,5 @@ | |||
| export function getFeatureFlags() { | |||
There was a problem hiding this comment.
I've been wanting a util like this but haven't actively worked with any myself recently to justify adding it. Love this!
| // groups are for adding a static header, these can also be collapsible | ||
| if (group) { | ||
| return ( | ||
| <SideNavGroup header={label} collapsible={collapsible} className={cx(sideNavItemTOCStyling({ level }))}> |
There was a problem hiding this comment.
We might need to omit sideNavItemTOCStyling from the groups themselves or tweak it for groups, depending on the use case. Seems like this may be causing awkward padding
There was a problem hiding this comment.
Yeah! Thanks for pointing this out, I'm noticing the awkward padding as well. I haven't updated the PR description to reflect this, but I think I might forgo too much styling work as the final design is still very much so up in the air. The focus for this PR is to get the scaffolding in place to read the toc.toml, and then render the side nav with it
| <SideNavItem | ||
| hideExternalIcon={true} | ||
| as={Link} | ||
| to={url} |
There was a problem hiding this comment.
Based on the current toctree example, would it make sense to check if url exists here? In the deploy preview link, clicking it effectively reloads the current page and it's difficult to see the hidden menu items
Stories/Links:
DOP-NNNN
Current Behavior:
Put a link to current staging or production behavior, if applicable
Staging Links:
Put a link to your staging environment(s), if applicable
Notes:
README updates