search

storybookjs / frontpage

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

Remove renderer (framework) from URL #620

Closed kylegach closed 10 months ago

kylegach commented 11 months ago

What I did

  1. Remove renderer (framework) from URL
    • Read/write localStorage value instead
  2. Add support for renderer query param
    • When provided, it auto-sets the localStorage value to the param's value
    • Use it for framework logos on homepage
  3. Update redirects
    • For each version & framework combo, add: /docs/<version?>/<framework>/<path> -> /docs/<version?>/<path>
    • Update static redirects to no longer point to URLs with framework
  4. Refactor IfRenderer -> If
    • Only filter content client-side
    • IfRenderer still available in MDX, for older content
    • Update CodeSnippets to account for client-side-only filtering
  5. Consistently use renderer instead of framework in codebase
  6. Use @storybookjs/components-marketing canary

How to test

  1. Open the deploy preview
    1. Notice the lack of a renderer (framework) in the URL 🎉
    2. Browse around and confirm things feel right
    3. Select a different renderer using the menu in the subnav toolbar
      1. Confirm that both the page content and the localStorage value[^1] are updated correctly
    4. Make note of your current renderer
  2. 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
  3. Check updated sitemaps
    • Here are helpful diffs (production on left, this PR on right), generated on the latest version:
  4. Check updated generated redirects
    • Here's a helpful diff (production on left, this PR on right), generated on the latest version

Next steps

[^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 c37a438fdfd92cf884fc277fa848162cf4318afc
Latest deploy log https://app.netlify.com/sites/storybook-frontpage/deploys/654c663242b2370008d86c3c
Deploy Preview https://deploy-preview-620--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 dependencies detected. Learn more about Socket for GitHub ↗︎

Packages Version New capabilities Transitives Size Publisher
@storybook/components-marketing 2.1.4--canary.71.c173276.0 environment +11 2.4 MB winkervsbecks
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

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