Merge pull request #32283 from storybookjs/shilman/readme-utm-params

Documentation: Add ref=readme parameter to README.md
(cherry picked from commit 6519472)

Author: shilman

README.md

@@ -1,5 +1,5 @@
 <p align="center">
-  <a href="https://storybook.js.org/">
+  <a href="https://storybook.js.org/?ref=readme">
     <picture>
       <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/263385/199832481-bbbf5961-6a26-481d-8224-51258cce9b33.png">
       <img src="https://user-images.githubusercontent.com/321738/63501763-88dbf600-c4cc-11e9-96cd-94adadc2fd72.png" alt="Storybook" width="400" />
@@ -27,7 +27,7 @@
   <a href="https://discord.gg/storybook">
     <img src="https://img.shields.io/badge/discord-join-7289DA.svg?logo=discord&longCache=true&style=flat" />
   </a>
-  <a href="https://storybook.js.org/community/">
+  <a href="https://storybook.js.org/community/?ref=readme">
     <img src="https://img.shields.io/badge/community-join-4BC424.svg" alt="Storybook Community" />
   </a>
   <a href="#backers">
@@ -45,11 +45,11 @@
 </p>
 
 <p align="center">
-Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. Find out more at https://storybook.js.org!
+Storybook is a frontend workshop for building UI components and pages in isolation. Thousands of teams use it for UI development, testing, and documentation. Find out more at <a href="https://storybook.js.org/?ref=readme">storybook.js.org</a>!
 </p>
 
 <center>
-  <img src="https://raw.githubusercontent.com/storybookjs/storybook/main/media/storybook-intro.gif" width="100%" />
+  <img src="https://raw.githubusercontent.com/storybookjs/storybook/refs/heads/release-6-5/media/storybook-intro.gif" width="100%" />
 </center>
 
 <p align="center">
@@ -74,19 +74,19 @@ Storybook is a frontend workshop for building UI components and pages in isolati
 
 ## Getting Started
 
-Visit [Storybook's website](https://storybook.js.org) to learn more about Storybook and to get started.
+Visit [Storybook's website](https://storybook.js.org/?ref=readme) to learn more about Storybook and to get started.
 
 ### Documentation
 
-Documentation can be found on [Storybook's docs site](https://storybook.js.org/docs).
+Documentation can be found on [Storybook's docs site](https://storybook.js.org/docs?ref=readme).
 
 ### Examples
 
-View [Component Encyclopedia](https://storybook.js.org/showcase) to see how leading teams use Storybook.
+View [Component Encyclopedia](https://storybook.js.org/showcase?ref=readme) to see how leading teams use Storybook.
 
 Use [storybook.new](https://storybook.new) to quickly create an example project in Stackblitz.
 
-Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
+Storybook comes with a lot of [addons](https://storybook.js.org/docs/configure/user-interface/storybook-addons?ref=readme) for component design, documentation, testing, interactivity, and so on. Storybook's API makes it possible to configure and extend in various ways. It has even been extended to support React Native, Android, iOS, and Flutter development for mobile.
 
 ### Community
 
@@ -108,7 +108,7 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | [Svelte](code/renderers/svelte)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/svelte/latest?style=flat-square&color=blue&label)](https://next--630873996e4e3557791c069c.chromatic.com/)         | [![Svelte](https://img.shields.io/npm/dm/@storybook/svelte?style=flat-square&color=eee)](code/renderers/svelte)                                       |
 | [Preact](code/renderers/preact)                                | [![Storybook demo](https://img.shields.io/npm/v/@storybook/preact/latest?style=flat-square&color=blue&label)](https://next--63b588a512565bfaace15e7c.chromatic.com/)         | [![Preact](https://img.shields.io/npm/dm/@storybook/preact?style=flat-square&color=eee)](code/renderers/preact)                                       |
 | [Qwik](https://github.com/literalpie/storybook-framework-qwik) | [![](https://img.shields.io/npm/v/storybook-framework-qwik/latest?style=flat-square&color=blue&label)](/)                                                                    | [![Qwik](https://img.shields.io/npm/dm/storybook-framework-qwik?style=flat-square&color=eee)](https://github.com/literalpie/storybook-framework-qwik) |
-| [SolidJS](https://github.com/solidjs-community/storybook)              | [![](https://img.shields.io/npm/v/storybook-solidjs-vite/latest?style=flat-square&color=blue&label)](/)                                                                           | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs-vite?style=flat-square&color=eee)](https://github.com/solidjs-community/storybook)                     |
+| [SolidJS](https://github.com/solidjs-community/storybook)      | [![](https://img.shields.io/npm/v/storybook-solidjs-vite/latest?style=flat-square&color=blue&label)](/)                                                                      | [![SolidJS](https://img.shields.io/npm/dm/storybook-solidjs-vite?style=flat-square&color=eee)](https://github.com/solidjs-community/storybook)        |
 | [Android, iOS, Flutter](https://github.com/storybookjs/native) | [![](https://img.shields.io/npm/v/@storybook/native/latest?style=flat-square&color=blue&label)](/)                                                                           | [![Native](https://img.shields.io/npm/dm/@storybook/native?style=flat-square&color=eee)](https://github.com/storybookjs/native)                       |
 
 ### Addons
@@ -131,15 +131,15 @@ For additional help, share your issue in [the repo's GitHub Discussions](https:/
 | [query params](https://github.com/storybookjs/addon-queryparams)          | Mock query params                                                          |
 | [viewport](code/core/src/viewport/)                                       | Change display sizes and layouts for responsive components using Storybook |
 
-See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
+See [Addon / Framework Support Table](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme)
 
 To continue improving your experience, we have to eventually deprecate or remove certain addons in favor of new and better tools.
 
 If you're using info/notes, we highly recommend you migrate to [docs](code/addons/docs/) instead, and [here is a guide](code/addons/docs/docs/recipes.md#migrating-from-notesinfo-addons) to help you.
 
 If you're using contexts, we highly recommend you migrate to [toolbars](https://github.com/storybookjs/storybook/tree/next/code/addons/toolbars) and [here is a guide](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-addon-contexts) to help you.
 
-If you're using addon-storyshots, we highly recommend you migrate to the Storybook [test-runner](https://github.com/storybookjs/test-runner) and [here is a guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide) to help you.
+If you're using addon-storyshots, we highly recommend you migrate to the Storybook [test-runner](https://github.com/storybookjs/test-runner) and [here is a guide](https://storybook.js.org/docs/writing-tests/storyshots-migration-guide?ref=readme) to help you.
 
 ## Badges & Presentation materials
 
@@ -156,7 +156,7 @@ If you're looking for material to use in your Storybook presentation, such as lo
 ## Community
 
 - Tweeting via [@storybookjs](https://x.com/storybookjs)
-- Blogging at [storybook.js.org](https://storybook.js.org/blog/) and [Medium](https://medium.com/storybookjs)
+- Blogging at [storybook.js.org](https://storybook.js.org/blog/?ref=readme) and [Medium](https://medium.com/storybookjs)
 - Chatting on [Discord](https://discord.gg/storybook)
 - Videos and streams at [YouTube](https://www.youtube.com/channel/UCr7Quur3eIyA_oe8FNYexfg)
 

code/addons/a11y/README.md

@@ -10,4 +10,6 @@ The @storybook/addon-a11y package provides accessibility testing for Storybook s
 npx storybook add @storybook/addon-a11y
 ```
 
-[More on getting started with the accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing#accessibility-checks-with-a11y-addon)
+[More on getting started with the accessibility addon](https://storybook.js.org/docs/writing-tests/accessibility-testing#accessibility-checks-with-a11y-addon?ref=readme)
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

code/addons/docs/README.md

@@ -76,7 +76,7 @@ For more information on `MDX`, see the [`MDX` reference](https://github.com/stor
 
 Storybook Docs supports all view layers that Storybook supports except for React Native (currently). There are some framework-specific features as well, such as props tables and inline story rendering. The following page captures the current state of support:
 
-[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme)
 
 **Note:** `#` = WIP support
 
@@ -139,11 +139,11 @@ export default {
 
 `csfPluginOptions` is an object for configuring `@storybook/csf-plugin`. When set to `null` it tells docs not to run the `csf-plugin` at all, which can be used as an optimization, or if you're already using `csf-plugin` in your `main.js`.
 
-> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/api/doc-blocks/doc-block-markdown) Doc Block for importing Markdown files into your Storybook documentation.
+> With the release of version 7.0, it is no longer possible to import `.md` files directly into Storybook using the `transcludeMarkdown` [option](https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#importing-plain-markdown-files-with-transcludemarkdown-has-changed). Instead, we recommend using the [`Markdown`](https://storybook.js.org/docs/api/doc-blocks/doc-block-markdown?ref=readme) Doc Block for importing Markdown files into your Storybook documentation.
 
 ## TypeScript configuration
 
-As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/integration/typescript) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
+As of SB6 [TypeScript is zero-config](https://storybook.js.org/docs/configure/integration/typescript?ref=readme) and should work with SB Docs out of the box. For advanced configuration options, refer to the [Props documentation](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md).
 
 ## More resources
 
@@ -152,3 +152,5 @@ Want to learn more? Here are some more articles on Storybook Docs:
 - References: [DocsPage](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/docspage.md) / [MDX](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/mdx.md) / [FAQ](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/faq.md) / [Recipes](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/recipes.md) / [Theming](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/theming.md) / [Props](https://github.com/storybookjs/storybook/tree/next/code/addons/docs/docs/props-tables.md)
 - Announcements: [Vision](https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a) / [DocsPage](https://medium.com/storybookjs/storybook-docspage-e185bc3622bf) / [MDX](https://medium.com/storybookjs/rich-docs-with-storybook-mdx-61bc145ae7bc) / [Framework support](https://medium.com/storybookjs/storybook-docs-for-new-frameworks-b1f6090ee0ea)
 - Example: [Storybook Design System](https://github.com/storybookjs/design-system)
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

code/addons/jest/README.md

@@ -2,7 +2,7 @@
 
 Storybook addon for inspecting Jest unit test results.
 
-[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme)
 
 [![Storybook Jest Addon Demo](https://raw.githubusercontent.com/storybookjs/storybook/next/code/addons/jest/docs/storybook-addon-jest.gif)](http://storybooks-official.netlify.com/?selectedKind=Addons%7Cjest&selectedStory=withTests&full=0&addons=1&stories=1&panelRight=0&addonPanel=storybook%2Ftests%2Fpanel)
 
@@ -20,7 +20,7 @@ Or if you're using yarn as a package manager:
 
 ## Configuration
 
-Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
+Register the addon in your [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project?ref=readme):
 
 ```js
 export default {
@@ -84,7 +84,7 @@ Assuming that you have already created a test file for your component (e.g., `My
 
 ### Story-level
 
-In your story file, add a [decorator](https://storybook.js.org/docs/writing-stories/decorators) to your story's default export to display the results:
+In your story file, add a [decorator](https://storybook.js.org/docs/writing-stories/decorators?ref=readme) to your story's default export to display the results:
 
 ```js
 // MyComponent.stories.js|jsx
@@ -99,7 +99,7 @@ export default {
 };
 ```
 
-You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/writing-stories/parameters), for example:
+You can also add multiple tests results within your story by including the `jest` [parameter](https://storybook.js.org/docs/writing-stories/parameters?ref=readme), for example:
 
 ```js
 // MyComponent.stories.js|jsx
@@ -130,7 +130,7 @@ Default.parameters = {
 ### Global level
 
 To avoid importing the results of the tests in each story, you can update
-your [`.storybook/preview.js`](https://storybook.js.org/docs/configure#configure-story-rendering) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined:
+your [`.storybook/preview.js`](https://storybook.js.org/docs/configure#configure-story-rendering?ref=readme) and include a decorator allowing you to display the results only for the stories that have the `jest` parameter defined:
 
 ```js
 // .storybook/preview.js
@@ -257,3 +257,5 @@ All ideas and contributions are welcome.
 ## Licence
 
 MIT © 2017-present Renaud Tertrais
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

code/addons/links/README.md

@@ -1,8 +1,8 @@
 # Story Links Addon
 
-The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org).
+The Storybook Links addon can be used to create links that navigate between stories in [Storybook](https://storybook.js.org?ref=readme).
 
-[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support)
+[Framework Support](https://storybook.js.org/docs/configure/integration/frameworks-feature-support?ref=readme)
 
 ## Getting Started
 
@@ -145,3 +145,5 @@ It accepts all the props the `a` element does, plus `story` and `kind`. It the `
 ```
 
 To implement such a component for another framework, you need to add special handling for `click` event on native `a` element. See [`RoutedLink` sources](https://github.com/storybookjs/storybook/blob/next/code/addons/links/src/react/components/RoutedLink.tsx) for reference.
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

code/addons/onboarding/README.md

@@ -47,3 +47,5 @@ const config = {
 };
 export default config;
 ```
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

code/addons/pseudo-states/README.md

@@ -81,3 +81,5 @@ DialogButton.parameters = {
   pseudo: { hover: true, rootSelector: 'body' },
 };
 ```
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

code/addons/themes/README.md

@@ -1,6 +1,6 @@
 # @storybook/addon-themes
 
-Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org).
+Storybook Addon Themes can be used to switch between multiple themes for components inside the preview in [Storybook](https://storybook.js.org?ref=readme).
 
 ![React Storybook Screenshot](https://user-images.githubusercontent.com/18172605/274302488-77a39112-cdbe-4d16-9966-0d8e9e7e3399.gif)
 
@@ -12,7 +12,7 @@ Requires Storybook 7.0 or later. If you need to add it to your Storybook, you ca
 npm i -D @storybook/addon-themes
 ```
 
-Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project):
+Then, add following content to [`.storybook/main.js`](https://storybook.js.org/docs/configure#configure-your-storybook-project?ref=readme):
 
 ```js
 export default {
@@ -65,3 +65,5 @@ export const PrimaryDark = {
   globals: { theme: 'dark' },
 };
 ```
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

code/addons/vitest/README.md

@@ -1,3 +1,5 @@
 # Storybook Addon Test
 
 Addon to integrate Vitest test results with Storybook.
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).

code/builders/builder-vite/README.md

@@ -135,7 +135,7 @@ See [Customize Vite config](#customize-vite-config) for details about using `vit
 
 ### React Docgen
 
-Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue 3, and React. React docgen is configurable via the [`typescript.reactDocgen`](https://storybook.js.org/docs/api/main-config-typescript#reactdocgen) setting in `.storybook/main.js`.
+Docgen is used in Storybook to populate the props table in docs view, the controls panel, and for several other addons. Docgen is supported in Svelte, Vue 3, and React. React docgen is configurable via the [`typescript.reactDocgen`](https://storybook.js.org/docs/api/main-config-typescript#reactdocgen?ref=readme) setting in `.storybook/main.js`.
 
 ```javascript
 export default {
@@ -151,7 +151,7 @@ If you're using TypeScript, we encourage you to experiment and see which option
 
 The builder will by default enable Vite's [server.fs.strict](https://vitejs.dev/config/#server-fs-strict)
 option, for increased security. The default project `root` is set to the parent directory of the
-Storybook configuration directory. This can be overridden in [viteFinal](https://storybook.js.org/docs/api/main-config-vite-final).
+Storybook configuration directory. This can be overridden in [viteFinal](https://storybook.js.org/docs/api/main-config-vite-final?ref=readme).
 
 ## Known issues
 
@@ -167,3 +167,5 @@ Have a look at the GitHub issues with the `vite` label for known bugs. If you fi
 feel free to create an issue or send a pull request!
 
 Please read the [How to contribute](/CONTRIBUTING.md) guide.
+
+Learn more about Storybook at [storybook.js.org](https://storybook.js.org/?ref=readme).