Update image example with link back to source code (#18909)
Fixes #18908
This commit is contained in:
parent
39453bba69
commit
37fb0ad220
9 changed files with 88 additions and 2 deletions
26
examples/image-component/components/view-source.js
Normal file
26
examples/image-component/components/view-source.js
Normal file
|
@ -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
|
48
examples/image-component/components/view-source.module.css
Normal file
48
examples/image-component/components/view-source.module.css
Normal file
|
@ -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;
|
||||
}
|
||||
}
|
|
@ -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"
|
||||
},
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
|
@ -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"
|
||||
|
|
Loading…
Reference in a new issue