Merge branch 'canary' into bugfix/fix-example-cms-contentful

Author: gfortaine

errors/no-page-custom-font.md

@@ -3,7 +3,7 @@
 ### Why This Error Occurred
 
 - The custom font you're adding was added to a page - this only adds the font to the specific page and not the entire application.
-- The custom font you're adding was added to a separate component within `Document` - this disables automatic font optimiztion.
+- The custom font you're adding was added to a separate component within `Document` - this disables automatic font optimization.
 
 ### Possible Ways to Fix It
 

examples/cms-kontent/components/cover-image.js

@@ -17,7 +17,7 @@ export default function CoverImage({ title, src, slug }) {
   return (
     <div className="sm:mx-0">
       {slug ? (
-        <Link href={slug}>
+        <Link href={`/posts/${slug}`}>
           <a aria-label={title}>{image}</a>
         </Link>
       ) : (

examples/cms-kontent/lib/api.js

@@ -1,5 +1,5 @@
 import { DeliveryClient } from '@kentico/kontent-delivery'
-import { name, version } from '../package.json'
+import pkg from '../package.json'
 
 const sourceTrackingHeaderName = 'X-KC-SOURCE'
 
@@ -9,7 +9,7 @@ const client = new DeliveryClient({
   globalHeaders: (_queryConfig) => [
     {
       header: sourceTrackingHeaderName,
-      value: `@vercel/next.js/example/${name};${version}`,
+      value: `@vercel/next.js/example/${pkg.name};${pkg.version}`,
     },
   ],
 })

examples/with-semantic-ui/.nowignore

@@ -6,15 +6,10 @@
     "start": "next start"
   },
   "dependencies": {
-    "next": "^9.1.8-canary.11",
+    "next": "latest",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "semantic-ui-css": "^2.4.1",
-    "semantic-ui-react": "^0.84.0"
-  },
-  "devDependencies": {
-    "file-loader": "^3.0.1",
-    "url-loader": "^1.1.2",
-    "webpack": "^4.29.0"
+    "semantic-ui-react": "^2.0.4"
   }
 }

examples/with-semantic-ui/next.config.js

@@ -1,8 +1,6 @@
 import 'semantic-ui-css/semantic.min.css'
-import './styles.css'
+import '../styles/global.css'
 
-function MyApp({ Component, pageProps }) {
+export default function MyApp({ Component, pageProps }) {
   return <Component {...pageProps} />
 }
-
-export default MyApp

examples/with-semantic-ui/package.json

@@ -1,50 +1,46 @@
-import { Modal, Button, Icon } from 'semantic-ui-react'
-
-import SmallImage from './SmallImage.png'
-import LargeImage from './LargeImage.png'
+import Image from 'next/image'
+import * as React from 'react'
+import { Button, Header, Modal, Icon } from 'semantic-ui-react'
 
 export default function Home() {
+  const [open, setOpen] = React.useState(false)
+
   return (
     <div className="centered">
       <Icon size="massive" name="world" />
       <div className="separator" />
-      <Modal trigger={<Button>Show Modal</Button>}>
-        <Modal.Header>
-          <em>publicPath</em> should be set to <em>/_next/static/</em>
-        </Modal.Header>
-        <Modal.Content>
+      <Modal
+        onClose={() => setOpen(false)}
+        onOpen={() => setOpen(true)}
+        open={open}
+        trigger={<Button>Show Modal</Button>}
+      >
+        <Modal.Header>Select a Photo</Modal.Header>
+        <Modal.Content image>
+          <span style={{ marginRight: 21 }}>
+            <Image src="/image.png" width={400} height={266} />
+          </span>
           <Modal.Description>
-            <div className="wrapper">
-              <div className="row">
-                <p>
-                  Larger content should be still available as a fallback to{' '}
-                  <em>fileLoader</em> but it should not pollute{' '}
-                  <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>
+            <Header>Default Profile Image</Header>
+            <p>
+              We've found the following gravatar image associated with your
+              e-mail address.
+            </p>
+            <p>Is it okay to use this photo?</p>
           </Modal.Description>
         </Modal.Content>
+        <Modal.Actions>
+          <Button color="black" onClick={() => setOpen(false)}>
+            Nope
+          </Button>
+          <Button
+            content="Yep, that's me"
+            labelPosition="right"
+            icon="checkmark"
+            onClick={() => setOpen(false)}
+            positive
+          />
+        </Modal.Actions>
       </Modal>
     </div>
   )