@devite/nuxt-sanity 1.0.1 → 1.0.3

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.1",
+  "version": "1.0.3",
   "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/SanityComponent.vue

@@ -9,12 +9,30 @@
 </template>
 
 <script setup lang="ts">
-const props = defineProps<{ data: object }>()
+import type { Component } from '@nuxt/schema'
+import { resolveComponent } from '#imports'
+import { SanityLinkExternal, SanityLinkInternal, SanityRichText } from '#components'
 
-const type
-  = props.data.constructor.name === 'Array' && props.data.every(item => item._type === 'block')
-    ? 'richText'
-    : props.data?._type
-const upperCamelCase = type?.charAt(0).toUpperCase() + type?.slice(1)
-const component = resolveComponent('Sanity' + upperCamelCase)
+const props = defineProps<{ data?: object }>()
+
+const type = props.data?._type
+let component: Component
+
+switch (type) {
+  case 'linkInternal':
+    component = SanityLinkInternal
+    break
+  case 'linkExternal':
+    component = SanityLinkExternal
+    break
+  default:
+    if (props.data?.constructor.name === 'Array' && props.data.every(item => item._type === 'block'))
+      component = SanityRichText
+    else if (type) {
+      const upperCamelCase = type.charAt(0).toUpperCase() + type.slice(1)
+      component = resolveComponent('Sanity' + upperCamelCase)
+    }
+
+    break
+}
 </script>

package/dist/runtime/components/{link/External.vue → SanityLinkExternal.vue}

@@ -8,7 +8,7 @@
 </template>
 
 <script setup lang="ts">
-import type { LinkExternal } from '~/types/objects/link/LinkExternal'
+import type { LinkExternal } from '../types/objects/link/LinkExternal'
 
 defineProps<{ data: LinkExternal }>()
 </script>

package/dist/runtime/components/{link/Internal.vue → SanityLinkInternal.vue}

@@ -7,7 +7,7 @@
 </template>
 
 <script setup lang="ts">
-import type { LinkInternal } from '~/types/objects/link/LinkInternal'
+import type { LinkInternal } from '../types/objects/link/LinkInternal'
 
 defineProps<{ data: LinkInternal }>()
 </script>

package/dist/runtime/components/SanityPage.vue

@@ -1,5 +1,5 @@
 <template>
-  <main v-if="sanityData.modules?.length > 0">
+  <main v-if="sanityData?.modules?.length > 0">
     <SanityComponent
       v-for="module in sanityData.modules"
       :key="module._key"
@@ -9,26 +9,33 @@
 </template>
 
 <script setup lang="ts">
-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 { 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'
 
 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 { site_name, 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: [
-    { name: 'site_name', content: () => globalSEO.value?.site_name },
+    { name: 'site_name', content: () => globalSEO.value?.siteName },
     { name: 'og:image', content: () => image.value?.url },
     { name: 'og:image:width', content: () => image.value?.metadata.dimensions.width },
     { name: 'og:image:height', content: () => image.value?.metadata.dimensions.height },
@@ -47,9 +54,9 @@ useSeoMeta({
   robots: () => ((seo.value?.indexable ? '' : 'no') + 'index,follow'),
   title: () => seo.value?.title,
   description: () => seo.value?.description,
-  ogTitle: () => seo.value?.opengraph_title,
+  ogTitle: () => seo.value?.shortTitle,
   ogDescription: () => seo.value?.description,
-  twitterTitle: () => seo.value?.opengraph_title,
+  twitterTitle: () => seo.value?.shortTitle,
   twitterDescription: () => seo.value?.description,
 })
 </script>

package/dist/runtime/components/{RichText.vue → SanityRichText.vue}

@@ -7,8 +7,9 @@
 
 <script setup lang="ts">
 import { PortableText, type PortableTextComponents } from '@portabletext/vue'
-import type { RichText } from '~/types/richText/RichText'
-import { LinkExternal, LinkInternal } from '#components'
+import type { RichText } from '../types/richText/RichText'
+import { computed, h } from '#imports'
+import { SanityLinkExternal, SanityLinkInternal } from '#components'
 
 const { data, placeholders = {} } = defineProps<{ data: RichText, placeholders?: object }>()
 const currentData = computed(() => {
@@ -47,9 +48,9 @@ function replacePlaceholders(text: string) {
 const richTextSerializer: PortableTextComponents = {
   marks: {
     linkExternal: ({ value }, { slots }) =>
-      h(LinkExternal, { data: value }, slots.default),
+      h(SanityLinkExternal, { data: value }, slots.default),
     linkInternal: ({ value }, { slots }) =>
-      h(LinkInternal, { data: value }, slots.default),
+      h(SanityLinkInternal, { data: value }, slots.default),
   },
 }
 </script>

package/dist/runtime/types/documents/Page.d.ts

@@ -0,0 +1,10 @@
+import type { Slug } from '@sanity/types';
+import type { SEO } from '../objects/SEO.js';
+export interface Page {
+    _id: string;
+    _type: 'page';
+    title: string;
+    slug: Slug;
+    modules: Array<object>;
+    seo: SEO;
+}

package/dist/runtime/types/objects/SEO.d.ts

@@ -0,0 +1,9 @@
+import type { Image } from '@sanity/types';
+export interface SEO {
+    _type: 'seo';
+    indexable: boolean;
+    title: string;
+    shortTitle: string;
+    description: string;
+    image?: Image;
+}

package/dist/runtime/types/objects/global/GlobalSEO.d.ts

@@ -0,0 +1,5 @@
+import type { Image } from '@sanity/types';
+export interface GlobalSEO {
+    siteName: string;
+    image: Image;
+}

package/dist/runtime/types/objects/link/LinkExternal.d.ts

@@ -0,0 +1,5 @@
+export interface LinkExternal {
+    _type: 'linkExternal';
+    url: string;
+    newWindow: boolean;
+}

package/dist/runtime/types/objects/link/LinkInternal.d.ts

@@ -0,0 +1,4 @@
+export interface LinkInternal {
+    _type: 'linkInternal';
+    slug: string;
+}

package/dist/runtime/types/richText/RichText.d.ts

@@ -0,0 +1,2 @@
+import type { PortableTextBlock } from '@sanity/types';
+export type RichText = PortableTextBlock[];

package/dist/runtime/types/singletons/Home.d.ts

@@ -0,0 +1,6 @@
+import type { SEO } from '../objects/SEO.js';
+export interface Home {
+    _type: 'home';
+    modules: Array<object>;
+    seo: SEO;
+}

package/dist/runtime/types/singletons/NotFound.d.ts

@@ -0,0 +1,6 @@
+import type { SEO } from '../objects/SEO.js';
+export interface NotFound {
+    _type: 'notFound';
+    modules: Array<object>;
+    seo: SEO;
+}

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

@@ -0,0 +1,2 @@
+export declare const PICTURE_PROJECTION: any;
+export declare const IMAGE_PROJECTION: any;

package/dist/runtime/utils/projections.js

@@ -0,0 +1,23 @@
+import { groq } from "@nuxtjs/sanity/runtime/groq";
+export const PICTURE_PROJECTION = groq`{
+  _type,
+  asset-> {
+    _type,
+    _id,
+    url,
+    altText,
+    mimeType,
+    metadata { dimensions }
+  }
+}`;
+export const IMAGE_PROJECTION = groq`{
+  _type,
+  asset-> {
+    _type,
+    _id,
+    url,
+    altText,
+    mimeType,
+    metadata { lqip, dimensions }
+  }
+}`;

package/package.json

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