Skip to content

Commit

Permalink
Update cms-kontent example to action PR feedback
Browse files Browse the repository at this point in the history
* Updates the `cms-kontent` example `Image` component to implement the
  suggested improvements from @styfle in vercel#37188.
* Simplifies the Kontent loader host checking.
* Reduces the default image quality to from `100` to `75`.
* Add `tslib` dependency to fix `Module not found: Can't resolve 'tslib'`
  error when importing `transformImageUrl` in the `Image` component.
  It looks like this might be a bug in v11 of the Kontent Delivery SDK,
  as it appears `tslib` needs to be included as dependency, rather than
  dev dependency. I missed this originally as the example runs fine in
  the Next repo as the root `yarn.lock` has `tslib`. It's only when the
  example is used via `yarn create next-app` that the issue occurs. We
  can likely remove this in future alongside an upgrade to the SDK
  package once this issue has been fixed and released there.

vercel#37188
  • Loading branch information
tommarshall committed May 26, 2022
1 parent 7206614 commit ab515dc
Show file tree
Hide file tree
Showing 2 changed files with 4 additions and 5 deletions.
6 changes: 2 additions & 4 deletions examples/cms-kontent/components/image.js
Original file line number Diff line number Diff line change
@@ -1,22 +1,20 @@
import NextImage from 'next/image'
import { transformImageUrl } from '@kentico/kontent-delivery'

const KONTENT_ASSET_HOSTNAME_REGEX = /.kc-usercontent.com$/

const getLoader = (src) => {
return srcIsKontentAsset(src) ? kontentImageLoader : undefined
}

const srcIsKontentAsset = (src) => {
try {
const { hostname } = new URL(src)
return KONTENT_ASSET_HOSTNAME_REGEX.test(hostname)
return hostname.endsWith('.kc-usercontent.com')
} catch {
return false
}
}

const kontentImageLoader = ({ src, width, quality = 100 }) => {
const kontentImageLoader = ({ src, width, quality = 75 }) => {
return new transformImageUrl(src)
.withWidth(width)
.withQuality(quality)
Expand Down
3 changes: 2 additions & 1 deletion examples/cms-kontent/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,8 @@
"react": "^18.1.0",
"react-dom": "^18.1.0",
"remark": "14.0.2",
"remark-html": "15.0.1"
"remark-html": "15.0.1",
"tslib": "2.4.0"
},
"devDependencies": {
"autoprefixer": "10.4.7",
Expand Down

0 comments on commit ab515dc

Please sign in to comment.