Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add with-cloudinary example #43250

Merged
merged 15 commits into from Dec 2, 2022
Merged

Add with-cloudinary example #43250

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
c79671b
added nextjs + cloudinary example
Nutlope Nov 22, 2022
67c6bf9
updated generateBlurPlacerholder
Nutlope Nov 22, 2022
c83e19a
Merge branch 'canary' into add-with-cloudinary
Nutlope Nov 22, 2022
4a8993a
Apply suggestions from code review
balazsorban44 Nov 22, 2022
2bf3b6a
Apply suggestions from code review
balazsorban44 Nov 22, 2022
3b60cd2
Merge branch 'canary' into add-with-cloudinary
Nutlope Nov 22, 2022
bcc473a
Merge branch 'canary' into add-with-cloudinary
Nutlope Nov 22, 2022
71dd17c
Merge branch 'canary' into add-with-cloudinary
Nutlope Nov 22, 2022
8871026
run linter
balazsorban44 Nov 23, 2022
b7af523
incorporated updates
Nutlope Dec 1, 2022
c4944fd
updated deploy link
Nutlope Dec 1, 2022
ad9553b
Merge branch 'canary' into add-with-cloudinary
Nutlope Dec 1, 2022
7740ff4
Update examples/with-cloudinary/pages/index.tsx
Nutlope Dec 1, 2022
631efda
Fix link and env description
ijjk Dec 2, 2022
8c935e5
Merge branch 'canary' into add-with-cloudinary
ijjk Dec 2, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 4 additions & 0 deletions examples/with-cloudinary/.env.local.example
View file
Open in desktop
@@ -0,0 +1,4 @@
NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME=
CLOUDINARY_API_KEY=
CLOUDINARY_API_SECRET=
CLOUDINARY_FOLDER=
Nutlope marked this conversation as resolved.
Show resolved Hide resolved
4 changes: 4 additions & 0 deletions examples/with-cloudinary/.gitignore
View file
Open in desktop
@@ -0,0 +1,4 @@
/.next
/node_modules
.env.local
.vercel
balazsorban44 marked this conversation as resolved.
Show resolved Hide resolved
31 changes: 31 additions & 0 deletions examples/with-cloudinary/README.md
View file
Open in desktop
@@ -0,0 +1,31 @@
# Next.js & Cloudinary example app

This example shows how to create an image gallery site using Next.js, [Cloudinary](https://cloudinary.com), and [Tailwind](https://tailwindcss.com).

## Deploy your own

Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or view the demo [here](https://nextconf-images.vercel.app/)

[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-cloudinary&project-name=nextjs-image-gallery&repository-name=with-cloudinary&env=NEXT_PUBLIC_CLOUDINARY_CLOUD_NAME,CLOUDINARY_API_KEY,CLOUDINARY_API_SECRET,CLOUDINARY_FOLDER&envDescription=API%20Keys%20from%20SFCC%20needed%20to%20run%20this%20application.)

Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

## How to use

Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/with-sfcc) with [npm](https://docs.npmjs.com/cli/init), [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/), or [pnpm](https://pnpm.io) to bootstrap the example::

```bash
npx create-next-app --example with-cloudinary nextjs-image-gallery
```

```bash
yarn create next-app --example with-cloudinary nextjs-image-gallery
```

```bash
pnpm create next-app --example with-cloudinary nextjs-image-gallery
```

## References

- Cloudinary API: https://cloudinary.com/documentation/transformation_reference
126 changes: 126 additions & 0 deletions examples/with-cloudinary/components/Bridge.tsx
View file
Open in desktop
@@ -0,0 +1,126 @@
export default function Bridge() {
return (
<svg
aria-labelledby="conf-city-title"
fill="none"
role="img"
viewBox="0 0 620 704"
width="620"
height="704"
xmlns="http://www.w3.org/2000/svg"
>
<title id="conf-city-title">
Line drawing of the Golden Gate Bridge in San Francisco.
</title>
<path d="M372.5 299.5L616.5 335" stroke="currentColor" />
<path
d="M370 16.5C429.833 101.833 562.9 284 616.5 330"
stroke="currentColor"
/>
<path
d="M329.5 34.5L325 36L322 38C321.333 38.5 320 39.6 320 40C320 40.4 319.333 41.1667 319 41.5L318.5 45.5V72L322.5 73M329.5 34.5C336.667 34 351.1 33 351.5 33C351.9 33 354 33.3333 355 33.5L356.5 34.5L358 36L358.5 38L358 70L357.5 70.5L354 72L350.5 73.5H330L322.5 73M329.5 34.5L324.5 38L323.5 40.5L322.5 43.5V73"
stroke="currentColor"
/>
<path d="M321 315V397H356.5" stroke="currentColor" />
<path
d="M332 234L329 240L328 241V245H327V251H326.5V261.5L325.5 262V289.5"
stroke="currentColor"
/>
<path
d="M-0.5 158.5L27 171.5L43.5 190L48.5 202L85 218.5L95.5 246.5C98.1667 254.333 103.7 270.6 104.5 273C105.5 276 117 291 119 294.5C121 298 125.5 307 127 310C128.5 313 142 324.5 145 328C147.4 330.8 154.333 338.833 157.5 342.5L164 358C167.5 362 174.9 370.5 176.5 372.5C178.5 375 191 386.5 193.5 390C196 393.5 200.5 403 202 405.5C203.2 407.5 205.5 415 206.5 418.5C207.833 422.833 210.7 432 211.5 434C212.3 436 216.833 451.5 219 459C221.333 464.5 226 476.6 226 481C226 486.5 223.5 497.5 223.5 500C223.5 502.5 222 503 230.5 512.5C239 522 245.5 529.5 247 532C248.2 534 255.5 546.5 259 552.5"
stroke="currentColor"
/>
<path
d="M164 357.5L206 353L237.5 345.5C242.667 345.5 254.5 345.5 260.5 345.5C268 345.5 277.5 342 279.5 341C281.1 340.2 289.5 337 293.5 335.5H305H309.5"
stroke="currentColor"
/>
<path
d="M309.5 314V399.5L306 402V411.5L303 414.5V433H262.5V440.5H420.5V433H381.5L380 416.5H375.5V402L373 400.5L372 184.5L370 15H371V11L369.5 10.5L366 6V3L364.5 1L363.5 2.5L363 6C308.667 47.5 163.6 137.8 18 167"
stroke="currentColor"
/>
<path
d="M352.5 14C347.333 14.6667 334.3 15.8 323.5 15C321.9 12.6 320.5 11 320 10.5V6L318.5 4.5L316.5 6V10C276.667 42 158 116.7 2 159.5"
stroke="currentColor"
/>
<path
d="M313 14V69.5L311.5 71.5V131.5L310 133V207L309 208.5V287"
stroke="currentColor"
/>
<path
d="M321 288.5V261.5H323V250.5H324.5V244H325.5V241L329.5 234.5L334.5 233.5H351L352 237.5L353.5 238.5L354 243L355 244.5V249L355.5 250.5L356 259.5V292.5L355.5 328.5L356.5 330.5V334V397.5"
stroke="currentColor"
/>
<path d="M214 440.5H262.5M420.5 440.5H622" stroke="currentColor" />
<path d="M404 475L427.059 474L453 475" stroke="currentColor" />
<path d="M585 454L594.882 453L606 454" stroke="currentColor" />
<path d="M543 450L552.882 449L564 450" stroke="currentColor" />
<path d="M339 511.5L379.5 508L424 511.5" stroke="currentColor" />
<path d="M339 577L393.318 573L453 577" stroke="currentColor" />
<path d="M453 703L547.818 695L652 703" stroke="currentColor" />
<path d="M460 536L505.741 533L556 536" stroke="currentColor" />
<path d="M508 467L531.347 465L557 467" stroke="currentColor" />
<path d="M315 455L338.347 453L364 455" stroke="currentColor" />
<path d="M449 453L464.247 451L481 453" stroke="currentColor" />
<path d="M252 487L275.347 484L301 487" stroke="currentColor" />
<path
d="M277.5 552.5L209.5 550L109.5 571L46 584.5L9.5 604H-22"
stroke="currentColor"
/>
<path
d="M355.5 318.5L117.5 293M113 286.5L355.5 313.5M373 315L616.5 346.5M373 321L567.5 346.5"
stroke="currentColor"
/>
<path d="M100.5 262L356 293M372.5 295L616 331.5" stroke="currentColor" />
<path
d="M372.5 330L388 328.5L401.5 329.5L411 328.5C413.167 328.5 417.6 328.5 418 328.5C418.4 328.5 423.833 328.167 426.5 328"
stroke="currentColor"
/>
<path
d="M513 440.5V433H568M568 433V346.5H616.5V320H622M568 433H622M591 433V364.5H595.5M604.5 433V364.5H595.5M595.5 364.5V433"
stroke="currentColor"
/>
<path
d="M323 165.5V208L328 209C334.5 209.167 347.6 209.4 348 209C348.4 208.6 350.833 208.5 352 208.5L356.5 204.5V199.5L356 198.5V195.5L357 195V170L355.5 168.5V164.5L355 163V160.5L351.5 156.5H331.5L329 159L326.5 159.5L325.5 161.5L324 162.5V165L323 165.5Z"
stroke="currentColor"
/>
<path
d="M329 159L327.5 162.5V166L326 166.5V171.5L325.5 172.5L326 208.5"
stroke="currentColor"
/>
<path
d="M333.5 92.5L326 93.5L324 95L322.5 96V98V100.5H321V103L319.5 104.5V132L324 134M333.5 92.5H354.5L357 95V97.5L357.5 99V129L356.5 130L356 132L353 133L349.5 134H324M333.5 92.5L327 94.5L326 97L325.5 101.5L324.5 102.5V105.5L324 107V134"
stroke="currentColor"
/>
<path d="M371 87C472.6 225.4 545 303 568.5 324.5" stroke="currentColor" />
<path d="M334.5 34C339 41.1667 350 58.2 358 69" stroke="currentColor" />
<path
d="M326 315.5L334.5 324V329.5L321.5 346M335.5 316.5L340 322L344 317.5M351.5 318L346 324V329.5L356.5 342M340 332.5L328 347.5H352.5L340 332.5Z"
stroke="currentColor"
/>
<path
d="M321 390L334.5 377L334.5 371.5L321 354.5M322 397L340 379L354.5 397M356.5 390L346 377L346 371.5L356.5 359.5M340 368.5L328 353.5L352.5 353.5L340 368.5Z"
stroke="currentColor"
/>
<path d="M325.5 315.5V341" stroke="currentColor" />
<path d="M325.5 360V385.5" stroke="currentColor" />
<path d="M355.5 310.5L123 283.5V270L356 297.5" stroke="currentColor" />
<path d="M372.5 311.5L616.5 344" stroke="currentColor" />
<path d="M86.5 149V222" stroke="currentColor" />
<path d="M122 137V265" stroke="currentColor" />
<path d="M155 124V268" stroke="currentColor" />
<path d="M188 109L188 273" stroke="currentColor" />
<path d="M220 93L220 276.5" stroke="currentColor" />
<path d="M251 77L251 280" stroke="currentColor" />
<path d="M281 60L281 284" stroke="currentColor" />
<path d="M391 46L391 298" stroke="currentColor" />
<path d="M417 82L417 302" stroke="currentColor" />
<path d="M441 115L441 305" stroke="currentColor" />
<path d="M465 147L465 309" stroke="currentColor" />
<path d="M488 178L488 312" stroke="currentColor" />
<path d="M511 208L511 316" stroke="currentColor" />
<path d="M532 235L532 319" stroke="currentColor" />
<path d="M553 261L553 322" stroke="currentColor" />
<path d="M571 282L571 325" stroke="currentColor" />
</svg>
);
}
82 changes: 82 additions & 0 deletions examples/with-cloudinary/components/Carousel.tsx
View file
Open in desktop
@@ -0,0 +1,82 @@
import { MotionConfig } from "framer-motion";
import Image from "next/image";
import { useRouter } from "next/router";
import useKeypress from "react-use-keypress";
import { ImageProps } from "../utils/imageType";
import { useLastViewedPhoto } from "../utils/useLastViewedPhoto";
import SharedModal from "./SharedModal";

export default function Carousel({
images,
index,
currentPhoto,
}: {
images: ImageProps[];
index: number;
currentPhoto: ImageProps;
}) {
const router = useRouter();
const [, setLastViewedPhoto] = useLastViewedPhoto();

function closeModal() {
setLastViewedPhoto(currentPhoto.id);
router.push("/");
}

function changePhotoId(newVal: number) {
router.push(
{
pathname: `/p/${newVal}`,
},
undefined,
{ shallow: true }
);
}

useKeypress("ArrowRight", () => {
if (index + 1 < images.length) {
changePhotoId(index + 1);
}
});

useKeypress("ArrowLeft", () => {
if (index > 0) {
changePhotoId(index - 1);
}
});

useKeypress("Escape", () => {
closeModal();
});

return (
<MotionConfig
transition={{
duration: 0.7,
ease: [0.32, 0.72, 0, 1],
}}
>
<div className="fixed inset-0 flex items-center justify-center">
<button
className="absolute inset-0 z-30 cursor-default bg-black backdrop-blur-2xl"
onClick={closeModal}
>
<Image
src={images[index].blurDataUrl}
className="pointer-events-none h-full w-full"
alt="blurred background"
fill
/>
</button>

<SharedModal
index={index}
images={images}
changePhotoId={changePhotoId}
currentPhoto={currentPhoto}
closeModal={closeModal}
/>
</div>
</MotionConfig>
);
}
71 changes: 71 additions & 0 deletions examples/with-cloudinary/components/Logo.tsx
View file
Open in desktop
@@ -0,0 +1,71 @@
export default function Logo() {
return (
<svg
aria-labelledby="conf-logo-title-header"
fill="none"
role="img"
viewBox="0 0 172 26"
width="172"
height="26"
xmlns="http://www.w3.org/2000/svg"
>
<title id="conf-logo-title-header">
Next.js Conf logo using a newly designed Next.js logo.
</title>
<path
d="M108.262 25.9669C108.032 25.9669 107.836 25.8884 107.672 25.7313C107.508 25.5742 107.427 25.3841 107.43 25.1588C107.427 24.9397 107.508 24.7516 107.672 24.5945C107.836 24.4374 108.032 24.3589 108.262 24.3589C108.483 24.3589 108.677 24.4374 108.841 24.5945C109.007 24.7516 109.09 24.9397 109.092 25.1588C109.09 25.3076 109.052 25.444 108.975 25.566C108.896 25.69 108.796 25.7871 108.671 25.8574C108.547 25.9297 108.411 25.9669 108.262 25.9669Z"
fill="currentColor"
></path>
<path
d="M113.624 18.3689H115.016V23.654C115.014 24.1398 114.907 24.5552 114.699 24.9045C114.488 25.2538 114.196 25.5205 113.822 25.7086C113.449 25.8946 113.013 25.9897 112.517 25.9897C112.064 25.9897 111.657 25.9091 111.295 25.752C110.933 25.5949 110.646 25.3593 110.435 25.0492C110.222 24.7392 110.118 24.3527 110.118 23.8897H111.512C111.514 24.0922 111.561 24.2679 111.651 24.4147C111.74 24.5614 111.864 24.673 112.021 24.7516C112.181 24.8301 112.364 24.8694 112.57 24.8694C112.794 24.8694 112.985 24.8239 113.141 24.7309C113.296 24.64 113.415 24.5035 113.498 24.3217C113.579 24.1418 113.622 23.9186 113.624 23.654V18.3689Z"
fill="currentColor"
></path>
<path
d="M120.744 20.4358C120.71 20.1155 120.561 19.8654 120.301 19.6876C120.039 19.5078 119.701 19.4189 119.286 19.4189C118.994 19.4189 118.743 19.4623 118.535 19.5471C118.326 19.6339 118.164 19.7496 118.053 19.8964C117.943 20.0431 117.887 20.2106 117.883 20.3986C117.883 20.5557 117.921 20.6921 117.996 20.8058C118.07 20.9216 118.171 21.0187 118.3 21.0973C118.428 21.1779 118.571 21.244 118.726 21.2977C118.884 21.3515 119.041 21.397 119.199 21.4342L119.925 21.6099C120.216 21.676 120.499 21.7649 120.77 21.8786C121.04 21.9902 121.285 22.1328 121.5 22.3043C121.715 22.4759 121.885 22.6826 122.011 22.9244C122.136 23.1662 122.2 23.4494 122.2 23.776C122.2 24.2162 122.085 24.6028 121.853 24.9376C121.621 25.2704 121.287 25.5308 120.848 25.7189C120.412 25.9049 119.884 26 119.263 26C118.662 26 118.139 25.9091 117.698 25.7272C117.255 25.5474 116.91 25.2828 116.661 24.9355C116.412 24.5883 116.278 24.1646 116.259 23.6664H117.638C117.658 23.9269 117.743 24.1439 117.887 24.3196C118.034 24.4932 118.226 24.6214 118.46 24.7082C118.696 24.7929 118.96 24.8363 119.252 24.8363C119.556 24.8363 119.824 24.7908 120.056 24.702C120.286 24.6131 120.467 24.4891 120.597 24.3279C120.729 24.1687 120.795 23.9806 120.797 23.7657C120.795 23.5693 120.736 23.406 120.621 23.2779C120.504 23.1497 120.342 23.0422 120.135 22.9554C119.927 22.8686 119.684 22.7901 119.407 22.7219L118.526 22.5028C117.89 22.3436 117.385 22.1018 117.017 21.7773C116.646 21.4528 116.463 21.0229 116.463 20.4834C116.463 20.0411 116.587 19.6525 116.836 19.3197C117.083 18.9869 117.421 18.7286 117.849 18.5446C118.279 18.3586 118.764 18.2676 119.305 18.2676C119.854 18.2676 120.335 18.3586 120.75 18.5446C121.165 18.7286 121.491 18.9849 121.727 19.3114C121.964 19.638 122.087 20.0121 122.094 20.4358H120.744Z"
fill="currentColor"
></path>
<path
d="M85.1237 0.0107485H107.428V4.1275H98.5798V25.7852H94.1559V4.1275H85.1237V0.0107485Z"
fill="currentColor"
></path>
<path
d="M48.4419 0.0107485V4.1275H30.5637V10.7501H44.9415V14.8668H30.5637V21.6684H48.4419V25.7852H26.1397V4.1275H26.1379V0.0107485H48.4419Z"
fill="currentColor"
></path>
<path
d="M59.5792 0.0214983H53.7893L74.5265 25.7959H80.3329L69.9632 12.9176L80.3163 0.0411626L74.5265 0.0501099L67.0645 9.31767L59.5792 0.0214983Z"
fill="currentColor"
></path>
<path
d="M65.5201 18.4323L62.6206 14.8275L53.7727 25.8156H59.5791L65.5201 18.4323Z"
fill="currentColor"
></path>
<path
clipRule="evenodd"
d="M26.2948 25.7852L5.52992 0H0V25.7744H4.42393V5.50928L20.7372 25.7852H26.2948Z"
fill="currentColor"
fillRule="evenodd"
></path>
<path
d="M137.405 16.3464C137.8 16.3464 138.122 16.2892 138.372 16.1748C138.632 16.05 138.83 15.8888 138.965 15.6912C139.11 15.4832 139.209 15.2492 139.261 14.9892C139.313 14.7188 139.339 14.4432 139.339 14.1624V13.8816H141.398V14.1624C141.398 15.4624 141.055 16.466 140.369 17.1732C139.693 17.87 138.705 18.2184 137.405 18.2184C136.157 18.2184 135.169 17.8388 134.441 17.0796C133.713 16.3204 133.349 15.2128 133.349 13.7568V11.3232C133.349 10.6264 133.442 10.0024 133.63 9.4512C133.817 8.8896 134.087 8.4216 134.441 8.0472C134.794 7.6624 135.221 7.3712 135.72 7.1736C136.219 6.9656 136.781 6.8616 137.405 6.8616C138.05 6.8616 138.622 6.9552 139.121 7.1424C139.62 7.3296 140.036 7.6 140.369 7.9536C140.712 8.3072 140.967 8.7336 141.133 9.2328C141.31 9.732 141.398 10.2936 141.398 10.9176V11.1984H139.339V10.9176C139.339 10.6576 139.308 10.3976 139.246 10.1376C139.183 9.8776 139.079 9.6436 138.934 9.4356C138.788 9.2276 138.59 9.0612 138.341 8.9364C138.091 8.8012 137.779 8.7336 137.405 8.7336C137.062 8.7336 136.765 8.8012 136.516 8.9364C136.266 9.0612 136.058 9.238 135.892 9.4668C135.725 9.6852 135.6 9.9452 135.517 10.2468C135.444 10.538 135.408 10.8448 135.408 11.1672V13.9128C135.408 14.2664 135.444 14.594 135.517 14.8956C135.59 15.1868 135.704 15.4416 135.86 15.66C136.016 15.8784 136.219 16.05 136.469 16.1748C136.729 16.2892 137.041 16.3464 137.405 16.3464ZM142.745 11.3232C142.745 9.9088 143.098 8.8116 143.806 8.0316C144.523 7.2516 145.511 6.8616 146.77 6.8616C148.028 6.8616 149.011 7.2516 149.718 8.0316C150.436 8.8116 150.794 9.9088 150.794 11.3232V13.7568C150.794 15.2128 150.436 16.3204 149.718 17.0796C149.011 17.8388 148.028 18.2184 146.77 18.2184C145.511 18.2184 144.523 17.8388 143.806 17.0796C143.098 16.3204 142.745 15.2128 142.745 13.7568V11.3232ZM146.77 16.3464C147.144 16.3464 147.456 16.2892 147.706 16.1748C147.955 16.05 148.158 15.8784 148.314 15.66C148.47 15.4416 148.579 15.1816 148.642 14.88C148.704 14.5784 148.735 14.2456 148.735 13.8816V11.1984C148.735 10.8552 148.699 10.5328 148.626 10.2312C148.553 9.9296 148.439 9.6696 148.283 9.4512C148.127 9.2328 147.924 9.0612 147.674 8.9364C147.425 8.8012 147.123 8.7336 146.77 8.7336C146.416 8.7336 146.114 8.8012 145.865 8.9364C145.615 9.0612 145.412 9.2328 145.256 9.4512C145.1 9.6696 144.986 9.9296 144.913 10.2312C144.84 10.5328 144.804 10.8552 144.804 11.1984V13.8816C144.804 14.2456 144.835 14.5784 144.898 14.88C144.96 15.1816 145.069 15.4416 145.225 15.66C145.381 15.8784 145.584 16.05 145.834 16.1748C146.083 16.2892 146.395 16.3464 146.77 16.3464ZM157.648 16.9704H157.928V7.08H159.988V18H155.963L154.684 8.1096H154.403V18H152.344V7.08H156.368L157.648 16.9704ZM162.161 7.08H169.15V9.0456H164.22V11.5416H169.056V13.5072H164.22V18H162.161V7.08Z"
fill="currentColor"
></path>
<line
stroke="currentColor"
strokeWidth="1.3"
x1="132.6"
x2="171.6"
y1="25.35"
y2="25.35"
></line>
<line
stroke="currentColor"
strokeWidth="1.3"
x1="132.6"
x2="171.6"
y1="0.65"
y2="0.65"
></line>
</svg>
);
}