@devite/nuxt-sanity 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Justus Geramb
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,53 @@
+# Nuxt Sanity Integration
+
+[![npm version][npm-version-src]][npm-version-href]
+
+Optimizes the configuration for [@nuxtjs/sanity][nuxt-sanity] and provides additional helper components.
+
+## Quick Setup
+
+Install the module to your Nuxt application with one command:
+
+```bash
+npx nuxi module add @devite/nuxt-sanity
+```
+
+That's it! You can now use the Sanity Integration in your Nuxt app ✨
+
+
+## Contribution
+
+<details>
+  <summary>Local development</summary>
+  
+  ```bash
+  # Install dependencies
+  pnpm install
+  
+  # Generate type stubs
+  pnpm dev:prepare
+  
+  # Develop with the playground
+  pnpm dev
+  
+  # Build the playground
+  pnpm dev:build
+  
+  # Run ESLint
+  pnpm lint
+  
+  # Run Vitest
+  pnpm test
+  pnpm test:watch
+  
+  # Release new version
+  pnpm release
+  ```
+</details>
+
+<!-- Links -->
+[nuxt-sanity]: https://github.com/nuxt-modules/sanity
+
+<!-- Badges -->
+[npm-version-src]: https://img.shields.io/npm/v/@devite/nuxt-sanity/latest.svg?style=flat&colorA=020420&colorB=00DC82
+[npm-version-href]: https://npmjs.com/package/@devite/nuxt-sanity

package/dist/module.cjs

@@ -0,0 +1,5 @@
+module.exports = function(...args) {
+  return import('./module.mjs').then(m => m.default.call(this, ...args))
+}
+const _meta = module.exports.meta = require('./module.json')
+module.exports.getMeta = () => Promise.resolve(_meta)

package/dist/module.d.mts

@@ -0,0 +1,5 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.d.ts

@@ -0,0 +1,5 @@
+import * as _nuxt_schema from '@nuxt/schema';
+
+declare const _default: _nuxt_schema.NuxtModule<_nuxt_schema.ModuleOptions, _nuxt_schema.ModuleOptions, false>;
+
+export { _default as default };

package/dist/module.json

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

package/dist/module.mjs

@@ -0,0 +1,14 @@
+import { defineNuxtModule, createResolver, addComponentsDir } from '@nuxt/kit';
+
+const module = defineNuxtModule({
+  meta: {
+    name: "@devite/nuxt-sanity"
+  },
+  async setup(_options, _nuxt) {
+    const { resolve } = createResolver(import.meta.url);
+    await addComponentsDir({ path: resolve("runtime/components") });
+    await addComponentsDir({ path: "~/sanity", global: true, prefix: "Sanity" });
+  }
+});
+
+export { module as default };

package/dist/runtime/components/ImageAsset.vue

@@ -0,0 +1,20 @@
+<template>
+  <NuxtImg
+    v-if="asset?._id"
+    densities="x1 x2"
+    :src="asset._id"
+    :width="asset.metadata.dimensions.width"
+    :height="asset.metadata.dimensions.height"
+    :alt="asset.altText"
+    :placeholder="asset.metadata.lqip"
+    :loading="loading"
+    :format="asset.mimeType === 'image/svg+xml' ? undefined : 'webp'"
+    draggable="false"
+  />
+</template>
+
+<script setup lang="ts">
+import type { ImageAsset } from '@sanity/types'
+
+const { loading = 'lazy' } = defineProps<{ asset: ImageAsset, loading?: 'lazy' | 'eager' }>()
+</script>

package/dist/runtime/components/RichText.vue

@@ -0,0 +1,55 @@
+<template>
+  <PortableText
+    :value="currentData"
+    :components="richTextSerializer"
+  />
+</template>
+
+<script setup lang="ts">
+import { PortableText, type PortableTextComponents } from '@portabletext/vue'
+import type { RichText } from '~/types/richText/RichText'
+import { LinkExternal, LinkInternal } from '#components'
+
+const { data, placeholders = {} } = defineProps<{ data: RichText, placeholders?: object }>()
+const currentData = computed(() => {
+  return data.map((block) => {
+    return {
+      ...block,
+      children: replaceChildren(block.children),
+    }
+  })
+})
+
+function replaceChildren(children: object[]) {
+  return children.map((child) => {
+    if (child._type === 'span') {
+      return {
+        ...child,
+        text: replacePlaceholders(child.text),
+      }
+    }
+
+    if (child.children) {
+      return {
+        ...child,
+        children: replaceChildren(child.children),
+      }
+    }
+
+    return child
+  })
+}
+
+function replacePlaceholders(text: string) {
+  return text.replace(/\{\{(.*?)\}\}/g, (match, key) => placeholders[key] || match)
+}
+
+const richTextSerializer: PortableTextComponents = {
+  marks: {
+    linkExternal: ({ value }, { slots }) =>
+      h(LinkExternal, { data: value }, slots.default),
+    linkInternal: ({ value }, { slots }) =>
+      h(LinkInternal, { data: value }, slots.default),
+  },
+}
+</script>

package/dist/runtime/components/SanityComponent.vue

@@ -0,0 +1,20 @@
+<template>
+  <component
+    :is="component"
+    v-if="data"
+    :data="data"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{ data: object }>()
+
+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)
+</script>

package/dist/runtime/components/SanityPage.vue

@@ -0,0 +1,55 @@
+<template>
+  <main v-if="sanityData.modules?.length > 0">
+    <SanityComponent
+      v-for="module in sanityData.modules"
+      :key="module._key"
+      :data="module"
+    />
+  </main>
+</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'
+
+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 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)
+
+useHead({
+  meta: [
+    { name: 'site_name', content: () => globalSEO.value?.site_name },
+    { 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 },
+    { name: 'twitter:image', content: () => image.value?.url },
+    { name: 'twitter:image:width', content: () => image.value?.metadata.dimensions.width },
+    { name: 'twitter:image:height', content: () => image.value?.metadata.dimensions.height },
+    { name: 'og:url', content: () => url.value },
+    { name: 'twitter:url', content: () => url.value },
+  ],
+  link: [
+    { rel: 'canonical', href: () => url.value },
+  ],
+})
+
+useSeoMeta({
+  robots: () => ((seo.value?.indexable ? '' : 'no') + 'index,follow'),
+  title: () => seo.value?.title,
+  description: () => seo.value?.description,
+  ogTitle: () => seo.value?.opengraph_title,
+  ogDescription: () => seo.value?.description,
+  twitterTitle: () => seo.value?.opengraph_title,
+  twitterDescription: () => seo.value?.description,
+})
+</script>

package/dist/runtime/components/link/External.vue

@@ -0,0 +1,14 @@
+<template>
+  <NuxtLink
+    :to="data.url"
+    :options="{ external: true, target: data.newWindow ? '_blank' : null }"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { LinkExternal } from '~/types/objects/link/LinkExternal'
+
+defineProps<{ data: LinkExternal }>()
+</script>

package/dist/runtime/components/link/Internal.vue

@@ -0,0 +1,13 @@
+<template>
+  <NuxtLink
+    :to="data.slug"
+  >
+    <slot />
+  </NuxtLink>
+</template>
+
+<script setup lang="ts">
+import type { LinkInternal } from '~/types/objects/link/LinkInternal'
+
+defineProps<{ data: LinkInternal }>()
+</script>

package/dist/types.d.mts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module.js'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module.js'

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+import type { NuxtModule } from '@nuxt/schema'
+
+import type { default as Module } from './module'
+
+export type ModuleOptions = typeof Module extends NuxtModule<infer O> ? Partial<O> : Record<string, any>
+
+export { default } from './module'

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@devite/nuxt-sanity",
+  "version": "1.0.1",
+  "description": "Optimizes the configuration for @nuxt/sanity and provides additional helper components.",
+  "repository": "devite-io/nuxt-sanity",
+  "license": "MIT",
+  "author": {
+    "name": "Justus Geramb <justus@devite.io>",
+    "url": "https://www.devite.io"
+  },
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/types.d.ts",
+      "import": "./dist/module.mjs",
+      "require": "./dist/module.cjs"
+    }
+  },
+  "main": "./dist/module.cjs",
+  "types": "./dist/types.d.ts",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "@nuxt/kit": "^3.13.2",
+    "@nuxtjs/sanity": "^1.12.1",
+    "@sanity/types": "^3.57.3"
+  },
+  "devDependencies": {
+    "@nuxt/devtools": "^1.4.2",
+    "@nuxt/eslint-config": "^0.5.7",
+    "@nuxt/module-builder": "^0.8.4",
+    "@nuxt/schema": "^3.13.2",
+    "@nuxt/test-utils": "^3.14.2",
+    "@portabletext/vue": "^1.0.11",
+    "@types/node": "latest",
+    "changelogen": "^0.5.5",
+    "eslint": "^9.10.0",
+    "nuxt": "^3.13.2",
+    "typescript": "latest",
+    "vitest": "^2.1.1",
+    "vue-tsc": "^2.1.6"
+  },
+  "scripts": {
+    "dev": "nuxi dev playground",
+    "dev:cms": "cd playground/cms && pnpm dev",
+    "dev:build": "nuxi build playground",
+    "dev:prepare": "nuxt-module-build build --stub && nuxt-module-build prepare && nuxi prepare playground",
+    "release": "pnpm lint && pnpm test && pnpm prepack && changelogen --release && pnpm publish --access=public && git push --follow-tags",
+    "lint": "eslint .",
+    "test": "vitest run --passWithNoTests",
+    "test:watch": "vitest watch",
+    "test:types": "vue-tsc --noEmit && cd playground && vue-tsc --noEmit"
+  }
+}