Merge pull request #185 from nuxt-modules/refactor/docs

refactor: docs

.eslintrc

@@ -5,5 +5,6 @@
   ],
   "rules": {
     "vue/multi-word-component-names": "off"
-  }
+  },
+  "ignorePatterns": ["**/docs"]
 }

.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

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=

docs/.npmrc

@@ -1 +1,2 @@
 shamefully-hoist=true
+strict-peer-dependencies=false

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
+```

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)',
+      },
     },
-  }
+  },
 })

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>

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.

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.
 ::
 

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.

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.

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.