Update image example with link back to source code (#18909)

Fixes #18908

examples/image-component/components/view-source.js

@@ -0,0 +1,26 @@
+import { svg, arm } from './view-source.module.css'
+
+const ViewSource = ({ pathname }) => (
+  <a
+    title="View Source"
+    href={`https://github.com/vercel/next.js/tree/canary/examples/image-component/${pathname}`}
+  >
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="80"
+      height="80"
+      viewBox="0 0 250 250"
+      fill="#151513"
+      className={svg}
+    >
+      <path d="M0 0l115 115h15l12 27 108 108V0z" fill="#fff" />
+      <path
+        className={arm}
+        d="M128 109c-15-9-9-19-9-19 3-7 2-11 2-11-1-7 3-2 3-2 4 5 2 11 2 11-3 10 5 15 9 16"
+      />
+      <path d="M115 115s4 2 5 0l14-14c3-2 6-3 8-3-8-11-15-24 2-41 5-5 10-7 16-7 1-2 3-7 12-11 0 0 5 3 7 16 4 2 8 5 12 9s7 8 9 12c14 3 17 7 17 7-4 8-9 11-11 11 0 6-2 11-7 16-16 16-30 10-41 2 0 3-1 7-5 11l-12 11c-1 1 1 5 1 5z" />
+    </svg>
+  </a>
+)
+
+export default ViewSource

examples/image-component/components/view-source.module.css

@@ -0,0 +1,48 @@
+.svg {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+.arm {
+  transform-origin: 130px 106px;
+}
+
+.svg:hover .arm {
+  animation: wave 560ms ease-in-out;
+}
+
+@keyframes wave {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  20% {
+    transform: rotate(-25deg);
+  }
+
+  40% {
+    transform: rotate(10deg);
+  }
+
+  60% {
+    transform: rotate(-25deg);
+  }
+
+  80% {
+    transform: rotate(10deg);
+  }
+
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+@media (max-width: 500px) {
+  .svg:hover .arm {
+    animation: none;
+  }
+
+  .svg:hover .arm {
+    animation: wave 560ms ease-in-out;
+  }
+}

examples/image-component/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "rewrites",
+  "name": "image-component",
   "version": "1.0.0",
   "scripts": {
     "dev": "next dev",
@@ -7,7 +7,7 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "latest",
+    "next": "canary",
     "react": "^16.13.1",
     "react-dom": "^16.13.1"
   },

examples/image-component/pages/background.js

@@ -1,8 +1,10 @@
 import Image from 'next/image'
+import ViewSource from '../components/view-source'
 import { bgWrap, bgText } from '../styles.module.css'
 
 const Background = () => (
   <div>
+    <ViewSource pathname="pages/background.js" />
     <div className={bgWrap}>
       <Image
         alt="Mountains"

examples/image-component/pages/index.js

@@ -1,11 +1,13 @@
 import styles from '../styles.module.css'
 import Image from 'next/image'
 import Link from 'next/link'
+import ViewSource from '../components/view-source'
 
 const Code = (p) => <code className={styles.inlineCode} {...p} />
 
 const Index = () => (
   <div className={styles.container}>
+    <ViewSource pathname="pages/index.js" />
     <div className={styles.card}>
       <h1>Image Component with Next.js</h1>
       <p>

examples/image-component/pages/layout-fill.js

@@ -1,7 +1,9 @@
 import Image from 'next/image'
+import ViewSource from '../components/view-source'
 
 const Fill = () => (
   <div>
+    <ViewSource pathname="pages/layout-fill.js" />
     <h1>Image Component With Layout Fill</h1>
     <div style={{ position: 'relative', width: '300px', height: '500px' }}>
       <Image

examples/image-component/pages/layout-fixed.js

@@ -1,7 +1,9 @@
 import Image from 'next/image'
+import ViewSource from '../components/view-source'
 
 const Fixed = () => (
   <div>
+    <ViewSource pathname="pages/layout-fixed.js" />
     <h1>Image Component With Layout Fixed</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/layout-intrinsic.js

@@ -1,7 +1,9 @@
 import Image from 'next/image'
+import ViewSource from '../components/view-source'
 
 const Intrinsic = () => (
   <div>
+    <ViewSource pathname="pages/layout-intrinsic.js" />
     <h1>Image Component With Layout Intrinsic</h1>
     <Image
       alt="Mountains"

examples/image-component/pages/layout-responsive.js

@@ -1,7 +1,9 @@
 import Image from 'next/image'
+import ViewSource from '../components/view-source'
 
 const Responsive = () => (
   <div>
+    <ViewSource pathname="pages/layout-responsive.js" />
     <h1>Image Component With Layout Responsive</h1>
     <Image
       alt="Mountains"