@devite/nuxt-sanity 1.0.2 → 1.1.0

package/README.md

@@ -2,7 +2,7 @@
 
 [![npm version][npm-version-src]][npm-version-href]
 
-Optimizes the configuration for [@nuxtjs/sanity][nuxt-sanity] and provides additional helper components.
+Provides additional helper components and utilities for the [Nuxt Sanity Module][nuxt-sanity].
 
 ## Quick Setup
 
@@ -12,7 +12,7 @@ Install the module to your Nuxt application with one command:
 npx nuxi module add @devite/nuxt-sanity
 ```
 
-That's it! You can now use the Sanity Integration in your Nuxt app ✨
+That's it! You can now use data from Sanity in your Nuxt app ✨
 
 
 ## Contribution
@@ -22,7 +22,7 @@ That's it! You can now use the Sanity Integration in your Nuxt app ✨
   
   ```bash
   # Install dependencies
-  pnpm install
+  pnpm install && cd playground/cms && pnpm install
   
   # Generate type stubs
   pnpm dev:prepare

package/dist/module.json

@@ -1,9 +1,9 @@
 {
   "name": "@devite/nuxt-sanity",
   "configKey": "@devite/nuxt-sanity",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "builder": {
     "@nuxt/module-builder": "0.8.4",
-    "unbuild": "2.0.0"
+    "unbuild": "unknown"
   }
 }

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, addComponentsDir, addImportsDir } from '@nuxt/kit';
 
 const module = defineNuxtModule({
   meta: {
@@ -8,6 +8,7 @@ const module = defineNuxtModule({
     const { resolve } = createResolver(import.meta.url);
     await addComponentsDir({ path: resolve("runtime/components") });
     await addComponentsDir({ path: "~/sanity", global: true, prefix: "Sanity" });
+    addImportsDir(resolve("runtime/utils"));
   }
 });
 

package/dist/runtime/components/SanityPage.vue

@@ -11,10 +11,13 @@
 <script setup lang="ts">
 import { useSanityQuery } from '@nuxtjs/sanity/runtime/composables'
 import { groq } from '@nuxtjs/sanity/runtime/groq'
+import type { ComputedRef } from 'vue'
+import type { ImageAsset } from '@sanity/types'
 import type { Home } from '../types/singletons/Home'
 import type { Page } from '../types/documents/Page'
 import type { NotFound } from '../types/singletons/NotFound'
 import type { GlobalSEO } from '../types/objects/global/GlobalSEO'
+import { IMAGE_PROJECTION } from '../utils/projections'
 import { useHead, useRoute, useRuntimeConfig, useSeoMeta } from '#app'
 import { computed } from '#imports'
 
@@ -22,13 +25,13 @@ const { baseURL } = useRuntimeConfig().public
 
 const path = useRoute().fullPath
 const groqFilter = path === '/' ? '_type == "home"' : `_type == "page" && slug.current == "${path.substring(1)}"`
-const { data: sanityData } = await useSanityQuery<Home | Page | NotFound>(groq`*[(${groqFilter}) || _type == "notFound"][0] { _id, _type, title, modules, seo }`)
+const { data: sanityData } = await useSanityQuery<Home | Page | NotFound>(groq`*[(${groqFilter}) || _type == "notFound"][0] { _id, _type, title, modules, seo { _type, indexable, title, shortTitle, description, image ${IMAGE_PROJECTION} } }`)
 
 const seo = computed(() => sanityData.value?.seo)
 const url = computed(() => baseURL + (sanityData.value?.slug || '/'))
 
-const { data: globalSEO } = await useSanityQuery<GlobalSEO>(groq`*[_type == 'settings'][0].seo { siteName, image }`)
-const image = computed(() => sanityData.value?.image || globalSEO.value?.image)
+const { data: globalSEO } = await useSanityQuery<GlobalSEO>(groq`*[_type == 'settings'][0].seo { siteName, image ${IMAGE_PROJECTION} }`)
+const image: ComputedRef<ImageAsset> = computed(() => sanityData.value?.image?.asset || globalSEO.value?.image?.asset)
 
 useHead({
   meta: [

package/dist/runtime/utils/projections.d.ts

@@ -0,0 +1,3 @@
+export declare const IMAGE_ASSET_PROJECTION: any;
+export declare const IMAGE_WITHOUT_PREVIEW_PROJECTION: any;
+export declare const IMAGE_WITH_PREVIEW_PROJECTION: any;

package/dist/runtime/utils/projections.js

@@ -0,0 +1,17 @@
+import { groq } from "@nuxtjs/sanity/runtime/groq";
+export const IMAGE_ASSET_PROJECTION = groq`{
+  _type,
+  _id,
+  url,
+  altText,
+  mimeType,
+  metadata { lqip, dimensions }
+}`;
+export const IMAGE_WITHOUT_PREVIEW_PROJECTION = groq`{
+  _type,
+  asset-> ${IMAGE_ASSET_PROJECTION.replace("lqip, ", "")},
+}`;
+export const IMAGE_WITH_PREVIEW_PROJECTION = groq`{
+  _type,
+  asset-> ${IMAGE_ASSET_PROJECTION}
+}`;

package/dist/runtime/utils/resolveImageAssetById.d.ts

@@ -0,0 +1,2 @@
+import type { ImageAsset } from '@sanity/types';
+export declare const resolveImageAssetById: (id: string) => Promise<ImageAsset | undefined>;

package/dist/runtime/utils/resolveImageAssetById.js

@@ -0,0 +1,5 @@
+import { useSanityQuery } from "@nuxtjs/sanity/runtime/composables";
+import { IMAGE_ASSET_PROJECTION } from "./projections.js";
+export const resolveImageAssetById = async (id) => {
+  return await useSanityQuery(`*[_type == "sanity.imageAsset" && _id == $assetId][0] ${IMAGE_ASSET_PROJECTION}`, { assetId: id });
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@devite/nuxt-sanity",
-  "version": "1.0.2",
+  "version": "1.1.0",
   "description": "Optimizes the configuration for @nuxt/sanity and provides additional helper components.",
   "repository": "devite-io/nuxt-sanity",
   "license": "MIT",