From c118938237cc8ef96a8d7680b04f7c8a2a8264fe Mon Sep 17 00:00:00 2001
From: Matt Carroll <7158882+mattcarrollcode@users.noreply.github.com>
Date: Tue, 6 Feb 2024 09:36:18 -0800
Subject: [PATCH] Fix SandpackWithHTMLOutput to use src dir (#6613)

---
 src/components/MDX/SandpackWithHTMLOutput.tsx        |  6 +++---
 src/content/reference/react-dom/components/link.md   | 10 +++++-----
 src/content/reference/react-dom/components/meta.md   |  2 +-
 src/content/reference/react-dom/components/script.md |  4 ++--
 src/content/reference/react-dom/components/style.md  |  2 +-
 src/content/reference/react-dom/components/title.md  |  2 +-
 6 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/components/MDX/SandpackWithHTMLOutput.tsx b/src/components/MDX/SandpackWithHTMLOutput.tsx
index 134da65897c..51ce28dc149 100644
--- a/src/components/MDX/SandpackWithHTMLOutput.tsx
+++ b/src/components/MDX/SandpackWithHTMLOutput.tsx
@@ -20,7 +20,7 @@ export default function ShowRenderedHTML({children}) {
         {formatHTML(markup)}
       </pre>
     </>
-  );  
+  );
 }`;
 
 const formatHTML = `
@@ -77,8 +77,8 @@ export default memo(function SandpackWithHTMLOutput(
 ) {
   const children = [
     ...Children.toArray(props.children),
-    createFile('ShowRenderedHTML.js', ShowRenderedHTML),
-    createFile('formatHTML.js hidden', formatHTML),
+    createFile('src/ShowRenderedHTML.js', ShowRenderedHTML),
+    createFile('src/formatHTML.js hidden', formatHTML),
     createFile('package.json hidden', packageJSON),
   ];
   return <Sandpack {...props}>{children}</Sandpack>;
diff --git a/src/content/reference/react-dom/components/link.md b/src/content/reference/react-dom/components/link.md
index 890cf09000f..fcbb9fab01a 100644
--- a/src/content/reference/react-dom/components/link.md
+++ b/src/content/reference/react-dom/components/link.md
@@ -96,7 +96,7 @@ In addition, if the `<link>` is to a stylesheet (namely, it has `rel="stylesheet
 
 There are two exception to this special behavior:
 
-* If the link doesn't have a `precedence` prop, there is no special behavior, because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop.  
+* If the link doesn't have a `precedence` prop, there is no special behavior, because the order of stylesheets within the document is significant, so React needs to know how to order this stylesheet relative to others, which you specify using the `precedence` prop.
 * If you supply any of the `onLoad`, `onError`, or `disabled` props, there is no special behavior, because these props indicate that you are managing the loading of the stylesheet manually within your component.
 
 This special treatment comes with two caveats:
@@ -114,7 +114,7 @@ You can annotate the document with links to related resources such as an icon, c
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function BlogPage() {
@@ -141,7 +141,7 @@ When you want to use a stylesheet, it can be beneficial to call the [preinit](/r
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function SiteMapPage() {
@@ -164,7 +164,7 @@ Stylesheets can conflict with each other, and when they do, the browser goes wit
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function HomePage() {
@@ -195,7 +195,7 @@ If you render the same stylesheet from multiple components, React will place onl
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function HomePage() {
diff --git a/src/content/reference/react-dom/components/meta.md b/src/content/reference/react-dom/components/meta.md
index 8489d4a437a..801ca2af16a 100644
--- a/src/content/reference/react-dom/components/meta.md
+++ b/src/content/reference/react-dom/components/meta.md
@@ -72,7 +72,7 @@ You can render the `<meta>` component from any component. React will put a `<met
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function SiteMapPage() {
diff --git a/src/content/reference/react-dom/components/script.md b/src/content/reference/react-dom/components/script.md
index 50c0af80303..a2c4668c929 100644
--- a/src/content/reference/react-dom/components/script.md
+++ b/src/content/reference/react-dom/components/script.md
@@ -91,7 +91,7 @@ If you supply an `src` and `async` prop, your component will suspend while the s
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 function Map({lat, long}) {
@@ -124,7 +124,7 @@ To include an inline script, render the `<script>` component with the script sou
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 function Tracking() {
diff --git a/src/content/reference/react-dom/components/style.md b/src/content/reference/react-dom/components/style.md
index f5cf231a6d8..0c6d8e59369 100644
--- a/src/content/reference/react-dom/components/style.md
+++ b/src/content/reference/react-dom/components/style.md
@@ -73,7 +73,7 @@ If you supply an `href` and `precedence` prop, your component will suspend while
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 import { useId } from 'react';
 
diff --git a/src/content/reference/react-dom/components/title.md b/src/content/reference/react-dom/components/title.md
index 9d6ed18ccf7..24b2aba2f07 100644
--- a/src/content/reference/react-dom/components/title.md
+++ b/src/content/reference/react-dom/components/title.md
@@ -66,7 +66,7 @@ Render the `<title>` component from any component with text as its children. Rea
 
 <SandpackWithHTMLOutput>
 
-```js App.js active
+```js src/App.js active
 import ShowRenderedHTML from './ShowRenderedHTML.js';
 
 export default function ContactUsPage() {