Merge pull request #28560 from storybookjs/fix-configure-page-links

Bug: Fix invalid docs links in Configure.mdx template page
(cherry picked from commit 0c85715)

code/frameworks/nextjs/template/cli/js/Configure.mdx

@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/configure/styling-and-css"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/writing-stories/decorators#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/configure/images-and-assets"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests"
+          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/configure/theming"
+          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/integrations/"
+        href="https://storybook.js.org/addons/"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>

code/frameworks/nextjs/template/cli/ts-3-8/Configure.mdx

@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/configure/styling-and-css"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/writing-stories/decorators#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/configure/images-and-assets"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests"
+          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/configure/theming"
+          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/integrations/"
+        href="https://storybook.js.org/addons/"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>

code/frameworks/nextjs/template/cli/ts-4-9/Configure.mdx

@@ -52,7 +52,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/configure/styling-and-css"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer=react"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -67,7 +67,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/writing-stories/decorators#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer=react#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -85,7 +85,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/configure/images-and-assets"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/writing-docs/autodocs"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -128,7 +128,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/publish-storybook#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer=react#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -144,7 +144,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer=react#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -160,7 +160,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests"
+          href="https://storybook.js.org/docs/writing-tests/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -175,7 +175,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/writing-tests/accessibility-testing"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -190,7 +190,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/configure/theming"
+          href="https://storybook.js.org/docs/configure/theming/?renderer=react"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -202,7 +202,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/integrations/"
+        href="https://storybook.js.org/addons/"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>

code/lib/cli/rendererAssets/common/Configure.mdx

@@ -48,7 +48,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Add styling and CSS</h4>
       <p className="sb-section-item-paragraph">Like with web applications, there are many ways to include CSS within Storybook. Learn more about setting up styling within Storybook.</p>
       <a
-        href="https://storybook.js.org/docs/{{renderer}}/configure/styling-and-css"
+        href="https://storybook.js.org/docs/configure/styling-and-css/?renderer={{renderer}}"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -60,7 +60,7 @@ export const RightArrow = () => <svg
       <h4 className="sb-section-item-heading">Provide context and mocking</h4>
       <p className="sb-section-item-paragraph">Often when a story doesn't render, it's because your component is expecting a specific environment or context (like a theme provider) to be available.</p>
       <a
-        href="https://storybook.js.org/docs/{{renderer}}/writing-stories/decorators#context-for-mocking"
+        href="https://storybook.js.org/docs/writing-stories/decorators/?renderer={{renderer}}#context-for-mocking"
         target="_blank"
       >Learn more<RightArrow /></a>
     </div>
@@ -72,7 +72,7 @@ export const RightArrow = () => <svg
         `staticDirs` configuration option to specify folders to load when
         starting Storybook.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/configure/images-and-assets"
+          href="https://storybook.js.org/docs/configure/images-and-assets/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -94,7 +94,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Auto-generate living,
           interactive reference documentation from your components and stories.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/writing-docs/autodocs"
+          href="https://storybook.js.org/docs/writing-docs/autodocs/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -103,7 +103,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Publish to Chromatic</h4>
         <p className="sb-section-item-paragraph">Publish your Storybook to review and collaborate with your entire team.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/sharing/publish-storybook#publish-storybook-with-chromatic"
+          href="https://storybook.js.org/docs/sharing/publish-storybook/?renderer={{renderer}}#publish-storybook-with-chromatic"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -113,7 +113,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Embed your stories into Figma to cross-reference the design and live
           implementation in one place.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/sharing/design-integrations#embed-storybook-in-figma-with-the-plugin"
+          href="https://storybook.js.org/docs/sharing/design-integrations/?renderer={{renderer}}#embed-storybook-in-figma-with-the-plugin"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -123,7 +123,7 @@ export const RightArrow = () => <svg
         <p className="sb-section-item-paragraph">Use stories to test a component in all its variations, no matter how
           complex.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/writing-tests"
+          href="https://storybook.js.org/docs/writing-tests/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -132,7 +132,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Accessibility</h4>
         <p className="sb-section-item-paragraph">Automatically test your components for a11y issues as you develop.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/writing-tests/accessibility-testing"
+          href="https://storybook.js.org/docs/writing-tests/accessibility-testing/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -141,7 +141,7 @@ export const RightArrow = () => <svg
         <h4 className="sb-section-item-heading">Theming</h4>
         <p className="sb-section-item-paragraph">Theme Storybook's UI to personalize it to your project.</p>
         <a
-          href="https://storybook.js.org/docs/{{renderer}}/configure/theming"
+          href="https://storybook.js.org/docs/configure/theming/?renderer={{renderer}}"
           target="_blank"
         >Learn more<RightArrow /></a>
       </div>
@@ -153,7 +153,7 @@ export const RightArrow = () => <svg
     <h4>Addons</h4>
     <p className="sb-section-item-paragraph">Integrate your tools with Storybook to connect workflows.</p>
     <a
-        href="https://storybook.js.org/integrations/"
+        href="https://storybook.js.org/addons/"
         target="_blank"
       >Discover all addons<RightArrow /></a>
   </div>