Skip to content

Commit

Permalink
Update Examples for Fast Refresh (vercel#13068)
Browse files Browse the repository at this point in the history
  • Loading branch information
Timer authored May 18, 2020
1 parent 86160a5 commit dbad9db
Show file tree
Hide file tree
Showing 254 changed files with 2,336 additions and 1,886 deletions.
22 changes: 21 additions & 1 deletion .eslintrc.json
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
{
"root": true,
"parser": "babel-eslint",
"plugins": ["react", "react-hooks", "jest"],
"plugins": ["react", "react-hooks", "jest", "import"],
"env": {
"browser": true,
"commonjs": true,
Expand Down Expand Up @@ -91,6 +91,26 @@
"packages/create-next-app/templates/**/*"
],
"rules": { "react/react-in-jsx-scope": "off" }
},
{
"files": ["examples/**/*"],
"rules": {
"import/no-anonymous-default-export": [
"error",
{
// React components:
"allowArrowFunction": false,
"allowAnonymousClass": false,
"allowAnonymousFunction": false,

// Non-React stuff:
"allowArray": true,
"allowCallExpression": true,
"allowLiteral": true,
"allowObject": true
}
]
}
}
],
"rules": {
Expand Down
230 changes: 116 additions & 114 deletions examples/amp-story/pages/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -2,122 +2,124 @@ import Head from 'next/head'

export const config = { amp: true }

export default () => (
<>
<Head>
<title>Example AMP Story in Next.js</title>
<script
async
key="amp-story"
custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
/>
<script
async
key="amp-video"
custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
/>
</Head>
export default function Home() {
return (
<>
<Head>
<title>Example AMP Story in Next.js</title>
<script
async
key="amp-story"
custom-element="amp-story"
src="https://cdn.ampproject.org/v0/amp-story-1.0.js"
/>
<script
async
key="amp-video"
custom-element="amp-video"
src="https://cdn.ampproject.org/v0/amp-video-0.1.js"
/>
</Head>

<amp-story
standalone=""
title="Stories in AMP - Hello World"
publisher="AMP Project"
publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg"
>
{/* <!-- A story consists of one or more pages. Each page is declared by an `amp-story-page` element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading. --> */}
<amp-story-page id="page-1">
<amp-story-grid-layer template="fill">
<amp-img
src="https://amp.dev/static/samples/img/story_dog2.jpg"
width="720"
height="1280"
layout="responsive"
/>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>

{/* <!-- Here we have a page consisting of a video which autoplays and loops. --> */}
<amp-story-page id="page-2">
<amp-story-grid-layer template="fill">
<amp-video
autoplay=""
loop=""
width="720"
height="960"
poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
layout="responsive"
>
<source
src="https://amp.dev/static/samples/video/story_video_dog.mp4"
type="video/mp4"
<amp-story
standalone=""
title="Stories in AMP - Hello World"
publisher="AMP Project"
publisher-logo-src="https://amp.dev/favicons/coast-228x228.png"
poster-portrait-src="https://amp.dev/static/samples/img/story_dog2_portrait.jpg"
poster-square-src="https://amp.dev/static/samples/img/story_dog2_square.jpg"
poster-landscape-src="https://amp.dev/static/samples/img/story_dog2_landscape.jpg"
>
{/* <!-- A story consists of one or more pages. Each page is declared by an `amp-story-page` element. Pages are designed by layering videos, images and text. Here we have a page that uses two layers. One layer filling the available space with an image and one text layer that shows a heading. --> */}
<amp-story-page id="page-1">
<amp-story-grid-layer template="fill">
<amp-img
src="https://amp.dev/static/samples/img/story_dog2.jpg"
width="720"
height="1280"
layout="responsive"
/>
</amp-video>
</amp-story-grid-layer>
</amp-story-page>
</amp-story-grid-layer>
<amp-story-grid-layer template="vertical">
<h1>Hello World</h1>
<p>This is an AMP Story.</p>
</amp-story-grid-layer>
</amp-story-page>

{/* <!-- Here we have a page consisting of a video which autoplays and loops. --> */}
<amp-story-page id="page-2">
<amp-story-grid-layer template="fill">
<amp-video
autoplay=""
loop=""
width="720"
height="960"
poster="https://amp.dev/static/samples/img/story_video_dog_cover.jpg"
layout="responsive"
>
<source
src="https://amp.dev/static/samples/video/story_video_dog.mp4"
type="video/mp4"
/>
</amp-video>
</amp-story-grid-layer>
</amp-story-page>

{/* <!-- Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the `animate-in-duration` and `animate-in-delay` properties. The [animations sample](/documentation/examples/visual-effects/amp_story_animations/) shows all available animantions in action. --> */}
<amp-story-page id="animation-demo">
<amp-story-grid-layer template="fill">
<amp-img
src="https://amp.dev/static/samples/img/story_dog4.jpg"
animate-in="fly-in-top"
width="720"
height="1280"
layout="responsive"
/>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<h2
animate-in="fly-in-bottom"
grid-area="lower-third"
animate-in-delay="0.4s"
>
Best walk ever!
</h2>
</amp-story-grid-layer>
</amp-story-page>
{/* <!-- Pre-defined entry animations make it possible to create dynamic pages without videos. The length and initial delay can be customized using the `animate-in-duration` and `animate-in-delay` properties. The [animations sample](/documentation/examples/visual-effects/amp_story_animations/) shows all available animantions in action. --> */}
<amp-story-page id="animation-demo">
<amp-story-grid-layer template="fill">
<amp-img
src="https://amp.dev/static/samples/img/story_dog4.jpg"
animate-in="fly-in-top"
width="720"
height="1280"
layout="responsive"
/>
</amp-story-grid-layer>
<amp-story-grid-layer template="thirds">
<h2
animate-in="fly-in-bottom"
grid-area="lower-third"
animate-in-delay="0.4s"
>
Best walk ever!
</h2>
</amp-story-grid-layer>
</amp-story-page>

{/* <!-- Stories can use predefined layouts to style the page. Here we're using the `thirds` template. For an overview about the available layouts take a look at the [layouts sample](/documentation/examples/style-layout/amp_story_layouts/). --> */}
<amp-story-page id="layout-demo">
<amp-story-grid-layer template="thirds">
<amp-img
grid-area="upper-third"
src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
width="560"
height="420"
layout="responsive"
/>
<amp-img
grid-area="middle-third"
src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
width="560"
height="420"
layout="responsive"
/>
<amp-img
grid-area="lower-third"
src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
width="560"
height="420"
layout="responsive"
/>
</amp-story-grid-layer>
</amp-story-page>
{/* <!-- Stories can use predefined layouts to style the page. Here we're using the `thirds` template. For an overview about the available layouts take a look at the [layouts sample](/documentation/examples/style-layout/amp_story_layouts/). --> */}
<amp-story-page id="layout-demo">
<amp-story-grid-layer template="thirds">
<amp-img
grid-area="upper-third"
src="https://amp.dev/static/samples/img/story_thirds_1.jpg"
width="560"
height="420"
layout="responsive"
/>
<amp-img
grid-area="middle-third"
src="https://amp.dev/static/samples/img/story_thirds_2.jpg"
width="560"
height="420"
layout="responsive"
/>
<amp-img
grid-area="lower-third"
src="https://amp.dev/static/samples/img/story_thirds_3.jpg"
width="560"
height="420"
layout="responsive"
/>
</amp-story-grid-layer>
</amp-story-page>

{/* <!-- A "bookend" panel containing links to other resources will appear on the last page of your story if you include an `amp-story-bookend` that references a [bookend JSON config](/static/samples/json/bookend.json). --> */}
<amp-story-bookend
src="https://amp.dev/static/samples/json/bookend.json"
layout="nodisplay"
/>
</amp-story>
</>
)
{/* <!-- A "bookend" panel containing links to other resources will appear on the last page of your story if you include an `amp-story-bookend` that references a [bookend JSON config](/static/samples/json/bookend.json). --> */}
<amp-story-bookend
src="https://amp.dev/static/samples/json/bookend.json"
layout="nodisplay"
/>
</amp-story>
</>
)
}
4 changes: 3 additions & 1 deletion examples/analyze-bundles/pages/about.js
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export default () => <div>About us</div>
export default function About() {
return <div>About us</div>
}
4 changes: 3 additions & 1 deletion examples/analyze-bundles/pages/contact.js
Original file line number Diff line number Diff line change
@@ -1 +1,3 @@
export default () => <div>This is the contact page.</div>
export default function Contact() {
return <div>This is the contact page.</div>
}
20 changes: 11 additions & 9 deletions examples/api-routes-apollo-server-and-client-auth/pages/about.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import Link from 'next/link'

export default () => (
<div>
This is a static page goto{' '}
<Link href="/">
<a>dynamic</a>
</Link>{' '}
page.
</div>
)
export default function About() {
return (
<div>
This is a static page goto{' '}
<Link href="/">
<a>dynamic</a>
</Link>{' '}
page.
</div>
)
}
20 changes: 11 additions & 9 deletions examples/api-routes-apollo-server-and-client/pages/about.js
Original file line number Diff line number Diff line change
@@ -1,11 +1,13 @@
import Link from 'next/link'

export default () => (
<div>
This is a static page goto{' '}
<Link href="/">
<a>dynamic</a>
</Link>{' '}
page.
</div>
)
export default function About() {
return (
<div>
This is a static page goto{' '}
<Link href="/">
<a>dynamic</a>
</Link>{' '}
page.
</div>
)
}
2 changes: 1 addition & 1 deletion examples/api-routes-rest/pages/api/user/[id].js
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
export default (req, res) => {
export default function userHandler(req, res) {
const {
query: { id, name },
method,
Expand Down
2 changes: 1 addition & 1 deletion examples/api-routes-rest/pages/api/users.js
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// Fake users data
const users = [{ id: 1 }, { id: 2 }, { id: 3 }]

export default (req, res) => {
export default function handler(req, res) {
// Get data from your database
res.status(200).json(users)
}
16 changes: 9 additions & 7 deletions examples/api-routes/components/Person.js
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
import Link from 'next/link'

export default ({ person }) => (
<li>
<Link href="/person/[id]" as={`/person/${person.id}`}>
<a>{person.name}</a>
</Link>
</li>
)
export default function Person({ person }) {
return (
<li>
<Link href="/person/[id]" as={`/person/${person.id}`}>
<a>{person.name}</a>
</Link>
</li>
)
}
2 changes: 1 addition & 1 deletion examples/api-routes/pages/api/people/[id].js
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { people } from '../../../data'

export default ({ query: { id } }, res) => {
export default function personHandler({ query: { id } }, res) {
const filtered = people.filter((p) => p.id === id)

// User with id exists
Expand Down
2 changes: 1 addition & 1 deletion examples/api-routes/pages/api/people/index.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { people } from '../../../data'

export default (req, res) => {
export default function handler(req, res) {
res.status(200).json(people)
}
Loading

0 comments on commit dbad9db

Please sign in to comment.