mirror of
https://github.com/terribleplan/next.js.git
synced 2024-01-19 02:48:18 +00:00
Updates with-semantic-ui example (#6158)
I tried to make the example a bit more descriptive. I changed `publicPath` in `now.config.js` to be `/_next/static/`, in place of `./`, and `outputPath` to `static/` in place of `static/css/`. The reason is that the webpack config will still fallback to `file-loader` for any content that is imported by the user and which is bigger that `8192` bytes. I think this content should not land in the css folder, which should probably stay css specific. Moreover, for user content, like regular images, the former settings will fail. If you have this: ```javascript import LargeFile from './LargeFile.png' ``` it would be placed in `static/css/` but its url would resolve to `<base-url>/LargeFile.png`, which will fail. It works for semantic-ui alone, because `@zeit/next-css` will put the styles in `static/css/` and so `publicPath` of `./` would work just fine. Putting assets in `static/` and setting `publicPath` to '/_next/static/' will resolve correctly for both semantic-ui related assets as well as for regular user assets. I hope I am not mixing something up. I tested it locally and in serverless deployment, and this looks pretty consistent.
This commit is contained in:
parent
0e21615245
commit
1475491568
5
examples/with-semantic-ui/.nowignore
Normal file
5
examples/with-semantic-ui/.nowignore
Normal file
|
@ -0,0 +1,5 @@
|
|||
node_modules
|
||||
.next
|
||||
/*.*
|
||||
!package.json
|
||||
!next.config.js
|
|
@ -1,20 +1,20 @@
|
|||
const withCss = require('@zeit/next-css')
|
||||
const withCSS = require('@zeit/next-css')
|
||||
|
||||
module.exports = withCss({
|
||||
module.exports = withCSS({
|
||||
target: 'serverless',
|
||||
webpack (config) {
|
||||
config.module.rules.push({
|
||||
test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/i,
|
||||
test: /\.(png|svg|eot|otf|ttf|woff|woff2)$/,
|
||||
use: {
|
||||
loader: 'url-loader',
|
||||
options: {
|
||||
limit: 8192,
|
||||
publicPath: './',
|
||||
outputPath: 'static/css/',
|
||||
publicPath: '/_next/static/',
|
||||
outputPath: 'static/',
|
||||
name: '[name].[ext]'
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
return config
|
||||
}
|
||||
})
|
||||
|
|
5
examples/with-semantic-ui/now.json
Normal file
5
examples/with-semantic-ui/now.json
Normal file
|
@ -0,0 +1,5 @@
|
|||
{
|
||||
"version": 2,
|
||||
"name": "with-semantic-ui",
|
||||
"builds": [{ "src": "package.json", "use": "@now/next" }]
|
||||
}
|
|
@ -3,18 +3,21 @@
|
|||
"version": "1.0.0",
|
||||
"scripts": {
|
||||
"dev": "next",
|
||||
"build": "next build",
|
||||
"now-build": "next build",
|
||||
"start": "next start"
|
||||
},
|
||||
"dependencies": {
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"file-loader": "^1.1.11",
|
||||
"next": "latest",
|
||||
"next": "canary",
|
||||
"react": "^16.7.0",
|
||||
"react-dom": "^16.7.0",
|
||||
"semantic-ui-css": "^2.3.3",
|
||||
"semantic-ui-react": "^0.82.0",
|
||||
"url-loader": "^1.0.1"
|
||||
"semantic-ui-css": "^2.4.1",
|
||||
"semantic-ui-react": "^0.84.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@zeit/next-css": "^1.0.1",
|
||||
"file-loader": "^3.0.1",
|
||||
"url-loader": "^1.1.2",
|
||||
"webpack": "^4.29.0"
|
||||
},
|
||||
"license": "ISC"
|
||||
}
|
||||
|
|
BIN
examples/with-semantic-ui/pages/LargeImage.png
Normal file
BIN
examples/with-semantic-ui/pages/LargeImage.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 197 KiB |
BIN
examples/with-semantic-ui/pages/SmallImage.png
Normal file
BIN
examples/with-semantic-ui/pages/SmallImage.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 7.2 KiB |
|
@ -1,15 +0,0 @@
|
|||
import Document, { Head, Main, NextScript } from 'next/document'
|
||||
|
||||
export default class MyDocument extends Document {
|
||||
render () {
|
||||
return (
|
||||
<html>
|
||||
<Head />
|
||||
<body>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</html>
|
||||
)
|
||||
}
|
||||
}
|
|
@ -1,38 +1,52 @@
|
|||
import 'semantic-ui-css/semantic.min.css'
|
||||
import { Modal, Header, Button, List, Icon } from 'semantic-ui-react'
|
||||
import { Modal,
|
||||
Button,
|
||||
Icon
|
||||
} from 'semantic-ui-react'
|
||||
|
||||
import SmallImage from './SmallImage.png'
|
||||
import LargeImage from './LargeImage.png'
|
||||
import './styles.css'
|
||||
|
||||
export default () => (
|
||||
<div>
|
||||
<div className='centered'>
|
||||
<Icon size='massive' name='world' />
|
||||
<div className='separator' />
|
||||
<Modal trigger={<Button>Show Modal</Button>}>
|
||||
<Modal.Header>Select a Photo</Modal.Header>
|
||||
<Modal.Content image>
|
||||
<Modal.Header><em>publicPath</em> should be set to <em>/_next/static/</em></Modal.Header>
|
||||
<Modal.Content>
|
||||
<Modal.Description>
|
||||
<Header>Default Profile Image</Header>
|
||||
<p>
|
||||
We have found the following gravatar image associated with your
|
||||
e-mail address.
|
||||
</p>
|
||||
<p>Is it okay to use this photo?</p>
|
||||
<div className='wrapper'>
|
||||
<div className='row'>
|
||||
<p>
|
||||
Larger content should be still availble as a fallback
|
||||
to <em>fileLoader</em> but
|
||||
it should not polute <em>/.next/static/css</em> folder.
|
||||
You should see two images below.
|
||||
One, smaller, loaded as data url, and one, bigger, loaded
|
||||
via url.
|
||||
</p>
|
||||
</div>
|
||||
<div className='row'>
|
||||
<img src={SmallImage} />
|
||||
<p>
|
||||
A small image should be loaded as data url: <em>{SmallImage.substr(0, 100)}...</em>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className='row'>
|
||||
<img src={LargeImage} />
|
||||
<p>
|
||||
A large image should be loaded as a url: <em>{LargeImage}</em>
|
||||
</p>
|
||||
</div>
|
||||
<p className='border'>
|
||||
You should also still be able to load regular css.
|
||||
This text should have border.
|
||||
</p>
|
||||
</div>
|
||||
</Modal.Description>
|
||||
</Modal.Content>
|
||||
</Modal>
|
||||
<List relaxed>
|
||||
<List.Item>
|
||||
<List.Content>
|
||||
<List.Header as='a'>Next.js</List.Header>
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<List.Content>
|
||||
<List.Header as='a'>React</List.Header>
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
<List.Item>
|
||||
<List.Content>
|
||||
<List.Header as='a'>Vue.js</List.Header>
|
||||
</List.Content>
|
||||
</List.Item>
|
||||
</List>
|
||||
Hello <Icon name='world' />
|
||||
</div>
|
||||
)
|
||||
|
|
37
examples/with-semantic-ui/pages/styles.css
Normal file
37
examples/with-semantic-ui/pages/styles.css
Normal file
|
@ -0,0 +1,37 @@
|
|||
.centered {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.separator {
|
||||
width: 100%;
|
||||
height: 10px;
|
||||
}
|
||||
|
||||
.border {
|
||||
border: 1px solid black;
|
||||
padding: 5px;
|
||||
}
|
||||
|
||||
.wrapper {
|
||||
display: flex;
|
||||
flex-flow: column nowrap;
|
||||
align-items: flex-start;
|
||||
}
|
||||
|
||||
.row {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
margin: 5px 0 5px 0;
|
||||
}
|
||||
|
||||
.row > p {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.row > img {
|
||||
margin-right: 15px;
|
||||
}
|
Loading…
Reference in a new issue