search

storybookjs / frontpage

🌐 The website for storybook.js.org
https://storybook.js.org
MIT License
214 stars 120 forks source link

Add "On this page" TOC #628

Closed kylegach closed 10 months ago

kylegach commented 10 months ago

What I did

Wide viewports

[!NOTE] Currently, this has to be quite wide (1548px) for the main content to be wide enough to be legible. (The screenshot was taken at 1800px wide.) We need to discuss the overall page layout to improve this. See related code comment..

How to test

[!NOTE] The broken sidebar links are a known, unrelated issue.

  1. Open the deploy preview
  2. Navigate to a page with lots of headings, like the argTypes API reference
  3. Confirm the "On this page" feature renders correctly
    1. At viewports > 1548px, it should be expanded, in the right rail
      1. Also confirm that the overall page layout looks correct, with no overflowing content
      2. Click one of the links
        1. Confirm that you are scrolled to the correct heading and that it appears visibly, just under the sticky header
      3. Find a page with lots of headings (argTypes API reference is a good one)
        1. Shrink your browser's viewport vertically until the full "On this page" section can't fit
          1. Confirm that the scrolling works as expected
    2. At viewports <= 1548px, it should not render
  4. Navigate to a page with less than 4 headings, like the Install page
    1. Confirm that the "On this page" feature is not rendered
netlify[bot] commented 10 months ago

Deploy Preview for storybook-frontpage ready!

Name Link
Latest commit 5411a5190a0a3c13c3e6d2e834674e7619e2c8de
Latest deploy log https://app.netlify.com/sites/storybook-frontpage/deploys/65565ced4ee9b200079ca3c3
Deploy Preview https://deploy-preview-628--storybook-frontpage.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

cdedreuille commented 10 months ago

@kylegach I think you could remove the TOC if the main content in the middle is below 600px. TOC is mostly useful when there's space. Otherwise we just hide it.