@gluhar/app 2.5.1 → 2.6.0

package/CHANGELOG.md

@@ -3,6 +3,28 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [2.6.0](https://github.com/gluharry/gluhar/compare/@gluhar/app@2.5.2...@gluhar/app@2.6.0) (2025-02-07)
+
+
+### 🚀 Enhancements
+
+- SanityImg component ([04d86e2](https://github.com/gluharry/gluhar/commit/04d86e2d55ff03195a92efb1df7bc35c92e3394c))
+
+
+
+
+
+## [2.5.2](https://github.com/gluharry/gluhar/compare/@gluhar/app@2.5.1...@gluhar/app@2.5.2) (2025-01-28)
+
+
+### 🩹 Fixes
+
+- UseSanityPage types ([0a053de](https://github.com/gluharry/gluhar/commit/0a053ded933cec73dd360295b2f629d2c84c4b44))
+
+
+
+
+
 ## [2.5.1](https://github.com/gluharry/gluhar/compare/@gluhar/app@2.5.0...@gluhar/app@2.5.1) (2025-01-28)
 
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "@gluhar/app",
   "configKey": "gluhar",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "builder": {
     "@nuxt/module-builder": "0.8.3",
     "unbuild": "2.0.0"

package/dist/module.mjs

@@ -1,4 +1,4 @@
-import { defineNuxtModule, createResolver, installModule, addImportsDir } from '@nuxt/kit';
+import { defineNuxtModule, createResolver, installModule, addImportsDir, addComponentsDir } from '@nuxt/kit';
 import defu from 'defu';
 
 const module = defineNuxtModule({
@@ -23,6 +23,7 @@ const module = defineNuxtModule({
       await installModule("@gluhar/sanity", sanity);
     }
     addImportsDir(resolve("runtime/composables"));
+    addComponentsDir({ path: resolve("runtime/components") });
     addImportsDir(resolve("runtime/utils"));
     addImportsDir(resolve("runtime/stores"));
     nuxt.options.vite = defu(nuxt.options.vite, {

package/dist/runtime/components/SanityImg.vue

@@ -0,0 +1,59 @@
+<script setup lang="ts">
+import { computed, ref } from "#imports";
+import type { SanityImage } from "@gluhar/sanity/types";
+import imageUrlBuilder from "@sanity/image-url";
+import type { ImageFormat } from "@sanity/image-url/lib/types/types";
+import sanityConfig from "~/config/sanity.config";
+
+const props = withDefaults(
+  defineProps<{
+    image?: SanityImage;
+    by?: "w" | "h";
+    width?: number;
+    height?: number;
+    format?: ImageFormat | null;
+  }>(),
+  { by: "w" },
+);
+
+const { l } = useMessages();
+
+const builder = imageUrlBuilder(sanityConfig);
+const urlFor = (source: SanityImage) => builder.image(source);
+
+const imgRef = ref<HTMLImageElement | null>(null);
+const src = computed(() => {
+  const { width, height } = imgRef.value?.getBoundingClientRect() || {
+    width: undefined,
+    height: undefined,
+  };
+
+  if (!props.image || (!width && !height)) return undefined;
+
+  let url = urlFor(props.image);
+
+  if (props.width) url = url.width(props.width);
+  else if (width && props.by === "w") url = url.width(Math.ceil(width));
+
+  if (props.height) url = url.height(props.height);
+  else if (height && props.by === "h") url = url.height(Math.ceil(height));
+
+  url = url.format(props.format ?? "webp");
+  url = url.quality(100);
+
+  // const dpr = window.devicePixelRatio;
+  url = url.dpr(1.2);
+
+  return url.url();
+});
+</script>
+
+<template>
+  <img
+    class="object-cover"
+    :src
+    :alt="l(image.caption) || l(image.alt)"
+    ref="imgRef"
+    v-if="image"
+  />
+</template>

package/dist/runtime/composables/useSanityPage.d.ts

@@ -14,7 +14,10 @@ type PageTypes<PI extends PageInterfaces> = Record<keyof PI, {
 export declare const useSanityPage: <PI extends PageInterfaces = {
     page: Page;
 }, PT extends PageTypes<PI> = PageTypes<PI>>(types?: PT, slug?: string | string[]) => Promise<{
-    page: import("vue").Ref<PickFrom<PI[Extract<keyof PT, string>], KeysOf<PI[Extract<keyof PT, string>]>> | null, PickFrom<PI[Extract<keyof PT, string>], KeysOf<PI[Extract<keyof PT, string>]>> | null> | import("vue").Ref<Page | null, Page | null> | undefined;
-    status: import("vue").Ref<AsyncDataRequestStatus, AsyncDataRequestStatus> | undefined;
+    page: import("vue").Ref<PickFrom<PI[Extract<keyof PT, string>], KeysOf<PI[Extract<keyof PT, string>]>> | null, PickFrom<PI[Extract<keyof PT, string>], KeysOf<PI[Extract<keyof PT, string>]>> | null>;
+    status: import("vue").Ref<AsyncDataRequestStatus, AsyncDataRequestStatus>;
+} | {
+    page: import("vue").Ref<Page | null, Page | null>;
+    status: import("vue").Ref<AsyncDataRequestStatus, AsyncDataRequestStatus>;
 }>;
 export {};

package/dist/runtime/composables/useSanityPage.js

@@ -10,23 +10,29 @@ export const useSanityPage = async (types, slug) => {
   const route = useRoute();
   const s = slug ? slug : route.params.slug;
   const sl = Array.isArray(s) ? s : [s];
-  let page, status;
   if (types && sl.length > 1) {
     for (const type in types) {
       const options = types[type];
       if (sl[0] === options.slug) {
-        const query = groq`
+        const query2 = groq`
             *[_type == "${type}" && slug.current == "${sl[1]}"]{
               ${options.query}
             }[0]
           `;
-        const q = await useSanityQueryWithPreview(query);
-        page = q.data;
-        status = q.status;
+        const { data: page2, status: status2 } = await useSanityQueryWithPreview(query2);
+        useHead({
+          link: [
+            {
+              rel: "canonical",
+              href: getCanonicalUrl(page2?.value)
+            }
+          ]
+        });
+        return { page: page2, status: status2 };
       }
     }
-  } else {
-    const pageQuery = groq`
+  }
+  const pageQuery = groq`
         ...,
         content[]{
           ...,
@@ -40,20 +46,15 @@ export const useSanityPage = async (types, slug) => {
           }
         }
       `;
-    const query = groq`
+  const query = groq`
         *[_type == "page" && slug.current == "${sl[0] ? sl?.join("/") : "/"}"]{
           ${types?.page?.query ?? pageQuery}
         }[0]
       `;
-    const q = await useSanityQueryWithPreview(query);
-    if (q.data.value) q.data.value._type = "page";
-    page = q.data;
-    status = q.status;
-  }
+  const { data: page, status } = await useSanityQueryWithPreview(query);
+  if (page.value) page.value._type = "page";
   useHead({
-    link: [
-      { rel: "canonical", href: getCanonicalUrl(page?.value) }
-    ]
+    link: [{ rel: "canonical", href: getCanonicalUrl(page.value) }]
   });
   return { page, status };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gluhar/app",
-  "version": "2.5.1",
+  "version": "2.6.0",
   "description": "Gluhar main package. This combines and configures @gluhar/theme, @gluhar/i18n, @gluhar/sanity and @gluhar/core into one main package. Provides numerous components, composables, utils and types.",
   "license": "MIT",
   "type": "module",
@@ -43,6 +43,7 @@
     "@gluhar/theme": "^2.0.2",
     "@nuxt/kit": "^3.13.1",
     "@pinia/nuxt": "^0.5.4",
+    "@sanity/image-url": "^1.1.0",
     "defu": "^6.1.4",
     "pinia": "^2.2.2"
   },
@@ -58,5 +59,5 @@
     "nuxt": "^3.13.1",
     "vitest": "^2.0.5"
   },
-  "gitHead": "03d4d85e4be0a9d1220c16e2c1029c3aefedda01"
+  "gitHead": "48de7c15bdc9a8186cfb49833ff588c2347a2c18"
 }