diff --git a/examples/with-semantic-ui/.nowignore b/examples/with-semantic-ui/.nowignore new file mode 100644 index 00000000..5a4be6a0 --- /dev/null +++ b/examples/with-semantic-ui/.nowignore @@ -0,0 +1,5 @@ +node_modules +.next +/*.* +!package.json +!next.config.js diff --git a/examples/with-semantic-ui/next.config.js b/examples/with-semantic-ui/next.config.js index 1dade337..03a5d211 100644 --- a/examples/with-semantic-ui/next.config.js +++ b/examples/with-semantic-ui/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 } }) diff --git a/examples/with-semantic-ui/now.json b/examples/with-semantic-ui/now.json new file mode 100644 index 00000000..65dfadc7 --- /dev/null +++ b/examples/with-semantic-ui/now.json @@ -0,0 +1,5 @@ +{ + "version": 2, + "name": "with-semantic-ui", + "builds": [{ "src": "package.json", "use": "@now/next" }] +} diff --git a/examples/with-semantic-ui/package.json b/examples/with-semantic-ui/package.json index 2ed2d4a2..340a3a32 100644 --- a/examples/with-semantic-ui/package.json +++ b/examples/with-semantic-ui/package.json @@ -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" } diff --git a/examples/with-semantic-ui/pages/LargeImage.png b/examples/with-semantic-ui/pages/LargeImage.png new file mode 100644 index 00000000..19de6c43 Binary files /dev/null and b/examples/with-semantic-ui/pages/LargeImage.png differ diff --git a/examples/with-semantic-ui/pages/SmallImage.png b/examples/with-semantic-ui/pages/SmallImage.png new file mode 100644 index 00000000..edf0cb07 Binary files /dev/null and b/examples/with-semantic-ui/pages/SmallImage.png differ diff --git a/examples/with-semantic-ui/pages/_document.js b/examples/with-semantic-ui/pages/_document.js deleted file mode 100644 index 58fa5204..00000000 --- a/examples/with-semantic-ui/pages/_document.js +++ /dev/null @@ -1,15 +0,0 @@ -import Document, { Head, Main, NextScript } from 'next/document' - -export default class MyDocument extends Document { - render () { - return ( - - - -
- - - - ) - } -} diff --git a/examples/with-semantic-ui/pages/index.js b/examples/with-semantic-ui/pages/index.js index 46af6e7b..f8d6de13 100644 --- a/examples/with-semantic-ui/pages/index.js +++ b/examples/with-semantic-ui/pages/index.js @@ -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 () => ( -
+
+ +
Show Modal}> - Select a Photo - + publicPath should be set to /_next/static/ + -
Default Profile Image
-

- We have found the following gravatar image associated with your - e-mail address. -

-

Is it okay to use this photo?

+
+
+

+ Larger content should be still availble as a fallback + to fileLoader but + it should not polute /.next/static/css folder. + You should see two images below. + One, smaller, loaded as data url, and one, bigger, loaded + via url. +

+
+
+ +

+ A small image should be loaded as data url: {SmallImage.substr(0, 100)}... +

+
+ +
+ +

+ A large image should be loaded as a url: {LargeImage} +

+
+

+ You should also still be able to load regular css. + This text should have border. +

+
- - - - Next.js - - - - - React - - - - - Vue.js - - - - Hello
) diff --git a/examples/with-semantic-ui/pages/styles.css b/examples/with-semantic-ui/pages/styles.css new file mode 100644 index 00000000..d0ee8936 --- /dev/null +++ b/examples/with-semantic-ui/pages/styles.css @@ -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; +}