diff --git a/.eslintrc b/.eslintrc index 04bf514..0f779ae 100644 --- a/.eslintrc +++ b/.eslintrc @@ -5,5 +5,6 @@ ], "rules": { "vue/multi-word-component-names": "off" - } + }, + "ignorePatterns": ["**/docs"] } diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml index a0ba5a8..41ace04 100644 --- a/.github/workflows/ci.yml +++ b/.github/workflows/ci.yml @@ -41,8 +41,8 @@ jobs: - name: Prepare run: yarn dev:prepare - - name: Test - run: yarn test + # - name: Test + # run: yarn test # - name: Coverage # run: yarn codecov diff --git a/docs/.env.example b/docs/.env.example new file mode 100644 index 0000000..d8e52d7 --- /dev/null +++ b/docs/.env.example @@ -0,0 +1,5 @@ +# To use Nuxt UI Pro in production +NUXT_UI_PRO_LICENSE= + +# Used when pre-rendering the docs for dynamic OG images +NUXT_PUBLIC_SITE_URL= diff --git a/docs/.gitignore b/docs/.gitignore old mode 100755 new mode 100644 diff --git a/docs/.npmrc b/docs/.npmrc index bf2e764..cf04042 100644 --- a/docs/.npmrc +++ b/docs/.npmrc @@ -1 +1,2 @@ shamefully-hoist=true +strict-peer-dependencies=false diff --git a/docs/README.md b/docs/README.md new file mode 100644 index 0000000..f599fbe --- /dev/null +++ b/docs/README.md @@ -0,0 +1,35 @@ +# Nuxt Cloudinary docs + +Docs template with [Nuxt UI](https://ui.nuxt.com). + +## Setup + +Install dependencies inside `docs/`: + +```bash +pnpm i +``` + +## Development + +```bash +pnpm run dev +``` + +## Static Generation + +Use the `generate` command to build your application. + +The HTML files will be generated in the .output/public directory and ready to be deployed to any static compatible hosting. + +```bash +pnpm run generate +``` + +## Preview build + +You might want to preview the result of your build locally, to do so, run the following command: + +```bash +pnpm run preview +``` diff --git a/docs/app.config.ts b/docs/app.config.ts index 4783f5c..06c2b27 100644 --- a/docs/app.config.ts +++ b/docs/app.config.ts @@ -1,14 +1,28 @@ export default defineAppConfig({ - docus: { - title: 'Nuxt Cloudinary', - description: '⚡️ High-performance image delivery and uploading at scale in Nuxt powered by Cloudinary.', - image: '/cover.jpg', - socials: { - twitter: 'jacobandrewsky', - github: 'nuxt-modules/cloudinary' + ui: { + primary: 'green', + gray: 'slate', + button: { + color: { + white: { + link: 'text-white dark:text-white hover:text-gray-300 dark:hover:text-gray-300 underline-offset-4 hover:underline focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-gray-500 dark:focus-visible:ring-gray-400 transition-all duration-200', + }, + transparent: { + outline: 'ring-1 ring-inset ring-gray-700 text-white dark:text-white hover:bg-gray-900 disabled:bg-gray-300 dark:hover:bg-gray-900 dark:disabled:bg-gray-300 focus-visible:ring-2 focus-visible:ring-gray-400 dark:focus-visible:ring-gray-400', + }, + }, }, - header: { - logo: true + }, + elements: { + variables: { + light: { + background: '255 255 255', + foreground: 'var(--color-gray-700)', + }, + dark: { + background: 'var(--color-gray-950)', + foreground: 'var(--color-gray-200)', + }, }, - } + }, }) diff --git a/docs/app.vue b/docs/app.vue new file mode 100644 index 0000000..365856c --- /dev/null +++ b/docs/app.vue @@ -0,0 +1,145 @@ + + + diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue new file mode 100644 index 0000000..3b27d2e --- /dev/null +++ b/docs/components/Logo.vue @@ -0,0 +1,39 @@ + diff --git a/docs/content/0.index.md b/docs/content/0.index.md deleted file mode 100644 index 5acd599..0000000 --- a/docs/content/0.index.md +++ /dev/null @@ -1,34 +0,0 @@ ---- -title: Home -description: ⚡️ High-performance image delivery and uploading at scale in Nuxt powered by Cloudinary. -navigation: false -layout: page ---- - -::block-hero ---- -cta: - - Get Started - - /getting-started/setup -secondary: - - Star on GitHub → - - https://github.com/nuxt-modules/cloudinary -snippet: npm i @nuxtjs/cloudinary ---- - -#title -Nuxt Cloudinary - -#description -⚡️ High-performance image delivery and uploading at scale in Nuxt powered by Cloudinary. - -#extra - ::list - - Nuxt 3 ready - - Useful `CldImage`, `CldOgImage` & `CldVideoPlayer` components - - Handy `useCldImageUrl` composable - - Automatically optimize images and deliver in modern formats - - Remove backgrounds from images - - Dynamically add image and text overlays to images - :: -:: diff --git a/docs/content/1.getting-started/1.setup.md b/docs/content/1.getting-started.md similarity index 62% rename from docs/content/1.getting-started/1.setup.md rename to docs/content/1.getting-started.md index d2aa949..12985d4 100644 --- a/docs/content/1.getting-started/1.setup.md +++ b/docs/content/1.getting-started.md @@ -1,7 +1,6 @@ -# Setup - -⚡️ High-performance image delivery and uploading at scale in Nuxt powered by Cloudinary. - +--- +title: Getting Started +description: ⚡️ High-performance image delivery and uploading at scale in Nuxt powered by Cloudinary. --- ## Installation @@ -38,7 +37,7 @@ export default defineNuxtConfig({ CLOUDINARY_CLOUD_NAME= ``` -::alert{type="success"} +::callout{icon="i-heroicons-check-circle"} And that's it! You can now use Clodinary in Nuxt ✨ :: @@ -55,4 +54,20 @@ And that's it! You can now use Clodinary in Nuxt ✨ :cld-image{src="images/sneakers" width="900" height="900" alt="test" style="text-align: center; margin: 0 auto"} -See the [module options](/getting-started/options) for additional configuration. +## Options + +Configure Nuxt Cloudinary easily with the `cloudinary` property. + +```ts [nuxt.config] +export default { + cloudinary: { + cloudName: 'fesfese4324', + } +} +``` + +### `cloudName` + +- Default: `process.env.CLOUDINARY_CLOUD_NAME` + +Your unique Cloudinary Cloud Name. You can find it in the Cloudinary dashboard. diff --git a/docs/content/1.getting-started/2.options.md b/docs/content/1.getting-started/2.options.md deleted file mode 100644 index c42ea67..0000000 --- a/docs/content/1.getting-started/2.options.md +++ /dev/null @@ -1,20 +0,0 @@ -# Options - -Configure Nuxt Cloudinary easily with the `cloudinary` property. - ---- - -```ts [nuxt.config] -export default { - // Defaults options - cloudinary: { - cloudName: 'fesfese4324', - } -} -``` - -## `cloudName` - -- Default: `process.env.CLOUDINARY_CLOUD_NAME` - -Your unique Cloudinary Cloud Name. You can find it in the Cloudinary dashboard. diff --git a/docs/content/1.getting-started/_dir.yml b/docs/content/1.getting-started/_dir.yml deleted file mode 100644 index 5b69d59..0000000 --- a/docs/content/1.getting-started/_dir.yml +++ /dev/null @@ -1,2 +0,0 @@ -title: Getting Started -icon: heroicons-outline:lightning-bolt diff --git a/docs/content/2.components/CldImage/1.usage.md b/docs/content/2.components/CldImage/1.usage.md index 95fbb4c..86396e7 100644 --- a/docs/content/2.components/CldImage/1.usage.md +++ b/docs/content/2.components/CldImage/1.usage.md @@ -1,6 +1,7 @@ -# Usage - --- +description: +--- + The CldImage component provides an easy way to deliver images from Cloudinary with the same experience you'd expect inside of a Nuxt app. With it comes access to more advanced features like dynamic cropping, background removal, overlays, and other Cloudinary transformations. @@ -89,7 +90,7 @@ For all available configuration options, checkout the next page. CldImage supports passing a fully qualified Cloudinary URL as the src, however, it must include a version number (/v1234) in order to be correctly parsed. -::alert{type="info"} +::callout{icon="i-heroicons-light-bulb"} The version number is required due to the variable nature of Cloudinary URLs. This helps to ensure the integretiy when during the parsing process. :: diff --git a/docs/content/2.components/CldImage/2.configuration.md b/docs/content/2.components/CldImage/2.configuration.md index 85745b8..5d0f901 100644 --- a/docs/content/2.components/CldImage/2.configuration.md +++ b/docs/content/2.components/CldImage/2.configuration.md @@ -1,5 +1,5 @@ -# Configuration - +--- +description: --- The CldImage component provides a wide range of options for being able to easily optimize and transform images. diff --git a/docs/content/2.components/CldImage/3.examples.md b/docs/content/2.components/CldImage/3.examples.md index 70790ac..e7e6802 100644 --- a/docs/content/2.components/CldImage/3.examples.md +++ b/docs/content/2.components/CldImage/3.examples.md @@ -1,5 +1,5 @@ -# Examples - +--- +description: --- Below, you can see examples of usage of various effects that you can use from Cloudinary. diff --git a/docs/content/2.components/CldMediaLibrary.md b/docs/content/2.components/CldMediaLibrary.md index 3958c3e..0583e7b 100644 --- a/docs/content/2.components/CldMediaLibrary.md +++ b/docs/content/2.components/CldMediaLibrary.md @@ -1,5 +1,5 @@ -# CldMediaLibrary.vue - +--- +description: --- The CldMediaLibrary creates a media gallery element that uses an instance of the [Cloudinary Media Library Widget](https://cloudinary.com/documentation/media_library_widget) to give you an easy way to add media librarry component to your Nuxt app. diff --git a/docs/content/2.components/CldOgImage.md b/docs/content/2.components/CldOgImage.md index 3688684..396daf2 100644 --- a/docs/content/2.components/CldOgImage.md +++ b/docs/content/2.components/CldOgImage.md @@ -1,5 +1,5 @@ -# CldOgImage.vue - +--- +description: --- ## Usage @@ -16,7 +16,7 @@ The basic required prop is `src`: /> ``` -::alert{type="warning"} +::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"} CldOgImage does not render an `` tag, meaning it can't be visually embedded on a page. To see the output, please check out the raw HTML of your website :: diff --git a/docs/content/2.components/CldProductGallery.md b/docs/content/2.components/CldProductGallery.md index 0076066..cfc35ac 100644 --- a/docs/content/2.components/CldProductGallery.md +++ b/docs/content/2.components/CldProductGallery.md @@ -1,5 +1,5 @@ -# CldProductGallery.vue - +--- +description: --- The CldProductGallery creates a product gallery element that uses an instance of the [Cloudinary Product Gallery Widget](https://cloudinary.com/documentation/product_gallery_reference) to give you an easy way to add product gallery component to your Nuxt app. diff --git a/docs/content/2.components/CldUploadButton.md b/docs/content/2.components/CldUploadButton.md index 33b24ba..ca17dbe 100644 --- a/docs/content/2.components/CldUploadButton.md +++ b/docs/content/2.components/CldUploadButton.md @@ -1,5 +1,5 @@ -# CldUploadButton.vue - +--- +description: --- The CldUploadButton creates a button element that uses an instance of the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget) to give you an easy way to add upload capabilities to your Nuxt app. diff --git a/docs/content/2.components/CldUploadWidget.md b/docs/content/2.components/CldUploadWidget.md index 5b9d2d8..6ba8324 100644 --- a/docs/content/2.components/CldUploadWidget.md +++ b/docs/content/2.components/CldUploadWidget.md @@ -1,5 +1,5 @@ -# CldUploadWidget.vue - +--- +description: --- The CldUploadWidget creates a new instance of the [Cloudinary Upload Widget](https://cloudinary.com/documentation/upload_widget) giving you an easy way to add upload capabilities to your Nuxt app. @@ -10,7 +10,7 @@ The CldUploadWidget will not render any UI by default. It will instead only rend There are two options when using the CldUploadWidget: signed and unsigned. These options allow you to control the amount of security and restrictions you place on uploads. -::alert{type="info"} +::callout{icon="i-heroicons-light-bulb"} To learn more about signed and unsigned upload, check out the [Cloudinary docs](https://cloudinary.com/documentation/upload_images#uploading_assets_to_the_cloud). :: @@ -18,7 +18,7 @@ To learn more about signed and unsigned upload, check out the [Cloudinary docs]( To give unsigned access for upload, provide an upload preset as part of the component configuration. -::alert{type="warning"} +::callout{icon="i-heroicons-exclamation-triangle-20-solid" color="amber"} Note: The upload preset requires that unsigned uploads are permitted. :: diff --git a/docs/content/2.components/CldVideoPlayer.md b/docs/content/2.components/CldVideoPlayer.md index ded8641..2b5269e 100644 --- a/docs/content/2.components/CldVideoPlayer.md +++ b/docs/content/2.components/CldVideoPlayer.md @@ -1,5 +1,5 @@ -# CldVideoPlayer.vue - +--- +description: --- ## The usage @@ -56,7 +56,7 @@ Or listening to player events for advanced interactions with: /> ``` -::alert{type="info"} +::callout{icon="i-heroicons-light-bulb"} Check the browser console after playing and pausing the video for logs that were added to the component. :: diff --git a/docs/content/2.components/_dir.yml b/docs/content/2.components/_dir.yml deleted file mode 100644 index 391a3e5..0000000 --- a/docs/content/2.components/_dir.yml +++ /dev/null @@ -1 +0,0 @@ -icon: heroicons-outline:play diff --git a/docs/content/3.composables/1.useCldImageUrl.md b/docs/content/3.composables/1.useCldImageUrl.md index 047db54..601d219 100644 --- a/docs/content/3.composables/1.useCldImageUrl.md +++ b/docs/content/3.composables/1.useCldImageUrl.md @@ -1,5 +1,5 @@ -# `useCldImageUrl` - +--- +description: --- This composable is using [@cloudinary-util/url-loader](https://github.com/colbyfayock/cloudinary-util/tree/main/packages/url-loader) under the hood to generate the Cloudinary URL with certain optimizations. diff --git a/docs/content/3.composables/_dir.yml b/docs/content/3.composables/_dir.yml deleted file mode 100644 index 391a3e5..0000000 --- a/docs/content/3.composables/_dir.yml +++ /dev/null @@ -1 +0,0 @@ -icon: heroicons-outline:play diff --git a/docs/content/4.community/_changelog.md b/docs/content/4.community/_changelog.md deleted file mode 100644 index 200dbab..0000000 --- a/docs/content/4.community/_changelog.md +++ /dev/null @@ -1,12 +0,0 @@ ---- -toc: false ---- - -# Changelog - -Discover the latest updates. - ---- - -::releases -:: diff --git a/docs/content/4.community/_dir.yml b/docs/content/4.community/_dir.yml deleted file mode 100644 index 3137ea0..0000000 --- a/docs/content/4.community/_dir.yml +++ /dev/null @@ -1,2 +0,0 @@ -title: Community -icon: heroicons-outline:user-group diff --git a/docs/content/code.md b/docs/content/code.md new file mode 100644 index 0000000..7472ede --- /dev/null +++ b/docs/content/code.md @@ -0,0 +1,8 @@ +```html [app.vue] + +``` diff --git a/docs/content/index.yml b/docs/content/index.yml new file mode 100644 index 0000000..98cfe21 --- /dev/null +++ b/docs/content/index.yml @@ -0,0 +1,41 @@ +navigation: false +hero: + title: 'Nuxt Cloudinary' + description: '⚡️ High-performance image delivery and uploading at scale in Nuxt powered by Cloudinary.' + button: Get started + cover: 'https://cloudinary.nuxtjs.org/cover.jpg' + code: | + ``` + + ``` +features: + title: 'Shipped with many features' + items: + - title: 'Nuxt 3 ready' + icon: 'i-simple-icons-nuxtdotjs' + to: 'https://nuxt.com' + target: '_blank' + - title: 'Vue 3 composables' + icon: 'i-simple-icons-vuedotjs' + to: 'https://vuejs.org/guide/reusability/composables.html' + target: '_blank' + - title: 'TypeScript support' + icon: 'i-simple-icons-typescript' + to: 'https://www.typescriptlang.org' + target: '_blank' + - title: 'Cloudinary URL Loader' + icon: 'i-simple-icons-cloudinary' + to: 'https://cloudinary.com' + target: '_blank' + - title: 'Optimized images in modern formats' + icon: 'i-heroicons-photo' + - title: 'Remove backgrounds & add overlays' + icon: 'i-heroicons-home-modern' + diff --git a/docs/layouts/default.vue b/docs/layouts/default.vue new file mode 100644 index 0000000..ba4672f --- /dev/null +++ b/docs/layouts/default.vue @@ -0,0 +1,3 @@ + diff --git a/docs/layouts/docs.vue b/docs/layouts/docs.vue new file mode 100644 index 0000000..18a9088 --- /dev/null +++ b/docs/layouts/docs.vue @@ -0,0 +1,23 @@ + + + diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts old mode 100755 new mode 100644 index 5787623..68925e4 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -1,17 +1,46 @@ export default defineNuxtConfig({ - extends: '@nuxt-themes/docus', - modules: ['@nuxtjs/cloudinary'], + extends: '@nuxt/ui-pro', + + modules: [ + '@nuxt/content', + '@nuxt/ui', + '@nuxtjs/cloudinary', + ], + + colorMode: { + preference: 'dark', + }, + cloudinary: { cloudName: 'nuxt-cloudinary' }, - postcss: { - plugins: { - autoprefixer: {}, - cssnano: - process.env.NODE_ENV === 'production' - ? { preset: ['default', { discardComments: { removeAll: true } }] } - : false, // disable cssnano when not in production + ui: { + icons: ['heroicons', 'simple-icons', 'ph'], + }, + + nitro: { + prerender: { + routes: ['/api/search.json'], }, - } + }, + + hooks: { + // Related to https://github.com/nuxt/nuxt/pull/22558 + // Adding all global components to the main entry + // To avoid lagging during page navigation on client-side + 'components:extend': function (components) { + for (const comp of components) { + if (comp.global) + comp.global = 'sync' + } + }, + }, + + // devtools: { + // enabled: true, + // componentInspector: { + // cleanHtml: false, + // }, + // }, }) diff --git a/docs/package.json b/docs/package.json old mode 100755 new mode 100644 index 8d590e2..44d2598 --- a/docs/package.json +++ b/docs/package.json @@ -1,25 +1,19 @@ { - "name": "nuxt-cloudinary-docs", - "version": "1.0.0", - "description": "Cloudinary module for Nuxt: the docs.", + "name": "@nuxt-modules/cloudinary-docs", + "private": true, "scripts": { - "dev": "nuxt dev", - "build": "nuxt build", - "generate": "NODE_OPTIONS=--max_old_space_size=16384 nuxt generate", - "preview": "nuxt preview", - "start": "nuxt start" - }, - "author": "NuxtCommunity", - "license": "MIT", - "homepage": "https://cloudinary.nuxtjs.org", - "devDependencies": { - "@nuxt-themes/docus": "^1.15.0", - "nuxt": "3.5.3" + "dev": "nuxi dev", + "build": "nuxi build", + "generate": "nuxi generate", + "preview": "nuxi preview" }, "dependencies": { - "@nuxtjs/cloudinary": "^2.5.2" - }, - "resolutions": { - "nuxt": "3.5.3" + "@iconify-json/ph": "^1.1.10", + "@iconify-json/simple-icons": "^1.1.87", + "@nuxt/content": "^2.10.0", + "@nuxt/devtools": "1.0.5", + "@nuxt/ui-pro": "^0.6.1", + "@nuxtjs/cloudinary": "^2.5.2", + "nuxt": "^3.9.3" } } diff --git a/docs/pages/[...slug].vue b/docs/pages/[...slug].vue new file mode 100644 index 0000000..b714fad --- /dev/null +++ b/docs/pages/[...slug].vue @@ -0,0 +1,96 @@ + + + diff --git a/docs/pages/index.vue b/docs/pages/index.vue new file mode 100644 index 0000000..a568a60 --- /dev/null +++ b/docs/pages/index.vue @@ -0,0 +1,108 @@ + + +