nuxt-modules · Baroshem · Jan 24, 2024 · Jan 23, 2024 · Jan 23, 2024 · Jan 23, 2024
diff --git 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
@@ -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
@@ -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
diff --git 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
@@ -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
@@ -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
@@ -0,0 +1,145 @@
+<script setup>
+useServerSeoMeta({
+ ogSiteName: "Nuxt Cloudinary",
+ twitterCard: "summary_large_image",
+});
+useHead({
+ htmlAttrs: {
+ lang: "en",
+ },
+});
+const links = [
+ {
+ label: "Documentation",
+ to: "/getting-started",
+ },
+ {
+ label: "Playground",
+ to: "/playground",
+ },
+ {
+ label: "Releases",
+ to: "https://github.com/nuxt-modules/cloudinary/releases",
+ target: "_blank",
+ },
+];
+const { data: files } = useLazyFetch("/api/search.json", {
+ default: () => [],
+ server: false,
+});
+const { data: navigation } = await useAsyncData("navigation", () =>
+ fetchContentNavigation()
+);
+
+// Provide
+provide("navigation", navigation);
+</script>
+
+<template>
+ <UHeader :links="links">
+ <template #logo>
+ <Logo />
+ </template>
+
+ <template #right>
+ <UColorModeButton v-if="!$colorMode.forced" />
+ <UButton
+ aria-label="Nuxt Website"
+ icon="i-simple-icons-nuxtdotjs"
+ to="https://nuxt.com"
+ target="_blank"
+ color="gray"
+ variant="ghost"
+ />
+ <UButton
+ aria-label="Nuxt on X"
+ icon="i-simple-icons-x"
+ to="https://x.com/nuxt_js"
+ target="_blank"
+ color="gray"
+ variant="ghost"
+ />
+ <UButton
+ aria-label="Nuxt Cloudinary on GitHub"
+ icon="i-simple-icons-github"
+ to="https://github.com/nuxt-modules/cloudinary"
+ target="_blank"
+ color="gray"
+ variant="ghost"
+ />
+ <UButton
+ aria-label="Cloudinary"
+ icon="i-simple-icons-cloudinary"
+ to="https://cloudinary.com"
+ target="_blank"
+ color="gray"
+ variant="ghost"
+ />
+ </template>
+ <!-- Mobile panel -->
+ <template v-if="$route.path !== '/'" #panel>
+ <LazyUDocsSearchButton size="md" class="mb-4 w-full" />
+ <LazyUNavigationTree
+ :links="mapContentNavigation(navigation)"
+ default-open
+ :multiple="false"
+ />
+ </template>
+ </UHeader>
+
+ <NuxtLayout>
+ <NuxtPage />
+ </NuxtLayout>
+
+ <UFooter :links="links">
+ <template #left>
+ <span class="text-sm">
+ Published under
+ <NuxtLink
+ to="https://github.com/nuxt-modules/Cloudinary"
+ target="_blank"
+ class="underline"
+ >MIT License</NuxtLink
+ >
+ </span>
+ </template>
+ <template #right>
+ <UColorModeButton v-if="!$colorMode.forced" />
+ <UButton
+ aria-label="Nuxt Website"
+ icon="i-simple-icons-nuxtdotjs"
+ to="https://nuxt.com"
+ target="_blank"
+ color="gray"
+ variant="ghost"
+ />
+ <UButton
+ aria-label="Nuxt on X"
+ icon="i-simple-icons-x"
+ to="https://x.com/nuxt_js"
+ target="_blank"
+ color="gray"
+ variant="ghost"
+ />
+ <UButton
+ aria-label="Nuxt Cloudinary on GitHub"
+ icon="i-simple-icons-github"
+ to="https://github.com/nuxt-modules/cloudinary"
+ target="_blank"
+ color="gray"
+ variant="ghost"
+ />
+ <UButton
+ aria-label="Cloudinary"
+ icon="i-simple-icons-cloudinary"
+ to="https://cloudinary.com"
+ target="_blank"
+ color="gray"
+ variant="ghost"
+ />
+ </template>
+ </UFooter>
+ <ClientOnly>
+ <LazyUDocsSearch :files="files" :navigation="navigation" :links="links" />
+ </ClientOnly>
+</template>
diff --git a/docs/components/Logo.vue b/docs/components/Logo.vue
diff --git a/docs/content/0.index.md b/docs/content/0.index.md
diff --git a/docs/content/1.getting-started/1.setup.md → docs/content/1.getting-started.md b/docs/content/1.getting-started/1.setup.md → 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=<YOUR_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
diff --git a/docs/content/1.getting-started/_dir.yml b/docs/content/1.getting-started/_dir.yml
diff --git 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
@@ -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
@@ -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
@@ -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.