├── .all-contributorsrc
├── .github
    ├── ISSUE_TEMPLATE
    │   ├── bug_report.md
    │   └── feature_request.md
    ├── pull_request_template.md
    └── workflows
    │   └── test_release.yml
├── .gitignore
├── .nvmrc
├── .releaserc
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── LICENSE
├── README.md
├── demo
    ├── .eslintrc.json
    ├── .gitignore
    ├── .prettierrc.js
    ├── README.md
    ├── app
    │   ├── app
    │   │   └── page.tsx
    │   └── layout.tsx
    ├── data
    │   └── images.json
    ├── next-env.d.ts
    ├── next.config.js
    ├── package.json
    ├── pages
    │   ├── _app.tsx
    │   └── index.tsx
    ├── public
    │   └── images
    │   │   ├── beach.jpeg
    │   │   ├── city.jpeg
    │   │   ├── earth.jpeg
    │   │   ├── galaxy.jpeg
    │   │   ├── iceberg.jpeg
    │   │   ├── jungle.jpeg
    │   │   ├── mountain.jpeg
    │   │   ├── test
    │   │       └── beach.jpeg
    │   │   └── waterfall.jpeg
    ├── styles
    │   ├── Home.module.css
    │   └── globals.css
    └── tsconfig.json
├── docs
    ├── .github
    │   └── screenshot.png
    ├── .gitignore
    ├── LICENSE
    ├── README.md
    ├── next-env.d.ts
    ├── next.config.js
    ├── package.json
    ├── pnpm-lock.yaml
    ├── postcss.config.js
    ├── public
    │   ├── android-chrome-192x192.png
    │   ├── android-chrome-512x512.png
    │   ├── apple-touch-icon.png
    │   ├── browserconfig.xml
    │   ├── favicon-1024x1024.png
    │   ├── favicon-16x16.png
    │   ├── favicon-32x32.png
    │   ├── favicon.ico
    │   ├── images
    │   │   ├── cloudinary-logo-dark.svg
    │   │   ├── cloudinary-logo-light.svg
    │   │   ├── netlify-cloudinary-logos.svg
    │   │   ├── netlify-logo-dark.svg
    │   │   └── netlify-logo-light.svg
    │   ├── screenshots
    │   │   └── netlify-cloudinary-install-website.png
    │   └── site.webmanifest
    ├── src
    │   ├── components
    │   │   ├── Button
    │   │   │   ├── Button.tsx
    │   │   │   └── index.ts
    │   │   └── OgImage
    │   │   │   ├── OgImage.tsx
    │   │   │   └── index.ts
    │   ├── pages
    │   │   ├── _app.mdx
    │   │   ├── _meta.json
    │   │   ├── configuration.mdx
    │   │   ├── guides
    │   │   │   ├── _meta.json
    │   │   │   ├── delivery-type.mdx
    │   │   │   └── images-path.mdx
    │   │   ├── index.mdx
    │   │   ├── installation.mdx
    │   │   └── troubleshooting
    │   │   │   └── 401-error.mdx
    │   └── styles
    │   │   └── globals.css
    ├── tailwind.config.js
    ├── theme.config.tsx
    └── tsconfig.json
├── netlify-plugin-cloudinary
    ├── .eslintignore
    ├── .eslintrc.cjs
    ├── .npmignore
    ├── .prettierignore
    ├── .prettierrc
    ├── manifest.yml
    ├── package.json
    ├── src
    │   ├── data
    │   │   ├── analytics.ts
    │   │   ├── cloudinary.ts
    │   │   └── errors.ts
    │   ├── index.ts
    │   ├── lib
    │   │   ├── cloudinary.ts
    │   │   └── util.ts
    │   └── types
    │   │   └── integration.ts
    ├── tests
    │   ├── assets
    │   │   └── stranger-things-lucas.jpeg
    │   ├── images
    │   │   ├── stranger-things-dustin.jpeg
    │   │   └── stranger-things-eleven.jpeg
    │   ├── lib
    │   │   ├── cloudinary-cname.test.js
    │   │   ├── cloudinary-privatecdn.test.js
    │   │   ├── cloudinary.test.js
    │   │   └── util.test.js
    │   ├── mocks
    │   │   ├── demo.json
    │   │   └── html
    │   │   │   ├── test-0.html
    │   │   │   └── test-1.html
    │   ├── on-build.test.js
    │   └── on-post-build.test.js
    └── tsconfig.json
├── netlify.toml
├── package.json
├── pnpm-lock.yaml
└── pnpm-workspace.yaml


/.all-contributorsrc:
--------------------------------------------------------------------------------
  1 | {
  2 |   "files": [
  3 |     "README.md"
  4 |   ],
  5 |   "imageSize": 100,
  6 |   "commit": false,
  7 |   "commitConvention": "angular",
  8 |   "contributors": [
  9 |     {
 10 |       "login": "colbyfayock",
 11 |       "name": "Colby Fayock",
 12 |       "avatar_url": "https://avatars.githubusercontent.com/u/1045274?v=4",
 13 |       "profile": "https://colbyfayock.com/newsletter",
 14 |       "contributions": [
 15 |         "code",
 16 |         "doc",
 17 |         "example"
 18 |       ]
 19 |     },
 20 |     {
 21 |       "login": "Chuloo",
 22 |       "name": "William",
 23 |       "avatar_url": "https://avatars.githubusercontent.com/u/22301208?v=4",
 24 |       "profile": "https://github.com/Chuloo",
 25 |       "contributions": [
 26 |         "code"
 27 |       ]
 28 |     },
 29 |     {
 30 |       "login": "ascorbic",
 31 |       "name": "Matt Kane",
 32 |       "avatar_url": "https://avatars.githubusercontent.com/u/213306?v=4",
 33 |       "profile": "http://mk.gg",
 34 |       "contributions": [
 35 |         "review"
 36 |       ]
 37 |     },
 38 |     {
 39 |       "login": "donno2048",
 40 |       "name": "Elisha Hollander",
 41 |       "avatar_url": "https://avatars.githubusercontent.com/u/61805754?v=4",
 42 |       "profile": "https://donno2048.github.io/Portfolio/",
 43 |       "contributions": [
 44 |         "code"
 45 |       ]
 46 |     },
 47 |     {
 48 |       "login": "Kunal-8789",
 49 |       "name": "Kunal Kaushik",
 50 |       "avatar_url": "https://avatars.githubusercontent.com/u/76679262?v=4",
 51 |       "profile": "https://github.com/Kunal-8789",
 52 |       "contributions": [
 53 |         "tool"
 54 |       ]
 55 |     },
 56 |     {
 57 |       "login": "shikhar13012001",
 58 |       "name": "Shikhar",
 59 |       "avatar_url": "https://avatars.githubusercontent.com/u/75368010?v=4",
 60 |       "profile": "https://portfolio-shikhar13012001.vercel.app/",
 61 |       "contributions": [
 62 |         "code",
 63 |         "test"
 64 |       ]
 65 |     },
 66 |     {
 67 |       "login": "developer-diganta",
 68 |       "name": "Diganta Kr Banik",
 69 |       "avatar_url": "https://avatars.githubusercontent.com/u/65999534?v=4",
 70 |       "profile": "https://digantakrbanik.codes/",
 71 |       "contributions": [
 72 |         "code",
 73 |         "doc",
 74 |         "test"
 75 |       ]
 76 |     },
 77 |     {
 78 |       "login": "3t8",
 79 |       "name": "3t8",
 80 |       "avatar_url": "https://avatars.githubusercontent.com/u/62209650?v=4",
 81 |       "profile": "https://github.com/3t8",
 82 |       "contributions": [
 83 |         "doc"
 84 |       ]
 85 |     },
 86 |     {
 87 |       "login": "Abubakrce19",
 88 |       "name": "Abubakrce19",
 89 |       "avatar_url": "https://avatars.githubusercontent.com/u/104122959?v=4",
 90 |       "profile": "https://github.com/Abubakrce19",
 91 |       "contributions": [
 92 |         "doc"
 93 |       ]
 94 |     },
 95 |     {
 96 |       "login": "ericapisani",
 97 |       "name": "Erica Pisani",
 98 |       "avatar_url": "https://avatars.githubusercontent.com/u/5655473?v=4",
 99 |       "profile": "http://ericapisani.dev",
100 |       "contributions": [
101 |         "code"
102 |       ]
103 |     },
104 |     {
105 |       "login": "matiasfha",
106 |       "name": "Matías Hernández Arellano",
107 |       "avatar_url": "https://avatars.githubusercontent.com/u/282006?v=4",
108 |       "profile": "https://matiashernandez.dev",
109 |       "contributions": [
110 |         "code"
111 |       ]
112 |     },
113 |     {
114 |       "login": "kcoderhtml",
115 |       "name": "Kieran Klukas",
116 |       "avatar_url": "https://avatars.githubusercontent.com/u/92754843?v=4",
117 |       "profile": "https://github.com/kcoderhtml",
118 |       "contributions": [
119 |         "code"
120 |       ]
121 |     },
122 |     {
123 |       "login": "gshel",
124 |       "name": "Gretchen Shelby-Dormer",
125 |       "avatar_url": "https://avatars.githubusercontent.com/u/35184207?v=4",
126 |       "profile": "https://gshel.org",
127 |       "contributions": [
128 |         "code"
129 |       ]
130 |     }
131 |   ],
132 |   "contributorsPerLine": 7,
133 |   "skipCi": true,
134 |   "repoType": "github",
135 |   "repoHost": "https://github.com",
136 |   "projectName": "netlify-plugin-cloudinary",
137 |   "projectOwner": "cloudinary-community",
138 |   "commitType": "docs"
139 | }
140 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/bug_report.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: Bug report
 3 | about: Create a report to help us improve
 4 | title: '[Bug] '
 5 | labels: 'Type: Bug'
 6 | ---
 7 | 
 8 | # **Bug Report**
 9 | 
10 | ## **Describe the bug**
11 | 
12 | <!-- A clear and concise description of what the bug is. -->
13 | 
14 | ## **Is this a regression?**
15 | 
16 | <!-- Did this behaviour used to work in the previous version? -->
17 | <!-- Yes, the previous version in which this bug was not present was: ... -->
18 | 
19 | ## **Steps To Reproduce the error**
20 | 
21 | <!-- Write the steps to reproduce the error (add or remove as many steps as needed)-->
22 | 
23 | 1.
24 | 2.
25 | 3.
26 | 4.
27 | 
28 | ## **Expected behaviour**
29 | 
30 | <!-- A clear and concise description of what you expected to happen. -->
31 | 
32 | ## **CodeSandbox or Live Example of Bug**
33 | 
34 | <!-- If applicable, show the bug. -->
35 | 
36 | ## **Screenshot or Video Recording**
37 | 
38 | <!-- If applicable, add screenshots or videos to help explain your problem. -->
39 | 
40 | 
41 | ### **Your environment**
42 | 
43 | <!-- use all the applicable bulleted list element for this specific issue,
44 | and remove all the bulleted list elements that are not relevant for this issue. -->
45 | 
46 | - OS: <!--[e.g. Ubuntu 5.4.0-26-generic x86_64 / Windows 1904 ...]-->
47 | - Node version:
48 | - Npm version:
49 | - Browser name and version:
50 | 
51 | 
52 | ## **Additional context**
53 | 
54 | <!-- Add any other context or additional information about the problem here.-->
55 | 


--------------------------------------------------------------------------------
/.github/ISSUE_TEMPLATE/feature_request.md:
--------------------------------------------------------------------------------
 1 | ---
 2 | name: "Feature Request"
 3 | about: "Suggest an idea or possible new feature for this project."
 4 | title: "[Feature] "
 5 | labels: "Type: Feature"
 6 | ---
 7 | 
 8 | # **Feature Request**
 9 | 
10 | ## **Is your feature request related to a problem? Please describe.**
11 | 
12 | <!-- A clear and concise description of what the problem is. Ex. I'm always frustrated when [...] -->
13 | 
14 | ## **Describe the solution you'd like**
15 | 
16 | <!-- A clear and concise description of what you want to happen. -->
17 | <!-- Code examples would be very helpful! -->
18 | 
19 | ## **Describe alternatives you've considered**
20 | 
21 | <!-- A clear and concise description of any alternative solutions or features you've considered. -->
22 | 
23 | ## **Additional context**
24 | 
25 | <!-- Add any other context or additional information about the problem here.-->
26 | 


--------------------------------------------------------------------------------
/.github/pull_request_template.md:
--------------------------------------------------------------------------------
 1 | # Description
 2 | 
 3 | <!-- Include a summary of the change made and also list the dependencies that are required if any -->
 4 | 
 5 | ## Issue Ticket Number
 6 | 
 7 | <!-- Specifiy which issue this fixes by referencing the issue number (`#11`) or issue URL. -->
 8 | <!-- Example: Fixes https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/1 -->
 9 | 
10 | Fixes 
11 | 
12 | ## Type of change
13 | 
14 | <!-- Please select all options that are applicable. -->
15 | 
16 | - [ ] Bug fix (non-breaking change which fixes an issue)
17 | - [ ] New feature (non-breaking change which adds functionality)
18 | - [ ] Breaking change (fix or feature that would cause existing functionality to not work as expected)
19 | - [ ] This change requires a documentation update
20 | 
21 | 
22 | # Checklist
23 | 
24 | <!-- These must all be followed and checked. -->
25 | 
26 | - [ ] I have followed the contributing guidelines of this project as mentioned in [CONTRIBUTING.md](/CONTRIBUTING.md)
27 | - [ ] I have created an [issue](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues) ticket for this PR
28 | - [ ] I have checked to ensure there aren't other open [Pull Requests](https://github.com/colbyfayock/netlify-plugin-cloudinary/pulls) for the same update/change?
29 | - [ ] I have performed a self-review of my own code
30 | - [ ] I have run tests locally to ensure they all pass
31 | - [ ] I have commented my code, particularly in hard-to-understand areas
32 | - [ ] I have made corresponding changes needed to the documentation
33 | 


--------------------------------------------------------------------------------
/.github/workflows/test_release.yml:
--------------------------------------------------------------------------------
 1 | name: Test & Release
 2 | on: [push, pull_request]
 3 | env:
 4 |   CI: false
 5 | jobs:
 6 |   tests:
 7 |     name: Test
 8 |     runs-on: ubuntu-latest
 9 |     strategy:
10 |       matrix:
11 |         node: [ '16', '18', '20' ]
12 |     steps:
13 |       - uses: actions/checkout@v2
14 |       - uses: pnpm/action-setup@v2
15 |         with:
16 |           version: 8
17 |       - uses: actions/setup-node@v3
18 |         with:
19 |           node-version: ${{ matrix.node }}
20 |           cache: 'pnpm'
21 |       - run: pnpm install --frozen-lockfile
22 |       - run: pnpm test
23 |         env:
24 |           CLOUDINARY_CLOUD_NAME: ${{ secrets.CLOUDINARY_CLOUD_NAME }}
25 |           CLOUDINARY_API_KEY: ${{ secrets.CLOUDINARY_API_KEY }}
26 |           CLOUDINARY_API_SECRET: ${{ secrets.CLOUDINARY_API_SECRET }}
27 |           NETLIFY_HOST: ${{ secrets.NETLIFY_HOST }} # Used to test functionality outside of the Netlify environment
28 |   release:
29 |     name: Release
30 |     if: github.event_name == 'push' && github.ref_name == 'main'
31 |     needs: tests
32 |     runs-on: ubuntu-latest
33 |     steps:
34 |       - uses: actions/checkout@v2
35 |       - uses: pnpm/action-setup@v2
36 |         with:
37 |           version: 8
38 |       - uses: actions/setup-node@v3
39 |         with:
40 |           node-version: '20'
41 |           cache: 'pnpm'  
42 |           # https://github.com/pnpm/pnpm/issues/3141
43 |           registry-url: 'https://registry.npmjs.org'
44 |       - run: pnpm install --frozen-lockfile
45 |       - run: pnpm --filter netlify-plugin-cloudinary build
46 |       # Do not store semantic release dependencies in package.json to avoid lower node versions from failing tests
47 |       - run: pnpm install -w @semantic-release/changelog @semantic-release/git semantic-release
48 |       - run: npx semantic-release
49 |         env:
50 |           GH_TOKEN: ${{ secrets.GITHUB_TOKEN }}
51 |           NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
52 |           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
53 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | node_modules
2 | .env
3 | # Local Netlify folder
4 | .netlify
5 | _next
6 | dist
7 | 


--------------------------------------------------------------------------------
/.nvmrc:
--------------------------------------------------------------------------------
1 | 18


--------------------------------------------------------------------------------
/.releaserc:
--------------------------------------------------------------------------------
 1 | {
 2 |   "branches": [
 3 |     "main",
 4 |     "next",
 5 |     "next-major",
 6 |     {
 7 |       "name": "beta",
 8 |       "prerelease": true
 9 |     },
10 |     {
11 |       "name": "alpha",
12 |       "prerelease": true
13 |     }
14 |   ],
15 |   "plugins": [
16 |     [
17 |       "@semantic-release/commit-analyzer",
18 |       {
19 |         "preset": "angular",
20 |         "releaseRules": [
21 |           {
22 |             "type": "docs",
23 |             "scope": "README",
24 |             "release": "patch"
25 |           }
26 |         ],
27 |         "parserOpts": {
28 |           "noteKeywords": [
29 |             "BREAKING CHANGE",
30 |             "BREAKING CHANGES"
31 |           ]
32 |         }
33 |       }
34 |     ],
35 |     "@semantic-release/release-notes-generator",
36 |     [
37 |       "@semantic-release/changelog",
38 |       {
39 |         "changelogFile": "CHANGELOG.md"
40 |       }
41 |     ],
42 |     [
43 |       "@semantic-release/npm",
44 |       {
45 |         "pkgRoot": "netlify-plugin-cloudinary"
46 |       }
47 |     ],
48 |     [
49 |       "@semantic-release/git",
50 |       {
51 |         "assets": [
52 |           "netlify-plugin-cloudinary/package.json",
53 |           "CHANGELOG.md"
54 |         ]
55 |       }
56 |     ],
57 |     "@semantic-release/github"
58 |   ]
59 | }
60 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # [1.17.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.16.0...v1.17.0) (2024-02-13)
  2 | 
  3 | 
  4 | ### Features
  5 | 
  6 | * Adds Analytics Code to URLs ([#87](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/87)) ([4940fb0](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/4940fb03386b63aa1e9a44bc9db5d04a183983bf)), closes [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#70](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/70)
  7 | 
  8 | # [1.16.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.15.0...v1.16.0) (2023-12-04)
  9 | 
 10 | 
 11 | ### Features
 12 | 
 13 | * Consolidate onBuild tests + verify imagesPath for multiple operating systems ([#101](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/101)) ([90b20bd](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/90b20bde822c8190fe760f86dd9fee8591a2e611)), closes [#100](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/100) [#100](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/100)
 14 | 
 15 | # [1.15.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.14.0...v1.15.0) (2023-11-13)
 16 | 
 17 | 
 18 | ### Features
 19 | 
 20 | * Get loadingStrategy value from netlify.toml inputs, default to 'lazy' if not provided ([#98](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/98)) ([8d68b05](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/8d68b05b35edaf641860822a6dad13989a582854))
 21 | 
 22 | # [1.14.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.13.1...v1.14.0) (2023-11-10)
 23 | 
 24 | 
 25 | ### Features
 26 | 
 27 | * Retry failed requests ([bda0cd9](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/bda0cd94da2bc870a943562d43cc47fc17a3ad15)), closes [#82](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/82)
 28 | 
 29 | ## [1.13.1](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.13.0...v1.13.1) (2023-11-10)
 30 | 
 31 | 
 32 | ### Bug Fixes
 33 | 
 34 | * Fixes uncaught errors in concurrency loop ([#95](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/95)) ([2c6a33b](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/2c6a33b45da29a4b6a01e3b1630905989df69177)), closes [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#94](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/94)
 35 | 
 36 | # [1.13.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.12.0...v1.13.0) (2023-11-07)
 37 | 
 38 | 
 39 | ### Features
 40 | 
 41 | * Concurrency ([#89](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/89)) ([6a8d70f](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/6a8d70f923384f4a2ddae66967b8010cff551b01)), closes [#57](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/57)
 42 | 
 43 | # [1.12.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.11.0...v1.12.0) (2023-10-04)
 44 | 
 45 | 
 46 | ### Features
 47 | 
 48 | * throw and catch error when calls to cloudinary upload fails ([#72](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/72)) ([c90c46f](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/c90c46ffc9a7ed4bb3c00fa87606f2130cef1596)), closes [#58](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/58)
 49 | 
 50 | # [1.11.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.10.2...v1.11.0) (2023-09-20)
 51 | 
 52 | 
 53 | ### Features
 54 | 
 55 | * Max Size ([#78](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/78)) ([57cb8fb](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/57cb8fba2d82ecc234f950dab459574d23dfafae)), closes [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#62](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/62)
 56 | 
 57 | ## [1.10.2](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.10.1...v1.10.2) (2023-09-19)
 58 | 
 59 | 
 60 | ### Bug Fixes
 61 | 
 62 | * Fixes Netlify URL ([#84](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/84)) ([3a83908](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/3a83908fc921bfec4b2125ed2abd75c243c8d479)), closes [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#83](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/83)
 63 | 
 64 | ## [1.10.1](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.10.0...v1.10.1) (2023-09-19)
 65 | 
 66 | 
 67 | ### Bug Fixes
 68 | 
 69 | * Fixes missing API Key and Secret failing Fetch builds ([#81](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/81)) ([cdd5981](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/cdd598177824c5a3f753cb045a7fe4d6a29d9207)), closes [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#80](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/80)
 70 | 
 71 | # [1.10.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.9.0...v1.10.0) (2023-09-15)
 72 | 
 73 | 
 74 | ### Features
 75 | 
 76 | * Configure Multiple Image Paths ([#75](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/75)) ([e10cffa](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/e10cffa3ff269275a2a6ef3ad39cbd5756711ebc)), closes [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#61](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/61)
 77 | 
 78 | # [1.9.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.8.0...v1.9.0) (2023-09-15)
 79 | 
 80 | 
 81 | ### Features
 82 | 
 83 | * CNAME & Private CDN ([#71](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/71)) ([17fff6b](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/17fff6b87cf69d1e2d37c1c7ddd211afd8aeba33)), closes [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#51](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/51)
 84 | 
 85 | # [1.8.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.7.1...v1.8.0) (2023-09-06)
 86 | 
 87 | 
 88 | ### Bug Fixes
 89 | 
 90 | * cleaning readme, forcing deploy ([d9558d4](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/d9558d4c6d633490517bde2f798f3977e82d16d8))
 91 | * release ([1ce13df](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/1ce13df6402c73308257918013a72a942cd84753))
 92 | * workspace root for release ([589d257](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/589d2575fea20425a942a9ea30a78d06d2a5a2e8))
 93 | 
 94 | 
 95 | ### Features
 96 | 
 97 | * pnpm Workspace ([#64](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/64)) ([02f92ac](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/02f92acf001149c9cf229bfb93e455ebd9a68b72))
 98 | 
 99 | ## [1.7.1](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.7.0...v1.7.1) (2023-09-06)
100 | 
101 | 
102 | ### Bug Fixes
103 | 
104 | * removing postinstall to avoid breaking package installations ([a5a71cb](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/a5a71cbf99b9f0e085a91ec4d63877c27d2d4dd6))
105 | 
106 | # [1.7.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.6.0...v1.7.0) (2023-09-06)
107 | 
108 | 
109 | ### Features
110 | 
111 | * migrate to typescript ([#63](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/63)) ([f9b960f](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/f9b960f45cce8d54b0369a53af4613cb65025d03))
112 | 
113 | # [1.6.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.5.1...v1.6.0) (2023-08-31)
114 | 
115 | 
116 | ### Features
117 | 
118 | * Replace preload tags for related image source if exists ([#55](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/55)) ([aaa030f](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/aaa030f2ee71225b1a4b833e9a573ff42d940461)), closes [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#54](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/54)
119 | 
120 | ## [1.5.1](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.5.0...v1.5.1) (2023-08-29)
121 | 
122 | 
123 | ### Bug Fixes
124 | 
125 | * Fixes missing Netlify Host check ([#50](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/50)) ([646e1f3](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/646e1f3355530fc5a6b1458a5ef24e409f83c1be)), closes [#47](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/47) [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#45](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/45)
126 | 
127 | # [1.5.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.4.0...v1.5.0) (2023-08-29)
128 | 
129 | 
130 | ### Features
131 | 
132 | * updating package-lock ([2a89820](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/2a89820a35a6a2e72395640085c4bf83da11256c))
133 | * Use Netlify Host with Production Context ([#47](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/47)) ([896bcda](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/896bcda6f8ceeca2d33bb9463d6a0078db729a6c)), closes [#11](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/11) [#45](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/45)
134 | 
135 | # [1.4.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.3.0...v1.4.0) (2023-08-29)
136 | 
137 | 
138 | ### Features
139 | 
140 | * Yarn to npm ([#49](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/49)) ([c7d5126](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/c7d5126e2adbb7924b99e95d5fa8a83e83e1c6b5))
141 | 
142 | # [1.3.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.2.0...v1.3.0) (2023-08-29)
143 | 
144 | 
145 | ### Features
146 | 
147 | * Package updates, Remove fs-extra, Fix Jest ([#48](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/48)) ([65f8600](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/65f8600e65cbb8dd19feaa597cb8ba32a5d6e57e))
148 | 
149 | # [1.2.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.1.0...v1.2.0) (2022-10-14)
150 | 
151 | 
152 | ### Bug Fixes
153 | 
154 | * Fixes asset not defined error when using upload delivery type ([#36](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/36)) ([86edaab](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/86edaab087eb9d185231e83c67cffa72db2db3d1))
155 | 
156 | 
157 | ### Features
158 | 
159 | * added lazy loading to images ([#33](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/33)) ([af01791](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/af01791786ce8db42435e50e2b1f223e4db4a924))
160 | 
161 | # [1.1.0](https://github.com/colbyfayock/netlify-plugin-cloudinary/compare/v1.0.3...v1.1.0) (2022-10-13)
162 | 
163 | 
164 | ### Features
165 | 
166 | * Add srcset support ([#30](https://github.com/colbyfayock/netlify-plugin-cloudinary/issues/30)) ([e51e298](https://github.com/colbyfayock/netlify-plugin-cloudinary/commit/e51e2981d274f7281d3de848668be65e6777a56e))
167 | 


--------------------------------------------------------------------------------
/CODE_OF_CONDUCT.md:
--------------------------------------------------------------------------------
  1 | # Contributor Covenant Code of Conduct
  2 | 
  3 | ## Our Pledge
  4 | 
  5 | We as members, contributors, and leaders pledge to make participation in our
  6 | community a harassment-free experience for everyone, regardless of age, body
  7 | size, visible or invisible disability, ethnicity, sex characteristics, gender
  8 | identity and expression, level of experience, education, socio-economic status,
  9 | nationality, personal appearance, race, religion, or sexual identity
 10 | and orientation.
 11 | 
 12 | We pledge to act and interact in ways that contribute to an open, welcoming,
 13 | diverse, inclusive, and healthy community.
 14 | 
 15 | ## Our Standards
 16 | 
 17 | Examples of behavior that contributes to a positive environment for our
 18 | community include:
 19 | 
 20 | * Demonstrating empathy and kindness toward other people
 21 | * Being respectful of differing opinions, viewpoints, and experiences
 22 | * Giving and gracefully accepting constructive feedback
 23 | * Accepting responsibility and apologizing to those affected by our mistakes,
 24 |   and learning from the experience
 25 | * Focusing on what is best not just for us as individuals, but for the
 26 |   overall community
 27 | 
 28 | Examples of unacceptable behavior include:
 29 | 
 30 | * The use of sexualized language or imagery, and sexual attention or
 31 |   advances of any kind
 32 | * Trolling, insulting or derogatory comments, and personal or political attacks
 33 | * Public or private harassment
 34 | * Publishing others' private information, such as a physical or email
 35 |   address, without their explicit permission
 36 | * Other conduct which could reasonably be considered inappropriate in a
 37 |   professional setting
 38 | 
 39 | ## Enforcement Responsibilities
 40 | 
 41 | Community leaders are responsible for clarifying and enforcing our standards of
 42 | acceptable behavior and will take appropriate and fair corrective action in
 43 | response to any behavior that they deem inappropriate, threatening, offensive,
 44 | or harmful.
 45 | 
 46 | Community leaders have the right and responsibility to remove, edit, or reject
 47 | comments, commits, code, wiki edits, issues, and other contributions that are
 48 | not aligned to this Code of Conduct, and will communicate reasons for moderation
 49 | decisions when appropriate.
 50 | 
 51 | ## Scope
 52 | 
 53 | This Code of Conduct applies within all community spaces, and also applies when
 54 | an individual is officially representing the community in public spaces.
 55 | Examples of representing our community include using an official e-mail address,
 56 | posting via an official social media account, or acting as an appointed
 57 | representative at an online or offline event.
 58 | 
 59 | ## Enforcement
 60 | 
 61 | Instances of abusive, harassing, or otherwise unacceptable behavior may be
 62 | reported to the community leaders responsible for enforcement at
 63 | hello@colbyfayock.com.
 64 | All complaints will be reviewed and investigated promptly and fairly.
 65 | 
 66 | All community leaders are obligated to respect the privacy and security of the
 67 | reporter of any incident.
 68 | 
 69 | ## Enforcement Guidelines
 70 | 
 71 | Community leaders will follow these Community Impact Guidelines in determining
 72 | the consequences for any action they deem in violation of this Code of Conduct:
 73 | 
 74 | ### 1. Correction
 75 | 
 76 | **Community Impact**: Use of inappropriate language or other behavior deemed
 77 | unprofessional or unwelcome in the community.
 78 | 
 79 | **Consequence**: A private, written warning from community leaders, providing
 80 | clarity around the nature of the violation and an explanation of why the
 81 | behavior was inappropriate. A public apology may be requested.
 82 | 
 83 | ### 2. Warning
 84 | 
 85 | **Community Impact**: A violation through a single incident or series
 86 | of actions.
 87 | 
 88 | **Consequence**: A warning with consequences for continued behavior. No
 89 | interaction with the people involved, including unsolicited interaction with
 90 | those enforcing the Code of Conduct, for a specified period of time. This
 91 | includes avoiding interactions in community spaces as well as external channels
 92 | like social media. Violating these terms may lead to a temporary or
 93 | permanent ban.
 94 | 
 95 | ### 3. Temporary Ban
 96 | 
 97 | **Community Impact**: A serious violation of community standards, including
 98 | sustained inappropriate behavior.
 99 | 
100 | **Consequence**: A temporary ban from any sort of interaction or public
101 | communication with the community for a specified period of time. No public or
102 | private interaction with the people involved, including unsolicited interaction
103 | with those enforcing the Code of Conduct, is allowed during this period.
104 | Violating these terms may lead to a permanent ban.
105 | 
106 | ### 4. Permanent Ban
107 | 
108 | **Community Impact**: Demonstrating a pattern of violation of community
109 | standards, including sustained inappropriate behavior,  harassment of an
110 | individual, or aggression toward or disparagement of classes of individuals.
111 | 
112 | **Consequence**: A permanent ban from any sort of public interaction within
113 | the community.
114 | 
115 | ## Attribution
116 | 
117 | This Code of Conduct is adapted from the [Contributor Covenant][homepage],
118 | version 2.0, available at
119 | https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
120 | 
121 | Community Impact Guidelines were inspired by [Mozilla's code of conduct
122 | enforcement ladder](https://github.com/mozilla/diversity).
123 | 
124 | [homepage]: https://www.contributor-covenant.org
125 | 
126 | For answers to common questions about this code of conduct, see the FAQ at
127 | https://www.contributor-covenant.org/faq. Translations are available at
128 | https://www.contributor-covenant.org/translations.
129 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Contributions of any kind welcome!
 3 | 
 4 | ## Issues
 5 | 
 6 | ### Creating an Issue
 7 | If you find a bug, problem, or maybe the documentation just doesn't make sense, please create an Issue to document the concern.
 8 | 
 9 | ### Description
10 | Please be descriptive in your Issue. The more info you provide, the more likely someone will be able to help.
11 | 
12 | ### Code Examples
13 | If you're experiencing an issue with the code, the most helpful thing you can do is create an example where you can reproduce the problem. This can be an open source Github repo, a private repo you can share with the maintainers, a [CodeSandbox](https://codesandbox.io/), or really anything to show the issue live with code along side of it.
14 | 
15 | ## Pull Requests
16 | 
17 | ### Creating a Pull Request
18 | If you're able to fix an active Issue, feel free to create a new Pull Request addressing the problem. There are no gaurantees that the code will be merged in "as is", but chances are, if you're willing to work with the maintainers, everyone will be able to come up with a solution everyone can be happy with.
19 | 
20 | ### Description
21 | Please be descriptive in your Pull Request. Whether big or small, it's important to be able to see the context of a change throughout the history of a project.
22 | 
23 | ### Linking Fixed Issues
24 | If the Pull Request is addressing an Issue, please link that issue by specifying the `Fixes [Issue #]` syntax within the Pull Request.
25 | 
26 | ### Getting Added to All Contributors in the README.md
27 | Once your Pull Request is successfully merged, feel free to tag yourself using the [All Conributors syntax](https://allcontributors.org/docs/en/bot/usage), which will create a new Pull Request requesting to add you in.
28 | 
29 | ```
30 | @all-contributors please add <username> for <contributions>
31 | ```
32 | 
33 | If your Pull Request is merged in and you're not added, please let someone know if you don't want to tag yourself, as we want to recognize everyone for their help.
34 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Colby Fayock
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | <picture>
  2 |   <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/62209650/196528621-b68e9e10-7e55-4c7d-9177-904cadbb4296.png" align="center" height=50>
  3 |   <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/62209650/196528761-a815025a-271a-4d8e-ac7e-cea833728bf9.png" align="center" height=50>
  4 |   <img alt="Cloudinary" src="https://user-images.githubusercontent.com/62209650/196528761-a815025a-271a-4d8e-ac7e-cea833728bf9.png" align="center" height=50>
  5 | </picture>
  6 | &ensp;&ensp;
  7 | <picture style="padding: 50px">
  8 |   <source media="(prefers-color-scheme: dark)" srcset="https://user-images.githubusercontent.com/62209650/196580077-8decb083-1556-4e10-99af-84b79e909229.png" align="center" height=50>
  9 |   <source media="(prefers-color-scheme: light)" srcset="https://user-images.githubusercontent.com/62209650/196579993-14e2a5e4-da8d-46a9-87ba-3a76d54975fb.png" align="center" height=50>
 10 |   <img alt="Netlify" src="https://user-images.githubusercontent.com/62209650/196579993-14e2a5e4-da8d-46a9-87ba-3a76d54975fb.png" align="center" height=50>
 11 | </picture>
 12 | 
 13 | ######
 14 | 
 15 | <a href="https://github.com/colbyfayock/netlify-plugin-cloudinary/actions/workflows/test_and_release.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/colbyfayock/netlify-plugin-cloudinary/test_release.yml?branch=main&label=Test%20%26%20Release&style=flat-square"></a> <a href="https://www.npmjs.com/package/netlify-plugin-cloudinary"><img alt="npm" src="https://img.shields.io/npm/v/netlify-plugin-cloudinary?style=flat-square"></a> <a href="https://github.com/colbyfayock/netlify-plugin-cloudinary/blob/main/LICENSE"><img alt="GitHub" src="https://img.shields.io/github/license/colbyfayock/netlify-plugin-cloudinary?label=License&style=flat-square"></a>
 16 | 
 17 | # Cloudinary Netlify Plugin
 18 | 
 19 | Optimize and serve all images served in your Netlify site deploy with [Cloudinary](https://cloudinary.com/).
 20 | 
 21 | The Cloudinary plugin hooks into your Netlify build process and sets up images for optimization and delivery. First, the plugin replaces all your on-page, post-compilation images with a Cloudinary-sourced URL, greatly accelerating your initial page load. Next, for comprehensive coverage, Cloudinary redirects assets requested from your images directory to a Cloudinary URL with the default fetch feature or the upload delivery type.
 22 | 
 23 | tl;dr automatically serves smaller images in modern formats
 24 | 
 25 | - [Getting Started](#%EF%B8%8F-getting-started)
 26 | - [Configuration](#-configuration)
 27 | - [Common Questions & Issues](#%EF%B8%8F%EF%B8%8F-common-questions--issues)
 28 | - [How It Works](#%EF%B8%8F-how-it-works)
 29 | - [Development](#-development)
 30 | 
 31 | **This is a community library supported by the Cloudinary Developer Experience team.**
 32 | 
 33 | ## ⚡️ Getting Started
 34 | 
 35 | Before installing, make sure you're set up with a free [Cloudinary](https://cloudinary.com/) account.
 36 | 
 37 | ### Installing via Netlify UI
 38 | 
 39 | - [Install the plugin](https://app.netlify.com/plugins/netlify-plugin-cloudinary/install) using the [Netlify Build Plugins Directory](https://app.netlify.com/plugins)
 40 | 
 41 | <https://app.netlify.com/plugins/netlify-plugin-cloudinary/install>
 42 | 
 43 | - Add your Cloudinary Cloud Name as a [build environment variable](https://docs.netlify.com/configure-builds/environment-variables)
 44 | 
 45 | ```
 46 | Name: CLOUDINARY_CLOUD_NAME
 47 | Value: <Your Cloud Name>
 48 | ```
 49 | 
 50 | - Trigger a new deployment!
 51 | 
 52 | By default, your images will be served via the [fetch delivery type](https://cloudinary.com/documentation/fetch_remote_images).
 53 | 
 54 | ### File-based configuration
 55 | 
 56 | - Add the plugin to your Netlify config:
 57 | 
 58 | ```toml
 59 | [[plugins]]
 60 |   package = "netlify-plugin-cloudinary"
 61 | ```
 62 | 
 63 | - Configure your Cloudinary Cloud Name:
 64 | 
 65 | ```toml
 66 | [[plugins]]
 67 |   package = "netlify-plugin-cloudinary"
 68 | 
 69 |   [plugins.inputs]
 70 |   cloudName = "<Your Cloud Name>"
 71 | ```
 72 | 
 73 | By default, your images will be served via the [fetch delivery type](https://cloudinary.com/documentation/fetch_remote_images).
 74 | 
 75 | ### Installing locally
 76 | 
 77 | - Install the plugin:
 78 | 
 79 | ```shell
 80 | npm install netlify-plugin-cloudinary
 81 | ```
 82 | 
 83 | - Use a [file-based configuration](#file-based-configuration) to add the plugin to your builds
 84 | 
 85 | ## 🛠 Configuration
 86 | 
 87 | ### Plugin Inputs
 88 | 
 89 | | Name            | Type    |Required | Example   | Description |
 90 | |-----------------|---------|---------|-----------| ------------|
 91 | | cloudName       | string  | No*     | mycloud   | Cloudinary Cloud Name |
 92 | | cname           | string  | No      | domain.com | The custom domain name (CNAME) to use for building URLs (Advanced Plan Users) |
 93 | | deliveryType    | string  | No      | fetch     | The method by which Cloudinary stores and delivers images (Ex: fetch, upload) |
 94 | | folder          | string  | No      | myfolder  | Folder all media will be stored in. Defaults to Netlify site name |
 95 | | imagesPath      | string/Array | No | /assets   | Local path application serves image assets from |
 96 | | loadingStrategy | string  | No      | eager     | The method in which in which images are loaded (Ex: lazy, eager) |
 97 | | maxSize         | object  | No      | eager     | See Below. |
 98 | | privateCdn      | boolean | No      | true      | Enables Private CDN Distribution (Advanced Plan Users) |
 99 | | uploadPreset    | string  | No      | my-preset | Defined set of asset upload defaults in Cloudinary |
100 | | uploadConcurrency | number | No     | 10        | Maximum value of concurrent uploads |
101 | *Cloud Name must be set as an environment variable if not as an input
102 | 
103 | #### Max Size
104 | 
105 | The Max Size option gives you the ability to configure a maximum width and height that images will scale down to, helping to avoid serving unnecessarily large images.
106 | 
107 | By default, the aspect ratio of the images are preserved, so by specifying both a maximum width and height, you're telling Cloudinary to scale the image down so that neither the width or height are beyond that value.
108 | 
109 | Additionally, the plugin uses a crop method of `limit` which avoids upscaling images if the images are already smaller than the given size, which reduces unnecessary upscaling as the browser will typically automatically handle.
110 | 
111 | The options available are:
112 | 
113 | | Name            | Type    | Example   | Description |
114 | |-----------------|---------|-----------| ------------|
115 | | dpr             | string  | 2.0       | Device Pixel Ratio which essentially multiplies the width and height for pixel density. |
116 | | height          | number  | 600       | Maximum height an image can be delivered as. |
117 | | width           | number  | 800       | Maximum width an image can be delivered as.  |
118 | 
119 | It's important to note that this will not change the width or height attribute of the image within the DOM, this will only be the image that is being delivered by Cloudinary.
120 | 
121 | ### Environment Variables
122 | 
123 | | Name                   | Required | Example  | Description |
124 | |------------------------|----------|----------|-------------|
125 | | CLOUDINARY_CLOUD_NAME  | No*      | mycloud  | Cloudinary Cloud Name |
126 | | CLOUDINARY_API_KEY     | No       | 1234     | Cloudinary API Key |
127 | | CLOUDINARY_API_SECRET  | No       | abcd1234 | Cloudinary API Secret |
128 | 
129 | *Cloud Name must be set as an input variable if not as an environment variable
130 | 
131 | ### Setting your Cloud Name
132 | 
133 | You have two options for setting your Cloud Name: plugin input or environment variable.
134 | 
135 | **Input**
136 | 
137 | Inside your Netlify config:
138 | 
139 | ```toml
140 |   [plugins.inputs]
141 |   cloudName = "<Your Cloud Name>"
142 | ```
143 | 
144 | **Environment Variable**
145 | 
146 | Inside your environment variable configuration:
147 | 
148 | ```
149 | CLOUDINARY_CLOUD_NAME="<Your Cloud Name>"
150 | ```
151 | 
152 | Learn how to [set environment variables with Netlify](https://docs.netlify.com/configure-builds/environment-variables/).
153 | 
154 | ### Changing your Delivery Type
155 | 
156 | **fetch**
157 | 
158 | Default - no additional configuration needed.
159 | 
160 | The fetch method allows you to use Cloudinary delivery by providing a remote URL. Learn more about using delivering remote images with [fetch](https://cloudinary.com/documentation/fetch_remote_images).
161 | 
162 | > Note: if you are currently restricting Fetched URLs, you need to ensure your Netlify URL is listed under allowed fetch domains. Older accounts may restrict fetched images by default. Read more about [restricting the allowed fetch domains](https://cloudinary.com/documentation/fetch_remote_images#restricting_the_allowed_fetch_domains).
163 | 
164 | **upload - Unsigned**
165 | 
166 | Unsigned uploads require an additional [Upload Preset](https://cloudinary.com/documentation/upload_presets) set up and configured in your Cloudinary account.
167 | 
168 | Inside your Netlify config:
169 | 
170 | ```toml
171 | [[plugins]]
172 |   package = "netlify-plugin-cloudinary"
173 | 
174 |   [plugins.inputs]
175 |   cloudName = "[Your Cloudinary Cloud Name]"
176 |   deliveryType = "upload"
177 |   uploadPreset = "[Your Cloudinary Upload Preset]"
178 | ```
179 | 
180 | Uploading media to Cloudinary gives you more flexibility with your media upon delivery. Learn more about [unsigned uploads](https://cloudinary.com/documentation/upload_images#unsigned_upload).
181 | 
182 | **upload - Signed**
183 | 
184 | Signed uploads require you to set your API Key and API Secret as environment variables.
185 | 
186 | Inside your Netlify config:
187 | 
188 | ```toml
189 | [[plugins]]
190 |   package = "netlify-plugin-cloudinary"
191 | 
192 |   [plugins.inputs]
193 |   cloudName = "[Your Cloudinary Cloud Name]"
194 |   deliveryType = "upload"
195 | ```
196 | 
197 | Inside your environment variable configuration:
198 | 
199 | ```
200 | CLOUDINARY_API_KEY="[Your Cloudinary API Key]"
201 | CLOUDINARY_API_SECRET="[Your Cloudinary API Secret]"
202 | ```
203 | 
204 | Uploading media to Cloudinary gives you more flexibility with your media upon delivery. Learn more about [signed uploads](https://cloudinary.com/documentation/upload_images#uploading_assets_to_the_cloud).
205 | 
206 | ### Customizing where your images are served from
207 | 
208 | By default, the plugin will attempt to serve any thing served from /images as Cloudinary paths. This can be customized by passing in the `imagesPath` input.
209 | 
210 | Inside your Netlify config:
211 | 
212 | ```toml
213 | [[plugins]]
214 |   package = "netlify-plugin-cloudinary"
215 | 
216 |   [plugins.inputs]
217 |   cloudName = "[Your Cloudinary Cloud Name]"
218 |   imagesPath = "/my-path"
219 |   # or imagesPath = [ "/my-path", "/my-other-path" ]
220 | ```
221 | 
222 | ## 🕵️‍♀️ Common Questions & Issues
223 | 
224 | ### I'm using the default settings but my images 404
225 | 
226 | The plugin uses the fetch method by default and if you're receiving a 404 with a valid URL and valid Cloudinary account, you may be currently restricting fetched URLs.
227 | 
228 | You have two options to resolve this: adding your Netlify domain to the list of "allowed fetch domains" and removing the fetched URL restriction.
229 | 
230 | Adding your domain to the "allowed fetch domains" list is more secure by not allowing others to use your Cloudinary account with their own images. You can do this under Settings > Security > Allowed fetch domains.
231 | 
232 | Alternatively, you can remove the restriction and allow all fetched images to work by going to Settings > Security > Restricted media types and unchecking the box for Fetched URL.
233 | 
234 | ## ⚙️ How It Works
235 | 
236 | ### Delivery Part 1: Replacing all static, on-page images with Cloudinary URLs
237 | 
238 | During the Netlify build process, the plugin is able to tap into the `onPostBuild` hook where we use [jsdom](https://github.com/jsdom/jsdom) to create a node-based representation of the DOM for each output HTML file, then walk through each node, and if it's an image, we replace the source with a Cloudinary URL.
239 | 
240 | Depending on the configuration, we'll either use the full URL for that image with the [Cloudinary fetch API](https://cloudinary.com/documentation/fetch_remote_images) or alternatively that image will be [uploaded](https://cloudinary.com/documentation/upload_images), where then it will be served by public ID from the Cloudinary account.
241 | 
242 | While this works great for a lot of cases and in particular the first load of that page, using a framework with clientside routing or features that mutate the DOM may prevent that Cloudinary URL from persisting, making all of that hard work disappear, meaning it will be served from the Netlify CDN or original remote source (which is fine, but that leads us to Part 2).
243 | 
244 | ### Delivery Part 2: Serving all assets from the /images directory from Cloudinary
245 | 
246 | To provide comprehensive coverage of images being served from Cloudinary, we take advantage of Netlify's dynamic redirects and serverless functions to map any image being served from the /images directory (or the configured `imagesPath`), redirect it to a serverless function, which then gets redirected to a Cloudinary URL.
247 | 
248 | Through this process, we're still able to afford the same option of using either the fetch or upload API depending on preference, where the latter would be uploaded if it's a new asset within the serverless function.
249 | 
250 | ## 🧰 Development
251 | 
252 | ### Plugin
253 | 
254 | To actively develop with the plugin, you need to be able to run a Netlify build and deploy.
255 | 
256 | You can do this by pushing a site that uses this plugin to Netlify or you can use the [Netlify CLI](https://docs.netlify.com/cli/get-started/) locally (recommended).
257 | 
258 | You can reference the plugin locally in your `netlify.toml` by specifying the directory the plugin is in relative to your project, for example:
259 | ```
260 | [[plugins]]
261 |   package = "../netlify-plugin-cloudinary"
262 | ```
263 | 
264 | On the locally linked Netlify project, you can then run:
265 | 
266 | ```
267 | netlify deploy --build
268 | ```
269 | 
270 | Which will combine the build and deploy contexts and run through the full process, generating a preview URL.
271 | 
272 | #### Caveats
273 | * The Netlify CLI doesn't support all input and environment variables for build plugins, primarily `process.env.DEPLOY_PRIME_URL` meaning the `onPostBuild` image replacement will not occur locally.
274 | 
275 | ### Demo
276 | 
277 | The repository additionally includes a demo that uses the plugin. The demo is a simple Next.js application that lows a few images statically and those same images in a separate list once the page loads. This helps us test both the on-page image replacement and the redirecting of the images directory.
278 | 
279 | You can link this project to your Netlify account for testing purposes by creating a new Netlify site at the root of this project and linking it to that new site.
280 | 
281 | Once linked, you can then run the build and deploy process with:
282 | 
283 | ```
284 | netlify deploy --build
285 | ```
286 | 
287 | ### Tests
288 | 
289 | Tests require all environment variables to be actively set pass. See [configuration](#-configuration) above to see which variables need to be set.
290 | 
291 | Once set, tests can be run with:
292 | 
293 | ```
294 | npm run test
295 | ```
296 | 
297 | ## Contributors
298 | 
299 | <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
300 | <!-- prettier-ignore-start -->
301 | <!-- markdownlint-disable -->
302 | <table>
303 |   <tbody>
304 |     <tr>
305 |       <td align="center" valign="top" width="14.28%"><a href="https://colbyfayock.com/newsletter"><img src="https://avatars.githubusercontent.com/u/1045274?v=4?s=100" width="100px;" alt="Colby Fayock"/><br /><sub><b>Colby Fayock</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=colbyfayock" title="Code">💻</a> <a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=colbyfayock" title="Documentation">📖</a> <a href="#example-colbyfayock" title="Examples">💡</a></td>
306 |       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Chuloo"><img src="https://avatars.githubusercontent.com/u/22301208?v=4?s=100" width="100px;" alt="William"/><br /><sub><b>William</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=Chuloo" title="Code">💻</a></td>
307 |       <td align="center" valign="top" width="14.28%"><a href="http://mk.gg"><img src="https://avatars.githubusercontent.com/u/213306?v=4?s=100" width="100px;" alt="Matt Kane"/><br /><sub><b>Matt Kane</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/pulls?q=is%3Apr+reviewed-by%3Aascorbic" title="Reviewed Pull Requests">👀</a></td>
308 |       <td align="center" valign="top" width="14.28%"><a href="https://donno2048.github.io/Portfolio/"><img src="https://avatars.githubusercontent.com/u/61805754?v=4?s=100" width="100px;" alt="Elisha Hollander"/><br /><sub><b>Elisha Hollander</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=donno2048" title="Code">💻</a></td>
309 |       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Kunal-8789"><img src="https://avatars.githubusercontent.com/u/76679262?v=4?s=100" width="100px;" alt="Kunal Kaushik"/><br /><sub><b>Kunal Kaushik</b></sub></a><br /><a href="#tool-Kunal-8789" title="Tools">🔧</a></td>
310 |       <td align="center" valign="top" width="14.28%"><a href="https://portfolio-shikhar13012001.vercel.app/"><img src="https://avatars.githubusercontent.com/u/75368010?v=4?s=100" width="100px;" alt="Shikhar"/><br /><sub><b>Shikhar</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=shikhar13012001" title="Code">💻</a> <a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=shikhar13012001" title="Tests">⚠️</a></td>
311 |       <td align="center" valign="top" width="14.28%"><a href="https://digantakrbanik.codes/"><img src="https://avatars.githubusercontent.com/u/65999534?v=4?s=100" width="100px;" alt="Diganta Kr Banik"/><br /><sub><b>Diganta Kr Banik</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=developer-diganta" title="Code">💻</a> <a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=developer-diganta" title="Documentation">📖</a> <a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=developer-diganta" title="Tests">⚠️</a></td>
312 |     </tr>
313 |     <tr>
314 |       <td align="center" valign="top" width="14.28%"><a href="https://github.com/3t8"><img src="https://avatars.githubusercontent.com/u/62209650?v=4?s=100" width="100px;" alt="3t8"/><br /><sub><b>3t8</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=3t8" title="Documentation">📖</a></td>
315 |       <td align="center" valign="top" width="14.28%"><a href="https://github.com/Abubakrce19"><img src="https://avatars.githubusercontent.com/u/104122959?v=4?s=100" width="100px;" alt="Abubakrce19"/><br /><sub><b>Abubakrce19</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=Abubakrce19" title="Documentation">📖</a></td>
316 |       <td align="center" valign="top" width="14.28%"><a href="http://ericapisani.dev"><img src="https://avatars.githubusercontent.com/u/5655473?v=4?s=100" width="100px;" alt="Erica Pisani"/><br /><sub><b>Erica Pisani</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=ericapisani" title="Code">💻</a></td>
317 |       <td align="center" valign="top" width="14.28%"><a href="https://matiashernandez.dev"><img src="https://avatars.githubusercontent.com/u/282006?v=4?s=100" width="100px;" alt="Matías Hernández Arellano"/><br /><sub><b>Matías Hernández Arellano</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=matiasfha" title="Code">💻</a></td>
318 |       <td align="center" valign="top" width="14.28%"><a href="https://github.com/kcoderhtml"><img src="https://avatars.githubusercontent.com/u/92754843?v=4?s=100" width="100px;" alt="Kieran Klukas"/><br /><sub><b>Kieran Klukas</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=kcoderhtml" title="Code">💻</a></td>
319 |       <td align="center" valign="top" width="14.28%"><a href="https://gshel.org"><img src="https://avatars.githubusercontent.com/u/35184207?v=4?s=100" width="100px;" alt="Gretchen Shelby-Dormer"/><br /><sub><b>Gretchen Shelby-Dormer</b></sub></a><br /><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary/commits?author=gshel" title="Code">💻</a></td>
320 |     </tr>
321 |   </tbody>
322 | </table>
323 | 
324 | <!-- markdownlint-restore -->
325 | <!-- prettier-ignore-end -->
326 | 
327 | <!-- ALL-CONTRIBUTORS-LIST:END -->
328 | 


--------------------------------------------------------------------------------
/demo/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 |   "extends": ["next/core-web-vitals", "prettier"]
3 | }
4 | 


--------------------------------------------------------------------------------
/demo/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env.local
29 | .env.development.local
30 | .env.test.local
31 | .env.production.local
32 | 
33 | # vercel
34 | .vercel
35 | 


--------------------------------------------------------------------------------
/demo/.prettierrc.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   semi: true,
3 |   singleQuote: true,
4 |   trailingComma: 'all',
5 | };
6 | 


--------------------------------------------------------------------------------
/demo/README.md:
--------------------------------------------------------------------------------
 1 | This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
 2 | 
 3 | ## Getting Started
 4 | 
 5 | First, run the development server:
 6 | 
 7 | ```bash
 8 | npm run dev
 9 | ```
10 | 
11 | Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
12 | 
13 | You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
14 | 
15 | [API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`.
16 | 
17 | The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
18 | 
19 | ## Learn More
20 | 
21 | To learn more about Next.js, take a look at the following resources:
22 | 
23 | - [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
24 | - [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
25 | 
26 | You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
27 | 
28 | ## Deploy on Vercel
29 | 
30 | The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
31 | 
32 | Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
33 | 


--------------------------------------------------------------------------------
/demo/app/app/page.tsx:
--------------------------------------------------------------------------------
 1 | import '../../styles/globals.css';
 2 | import Image from 'next/image';
 3 | import styles from '../../styles/Home.module.css';
 4 | 
 5 | import images from '../../data/images.json';
 6 | 
 7 | export default function Home() {
 8 |   return (
 9 |     <div className={styles.container}>
10 |       <main className={styles.main}>
11 |         <h1 className={styles.title}>Cloudinary Netlify Plugin</h1>
12 | 
13 |         <ul className={styles.grid}>
14 |           {images.map((image) => {
15 |             return (
16 |               <li key={image.src}>
17 |                 <img
18 |                   src={image.src}
19 |                   width={image.width}
20 |                   height={image.height}
21 |                   alt={image.title}
22 |                 />
23 |               </li>
24 |             );
25 |           })}
26 |         </ul>
27 | 
28 |         <ul className={styles.grid}>
29 |           {images.map((image) => {
30 |             return (
31 |               <li key={image.src}>
32 |                 <Image
33 |                   src={image.src}
34 |                   width={image.width}
35 |                   height={image.height}
36 |                   alt={image.title}
37 |                 />
38 |               </li>
39 |             );
40 |           })}
41 |         </ul>
42 |       </main>
43 |     </div>
44 |   );
45 | }
46 | 


--------------------------------------------------------------------------------
/demo/app/layout.tsx:
--------------------------------------------------------------------------------
 1 | export const metadata = {
 2 |   title: 'Next.js',
 3 |   description: 'Generated by Next.js',
 4 | };
 5 | 
 6 | export default function RootLayout({ children }) {
 7 |   return (
 8 |     <html lang="en">
 9 |       <body>{children}</body>
10 |     </html>
11 |   );
12 | }
13 | 


--------------------------------------------------------------------------------
/demo/data/images.json:
--------------------------------------------------------------------------------
 1 | [
 2 |   {
 3 |     "width": 2376,
 4 |     "height": 1574,
 5 |     "src": "/images/beach.jpeg",
 6 |     "title": "Beach"
 7 |   },
 8 |   {
 9 |     "width": 1364,
10 |     "height": 1705,
11 |     "src": "/images/city.jpeg",
12 |     "title": "City"
13 |   },
14 |   {
15 |     "width": 2344,
16 |     "height": 1560,
17 |     "src": "/images/earth.jpeg",
18 |     "title": "Earth"
19 |   },
20 |   {
21 |     "width": 2340,
22 |     "height": 1560,
23 |     "src": "/images/galaxy.jpeg",
24 |     "title": "Galaxy"
25 |   },
26 |   {
27 |     "width": 2148,
28 |     "height": 1611,
29 |     "src": "/images/iceberg.jpeg",
30 |     "title": "Iceberg"
31 |   },
32 |   {
33 |     "width": 1364,
34 |     "height": 1705,
35 |     "src": "/images/jungle.jpeg",
36 |     "title": "Jungle"
37 |   },
38 |   {
39 |     "width": 2340,
40 |     "height": 1561,
41 |     "src": "/images/mountain.jpeg",
42 |     "title": "Mountain"
43 |   },
44 |   {
45 |     "width": 2340,
46 |     "height": 1560,
47 |     "src": "/images/waterfall.jpeg",
48 |     "title": "Waterfall"
49 |   }
50 | ]
51 | 


--------------------------------------------------------------------------------
/demo/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | /// <reference types="next/navigation-types/compat/navigation" />
4 | 
5 | // NOTE: This file should not be edited
6 | // see https://nextjs.org/docs/basic-features/typescript for more information.
7 | 


--------------------------------------------------------------------------------
/demo/next.config.js:
--------------------------------------------------------------------------------
1 | /** @type {import('next').NextConfig} */
2 | const nextConfig = {
3 |   reactStrictMode: true,
4 | };
5 | 
6 | module.exports = nextConfig;
7 | 


--------------------------------------------------------------------------------
/demo/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "demo",
 3 |   "private": true,
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start",
 8 |     "lint": "next lint",
 9 |     "format": "prettier --write --ignore-path .gitignore ."
10 |   },
11 |   "dependencies": {
12 |     "next": "13.4.19",
13 |     "react": "18.2.0",
14 |     "react-dom": "18.2.0"
15 |   },
16 |   "devDependencies": {
17 |     "@types/react": "18.2.21",
18 |     "eslint": "8.48.0",
19 |     "eslint-config-next": "13.4.19",
20 |     "eslint-config-prettier": "9.0.0",
21 |     "netlify-plugin-cloudinary": "workspace:*",
22 |     "prettier": "3.0.3"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/demo/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/globals.css';
2 | 
3 | function MyApp({ Component, pageProps }) {
4 |   return <Component {...pageProps} />;
5 | }
6 | 
7 | export default MyApp;
8 | 


--------------------------------------------------------------------------------
/demo/pages/index.tsx:
--------------------------------------------------------------------------------
  1 | import { useState, useEffect } from 'react';
  2 | import Head from 'next/head';
  3 | import Image from 'next/image';
  4 | import styles from '../styles/Home.module.css';
  5 | 
  6 | import dataImages from '../data/images.json';
  7 | 
  8 | export default function Home({ images }) {
  9 |   const [isLoaded, setIsLoaded] = useState(false);
 10 | 
 11 |   useEffect(() => {
 12 |     setTimeout(() => {
 13 |       setIsLoaded(true);
 14 |     }, 1000);
 15 |   }, []);
 16 | 
 17 |   return (
 18 |     <div className={styles.container}>
 19 |       <Head>
 20 |         <title>Cloudinary Netlify Plugin</title>
 21 |         <meta name="description" content="Cloudinary Netlify Plugin" />
 22 |       </Head>
 23 | 
 24 |       <main className={styles.main}>
 25 |         <h1 className={styles.title}>Cloudinary Netlify Plugin</h1>
 26 | 
 27 |         <p className={styles.description}>
 28 |           Supercharge images on your Netlify site with Cloudinary!
 29 |         </p>
 30 | 
 31 |         <h2 className={styles.title}>Getting Started</h2>
 32 | 
 33 |         <ul className={styles.description}>
 34 |           <li>
 35 |             ✅{' '}
 36 |             <a href="https://app.netlify.com/plugins/netlify-plugin-cloudinary/install">
 37 |               Install the plugin on Netlify
 38 |             </a>{' '}
 39 |             (or search for &quot;cloudinary&quot;)
 40 |           </li>
 41 |           <li>
 42 |             ✅ Add <code>CLOUDINARY_CLOUD_NAME</code> as a Build Variable
 43 |           </li>
 44 |           <li>✅ Trigger a new Netlify build</li>
 45 |         </ul>
 46 | 
 47 |         <p className={styles.description}>
 48 |           <a href="https://github.com/colbyfayock/netlify-plugin-cloudinary">
 49 |             More details and advanced configuration on GitHub
 50 |           </a>
 51 |         </p>
 52 | 
 53 |         <h2 className={styles.title}>Images Transformed to Use Cloudinary</h2>
 54 | 
 55 |         <ul className={styles.grid}>
 56 |           {images.map((image) => {
 57 |             return (
 58 |               <li key={image.src}>
 59 |                 <img
 60 |                   src={image.src}
 61 |                   width={image.width}
 62 |                   height={image.height}
 63 |                   alt={image.title}
 64 |                 />
 65 |               </li>
 66 |             );
 67 |           })}
 68 |         </ul>
 69 | 
 70 |         <ul className={styles.grid}>
 71 |           {images.map((image) => {
 72 |             return (
 73 |               <li key={image.src}>
 74 |                 <Image
 75 |                   src={image.src}
 76 |                   width={image.width}
 77 |                   height={image.height}
 78 |                   alt={image.title}
 79 |                 />
 80 |               </li>
 81 |             );
 82 |           })}
 83 |         </ul>
 84 | 
 85 |         {isLoaded && (
 86 |           <ul className={styles.grid}>
 87 |             {images.map((image) => {
 88 |               return (
 89 |                 <li key={image.src}>
 90 |                   <img
 91 |                     src={image.src}
 92 |                     width={image.width}
 93 |                     height={image.height}
 94 |                     alt={image.title}
 95 |                   />
 96 |                 </li>
 97 |               );
 98 |             })}
 99 |           </ul>
100 |         )}
101 |       </main>
102 |     </div>
103 |   );
104 | }
105 | 
106 | export async function getStaticProps() {
107 |   return {
108 |     props: {
109 |       images: dataImages,
110 |     },
111 |   };
112 | }
113 | 


--------------------------------------------------------------------------------
/demo/public/images/beach.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/demo/public/images/beach.jpeg


--------------------------------------------------------------------------------
/demo/public/images/city.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/demo/public/images/city.jpeg


--------------------------------------------------------------------------------
/demo/public/images/earth.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/demo/public/images/earth.jpeg


--------------------------------------------------------------------------------
/demo/public/images/galaxy.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/demo/public/images/galaxy.jpeg


--------------------------------------------------------------------------------
/demo/public/images/iceberg.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/demo/public/images/iceberg.jpeg


--------------------------------------------------------------------------------
/demo/public/images/jungle.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/demo/public/images/jungle.jpeg


--------------------------------------------------------------------------------
/demo/public/images/mountain.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/demo/public/images/mountain.jpeg


--------------------------------------------------------------------------------
/demo/public/images/test/beach.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/demo/public/images/test/beach.jpeg


--------------------------------------------------------------------------------
/demo/public/images/waterfall.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/demo/public/images/waterfall.jpeg


--------------------------------------------------------------------------------
/demo/styles/Home.module.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   padding: 0 2rem;
 3 | }
 4 | 
 5 | .main {
 6 |   padding: 2rem 0;
 7 | }
 8 | 
 9 | .title {
10 |   margin: 0;
11 |   line-height: 1.15;
12 |   font-size: 4rem;
13 | }
14 | 
15 | h2.title {
16 |   font-size: 2rem;
17 | }
18 | 
19 | .title,
20 | .description {
21 |   text-align: center;
22 | }
23 | 
24 | .description {
25 |   margin: 4rem 0;
26 |   line-height: 1.5;
27 |   font-size: 1.5rem;
28 | }
29 | 
30 | ul.description {
31 |   list-style: none;
32 |   padding-left: 0;
33 | }
34 | 
35 | .grid {
36 |   display: grid;
37 |   grid-gap: 1rem;
38 |   grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
39 |   list-style: none;
40 |   padding: 0;
41 |   margin: 4rem 0;
42 | }
43 | 


--------------------------------------------------------------------------------
/demo/styles/globals.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   padding: 0;
 4 |   margin: 0;
 5 |   font-family:
 6 |     -apple-system,
 7 |     BlinkMacSystemFont,
 8 |     Segoe UI,
 9 |     Roboto,
10 |     Oxygen,
11 |     Ubuntu,
12 |     Cantarell,
13 |     Fira Sans,
14 |     Droid Sans,
15 |     Helvetica Neue,
16 |     sans-serif;
17 | }
18 | 
19 | a {
20 |   color: #0070f3;
21 |   text-decoration: none;
22 | }
23 | 
24 | a:hover,
25 | a:focus,
26 | a:active {
27 |   text-decoration: underline;
28 | }
29 | 
30 | * {
31 |   box-sizing: border-box;
32 | }
33 | 
34 | img {
35 |   max-width: 100%;
36 |   height: auto;
37 | }
38 | 


--------------------------------------------------------------------------------
/demo/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "lib": [
 4 |       "dom",
 5 |       "dom.iterable",
 6 |       "esnext"
 7 |     ],
 8 |     "allowJs": true,
 9 |     "skipLibCheck": true,
10 |     "strict": false,
11 |     "noEmit": true,
12 |     "incremental": true,
13 |     "esModuleInterop": true,
14 |     "module": "esnext",
15 |     "moduleResolution": "node",
16 |     "resolveJsonModule": true,
17 |     "isolatedModules": true,
18 |     "jsx": "preserve",
19 |     "plugins": [
20 |       {
21 |         "name": "next"
22 |       }
23 |     ],
24 |     "strictNullChecks": true,
25 |     "forceConsistentCasingInFileNames": true
26 |   },
27 |   "include": [
28 |     "next-env.d.ts",
29 |     ".next/types/**/*.ts",
30 |     "**/*.ts",
31 |     "**/*.tsx",
32 |     "**/*.json"
33 |   ],
34 |   "exclude": [
35 |     "node_modules"
36 |   ]
37 | }
38 | 


--------------------------------------------------------------------------------
/docs/.github/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/docs/.github/screenshot.png


--------------------------------------------------------------------------------
/docs/.gitignore:
--------------------------------------------------------------------------------
1 | .next
2 | node_modules
3 | .env.local


--------------------------------------------------------------------------------
/docs/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2022 Shu Ding
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/docs/README.md:
--------------------------------------------------------------------------------
1 | # Docs


--------------------------------------------------------------------------------
/docs/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/docs/next.config.js:
--------------------------------------------------------------------------------
1 | const withNextra = require('nextra')({
2 |   theme: 'nextra-theme-docs',
3 |   themeConfig: './theme.config.tsx',
4 | })
5 | 
6 | module.exports = withNextra()
7 | 


--------------------------------------------------------------------------------
/docs/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "docs",
 3 |   "version": "0.0.1",
 4 |   "scripts": {
 5 |     "dev": "next dev",
 6 |     "build": "next build",
 7 |     "start": "next start"
 8 |   },
 9 |   "dependencies": {
10 |     "autoprefixer": "^10.4.15",
11 |     "next": "^13.0.6",
12 |     "next-cloudinary": "^4.20.0",
13 |     "nextjs-google-analytics": "^2.3.3",
14 |     "nextra": "latest",
15 |     "nextra-theme-docs": "latest",
16 |     "postcss": "^8.4.29",
17 |     "react": "^18.2.0",
18 |     "react-dom": "^18.2.0",
19 |     "tailwindcss": "^3.3.3"
20 |   },
21 |   "devDependencies": {
22 |     "@types/node": "18.11.10",
23 |     "typescript": "^4.9.3"
24 |   }
25 | }
26 | 


--------------------------------------------------------------------------------
/docs/postcss.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   plugins: {
3 |     tailwindcss: {},
4 |     autoprefixer: {},
5 |   },
6 | }
7 | 


--------------------------------------------------------------------------------
/docs/public/android-chrome-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/docs/public/android-chrome-192x192.png


--------------------------------------------------------------------------------
/docs/public/android-chrome-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/docs/public/android-chrome-512x512.png


--------------------------------------------------------------------------------
/docs/public/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/docs/public/apple-touch-icon.png


--------------------------------------------------------------------------------
/docs/public/browserconfig.xml:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <browserconfig>
 3 |     <msapplication>
 4 |         <tile>
 5 |             <square150x150logo src="/mstile-150x150.png"/>
 6 |             <TileColor>#da532c</TileColor>
 7 |         </tile>
 8 |     </msapplication>
 9 | </browserconfig>
10 | 


--------------------------------------------------------------------------------
/docs/public/favicon-1024x1024.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/docs/public/favicon-1024x1024.png


--------------------------------------------------------------------------------
/docs/public/favicon-16x16.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/docs/public/favicon-16x16.png


--------------------------------------------------------------------------------
/docs/public/favicon-32x32.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/docs/public/favicon-32x32.png


--------------------------------------------------------------------------------
/docs/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/docs/public/favicon.ico


--------------------------------------------------------------------------------
/docs/public/images/cloudinary-logo-dark.svg:
--------------------------------------------------------------------------------
1 | <svg width="319" height="209" viewBox="0 0 319 209" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M258.847 74.2516C252.021 52.8478 238.603 34.1497 220.512 20.8299C202.42 7.51016 180.581 0.250499 158.116 0.0886026C139.122 -0.0203121 120.458 5.04809 104.128 14.7492C87.7982 24.4504 74.4204 38.4176 65.4318 55.1502C48.9119 58.1107 33.768 66.2662 22.2041 78.4297C10.6403 90.5932 3.26017 106.13 1.13791 122.778C-0.984349 139.427 2.26203 156.318 10.4045 170.993C18.5471 185.669 31.1607 197.363 46.4096 204.373L48.3884 205.27H48.5203V182.844C38.0595 176.423 29.8702 166.89 25.1001 155.58C20.33 144.27 19.2182 131.752 21.9206 119.778C24.623 107.805 31.0042 96.9776 40.1696 88.8133C49.3351 80.649 60.8254 75.5572 73.0302 74.2516L78.5706 73.6711L80.9979 68.6847C87.8896 54.0792 98.8078 41.7447 112.469 33.1312C126.13 24.5176 141.966 19.9831 158.116 20.0606C177.359 20.1964 196.004 26.762 211.087 38.7134C226.17 50.6647 236.824 67.3157 241.355 86.0184L243.254 93.564H251.169C263.928 93.8256 276.08 99.0663 285.027 108.167C293.975 117.267 299.009 129.505 299.054 142.267C299.054 160.867 288.316 176.09 270.033 183.794V205.059L271.352 204.637C300.743 195.007 319 171.104 319 142.267C318.879 125.577 312.721 109.494 301.664 96.9918C290.606 84.4892 275.397 76.4116 258.847 74.2516Z" fill="#3448C5"/>
3 | <path d="M119.438 202.684L123.818 207.064C123.936 207.186 124.016 207.339 124.048 207.506C124.081 207.672 124.063 207.845 123.999 208.002C123.934 208.159 123.825 208.293 123.685 208.389C123.545 208.485 123.381 208.538 123.211 208.542H88.649C84.4506 208.542 80.4242 206.874 77.4556 203.905C74.4869 200.936 72.8191 196.91 72.8191 192.712V125.593C72.8191 125.362 72.7274 125.141 72.5641 124.977C72.4008 124.814 72.1794 124.722 71.9485 124.722H64.5612C64.3893 124.724 64.2207 124.675 64.0767 124.581C63.9327 124.487 63.8198 124.353 63.752 124.195C63.6843 124.037 63.6649 123.862 63.6962 123.693C63.7275 123.524 63.8082 123.368 63.928 123.245L93.266 93.9069C93.347 93.8247 93.4435 93.7595 93.55 93.7149C93.6564 93.6704 93.7706 93.6475 93.886 93.6475C94.0014 93.6475 94.1156 93.6704 94.2221 93.7149C94.3285 93.7595 94.425 93.8247 94.506 93.9069L123.818 123.245C123.936 123.367 124.016 123.52 124.048 123.687C124.081 123.853 124.063 124.026 123.999 124.183C123.934 124.34 123.825 124.474 123.685 124.57C123.545 124.666 123.381 124.719 123.211 124.722H115.718C115.485 124.722 115.26 124.813 115.093 124.976C114.925 125.138 114.828 125.36 114.821 125.593V191.551C114.832 195.726 116.491 199.727 119.438 202.684Z" fill="#3448C5"/>
4 | <path d="M184.261 202.685L188.667 207.064C188.787 207.187 188.868 207.343 188.899 207.513C188.93 207.682 188.911 207.856 188.843 208.014C188.776 208.172 188.663 208.306 188.519 208.4C188.375 208.494 188.206 208.543 188.034 208.542H153.551C149.353 208.542 145.327 206.874 142.358 203.905C139.389 200.937 137.722 196.91 137.722 192.712V142.558C137.722 142.324 137.631 142.1 137.468 141.932C137.306 141.765 137.084 141.667 136.851 141.66H129.384C129.215 141.657 129.05 141.604 128.91 141.508C128.77 141.412 128.661 141.278 128.596 141.121C128.532 140.964 128.515 140.791 128.547 140.625C128.579 140.458 128.659 140.305 128.778 140.183L158.089 110.898C158.17 110.816 158.267 110.75 158.373 110.706C158.48 110.661 158.594 110.638 158.709 110.638C158.825 110.638 158.939 110.661 159.045 110.706C159.152 110.75 159.248 110.816 159.329 110.898L188.667 140.13C188.787 140.254 188.868 140.41 188.899 140.579C188.93 140.748 188.911 140.922 188.843 141.08C188.776 141.238 188.663 141.373 188.519 141.466C188.375 141.56 188.206 141.609 188.034 141.608H180.541C180.308 141.615 180.087 141.712 179.924 141.88C179.761 142.047 179.671 142.271 179.671 142.505V191.551C179.674 195.722 181.324 199.723 184.261 202.685Z" fill="#3448C5"/>
5 | <path d="M249.111 202.684L253.491 207.064C253.609 207.186 253.689 207.339 253.721 207.506C253.753 207.672 253.736 207.845 253.672 208.002C253.607 208.159 253.498 208.293 253.358 208.389C253.218 208.485 253.053 208.538 252.884 208.541H218.296C214.097 208.541 210.071 206.874 207.102 203.905C204.133 200.936 202.466 196.91 202.466 192.712V159.39C202.466 159.159 202.374 158.937 202.211 158.774C202.047 158.611 201.826 158.519 201.595 158.519H194.208C194.033 158.521 193.861 158.47 193.715 158.373C193.57 158.276 193.457 158.137 193.391 157.974C193.326 157.812 193.311 157.633 193.348 157.462C193.385 157.291 193.474 157.135 193.601 157.015L222.939 127.704C223.018 127.622 223.112 127.557 223.216 127.513C223.32 127.469 223.433 127.446 223.546 127.446C223.659 127.446 223.771 127.469 223.875 127.513C223.98 127.557 224.074 127.622 224.153 127.704L253.491 157.015C253.618 157.135 253.706 157.291 253.744 157.462C253.781 157.633 253.766 157.812 253.701 157.974C253.635 158.137 253.522 158.276 253.376 158.373C253.231 158.47 253.059 158.521 252.884 158.519H245.365C245.134 158.519 244.912 158.611 244.749 158.774C244.586 158.937 244.494 159.159 244.494 159.39V191.551C244.505 195.726 246.164 199.727 249.111 202.684Z" fill="#3448C5"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/docs/public/images/cloudinary-logo-light.svg:
--------------------------------------------------------------------------------
1 | <svg width="319" height="209" viewBox="0 0 319 209" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M258.342 74.1647C251.516 52.7609 238.098 34.0628 220.007 20.7431C201.915 7.42328 180.076 0.163616 157.611 0.00171905C138.617 -0.107196 119.953 4.96121 103.623 14.6624C87.2932 24.3635 73.9154 38.3307 64.9268 55.0633C48.4069 58.0238 33.2629 66.1793 21.6991 78.3428C10.1353 90.5063 2.75516 106.043 0.632903 122.691C-1.48935 139.34 1.75703 156.231 9.89954 170.906C18.0421 185.582 30.6557 197.276 45.9046 204.286L47.8833 205.183H48.0153V182.758C37.5545 176.336 29.3652 166.803 24.5951 155.493C19.825 144.183 18.7132 131.665 21.4156 119.691C24.118 107.718 30.4992 96.8907 39.6646 88.7264C48.8301 80.5621 60.3204 75.4703 72.5252 74.1647L78.0656 73.5842L80.4929 68.5978C87.3846 53.9923 98.3028 41.6578 111.964 33.0443C125.625 24.4307 141.461 19.8962 157.611 19.9737C176.854 20.1095 195.499 26.6751 210.582 38.6265C225.665 50.5778 236.319 67.2288 240.85 85.9315L242.749 93.4771H250.664C263.423 93.7388 275.575 98.9795 284.522 108.08C293.47 117.18 298.504 129.418 298.549 142.18C298.549 160.78 287.811 176.004 269.528 183.707V204.972L270.847 204.55C300.238 194.92 318.495 171.017 318.495 142.18C318.374 125.49 312.216 109.408 301.159 96.905C290.101 84.4023 274.892 76.3247 258.342 74.1647Z" fill="white"/>
3 | <path d="M118.933 202.598L123.313 206.977C123.431 207.099 123.511 207.252 123.543 207.419C123.576 207.586 123.558 207.758 123.494 207.915C123.429 208.072 123.32 208.207 123.18 208.302C123.04 208.398 122.876 208.451 122.706 208.455H88.144C83.9456 208.455 79.9192 206.787 76.9506 203.818C73.9819 200.849 72.3141 196.823 72.3141 192.625V125.506C72.3141 125.275 72.2224 125.054 72.0591 124.89C71.8958 124.727 71.6744 124.635 71.4435 124.635H64.0562C63.8843 124.637 63.7157 124.588 63.5717 124.494C63.4277 124.4 63.3147 124.266 63.247 124.108C63.1793 123.95 63.1599 123.775 63.1912 123.606C63.2225 123.437 63.3032 123.281 63.423 123.158L92.761 93.82C92.842 93.7378 92.9385 93.6726 93.045 93.628C93.1514 93.5835 93.2656 93.5606 93.381 93.5606C93.4964 93.5606 93.6106 93.5835 93.7171 93.628C93.8235 93.6726 93.92 93.7378 94.001 93.82L123.313 123.158C123.431 123.28 123.511 123.433 123.543 123.6C123.576 123.766 123.558 123.939 123.494 124.096C123.429 124.253 123.32 124.387 123.18 124.483C123.04 124.579 122.876 124.632 122.706 124.635H115.213C114.98 124.635 114.755 124.726 114.588 124.889C114.42 125.051 114.323 125.273 114.316 125.506V191.464C114.327 195.639 115.986 199.64 118.933 202.598Z" fill="white"/>
4 | <path d="M183.756 202.598L188.162 206.977C188.282 207.101 188.363 207.257 188.394 207.426C188.425 207.595 188.406 207.769 188.338 207.927C188.271 208.085 188.158 208.22 188.014 208.313C187.87 208.407 187.701 208.457 187.529 208.455H153.046C148.848 208.455 144.822 206.787 141.853 203.818C138.884 200.85 137.216 196.823 137.216 192.625V142.471C137.217 142.237 137.126 142.013 136.963 141.845C136.801 141.678 136.579 141.58 136.346 141.574H128.879C128.71 141.57 128.545 141.517 128.405 141.421C128.265 141.326 128.156 141.191 128.091 141.034C128.027 140.877 128.01 140.705 128.042 140.538C128.074 140.371 128.154 140.218 128.273 140.096L157.584 110.811C157.665 110.729 157.762 110.663 157.868 110.619C157.975 110.574 158.089 110.551 158.204 110.551C158.32 110.551 158.434 110.574 158.54 110.619C158.647 110.663 158.743 110.729 158.824 110.811L188.162 140.043C188.282 140.167 188.363 140.323 188.394 140.492C188.425 140.661 188.406 140.835 188.338 140.993C188.271 141.151 188.158 141.286 188.014 141.379C187.87 141.473 187.701 141.523 187.529 141.521H180.036C179.803 141.528 179.582 141.625 179.419 141.793C179.256 141.96 179.166 142.184 179.166 142.418V191.464C179.169 195.635 180.819 199.636 183.756 202.598Z" fill="white"/>
5 | <path d="M248.606 202.598L252.986 206.977C253.104 207.099 253.184 207.252 253.216 207.419C253.248 207.586 253.231 207.758 253.167 207.915C253.102 208.072 252.993 208.207 252.853 208.302C252.713 208.398 252.548 208.451 252.379 208.455H217.79C213.592 208.455 209.566 206.787 206.597 203.818C203.628 200.849 201.961 196.823 201.961 192.625V159.303C201.961 159.072 201.869 158.85 201.706 158.687C201.542 158.524 201.321 158.432 201.09 158.432H193.703C193.528 158.434 193.356 158.383 193.21 158.286C193.065 158.189 192.952 158.05 192.886 157.887C192.82 157.725 192.805 157.547 192.843 157.375C192.88 157.204 192.968 157.049 193.096 156.928L222.434 127.617C222.513 127.535 222.607 127.471 222.711 127.426C222.815 127.382 222.927 127.359 223.041 127.359C223.154 127.359 223.266 127.382 223.37 127.426C223.475 127.471 223.569 127.535 223.648 127.617L252.986 156.928C253.113 157.049 253.201 157.204 253.239 157.375C253.276 157.547 253.261 157.725 253.195 157.887C253.13 158.05 253.017 158.189 252.871 158.286C252.726 158.383 252.554 158.434 252.379 158.432H244.86C244.629 158.432 244.407 158.524 244.244 158.687C244.081 158.85 243.989 159.072 243.989 159.303V191.464C244 195.639 245.659 199.64 248.606 202.598Z" fill="white"/>
6 | </svg>
7 | 


--------------------------------------------------------------------------------
/docs/public/images/netlify-cloudinary-logos.svg:
--------------------------------------------------------------------------------
 1 | <svg width="800" height="600" viewBox="0 0 800 600" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <rect width="800" height="600" fill="white"/>
 3 | <mask id="mask0_1_2" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="81" y="62" width="335" height="294">
 4 | <path d="M415.7 62H81V355.8H415.7V62Z" fill="white"/>
 5 | </mask>
 6 | <g mask="url(#mask0_1_2)">
 7 | <path d="M171.455 307.325H168.295L152.52 291.588V288.436L176.636 264.379H193.344L195.572 266.601V283.268L171.455 307.325Z" fill="#05BDBA"/>
 8 | <path d="M152.52 129.339V126.187L168.295 110.45H171.455L195.572 134.507V151.174L193.344 153.396H176.636L152.52 129.339Z" fill="#05BDBA"/>
 9 | <path d="M291.389 256.601H268.438L266.521 254.689V201.097C266.521 191.562 262.765 184.171 251.238 183.913C245.306 183.758 238.52 183.913 231.267 184.197L230.179 185.308V254.663L228.262 256.575H205.311L203.394 254.663V163.112L205.311 161.2H256.963C277.038 161.2 293.306 177.427 293.306 197.453V254.689L291.389 256.601Z" fill="#014847"/>
10 | <path d="M174.719 222.285H82.9169L81 220.373V197.427L82.9169 195.515H174.719L176.636 197.427V220.373L174.719 222.285Z" fill="#05BDBA"/>
11 | <path d="M413.81 222.285H322.007L320.09 220.373V197.427L322.007 195.515H413.81L415.726 197.427V220.373L413.81 222.285Z" fill="#05BDBA"/>
12 | <path d="M235.126 132.595V63.9122L237.043 62H260.045L261.962 63.9122V132.595L260.045 134.507H237.043L235.126 132.595Z" fill="#05BDBA"/>
13 | <path d="M235.126 353.888V285.206L237.043 283.294H260.045L261.962 285.206V353.888L260.045 355.8H237.043L235.126 353.888Z" fill="#05BDBA"/>
14 | </g>
15 | <path d="M657.847 381.252C651.021 359.848 637.603 341.15 619.512 327.83C601.42 314.51 579.581 307.25 557.116 307.089C538.122 306.98 519.458 312.048 503.128 321.749C486.798 331.45 473.42 345.418 464.432 362.15C447.912 365.111 432.768 373.266 421.204 385.43C409.64 397.593 402.26 413.13 400.138 429.778C398.016 446.427 401.262 463.318 409.405 477.993C417.547 492.669 430.161 504.363 445.41 511.373L447.388 512.27H447.52V489.844C437.06 483.423 428.87 473.89 424.1 462.58C419.33 451.27 418.218 438.752 420.921 426.778C423.623 414.805 430.004 403.978 439.17 395.813C448.335 387.649 459.825 382.557 472.03 381.252L477.571 380.671L479.998 375.685C486.89 361.079 497.808 348.745 511.469 340.131C525.13 331.518 540.966 326.983 557.116 327.061C576.359 327.196 595.004 333.762 610.087 345.713C625.17 357.665 635.824 374.316 640.355 393.018L642.254 400.564H650.169C662.928 400.826 675.08 406.066 684.027 415.167C692.975 424.267 698.009 436.505 698.054 449.267C698.054 467.867 687.316 483.09 669.033 490.794V512.059L670.352 511.637C699.743 502.007 718 478.104 718 449.267C717.879 432.577 711.721 416.494 700.664 403.992C689.606 391.489 674.397 383.412 657.847 381.252Z" fill="#3448C5"/>
16 | <path d="M518.438 509.684L522.818 514.064C522.936 514.186 523.016 514.339 523.048 514.506C523.081 514.672 523.063 514.845 522.999 515.002C522.934 515.159 522.825 515.293 522.685 515.389C522.545 515.485 522.381 515.538 522.211 515.542H487.649C483.451 515.542 479.424 513.874 476.456 510.905C473.487 507.936 471.819 503.91 471.819 499.712V432.593C471.819 432.362 471.727 432.141 471.564 431.977C471.401 431.814 471.179 431.722 470.948 431.722H463.561C463.389 431.724 463.221 431.675 463.077 431.581C462.933 431.487 462.82 431.353 462.752 431.195C462.684 431.037 462.665 430.862 462.696 430.693C462.728 430.524 462.808 430.368 462.928 430.245L492.266 400.907C492.347 400.825 492.444 400.759 492.55 400.715C492.656 400.67 492.771 400.647 492.886 400.647C493.001 400.647 493.116 400.67 493.222 400.715C493.329 400.759 493.425 400.825 493.506 400.907L522.818 430.245C522.936 430.367 523.016 430.52 523.048 430.687C523.081 430.853 523.063 431.026 522.999 431.183C522.934 431.34 522.825 431.474 522.685 431.57C522.545 431.666 522.381 431.719 522.211 431.722H514.718C514.485 431.722 514.26 431.813 514.093 431.976C513.925 432.138 513.828 432.36 513.821 432.593V498.551C513.832 502.726 515.491 506.727 518.438 509.684Z" fill="#3448C5"/>
17 | <path d="M583.261 509.685L587.667 514.064C587.787 514.187 587.868 514.343 587.899 514.513C587.93 514.682 587.911 514.856 587.843 515.014C587.776 515.172 587.663 515.306 587.519 515.4C587.375 515.494 587.206 515.543 587.034 515.542H552.551C548.353 515.542 544.327 513.874 541.358 510.905C538.389 507.937 536.722 503.91 536.722 499.712V449.558C536.722 449.324 536.631 449.1 536.468 448.932C536.306 448.765 536.084 448.667 535.851 448.66H528.384C528.215 448.657 528.05 448.604 527.91 448.508C527.77 448.412 527.661 448.278 527.596 448.121C527.532 447.964 527.515 447.791 527.547 447.625C527.579 447.458 527.659 447.305 527.778 447.183L557.089 417.898C557.17 417.816 557.267 417.75 557.373 417.706C557.48 417.661 557.594 417.638 557.709 417.638C557.825 417.638 557.939 417.661 558.045 417.706C558.152 417.75 558.248 417.816 558.329 417.898L587.667 447.13C587.787 447.254 587.868 447.41 587.899 447.579C587.93 447.748 587.911 447.922 587.843 448.08C587.776 448.238 587.663 448.373 587.519 448.466C587.375 448.56 587.206 448.609 587.034 448.608H579.541C579.308 448.615 579.087 448.712 578.924 448.88C578.761 449.047 578.671 449.271 578.671 449.505V498.551C578.674 502.722 580.324 506.723 583.261 509.685Z" fill="#3448C5"/>
18 | <path d="M648.111 509.684L652.491 514.064C652.609 514.186 652.689 514.339 652.721 514.506C652.753 514.672 652.736 514.845 652.672 515.002C652.607 515.159 652.498 515.293 652.358 515.389C652.218 515.485 652.053 515.538 651.884 515.541H617.296C613.097 515.541 609.071 513.874 606.102 510.905C603.133 507.936 601.466 503.91 601.466 499.712V466.39C601.466 466.159 601.374 465.937 601.211 465.774C601.047 465.611 600.826 465.519 600.595 465.519H593.208C593.033 465.521 592.861 465.47 592.715 465.373C592.57 465.276 592.457 465.137 592.391 464.974C592.326 464.812 592.311 464.633 592.348 464.462C592.385 464.291 592.474 464.135 592.601 464.015L621.939 434.704C622.018 434.622 622.112 434.557 622.216 434.513C622.32 434.469 622.433 434.446 622.546 434.446C622.659 434.446 622.771 434.469 622.875 434.513C622.98 434.557 623.074 434.622 623.153 434.704L652.491 464.015C652.618 464.135 652.706 464.291 652.744 464.462C652.781 464.633 652.766 464.812 652.701 464.974C652.635 465.137 652.522 465.276 652.376 465.373C652.231 465.47 652.059 465.521 651.884 465.519H644.365C644.134 465.519 643.912 465.611 643.749 465.774C643.586 465.937 643.494 466.159 643.494 466.39V498.551C643.505 502.726 645.164 506.727 648.111 509.684Z" fill="#3448C5"/>
19 | </svg>
20 | 


--------------------------------------------------------------------------------
/docs/public/images/netlify-logo-dark.svg:
--------------------------------------------------------------------------------
 1 | <svg width="335" height="294" viewBox="0 0 335 294" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <mask id="mask0_1_50" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="335" height="294">
 3 | <path d="M334.7 0H0V293.8H334.7V0Z" fill="white"/>
 4 | </mask>
 5 | <g mask="url(#mask0_1_50)">
 6 | <path d="M90.4553 245.325H87.295L71.5197 229.588V226.436L95.6361 202.379H112.344L114.572 204.601V221.268L90.4553 245.325Z" fill="#05BDBA"/>
 7 | <path d="M71.5197 67.3391V64.1866L87.295 48.4499H90.4553L114.572 72.5069V89.1737L112.344 91.3961H95.6361L71.5197 67.3391Z" fill="#05BDBA"/>
 8 | <path d="M210.389 194.601H187.438L185.521 192.689V139.097C185.521 129.562 181.765 122.171 170.238 121.913C164.306 121.758 157.52 121.913 150.267 122.197L149.179 123.308V192.663L147.262 194.575H124.311L122.394 192.663V101.112L124.311 99.1997H175.963C196.038 99.1997 212.306 115.427 212.306 135.453V192.689L210.389 194.601Z" fill="#014847"/>
 9 | <path d="M93.7192 160.285H1.91686L0 158.373V135.427L1.91686 133.515H93.7192L95.6361 135.427V158.373L93.7192 160.285Z" fill="#05BDBA"/>
10 | <path d="M332.81 160.285H241.007L239.09 158.373V135.427L241.007 133.515H332.81L334.726 135.427V158.373L332.81 160.285Z" fill="#05BDBA"/>
11 | <path d="M154.126 70.5949V1.91216L156.043 0H179.045L180.962 1.91216V70.5949L179.045 72.5069H156.043L154.126 70.5949Z" fill="#05BDBA"/>
12 | <path d="M154.126 291.888V223.206L156.043 221.294H179.045L180.962 223.206V291.888L179.045 293.8H156.043L154.126 291.888Z" fill="#05BDBA"/>
13 | </g>
14 | </svg>
15 | 


--------------------------------------------------------------------------------
/docs/public/images/netlify-logo-light.svg:
--------------------------------------------------------------------------------
 1 | <svg width="335" height="296" viewBox="0 0 335 296" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <g clip-path="url(#clip0_7_70)">
 3 | <mask id="mask0_7_70" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="335" height="295">
 4 | <path d="M334.7 0H0V294.523H334.7V0Z" fill="white"/>
 5 | </mask>
 6 | <g mask="url(#mask0_7_70)">
 7 | <path d="M90.4553 245.928H87.295L71.5197 230.153V226.993L95.6361 202.877H112.344L114.571 205.104V221.812L90.4553 245.928Z" fill="#32E6E2"/>
 8 | <path d="M71.5197 67.5048V64.3445L87.295 48.5692H90.4553L114.571 72.6853V89.3931L112.344 91.621H95.6361L71.5197 67.5048Z" fill="#32E6E2"/>
 9 | <path d="M210.389 195.08H187.438L185.521 193.163V139.439C185.521 129.881 181.765 122.472 170.238 122.213C164.306 122.058 157.519 122.213 150.267 122.498L149.179 123.612V193.137L147.262 195.054H124.311L122.394 193.137V101.361L124.311 99.4438H175.963C196.038 99.4438 212.306 115.711 212.306 135.786V193.163L210.389 195.08Z" fill="white"/>
10 | <path d="M93.7191 160.68H1.91686L0 158.763V135.761L1.91686 133.844H93.7191L95.6361 135.761V158.763L93.7191 160.68Z" fill="#32E6E2"/>
11 | <path d="M332.81 160.68H241.007L239.09 158.763V135.761L241.007 133.844H332.81L334.726 135.761V158.763L332.81 160.68Z" fill="#32E6E2"/>
12 | <path d="M154.126 70.7687V1.91686L156.043 0H179.045L180.962 1.91686V70.7687L179.045 72.6853H156.043L154.126 70.7687Z" fill="#32E6E2"/>
13 | <path d="M154.126 292.606V223.755L156.043 221.838H179.045L180.962 223.755V292.606L179.045 294.523H156.043L154.126 292.606Z" fill="#32E6E2"/>
14 | </g>
15 | </g>
16 | <defs>
17 | <clipPath id="clip0_7_70">
18 | <rect width="334.7" height="295.477" fill="white"/>
19 | </clipPath>
20 | </defs>
21 | </svg>
22 | 


--------------------------------------------------------------------------------
/docs/public/screenshots/netlify-cloudinary-install-website.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/docs/public/screenshots/netlify-cloudinary-install-website.png


--------------------------------------------------------------------------------
/docs/public/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |     "name": "Netlify Cloudinary",
 3 |     "short_name": "Netlify Cloudinary",
 4 |     "icons": [
 5 |         {
 6 |             "src": "/android-chrome-192x192.png",
 7 |             "sizes": "192x192",
 8 |             "type": "image/png"
 9 |         },
10 |         {
11 |             "src": "/android-chrome-512x512.png",
12 |             "sizes": "512x512",
13 |             "type": "image/png"
14 |         }
15 |     ],
16 |     "theme_color": "#ffffff",
17 |     "background_color": "#ffffff",
18 |     "display": "standalone"
19 | }
20 | 


--------------------------------------------------------------------------------
/docs/src/components/Button/Button.tsx:
--------------------------------------------------------------------------------
 1 | import {  ReactNode } from 'react';
 2 | import Link from 'next/link';
 3 | 
 4 | interface ButtonProps {
 5 |   children?: ReactNode;
 6 |   className?: string;
 7 |   color?: string;
 8 |   href?: string;
 9 | }
10 | 
11 | const Button = ({ children, className = '', href }: ButtonProps) => {
12 | 
13 |   const buttonColor = 'text-white bg-blue-600 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-slate-400';
14 |   const buttonStyles = `inline-block rounded py-2.5 px-6 text-sm font-bold uppercase ${buttonColor} ${className}`
15 | 
16 |   if ( href ) {
17 |     return (
18 |       <Link className={buttonStyles} href={href} rel="noreferrer noopener">
19 |         { children }
20 |       </Link>
21 |     )
22 |   }
23 | 
24 |   return (
25 |     <button className={buttonStyles}>
26 |       { children }
27 |     </button>
28 |   )
29 | }
30 | 
31 | export default Button;


--------------------------------------------------------------------------------
/docs/src/components/Button/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './Button';


--------------------------------------------------------------------------------
/docs/src/components/OgImage/OgImage.tsx:
--------------------------------------------------------------------------------
 1 | import { CldOgImage } from 'next-cloudinary';
 2 | 
 3 | interface OgImageProps {
 4 |   title: string;
 5 |   twitterTitle: string;
 6 | }
 7 | 
 8 | const OgImage = ({ title, twitterTitle }: OgImageProps) => {
 9 |   return (
10 |     <CldOgImage
11 |       src={`assets/cloudinary-social-background`}
12 |       overlays={[
13 |         {
14 |           width: 2000,
15 |           crop: 'fit',
16 |           position: {
17 |             y: -160
18 |           },
19 |           text: {
20 |             color: 'white',
21 |             fontFamily: 'Source Sans Pro',
22 |             fontSize: 200,
23 |             fontWeight: 'black',
24 |             text: title,
25 |             alignment: 'center',
26 |             lineSpacing: -50
27 |           }
28 |         },
29 |         {
30 |           publicId: 'assets/cloudinary-white',
31 |           position: {
32 |             x: -190,
33 |             y: 180,
34 |           },
35 |         },
36 |         {
37 |           publicId: 'assets/netlify-white',
38 |           height: 160,
39 |           position: {
40 |             x: 380,
41 |             y: 190,
42 |           },
43 |         },
44 |         {
45 |           position: {
46 |             y: 320
47 |           },
48 |           text: {
49 |             color: 'white',
50 |             fontFamily: 'Source Sans Pro',
51 |             fontSize: 60,
52 |             fontWeight: 'bold',
53 |             text: 'netlify.cloudinary.dev'
54 |           }
55 |         }
56 |       ]}
57 |       alt=""
58 |     />
59 |   )
60 | }
61 | 
62 | export default OgImage;


--------------------------------------------------------------------------------
/docs/src/components/OgImage/index.ts:
--------------------------------------------------------------------------------
1 | export { default } from './OgImage';


--------------------------------------------------------------------------------
/docs/src/pages/_app.mdx:
--------------------------------------------------------------------------------
 1 | import { GoogleAnalytics } from 'nextjs-google-analytics';
 2 | import '../styles/globals.css';
 3 | 
 4 | export default function App({ Component, pageProps }) {
 5 |   return (
 6 |     <>
 7 |       <GoogleAnalytics trackPageViews />
 8 |       <Component {...pageProps} />
 9 |     </>
10 |   );
11 | }


--------------------------------------------------------------------------------
/docs/src/pages/_meta.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "index": {
 3 |     "title": "Introduction",
 4 |     "display": "hidden",
 5 |     "type": "page",
 6 |     "theme": {
 7 |       "layout": "raw",
 8 |       "timestamp": false
 9 |     }
10 |   },
11 |   "installation": {
12 |     "title": "Installation",
13 |     "theme": {
14 |       "breadcrumb": false,
15 |       "toc": false
16 |     }
17 |   },
18 |   "configuration": {
19 |     "title": "Configuration",
20 |     "theme": {
21 |       "breadcrumb": false
22 |     }
23 |   },
24 |   "Resources": {
25 |     "type": "separator",
26 |     "title": "Resources"
27 |   },
28 |   "guides": "Guides",
29 |   "troubleshooting": "Troubleshooting",
30 | 
31 |   "menubar-installation": {
32 |     "title": "Installation",
33 |     "href": "/installation",
34 |     "type": "page"
35 |   },
36 |   "menubar-configuration": {
37 |     "title": "Configuration",
38 |     "href": "/configuration",
39 |     "type": "page"
40 |   }
41 | }
42 | 


--------------------------------------------------------------------------------
/docs/src/pages/configuration.mdx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head';
 2 | import { Callout } from 'nextra-theme-docs';
 3 | 
 4 | import OgImage from '../components/OgImage';
 5 | 
 6 | <Head>
 7 |   <title>Configuration - Netlify Cloudinary</title>
 8 |   <meta name="description" content="Configuring the Cloudinary Build Plugin for Netlify." />
 9 |   <meta name="og:title" content="Configuring Netlify Cloudinary" />
10 |   <meta name="og:description" content="Configuring the Cloudinary Build Plugin for Netlify." />
11 | </Head>
12 | 
13 | <OgImage
14 |   title="Configuration"
15 |   twitterTitle="Configuring Netlify Cloudinary"
16 | />
17 | 
18 | # Configuring Cloudinary Build Plugin
19 | 
20 | ## Plugin Inputs
21 | 
22 | | Name            | Type    |Required | Example   | Description |
23 | |-----------------|---------|---------|-----------| ------------|
24 | | cloudName       | string  | No*     | mycloud   | Cloudinary Cloud Name |
25 | | cname           | string  | No      | domain.com | The custom domain name (CNAME) to use for building URLs (Advanced Plan Users) |
26 | | deliveryType    | string  | No      | fetch     | The method by which Cloudinary stores and delivers images (Ex: fetch, upload) |
27 | | folder          | string  | No      | myfolder  | Folder all media will be stored in. Defaults to Netlify site name |
28 | | imagesPath      | string/Array | No | /assets   | Local path application serves image assets from |
29 | | loadingStrategy | string  | No      | eager     | The method in which in which images are loaded (Ex: lazy, eager) |
30 | | maxSize         | object  | No      | See Below | See Below. |
31 | | privateCdn      | boolean | No      | true      | Enables Private CDN Distribution (Advanced Plan Users) |
32 | | uploadPreset    | string  | No      | my-preset | Defined set of asset upload defaults in Cloudinary |
33 | 
34 | <Callout emoji={false}>
35 |   Cloud Name must be set as an environment variable if not as an input
36 | </Callout>
37 | 
38 | ### Max Size
39 | 
40 | The Max Size option gives you the ability to configure a maximum width and height that images will scale down to, helping to avoid serving unnecessarily large images.
41 | 
42 | By default, the aspect ratio of the images are preserved, so by specifying both a maximum width and height, you're telling Cloudinary to scale the image down so that neither the width or height are beyond that value.
43 | 
44 | Additionally, the plugin uses a crop method of `limit` which avoids upscaling images if the images are already smaller than the given size, which reduces unnecessary upscaling as the browser will typically automatically handle.
45 | 
46 | The options available are:
47 | 
48 | | Name            | Type    | Example   | Description |
49 | |-----------------|---------|-----------| ------------|
50 | | dpr             | string  | 2.0       | Device Pixel Ratio which essentially multiplies the width and height for pixel density. |
51 | | height          | number  | 600       | Maximum height an image can be delivered as. |
52 | | width           | number  | 800       | Maximum width an image can be delivered as.  |
53 | 
54 | It's important to note that this will not change the width or height attribute of the image within the DOM, this will only be the image that is being delivered by Cloudinary.
55 | 
56 | ## Environment Variables
57 | 
58 | | Name                   | Required | Example  | Description |
59 | |------------------------|----------|----------|-------------|
60 | | CLOUDINARY_CLOUD_NAME  | No*      | mycloud  | Cloudinary Cloud Name |
61 | | CLOUDINARY_API_KEY     | No       | 1234     | Cloudinary API Key |
62 | | CLOUDINARY_API_SECRET  | No       | abcd1234 | Cloudinary API Secret |
63 | 
64 | <Callout emoji={false}>
65 |   Cloud Name must be set as an input variable if not as an environment variable
66 | </Callout>
67 | 
68 | ## Setting your Cloud Name
69 | 
70 | You have two options for setting your Cloud Name: plugin input or environment variable.
71 | 
72 | ### Netlify UI
73 | 
74 | Inside of your build settings, configure [build environment variable](https://docs.netlify.com/configure-builds/environment-variables) for the following:
75 | 
76 | ```
77 | Name: CLOUDINARY_CLOUD_NAME
78 | Value: <Your Cloud Name>
79 | ```
80 | 
81 | ### File-based Configuration
82 | 
83 | Inside your Netlify config, add the following input configurations under your netlify-plugin-cloudinary plugin:
84 | 
85 | ```toml
86 |   [plugins.inputs]
87 |   cloudName = "<Your Cloud Name>"
88 | ```


--------------------------------------------------------------------------------
/docs/src/pages/guides/_meta.json:
--------------------------------------------------------------------------------
1 | {
2 |   "delivery-type": "Delivery Type",
3 |   "images-path": "Images Path"
4 | }


--------------------------------------------------------------------------------
/docs/src/pages/guides/delivery-type.mdx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head';
 2 | import { Callout } from 'nextra-theme-docs';
 3 | 
 4 | import OgImage from '../../components/OgImage';
 5 | 
 6 | <Head>
 7 |   <title>Delivery Type - Netlify Cloudinary</title>
 8 |   <meta name="description" content="Learn how to configure your Cloudinary Delivery type for the Cloudinary Build Plugin for Netlify." />
 9 |   <meta name="og:title" content="Configuring Delivery Type with Netlify Cloudinary" />
10 |   <meta name="og:description" content="Learn how to configure your Cloudinary Delivery type for the Cloudinary Build Plugin for Netlify." />
11 | </Head>
12 | 
13 | <OgImage
14 |   title="Delivery Type"
15 |   twitterTitle="Configuring Delivery Type with Netlify Cloudinary"
16 | />
17 | 
18 | # Delivery Type (Fetch, Upload)
19 | 
20 | ## Fetch
21 | 
22 | **Default** - no additional configuration needed.
23 | 
24 | The fetch method allows you to use Cloudinary delivery by providing a remote URL.
25 | 
26 | <Callout emoji={false}>
27 |   If you are currently restricting Fetched URLs, you need to ensure your Netlify URL is listed under allowed fetch domains. Older accounts may restrict fetched images by default. Read more about [restricting the allowed fetch domains](https://cloudinary.com/documentation/fetch_remote_images#restricting_the_allowed_fetch_domains).
28 | </Callout>
29 | 
30 | Learn more about using delivering remote images with [fetch](https://cloudinary.com/documentation/fetch_remote_images).
31 | 
32 | ## Unsigned Uploads
33 | 
34 | Unsigned uploads require an additional [Upload Preset](https://cloudinary.com/documentation/upload_presets) set up and configured in your Cloudinary account.
35 | 
36 | Inside your Netlify config, add the following input configurations under your netlify-plugin-cloudinary plugin:
37 | 
38 | ```toml
39 | [[plugins]]
40 |   package = "netlify-plugin-cloudinary"
41 | 
42 |   [plugins.inputs]
43 |   cloudName = "[Your Cloudinary Cloud Name]"
44 |   deliveryType = "upload"
45 |   uploadPreset = "[Your Cloudinary Upload Preset]"
46 | ```
47 | 
48 | Uploading media to Cloudinary gives you more flexibility with your media upon delivery.
49 | 
50 | Learn more about [unsigned uploads](https://cloudinary.com/documentation/upload_images#unsigned_upload).
51 | 
52 | ## Signed Uploads
53 | 
54 | Signed uploads require you to set your API Key and API Secret as environment variables.
55 | 
56 | Inside your Netlify config, add the following input configurations under your netlify-plugin-cloudinary plugin:
57 | 
58 | ```toml
59 | [[plugins]]
60 |   package = "netlify-plugin-cloudinary"
61 | 
62 |   [plugins.inputs]
63 |   cloudName = "[Your Cloudinary Cloud Name]"
64 |   deliveryType = "upload"
65 | ```
66 | 
67 | Inside your environment variable configuration:
68 | 
69 | ```
70 | CLOUDINARY_API_KEY="[Your Cloudinary API Key]"
71 | CLOUDINARY_API_SECRET="[Your Cloudinary API Secret]"
72 | ```
73 | 
74 | <Callout emoji={false}>
75 |   Environment variables need to be configured in any environment that you're building your Netlify site.
76 | </Callout>
77 | 
78 | Uploading media to Cloudinary gives you more flexibility with your media upon delivery.
79 | 
80 | Learn more about [signed uploads](https://cloudinary.com/documentation/upload_images#uploading_assets_to_the_cloud).


--------------------------------------------------------------------------------
/docs/src/pages/guides/images-path.mdx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head';
 2 | 
 3 | import OgImage from '../../components/OgImage';
 4 | 
 5 | <Head>
 6 |   <title>Images Path - Netlify Cloudinary</title>
 7 |   <meta name="description" content="Learn how to configure where your local images are stored in Netlify for the Cloudinary Build Plugin." />
 8 |   <meta name="og:title" content="Configuring Images Path with Netlify Cloudinary" />
 9 |   <meta name="og:description" content="Learn how to configure where your local images are stored in Netlify for the Cloudinary Build Plugin." />
10 | </Head>
11 | 
12 | <OgImage
13 |   title="Images Path"
14 |   twitterTitle="Configuring Images Path with Netlify Cloudinary"
15 | />
16 | 
17 | # Changing the Location of Images
18 | 
19 | By default, the plugin will attempt to serve any image asset located in the `/images` directory as a Cloudinary asset.
20 | 
21 | This can be customized by passing in the `imagesPath` input.
22 | 
23 | Inside your Netlify config, add the following input configurations under your netlify-plugin-cloudinary plugin:
24 | 
25 | ```toml
26 | [[plugins]]
27 |   package = "netlify-plugin-cloudinary"
28 | 
29 |   [plugins.inputs]
30 |   cloudName = "[Your Cloudinary Cloud Name]"
31 |   imagesPath = "/my-path"
32 | ```
33 | 
34 | If you'd like to specify multiple locations for your images, you can configure `imagesPath` as an array:
35 | 
36 | ```toml
37 |   imagesPath = [ "/my-path", "/my-other-path" ]
38 | ```


--------------------------------------------------------------------------------
/docs/src/pages/index.mdx:
--------------------------------------------------------------------------------
 1 | ---
 2 | title: Netlify Cloudinary - Automatic Optimization at Scale
 3 | ---
 4 | 
 5 | import Head from 'next/head';
 6 | 
 7 | import Button from '../components/Button';
 8 | import OgImage from '../components/OgImage';
 9 | 
10 | <OgImage
11 |   title="Netlify Cloudinary"
12 |   twitterTitle="Netlify Cloudinary - Automatic Optimization at Scale"
13 | />
14 | 
15 | <div className="flex items-center h-[calc(100vh-var(--nextra-navbar-height))]">
16 |   <div className="max-w-5xl mx-auto grid gap-4 lg:gap-14 lg:grid-cols-2 -mt-[calc(var(--nextra-navbar-height)/2)]">
17 |     <div className="flex lg:justify-center flex-col order-2 lg:order-1">
18 |       <h1 className="text-5xl font-bold text-center lg:text-left mb-6">Netlify Cloudinary</h1>
19 |       <p className="text-xl text-center lg:text-left mb-6">Optimize images at scale on Netlify with Cloudinary</p>
20 |       <p className="text-center lg:text-left">
21 |         <Button href="/installation">Get Started</Button>
22 |       </p>
23 |     </div>
24 |     <div className="flex lg:justify-center flex-col order-1 lg:order-2 pb-8 lg:pb-0">
25 |       <div className="grid grid-cols-2 gap-12 items-center lg:block lg:relative w-full max-w-xs lg:max-w-xl lg:aspect-[8/6] mx-auto">
26 |         <picture className="lg:absolute lg:top-0 lg:left-0 w-full lg:w-1/2">
27 |           <source
28 |             width="378"
29 |             height="333"
30 |             srcSet="/images/netlify-logo-light.svg"
31 |             media="(prefers-color-scheme: dark)"
32 |           />
33 |           <img
34 |             width="378"
35 |             height="333"
36 |             src="/images/netlify-logo-dark.svg"
37 |             alt="Netlify Logo"
38 |           />
39 |         </picture>
40 |         <picture className="lg:absolute lg:bottom-0 lg:right-0 w-full lg:w-1/2">
41 |           <source
42 |             width="359"
43 |             height="156"
44 |             srcSet="/images/cloudinary-logo-light.svg"
45 |             media="(prefers-color-scheme: dark)"
46 |           />
47 |           <img
48 |             width="359"
49 |             height="156"
50 |             src="/images/cloudinary-logo-dark.svg"
51 |             alt="Cloudinary Logo"
52 |           />
53 |         </picture>
54 |       </div>
55 |     </div>
56 |   </div>
57 | </div>


--------------------------------------------------------------------------------
/docs/src/pages/installation.mdx:
--------------------------------------------------------------------------------
  1 | import Head from 'next/head';
  2 | import { Callout, Steps, Tab, Tabs } from 'nextra-theme-docs';
  3 | 
  4 | import OgImage from '../components/OgImage';
  5 | 
  6 | <Head>
  7 |   <title>Installation - Netlify Cloudinary</title>
  8 |   <meta name="description" content="How to install the Cloudinary Build Plugin for Netlify." />
  9 |   <meta name="og:title" content="Installing Netlify Cloudinary" />
 10 |   <meta name="og:description" content="How to install the Cloudinary Build Plugin for Netlify." />
 11 | </Head>
 12 | 
 13 | <OgImage
 14 |   title="Installation"
 15 |   twitterTitle="Installing Netlify Cloudinary"
 16 | />
 17 | 
 18 | # Installing Netlify Cloudinary
 19 | 
 20 | <Tabs items={['Netlify UI', 'File-Based Configuration']}>
 21 |   <Tab>
 22 |     <Steps>
 23 |       ### Enable the Integration
 24 | 
 25 |       The Cloudinary Build Plugin for Netlify is easily available as an integration right inside of Netlify.
 26 | 
 27 |       You can enable the plugin from the Integration page: https://www.netlify.com/integrations/cloudinary/
 28 | 
 29 |       <p className="mt-6">
 30 |         <img
 31 |           width="864"
 32 |           height="311"
 33 |           src="/screenshots/netlify-cloudinary-install-website.png"
 34 |           alt="Netlify Logo"
 35 |         />
 36 |       </p>
 37 | 
 38 |       Or you can find it in the Netlify dashboard by navigating to your site, selecting Integrations, searching for Cloudinary, then enabling the integration.
 39 | 
 40 |       ### Configure Your Cloudinary Account
 41 | 
 42 |       Add your Cloudinary Cloud Name as a [build environment variable](https://docs.netlify.com/configure-builds/environment-variables)
 43 | 
 44 |       ```
 45 |       Name: CLOUDINARY_CLOUD_NAME
 46 |       Value: <Your Cloud Name>
 47 |       ```
 48 | 
 49 |       ### Deploy!
 50 | 
 51 |       The Cloudinary Build Plugin runs during your Netlify build, meaning, you need to trigger a new deploy to see it in action.
 52 |     </Steps>
 53 |   </Tab>
 54 | 
 55 |   <Tab>
 56 |     <Steps>
 57 |       ### Add the Plugin
 58 | 
 59 |       Add the plugin to your Netlify config:
 60 | 
 61 |       ```toml
 62 |       [[plugins]]
 63 |         package = "netlify-plugin-cloudinary"
 64 |       ```
 65 | 
 66 |       ### Configure Your Cloudinary Account
 67 | 
 68 |       Configure your Cloudinary Cloud Name in your Netlify config file:
 69 | 
 70 |       ```toml
 71 |       [[plugins]]
 72 |         package = "netlify-plugin-cloudinary"
 73 | 
 74 |         [plugins.inputs]
 75 |         cloudName = "<Your Cloud Name>"
 76 |       ```
 77 | 
 78 |       ### Deploy!
 79 | 
 80 |       The Cloudinary Build Plugin runs during your Netlify build, meaning, you need to trigger a new deploy to see it in action.
 81 |     </Steps>
 82 |   </Tab>
 83 | </Tabs>
 84 | 
 85 | ## How it Works
 86 | 
 87 | ### Delivery Part 1: Replacing all static, on-page images with Cloudinary URLs
 88 | 
 89 | During the Netlify build process, the plugin is able to tap into the `onPostBuild` hook where we use [jsdom](https://github.com/jsdom/jsdom) to create a node-based representation of the DOM for each output HTML file, then walk through each node, and if it's an image, we replace the source with a Cloudinary URL.
 90 | 
 91 | Depending on the configuration, we'll either use the full URL for that image with the [Cloudinary fetch API](https://cloudinary.com/documentation/fetch_remote_images) or alternatively that image will be [uploaded](https://cloudinary.com/documentation/upload_images), where then it will be served by public ID from the Cloudinary account.
 92 | 
 93 | While this works great for a lot of cases and in particular the first load of that page, using a framework with clientside routing or features that mutate the DOM may prevent that Cloudinary URL from persisting, making all of that hard work disappear, meaning it will be served from the Netlify CDN or original remote source (which is fine, but that leads us to Part 2).
 94 | 
 95 | ### Delivery Part 2: Serving all assets from the /images directory from Cloudinary
 96 | 
 97 | To provide comprehensive coverage of images being served from Cloudinary, we take advantage of Netlify's dynamic redirects and serverless functions to map any image being served from the /images directory (or the configured `imagesPath`), redirect it to a serverless function, which then gets redirected to a Cloudinary URL.
 98 | 
 99 | Through this process, we're still able to afford the same option of using either the fetch or upload API depending on preference, where the latter would be uploaded if it's a new asset within the serverless function.
100 | 
101 | 
102 | ## Using Netlify Cloudinary
103 | 
104 | * [Configuration](/configuration): Learn how to configure the Cloudinary Build Plugin for Netlify


--------------------------------------------------------------------------------
/docs/src/pages/troubleshooting/401-error.mdx:
--------------------------------------------------------------------------------
 1 | import Head from 'next/head';
 2 | 
 3 | import OgImage from '../../components/OgImage';
 4 | 
 5 | <Head>
 6 |   <title>Troubleshooting 401 Errors - Netlify Cloudinary</title>
 7 |   <meta name="description" content="Learn how to troubleshoot 401 errors with the Cloudinary Build Plugin for Netlify." />
 8 |   <meta name="og:title" content="Troubleshooting 401 Errors with Netlify Cloudinary" />
 9 |   <meta name="og:description" content="Learn how to troubleshoot 401 errors with the Cloudinary Build Plugin for Netlify." />
10 | </Head>
11 | 
12 | <OgImage
13 |   title="Troubleshooting 401 Errors"
14 |   twitterTitle="Troubleshooting 401 Errors with Netlify Cloudinary"
15 | />
16 | 
17 | # Troubleshooting 401 Errors
18 | 
19 | ## I'm using the default settings, but my images 401
20 | 
21 | The plugin uses the fetch method by default and if you're receiving a 401 with a valid URL and valid Cloudinary account, you may be currently restricting fetched URLs.
22 | 
23 | You have two options to resolve this: adding your Netlify domain to the list of "allowed fetch domains" and removing the fetched URL restriction.
24 | 
25 | Adding your domain to the "allowed fetch domains" list is more secure by not allowing others to use your Cloudinary account with their own images. You can do this under Settings > Security > Allowed fetch domains.
26 | 
27 | Alternatively, you can remove the restriction and allow all fetched images to work by going to Settings > Security > Restricted media types and unchecking the box for Fetched URL.


--------------------------------------------------------------------------------
/docs/src/styles/globals.css:
--------------------------------------------------------------------------------
1 | @tailwind base;
2 | @tailwind components;
3 | @tailwind utilities;


--------------------------------------------------------------------------------
/docs/tailwind.config.js:
--------------------------------------------------------------------------------
 1 | /** @type {import('tailwindcss').Config} */
 2 | module.exports = {
 3 |   content: [
 4 |     "./app/**/*.{js,ts,jsx,tsx,md,mdx}",
 5 |     "./pages/**/*.{js,ts,jsx,tsx,md,mdx}",
 6 |     "./components/**/*.{js,ts,jsx,tsx,md,mdx}",
 7 |     // Or if using `src` directory:
 8 |     "./src/**/*.{js,ts,jsx,tsx,md,mdx}",
 9 |   ],
10 |   theme: {
11 |     extend: {},
12 |   },
13 |   plugins: [],
14 | }
15 | 
16 | 


--------------------------------------------------------------------------------
/docs/theme.config.tsx:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import { useRouter } from 'next/router';
 3 | import { DocsThemeConfig } from 'nextra-theme-docs'
 4 | 
 5 | const config: DocsThemeConfig = {
 6 |   logo: <strong>Netlify Cloudinary</strong>,
 7 |   project: {
 8 |     link: 'https://github.com/cloudinary-community/netlify-plugin-cloudinary',
 9 |   },
10 |   docsRepositoryBase: 'https://github.com/cloudinary-community/netlify-plugin-cloudinary',
11 |   useNextSeoProps() {
12 |     const { route } = useRouter()
13 |     if (route !== '/') {
14 |       return {
15 |         titleTemplate: '%s – Netlify Cloudinary'
16 |       }
17 |     }
18 |   },
19 |   head: (
20 |     <>
21 |       <meta name="viewport" content="width=device-width, initial-scale=1.0" />
22 | 
23 |       <title>Netlify Cloudinary - Automatic Optimization at Scale</title>
24 |       <meta name="description" content="Optimize and deliver all images in your Netlify site with Cloudinary." />
25 |       <meta name="og:title" content="Netlify Cloudinary - Automatic Optimization at Scale" />
26 |       <meta name="og:description" content="Optimize and deliver all images in your Netlify site with Cloudinary." />
27 |       <meta name="og:type" content="website" />
28 | 
29 |       <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
30 |       <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
31 |       <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
32 |       <link rel="manifest" href="/site.webmanifest" />
33 |       <meta name="theme-color" content="#000000" />
34 |     </>
35 |   ),
36 |   footer: {
37 |     text: `MIT ${new Date().getFullYear()} © Colby Fayock`,
38 |   },
39 |   sidebar: {
40 |     autoCollapse: true,
41 |     defaultMenuCollapseLevel: 1
42 |   }
43 | }
44 | 
45 | export default config
46 | 


--------------------------------------------------------------------------------
/docs/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": false,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "incremental": true,
11 |     "esModuleInterop": true,
12 |     "module": "esnext",
13 |     "moduleResolution": "node",
14 |     "resolveJsonModule": true,
15 |     "isolatedModules": true,
16 |     "jsx": "preserve"
17 |   },
18 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 |   "exclude": ["node_modules"]
20 | }
21 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/.eslintignore:
--------------------------------------------------------------------------------
1 | demo
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   env: {
 3 |     browser: true,
 4 |     es2022: true,
 5 |   },
 6 |   parser: '@typescript-eslint/parser',
 7 |   parserOptions: {
 8 |     ecmaVersion: 'latest',
 9 |     sourceType: 'module',
10 |   },
11 |   plugins: ['@typescript-eslint'],
12 |   extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
13 |   overrides: [
14 |     {
15 |       env: {
16 |         node: true,
17 |       },
18 |       files: ['.eslintrc.{js,cjs}'],
19 |     },
20 |   ],
21 |   rules: {
22 |     '@typescript-eslint/no-unused-vars': 'error',
23 |     // to enforce using type for object type definitions, can be type or interface
24 |     '@typescript-eslint/consistent-type-definitions': ['error', 'type'],
25 |   },
26 | }
27 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/.npmignore:
--------------------------------------------------------------------------------
1 | .env
2 | .eslintignore
3 | .eslintrc.cjs
4 | .prettierignore
5 | .prettierrc
6 | .setTestEnvVars.js
7 | node_modules
8 | src
9 | tsconfig.json


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/.prettierignore:
--------------------------------------------------------------------------------
1 | demo
2 | node_modules
3 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "semi": true,
3 |   "singleQuote": true,
4 |   "arrowParens": "avoid"
5 | }
6 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/manifest.yml:
--------------------------------------------------------------------------------
 1 | name: netlify-plugin-cloudinary
 2 | inputs:
 3 |   - name: cloudName
 4 |     required: false
 5 |     description: "Cloudinary Cloud Name - can be used as an input or environment variable via CLOUDINARY_CLOUD_NAME"
 6 |   - name: cname
 7 |     required: false
 8 |     description: "The custom domain name (CNAME) to use for building URLs (Advanced Plan Users)"
 9 |   - name: deliveryType
10 |     required: false
11 |     description: "The method in which Cloudinary stores and delivers images (Ex: fetch, upload)"
12 |     default: "fetch"
13 |   - name: folder
14 |     required: false
15 |     description: "Folder all media will be stored in. Defaults to Netlify site name"
16 |   - name: imagesPath
17 |     required: false
18 |     description: "Local path(s) application serves image assets from"
19 |     default: "/images"
20 |   - name: loadingStrategy
21 |     required: false
22 |     description: "The method in which in which images are loaded (Ex: lazy, eager)"
23 |     default: "lazy"
24 |   - name: maxSize
25 |     required: false
26 |     description: "Maximum dimensions (width and height) for an image to be delivered"
27 |   - name: privateCdn
28 |     required: false
29 |     description: "Enable Private CDN Distribution (Advanced Plan Users)"
30 |   - name: uploadPreset
31 |     required: false
32 |     description: "Defined set of asset upload defaults in Cloudinary"
33 |   - name: uploadConcurrency
34 |     required: false
35 |     description: "Maximum value of concurrent uploads"
36 |     default: 10
37 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "netlify-plugin-cloudinary",
 3 |   "version": "1.17.0",
 4 |   "description": "Supercharge images on your Netlify site with Cloudinary!",
 5 |   "main": "dist/index.js",
 6 |   "scripts": {
 7 |     "build": "tsc -p ./tsconfig.json",
 8 |     "lint": "eslint . --ext .ts",
 9 |     "format": "prettier  --write \"(src|test)/*.+(js|ts|json)\"",
10 |     "postpublish": "rm ./README.md",
11 |     "prepublishOnly": "cp ../README.md . && pnpm build",
12 |     "test": "vitest run",
13 |     "typecheck": "tsc --noEmit -p ./tsconfig.json"
14 |   },
15 |   "author": {
16 |     "name": "Colby Fayock",
17 |     "email": "hello@colbyfayock.com",
18 |     "url": "https://twitter.com/colbyfayock"
19 |   },
20 |   "license": "MIT",
21 |   "dependencies": {
22 |     "cloudinary": "^2.0.1",
23 |     "glob": "^10.3.3",
24 |     "jsdom": "21",
25 |     "node-fetch": "2",
26 |     "p-limit": "3.1.0"
27 |   },
28 |   "devDependencies": {
29 |     "@netlify/config": "20.8.1",
30 |     "@types/glob": "8.1.0",
31 |     "@types/jsdom": "21.1.2",
32 |     "@types/node-fetch": "2.6.4",
33 |     "@typescript-eslint/eslint-plugin": "6.5.0",
34 |     "@typescript-eslint/parser": "6.5.0",
35 |     "dotenv": "^16.3.1",
36 |     "eslint": "8.48.0",
37 |     "eslint-config-prettier": "9.0.0",
38 |     "eslint-config-standard-with-typescript": "39.0.0",
39 |     "eslint-plugin-import": "2.28.1",
40 |     "eslint-plugin-n": "16.0.2",
41 |     "eslint-plugin-promise": "6.1.1",
42 |     "prettier": "3.0.3",
43 |     "typescript": "5.2.2",
44 |     "vitest": "^0.34.6"
45 |   },
46 |   "engines": {
47 |     "node": ">=16"
48 |   }
49 | }
50 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/src/data/analytics.ts:
--------------------------------------------------------------------------------
1 | export const ANALYTICS_SDK_CODE = 'F';
2 | export const ANALYTICS_SDK_SEMVER = '0.0.0';
3 | export const ANALYTICS_PRODUCT = 'B';


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/src/data/cloudinary.ts:
--------------------------------------------------------------------------------
1 | export const PREFIX = 'cld'
2 | 
3 | export const PUBLIC_ASSET_PATH = `${PREFIX}-assets`
4 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/src/data/errors.ts:
--------------------------------------------------------------------------------
 1 | export const ERROR_ASSET_UPLOAD = 'Error uploading asset'
 2 | export const ERROR_API_CREDENTIALS_REQUIRED = 'Both your Cloudinary API Key and API Secret are required when using a Delivery Type of Upload. Please confirm the environment variables CLOUDINARY_API_KEY and CLOUDINARY_API_SECRET are configured.';
 3 | export const ERROR_CLOUD_NAME_REQUIRED = 'A Cloudinary Cloud Name is required. Please set cloudName input or use the environment variable CLOUDINARY_CLOUD_NAME';
 4 | export const ERROR_INVALID_IMAGES_PATH = 'Invalid asset path. Please make sure your imagesPath is defined.';
 5 | export const ERROR_NETLIFY_HOST_CLI_SUPPORT = 'Note: The Netlify CLI does not currently support the ability to determine the host locally, try deploying on Netlify.';
 6 | export const ERROR_NETLIFY_HOST_UNKNOWN = 'Cannot determine Netlify host, can not proceed with plugin.';
 7 | export const ERROR_SITE_NAME_REQUIRED =  'Cannot determine the site name, can not proceed with plugin';
 8 | export const ERROR_UPLOAD_PRESET = 'To use a delivery type of "upload", please use an uploadPreset for unsigned requests or an API Key and Secret for signed requests'
 9 | export const ERROR_INVALID_SRCSET = 'Invalid srcset path. Please make sure the srcset is defined.'
10 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/src/index.ts:
--------------------------------------------------------------------------------
  1 | import fs from 'node:fs/promises';
  2 | import path from 'node:path';
  3 | import { glob } from 'glob';
  4 | import pLimit from 'p-limit';
  5 | 
  6 | import { Inputs } from './types/integration';
  7 | 
  8 | import {
  9 |   configureCloudinary,
 10 |   updateHtmlImagesToCloudinary,
 11 |   getCloudinaryUrl,
 12 |   Assets,
 13 |   getTransformationsFromInputs
 14 | } from './lib/cloudinary';
 15 | import { findAssetsByPath } from './lib/util';
 16 | 
 17 | import { PUBLIC_ASSET_PATH } from './data/cloudinary';
 18 | import {
 19 |   ERROR_API_CREDENTIALS_REQUIRED,
 20 |   ERROR_CLOUD_NAME_REQUIRED,
 21 |   ERROR_INVALID_IMAGES_PATH,
 22 |   ERROR_NETLIFY_HOST_CLI_SUPPORT,
 23 |   ERROR_NETLIFY_HOST_UNKNOWN,
 24 |   ERROR_SITE_NAME_REQUIRED,
 25 | } from './data/errors';
 26 | 
 27 | /**
 28 |  * Type needs improvement
 29 |  * Information was found here <a href="https://docs.netlify.com/integrations/build-plugins/create-plugins/#netlifyconfig">Netlify Config</a>
 30 |  */
 31 | 
 32 | type NetlifyConfig = {
 33 |   redirects: Array<{
 34 |     from: string;
 35 |     to?: string;
 36 |     status?: number;
 37 |     force?: boolean;
 38 |     signed?: string;
 39 |     query?: Partial<Record<string, string>>;
 40 |     headers?: Partial<Record<string, string>>;
 41 |     conditions?: Partial<
 42 |       Record<'Language' | 'Role' | 'Country' | 'Cookie', readonly string[]>
 43 |     >;
 44 |   }>;
 45 |   headers: Array<{
 46 |     for: string;
 47 |     values: unknown; // marked as unknown because is not required here.
 48 |   }>;
 49 |   functions: {
 50 |     directory: string;
 51 |   };
 52 |   build: {
 53 |     command: string;
 54 |     environment: Record<string, string>;
 55 |     edge_functions: string;
 56 |     processing: Record<string, unknown>;
 57 |   };
 58 | };
 59 | type Constants = {
 60 |   CONFIG_PATH?: string;
 61 |   PUBLISH_DIR: string;
 62 |   FUNCTIONS_SRC: string;
 63 |   FUNCTIONS_DIST: string;
 64 |   IS_LOCAL: boolean;
 65 |   NETLIFY_BUILD_VERSION: `${string}.${string}.${string}`;
 66 |   SITE_ID: string;
 67 | };
 68 | 
 69 | 
 70 | 
 71 | type Utils = {
 72 |   build: {
 73 |     failBuild: (message: string, { error }?: { error: Error }) => void;
 74 |     failPlugin: (message: string, { error }?: { error: Error }) => void;
 75 |     cancelBuild: (message: string, { error }?: { error: Error }) => void;
 76 |   };
 77 |   status: {
 78 |     show: ({
 79 |       title,
 80 |       summary,
 81 |       text,
 82 |     }: {
 83 |       title: string;
 84 |       summary: string;
 85 |       text: string;
 86 |     }) => void;
 87 |   };
 88 | };
 89 | type OnBuildParams = {
 90 |   netlifyConfig: NetlifyConfig;
 91 |   constants: Constants;
 92 |   inputs: Inputs;
 93 |   utils: Utils;
 94 | };
 95 | type OnPostBuildParams = Omit<OnBuildParams, 'netlifyConfig'>;
 96 | 
 97 | const CLOUDINARY_ASSET_DIRECTORIES = [
 98 |   {
 99 |     name: 'images',
100 |     inputKey: 'imagesPath',
101 |     path: '/images',
102 |   },
103 | ];
104 | 
105 | const DEFAULT_CONCURRENCY = 10;
106 | 
107 | /**
108 |  * TODO
109 |  * - Handle srcset
110 |  */
111 | 
112 | const _cloudinaryAssets = { images: {} } as Assets;
113 | const globalErrors = [];
114 | 
115 | export async function onBuild({
116 |   netlifyConfig,
117 |   constants,
118 |   inputs,
119 |   utils,
120 | }: OnBuildParams) {
121 |   console.log('[Cloudinary] Creating redirects...');
122 | 
123 |   let host = process.env.URL;
124 | 
125 |   if (process.env.CONTEXT === 'branch-deploy' || process.env.CONTEXT === 'deploy-preview') {
126 |     host = process.env.DEPLOY_PRIME_URL || ''
127 |   }
128 | 
129 |   console.log(`[Cloudinary] Using host: ${host}`);
130 | 
131 |   const { PUBLISH_DIR } = constants;
132 | 
133 |   const {
134 |     cname,
135 |     deliveryType,
136 |     folder = process.env.SITE_NAME || '',
137 |     imagesPath = inputs.imagesPath || CLOUDINARY_ASSET_DIRECTORIES.find(
138 |       ({ inputKey }) => inputKey === 'imagesPath',
139 |     )?.path,
140 |     maxSize,
141 |     privateCdn,
142 |     uploadPreset,
143 |     uploadConcurrency = DEFAULT_CONCURRENCY,
144 |   } = inputs;
145 | 
146 |   if (!folder) {
147 |     console.error(`[Cloudinary] ${ERROR_SITE_NAME_REQUIRED}`);
148 |     utils.build.failPlugin(ERROR_SITE_NAME_REQUIRED);
149 |     return;
150 |   }
151 | 
152 |   if (!host && deliveryType === 'fetch') {
153 |     console.warn(`[Cloudinary] ${ERROR_NETLIFY_HOST_UNKNOWN}`);
154 |     console.log(`[Cloudinary] ${ERROR_NETLIFY_HOST_CLI_SUPPORT}`);
155 |     return;
156 |   }
157 | 
158 |   const cloudName = process.env.CLOUDINARY_CLOUD_NAME || inputs.cloudName;
159 |   const apiKey = process.env.CLOUDINARY_API_KEY;
160 |   const apiSecret = process.env.CLOUDINARY_API_SECRET;
161 | 
162 |   if (!cloudName) {
163 |     console.error(`[Cloudinary] ${ERROR_CLOUD_NAME_REQUIRED}`);
164 |     utils.build.failBuild(ERROR_CLOUD_NAME_REQUIRED);
165 |     return;
166 |   }
167 | 
168 |   if (deliveryType === 'upload' && (!apiKey || !apiSecret)) {
169 |     console.error(`[Cloudinary] ${ERROR_API_CREDENTIALS_REQUIRED}`);
170 |     utils.build.failBuild(ERROR_API_CREDENTIALS_REQUIRED);
171 |     return;
172 |   }
173 | 
174 |   configureCloudinary({
175 |     // Base credentials
176 |     cloudName,
177 |     apiKey,
178 |     apiSecret,
179 | 
180 |     // Configuration
181 |     cname,
182 |     privateCdn,
183 |   });
184 | 
185 |   const transformations = getTransformationsFromInputs(inputs);
186 | 
187 |   // Look for any available images in the provided imagesPath to collect
188 |   // asset details and to grab a Cloudinary URL to use later
189 | 
190 |   if (typeof imagesPath === 'undefined') {
191 |     console.error(`[Cloudinary] ${ERROR_INVALID_IMAGES_PATH}`)
192 |     throw new Error(ERROR_INVALID_IMAGES_PATH);
193 |   }
194 | 
195 |   const imagesFiles = findAssetsByPath({
196 |     baseDir: PUBLISH_DIR,
197 |     path: imagesPath,
198 |   });
199 | 
200 |   if (imagesFiles.length === 0) {
201 |     console.warn(`[Cloudinary] No image files found in ${imagesPath}`);
202 |     console.log(
203 |       `[Cloudinary] Did you update your images path? You can set the imagesPath input in your Netlify config.`,
204 |     );
205 |   }
206 | 
207 |   const limitUploadFiles = pLimit(uploadConcurrency);
208 |   const uploadsQueue = imagesFiles.map((image, i) => {
209 |     const publishPath = image.replace(PUBLISH_DIR, '');
210 |     return limitUploadFiles(() => {
211 |       async function uploadFile() {
212 |         try {
213 |           const cloudinary = await getCloudinaryUrl({
214 |             deliveryType,
215 |             folder,
216 |             path: publishPath,
217 |             localDir: PUBLISH_DIR,
218 |             uploadPreset,
219 |             remoteHost: host,
220 |             transformations
221 |           });
222 | 
223 |           return {
224 |             publishPath,
225 |             ...cloudinary,
226 |           };
227 |         } catch(e) {
228 |           globalErrors.push(e);
229 |         }
230 |       }
231 |       return uploadFile();
232 |     })
233 |   })
234 | 
235 |   _cloudinaryAssets.images = await Promise.all(uploadsQueue);
236 | 
237 |   // If the delivery type is set to upload, we need to be able to map individual assets based on their public ID,
238 |   // which would require a dynamic middle solution, but that adds more hops than we want, so add a new redirect
239 |   // for each asset uploaded
240 | 
241 |   if (deliveryType === 'upload') {
242 |     await Promise.all(
243 |       Object.keys(_cloudinaryAssets).flatMap(mediaType => {
244 |         // @ts-expect-error what are the expected mediaTypes that will be stored in _cloudinaryAssets
245 |         if (Object.hasOwn(_cloudinaryAssets[mediaType], 'map')) {
246 |           // @ts-expect-error what are the expected mediaTypes that will be stored in _cloudinaryAssets
247 |           return _cloudinaryAssets[mediaType].map(async asset => {
248 |             const { publishPath, cloudinaryUrl } = asset;
249 |             netlifyConfig.redirects.unshift({
250 |               from: `${publishPath}*`,
251 |               to: cloudinaryUrl,
252 |               status: 302,
253 |               force: true,
254 |             });
255 |           });
256 |         }
257 |       }),
258 |     );
259 |   }
260 | 
261 |   // If the delivery type is fetch, we're able to use the public URL and pass it right along "as is", so
262 |   // we can create generic redirects. The tricky thing is to avoid a redirect loop, we modify the
263 |   // path, so that we can safely allow Cloudinary to fetch the media remotely
264 | 
265 |   if (deliveryType === 'fetch') {
266 |     await Promise.all(
267 |       CLOUDINARY_ASSET_DIRECTORIES.map(
268 |         async ({ inputKey, path: defaultPath }) => {
269 |           let mediaPaths = inputs[inputKey as keyof Inputs] || defaultPath;
270 | 
271 |           // Unsure how to type the above so that Inputs['privateCdn'] doesnt mess up types here
272 | 
273 |           if (!Array.isArray(mediaPaths) && typeof mediaPaths !== 'string') return;
274 | 
275 |           if (!Array.isArray(mediaPaths)) {
276 |             mediaPaths = [mediaPaths];
277 |           }
278 | 
279 |           mediaPaths.forEach(async mediaPath => {
280 |             mediaPath = mediaPath.split(path.win32.sep).join(path.posix.sep);
281 |             const cldAssetPath = `/${path.posix.join(PUBLIC_ASSET_PATH, mediaPath)}`;
282 |             const cldAssetUrl = `${host}${cldAssetPath}`;
283 |             try {
284 |               const { cloudinaryUrl: assetRedirectUrl } = await getCloudinaryUrl({
285 |                 deliveryType: 'fetch',
286 |                 folder,
287 |                 path: `${cldAssetUrl}/:splat`,
288 |                 uploadPreset,
289 |               });
290 | 
291 |               netlifyConfig.redirects.unshift({
292 |                 from: `${cldAssetPath}/*`,
293 |                 to: `${mediaPath}/:splat`,
294 |                 status: 200,
295 |                 force: true,
296 |               });
297 | 
298 |               netlifyConfig.redirects.unshift({
299 |                 from: `${mediaPath}/*`,
300 |                 to: assetRedirectUrl,
301 |                 status: 302,
302 |                 force: true,
303 |               });
304 |             } catch (error) {
305 |               globalErrors.push(error)
306 |             }
307 |           })
308 |         })
309 |     )
310 |   }
311 | 
312 | 
313 | }
314 | 
315 | // Post build looks through all of the output HTML and rewrites any src attributes to use a cloudinary URL
316 | // This only solves on-page references until any JS refreshes the DOM
317 | 
318 | export async function onPostBuild({
319 |   constants,
320 |   inputs,
321 |   utils,
322 | }: OnPostBuildParams) {
323 |   console.log('[Cloudinary] Replacing on-page images with Cloudinary URLs...');
324 | 
325 |   let host = process.env.URL;
326 | 
327 |   if (process.env.CONTEXT === 'branch-deploy' || process.env.CONTEXT === 'deploy-preview') {
328 |     host = process.env.DEPLOY_PRIME_URL || ''
329 |   }
330 | 
331 | 
332 |   console.log(`[Cloudinary] Using host: ${host}`);
333 | 
334 |   const { PUBLISH_DIR } = constants;
335 |   const {
336 |     cname,
337 |     deliveryType,
338 |     folder = process.env.SITE_NAME,
339 |     loadingStrategy = inputs.loadingStrategy || 'lazy',
340 |     privateCdn,
341 |     uploadPreset,
342 |   } = inputs;
343 | 
344 |   if (!folder) {
345 |     console.error(`[Cloudinary] ${ERROR_SITE_NAME_REQUIRED}`);
346 |     utils.build.failPlugin(ERROR_SITE_NAME_REQUIRED);
347 |     return;
348 |   }
349 | 
350 |   const cloudName = process.env.CLOUDINARY_CLOUD_NAME || inputs.cloudName;
351 |   const apiKey = process.env.CLOUDINARY_API_KEY;
352 |   const apiSecret = process.env.CLOUDINARY_API_SECRET;
353 | 
354 |   if (!cloudName) {
355 |     console.error(`[Cloudinary] ${ERROR_CLOUD_NAME_REQUIRED}`);
356 |     utils.build.failBuild(ERROR_CLOUD_NAME_REQUIRED);
357 |     return;
358 |   }
359 | 
360 |   if (deliveryType === 'upload' && (!apiKey || !apiSecret)) {
361 |     console.error(`[Cloudinary] ${ERROR_API_CREDENTIALS_REQUIRED}`);
362 |     utils.build.failBuild(ERROR_API_CREDENTIALS_REQUIRED);
363 |     return;
364 |   }
365 | 
366 |   configureCloudinary({
367 |     // Base credentials
368 |     cloudName,
369 |     apiKey,
370 |     apiSecret,
371 | 
372 |     // Configuration
373 |     cname,
374 |     privateCdn,
375 |   });
376 | 
377 |   const transformations = getTransformationsFromInputs(inputs);
378 | 
379 |   // Find all HTML source files in the publish directory
380 | 
381 |   const pages = glob.sync(`${PUBLISH_DIR}/**/*.html`);
382 | 
383 |   const results = await Promise.all(
384 |     pages.map(async page => {
385 |       const sourceHtml = await fs.readFile(page, 'utf-8');
386 | 
387 |       const { html, errors } = await updateHtmlImagesToCloudinary(sourceHtml, {
388 |         assets: _cloudinaryAssets,
389 |         deliveryType,
390 |         uploadPreset,
391 |         folder,
392 |         loadingStrategy,
393 |         localDir: PUBLISH_DIR,
394 |         remoteHost: host,
395 |         transformations
396 |       });
397 | 
398 |       await fs.writeFile(page, html);
399 | 
400 |       return {
401 |         page,
402 |         errors,
403 |       };
404 |     }),
405 |   );
406 | 
407 |   const errors = results.filter(({ errors }) => errors.length > 0);
408 |   // Collect the errors in the global scope to be used in the summary onEnd
409 |   globalErrors.push(...errors)
410 | 
411 | }
412 | 
413 | 
414 | export function onEnd({ utils }: { utils: Utils }) {
415 |   const summary = globalErrors.length > 0 ? `Cloudinary build plugin completed with ${globalErrors.length} errors` : "Cloudinary build plugin completed successfully"
416 |   const text = globalErrors.length > 0 ? `The build process found ${globalErrors.length} errors. Check build logs for more information` : "No errors found during build"
417 |   utils.status.show({
418 |     title: "[Cloudinary] Done.",
419 |     // Required.
420 |     summary,
421 |     text
422 |   });
423 | }
424 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/src/lib/cloudinary.ts:
--------------------------------------------------------------------------------
  1 | import crypto from 'crypto'
  2 | import path from 'path'
  3 | import fetch from 'node-fetch'
  4 | import { JSDOM } from 'jsdom'
  5 | import { v2 as cloudinary, ConfigOptions, TransformationOptions } from 'cloudinary'
  6 | 
  7 | import { ANALYTICS_SDK_CODE, ANALYTICS_SDK_SEMVER, ANALYTICS_PRODUCT } from '../data/analytics';
  8 | import { isRemoteUrl, determineRemoteUrl } from './util'
  9 | import { ERROR_API_CREDENTIALS_REQUIRED, ERROR_ASSET_UPLOAD, ERROR_CLOUD_NAME_REQUIRED, ERROR_UPLOAD_PRESET } from '../data/errors'
 10 | 
 11 | import { Inputs } from '../types/integration';
 12 | 
 13 | type CloudinaryConfig = {
 14 |   apiKey?: string;
 15 |   apiSecret?: string;
 16 |   cloudName: string;
 17 |   cname?: string;
 18 |   privateCdn?: boolean;
 19 | }
 20 | type DeliveryType =
 21 |   string
 22 |   | "upload"
 23 |   | "private"
 24 |   | "authenticated"
 25 |   | "fetch"
 26 |   | "multi"
 27 |   | "text"
 28 |   | "asset"
 29 |   | "list"
 30 |   | "facebook"
 31 |   | "twitter"
 32 |   | "twitter_name"
 33 |   | "instagram"
 34 |   | "gravatar"
 35 |   | "youtube"
 36 |   | "hulu"
 37 |   | "vimeo"
 38 |   | "animoto"
 39 |   | "worldstarhiphop"
 40 |   | "dailymotion";
 41 | 
 42 | type UploadOptions = {
 43 |   folder: string;
 44 |   public_id: string;
 45 |   overwrite: boolean
 46 |   upload_preset?: string
 47 | }
 48 | 
 49 | type FetchDelivery = {
 50 |   deliveryType: 'fetch';
 51 |   remoteHost: string;
 52 | }
 53 | 
 54 | type OtherDelivery = {
 55 |   deliveryType: Omit<DeliveryType, 'fetch'>;
 56 |   remoteHost?: string
 57 | }
 58 | 
 59 | export type CloudinaryOptions = {
 60 |   folder: string,
 61 |   path: string;
 62 |   localDir?: string;
 63 |   uploadPreset: string;
 64 |   transformations?: Array<TransformationOptions>;
 65 | } & (FetchDelivery | OtherDelivery)
 66 | 
 67 | export type CloudinaryAnalytics = {
 68 |   sdkCode?: string;
 69 |   sdkSemver?: string;
 70 |   techVersion?: string;
 71 |   product?: string;
 72 | }
 73 | 
 74 | export type Assets = {
 75 |   // eslint-disable-next-line @typescript-eslint/no-explicit-any
 76 |   images: Array<any>
 77 | }
 78 | 
 79 | type UpdateCloudinaryOptions = Omit<CloudinaryOptions, 'path'> & {
 80 |   assets: Assets;
 81 |   loadingStrategy: string;
 82 | }
 83 | 
 84 | /**
 85 |  * getCloudinary
 86 |  */
 87 | 
 88 | export function getCloudinary(config: CloudinaryOptions & CloudinaryConfig) {
 89 |   if (!config) return cloudinary
 90 |   return configureCloudinary(config)
 91 | }
 92 | 
 93 | 
 94 | /**
 95 |  * configureCloudinary
 96 |  */
 97 | export function configureCloudinary(config: CloudinaryConfig) {
 98 |   const cloudinaryConfig: ConfigOptions = {
 99 |     cloud_name: config.cloudName,
100 |     api_key: config.apiKey,
101 |     api_secret: config.apiSecret,
102 |     private_cdn: config.privateCdn,
103 |     secure: true
104 |   }
105 | 
106 |   if (config.cname) {
107 |     cloudinaryConfig.secure_distribution = config.cname;
108 |     // When configuring a cname, we need to additionally set private CDN
109 |     // to be true in order to work properly, which may not be obvious
110 |     // to those setting it up
111 |     cloudinaryConfig.private_cdn = true;
112 |   }
113 | 
114 |   cloudinary.config(cloudinaryConfig);
115 | 
116 |   return cloudinary
117 | }
118 | 
119 | 
120 | /**
121 |  * createPublicId
122 |  */
123 | 
124 | export async function createPublicId({ path: filePath }: { path: string }) {
125 |   const hash = crypto.createHash('md5')
126 | 
127 |   const { name: imgName } = path.parse(filePath)
128 | 
129 |   if (!isRemoteUrl(filePath)) {
130 |     hash.update(filePath)
131 |   } else {
132 |     const response = await fetch(filePath)
133 |     const buffer = await response.buffer()
134 |     hash.update(buffer)
135 |   }
136 | 
137 |   const digest = hash.digest('hex')
138 | 
139 |   return `${imgName}-${digest}`
140 | }
141 | 
142 | 
143 | /**
144 |  * getCloudinaryUrl
145 |  */
146 | 
147 | export async function getCloudinaryUrl(options: CloudinaryOptions, analytics?: CloudinaryAnalytics) {
148 |   const {
149 |     deliveryType,
150 |     folder,
151 |     path: filePath,
152 |     localDir,
153 |     remoteHost,
154 |     transformations = [],
155 |     uploadPreset,
156 |   } = options
157 | 
158 |   const {
159 |     cloud_name: cloudName,
160 |     api_key: apiKey,
161 |     api_secret: apiSecret,
162 |   } = cloudinary.config()
163 |   const canSignUpload = apiKey && apiSecret
164 | 
165 |   if (!cloudName) {
166 |     throw new Error(`[Cloudinary] ${ERROR_CLOUD_NAME_REQUIRED}`)
167 |   }
168 | 
169 |   if (deliveryType === 'upload' && !canSignUpload && !uploadPreset) {
170 |     if (!uploadPreset) {
171 |       throw new Error(`[Cloudinary] ${ERROR_UPLOAD_PRESET}`)
172 |     }
173 |     throw new Error(`[Cloudinary] ${ERROR_API_CREDENTIALS_REQUIRED}`)
174 |   }
175 | 
176 |   let fileLocation
177 |   let publicId
178 | 
179 |   if (deliveryType === 'fetch') {
180 |     // fetch allows us to pass in a remote URL to the Cloudinary API
181 |     // which it will cache and serve from the CDN, but not store
182 | 
183 |     fileLocation = determineRemoteUrl(filePath, remoteHost as string)
184 |     publicId = fileLocation
185 |   } else if (deliveryType === 'upload') {
186 |     // upload will actually store the image in the Cloudinary account
187 |     // and subsequently serve that stored image
188 | 
189 |     // If our image is locally sourced, we need to obtain the full
190 |     // local relative path so that we can tell Cloudinary where
191 |     // to upload from
192 | 
193 |     let fullPath = filePath
194 | 
195 |     if (!isRemoteUrl(fullPath)) {
196 |       fullPath = path.join(localDir ?? '', fullPath)
197 |     }
198 | 
199 |     const id = await createPublicId({
200 |       path: fullPath,
201 |     })
202 | 
203 |     const uploadOptions: UploadOptions = {
204 |       folder,
205 |       public_id: id,
206 |       overwrite: false,
207 |     }
208 | 
209 |     if (uploadPreset) {
210 |       uploadOptions.upload_preset = uploadPreset
211 |     }
212 | 
213 |     let results
214 |     const maxAttempts = 3; 
215 | 
216 |     for (let attempt = 0; attempt < maxAttempts; attempt++) {
217 |       try {
218 |         if (canSignUpload) {
219 |           // We need an API Key and Secret to use signed uploading
220 |           results = await cloudinary.uploader.upload(fullPath, {
221 |             ...uploadOptions,
222 |           })
223 |           break;
224 |         }
225 |         else {
226 |           // If we want to avoid signing our uploads, we don't need our API Key and Secret,
227 |           // however, we need to provide an uploadPreset
228 |           results = await cloudinary.uploader.unsigned_upload(
229 |             fullPath,
230 |             uploadPreset,
231 |             {
232 |               ...uploadOptions,
233 |             },
234 |           )
235 |           break;
236 |         }
237 |       } catch (error) {
238 |         console.error(`[Cloudinary] Attempt ${attempt + 1} - ${ERROR_ASSET_UPLOAD}`);
239 |         console.error(`[Cloudinary] Attempt ${attempt + 1} - \tpath: ${fullPath}`)
240 |         if (attempt === maxAttempts - 1) {
241 |           // If it's the last attempt, rethrow the error or handle it accordingly
242 |           throw Error(ERROR_ASSET_UPLOAD);
243 |         } else {
244 |           await new Promise(resolve => setTimeout(resolve, 500));      
245 |         }
246 |       }
247 |     }
248 | 
249 |     // Finally use the stored public ID to grab the image URL
250 | 
251 |     const { public_id } = results
252 |     publicId = public_id
253 |     fileLocation = fullPath
254 |   }
255 | 
256 |   const cloudinaryUrl = cloudinary.url(publicId, {
257 |     type: deliveryType,
258 |     secure: true,
259 |     transformation: [
260 |       {
261 |         fetch_format: 'auto',
262 |         quality: 'auto',
263 |       },
264 |       ...transformations
265 |     ],
266 |     urlAnalytics: true,
267 |     sdkCode: ANALYTICS_SDK_CODE,
268 |     sdkSemver: ANALYTICS_SDK_SEMVER,
269 |     techVersion: '0.0.0',
270 |     product: ANALYTICS_PRODUCT,
271 |     ...analytics
272 |   });
273 |   
274 |   return {
275 |     sourceUrl: fileLocation,
276 |     cloudinaryUrl,
277 |     publicId,
278 |   }
279 | }
280 | 
281 | /**
282 |  * updateHtmlImagesToCloudinary
283 |  */
284 | 
285 | // function to check for assets previously build by Cloudinary
286 | function getAsset(imgUrl: string, assets: Assets) {
287 |   const cloudinaryAsset =
288 |     assets &&
289 |     Array.isArray(assets.images) &&
290 |     assets.images.find(({ publishPath, publishUrl } = {}) => {
291 |       return [publishPath, publishUrl].includes(imgUrl)
292 |     })
293 | 
294 |   return cloudinaryAsset
295 | }
296 | 
297 | export async function updateHtmlImagesToCloudinary(html: string, options: UpdateCloudinaryOptions, analytics?: CloudinaryAnalytics) {
298 |   const {
299 |     assets,
300 |     deliveryType,
301 |     uploadPreset,
302 |     folder,
303 |     localDir,
304 |     remoteHost,
305 |     loadingStrategy,
306 |     transformations
307 |   } = options
308 | 
309 |   const errors = []
310 |   const dom = new JSDOM(html)
311 | 
312 |   // Loop through all images found in the DOM and swap the source with
313 |   // a Cloudinary URL
314 | 
315 |   const images = Array.from(dom.window.document.querySelectorAll('img'))
316 | 
317 |   for (const $img of images) {
318 |     const imgSrc = $img.getAttribute('src') as string // @TODO can this be really be null at this point?
319 |     let cloudinaryUrl
320 | 
321 |     // Check to see if we have an existing asset already to pick from
322 |     // Look at both the path and full URL
323 | 
324 |     const asset = getAsset(imgSrc, assets)
325 | 
326 |     if (asset && deliveryType === 'upload') {
327 |       cloudinaryUrl = asset.cloudinaryUrl
328 |     }
329 | 
330 |     // If we don't have an asset and thus don't have a Cloudinary URL, create
331 |     // one for our asset
332 |     if (!cloudinaryUrl) {
333 |       try {
334 |         const { cloudinaryUrl: url } = await getCloudinaryUrl({
335 |           deliveryType,
336 |           folder,
337 |           path: imgSrc,
338 |           localDir,
339 |           uploadPreset,
340 |           remoteHost,
341 |           transformations
342 |         }, analytics)
343 |         cloudinaryUrl = url
344 |       } catch (e) {
345 |         if (e instanceof Error) {
346 |           errors.push({
347 |             imgSrc,
348 |             message: e.message
349 |           })
350 |         }
351 | 
352 |         continue
353 |       }
354 |     }
355 | 
356 |     $img.setAttribute('src', cloudinaryUrl)
357 |     $img.setAttribute('loading', loadingStrategy)
358 | 
359 |     // convert srcset images to cloudinary
360 | 
361 |     const srcset = $img.getAttribute('srcset')
362 | 
363 |     if (srcset) {
364 |       // convert all srcset urls to cloudinary urls using getCloudinaryUrl function in a Promise.all
365 | 
366 |       const srcsetUrls = srcset.split(',').map(url => url.trim().split(' '))
367 | 
368 |       const srcsetUrlsPromises = srcsetUrls.map(url => {
369 |         const exists = getAsset(url[0], assets)
370 |         if (exists && deliveryType === 'upload') {
371 |           return exists.cloudinaryUrl
372 |         }
373 |         try {
374 | 
375 |           return getCloudinaryUrl({
376 |             deliveryType,
377 |             folder,
378 |             path: url[0],
379 |             localDir,
380 |             uploadPreset,
381 |             remoteHost,
382 |           }, analytics)
383 |         } catch (e) {
384 |           if (e instanceof Error) {
385 |             errors.push({
386 |               imgSrc,
387 |               message: e.message
388 |             })
389 |           }
390 | 
391 |         }
392 |       })
393 | 
394 |       const srcsetUrlsCloudinary = await Promise.all(srcsetUrlsPromises)
395 |       const srcsetUrlsCloudinaryString = srcsetUrlsCloudinary
396 |         .map(
397 |           (urlCloudinary, index) =>
398 |             `${urlCloudinary.cloudinaryUrl} ${srcsetUrls[index][1]}`,
399 |         )
400 |         .join(', ')
401 | 
402 |       $img.setAttribute('srcset', srcsetUrlsCloudinaryString)
403 |     }
404 | 
405 |     // Look for any preload tags that reference the image URLs. A specific use case here
406 |     // is Next.js App Router hen using the Image component.
407 | 
408 |     const $preload = dom.window.document.querySelector(
409 |       `link[rel="preload"][as="image"][href="${imgSrc}"]`,
410 |     )
411 | 
412 |     if ($preload) {
413 |       $preload.setAttribute('href', cloudinaryUrl)
414 |     }
415 |   }
416 | 
417 |   return {
418 |     html: dom.serialize(),
419 |     errors,
420 |   }
421 | }
422 | 
423 | /**
424 |  * getTransformationsFromInputs
425 |  */
426 | 
427 | export function getTransformationsFromInputs(inputs: Inputs) {
428 |   const { maxSize } = inputs;
429 | 
430 |   const transformations: CloudinaryOptions['transformations'] = [];
431 | 
432 |   if ( typeof maxSize === 'object' ) {
433 |     transformations.push({
434 |       height: maxSize.height,
435 |       width: maxSize.width,
436 |       crop: 'limit',
437 |       dpr: maxSize.dpr
438 |     })
439 |   }
440 |   return transformations;
441 | }
442 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/src/lib/util.ts:
--------------------------------------------------------------------------------
 1 | import path from 'node:path';
 2 | import { glob } from 'glob';
 3 | 
 4 | /**
 5 |  * isRemoteUrl
 6 |  */
 7 | 
 8 | export function isRemoteUrl(url: string) {
 9 |   return url.startsWith('http')
10 | }
11 | 
12 | 
13 | /**
14 |  * determineRemoteUrl
15 |  */
16 | 
17 | export function determineRemoteUrl(url:string, host: string) {
18 |   if (isRemoteUrl(url)) return url
19 | 
20 |   if (!url.startsWith('/')) {
21 |     url = `/${url}`
22 |   }
23 | 
24 |   url = `${host}${url}`
25 | 
26 |   return url
27 | }
28 | 
29 | 
30 | /**
31 |  * getQueryParams
32 |  */
33 | 
34 | 
35 | export function getQueryParams(url: string) {
36 |   if (typeof url !== 'string') {
37 |     throw new Error('Can not getQueryParams. Invalid URL')
38 |   }
39 | 
40 |   const params = {}
41 | 
42 |   const urlSegments = url.split('?')
43 | 
44 |   urlSegments[1] &&
45 |     urlSegments[1].split('&').forEach(segment => {
46 |       const [key, value] = segment.split('=')
47 |       //@ts-expect-error TS can't check if key is in effect key of params
48 |       params[key] = value
49 |     })
50 | 
51 |   return params
52 | }
53 | 
54 | /**
55 |  * findAssetsByPath
56 |  */
57 | 
58 | interface FindAssetsByPath {
59 |   baseDir: string;
60 |   path: string | Array<string>;
61 | }
62 | 
63 | export function findAssetsByPath(options: FindAssetsByPath) {
64 |   if ( !Array.isArray(options.path) ) {
65 |     options.path = [options.path];
66 |   }
67 | 
68 |   return options.path.flatMap(assetsPath => {
69 |     const assetsDirectory = glob.sync(path.join(options.baseDir, assetsPath, '/**/*'));
70 |     return assetsDirectory.filter(file => !!path.extname(file));
71 |   })
72 | }


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/src/types/integration.ts:
--------------------------------------------------------------------------------
 1 | /**
 2 |  * this type is built based on the content of the plugin manifest file
 3 |  * Information found here https://docs.netlify.com/integrations/build-plugins/create-plugins/#inputs
 4 |  */
 5 | export type Inputs = {
 6 |   cloudName: string;
 7 |   cname: string;
 8 |   deliveryType: string;
 9 |   folder: string;
10 |   imagesPath: string | Array<string>;
11 |   loadingStrategy: string;
12 |   maxSize: {
13 |     dpr: number | string;
14 |     height: number;
15 |     width: number;
16 |   };
17 |   privateCdn: boolean;
18 |   uploadPreset: string;
19 |   uploadConcurrency: number;
20 | };
21 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/assets/stranger-things-lucas.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/netlify-plugin-cloudinary/tests/assets/stranger-things-lucas.jpeg


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/images/stranger-things-dustin.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/netlify-plugin-cloudinary/tests/images/stranger-things-dustin.jpeg


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/images/stranger-things-eleven.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cloudinary-community/netlify-plugin-cloudinary/ed9cdf58681cc5d4ed897a6a139cfa73dd2d62fb/netlify-plugin-cloudinary/tests/images/stranger-things-eleven.jpeg


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/lib/cloudinary-cname.test.js:
--------------------------------------------------------------------------------
 1 | import { vi, expect, describe, test, beforeEach, afterAll, it } from 'vitest';
 2 | 
 3 | import { configureCloudinary, getCloudinaryUrl, updateHtmlImagesToCloudinary } from '../../src/lib/cloudinary';
 4 | import { ANALYTICS_SDK_CODE, ANALYTICS_PRODUCT } from '../../src/data/analytics';
 5 | 
 6 | const TEST_ANALYTICS_CONFIG = {
 7 |   sdkCode: ANALYTICS_SDK_CODE,
 8 |   sdkSemver: '1.1.1',
 9 |   techVersion: '1.1.1',
10 |   product: ANALYTICS_PRODUCT,
11 | }
12 | 
13 | const TEST_ANALYTICS_STRING = 'BBFCd1Bl0';
14 | 
15 | describe('lib/util', () => {
16 |   const ENV_ORIGINAL = process.env;
17 |   const cname = 'spacejelly.dev';
18 | 
19 |   beforeEach(() => {
20 |     vi.resetModules();
21 | 
22 |     process.env = { ...ENV_ORIGINAL };
23 |     process.env.CLOUDINARY_CLOUD_NAME = 'testcloud';
24 |     process.env.CLOUDINARY_API_KEY = '123456789012345';
25 |     process.env.CLOUDINARY_API_SECRET = 'abcd1234';
26 | 
27 |     configureCloudinary({
28 |       cloudName: process.env.CLOUDINARY_CLOUD_NAME,
29 |       apiKey: process.env.CLOUDINARY_API_KEY,
30 |       apiSecret: process.env.CLOUDINARY_API_SECRET,
31 |       cname,
32 |     });
33 |   });
34 | 
35 |   afterAll(() => {
36 |     process.env = ENV_ORIGINAL;
37 |   });
38 | 
39 |   describe('getCloudinaryUrl', () => {
40 | 
41 |     test('should create a Cloudinary URL with delivery type of fetch from a local image', async () => {
42 |       const { cloudinaryUrl } = await getCloudinaryUrl({
43 |         deliveryType: 'fetch',
44 |         path: '/images/stranger-things-dustin.jpeg',
45 |         localDir: '/tests/images',
46 |         remoteHost: 'https://cloudinary.netlify.app'
47 |       });
48 | 
49 |       expect(cloudinaryUrl).toMatch(`https://${cname}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg`);
50 |     });
51 | 
52 |   });
53 | 
54 |   describe('updateHtmlImagesToCloudinary', () => {
55 | 
56 |     it('should replace a local image with a Cloudinary URL', async () => {
57 |       const sourceHtml = '<html><head></head><body><p><img src="/images/stranger-things-dustin.jpeg"></p></body></html>';
58 | 
59 |       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
60 |         deliveryType: 'fetch',
61 |         localDir: 'tests',
62 |         remoteHost: 'https://cloudinary.netlify.app',
63 |         loadingStrategy: 'lazy'
64 |       }, TEST_ANALYTICS_CONFIG);
65 | 
66 |       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://${cname}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg?_a=${TEST_ANALYTICS_STRING}\" loading=\"lazy"\></p></body></html>`);
67 |     });
68 | 
69 |   });
70 | 
71 | });
72 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/lib/cloudinary-privatecdn.test.js:
--------------------------------------------------------------------------------
 1 | import { vi, expect, describe, test, beforeEach, afterAll, it } from 'vitest';
 2 | 
 3 | import { configureCloudinary, getCloudinaryUrl, updateHtmlImagesToCloudinary } from '../../src/lib/cloudinary';
 4 | import { ANALYTICS_SDK_CODE, ANALYTICS_PRODUCT } from '../../src/data/analytics';
 5 | 
 6 | const TEST_ANALYTICS_CONFIG = {
 7 |   sdkCode: ANALYTICS_SDK_CODE,
 8 |   sdkSemver: '1.1.1',
 9 |   techVersion: '1.1.1',
10 |   product: ANALYTICS_PRODUCT,
11 | }
12 | 
13 | const TEST_ANALYTICS_STRING = 'BBFCd1Bl0';
14 | 
15 | describe('lib/util', () => {
16 |   const ENV_ORIGINAL = process.env;
17 | 
18 |   beforeEach(() => {
19 |     vi.resetModules();
20 | 
21 |     process.env = { ...ENV_ORIGINAL };
22 |     process.env.CLOUDINARY_CLOUD_NAME = 'testcloud';
23 |     process.env.CLOUDINARY_API_KEY = '123456789012345';
24 |     process.env.CLOUDINARY_API_SECRET = 'abcd1234';
25 | 
26 |     configureCloudinary({
27 |       cloudName: process.env.CLOUDINARY_CLOUD_NAME,
28 |       apiKey: process.env.CLOUDINARY_API_KEY,
29 |       apiSecret: process.env.CLOUDINARY_API_SECRET,
30 |       privateCdn: true,
31 |     });
32 |   });
33 | 
34 |   afterAll(() => {
35 |     process.env = ENV_ORIGINAL;
36 |   });
37 | 
38 |   describe('getCloudinaryUrl', () => {
39 | 
40 |     test('should create a Cloudinary URL with delivery type of fetch from a local image', async () => {
41 |       const { cloudinaryUrl } = await getCloudinaryUrl({
42 |         deliveryType: 'fetch',
43 |         path: '/images/stranger-things-dustin.jpeg',
44 |         localDir: '/tests/images',
45 |         remoteHost: 'https://cloudinary.netlify.app'
46 |       });
47 | 
48 |       expect(cloudinaryUrl).toMatch(`https://${process.env.CLOUDINARY_CLOUD_NAME}-res.cloudinary.com/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg`);
49 |     });
50 | 
51 |   });
52 | 
53 |   describe('updateHtmlImagesToCloudinary', () => {
54 | 
55 |     it('should replace a local image with a Cloudinary URL', async () => {
56 |       const sourceHtml = '<html><head></head><body><p><img src="/images/stranger-things-dustin.jpeg"></p></body></html>';
57 | 
58 |       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
59 |         deliveryType: 'fetch',
60 |         localDir: 'tests',
61 |         remoteHost: 'https://cloudinary.netlify.app',
62 |         loadingStrategy: 'lazy'
63 |       }, TEST_ANALYTICS_CONFIG);
64 | 
65 |       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://${process.env.CLOUDINARY_CLOUD_NAME}-res.cloudinary.com/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg?_a=${TEST_ANALYTICS_STRING}\" loading=\"lazy"\></p></body></html>`);
66 |     });
67 | 
68 |   });
69 | 
70 | });
71 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/lib/cloudinary.test.js:
--------------------------------------------------------------------------------
  1 | import { vi, expect, describe, test, beforeEach, afterAll, it } from 'vitest';
  2 | 
  3 | import { ERROR_ASSET_UPLOAD } from '../../src/data/errors';
  4 | import { getCloudinary, createPublicId, configureCloudinary, getCloudinaryUrl, updateHtmlImagesToCloudinary } from '../../src/lib/cloudinary';
  5 | import { ANALYTICS_SDK_CODE, ANALYTICS_PRODUCT } from '../../src/data/analytics';
  6 | 
  7 | const mockDemo = require('../mocks/demo.json');
  8 | 
  9 | const cloudinary = getCloudinary();
 10 | 
 11 | const TEST_ANALYTICS_CONFIG = {
 12 |   sdkCode: ANALYTICS_SDK_CODE,
 13 |   sdkSemver: '1.1.1',
 14 |   techVersion: '1.1.1',
 15 |   product: ANALYTICS_PRODUCT,
 16 | }
 17 | 
 18 | const TEST_ANALYTICS_STRING = 'BBFCd1Bl0';
 19 | 
 20 | describe('lib/util', () => {
 21 |   const ENV_ORIGINAL = process.env;
 22 | 
 23 |   beforeEach(() => {
 24 |     vi.resetModules();
 25 | 
 26 |     process.env = { ...ENV_ORIGINAL };
 27 |     process.env.CLOUDINARY_CLOUD_NAME = 'testcloud';
 28 |     process.env.CLOUDINARY_API_KEY = '123456789012345';
 29 |     process.env.CLOUDINARY_API_SECRET = 'abcd1234';
 30 | 
 31 |     configureCloudinary({
 32 |       cloudName: process.env.CLOUDINARY_CLOUD_NAME,
 33 |       apiKey: process.env.CLOUDINARY_API_KEY,
 34 |       apiSecret: process.env.CLOUDINARY_API_SECRET,
 35 |     })
 36 |   });
 37 | 
 38 |   afterAll(() => {
 39 |     process.env = ENV_ORIGINAL;
 40 |   });
 41 | 
 42 |   describe('createPublicId', () => {
 43 | 
 44 |     test('should create a public ID from a remote URL', async () => {
 45 |       const mikeId = await createPublicId({ path: 'https://i.imgur.com/e6XK75j.png' });
 46 |       expect(mikeId).toEqual('e6XK75j-58e290136642a9c711afa6410b07848d');
 47 | 
 48 |       const lucasId = await createPublicId({ path: 'https://i.imgur.com/vtYmp1x.png' });
 49 |       expect(lucasId).toEqual('vtYmp1x-ae71a79c9c36b8d5dba872c3b274a444');
 50 |     });
 51 | 
 52 |     test('should create a public ID from a local image', async () => {
 53 |       const dustinId = await createPublicId({ path: '../images/stranger-things-dustin.jpeg' });
 54 |       expect(dustinId).toEqual('stranger-things-dustin-9a2a7b1501695c50ad85c329f79fb184');
 55 | 
 56 |       const elevenId = await createPublicId({ path: '../images/stranger-things-eleven.jpeg' });
 57 |       expect(elevenId).toEqual('stranger-things-eleven-c5486e412115dbeba03315959c3a6d20');
 58 |     });
 59 | 
 60 |   });
 61 | 
 62 |   describe('getCloudinaryUrl', () => {
 63 | 
 64 |     test('should create a Cloudinary URL with delivery type of fetch from a local image', async () => {
 65 |       const { cloudinaryUrl } = await getCloudinaryUrl({
 66 |         deliveryType: 'fetch',
 67 |         path: '/images/stranger-things-dustin.jpeg',
 68 |         localDir: '/tests/images',
 69 |         remoteHost: 'https://cloudinary.netlify.app'
 70 |       });
 71 | 
 72 |       expect(cloudinaryUrl).toMatch(`https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg`);
 73 |     });
 74 | 
 75 |     test('should create a Cloudinary URL with delivery type of fetch from a remote image', async () => {
 76 | 
 77 |       const { cloudinaryUrl } = await getCloudinaryUrl({
 78 |         deliveryType: 'fetch',
 79 |         path: 'https://i.imgur.com/vtYmp1x.png'
 80 |       });
 81 | 
 82 |       expect(cloudinaryUrl).toMatch(`https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://i.imgur.com/vtYmp1x.png`);
 83 |     });
 84 | 
 85 | 
 86 |     test('should create a Cloudinary URL with delivery type of upload from a local image', async () => {
 87 |       // mock cloudinary.uploader.upload call
 88 |       cloudinary.uploader.upload = vi.fn().mockResolvedValue({
 89 |         public_id: 'stranger-things-dustin-fc571e771d5ca7d9223a7eebfd2c505d',
 90 |         secure_url: `https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/upload/v1613009008/stranger-things-dustin-fc571e771d5ca7d9223a7eebfd2c505d.jpg`,
 91 |         original_filename: 'stranger-things-dustin',
 92 |         version: 1613009008,
 93 |         width: 1280,
 94 |         height: 720,
 95 |         format: 'jpg',
 96 |         resource_type: 'image',
 97 |         created_at: '2021-02-11T16:43:28Z',
 98 |       })
 99 | 
100 |       const { cloudinaryUrl } = await getCloudinaryUrl({
101 |         deliveryType: 'upload',
102 |         path: '/images/stranger-things-dustin.jpeg',
103 |         localDir: 'tests',
104 |         remoteHost: 'https://cloudinary.netlify.app'
105 |       });
106 | 
107 |       expect(cloudinaryUrl).toMatch(`https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/upload/f_auto,q_auto/stranger-things-dustin-fc571e771d5ca7d9223a7eebfd2c505d`);
108 |     });
109 | 
110 |     test('should fail to create a Cloudinary URL with delivery type of upload', async () => {
111 |       // mock cloudinary.uploader.upload call
112 |       cloudinary.uploader.upload = vi.fn().mockImplementation(() => Promise.reject('error'))
113 | 
114 | 
115 |       await expect(getCloudinaryUrl({
116 |         deliveryType: 'upload',
117 |         path: '/images/stranger-things-dustin.jpeg',
118 |         localDir: 'tests',
119 |         remoteHost: 'https://cloudinary.netlify.app'
120 |       })).rejects.toThrow(ERROR_ASSET_UPLOAD);
121 |     });
122 | 
123 | 
124 | 
125 | 
126 |     // TODO: Mock functions to test Cloudinary uploads without actual upload
127 | 
128 |     // test('should create a Cloudinary URL with delivery type of upload from a remote image', async () => {
129 |     //   const { cloudinaryUrl }  = await getCloudinaryUrl({
130 |     //     deliveryType: 'upload',
131 |     //     path: 'https://i.imgur.com/vtYmp1x.png'
132 |     //   });
133 | 
134 |     //   expect(cloudinaryUrl).toMatch(`https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/upload/f_auto,q_auto/vtYmp1x-ae71a79c9c36b8d5dba872c3b274a444`);
135 |     // });
136 | 
137 |     test('should apply transformations', async () => {
138 |       const maxSize = {
139 |         width: 800,
140 |         height: 600,
141 |         dpr: '3.0',
142 |         crop: 'limit'
143 |       }
144 |       const { cloudinaryUrl } = await getCloudinaryUrl({
145 |         deliveryType: 'fetch',
146 |         path: '/images/stranger-things-dustin.jpeg',
147 |         localDir: '/tests/images',
148 |         remoteHost: 'https://cloudinary.netlify.app',
149 |         transformations: [maxSize]
150 |       });
151 | 
152 |       expect(cloudinaryUrl).toMatch(`https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/c_${maxSize.crop},dpr_${maxSize.dpr},h_${maxSize.height},w_${maxSize.width}/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg`);
153 |     });
154 | 
155 |   });
156 | 
157 |   describe('updateHtmlImagesToCloudinary', () => {
158 | 
159 |     it('should replace a local image with a Cloudinary URL', async () => {
160 |       const sourceHtml = '<html><head></head><body><p><img src="/images/stranger-things-dustin.jpeg"></p></body></html>';
161 | 
162 |       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
163 |         deliveryType: 'fetch',
164 |         localDir: 'tests',
165 |         remoteHost: 'https://cloudinary.netlify.app',
166 |         loadingStrategy: 'lazy'
167 |       }, TEST_ANALYTICS_CONFIG);
168 | 
169 |       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg?_a=${TEST_ANALYTICS_STRING}\" loading=\"lazy"\></p></body></html>`);
170 |     });
171 | 
172 |     it('should replace a remote image with a Cloudinary URL', async () => {
173 |       const sourceHtml = '<html><head></head><body><p><img src="https://i.imgur.com/vtYmp1x.png"></p></body></html>';
174 | 
175 |       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
176 |         deliveryType: 'fetch',
177 |         loadingStrategy: 'lazy'
178 |       }, TEST_ANALYTICS_CONFIG);
179 | 
180 |       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://i.imgur.com/vtYmp1x.png?_a=${TEST_ANALYTICS_STRING}\" loading=\"lazy"\></p></body></html>`);
181 |     });
182 | 
183 | 
184 |     it('should replace a local image with a Cloudinary URL in a srcset', async () => {
185 |       const sourceHtml = '<html><head></head><body><p><img src="/images/stranger-things-dustin.jpeg" srcset="/images/stranger-things-dustin.jpeg 1x, /images/stranger-things-dustin.jpeg 2x"></p></body></html>';
186 | 
187 |       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
188 |         deliveryType: 'fetch',
189 |         localDir: 'tests',
190 |         remoteHost: 'https://cloudinary.netlify.app',
191 |         loadingStrategy: 'lazy'
192 |       }, TEST_ANALYTICS_CONFIG);
193 | 
194 |       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg?_a=${TEST_ANALYTICS_STRING}\" srcset=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg?_a=${TEST_ANALYTICS_STRING} 1x, https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://cloudinary.netlify.app/images/stranger-things-dustin.jpeg?_a=${TEST_ANALYTICS_STRING} 2x\" loading=\"lazy"\></p></body></html>`);
195 |     });
196 | 
197 |     it('should add eager loading to image when eager option is provided for loadingStrategy', async () => {
198 |       const sourceHtml = '<html><head></head><body><p><img src="https://i.imgur.com/vtYmp1x.png"></p></body></html>';
199 | 
200 |       const { html } = await updateHtmlImagesToCloudinary(sourceHtml, {
201 |         deliveryType: 'fetch',
202 |         localDir: 'tests',
203 |         remoteHost: 'https://cloudinary.netlify.app',
204 |         loadingStrategy: 'eager'
205 |       }, TEST_ANALYTICS_CONFIG);
206 | 
207 |       expect(html).toEqual(`<html><head></head><body><p><img src=\"https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/fetch/f_auto,q_auto/https://i.imgur.com/vtYmp1x.png?_a=${TEST_ANALYTICS_STRING}\" loading=\"eager"\></p></body></html>`);
208 |     });
209 | 
210 |     it('should test uploading multiple assets', async () => {
211 |       // This is meant to replicate the current demo
212 | 
213 |       const { html } = await updateHtmlImagesToCloudinary(mockDemo.htmlBefore, {
214 |         deliveryType: 'upload',
215 |         localDir: 'demo/.next',
216 |         remoteHost: 'https://main--netlify-plugin-cloudinary.netlify.app',
217 |         loadingStrategy: 'lazy',
218 |         folder: 'netlify-plugin-cloudinary',
219 |         assets: mockDemo.assets
220 |       }, TEST_ANALYTICS_CONFIG);
221 | 
222 |       expect(html).toEqual(mockDemo.htmlAfter);
223 |     });
224 | 
225 |   });
226 | 
227 | });
228 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/lib/util.test.js:
--------------------------------------------------------------------------------
 1 | import { expect, describe, test } from 'vitest';
 2 | 
 3 | import { isRemoteUrl, determineRemoteUrl, getQueryParams } from '../../src/lib/util';
 4 | 
 5 | describe('lib/util', () => {
 6 | 
 7 |   describe('isRemoteUrl', () => {
 8 | 
 9 |     test('should be a remote URL', () => {
10 |       expect(isRemoteUrl('https://cloudinary.com')).toEqual(true);
11 |       expect(isRemoteUrl('http://cloudinary.com')).toEqual(true);
12 |     });
13 | 
14 |     test('should not be a remote URL', () => {
15 |       expect(isRemoteUrl('/images/cloud.jpg')).toEqual(false);
16 |       expect(isRemoteUrl('images/cloud.jpg')).toEqual(false);
17 |     });
18 | 
19 |   });
20 | 
21 |   describe('determineRemoteUrl', () => {
22 | 
23 |     test('should return original value when remote URL', () => {
24 |       const secure = determineRemoteUrl('https://cloudinary.com', 'https://cloudinary.netlify.app');
25 |       expect(secure).toEqual('https://cloudinary.com');
26 | 
27 |       const notSecure = determineRemoteUrl('http://cloudinary.com', 'https://cloudinary.netlify.app');
28 |       expect(notSecure).toEqual('http://cloudinary.com');
29 |     });
30 | 
31 |     test('should prepend DEPLOY_PRIME_URL when local path', () => {
32 |       const withStartingSlash = determineRemoteUrl('/images/cloud.jpg', 'https://cloudinary.netlify.app');
33 |       expect(withStartingSlash).toEqual('https://cloudinary.netlify.app/images/cloud.jpg');
34 | 
35 |       const withoutStartingSlash = determineRemoteUrl('images/cloud.jpg', 'https://cloudinary.netlify.app');
36 |       expect(withoutStartingSlash).toEqual('https://cloudinary.netlify.app/images/cloud.jpg');
37 |     });
38 | 
39 |   });
40 | 
41 |   describe('getQueryParams', () => {
42 | 
43 |     test('should get query parameters by URL with a single param', () => {
44 |       const { myparam } = getQueryParams('https://cloudinary.com?myparam=myvalue')
45 |       expect(myparam).toEqual('myvalue');
46 |     });
47 | 
48 |     test('should get query parameters by URL with a multiple params', () => {
49 |       const { myparam, otherparam } = getQueryParams('https://cloudinary.com?myparam=myvalue&otherparam=othervalue')
50 |       expect(myparam).toEqual('myvalue');
51 |       expect(otherparam).toEqual('othervalue');
52 |     });
53 | 
54 |   });
55 | 
56 | });


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/mocks/demo.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "assets": {
 3 |     "images": [
 4 |       {
 5 |         "publishPath": "/images/beach.jpeg",
 6 |         "sourceUrl": "demo/.next/images/beach.jpeg",
 7 |         "cloudinaryUrl": "https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/beach-b7ec1e3b78cccfac8658924c0728c095",
 8 |         "publicId": "netlify-plugin-cloudinary/beach-b7ec1e3b78cccfac8658924c0728c095"
 9 |       },
10 |       {
11 |         "publishPath": "/images/city.jpeg",
12 |         "sourceUrl": "demo/.next/images/city.jpeg",
13 |         "cloudinaryUrl": "https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/city-870b0b21d7a4d2c4d93a41e92c7ec0cc",
14 |         "publicId": "netlify-plugin-cloudinary/city-870b0b21d7a4d2c4d93a41e92c7ec0cc"
15 |       },
16 |       {
17 |         "publishPath": "/images/earth.jpeg",
18 |         "sourceUrl": "demo/.next/images/earth.jpeg",
19 |         "cloudinaryUrl": "https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/earth-c41e0d112194fa40bdb770b0fbd60d9d",
20 |         "publicId": "netlify-plugin-cloudinary/earth-c41e0d112194fa40bdb770b0fbd60d9d"
21 |       },
22 |       {
23 |         "publishPath": "/images/galaxy.jpeg",
24 |         "sourceUrl": "demo/.next/images/galaxy.jpeg",
25 |         "cloudinaryUrl": "https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/galaxy-87aed886f0383f55c4cb8856f22d6aae",
26 |         "publicId": "netlify-plugin-cloudinary/galaxy-87aed886f0383f55c4cb8856f22d6aae"
27 |       },
28 |       {
29 |         "publishPath": "/images/iceberg.jpeg",
30 |         "sourceUrl": "demo/.next/images/iceberg.jpeg",
31 |         "cloudinaryUrl": "https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/iceberg-c53e3eed54890f447da5dacdcf83311c",
32 |         "publicId": "netlify-plugin-cloudinary/iceberg-c53e3eed54890f447da5dacdcf83311c"
33 |       },
34 |       {
35 |         "publishPath": "/images/jungle.jpeg",
36 |         "sourceUrl": "demo/.next/images/jungle.jpeg",
37 |         "cloudinaryUrl": "https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/jungle-cc016c24ce648db203fb40121933e136",
38 |         "publicId": "netlify-plugin-cloudinary/jungle-cc016c24ce648db203fb40121933e136"
39 |       },
40 |       {
41 |         "publishPath": "/images/mountain.jpeg",
42 |         "sourceUrl": "demo/.next/images/mountain.jpeg",
43 |         "cloudinaryUrl": "https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/mountain-e223899d7cf3204e889bed345a976bba",
44 |         "publicId": "netlify-plugin-cloudinary/mountain-e223899d7cf3204e889bed345a976bba"
45 |       },
46 |       {
47 |         "publishPath": "/images/test/beach.jpeg",
48 |         "sourceUrl": "demo/.next/images/test/beach.jpeg",
49 |         "cloudinaryUrl": "https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/beach-b4117f2f07d500ea89a3ae7103bf98be",
50 |         "publicId": "netlify-plugin-cloudinary/beach-b4117f2f07d500ea89a3ae7103bf98be"
51 |       },
52 |       {
53 |         "publishPath": "/images/waterfall.jpeg",
54 |         "sourceUrl": "demo/.next/images/waterfall.jpeg",
55 |         "cloudinaryUrl": "https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/waterfall-0f890be5ceb2f8248693f1300cf1ce9d",
56 |         "publicId": "netlify-plugin-cloudinary/waterfall-0f890be5ceb2f8248693f1300cf1ce9d"
57 |       }
58 |     ]
59 |   },
60 |   "htmlBefore": "<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"width=device-width\"/><meta charSet=\"utf-8\"/><title>Cloudinary Netlify Plugin</title><meta name=\"description\" content=\"Cloudinary Netlify Plugin\"/><meta name=\"next-head-count\" content=\"4\"/><link rel=\"preload\" href=\"/_next/static/css/8889a1a5c56077a8.css\" as=\"style\"/><link rel=\"stylesheet\" href=\"/_next/static/css/8889a1a5c56077a8.css\" data-n-g=\"\"/><link rel=\"preload\" href=\"/_next/static/css/56460e7b5b3d2146.css\" as=\"style\"/><link rel=\"stylesheet\" href=\"/_next/static/css/56460e7b5b3d2146.css\" data-n-p=\"\"/><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills-5cd94c89d3acac5f.js\"></script><script src=\"/_next/static/chunks/webpack-69bfa6990bb9e155.js\" defer=\"\"></script><script src=\"/_next/static/chunks/framework-6e4ba497ae0c8a3f.js\" defer=\"\"></script><script src=\"/_next/static/chunks/main-101cfeaa18eb0e64.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app-9cd1d19dd7237c4c.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/index-f75ceca3e12fe4a1.js\" defer=\"\"></script><script src=\"/_next/static/rtjvSRsplRQ6AEYeZb5qE/_buildManifest.js\" defer=\"\"></script><script src=\"/_next/static/rtjvSRsplRQ6AEYeZb5qE/_ssgManifest.js\" defer=\"\"></script><script src=\"/_next/static/rtjvSRsplRQ6AEYeZb5qE/_middlewareManifest.js\" defer=\"\"></script></head><body><div id=\"__next\" data-reactroot=\"\"><div class=\"Home_container__bCOhY\"><main class=\"Home_main__nLjiQ\"><h1 class=\"Home_title__T09hD\">Cloudinary Netlify Plugin</h1><p class=\"Home_description__41Owk\">Supercharge images on your Netlify site with Cloudinary!</p><h2 class=\"Home_title__T09hD\">Getting Started</h2><ul class=\"Home_description__41Owk\"><li>✅ <a href=\"https://app.netlify.com/plugins/netlify-plugin-cloudinary/install\">Install the plugin on Netlify</a> (or search for &quot;cloudinary&quot;)</li><li>✅ Add <code>CLOUDINARY_CLOUD_NAME</code> as a Build Variable</li><li>✅ Trigger a new Netlify build</li></ul><p class=\"Home_description__41Owk\"><a href=\"https://github.com/colbyfayock/netlify-plugin-cloudinary\">More details and advanced configuration on GitHub</a></p><h2 class=\"Home_title__T09hD\">Images Transformed to Use Cloudinary</h2><ul class=\"Home_grid__GxQ85\"><li><img src=\"/images/beach.jpeg\" width=\"2376\" height=\"1574\" alt=\"Beach\"/></li><li><img src=\"/images/city.jpeg\" width=\"1364\" height=\"1705\" alt=\"City\"/></li><li><img src=\"/images/earth.jpeg\" width=\"2344\" height=\"1560\" alt=\"Earth\"/></li><li><img src=\"/images/galaxy.jpeg\" width=\"2340\" height=\"1560\" alt=\"Galaxy\"/></li><li><img src=\"/images/iceberg.jpeg\" width=\"2148\" height=\"1611\" alt=\"Iceberg\"/></li><li><img src=\"/images/jungle.jpeg\" width=\"1364\" height=\"1705\" alt=\"Jungle\"/></li><li><img src=\"/images/mountain.jpeg\" width=\"2340\" height=\"1561\" alt=\"Mountain\"/></li><li><img src=\"/images/waterfall.jpeg\" width=\"2340\" height=\"1560\" alt=\"Waterfall\"/></li></ul></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"images\":[{\"width\":2376,\"height\":1574,\"src\":\"/images/beach.jpeg\",\"title\":\"Beach\"},{\"width\":1364,\"height\":1705,\"src\":\"/images/city.jpeg\",\"title\":\"City\"},{\"width\":2344,\"height\":1560,\"src\":\"/images/earth.jpeg\",\"title\":\"Earth\"},{\"width\":2340,\"height\":1560,\"src\":\"/images/galaxy.jpeg\",\"title\":\"Galaxy\"},{\"width\":2148,\"height\":1611,\"src\":\"/images/iceberg.jpeg\",\"title\":\"Iceberg\"},{\"width\":1364,\"height\":1705,\"src\":\"/images/jungle.jpeg\",\"title\":\"Jungle\"},{\"width\":2340,\"height\":1561,\"src\":\"/images/mountain.jpeg\",\"title\":\"Mountain\"},{\"width\":2340,\"height\":1560,\"src\":\"/images/waterfall.jpeg\",\"title\":\"Waterfall\"}]},\"__N_SSG\":true},\"page\":\"/\",\"query\":{},\"buildId\":\"rtjvSRsplRQ6AEYeZb5qE\",\"isFallback\":false,\"gsp\":true,\"scriptLoader\":[]}</script></body></html>",
61 |   "htmlAfter": "<!DOCTYPE html><html><head><meta name=\"viewport\" content=\"width=device-width\"><meta charset=\"utf-8\"><title>Cloudinary Netlify Plugin</title><meta name=\"description\" content=\"Cloudinary Netlify Plugin\"><meta name=\"next-head-count\" content=\"4\"><link rel=\"preload\" href=\"/_next/static/css/8889a1a5c56077a8.css\" as=\"style\"><link rel=\"stylesheet\" href=\"/_next/static/css/8889a1a5c56077a8.css\" data-n-g=\"\"><link rel=\"preload\" href=\"/_next/static/css/56460e7b5b3d2146.css\" as=\"style\"><link rel=\"stylesheet\" href=\"/_next/static/css/56460e7b5b3d2146.css\" data-n-p=\"\"><noscript data-n-css=\"\"></noscript><script defer=\"\" nomodule=\"\" src=\"/_next/static/chunks/polyfills-5cd94c89d3acac5f.js\"></script><script src=\"/_next/static/chunks/webpack-69bfa6990bb9e155.js\" defer=\"\"></script><script src=\"/_next/static/chunks/framework-6e4ba497ae0c8a3f.js\" defer=\"\"></script><script src=\"/_next/static/chunks/main-101cfeaa18eb0e64.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/_app-9cd1d19dd7237c4c.js\" defer=\"\"></script><script src=\"/_next/static/chunks/pages/index-f75ceca3e12fe4a1.js\" defer=\"\"></script><script src=\"/_next/static/rtjvSRsplRQ6AEYeZb5qE/_buildManifest.js\" defer=\"\"></script><script src=\"/_next/static/rtjvSRsplRQ6AEYeZb5qE/_ssgManifest.js\" defer=\"\"></script><script src=\"/_next/static/rtjvSRsplRQ6AEYeZb5qE/_middlewareManifest.js\" defer=\"\"></script></head><body><div id=\"__next\" data-reactroot=\"\"><div class=\"Home_container__bCOhY\"><main class=\"Home_main__nLjiQ\"><h1 class=\"Home_title__T09hD\">Cloudinary Netlify Plugin</h1><p class=\"Home_description__41Owk\">Supercharge images on your Netlify site with Cloudinary!</p><h2 class=\"Home_title__T09hD\">Getting Started</h2><ul class=\"Home_description__41Owk\"><li>✅ <a href=\"https://app.netlify.com/plugins/netlify-plugin-cloudinary/install\">Install the plugin on Netlify</a> (or search for \"cloudinary\")</li><li>✅ Add <code>CLOUDINARY_CLOUD_NAME</code> as a Build Variable</li><li>✅ Trigger a new Netlify build</li></ul><p class=\"Home_description__41Owk\"><a href=\"https://github.com/colbyfayock/netlify-plugin-cloudinary\">More details and advanced configuration on GitHub</a></p><h2 class=\"Home_title__T09hD\">Images Transformed to Use Cloudinary</h2><ul class=\"Home_grid__GxQ85\"><li><img src=\"https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/beach-b7ec1e3b78cccfac8658924c0728c095\" width=\"2376\" height=\"1574\" alt=\"Beach\" loading=\"lazy\"></li><li><img src=\"https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/city-870b0b21d7a4d2c4d93a41e92c7ec0cc\" width=\"1364\" height=\"1705\" alt=\"City\" loading=\"lazy\"></li><li><img src=\"https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/earth-c41e0d112194fa40bdb770b0fbd60d9d\" width=\"2344\" height=\"1560\" alt=\"Earth\" loading=\"lazy\"></li><li><img src=\"https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/galaxy-87aed886f0383f55c4cb8856f22d6aae\" width=\"2340\" height=\"1560\" alt=\"Galaxy\" loading=\"lazy\"></li><li><img src=\"https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/iceberg-c53e3eed54890f447da5dacdcf83311c\" width=\"2148\" height=\"1611\" alt=\"Iceberg\" loading=\"lazy\"></li><li><img src=\"https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/jungle-cc016c24ce648db203fb40121933e136\" width=\"1364\" height=\"1705\" alt=\"Jungle\" loading=\"lazy\"></li><li><img src=\"https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/mountain-e223899d7cf3204e889bed345a976bba\" width=\"2340\" height=\"1561\" alt=\"Mountain\" loading=\"lazy\"></li><li><img src=\"https://res.cloudinary.com/colbycloud/image/upload/f_auto,q_auto/v1/netlify-plugin-cloudinary/waterfall-0f890be5ceb2f8248693f1300cf1ce9d\" width=\"2340\" height=\"1560\" alt=\"Waterfall\" loading=\"lazy\"></li></ul></main></div></div><script id=\"__NEXT_DATA__\" type=\"application/json\">{\"props\":{\"pageProps\":{\"images\":[{\"width\":2376,\"height\":1574,\"src\":\"/images/beach.jpeg\",\"title\":\"Beach\"},{\"width\":1364,\"height\":1705,\"src\":\"/images/city.jpeg\",\"title\":\"City\"},{\"width\":2344,\"height\":1560,\"src\":\"/images/earth.jpeg\",\"title\":\"Earth\"},{\"width\":2340,\"height\":1560,\"src\":\"/images/galaxy.jpeg\",\"title\":\"Galaxy\"},{\"width\":2148,\"height\":1611,\"src\":\"/images/iceberg.jpeg\",\"title\":\"Iceberg\"},{\"width\":1364,\"height\":1705,\"src\":\"/images/jungle.jpeg\",\"title\":\"Jungle\"},{\"width\":2340,\"height\":1561,\"src\":\"/images/mountain.jpeg\",\"title\":\"Mountain\"},{\"width\":2340,\"height\":1560,\"src\":\"/images/waterfall.jpeg\",\"title\":\"Waterfall\"}]},\"__N_SSG\":true},\"page\":\"/\",\"query\":{},\"buildId\":\"rtjvSRsplRQ6AEYeZb5qE\",\"isFallback\":false,\"gsp\":true,\"scriptLoader\":[]}</script></body></html>"
62 | }


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/mocks/html/test-1.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html><html><head><meta charSet="utf-8"/><meta name="robots" content="index,follow"/><meta property="og:title" content="Netlify Cloudinary - Automatic Optimization at Scale"/><style>
 2 |         :root {
 3 |           --nextra-primary-hue: 212deg;
 4 |           --nextra-navbar-height: 4rem;
 5 |           --nextra-menu-height: 3.75rem;
 6 |           --nextra-banner-height: 2.5rem;
 7 |         }
 8 |         
 9 |         .dark {
10 |           --nextra-primary-hue: 204deg;
11 |         }
12 |       </style><meta name="viewport" content="width=device-width, initial-scale=1.0"/><title>Netlify Cloudinary - Automatic Optimization at Scale</title><meta name="description" content="Optimize and deliver all images in your Netlify site with Cloudinary."/><meta name="og:title" content="Netlify Cloudinary - Automatic Optimization at Scale"/><meta name="og:description" content="Optimize and deliver all images in your Netlify site with Cloudinary."/><meta name="og:type" content="website"/><link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png"/><link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png"/><link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png"/><link rel="manifest" href="/site.webmanifest"/><meta name="theme-color" content="#000000"/><meta property="og:image" content="https://res.cloudinary.com/netlify-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/l_text:Source%20Sans%20Pro_200_black_center_line_spacing_-50:Netlify%20Cloudinary,w_2000,c_fit,co_white/fl_layer_apply,fl_no_overflow,y_-160/l_assets:cloudinary-white/fl_layer_apply,fl_no_overflow,x_-190,y_180/l_assets:netlify-white,h_160/fl_layer_apply,fl_no_overflow,x_380,y_190/l_text:Source%20Sans%20Pro_60_bold:next%252Ecloudinary.dev,co_white/fl_layer_apply,fl_no_overflow,y_320/c_scale,w_1200/f_jpg/q_auto/v1/assets/cloudinary-social-background?_a=BAVAfUGd0"/><meta property="og:image:secure_url" content="https://res.cloudinary.com/netlify-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/l_text:Source%20Sans%20Pro_200_black_center_line_spacing_-50:Netlify%20Cloudinary,w_2000,c_fit,co_white/fl_layer_apply,fl_no_overflow,y_-160/l_assets:cloudinary-white/fl_layer_apply,fl_no_overflow,x_-190,y_180/l_assets:netlify-white,h_160/fl_layer_apply,fl_no_overflow,x_380,y_190/l_text:Source%20Sans%20Pro_60_bold:next%252Ecloudinary.dev,co_white/fl_layer_apply,fl_no_overflow,y_320/c_scale,w_1200/f_jpg/q_auto/v1/assets/cloudinary-social-background?_a=BAVAfUGd0"/><meta property="og:image:width" content="1200"/><meta property="og:image:height" content="627"/><meta property="twitter:title" content=" "/><meta property="twitter:card" content="summary_large_image"/><meta property="twitter:image" content="https://res.cloudinary.com/netlify-cloudinary/image/upload/c_fill,w_2400,h_1254,g_center/l_text:Source%20Sans%20Pro_200_black_center_line_spacing_-50:Netlify%20Cloudinary,w_2000,c_fit,co_white/fl_layer_apply,fl_no_overflow,y_-160/l_assets:cloudinary-white/fl_layer_apply,fl_no_overflow,x_-190,y_180/l_assets:netlify-white,h_160/fl_layer_apply,fl_no_overflow,x_380,y_190/l_text:Source%20Sans%20Pro_60_bold:next%252Ecloudinary.dev,co_white/fl_layer_apply,fl_no_overflow,y_320/c_scale,w_1200/f_webp/q_auto/v1/assets/cloudinary-social-background?_a=BAVAfUGd0"/><meta name="next-head-count" content="22"/><link rel="preload" href="/_next/static/css/7091881899da1b34.css" as="style"/><link rel="stylesheet" href="/_next/static/css/7091881899da1b34.css" data-n-g=""/><noscript data-n-css=""></noscript><script defer="" nomodule="" src="/_next/static/chunks/polyfills-78c92fac7aa8fdd8.js"></script><script src="/_next/static/chunks/webpack-36d12a75f0098f30.js" defer=""></script><script src="/_next/static/chunks/framework-28fe432bb4182ec2.js" defer=""></script><script src="/_next/static/chunks/main-1ec7ced40aa038c3.js" defer=""></script><script src="/_next/static/chunks/pages/_app-bc4048acad3a915f.js" defer=""></script><script src="/_next/static/chunks/419-b78a0f9f9ad3c3be.js" defer=""></script><script src="/_next/static/chunks/pages/index-9c179e864f14c99d.js" defer=""></script><script src="/_next/static/0Z77mzCCf2X6n_F3lKZIc/_buildManifest.js" defer=""></script><script src="/_next/static/0Z77mzCCf2X6n_F3lKZIc/_ssgManifest.js" defer=""></script></head><body><div id="__next"><script>!function(){try{var d=document.documentElement,c=d.classList;c.remove('light','dark');var e=localStorage.getItem('theme');if('system'===e||(!e&&true)){var t='(prefers-color-scheme: dark)',m=window.matchMedia(t);if(m.media!==t||m.matches){d.style.colorScheme = 'dark';c.add('dark')}else{d.style.colorScheme = 'light';c.add('light')}}else if(e){c.add(e|| '')}if(e==='light'||e==='dark')d.style.colorScheme=e}catch(e){}}()</script><div dir="ltr"><script>document.documentElement.setAttribute('dir','ltr')</script><div class="nextra-nav-container nx-sticky nx-top-0 nx-z-20 nx-w-full nx-bg-transparent print:nx-hidden"><div class="nextra-nav-container-blur nx-pointer-events-none nx-absolute nx-z-[-1] nx-h-full nx-w-full nx-bg-white dark:nx-bg-dark nx-shadow-[0_2px_4px_rgba(0,0,0,.02),0_1px_0_rgba(0,0,0,.06)] dark:nx-shadow-[0_-1px_0_rgba(255,255,255,.1)_inset] contrast-more:nx-shadow-[0_0_0_1px_#000] contrast-more:dark:nx-shadow-[0_0_0_1px_#fff]"></div><nav class="nx-mx-auto nx-flex nx-h-[var(--nextra-navbar-height)] nx-max-w-[90rem] nx-items-center nx-justify-end nx-gap-2 nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]"><a class="nx-flex nx-items-center hover:nx-opacity-75 ltr:nx-mr-auto rtl:nx-ml-auto" href="/"><strong>Netlify Cloudinary</strong></a><a class="nx-text-sm contrast-more:nx-text-gray-700 contrast-more:dark:nx-text-gray-100 nx-relative -nx-ml-2 nx-hidden nx-whitespace-nowrap nx-p-2 md:nx-inline-block nx-text-gray-600 hover:nx-text-gray-800 dark:nx-text-gray-400 dark:hover:nx-text-gray-200" aria-current="false" href="/installation"><span class="nx-absolute nx-inset-x-0 nx-text-center">Installation</span><span class="nx-invisible nx-font-medium">Installation</span></a><a class="nx-text-sm contrast-more:nx-text-gray-700 contrast-more:dark:nx-text-gray-100 nx-relative -nx-ml-2 nx-hidden nx-whitespace-nowrap nx-p-2 md:nx-inline-block nx-text-gray-600 hover:nx-text-gray-800 dark:nx-text-gray-400 dark:hover:nx-text-gray-200" aria-current="false" href="/configuration"><span class="nx-absolute nx-inset-x-0 nx-text-center">Configuration</span><span class="nx-invisible nx-font-medium">Configuration</span></a><div class="nextra-search nx-relative md:nx-w-64 nx-hidden md:nx-inline-block mx-min-w-[200px]"><div class="nx-relative nx-flex nx-items-center nx-text-gray-900 contrast-more:nx-text-gray-800 dark:nx-text-gray-300 contrast-more:dark:nx-text-gray-300"><input spellcheck="false" class="nx-block nx-w-full nx-appearance-none nx-rounded-lg nx-px-3 nx-py-2 nx-transition-colors nx-text-base nx-leading-tight md:nx-text-sm nx-bg-black/[.05] dark:nx-bg-gray-50/10 focus:nx-bg-white dark:focus:nx-bg-dark placeholder:nx-text-gray-500 dark:placeholder:nx-text-gray-400 contrast-more:nx-border contrast-more:nx-border-current" type="search" placeholder="Search documentation…" value=""/></div></div><a href="https://github.com/cloudinary-community/netlify-plugin-cloudinary" target="_blank" rel="noreferrer" class="nx-p-2 nx-text-current"><svg width="24" height="24" fill="currentColor" viewBox="3 3 18 18"><title>GitHub</title><path d="M12 3C7.0275 3 3 7.12937 3 12.2276C3 16.3109 5.57625 19.7597 9.15374 20.9824C9.60374 21.0631 9.77249 20.7863 9.77249 20.5441C9.77249 20.3249 9.76125 19.5982 9.76125 18.8254C7.5 19.2522 6.915 18.2602 6.735 17.7412C6.63375 17.4759 6.19499 16.6569 5.8125 16.4378C5.4975 16.2647 5.0475 15.838 5.80124 15.8264C6.51 15.8149 7.01625 16.4954 7.18499 16.7723C7.99499 18.1679 9.28875 17.7758 9.80625 17.5335C9.885 16.9337 10.1212 16.53 10.38 16.2993C8.3775 16.0687 6.285 15.2728 6.285 11.7432C6.285 10.7397 6.63375 9.9092 7.20749 9.26326C7.1175 9.03257 6.8025 8.08674 7.2975 6.81794C7.2975 6.81794 8.05125 6.57571 9.77249 7.76377C10.4925 7.55615 11.2575 7.45234 12.0225 7.45234C12.7875 7.45234 13.5525 7.55615 14.2725 7.76377C15.9937 6.56418 16.7475 6.81794 16.7475 6.81794C17.2424 8.08674 16.9275 9.03257 16.8375 9.26326C17.4113 9.9092 17.76 10.7281 17.76 11.7432C17.76 15.2843 15.6563 16.0687 13.6537 16.2993C13.98 16.5877 14.2613 17.1414 14.2613 18.0065C14.2613 19.2407 14.25 20.2326 14.25 20.5441C14.25 20.7863 14.4188 21.0746 14.8688 20.9824C16.6554 20.364 18.2079 19.1866 19.3078 17.6162C20.4077 16.0457 20.9995 14.1611 21 12.2276C21 7.12937 16.9725 3 12 3Z"></path></svg><span class="nx-sr-only">GitHub</span><span class="nx-sr-only nx-select-none"> (opens in a new tab)</span></a><button type="button" aria-label="Menu" class="nextra-hamburger -nx-mr-2 nx-rounded nx-p-2 active:nx-bg-gray-400/20 md:nx-hidden"><svg fill="none" width="24" height="24" viewBox="0 0 24 24" stroke="currentColor" class=""><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16"></path></g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 12h16"></path><g><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 18h16"></path></g></svg></button></nav></div><div class="nx-mx-auto nx-flex"><div class="motion-reduce:nx-transition-none [transition:background-color_1.5s_ease] nx-bg-transparent"></div><aside class="nextra-sidebar-container nx-flex nx-flex-col md:nx-top-16 md:nx-shrink-0 motion-reduce:nx-transform-none nx-transform-gpu nx-transition-all nx-ease-in-out print:nx-hidden md:nx-w-64 md:nx-hidden max-md:[transform:translate3d(0,-100%,0)]"><div class="nx-px-4 nx-pt-4 md:nx-hidden"><div class="nextra-search nx-relative md:nx-w-64"><div class="nx-relative nx-flex nx-items-center nx-text-gray-900 contrast-more:nx-text-gray-800 dark:nx-text-gray-300 contrast-more:dark:nx-text-gray-300"><input spellcheck="false" class="nx-block nx-w-full nx-appearance-none nx-rounded-lg nx-px-3 nx-py-2 nx-transition-colors nx-text-base nx-leading-tight md:nx-text-sm nx-bg-black/[.05] dark:nx-bg-gray-50/10 focus:nx-bg-white dark:focus:nx-bg-dark placeholder:nx-text-gray-500 dark:placeholder:nx-text-gray-400 contrast-more:nx-border contrast-more:nx-border-current" type="search" placeholder="Search documentation…" value=""/></div></div></div><div class="nx-overflow-y-auto nx-overflow-x-hidden nx-p-4 nx-grow md:nx-h-[calc(100vh-var(--nextra-navbar-height)-var(--nextra-menu-height))] nextra-scrollbar"></div><div class="nx-sticky nx-bottom-0 nx-bg-white dark:nx-bg-dark nx-mx-4 nx-py-4 nx-shadow-[0_-12px_16px_#fff] nx-flex nx-items-center nx-gap-2 dark:nx-border-neutral-800 dark:nx-shadow-[0_-12px_16px_#111] contrast-more:nx-border-neutral-400 contrast-more:nx-shadow-none contrast-more:dark:nx-shadow-none nx-border-t" data-toggle-animation="off"><div class="nx-grow nx-flex nx-flex-col"><button title="Change theme" class="nx-h-7 nx-rounded-md nx-px-2 nx-text-left nx-text-xs nx-font-medium nx-text-gray-600 nx-transition-colors dark:nx-text-gray-400 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50" id="headlessui-listbox-button-:R2njd6:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="nx-flex nx-items-center nx-gap-2 nx-capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="">Light</span></div></button></div></div></aside><div id="reach-skip-nav"></div><div class="nx-w-full nx-break-words">
13 | <div class="flex items-center h-[calc(100vh-var(--nextra-navbar-height))]"><div class="max-w-5xl mx-auto grid gap-4 lg:gap-14 lg:grid-cols-2 -mt-[calc(var(--nextra-navbar-height)/2)]"><div class="flex lg:justify-center flex-col order-2 lg:order-1"><h1 class="text-5xl font-bold text-center lg:text-left mb-6">Netlify Cloudinary</h1><p class="text-xl text-center lg:text-left mb-6">Optimize images at scale on Netlify with Cloudinary</p><p class="text-center lg:text-left"><a class="inline-block rounded py-2.5 px-6 text-sm font-bold uppercase text-white bg-blue-600 hover:bg-blue-500 dark:bg-blue-500 dark:hover:bg-slate-400 " rel="noreferrer noopener" href="/installation">Get Started</a></p></div><div class="flex lg:justify-center flex-col order-1 lg:order-2 pb-8 lg:pb-0"><div class="grid grid-cols-2 gap-12 items-center lg:block lg:relative w-full max-w-xs lg:max-w-xl lg:aspect-[8/6] mx-auto"><picture class="lg:absolute lg:top-0 lg:left-0 w-full lg:w-1/2"><source width="378" height="333" srcSet="/images/netlify-logo-light.svg" media="(prefers-color-scheme: dark)"/><img width="378" height="333" src="/images/netlify-logo-dark.svg" alt="Netlify Logo"/></picture><picture class="lg:absolute lg:bottom-0 lg:right-0 w-full lg:w-1/2"><source width="359" height="156" srcSet="/images/cloudinary-logo-light.svg" media="(prefers-color-scheme: dark)"/><img width="359" height="156" src="/images/cloudinary-logo-dark.svg" alt="Cloudinary Logo"/></picture></div></div></div></div></div></div><footer class="nx-bg-gray-100 nx-pb-[env(safe-area-inset-bottom)] dark:nx-bg-neutral-900 print:nx-bg-transparent"><div class="nx-mx-auto nx-flex nx-max-w-[90rem] nx-gap-2 nx-py-2 nx-px-4 nx-flex"><button title="Change theme" class="nx-h-7 nx-rounded-md nx-px-2 nx-text-left nx-text-xs nx-font-medium nx-text-gray-600 nx-transition-colors dark:nx-text-gray-400 hover:nx-bg-gray-100 hover:nx-text-gray-900 dark:hover:nx-bg-primary-100/5 dark:hover:nx-text-gray-50" id="headlessui-listbox-button-:R2jl6:" type="button" aria-haspopup="listbox" aria-expanded="false" data-headlessui-state=""><div class="nx-flex nx-items-center nx-gap-2 nx-capitalize"><svg fill="none" viewBox="3 3 18 18" width="12" height="12" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" fill="currentColor" d="M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z"></path></svg><span class="">Light</span></div></button></div><hr class="dark:nx-border-neutral-800"/><div class="nx-mx-auto nx-flex nx-max-w-[90rem] nx-justify-center nx-py-12 nx-text-gray-600 dark:nx-text-gray-400 md:nx-justify-start nx-pl-[max(env(safe-area-inset-left),1.5rem)] nx-pr-[max(env(safe-area-inset-right),1.5rem)]">MIT 2023 © Colby Fayock</div></footer></div></div><script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/","query":{},"buildId":"0Z77mzCCf2X6n_F3lKZIc","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script></body></html>


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/on-build.test.js:
--------------------------------------------------------------------------------
  1 | import { promises as fs } from 'fs';
  2 | import path from 'node:path';
  3 | import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest';
  4 | import { onBuild } from '../src/';
  5 | import { ERROR_API_CREDENTIALS_REQUIRED } from '../src/data/errors';
  6 | 
  7 | const contexts = [
  8 |   {
  9 |     name: 'production',
 10 |     url: 'https://netlify-plugin-cloudinary.netlify.app'
 11 |   },
 12 |   {
 13 |     name: 'deploy-preview',
 14 |     url: 'https://deploy-preview-1234--netlify-plugin-cloudinary.netlify.app'
 15 |   }
 16 | ]
 17 | 
 18 | describe('onBuild', () => {
 19 |   const ENV_ORIGINAL = process.env;
 20 |   const readdir = fs.readdir;
 21 | 
 22 |   beforeEach(() => {
 23 |     fs.readdir = vi.fn();
 24 |     vi.resetModules();
 25 | 
 26 |     process.env = { ...ENV_ORIGINAL };
 27 | 
 28 |     process.env.SITE_NAME = 'cool-site';
 29 |     process.env.CLOUDINARY_CLOUD_NAME = 'testcloud';
 30 |     process.env.CLOUDINARY_API_KEY = '123456789012345';
 31 |     process.env.CLOUDINARY_API_SECRET = 'abcd1234';
 32 |   });
 33 | 
 34 |   afterEach(() => {
 35 |     fs.readdir = readdir;
 36 |     process.env = ENV_ORIGINAL;
 37 |   });
 38 | 
 39 |   describe('Config', () => {
 40 | 
 41 |     test('should error when using delivery type of upload without API Key and Secret', async () => {
 42 |       // Test that verifies that delivery of type of fetch works without API Key and Secret can be found
 43 |       // below under test: should create redirects with defaut fetch-based configuration in production context
 44 |       // We don't need a "special" test for this as it's default functionality that should work with
 45 |       // any valid test, so we can isntead ensure the keys don't exist and delete them
 46 | 
 47 |       vi.spyOn(global.console, 'error').mockImplementation();
 48 | 
 49 |       delete process.env.CLOUDINARY_API_KEY;
 50 |       delete process.env.CLOUDINARY_API_SECRET;
 51 | 
 52 |       process.env.DEPLOY_PRIME_URL = 'https://deploy-preview-1234--netlify-plugin-cloudinary.netlify.app';
 53 | 
 54 |       const deliveryType = 'upload';
 55 |       const imagesPath = '/images';
 56 | 
 57 |       await onBuild({
 58 |         constants: {
 59 |           PUBLISH_DIR: `.next/out${imagesPath}`
 60 |         },
 61 |         inputs: {
 62 |           deliveryType
 63 |         },
 64 |         utils: {
 65 |           build: {
 66 |             failBuild: () => { }
 67 |           }
 68 |         }
 69 |       });
 70 | 
 71 |       expect(console.error).toBeCalledWith(`[Cloudinary] ${ERROR_API_CREDENTIALS_REQUIRED}`);
 72 |     });
 73 | 
 74 |   });
 75 | 
 76 |   describe('Redirects', () => {
 77 | 
 78 |     let deliveryType = 'fetch';
 79 |     let netlifyConfig;
 80 |     let redirects;
 81 | 
 82 |     const defaultRedirect = {
 83 |       from: '/path',
 84 |       to: '/other-path',
 85 |       status: 200
 86 |     }
 87 | 
 88 |     beforeEach(async () => {
 89 |       // Tests to ensure that delivery type of fetch works without API Key and Secret as it should
 90 | 
 91 |       delete process.env.CLOUDINARY_API_KEY;
 92 |       delete process.env.CLOUDINARY_API_SECRET;
 93 | 
 94 |       // resets vars for each tests
 95 |       redirects = [defaultRedirect];
 96 | 
 97 |       netlifyConfig = {
 98 |         redirects
 99 |       };
100 | 
101 |       const imagesFunctionName = 'cld_images';
102 | 
103 |       fs.readdir.mockResolvedValue([imagesFunctionName]);
104 |     });
105 | 
106 |     function validate(imagesPath, redirects, url) {
107 |       if (typeof (imagesPath) === 'string') {
108 |         imagesPath = [imagesPath]
109 |       };
110 | 
111 |       let count = 0
112 |       imagesPath?.reverse().forEach(element => {
113 |         let i = element.split(path.win32.sep).join(path.posix.sep).replace('/', '');
114 | 
115 |         // The analytics string that's added to the URLs is dynamic based on package version.
116 |         // The resulting value is also not static, so we can't simply add it to the end of the
117 |         // URL, so strip the analytics from the URLs as it's not important for this particular
118 |         // test, being covered elsewhere.
119 | 
120 |         redirects.forEach(redirect => {
121 |           if ( redirect.to.includes('https://res.cloudinary.com') ) {
122 |             redirect.to = redirect.to.split('?')[0];
123 |           }
124 |         })
125 | 
126 |         expect(redirects[count]).toEqual({
127 |           from: `/${i}/*`,
128 |           to: `https://res.cloudinary.com/${process.env.CLOUDINARY_CLOUD_NAME}/image/${deliveryType}/f_auto,q_auto/${process.env.URL}/cld-assets/${i}/:splat`,
129 |           status: 302,
130 |           force: true
131 |         });
132 | 
133 |         expect(redirects[count + 1]).toEqual({
134 |           from: `/cld-assets/${i}/*`,
135 |           to: `/${i}/:splat`,
136 |           status: 200,
137 |           force: true
138 |         });
139 |         count += 2;
140 |       });
141 |       expect(redirects[redirects.length - 1]).toEqual(defaultRedirect);
142 |     }
143 | 
144 |     describe.each(['posix', 'win32'])('Operating system: %o', (os) => {
145 |       let separator = path[os].sep;
146 |       let imagesPathStrings = [
147 |         '/images',
148 |         '/nest',
149 |         '/images/nesttest'
150 |       ];
151 |       imagesPathStrings = imagesPathStrings.map(i => i.replace(/\//g, separator));
152 | 
153 |       let imagesPathLists = [
154 |         [['/images', '/assets']],
155 |         [['/images/nest1', '/assets/nest2']],
156 |         [['/example/hey', '/mixed', '/test']]
157 |       ];
158 |       imagesPathLists = imagesPathLists.map(collection =>
159 |         collection.map(imagesPath =>
160 |           imagesPath.map(i => i.replace(/\//g, separator))
161 |         )
162 |       );
163 | 
164 |       describe.each(contexts)(`should create redirects with default ${deliveryType}-based configuration in $name context`, async (context) => {
165 |         process.env.URL = context.url;
166 | 
167 |         test.each(imagesPathLists)('%o', async (imagesPath) => {
168 | 
169 |           await onBuild({
170 |             netlifyConfig,
171 |             constants: {
172 |               PUBLISH_DIR: __dirname
173 |             },
174 |             inputs: {
175 |               deliveryType,
176 |               imagesPath
177 |             }
178 |           });
179 |           validate(imagesPath, redirects);
180 |         });
181 | 
182 |         test.each(imagesPathStrings)('%o', async (imagesPath) => {
183 | 
184 |           await onBuild({
185 |             netlifyConfig,
186 |             constants: {
187 |               PUBLISH_DIR: `.next/out${imagesPath}`
188 |             },
189 |             inputs: {
190 |               deliveryType,
191 |               imagesPath
192 |             }
193 |           });
194 |           validate(imagesPath, redirects);
195 |         });
196 | 
197 |         test('imagesPath undefined', async () => {
198 | 
199 |           await onBuild({
200 |             netlifyConfig,
201 |             constants: {
202 |               PUBLISH_DIR: '.next/out/'
203 |             },
204 |             inputs: {
205 |               deliveryType
206 |             }
207 |           });
208 |           let imagesPath = '/images';
209 |           validate(imagesPath, redirects);
210 |         });
211 |       });
212 |     })
213 |   });
214 | });
215 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tests/on-post-build.test.js:
--------------------------------------------------------------------------------
  1 | import { vi, expect, describe, test, beforeAll, afterAll, beforeEach, afterEach } from 'vitest';
  2 | import { promises as fs } from 'fs';
  3 | import path from 'path';
  4 | import { JSDOM } from 'jsdom';
  5 | import { onPostBuild } from '../src/';
  6 | 
  7 | const mocksPath = path.join(__dirname, 'mocks/html');
  8 | const tempPath = path.join(mocksPath, 'temp');
  9 | // Avoid illegal characters in file paths, all operating systems
 10 | const replaceRegEx = /[\W_]+/g
 11 | const replaceValue = '_'
 12 | 
 13 | async function mkdir(directoryPath) {
 14 |   let dir;
 15 |   console.log('directoryPath', directoryPath)
 16 |   try {
 17 |     dir = await fs.stat(directoryPath);
 18 |   } catch(e) {}
 19 |   if ( dir && dir.isDirectory() ) return;
 20 |   console.log('mkdir')
 21 |   await fs.mkdir(directoryPath);
 22 | }
 23 | 
 24 | describe('onPostBuild', () => {
 25 |   const ENV_ORIGINAL = process.env;
 26 | 
 27 |   beforeAll(async () => {
 28 |     await mkdir(tempPath);
 29 |   });
 30 | 
 31 |   beforeEach(async () => {
 32 |     vi.resetModules();
 33 | 
 34 |     process.env = { ...ENV_ORIGINAL };
 35 | 
 36 |     process.env.SITE_NAME = 'cool-site';
 37 |     process.env.CLOUDINARY_CLOUD_NAME = 'testcloud';
 38 |     process.env.CLOUDINARY_API_KEY = '123456789012345';
 39 |     process.env.CLOUDINARY_API_SECRET = 'abcd1234';
 40 | 
 41 |     const mockFiles = (await fs.readdir(mocksPath)).filter(filePath => filePath.includes('.html'));
 42 |     const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue));
 43 |     await mkdir(tempTestPath);
 44 |     await Promise.all(mockFiles.map(async file => {
 45 |       await fs.copyFile(path.join(mocksPath, file), path.join(tempTestPath, file));
 46 |     }))
 47 |   });
 48 | 
 49 |   afterEach(async () => {
 50 |     process.env = ENV_ORIGINAL;
 51 | 
 52 |     await fs.rm(path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue)), { recursive: true, force: true });
 53 |   });
 54 | 
 55 |   afterAll(async () => {
 56 |     await fs.rm(tempPath, { recursive: true, force: true })
 57 |   })
 58 | 
 59 |   describe('Build', () => {
 60 | 
 61 |     test('should replace with Cloudinary URLs', async () => {
 62 |       process.env.CONTEXT = 'production';
 63 |       process.env.NETLIFY_HOST = 'https://netlify-plugin-cloudinary.netlify.app';
 64 | 
 65 |       // Tests to ensure that delivery type of fetch works without API Key and Secret as it should
 66 | 
 67 |       delete process.env.CLOUDINARY_API_KEY;
 68 |       delete process.env.CLOUDINARY_API_SECRET;
 69 | 
 70 |       const deliveryType = 'fetch';
 71 | 
 72 |       const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue));
 73 | 
 74 |       await onPostBuild({
 75 |         constants: {
 76 |           PUBLISH_DIR: tempTestPath
 77 |         },
 78 |         inputs: {
 79 |           deliveryType,
 80 |           folder: process.env.SITE_NAME,
 81 |         },
 82 |       });
 83 | 
 84 |       const files = await fs.readdir(tempTestPath);
 85 | 
 86 |       await Promise.all(files.map(async file => {
 87 |         const data = await fs.readFile(path.join(tempTestPath, file), 'utf-8');
 88 |         const dom = new JSDOM(data);
 89 |         const images = Array.from(dom.window.document.querySelectorAll('img'));
 90 |         images.forEach(image => {
 91 |           expect(image.getAttribute('src')).toMatch('https://res.cloudinary.com');
 92 |         })
 93 |       }));
 94 |     });
 95 | 
 96 |   });
 97 | 
 98 |   describe('Inputs', () => {
 99 | 
100 |     test('should add transformations', async () => {
101 |       process.env.CONTEXT = 'production';
102 |       process.env.NETLIFY_HOST = 'https://netlify-plugin-cloudinary.netlify.app';
103 | 
104 |       // Tests to ensure that delivery type of fetch works without API Key and Secret as it should
105 | 
106 |       delete process.env.CLOUDINARY_API_KEY;
107 |       delete process.env.CLOUDINARY_API_SECRET;
108 | 
109 |       const deliveryType = 'fetch';
110 | 
111 |       const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue));
112 | 
113 |       const maxSize = {
114 |         width: 800,
115 |         height: 600,
116 |         dpr: '3.0',
117 |         crop: 'limit'
118 |       };
119 | 
120 |       await onPostBuild({
121 |         constants: {
122 |           PUBLISH_DIR: tempTestPath
123 |         },
124 |         inputs: {
125 |           deliveryType,
126 |           folder: process.env.SITE_NAME,
127 |           maxSize
128 |         },
129 |       });
130 | 
131 |       const files = await fs.readdir(tempTestPath);
132 | 
133 |       await Promise.all(files.map(async file => {
134 |         const data = await fs.readFile(path.join(tempTestPath, file), 'utf-8');
135 |         const dom = new JSDOM(data);
136 |         const images = Array.from(dom.window.document.querySelectorAll('img'));
137 |         images.forEach(image => {
138 |           expect(image.getAttribute('src')).toMatch('https://res.cloudinary.com');
139 |           expect(image.getAttribute('src')).toMatch(`f_auto,q_auto/c_${maxSize.crop},dpr_${maxSize.dpr},h_${maxSize.height},w_${maxSize.width}`);
140 |         })
141 |       }));
142 |     });
143 | 
144 |   });
145 | 
146 |   describe('loadingStrategy', () => {
147 |     test.each([
148 |       {loadingStrategy: undefined, expected: 'lazy'},
149 |       {loadingStrategy: 'lazy', expected: 'lazy'},
150 |       {loadingStrategy: 'eager', expected: 'eager'},
151 |     ])('should use $expected as img loading attribute when netlify.toml loadingStrategy is $loadingStrategy', async ({loadingStrategy, expected}) => {
152 |       process.env.CONTEXT = 'production';
153 |       process.env.NETLIFY_HOST = 'https://netlify-plugin-cloudinary.netlify.app';
154 | 
155 |       // Tests to ensure that delivery type of fetch works without API Key and Secret as it should
156 | 
157 |       delete process.env.CLOUDINARY_API_KEY;
158 |       delete process.env.CLOUDINARY_API_SECRET;
159 | 
160 |       const deliveryType = 'fetch';
161 | 
162 |       const tempTestPath = path.join(tempPath, expect.getState().currentTestName.replace(replaceRegEx, replaceValue));
163 | 
164 |       const inputs = {
165 |         deliveryType,
166 |         folder: process.env.SITE_NAME
167 |       }
168 | 
169 |       if (loadingStrategy != undefined) {
170 |         inputs['loadingStrategy'] = loadingStrategy
171 |         }
172 | 
173 |       await onPostBuild({
174 |         constants: {
175 |           PUBLISH_DIR: tempTestPath
176 |         },
177 |         inputs: inputs,
178 |       });
179 | 
180 |       const files = await fs.readdir(tempTestPath);
181 | 
182 |       await Promise.all(files.map(async file => {
183 |         const data = await fs.readFile(path.join(tempTestPath, file), 'utf-8');
184 |         const dom = new JSDOM(data);
185 |         const images = Array.from(dom.window.document.querySelectorAll('img'));
186 |         images.forEach(image => {
187 |           expect(image.getAttribute('loading')).toMatch(expected);
188 |         })
189 |       }));
190 |     })
191 |   });
192 | });
193 | 


--------------------------------------------------------------------------------
/netlify-plugin-cloudinary/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "ES2022" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,
 4 |     "module": "commonjs" /* Specify what module code is generated. */,
 5 |     "rootDir": "./src",
 6 |     "esModuleInterop": true,
 7 |     "forceConsistentCasingInFileNames": true, /* Ensure that casing is correct in imports. */
 8 |     "strict": true /* Enable all strict type-checking options. */,
 9 |     "skipLibCheck": true /* Skip type checking all .d.ts files. */,
10 |     "noImplicitAny": true, /* Enable error reporting for expressions and declarations with an implied 'any' type. */
11 |     "outDir": "./dist"
12 |   },
13 |   "include": ["src"],
14 |   "exclude": ["node_modules"]
15 | }
16 | 


--------------------------------------------------------------------------------
/netlify.toml:
--------------------------------------------------------------------------------
 1 | [build]
 2 |   command = "pnpm --filter docs build"
 3 |   publish = "docs/.next"
 4 | 
 5 | [[plugins]]
 6 |   package = "@netlify/plugin-nextjs"
 7 | 
 8 | [[plugins]]
 9 |   # package.json includes a postinstall `npm run compile` which allows
10 |   # for this plugin to be locally accessible at build time on Netlify's
11 |   # servers. If running locally, the expectation would be that the TS
12 |   # project will have been built either by install or during dev
13 |   package = "./netlify-plugin-cloudinary"
14 | 
15 |   [plugins.inputs]
16 |   cloudName = "netlify-cloudinary"
17 |   deliveryType = "upload"
18 |   imagesPath = [ "images", "screenshots" ]
19 |   
20 |   [plugins.inputs.maxSize]
21 |   width = 1200
22 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "netlify-plugin-cloudinary",
 3 |   "repository": "git@github.com:colbyfayock/netlify-plugin-cloudinary.git",
 4 |   "author": {
 5 |     "name": "Colby Fayock",
 6 |     "email": "hello@colbyfayock.com",
 7 |     "url": "https://twitter.com/colbyfayock"
 8 |   },
 9 |   "license": "MIT",
10 |   "private": true,
11 |   "scripts": {
12 |     "build": "pnpm -r build",
13 |     "build-site": "netlify build --filter docs",
14 |     "deploy-site": "netlify deploy --build --filter docs",
15 |     "format": "pnpm -r format",
16 |     "lint": "pnpm -r lint",
17 |     "postinstall": "pnpm --filter netlify-plugin-cloudinary build",
18 |     "test": "pnpm -r test"
19 |   },
20 |   "devDependencies": {
21 |     "@semantic-release/npm": "^10.0.3",
22 |     "gh-release": "7.0.2"
23 |   }
24 | }
25 | 


--------------------------------------------------------------------------------
/pnpm-workspace.yaml:
--------------------------------------------------------------------------------
1 | packages:
2 |   - "demo"
3 |   - "docs"
4 |   - "netlify-plugin-cloudinary"


--------------------------------------------------------------------------------