Docs: Recipes - Fix links and assets

apps/frontpage/content/recipes/@angular/material.mdx

@@ -1,7 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you already have an Angular app using `@angular/material` and have just set up **Storybook >= 7.0** using the [getting started guide](/docs/get-started/install).
-Don't have this? Follow the Angular material [setup instructions](https://material.angular.io/guide/getting-started) then run:
+This recipe assumes that you already have an Angular app using `@angular/material` and have just set up **Storybook >= 7.0** using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=angular). Don't have this? Follow the Angular material [setup instructions](https://material.angular.io/guide/getting-started) then run:
 
 
 ```shell
@@ -21,13 +20,13 @@ npx storybook@latest init
 
 To get started, install the fonts as dependencies.
 
-```bash
+```shell
 yarn add @fontsource/roboto @fontsource/material-icons
 ```
 
 Then include the fonts in your `angular.json` file.
 
-```json
+```jsonc
 // angular.json
 {
   // Snipped for brevity
@@ -72,12 +71,14 @@ Then include the fonts in your `angular.json` file.
 }
 ```
 ## 2. Add Storybook stories
+
 ### Standalone component
-Now that you have Storybook set up, you can start writing stories for your components. Let's start with a `NavBarComponent`.
-For **Standalone components**, any Material components that you import through the `@Component` decorator will be available to your component in Storybook.
+
+Now that you have Storybook set up, you can start writing stories for your components. Let's start with a `NavBarComponent`. For **Standalone components**, any Material components that you import through the `@Component` decorator will be available to your component in Storybook.
 
 ```ts
 // src/app/nav-bar/nav-bar.component.ts
+
 import { Component, Input } from '@angular/core';
 import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
@@ -104,6 +105,7 @@ This means that you can just supply the `NavBarComponent` to the `component` pro
 
 ```ts
 // src/app/nav-bar/nav-bar.component.stories.ts
+
 import type { Meta, StoryObj } from '@storybook/angular';
 import { NavBarComponent } from './nav-bar.component';
 
@@ -123,10 +125,12 @@ export const Default: Story = {
 ```
 
 ### Module component
+
 For **Module components**, you will need to import the Material components that you want to use in your stories file. You can supply them to Storybook using the **`moduleMetadata`** decorator in the `Meta` object of the stories file.
 
 ```ts
 // src/app/nav-bar/nav-bar.component.stories.ts
+
 import type { Meta, StoryObj } from '@storybook/angular';
 import { moduleMetadata } from '@storybook/angular';
 import { MatToolbarModule } from '@angular/material/toolbar';
@@ -162,6 +166,7 @@ export const Default: Story = {
 };
 ```
 ## Live example
+
 <EmbeddedExample
   title="Storybook 7 & Angular Material Example"
   embeddedUrl="https://stackblitz.com/edit/github-rkffss?ctl=1&embed=1&file=src%2Fapp%2Fnav-bar%2Fnav-bar.component.stories.ts&hideNavigation=1&theme=light"

apps/frontpage/content/recipes/@emotion/styled.mdx

@@ -1,6 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you have a React app using Emotion and have just set up Storybook >=7.0 using the [getting started guide](/docs/react/get-started/install). Don’t have this? Follow Emotion's [installation instructions](https://emotion.sh/docs/introduction#react) then run:
+This recipe assumes that you have a React app using Emotion and have just set up **Storybook >=7.0** using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=react). Don’t have this? Follow Emotion's [installation instructions](https://emotion.sh/docs/introduction#react) then run:
 
 ```shell
 # Add Storybook:
@@ -15,7 +15,7 @@ To get started, you'll need to install [`@storybook/addon-themes`](https://story
 
 Run the following script to install and register the addon:
 
-```bash
+```shell
 npx storybook@latest add @storybook/addon-themes
 ```
 
@@ -30,6 +30,7 @@ Inside of `.storybook/preview.js`, create a `<GlobalStyles />` component that in
 
 ```js
 // .storybook/preview.jsx
+
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import { Global, css } from '@emotion/react';
 
@@ -62,6 +63,7 @@ To share your theme(s) with the components in Storybook, you'll need to provide
 
 ```js
 // .storybook/preview.jsx
+
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import { Global, css, ThemeProvider } from '@emotion/react';
 
@@ -97,7 +99,7 @@ When you provide more than one theme, a toolbar menu will appear in the Storyboo
 
 </Callout>
 
-![Completed Emotion example with theme switcher](https://user-images.githubusercontent.com/18172605/208312563-875ca3b0-e7bc-4401-a445-4553b48068ed.gif)
+![Completed Emotion example with theme switcher](/recipes-assets/emotion-theme-changer.gif)
 
 ## Get involved
 

apps/frontpage/content/recipes/@mui/material.mdx

@@ -1,6 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you already have a React app using `@mui/material` and have just set up **Storybook >= 7.0** using the [getting started guide](/docs/react/get-started/install). Don't have this? Follow MUI's [setup instructions](https://mui.com/material-ui/getting-started/installation/) then run:
+This recipe assumes that you already have a React app using `@mui/material` and have just set up **Storybook >= 7.0** using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=react). Don't have this? Follow MUI's [setup instructions](https://mui.com/material-ui/getting-started/installation/) then run:
 
 ```shell
 # Add Storybook:
@@ -21,21 +21,7 @@ npx storybook@latest add @storybook/addon-themes
 
 <details>
   <summary>Did the configuration script fail?</summary>
-  <p>
-    Under the hood, this runs <code>npx @storybook/auto-config themes</code>,
-    which should read your project and try to configure your Storybook with the
-    correct decorator. If running that command directly does not solve your
-    problem, please file a bug on the{' '}
-    <a
-      href="https://github.com/storybookjs/auto-config/issues/new?assignees=&labels=bug&projects=&template=bug_report.md&title=%5BBug%5D"
-      target="_blank"
-    >
-      @storybook/auto-config
-    </a>{' '}
-    repository so that we can further improve it. To manually add this addon,
-    install it, and then add it to the addons array in your{' '}
-    <code>.storybook/main.ts</code>.
-  </p>
+  <p>Under the hood, this runs <code>npx @storybook/auto-config themes</code>, which should read your project and try to configure your Storybook with the correct decorator. If running that command directly does not solve your problem, please file a bug on the <a href="https://github.com/storybookjs/auto-config/issues/new?assignees=&labels=bug&projects=&template=bug_report.md&title=%5BBug%5D" target="_blank">@storybook/auto-config</a> repository so that we can further improve it. To manually add this addon, install it, and then add it to the addons array in your <code>.storybook/main.ts</code>.</p>
 </details>
 
 ### 2. Bundle fonts and icons for better perf
@@ -70,6 +56,7 @@ Inside of `.storybook/preview.js`, import `<CssBaseline />`, `<ThemeProvider />`
 
 ```js
 // .storybook/preview.js
+
 import { CssBaseline, ThemeProvider } from '@mui/material';
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import { lightTheme, darkTheme } from '../src/themes.js';

apps/frontpage/content/recipes/@sveltejs/kit.mdx

@@ -1,6 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you already have a **SvelteKit >= 1.0** app and have just set up **Storybook >= 7.0** using the [getting started guide](/docs/svelte/get-started/install). Don't have this? Follow Sveltekit's [setup instructions](https://kit.svelte.dev/docs/creating-a-project) then run:
+This recipe assumes that you already have a **SvelteKit >= 1.0** app and have just set up **Storybook >= 7.0** using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=svelte). Don't have this? Follow Sveltekit's [setup instructions](https://kit.svelte.dev/docs/creating-a-project) then run:
 
 ```shell
 # Add Storybook:
@@ -38,9 +38,9 @@ npx storybook@latest upgrade
 
 If your existing project is configured with the Vite builder, it will prompt you to migrate your Storybook configuration and dependencies to the new `@storybook/sveltekit` package automatically.
 
-![Storybook CLI automatically detecting a SvelteKit project](https://storybookblog.ghost.io/content/images/2023/02/Untitled--1-.png)
+![Storybook CLI automatically detecting a SvelteKit project](/recipes-assets/sveltekit-cli-framework.migration.png)
 
-If your existing Storybook setup is using the Webpack builder, it can’t automatically migrate for you, because there’s no way to migrate your Webpack configuration to a Vite configuration. In that case, follow the [manual migration steps](https://github.com/storybookjs/storybook/tree/next/code/frameworks/sveltekit#manual-migration) instead.
+If your existing Storybook setup is using the Webpack builder, it can’t automatically migrate for you, because there’s no way to migrate your Webpack configuration to a Vite configuration. In that case, follow the [manual migration steps](https://storybook.js.org/docs/get-started/frameworks/sveltekit?renderer=svelte#manual-migration) instead.
 
 ## Get involved
 

apps/frontpage/content/recipes/@vanilla-extract/css.mdx

@@ -1,6 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you already have an app using Vanilla-extract and have just set up **Storybook >= 7.0** using the [getting started guide](/docs/react/get-started/install). Don't have this? Follow Vanilla-extract's [setup instructions](https://vanilla-extract.style/documentation/getting-started) then run:
+This recipe assumes that you already have an app using Vanilla-extract and have just set up **Storybook >= 7.0** using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=react). Don't have this? Follow Vanilla-extract's [setup instructions](https://vanilla-extract.style/documentation/getting-started) then run:
 
 ```shell
 # Add Storybook:

apps/frontpage/content/recipes/bootstrap.mdx

@@ -1,6 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you are using Storybook >=7.0 using the [getting started guide](/docs/react/get-started/install). Don’t have this? Then run:
+This recipe assumes that you are using Storybook >=7.0 using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=react). Don’t have this? Then run:
 
 ```shell
 # Add Storybook:
@@ -15,6 +15,7 @@ Import the Bootstrap files in your `.storybook/preview.js` file.
 
 ```js
 // .storybook/preview.js
+
 import 'bootstrap/dist/css/bootstrap.min.css';
 
 // Only import this if you want to use Bootstrap's
@@ -60,6 +61,8 @@ npx storybook@latest add @storybook/addon-themes
 Then, to enable switching between these modes in a click for your stories, use our `withThemeByDataAttribute` decorator by adding the following code to your `.storybook/preview.js` file.
 
 ```js
+// .storybook/preview.js
+
 import { withThemeByDataAttribute } from '@storybook/addon-themes';
 
 // snipped for brevity

apps/frontpage/content/recipes/less.mdx

@@ -1,6 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you have an app using Less and have just set up **Storybook >=7.0** using the [getting started guide](/docs/react/get-started/install). Don’t have this? Then run:
+This recipe assumes that you have an app using Less and have just set up **Storybook >=7.0** using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=react). Don’t have this? Then run:
 
 ```shell
 # Add Storybook:
@@ -38,6 +38,7 @@ If you have any global styles you would like to expose for your stories, you can
 
 ```js
 // .storybook/preview.js
+
 import '../src/index.less';
 ```
 

apps/frontpage/content/recipes/next.mdx

@@ -43,6 +43,7 @@ Update your `main.js` to change the framework property:
 
 ```js
 // .storybook/main.js
+
 export default {
   // ...
   framework: {
@@ -57,6 +58,7 @@ If you were using Storybook plugins to integrate with Next.js, those are no long
 
 ```js
 // .storybook/main.js
+
 export default {
   // ...
   addons: [
@@ -74,6 +76,7 @@ If you're working with a Next.js project that already uses SWC (e.g., version 14
 
 ```js
 // .storybook/main.js
+
 export default {
   // ...
   framework: {

apps/frontpage/content/recipes/pinia.mdx

@@ -1,6 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you have a Vue 3 app using Pinia and have just set up **Storybook >=7.0** using the [getting started guide](/docs/vue/get-started/install). Don’t have this? Follow Pinia's [setup instructions](https://pinia.vuejs.org/getting-started.html) then run:
+This recipe assumes that you have a Vue 3 app using Pinia and have just set up **Storybook >=7.0** using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=vue). Don’t have this? Follow Pinia's [setup instructions](https://pinia.vuejs.org/getting-started.html) then run:
 
 ```shell
 # Add Storybook:
@@ -15,13 +15,13 @@ Inside of `.storybook/preview.ts`, import and initialize Pinia.
 
 ```ts
 // .storybook/preview.ts
-import  { type Preview }  from '@storybook/vue3';
+
+import { type Preview }  from '@storybook/vue3';
 
 import { createPinia } from 'pinia';
 
 const pinia = createPinia();
 
-
 const preview: Preview = {
   parameters: {
     backgrounds: {
@@ -44,15 +44,17 @@ Import Storybook's setup function that lets you register tools with Storybook's
 
 ```ts
 // .storybook/preview.ts
+
 import { type Preview, setup }  from '@storybook/vue3';
+
 import { type App } from 'vue';
 
 import { createPinia } from 'pinia';
 
 const pinia = createPinia();
 
 setup((app: App) => {
-    app.use(pinia);
+  app.use(pinia);
 });
 
 const preview: Preview = {

apps/frontpage/content/recipes/react-i18next.mdx

@@ -39,6 +39,7 @@ To expose this instance to Storybook, we can import it into the `./.storybook/pr
 
 ```js
 // .storybook/preview.jsx
+
 import i18n from '../src/i18n';
 ```
 
@@ -48,6 +49,7 @@ Now that Storybook has access to i18next, we need to share that with our stories
 
 ```jsx
 // .storybook/preview.jsx
+
 import React, { Suspense } from 'react';
 import { I18nextProvider } from 'react-i18next';
 import i18n from '../src/i18n';
@@ -71,7 +73,7 @@ export const decorators = [withI18next];
 
 Sweet! Our stories officially have access to our translations. If we change the `lng` defined in `./src/i18n.js` you’ll see your stories reload in the new language.
 
-![Manually changing the locale from English to French](https://storybookblog.ghost.io/content/images/2022/09/manual-change.gif)
+![Manually changing the locale from English to French](/recipes-assets/storybook-i18n-language-selector.gif)
 
 ## 3. Add a locale switcher
 
@@ -104,7 +106,7 @@ export const globalTypes = {
 
 Looking back at Storybook, we can now see that we have a “Locale” switcher added to the toolbar with the options we just set.
 
-![The locale switcher in the Storybook toolbar](https://storybookblog.ghost.io/content/images/2022/09/Screen-Shot-2022-09-08-at-3.01.14-PM.png)
+![The locale switcher in the Storybook toolbar](/recipes-assets/storybook-locale-switcher.png)
 
 Now let’s update our decorator to change our locale when we select a new language.
 
@@ -134,7 +136,7 @@ const withI18next = (Story, context) => {
 
 Voila— a fully functioning locale switcher for your stories powered by react-i18next!
 
-![Switching between English and German using the locale switcher](https://storybookblog.ghost.io/content/images/2022/09/en-to-de.gif)
+![Switching between English and German using the locale switcher](/recipes-assets/storybook-locale-en-to-de-switcher.gif)
 
 ## 4. Set document direction
 
@@ -182,4 +184,4 @@ i18n.on('languageChanged', (locale) => {
 
 Now when we set our storybook to Arabic, the document direction gets set to `”rtl”` 🎉
 
-![Switching between English, German, and Arabic with the locale switcher](https://storybookblog.ghost.io/content/images/2022/09/finished-switcher-1.gif)
+![Switching between English, German, and Arabic with the locale switcher](/recipes-assets/storybook-locale-rtl-locale-switcher.gif)

apps/frontpage/content/recipes/sass.mdx

@@ -1,6 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you have an app using Sass and have just set up **Storybook >=7.0** using the [getting started guide](/docs/react/get-started/install). Don’t have this? Then run:
+This recipe assumes that you have an app using Sass and have just set up **Storybook >=7.0** using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=react). Don’t have this? Then run:
 
 ```shell
 # Add Storybook:
@@ -41,14 +41,15 @@ If you have any global styles you would like to expose for your stories, you can
 
 ```js
 // .storybook/preview.js
+
 import '../src/index.scss';
 ```
 
 ### 2.1. Angular
 
 If you are using Angular, you will need to add your global scss file(s) to your `angular.json` file instead. This will make sure your styles are processed by Angular's Webpack and injected into the preview iframe where your stories are rendered.
 
-```json
+```jsonc
 // angular.json
 {
  "storybook": {

apps/frontpage/content/recipes/styled-components.mdx

@@ -1,6 +1,6 @@
 <Callout variant="neutral" icon="ℹ️" title="Prerequisites">
 
-This recipe assumes that you have a React app using styled-components and have just set up Storybook >=7.0 using the [getting started guide](/docs/react/get-started/install). Don’t have this? Follow styled-components' [installation instructions](https://styled-components.com/docs/basics#installation) then run:
+This recipe assumes that you have a React app using styled-components and have just set up Storybook >=7.0 using the [getting started guide](https://storybook.js.org/docs/get-started/install?renderer=react). Don’t have this? Follow styled-components' [installation instructions](https://styled-components.com/docs/basics#installation) then run:
 
 ```shell
 # Add Storybook:
@@ -13,7 +13,7 @@ npx storybook@latest init
 
 Run the following script to install and register the addon:
 
-```bash
+```shell
 npx storybook@latest add @storybook/addon-themes
 ```
 
@@ -30,6 +30,7 @@ In `.storybook/preview.js`, create a `<GlobalStyles /`> component that includes
 
 ```js
 // .storybook/preview.jsx
+
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';
 import { createGlobalStyle } from 'styled-components';
 
@@ -54,10 +55,12 @@ If you already have `<GlobalStyles />` in your app, you can import it into `.sto
 
 
 ## 3. Provide your theme(s)
+
 To share your theme(s) with the components in Storybook, you'll need to provide them to the `withThemeFromJSXProvider` decorator along with `styled-components` `<ThemeProvider />` component.
 
 ```js
 // .storybook/preview.jsx
+
 import { createGlobalStyle, ThemeProvider } from 'styled-components';
 import { withThemeFromJSXProvider } from '@storybook/addon-themes';