From 9a14f5885cac1477249b99025f865fbb983d824d Mon Sep 17 00:00:00 2001
From: Jam Balaya <jambalaya.pyoncafe@outlook.jp>
Date: Tue, 10 Dec 2024 15:27:21 +0900
Subject: [PATCH] examples: fix view source pathname at
 `image-legacy-component` (#73414)

## Description

#73344 updates the
[image-legacy-component](https://github.com/vercel/next.js/tree/canary/examples/image-legacy-component)
example for using the App Router.
However,
[`ViewSource`](https://github.com/vercel/next.js/blob/canary/examples/image-legacy-component/components/view-source.tsx)
component isn't updated.
Then I update the pathname.

CC: @samcx

### Adding or Updating Examples

- [x] The "examples guidelines" are followed from our contributing doc
https://github.com/vercel/next.js/blob/canary/contributing/examples/adding-examples.md
- [x] Make sure the linting passes by running `pnpm build && pnpm lint`.
See
https://github.com/vercel/next.js/blob/canary/contributing/repository/linting.md

Co-authored-by: Sam Ko <sam@vercel.com>
---
 examples/image-legacy-component/app/background/page.tsx        | 2 +-
 examples/image-legacy-component/app/color/page.tsx             | 2 +-
 examples/image-legacy-component/app/layout-fill/page.tsx       | 2 +-
 examples/image-legacy-component/app/layout-fixed/page.tsx      | 2 +-
 examples/image-legacy-component/app/layout-intrinsic/page.tsx  | 2 +-
 examples/image-legacy-component/app/layout-responsive/page.tsx | 2 +-
 examples/image-legacy-component/app/page.tsx                   | 2 +-
 examples/image-legacy-component/app/placeholder/page.tsx       | 2 +-
 examples/image-legacy-component/app/shimmer/page.tsx           | 2 +-
 9 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/examples/image-legacy-component/app/background/page.tsx b/examples/image-legacy-component/app/background/page.tsx
index f0a08df543dfa..4ea722aa9d799 100644
--- a/examples/image-legacy-component/app/background/page.tsx
+++ b/examples/image-legacy-component/app/background/page.tsx
@@ -5,7 +5,7 @@ import styles from "@/styles/styles.module.css";
 export default function Background() {
   return (
     <div>
-      <ViewSource pathname="pages/background.tsx" />
+      <ViewSource pathname="app/background/page.tsx" />
       <div className={styles.bgWrap}>
         <Image
           alt="Mountains"
diff --git a/examples/image-legacy-component/app/color/page.tsx b/examples/image-legacy-component/app/color/page.tsx
index 01bb22dfade13..518c3367d9156 100644
--- a/examples/image-legacy-component/app/color/page.tsx
+++ b/examples/image-legacy-component/app/color/page.tsx
@@ -19,7 +19,7 @@ const rgbDataURL = (r: number, g: number, b: number) =>
 export default function Color() {
   return (
     <div>
-      <ViewSource pathname="pages/color.tsx" />
+      <ViewSource pathname="app/color/page.tsx" />
       <h1>Image Component With Color Data URL</h1>
       <Image
         alt="Dog"
diff --git a/examples/image-legacy-component/app/layout-fill/page.tsx b/examples/image-legacy-component/app/layout-fill/page.tsx
index ded080b62493d..bbd7fd01e8fdf 100644
--- a/examples/image-legacy-component/app/layout-fill/page.tsx
+++ b/examples/image-legacy-component/app/layout-fill/page.tsx
@@ -4,7 +4,7 @@ import ViewSource from "@/components/view-source";
 export default function LayoutFill() {
   return (
     <div>
-      <ViewSource pathname="pages/layout-fill.tsx" />
+      <ViewSource pathname="app/layout-fill/page.tsx" />
       <h1>Image Component With Layout Fill</h1>
       <div style={{ position: "relative", width: "300px", height: "500px" }}>
         <Image
diff --git a/examples/image-legacy-component/app/layout-fixed/page.tsx b/examples/image-legacy-component/app/layout-fixed/page.tsx
index 8756079484fb2..cabb1730e0736 100644
--- a/examples/image-legacy-component/app/layout-fixed/page.tsx
+++ b/examples/image-legacy-component/app/layout-fixed/page.tsx
@@ -4,7 +4,7 @@ import ViewSource from "@/components/view-source";
 export default function LayoutFixed() {
   return (
     <div>
-      <ViewSource pathname="pages/layout-fixed.tsx" />
+      <ViewSource pathname="app/layout-fixed/page.tsx" />
       <h1>Image Component With Layout Fixed</h1>
       <Image
         alt="Mountains"
diff --git a/examples/image-legacy-component/app/layout-intrinsic/page.tsx b/examples/image-legacy-component/app/layout-intrinsic/page.tsx
index 2c25244c894bb..eadaa8bc99b4c 100644
--- a/examples/image-legacy-component/app/layout-intrinsic/page.tsx
+++ b/examples/image-legacy-component/app/layout-intrinsic/page.tsx
@@ -4,7 +4,7 @@ import ViewSource from "@/components/view-source";
 export default function LayoutIntrinsic() {
   return (
     <div>
-      <ViewSource pathname="pages/layout-intrinsic.tsx" />
+      <ViewSource pathname="app/layout-intrinsic/page.tsx" />
       <h1>Image Component With Layout Intrinsic</h1>
       <Image
         alt="Mountains"
diff --git a/examples/image-legacy-component/app/layout-responsive/page.tsx b/examples/image-legacy-component/app/layout-responsive/page.tsx
index b29acf92e990e..03c6dec86144e 100644
--- a/examples/image-legacy-component/app/layout-responsive/page.tsx
+++ b/examples/image-legacy-component/app/layout-responsive/page.tsx
@@ -4,7 +4,7 @@ import ViewSource from "@/components/view-source";
 export default function LayoutResponsive() {
   return (
     <div>
-      <ViewSource pathname="pages/layout-responsive.tsx" />
+      <ViewSource pathname="app/layout-responsive/page.tsx" />
       <h1>Image Component With Layout Responsive</h1>
       <Image
         alt="Mountains"
diff --git a/examples/image-legacy-component/app/page.tsx b/examples/image-legacy-component/app/page.tsx
index a4ab423e9e7e3..448b3276acc68 100644
--- a/examples/image-legacy-component/app/page.tsx
+++ b/examples/image-legacy-component/app/page.tsx
@@ -7,7 +7,7 @@ import styles from "@/styles/styles.module.css";
 export default function Home() {
   return (
     <div className={styles.container}>
-      <ViewSource pathname="pages/index.tsx" />
+      <ViewSource pathname="app/page.tsx" />
       <div className={styles.card}>
         <h1>Image Component with Next.js</h1>
         <p>
diff --git a/examples/image-legacy-component/app/placeholder/page.tsx b/examples/image-legacy-component/app/placeholder/page.tsx
index c861a301cb5f0..fd21d94ea4ac8 100644
--- a/examples/image-legacy-component/app/placeholder/page.tsx
+++ b/examples/image-legacy-component/app/placeholder/page.tsx
@@ -5,7 +5,7 @@ import mountains from "@/public/mountains.jpg";
 export default function Placeholder() {
   return (
     <div>
-      <ViewSource pathname="pages/placeholder.tsx" />
+      <ViewSource pathname="app/placeholder/page.tsx" />
       <h1>Image Component With Placeholder Blur</h1>
       <Image
         alt="Mountains"
diff --git a/examples/image-legacy-component/app/shimmer/page.tsx b/examples/image-legacy-component/app/shimmer/page.tsx
index 76d2972d85570..f6573044f81b6 100644
--- a/examples/image-legacy-component/app/shimmer/page.tsx
+++ b/examples/image-legacy-component/app/shimmer/page.tsx
@@ -23,7 +23,7 @@ const toBase64 = (str: string) =>
 export default function Shimmer() {
   return (
     <div>
-      <ViewSource pathname="pages/shimmer.tsx" />
+      <ViewSource pathname="app/shimmer/page.tsx" />
       <h1>Image Component With Shimmer Data URL</h1>
       <Image
         alt="Mountains"