search

storybookjs / frontpage

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

Docs design refresh #626

Closed cdedreuille closed 10 months ago

cdedreuille commented 10 months ago

What was done

See corresponding content updates in https://github.com/storybookjs/storybook/pull/24925

This mega-PR contains the following PRs:

  1. https://github.com/storybookjs/frontpage/pull/620
  2. https://github.com/storybookjs/frontpage/pull/623
  3. https://github.com/storybookjs/frontpage/pull/621
  4. https://github.com/storybookjs/frontpage/pull/624
  5. https://github.com/storybookjs/frontpage/pull/627
  6. https://github.com/storybookjs/frontpage/pull/628
  7. https://github.com/storybookjs/frontpage/pull/629
  8. https://github.com/storybookjs/frontpage/pull/630
  9. https://github.com/storybookjs/frontpage/pull/631
  10. https://github.com/storybookjs/frontpage/pull/632
  11. https://github.com/storybookjs/frontpage/pull/634
  12. https://github.com/storybookjs/frontpage/pull/635

How to test

[!NOTE] QA'ing the following steps is much more valuable than an in-depth code review, at this time

  1. Open the deploy preview
  2. Notice the lack of a renderer (framework) in the URL 🎉
  3. Confirm that the renderer pills + menu (under the title) look and feel correct
    1. Confirm that it is highlighting the correct renderer (React, by default, or whatever is in your localStorage[^1])
    2. Confirm that you can choose another core renderer (React, Vue, Angular, Web Components)
    3. Confirm that both the page content and the localStorage value[^1] are updated correctly
    4. Confirm that you can choose a community renderer (under the More menu)
      1. Confirm that your selected community renderer has taken the place of the last pill (Web Components)
      2. Confirm that the last pill is now first in the More menu
      3. Confirm that your selected community renderer is not in the menu
    5. Confirm that you can select a core renderer when a community renderer is highlighted
      1. Confirm that all of the pill + menu manipulation from the previous step is now undone
  4. Make note of your current renderer
  5. Open the deploy preview's homepage
    1. Under the hero, click a renderer logo that is different than your current renderer
    2. Confirm that you navigate to the Install page and your renderer automatically changes to the one matching the logo you clicked
    3. Confirm that you can still select a different renderer
  6. Check updated sitemaps
    • Here are helpful diffs (production on left, this PR on right), generated on the latest version:
  7. Check updated generated redirects
    • Here's a helpful diff (production on left, this PR on right), generated on the latest version
  8. Confirm that the header is fixed to the top of the viewport
  9. Confirm that clicking a heading anchor icon places that heading immediately under the header, with no overlap
  10. Confirm that the sidebar looks and feels correct
    1. Confirm that it scrolls and behaves "sticky" correctly
    2. Confirm that the current page is highlighted in the sidebar
      1. Confirm that when the current page is under an accordion, that accordion defaults to an open state
    3. Confirm that you can navigate via the sidebar links
  11. Navigate to a page with code snippets
  12. Confirm that the code snippets look and feel correct
    1. Confirm that the icon and title (filename) are correct
      1. Confirm that terminal snippets have no title
    2. Confirm that the copy button works
    3. Confirm that relevant snippets display "JavaScript", "TypeScript" and "TypeScript 4.9" in a menu in the snippet toolbar
    4. Confirm that snippets with only "npm", "pnpm", and "yarn" options display those options in a menu in the snippet toolbar instead of tabs
      1. Confirm that the selected value is either "npm" (the default) or the value in your localStorage[^1]
      2. Confirm that choosing a new value updates your localStorage[^1]
    5. Confirm that necessary snippets still use tabs (Vue is a good renderer to find these)
    6. If you know of any particularly interesting combinations of snippet types, check those ;)
  13. Navigate to a page with lots of headings, like the argTypes API reference
  14. Confirm the "On this page" feature renders correctly
    1. At viewports > 1508px, 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 <= 1508px, it should not render
  15. Navigate to a page with less than 4 headings, like the Install page
    1. Confirm that the "On this page" feature is not rendered

The rest of these steps can only be tested with the corresponding content changes. I've made a special deploy preview for this purpose.

Most importantly, click every link you can, in content and the sidebar, on a variety of pages (top-level, e.g. Writing stories; mid-level, e.g. Args; and third-level, e.g. Configure TypeScript).

  1. Open the deploy preview with content changes
  2. Confirm that you can click each top-level sidebar heading (Stories, Tests, etc)
    1. The Sharing and API pages are new!
  3. Confirm that clicking the "Get started" heading redirects you to "Install" (which is a temporary workaround, until the docs homepage is available)
  4. Confirm that the "Edit on GitHub" links work correctly (it'll 404 right now, but the URL should work if you change next to changes-from-docs-updates)

Rollout plan

Order matters!

  1. Merge https://github.com/storybookjs/components-marketing/pull/71
  2. Merge this PR
  3. Propagate components-marketing updates across other sites
    1. Update Tutorial's SubNav to refer to "Documentation" instead of "Guides"
  4. Check prod with current content
  5. Remove framework facet from Algolia DocsSearch config and kick off a crawl
  6. Merge https://github.com/storybookjs/storybook/pull/24925
  7. Immediately cancel any Netlify deploys that are kicked off
  8. Manually run the Push all release branches action
  9. Check prod with new content
  10. Remove all uses of framework:agnostic across all sites

[^1]: In Chrome, at least: Open DevTools → Application tab → Expand Local storage under the Storage heading in the left sidebar → Click on the URL for the deploy preview

netlify[bot] commented 10 months ago

Deploy Preview for storybook-frontpage ready!

Name Link
Latest commit ff61c1e0bd3a2398dc0b0dffadfa2b2269309063
Latest deploy log https://app.netlify.com/sites/storybook-frontpage/deploys/6565678b2080630008b71cd9
Deploy Preview https://deploy-preview-626--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.

socket-security[bot] commented 10 months ago

New and removed dependencies detected. Learn more about Socket for GitHub ↗︎

Packages Version New capabilities Transitives Size Publisher
shiki 0.14.5 network, filesystem, environment +4 16.6 MB antfu
@chromaui/tetra 1.16.9 environment +72 9.62 MB cdedreuille
@storybook/components-marketing 2.2.0 environment +20 9.4 MB
@radix-ui/react-tabs 1.0.4 None +13 376 kB benoitgrelard
@radix-ui/react-accordion 1.1.2 None +13 406 kB benoitgrelard
@radix-ui/react-dropdown-menu 2.0.6 None +36 1.82 MB benoitgrelard
@radix-ui/react-scroll-area 1.0.5 None +10 435 kB benoitgrelard
@storybook/icons 1.2.2 None +0 1.16 MB ndelangen

🚮 Removed packages: react@16.13.1, react-dom@16.13.1

socket-security[bot] commented 10 months ago

🚨 Potential security issues detected. Learn more about Socket for GitHub ↗︎

To accept the risk, merge this PR and you will not be notified again.

Issue Package Version Note Source
New author @docsearch/css 3.2.0
New author @docsearch/react 3.2.0
New author @radix-ui/react-direction 1.0.0
New author vscode-oniguruma 1.7.0

Next steps

What is new author?

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Scrutinize new collaborator additions to packages because they now have the ability to publish code into your dependency tree. Packages should avoid frequent or unnecessary additions or changes to publishing rights.

Take a deeper look at the dependency

Take a moment to review the security alert above. Review the linked package source code to understand the potential risk. Ensure the package is not malicious before proceeding. If you're unsure how to proceed, reach out to your security team or ask the Socket team for help at support [AT] socket [DOT] dev.

Remove the package

If you happen to install a dependency that Socket reports as Known Malware you should immediately remove it and select a different dependency. For other alert types, you may may wish to investigate alternative packages or consider if there are other ways to mitigate the specific risk posed by the dependency.

Mark a package as acceptable risk

To ignore an alert, reply with a comment starting with @SocketSecurity ignore followed by a space separated list of package-name@version specifiers. e.g. @SocketSecurity ignore foo@1.0.0 bar@* or ignore all packages with @SocketSecurity ignore-all

  • @SocketSecurity ignore @docsearch/css@3.2.0
  • @SocketSecurity ignore @docsearch/react@3.2.0
  • @SocketSecurity ignore @radix-ui/react-direction@1.0.0
  • @SocketSecurity ignore vscode-oniguruma@1.7.0
domyen commented 10 months ago

I wrote a list of issues found during QA here

Heads up, the sitemap diffs no longer exist so wasn't able to QA that.

image
kylegach commented 10 months ago

@domyen — Thank you!

Those diff links expire after 7 days, which is why they 404'd. I just re-generated them using the latest code, and would appreciate you checking them! The relevant portion (with new links) is quoted here:

  1. Check updated sitemaps
    • Here are helpful diffs (production on left, this PR on right), generated on the latest version:
  2. Check updated generated redirects
    • Here's a helpful diff (production on left, this PR on right), generated on the latest version
domyen commented 10 months ago

Reviewed the sitemaps, it looks good to me!