diff --git a/.git-blame-ignore-revs b/.git-blame-ignore-revs new file mode 100644 index 0000000..fecf6d6 --- /dev/null +++ b/.git-blame-ignore-revs @@ -0,0 +1,2 @@ +# format all files +f0acc811374c1249f9c4940ffb6b84f1b10d5011 \ No newline at end of file diff --git a/.github/workflows/test_and_release.yml b/.github/workflows/test_and_release.yml index 1a73cc7..3c80388 100644 --- a/.github/workflows/test_and_release.yml +++ b/.github/workflows/test_and_release.yml @@ -1,58 +1,82 @@ name: Test & Release -on: [push, pull_request] + +on: + push: + branches: + - main + pull_request: + env: - CI: false + CI: false + jobs: - tests: - name: Test - runs-on: ubuntu-latest - strategy: - matrix: - node: ['18' ] - steps: - - uses: actions/checkout@v2 - - uses: pnpm/action-setup@v2 - with: - version: 7 - - uses: actions/setup-node@v2 - with: - node-version: ${{ matrix.node }} - cache: 'pnpm' - - run: pnpm install - working-directory: ./svelte-cloudinary - # - run: pnpm test - # working-directory: ./svelte-cloudinary - - release: - name: Release - if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') }} - needs: tests - runs-on: ubuntu-latest - steps: - - uses: actions/checkout@v2 - - - uses: pnpm/action-setup@v2 - with: - version: 7 - - - uses: actions/setup-node@v3 - with: - node-version: '18' - cache: 'pnpm' - # https://github.com/pnpm/pnpm/issues/3141 - registry-url: 'https://registry.npmjs.org' - - - name: Install dependencies - run: pnpm install - working-directory: ./svelte-cloudinary - - - name: Build package - run: pnpm package - working-directory: ./svelte-cloudinary - - - name: Release - run: npx semantic-release - env: - GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} - NPM_TOKEN: ${{ secrets.NPM_TOKEN }} - NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} + tests: + name: Test + runs-on: ubuntu-latest + strategy: + matrix: + node: ['18'] + steps: + - name: Checkout Repo + uses: actions/checkout@v2 + + - name: Setup Node 18 + uses: actions/setup-node@v4 + with: + node-version: 18 + registry-url: https://registry.npmjs.org/ + + - name: Setup PNPM + uses: pnpm/action-setup@v3.0.0 + with: + version: 8.12.1 + + - name: Install deps + run: pnpm install --frozen-lockfile + + - name: Build package + run: pnpm package + + - name: Lint + run: pnpm lint + + # - name: Svelte Check + # run: pnpm check + + - name: Test + run: pnpm test + env: + VITE_PUBLIC_CLOUDINARY_CLOUD_NAME: svelte-cloudinary + + release: + name: Release + if: ${{ github.event_name == 'push' && (github.ref == 'refs/heads/main' || github.ref == 'refs/heads/beta') }} + needs: tests + runs-on: ubuntu-latest + steps: + - name: Checkout Repo + uses: actions/checkout@v2 + + - name: Setup Node 20 + uses: actions/setup-node@v4 + with: + node-version: 20 + registry-url: https://registry.npmjs.org/ + + - name: Setup PNPM + uses: pnpm/action-setup@v3.0.0 + with: + version: 8.12.1 + + - name: Install deps + run: pnpm install --frozen-lockfile + + - name: Build package + run: pnpm package + + - name: Release + run: pnpm exec semantic-release + env: + GH_TOKEN: ${{ secrets.GITHUB_TOKEN }} + NPM_TOKEN: ${{ secrets.NPM_TOKEN }} + NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }} diff --git a/.gitignore b/.gitignore index f9aa991..a78e3f4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,5 +1,4 @@ node_modules -.vscode .env svelte-cloudinary/dist .idea diff --git a/.releaserc b/.releaserc index 4543d37..e29f8f5 100644 --- a/.releaserc +++ b/.releaserc @@ -42,14 +42,14 @@ [ "@semantic-release/npm", { - "pkgRoot": "svelte-cloudinary" + "pkgRoot": "./packages/svelte-cloudinary" } ], [ "@semantic-release/git", { "assets": [ - "svelte-cloudinary/package.json", + "./packages/svelte-cloudinary/package.json", "CHANGELOG.md", "README.md" ] @@ -57,4 +57,4 @@ ], "@semantic-release/github" ] -} +} \ No newline at end of file diff --git a/.vscode/extensions.json b/.vscode/extensions.json new file mode 100644 index 0000000..c59272d --- /dev/null +++ b/.vscode/extensions.json @@ -0,0 +1,6 @@ +{ + "recommendations": [ + "esbenp.prettier-vscode", + "svelte.svelte-vscode" + ] +} diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 0000000..d37c1b0 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,18 @@ +{ + "[javascript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[typescript]": { + "editor.defaultFormatter": "esbenp.prettier-vscode", + "editor.formatOnSave": true + }, + "[svelte]": { + "editor.defaultFormatter": "svelte.svelte-vscode", + "editor.formatOnSave": true + }, + "[json]": { + "editor.defaultFormatter": "vscode.json-language-features", + "editor.formatOnSave": true + } +} diff --git a/docs/.eslintrc.cjs b/docs/.eslintrc.cjs deleted file mode 100644 index ebc1958..0000000 --- a/docs/.eslintrc.cjs +++ /dev/null @@ -1,30 +0,0 @@ -module.exports = { - root: true, - extends: [ - 'eslint:recommended', - 'plugin:@typescript-eslint/recommended', - 'plugin:svelte/recommended', - 'prettier' - ], - parser: '@typescript-eslint/parser', - plugins: ['@typescript-eslint'], - parserOptions: { - sourceType: 'module', - ecmaVersion: 2020, - extraFileExtensions: ['.svelte'] - }, - env: { - browser: true, - es2017: true, - node: true - }, - overrides: [ - { - files: ['*.svelte'], - parser: 'svelte-eslint-parser', - parserOptions: { - parser: '@typescript-eslint/parser' - } - } - ] -}; diff --git a/docs/package.json b/docs/package.json deleted file mode 100644 index c7c32ed..0000000 --- a/docs/package.json +++ /dev/null @@ -1,57 +0,0 @@ -{ - "name": "docs", - "version": "0.0.1", - "private": true, - "scripts": { - "dev": "vite dev", - "build": "vite build", - "preview": "vite preview", - "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", - "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", - "lint": "prettier --plugin-search-dir . --check . && eslint .", - "format": "prettier --plugin-search-dir . --write ." - }, - "devDependencies": { - "@sveltejs/adapter-auto": "^2.1.0", - "@sveltejs/kit": "^1.20.4", - "@tailwindcss/nesting": "0.0.0-insiders.565cd3e", - "@tailwindcss/typography": "^0.5.9", - "@typescript-eslint/eslint-plugin": "^5.60.0", - "@typescript-eslint/parser": "^5.60.0", - "autoprefixer": "^10.4.14", - "daisyui": "^3.5.0", - "eslint": "^8.43.0", - "eslint-config-prettier": "^8.5.0", - "eslint-plugin-svelte": "^2.31.0", - "mdsvex": "^0.11.0", - "postcss": "^8.4.24", - "postcss-load-config": "^4.0.1", - "prettier": "^2.8.0", - "prettier-plugin-svelte": "^2.10.1", - "sass": "1.69.5", - "svelte": "^4.0.0", - "svelte-check": "^3.4.4", - "svelte-preprocess": "^5.0.4", - "svelte-preprocess-sass": "2.0.1", - "tailwindcss": "^3.3.1", - "tslib": "^2.5.3", - "typescript": "^5.1.3", - "vite": "^4.3.9" - }, - "type": "module", - "dependencies": { - "@iconify/svelte": "3.1.4", - "@microflash/rehype-toc": "1.0.2", - "@sentry/sveltekit": "7.64.0", - "@sveltejs/adapter-vercel": "3.0.2", - "@vercel/analytics": "1.0.1", - "cloudinary": "^1.32.0", - "flowbite-svelte": "0.44.20", - "rehype-autolink-headings": "6.1.1", - "rehype-slug": "5.1.0", - "svelte-cloudinary": "workspace:*", - "svelte-hamburgers": "4.1.0", - "svelte-typeahead": "4.4.1", - "theme-change": "2.5.0" - } -} diff --git a/docs/src/docs/components/clduploadbutton/configuration.md b/docs/src/docs/components/clduploadbutton/configuration.md deleted file mode 100644 index 0e82dab..0000000 --- a/docs/src/docs/components/clduploadbutton/configuration.md +++ /dev/null @@ -1,22 +0,0 @@ ---- -title: CldUploadButton/Configuration -order: 2 ---- - -# CldUploadButton Configuration - -## Props - -| Prop Name | Type | Example | -|--------------------|--------------------|----------------------------------------| -| onClick | function | `function (event) { }` | -| onError | function | `function (error, widget) { }` | -| onUpload | function | `function (result, widget) { }` | -| options | object | `{ encryption: {...} }` | -| signatureEndpoint | string | `"/api/sign-cloudinary-params.js"` | -| uploadPreset | string | `"my-upload-preset"` | - - -The remaining props are spread onto the ` - -

- 2. Look for the error on the - Issues Page. -

-

- For more information, take a look at the - - Sentry SvelteKit Documentation - -

- - - - diff --git a/docs/src/routes/sentry-example/+server.js b/docs/src/routes/sentry-example/+server.js deleted file mode 100644 index beec959..0000000 --- a/docs/src/routes/sentry-example/+server.js +++ /dev/null @@ -1,6 +0,0 @@ -// This is just a very simple API route that throws an example error. -// Feel free to delete this file and the entire sentry route. - -export const GET = async () => { - throw new Error("Sentry Example API Route Error"); -}; diff --git a/docs/static/site.webmanifest b/docs/static/site.webmanifest deleted file mode 100644 index b20abb7..0000000 --- a/docs/static/site.webmanifest +++ /dev/null @@ -1,19 +0,0 @@ -{ - "name": "", - "short_name": "", - "icons": [ - { - "src": "/android-chrome-192x192.png", - "sizes": "192x192", - "type": "image/png" - }, - { - "src": "/android-chrome-512x512.png", - "sizes": "512x512", - "type": "image/png" - } - ], - "theme_color": "#ffffff", - "background_color": "#ffffff", - "display": "standalone" -} diff --git a/docs/vercel.json b/docs/vercel.json deleted file mode 100644 index 75ac2b3..0000000 --- a/docs/vercel.json +++ /dev/null @@ -1,22 +0,0 @@ - -{ - "rewrites": [ - { - "source": "/components/:path(.*)", - "destination": "/:path*" - }, - { - "source": "/helpers/:path(.*)", - "destination": "/:path*" - }, - { - "source": "/use-cases/:path(.*)", - "destination": "/guides/:path*" - }, - { - "source": "/resources", - "destination": "/" - } - ] -} - diff --git a/docs/vite.config.ts b/docs/vite.config.ts deleted file mode 100644 index 71ab775..0000000 --- a/docs/vite.config.ts +++ /dev/null @@ -1,15 +0,0 @@ -import { sentrySvelteKit } from "@sentry/sveltekit"; -import { sveltekit } from '@sveltejs/kit/vite'; -import { defineConfig } from 'vite'; - -export default defineConfig({ - plugins: [sentrySvelteKit({ - sourceMapsUploadOptions: { - org: "matias-hernandez", - project: "svelte-cloudinary-docs" - } - }), sveltekit()], - // optimizeDeps: { - // exclude:  ['style-object-to-css-string'] - // } -}); \ No newline at end of file diff --git a/package.json b/package.json index a708385..94c6ac0 100644 --- a/package.json +++ b/package.json @@ -4,11 +4,20 @@ "author": "Matias Hernandez ", "license": "MIT", "private": true, + "scripts": { + "build": "pnpm -r build", + "lint": "pnpm -r lint", + "check": "pnpm -r check", + "format": "pnpm --parallel -r format", + "test": "pnpm --filter svelte-cloudinary -r test", + "dev": "pnpm --parallel --filter playground --filter svelte-cloudinary -r dev", + "package": "pnpm --filter svelte-cloudinary -r build" + }, "devDependencies": { "@semantic-release/changelog": "^6.0.1", "@semantic-release/git": "^10.0.1", - "@semantic-release/npm": "^10.0.3", + "@semantic-release/npm": "^11.0.3", "gh-release": "7.0.2", - "semantic-release": "^19.0.5" + "semantic-release": "^23.0.2" } -} +} \ No newline at end of file diff --git a/docs/env.example b/packages/docs/.env.example similarity index 100% rename from docs/env.example rename to packages/docs/.env.example diff --git a/docs/.gitignore b/packages/docs/.gitignore similarity index 80% rename from docs/.gitignore rename to packages/docs/.gitignore index a6b2d18..65c250d 100644 --- a/docs/.gitignore +++ b/packages/docs/.gitignore @@ -9,6 +9,3 @@ node_modules vite.config.js.timestamp-* vite.config.ts.timestamp-* .vercel - -# Sentry Auth Token -.sentryclirc diff --git a/packages/docs/.npmrc b/packages/docs/.npmrc new file mode 100644 index 0000000..8e2da31 --- /dev/null +++ b/packages/docs/.npmrc @@ -0,0 +1,2 @@ +engine-strict=false # vercel +resolution-mode=highest diff --git a/svelte-cloudinary/.prettierignore b/packages/docs/.prettierignore similarity index 92% rename from svelte-cloudinary/.prettierignore rename to packages/docs/.prettierignore index 3897265..c6e329d 100644 --- a/svelte-cloudinary/.prettierignore +++ b/packages/docs/.prettierignore @@ -11,3 +11,4 @@ node_modules pnpm-lock.yaml package-lock.json yarn.lock +package.json diff --git a/docs/.prettierrc b/packages/docs/.prettierrc similarity index 55% rename from docs/.prettierrc rename to packages/docs/.prettierrc index a77fdde..3f7802c 100644 --- a/docs/.prettierrc +++ b/packages/docs/.prettierrc @@ -4,6 +4,12 @@ "trailingComma": "none", "printWidth": 100, "plugins": ["prettier-plugin-svelte"], - "pluginSearchDirs": ["."], - "overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }] + "overrides": [ + { + "files": "*.svelte", + "options": { + "parser": "svelte" + } + } + ] } diff --git a/docs/README.md b/packages/docs/README.md similarity index 100% rename from docs/README.md rename to packages/docs/README.md diff --git a/docs/mdsvex.config.js b/packages/docs/mdsvex.config.js similarity index 55% rename from docs/mdsvex.config.js rename to packages/docs/mdsvex.config.js index d7cedd7..59862a4 100644 --- a/docs/mdsvex.config.js +++ b/packages/docs/mdsvex.config.js @@ -1,7 +1,7 @@ import { defineMDSveXConfig as defineConfig } from 'mdsvex'; -import rehypeAutolinkHeadings from 'rehype-autolink-headings' -import rehypeSlug from 'rehype-slug' -import rehypeToc from '@microflash/rehype-toc' +import rehypeAutolinkHeadings from 'rehype-autolink-headings'; +import rehypeSlug from 'rehype-slug'; +import rehypeToc from '@microflash/rehype-toc'; const config = defineConfig({ extensions: ['.svelte.md', '.md', '.svx'], @@ -11,12 +11,7 @@ const config = defineConfig({ }, remarkPlugins: [], - rehypePlugins: [ - rehypeSlug, - rehypeAutolinkHeadings, - rehypeToc - - ], + rehypePlugins: [rehypeSlug, rehypeAutolinkHeadings, rehypeToc], layout: './src/lib/components/Layout.svelte' }); diff --git a/packages/docs/package.json b/packages/docs/package.json new file mode 100644 index 0000000..a0ae1e3 --- /dev/null +++ b/packages/docs/package.json @@ -0,0 +1,50 @@ +{ + "name": "docs", + "version": "0.0.1", + "private": true, + "scripts": { + "dev": "vite dev", + "build": "vite build", + "preview": "vite preview", + "check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json", + "check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch", + "lint": "prettier --check .", + "format": "prettier --write ." + }, + "devDependencies": { + "@sveltejs/adapter-vercel": "^5.1.1", + "@sveltejs/kit": "^2.5.4", + "@sveltejs/vite-plugin-svelte": "3.0.2", + "@tailwindcss/nesting": "0.0.0-insiders.565cd3e", + "@tailwindcss/typography": "^0.5.10", + "autoprefixer": "^10.4.18", + "daisyui": "^4.7.3", + "mdsvex": "^0.11.0", + "postcss": "^8.4.35", + "postcss-load-config": "^5.0.3", + "prettier": "^3.2.5", + "prettier-plugin-svelte": "^3.2.2", + "sass": "1.72.0", + "svelte": "^4.2.12", + "svelte-check": "^3.6.7", + "svelte-preprocess": "^5.1.3", + "tailwindcss": "^3.4.1", + "tslib": "^2.6.2", + "typescript": "^5.4.2", + "vite": "^5.1.6" + }, + "type": "module", + "dependencies": { + "@iconify/svelte": "3.1.6", + "@microflash/rehype-toc": "1.0.2", + "@vercel/analytics": "1.2.2", + "cloudinary": "^2.0.3", + "flowbite-svelte": "0.44.24", + "rehype-autolink-headings": "7.1.0", + "rehype-slug": "6.0.0", + "svelte-cloudinary": "workspace:*", + "svelte-hamburgers": "4.2.0", + "svelte-typeahead": "4.4.1", + "theme-change": "2.5.0" + } +} \ No newline at end of file diff --git a/docs/postcss.config.cjs b/packages/docs/postcss.config.cjs similarity index 100% rename from docs/postcss.config.cjs rename to packages/docs/postcss.config.cjs diff --git a/docs/src/app.d.ts b/packages/docs/src/app.d.ts similarity index 100% rename from docs/src/app.d.ts rename to packages/docs/src/app.d.ts diff --git a/docs/src/app.html b/packages/docs/src/app.html similarity index 80% rename from docs/src/app.html rename to packages/docs/src/app.html index ab06026..e8b0af9 100644 --- a/docs/src/app.html +++ b/packages/docs/src/app.html @@ -1,4 +1,4 @@ - + @@ -23,17 +23,17 @@ %sveltekit.head% diff --git a/docs/src/app.postcss b/packages/docs/src/app.postcss similarity index 56% rename from docs/src/app.postcss rename to packages/docs/src/app.postcss index 384f435..ae3ca94 100644 --- a/docs/src/app.postcss +++ b/packages/docs/src/app.postcss @@ -18,11 +18,10 @@ p { margin-bottom: 1.5rem; - - } + } p:last-child { - margin-bottom: 0; - } + margin-bottom: 0; + } pre { display: grid; @@ -34,24 +33,22 @@ @tailwind utilities; .cldbutton { - color: #fff; - font-weight: 700; - text-transform: uppercase; - background-color: #ff5050; - padding: 0.6em 1.2em; - border: none; - border-radius: 999px; + color: #fff; + font-weight: 700; + text-transform: uppercase; + background-color: #ff5050; + padding: 0.6em 1.2em; + border: none; + border-radius: 999px; } :root { - --searchbox-bg: #fff; - /* or any other variables/style */ + --searchbox-bg: #fff; + /* or any other variables/style */ } [data-theme='light'] { - --searchbox-bg: oklch(0.961151 0 0); + --searchbox-bg: oklch(0.961151 0 0); } [data-theme='night'] { - --searchbox-bg: rgba(249,250,251,.1); + --searchbox-bg: rgba(249, 250, 251, 0.1); } - - diff --git a/docs/src/docs/components/cldimage/configuration.md b/packages/docs/src/docs/components/cldimage/configuration.md similarity index 98% rename from docs/src/docs/components/cldimage/configuration.md rename to packages/docs/src/docs/components/cldimage/configuration.md index 986576e..b7fd2b2 100644 --- a/docs/src/docs/components/cldimage/configuration.md +++ b/packages/docs/src/docs/components/cldimage/configuration.md @@ -2,19 +2,19 @@ title: CldImage/Configuration order: 2 --- + + CldImage Configuration - SvelteKit Cloudinary - - # CldImage Configuration The CldImage component provides a wide range of options for being able to easily optimize and transform images. @@ -86,7 +86,6 @@ CldImage extends the Unpic Image component using Cloudinary tech. This means all available on the Unpic Image component are available on CldImage. Learn more on the [Unpic Docs](https://unpic.pics/img/svelte/). - ## Basic Transformations The CldImage component exposes many of Cloudinary's transformations in an easy-to-use way @@ -202,7 +201,7 @@ Applies a background to empty or transparent areas. **Examples** ```jsx copy -background="blue" +background = 'blue'; ``` [Learn more about the background transformation](https://cloudinary.com/documentation/transformation_reference#b_background) on the Cloudinary docs. @@ -214,7 +213,7 @@ Changes the size of the delivered asset according to the requested width & heigh **Examples** ```jsx copy -crop="fill" +crop = 'fill'; ``` [Learn more about the crop transformation](https://cloudinary.com/documentation/transformation_reference#c_crop_resize) on the Cloudinary docs. @@ -269,7 +268,7 @@ a background, or an object, which can take the following options: Applying Generative Fill with defaults: ```jsx copy -fillBackground +fillBackground; ``` Customizing options: @@ -291,7 +290,7 @@ Determines which part of an asset to focus on, and thus which part of the asset **Examples** ```jsx copy -gravity="face" +gravity = 'face'; ``` [Learn more about gravity](https://cloudinary.com/documentation/transformation_reference#g_gravity) on the Cloudinary docs. @@ -415,7 +414,7 @@ The `remove` prop can either be a string, an array, or an object with the follow Removing an object by string: ```jsx copy -remove="apple" +remove = 'apple'; ``` Removing multiple objects by array: @@ -463,16 +462,14 @@ Uses the [Cloudinary AI Background Removal add-on](https://cloudinary.com/docume The Cloudinary AI Background Removal add-on is required to use this feature. - **Examples** ```jsx copy -removeBackground +removeBackground; ``` [Learn more about background removal transformation](https://cloudinary.com/documentation/transformation_reference#e_background_removal) on the Cloudinary docs. - ### `replace` @@ -551,12 +548,11 @@ The `restore` prop can be used as a boolean. **Examples** ```jsx copy -restore +restore; ``` [Learn more about the Generative Restore transformation](https://cloudinary.com/documentation/transformation_reference#e_gen_restore) on the Cloudinary docs. - ### `zoom` Controls how close to crop to the detected coordinates when using face-detection, custom-coordinate, or object-specific gravity. @@ -564,7 +560,7 @@ Controls how close to crop to the detected coordinates when using face-detection **Examples** ```jsx copy -zoom="0.75" +zoom = '0.75'; ``` [Learn more about the zoom transformation](https://cloudinary.com/documentation/transformation_reference#z_zoom) on the Cloudinary docs. @@ -615,13 +611,13 @@ As an object, you can use advanced configuration with the following options: With defaults: ```jsx copy -zoompan +zoompan; ``` Add looping: ```jsx copy -zoompan="loop" +zoompan = 'loop'; ``` Customize options: @@ -635,7 +631,6 @@ zoompan={{ [Learn more about the zoompan transformation](https://cloudinary.com/documentation/transformation_reference#e_zoompan) on the Cloudinary docs. - ## Filters & Effects Cloudinary supports a wide variety of effects and artistic filters that help @@ -1001,13 +996,13 @@ to easily change the appearance of an image. Make an image black and white: ```jsx copy -blackwhite +blackwhite; ``` Pixelate an image: ```jsx copy -pixelate +pixelate; ``` Sharpen an image: @@ -1151,7 +1146,8 @@ underlays={[{ effects - Objects in the `effects` array can include everything in [Basic Transformations](#basic-transformations) and [Filters & Effects](#filters--effects) above as well as: +Objects in the `effects` array can include everything in [Basic Transformations](#basic-transformations) and [Filters & Effects](#filters--effects) above as well as: + position - The `position` property can include: +The `position` property can include: +
text - The `text` property can include: +The `text` property can include: +
{ }} ``` - ### Managing Transformations Most transformations and effects are exposed as top-level props to enable you to easily @@ -1645,7 +1641,7 @@ as the `src`. **Examples** ```jsx copy -preserveTransformations +preserveTransformations; ``` #### `rawTransformations` @@ -1668,14 +1664,14 @@ By enabling Strict Transformations, you restrict the ability to generate transfo approval through the Cloudinary dashboard. > Note: This disables [optimization](#optimization) and [responsive sizing](/guides/responsive-images) -only allowing [named transformations](#transformations) to be applied. The width and height are not applied to the URL, -but are still included on the image tag rendered to the DOM. +> only allowing [named transformations](#transformations) to be applied. The width and height are not applied to the URL, +> but are still included on the image tag rendered to the DOM. **Examples** ```jsx copy -strictTransformations -transformations=["my-transformation"] +strictTransformations; +transformations = ['my-transformation']; ``` [Learn more about Strict Transformations](https://cloudinary.com/documentation/control_access_to_media#strict_transformations) on the Cloudinary docs. @@ -1692,7 +1688,6 @@ transformations={['my-transformation']} [Learn more about Named Transformations](https://cloudinary.com/documentation/image_transformations#named_transformations) on the Cloudinary docs. - ### Optimization By default, CldImage opts in any image to `f_auto` and `q_auto` which provide automatic @@ -1755,12 +1750,11 @@ Sets the device pixel ratio (DPR) for the delivered image or video using a speci **Examples** ```jsx copy -dpr="2.0" +dpr = '2.0'; ``` [Learn more about configuring DPR](https://cloudinary.com/documentation/transformation_reference#dpr_dpr) on the Cloudinary docs. - #### `format` Converts (if necessary) and delivers an asset in the specified format regardless of the file extension used in the delivery URL. @@ -1768,12 +1762,11 @@ Converts (if necessary) and delivers an asset in the specified format regardless **Examples** ```jsx copy -format="png" +format = 'png'; ``` [Learn more about format](https://cloudinary.com/documentation/transformation_reference#f_format) on the Cloudinary docs. - #### `quality` Controls the quality of the delivered asset. Reducing the quality is a trade-off between visual quality and file size. @@ -1781,9 +1774,7 @@ Controls the quality of the delivered asset. Reducing the quality is a trade-off **Examples** ```jsx copy -quality="10" +quality = '10'; ``` [Learn more about quality](https://cloudinary.com/documentation/transformation_reference#q_quality) on the Cloudinary docs. - - diff --git a/docs/src/docs/components/cldimage/examples.md b/packages/docs/src/docs/components/cldimage/examples.md similarity index 70% rename from docs/src/docs/components/cldimage/examples.md rename to packages/docs/src/docs/components/cldimage/examples.md index 4d55555..1a3527e 100644 --- a/docs/src/docs/components/cldimage/examples.md +++ b/packages/docs/src/docs/components/cldimage/examples.md @@ -11,7 +11,6 @@ order: 3 import { CldImage } from 'svelte-cloudinary' - # CldImage Examples ## Basic Transformations @@ -39,20 +38,13 @@ not only deliver, but easily edit and build new images on the fly. ```svelte - - + ``` + @@ -78,22 +70,21 @@ not only deliver, but easily edit and build new images on the fly. ```svelte - - ``` + #### Image Background @@ -115,21 +106,21 @@ not only deliver, but easily edit and build new images on the fly. ```svelte - ``` + ### Cropping & Resizing @@ -139,7 +130,7 @@ not only deliver, but easily edit and build new images on the fly. `crop`: Specifies the mode to use when cropping an image based on the given dimensions. > Note: By default, CldImage uses a gravity of auto, meaning the crop will automatically -position the subject in the center of the resulting image. +> position the subject in the center of the resulting image. ```svelte - - - + ``` + ### Generative Fill @@ -206,6 +189,7 @@ position the subject in the center of the resulting image. sizes="100vw" /> ``` + @@ -231,22 +215,21 @@ position the subject in the center of the resulting image. ```svelte - - ``` + @@ -272,21 +255,21 @@ position the subject in the center of the resulting image. ```svelte - ``` + @@ -312,21 +295,21 @@ position the subject in the center of the resulting image. ```svelte - ``` + @@ -360,28 +343,27 @@ position the subject in the center of the resulting image. ```svelte - ``` + The generative restore transformation is currently in Beta. Learn more. - ## Filters & Effects Included in the Cloudinary transformations library are different filters and effects @@ -405,20 +387,13 @@ that allow you to recolor, improve, fix, and artistically transform your images. ```svelte - - + ``` + ### Grayscale @@ -439,20 +414,13 @@ that allow you to recolor, improve, fix, and artistically transform your images. ```svelte - - + ``` + ### Opacity @@ -473,20 +441,13 @@ that allow you to recolor, improve, fix, and artistically transform your images. ```svelte - - + ``` + ### Pixelate @@ -507,20 +468,13 @@ that allow you to recolor, improve, fix, and artistically transform your images. ```svelte - - + ``` + ### Tint @@ -541,20 +495,20 @@ that allow you to recolor, improve, fix, and artistically transform your images. ```svelte - ``` + ### Chaining Multiple Effects @@ -584,29 +538,29 @@ that allow you to recolor, improve, fix, and artistically transform your images. ```svelte - ``` + ### More Filters & Effects @@ -650,35 +604,37 @@ Image overlays allow you to place one or multiple images on top of another image ```svelte - ', - position: { - x: 50, - y: 50, - gravity: 'north_west', - }, - effects: [ - { - crop: 'fill', - gravity: 'auto', - width: 500, - height: 500 - } - ] - }]} - alt="" + width="960" + height="600" + src="" + sizes="100vw" + overlays={[ + { + publicId: '', + position: { + x: 50, + y: 50, + gravity: 'north_west' + }, + effects: [ + { + crop: 'fill', + gravity: 'auto', + width: 500, + height: 500 + } + ] + } + ]} + alt="" /> ``` + ### Overlay Image with Blend Mode @@ -715,35 +671,37 @@ that applies a blend mode, such as "multiply" ```svelte - ', - effects: [ - { - crop: 'fill', - gravity: 'auto', - width: 960, - height: 600 - } - ], - appliedEffects: [ - { - multiply: true - } - ] - }]} - alt="" + width="960" + height="600" + crop="fill" + src="" + overlays={[ + { + publicId: '', + effects: [ + { + crop: 'fill', + gravity: 'auto', + width: 960, + height: 600 + } + ], + appliedEffects: [ + { + multiply: true + } + ] + } + ]} + alt="" /> ``` + ## Image Underlays @@ -769,21 +727,21 @@ Image underlays allow you to place one or multiple images behind a base image. ```svelte - ``` + ### Replace Background with Multiple Images @@ -824,42 +782,41 @@ Image underlays allow you to place one or multiple images behind a base image. ```svelte - ', - width: 480, - height: 600, - crop: 'fill', - position: { - gravity: 'north_west' - } - }, - { - publicId: '', - width: 480, - height: 600, - crop: 'fill', - position: { - gravity: 'south_east' - } - }, - ]} - alt="" + width="960" + height="600" + src="" + sizes="100vw" + removeBackground + underlays={[ + { + publicId: '', + width: 480, + height: 600, + crop: 'fill', + position: { + gravity: 'north_west' + } + }, + { + publicId: '', + width: 480, + height: 600, + crop: 'fill', + position: { + gravity: 'south_east' + } + } + ]} + alt="" /> ``` - + ## Text Overlays @@ -885,22 +842,22 @@ Text overlays allow you to place text on top of an image. ```svelte - ``` + ### Adding Custom Text @@ -939,38 +896,40 @@ Text overlays allow you to place text on top of an image. ```svelte - ``` + ### Adding Text with Effects @@ -1005,37 +964,38 @@ Text overlays allow you to place text on top of an image. ```svelte - ``` + ## More Examples Find more examples on [Social Card Templates](/templates/social-media-cards). - diff --git a/docs/src/docs/components/cldimage/usage.md b/packages/docs/src/docs/components/cldimage/usage.md similarity index 66% rename from docs/src/docs/components/cldimage/usage.md rename to packages/docs/src/docs/components/cldimage/usage.md index a86955a..d3ccb66 100644 --- a/docs/src/docs/components/cldimage/usage.md +++ b/packages/docs/src/docs/components/cldimage/usage.md @@ -2,6 +2,7 @@ title: CldImage/Basic Usage order: 1 --- + - + ``` + The `src` property takes in a Cloudinary Public ID which includes the folder path along with the ID of the image itself. @@ -56,12 +51,10 @@ of the image. The `sizes` prop is optional, but recommended for [Responsive Sizing](/guides/responsive-images). - ## Transformations You can further take advantage of Cloudinary features like background removal and overlays by adding additional props: - ```svelte - ``` + ## Using Cloudinary URLs @@ -111,18 +104,18 @@ must include a version number (/v1234) in order to be correctly parsed. ```svelte - ``` + ### Preserving URL Transformations @@ -132,17 +125,16 @@ If using a full Cloudinary URL, you might already have transformations applied t To preserve those transformations, you can apply the `preserveTransformations` property: ```svelte - ``` @@ -154,51 +146,50 @@ In this working example you will see "Turtle has loaded" in the console. ```svelte console.log("Turtle has loaded.")} - on:error={()=>console.error("Turtle Error")} + width="960" + height="600" + src={`images/turtle`} + sizes="100vw" + alt="Turtle in the ocean" + on:load={() => console.log('Turtle has loaded.')} + on:error={() => console.error('Turtle Error')} /> ``` console.log("Turtle has loaded.")} - on:error={()=>console.error("Turtle Error")} +width="960" +height="600" +src={`images/turtle`} +sizes="100vw" +alt="Turtle in the ocean" +on:load={() => console.log("Turtle has loaded.")} +on:error={()=>console.error("Turtle Error")} /> In this broken example you will see "Turtle Error" in the console. ```svelte console.log("Turtle has loaded.")} - on:error={()=>console.error("Turtle Error")} + width="960" + height="600" + src={`images/turtle-broken`} + sizes="100vw" + alt="Broken Turtle Image" + on:load={() => console.log('Turtle has loaded.')} + on:error={() => console.error('Turtle Error')} /> ``` console.log("Turtle has loaded.")} - on:error={()=>console.error("Turtle Error")} +width="960" +height="600" +src={`images/turtle-broken`} +sizes="100vw" +alt="Broken Turtle Image" +on:load={() => console.log("Turtle has loaded.")} +on:error={()=>console.error("Turtle Error")} /> - ## Watch & Learn