terribleplan/next.js
1
0
Fork 0
mirror of https://github.com/terribleplan/next.js.git synced 2024-01-19 02:48:18 +00:00
Code Issues Releases Wiki Activity

Update example: Semantic-UI (#4815)

Browse source 
The existing example currently does not work because of outdated usage patterns. This PR seeks to update these patterns to the latest recommended best practice while bumping versions.

# Summary

- Bumped version numbers in `package.json`;
- Moved `<link />` tag from `pages/index.js` to `pages/_document.js` as is [recommended](https://github.com/zeit/next-plugins/tree/master/packages/next-css#usage);
- Replace individual css/font imports with import of minified CSS as is [recommended](https://react.semantic-ui.com/usage#semantic-ui-css-package);
- Removed prop (no longer used) from `<List />` element.
This commit is contained in:
Adrian Li 2018-07-21 06:42:38 -04:00 committed by Tim Neutkens
parent 0298c722b1
commit 6ef7625ba6
3 changed files with 25 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
examples/with-semantic-ui/package.json
View file

@ -7,14 +7,14 @@
"start": "next start" "start": "next start"
}, },
"dependencies": { "dependencies": {
"@zeit/next-css": "^0.1.2", "@zeit/next-css": "^0.2.0",
"file-loader": "^1.1.9", "file-loader": "^1.1.11",
"next": "latest", "next": "latest",
"react": "^16.0.0", "react": "^16.0.0",
"react-dom": "^16.0.0", "react-dom": "^16.0.0",
"semantic-ui-css": "^2.2.12", "semantic-ui-css": "^2.3.3",
"semantic-ui-react": "^0.78.2", "semantic-ui-react": "^0.82.0",
"url-loader": "^0.6.2" "url-loader": "^1.0.1"
}, },
"license": "ISC" "license": "ISC"
} }

17
examples/with-semantic-ui/pages/_document.js Normal file
View file

@ -0,0 +1,17 @@
import Document, { Head, Main, NextScript } from 'next/document'
export default class MyDocument extends Document {
render () {
return (
<html>
<Head>
<link rel='stylesheet' href='/_next/static/style.css' />
</Head>
<body>
<Main />
<NextScript />
</body>
</html>
)
}
}

17
examples/with-semantic-ui/pages/index.js
View file

@ -1,31 +1,20 @@
import 'semantic-ui-css/components/modal.css' import 'semantic-ui-css/semantic.min.css'
import 'semantic-ui-css/components/header.css'
import 'semantic-ui-css/components/button.css'
import 'semantic-ui-css/components/list.css'
import 'semantic-ui-css/components/icon.css'
import 'semantic-ui-css/themes/default/assets/fonts/icons.eot'
import 'semantic-ui-css/themes/default/assets/fonts/icons.woff'
import 'semantic-ui-css/themes/default/assets/fonts/icons.woff2'
import { Modal, Header, Button, List, Icon } from 'semantic-ui-react' import { Modal, Header, Button, List, Icon } from 'semantic-ui-react'
import Head from 'next/head'
export default () => ( export default () => (
<div> <div>
<Head>
<link rel='stylesheet' href='/_next/static/style.css' />
</Head>
<Modal trigger={<Button>Show Modal</Button>}> <Modal trigger={<Button>Show Modal</Button>}>
<Modal.Header>Select a Photo</Modal.Header> <Modal.Header>Select a Photo</Modal.Header>
<Modal.Content image> <Modal.Content image>
<Modal.Description> <Modal.Description>
<Header>Default Profile Image</Header> <Header>Default Profile Image</Header>
<p>We've found the following gravatar image associated with your e-mail address.</p> <p>We have found the following gravatar image associated with your e-mail address.</p>
<p>Is it okay to use this photo?</p> <p>Is it okay to use this photo?</p>
</Modal.Description> </Modal.Description>
</Modal.Content> </Modal.Content>
</Modal> </Modal>
<List vertical relaxed> <List relaxed>
<List.Item> <List.Item>
<List.Content> <List.Content>
<List.Header as='a'>Next.js</List.Header> <List.Header as='a'>Next.js</List.Header>