cli improvements and typescript config changes
This commit is contained in:
@@ -1,51 +0,0 @@
|
||||
import { getImageDimensions, type SanityImageDimensions } from '@sanity/asset-utils';
|
||||
import type { ImageWithAlt } from './sanity.types';
|
||||
import { generateImageUrl } from './image-url';
|
||||
import { client } from './sanity';
|
||||
|
||||
export type SimpleImage = {
|
||||
url: string;
|
||||
alt: string;
|
||||
dimensions: SanityImageDimensions;
|
||||
};
|
||||
|
||||
// Internal helper to fetch image data from Sanity (client-side)
|
||||
async function fetchImage(assetRef: string | undefined): Promise<ImageWithAlt | null> {
|
||||
if (!assetRef) return null;
|
||||
|
||||
const image = await client.fetch(`*[_id == $id][0]`, { id: assetRef });
|
||||
return image;
|
||||
}
|
||||
|
||||
// Internal helper to get dimensions safely
|
||||
function getDimensions(image: ImageWithAlt | any): SanityImageDimensions {
|
||||
try {
|
||||
if (image._type === 'imageWithAlt') {
|
||||
const compatibleImage = { ...image, asset: image.asset };
|
||||
return getImageDimensions(compatibleImage as any);
|
||||
}
|
||||
return getImageDimensions(image);
|
||||
} catch {
|
||||
return { width: 1200, height: 800, aspectRatio: 1.5 };
|
||||
}
|
||||
}
|
||||
|
||||
// Convert a single asset reference to SimpleImage (client-side)
|
||||
export async function getImageClient(assetRef: string | undefined): Promise<SimpleImage> {
|
||||
const image = await fetchImage(assetRef);
|
||||
if (!image)
|
||||
return { url: '', alt: '', dimensions: { width: 0, height: 0, aspectRatio: 1 } };
|
||||
|
||||
const dimensions = getDimensions(image);
|
||||
|
||||
return {
|
||||
url: generateImageUrl(image),
|
||||
alt: image.alt || '',
|
||||
dimensions
|
||||
};
|
||||
}
|
||||
|
||||
// Convert multiple asset references to SimpleImage array (client-side)
|
||||
export async function getImagesClient(assetRefs: (string | undefined)[]): Promise<SimpleImage[]> {
|
||||
return Promise.all(assetRefs.map((ref) => getImageClient(ref)));
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
<script lang="ts">
|
||||
import { deconstructLink } from '$lib/link-helper';
|
||||
import { deconstructLink } from '$lib/helper/link';
|
||||
import LinkButton from '../link-button.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script lang="ts">
|
||||
import { getImageDimensions } from '@sanity/asset-utils';
|
||||
import { generateImageUrl, dynamicHeight } from '$lib/image-url';
|
||||
import { generateImageUrl, dynamicHeight } from '$lib/helper/image-url';
|
||||
|
||||
let { portableText } = $props();
|
||||
const { value, isInline } = portableText;
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
<script lang="ts">
|
||||
import LinkButton from '../link-button.svelte';
|
||||
import type { CtaSection } from '$lib/sanity.types';
|
||||
import { deconstructLink } from '$lib/link-helper';
|
||||
import type { SimpleImage } from '$lib/asset-to-url';
|
||||
import { deconstructLink } from '$lib/helper/link';
|
||||
import type { SimpleImage } from '$lib/helper/asset-to-url';
|
||||
import { cn } from '$lib/utils';
|
||||
import { generateImageUrl } from '$lib/image-url';
|
||||
import SanityBlock from '../sanity-block.svelte';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import { getImageDimensions, type SanityImageDimensions } from '@sanity/asset-utils';
|
||||
import type { ImageWithAlt } from './sanity.types';
|
||||
import type { ImageWithAlt } from '../sanity.types';
|
||||
import { generateImageUrl } from './image-url';
|
||||
import { serverClient } from './server/sanity';
|
||||
import { serverClient } from '../server/sanity';
|
||||
|
||||
export type SimpleImage = {
|
||||
url: string;
|
||||
@@ -9,7 +9,6 @@ export type SimpleImage = {
|
||||
dimensions: SanityImageDimensions;
|
||||
};
|
||||
|
||||
// Internal helper to fetch image data from Sanity
|
||||
async function fetchImage(assetRef: string | undefined): Promise<ImageWithAlt | null> {
|
||||
if (!assetRef) return null;
|
||||
|
||||
@@ -17,7 +16,6 @@ async function fetchImage(assetRef: string | undefined): Promise<ImageWithAlt |
|
||||
return image;
|
||||
}
|
||||
|
||||
// Internal helper to get dimensions safely
|
||||
function getDimensions(image: ImageWithAlt | any): SanityImageDimensions {
|
||||
try {
|
||||
if (image._type === 'imageWithAlt') {
|
||||
@@ -30,7 +28,6 @@ function getDimensions(image: ImageWithAlt | any): SanityImageDimensions {
|
||||
}
|
||||
}
|
||||
|
||||
// Convert a single asset reference to SimpleImage
|
||||
export async function getImage(assetRef: string | undefined): Promise<SimpleImage> {
|
||||
const image = await fetchImage(assetRef);
|
||||
if (!image)
|
||||
@@ -45,7 +42,6 @@ export async function getImage(assetRef: string | undefined): Promise<SimpleImag
|
||||
};
|
||||
}
|
||||
|
||||
// Convert multiple asset references to SimpleImage array
|
||||
export async function getImages(assetRefs: (string | undefined)[]): Promise<SimpleImage[]> {
|
||||
return Promise.all(assetRefs.map((ref) => getImage(ref)));
|
||||
}
|
||||
@@ -1,28 +1,26 @@
|
||||
import { client } from './sanity';
|
||||
import type { ImageWithAlt, SanityImageAsset } from './sanity.types';
|
||||
import { client } from '../sanity';
|
||||
import type { ImageWithAlt, SanityImageAsset } from '../sanity.types';
|
||||
import imageUrlBuilder from '@sanity/image-url';
|
||||
|
||||
const { projectId, dataset } = client.config();
|
||||
const builder = imageUrlBuilder({ projectId: projectId ?? '', dataset: dataset ?? '' });
|
||||
|
||||
console.log('Image URL Builder initialized with:', { projectId, dataset });
|
||||
|
||||
export function generateImageUrl(image: ImageWithAlt | any, width?: number, height?: number): string {
|
||||
export function generateImageUrl(
|
||||
image: ImageWithAlt | any,
|
||||
width?: number,
|
||||
height?: number
|
||||
): string {
|
||||
if (!image || !projectId || !dataset) {
|
||||
console.log('No image, projectId, or dataset:', { image, projectId, dataset });
|
||||
return '';
|
||||
}
|
||||
|
||||
// Handle direct URL
|
||||
if (image.url && !image.asset) {
|
||||
return image.url;
|
||||
}
|
||||
|
||||
// Handle Sanity image object
|
||||
const imageRef = image.asset?._ref || image.asset?._id || image.asset;
|
||||
|
||||
|
||||
if (!imageRef) {
|
||||
console.log('No imageRef found:', image);
|
||||
return '';
|
||||
}
|
||||
|
||||
@@ -33,8 +31,7 @@ export function generateImageUrl(image: ImageWithAlt | any, width?: number, heig
|
||||
.width(width || 1920)
|
||||
.format('webp')
|
||||
.auto('format');
|
||||
|
||||
// Apply cropping if available
|
||||
// Cropping doesnt really work. But it is here for future reference i guess. Fucking Sanity is so retarded.
|
||||
if (image.crop && width && height) {
|
||||
const crop = image.crop;
|
||||
if (crop.top || crop.bottom || crop.left || crop.right) {
|
||||
@@ -47,19 +44,13 @@ export function generateImageUrl(image: ImageWithAlt | any, width?: number, heig
|
||||
}
|
||||
|
||||
const url = imageBuilder.url();
|
||||
console.log('Generated URL:', url);
|
||||
return url;
|
||||
} catch (error) {
|
||||
console.error('Error generating image URL:', error);
|
||||
return '';
|
||||
}
|
||||
}
|
||||
|
||||
export function dynamicHeight(
|
||||
originalHeight: number,
|
||||
originalWidth: number,
|
||||
isInline: boolean
|
||||
) {
|
||||
export function dynamicHeight(originalHeight: number, originalWidth: number, isInline: boolean) {
|
||||
const targetWidth = isInline ? 100 : Math.min(originalWidth, 1200);
|
||||
return (targetWidth * originalHeight) / originalWidth;
|
||||
}
|
||||
@@ -1,5 +1,5 @@
|
||||
import type { Link } from './sanity.types';
|
||||
import { client } from './sanity';
|
||||
import type { Link } from '../sanity.types';
|
||||
import { client } from '../sanity';
|
||||
|
||||
interface InternalLink {
|
||||
_ref: string;
|
||||
@@ -1,6 +1,6 @@
|
||||
import type {LayoutServerLoad} from './$types'
|
||||
import { fetchSettings } from '$lib/settings'
|
||||
import { getImage } from '$lib/asset-to-url'
|
||||
import { getImage } from '$lib/helper/asset-to-url'
|
||||
|
||||
export const load: LayoutServerLoad = async ({locals: {preview}}) => {
|
||||
const settings = await fetchSettings()
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
import {useQuery} from '@sanity/svelte-loader'
|
||||
import type { PageData } from './$types';
|
||||
import CTA from '$lib/components/section/cta.svelte';
|
||||
import { getImageFromAsset } from '$lib/image-helper';
|
||||
import { getImageFromAsset } from '$lib/helper/image';
|
||||
|
||||
export let data: PageData
|
||||
const query = useQuery(data)
|
||||
|
||||
@@ -1,19 +1,11 @@
|
||||
{
|
||||
"extends": "./.svelte-kit/tsconfig.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"checkJs": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"resolveJsonModule": true,
|
||||
"skipLibCheck": true,
|
||||
"sourceMap": true,
|
||||
"strict": true,
|
||||
"moduleResolution": "bundler"
|
||||
}
|
||||
"extends": [
|
||||
"./.svelte-kit/tsconfig.json",
|
||||
"@repo/typescript-config/sveltekit.json"
|
||||
]
|
||||
// Path aliases are handled by https://svelte.dev/docs/kit/configuration#alias
|
||||
// except $lib which is handled by https://svelte.dev/docs/kit/configuration#files
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
// from the referenced tsconfig.json - TypeScript does not merge them in
|
||||
}
|
||||
}
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "template-sanity",
|
||||
"account_id": "7709703dd5c5923bd03a32fefb04f32d", // vaporvee
|
||||
"account_id": "<ACCOUNT_ID>", // replace it with your Cloudflare account ID. Usually found at https://dash.cloudflare.com/<ACCOUNT_ID>
|
||||
"main": "./.cloudflare/worker.js",
|
||||
"site": {
|
||||
"bucket": "./.cloudflare/public"
|
||||
|
||||
@@ -20,8 +20,8 @@
|
||||
"@repo/ui": "*",
|
||||
"@sanity/document-internationalization": "^3.3.3",
|
||||
"@sanity/vision": "^4.2.0",
|
||||
"react": "^19.1.0",
|
||||
"react-dom": "^19.1.0",
|
||||
"react": "^19.1.1",
|
||||
"react-dom": "^19.1.1",
|
||||
"sanity": "^4.2.0",
|
||||
"sanity-plugin-link-field": "^1.4.0",
|
||||
"sanity-plugin-media": "^3.0.4",
|
||||
@@ -31,8 +31,9 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@sanity/eslint-config-studio": "^5.0.2",
|
||||
"@types/react": "^19.1.8",
|
||||
"eslint": "^9.31.0",
|
||||
"@types/react": "^19.1.9",
|
||||
"@repo/typescript-config": "*",
|
||||
"eslint": "^9.32.0",
|
||||
"prettier": "^3.6.2",
|
||||
"typescript": "^5.8.3"
|
||||
},
|
||||
|
||||
@@ -1,17 +1,5 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"target": "ES2017",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"allowJs": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "Preserve",
|
||||
"moduleDetection": "force",
|
||||
"isolatedModules": true,
|
||||
"jsx": "preserve",
|
||||
"incremental": true
|
||||
},
|
||||
"extends": "@repo/typescript-config/sanity.json",
|
||||
"include": ["**/*.ts", "**/*.tsx"],
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user