diff --git a/components/Image.tsx b/components/Image.tsx index 23d864df..3e6ae485 100644 --- a/components/Image.tsx +++ b/components/Image.tsx @@ -1,98 +1 @@ -import { Head } from "$fresh/runtime.ts"; -import { forwardRef } from "preact/compat"; -import ImageKit from "https://esm.sh/imagekit-javascript@1.5.4"; -import type { JSX } from "preact"; - -type Props = - & Omit - & { - width: number; - height?: number; - src: string; - preload?: boolean; - fetchPriority?: "high" | "low" | "auto"; - }; - -const imageKit = new ImageKit({ - urlEndpoint: "https://ik.imagekit.io/decocx", -}); - -const FACTORS = [1, 1.5, 2]; - -export const getOptimizedMediaUrl = ( - { originalSrc, width, height, factor }: { - originalSrc: string; - width: number; - height?: number; - factor: number; - }, -) => { - const w = `${Math.trunc(factor * width)}`; - const h = height ? `${Math.trunc(factor * height)}` : undefined; - - if ( - originalSrc.includes(".vteximg.com.br/arquivos/ids") || - originalSrc.includes(".vtexassets.com/arquivos/ids") - ) { - const url = new URL(originalSrc); - - const [slash, arquivos, ids, id, ...rest] = url.pathname.split("/"); - const [realId] = id.split("-"); - url.protocol = "https:"; - url.pathname = [slash, arquivos, ids, `${realId}-${w}-${h ?? w}`, ...rest] - .join("/"); - - return url.href; - } - - return imageKit.url({ - path: originalSrc, - transformation: [{ width: w, height: h }], - }); -}; - -export const getSrcSet = (src: string, width: number, height?: number) => - FACTORS - .map((factor) => - `${getOptimizedMediaUrl({ originalSrc: src, width, height, factor })} ${ - Math.trunc(factor * width) - }w` - ) - .join(", "); - -const Image = forwardRef((props, ref) => { - const { preload, loading = "lazy" } = props; - - const srcSet = getSrcSet(props.src, props.width, props.height); - const linkProps = { - imagesrcset: srcSet, - imagesizes: props.sizes, - fetchpriority: props.fetchPriority, - media: props.media, - }; - - return ( - <> - {preload && ( - - - - )} - - - ); -}); - -export default Image; +export { default } from "deco-sites/std/packs/image/components/Image.tsx"; diff --git a/components/Picture.tsx b/components/Picture.tsx index e1f1783e..8aa2628b 100644 --- a/components/Picture.tsx +++ b/components/Picture.tsx @@ -1,79 +1,4 @@ -import { useContext, useMemo } from "preact/hooks"; -import { forwardRef } from "preact/compat"; -import { ComponentChildren, createContext, JSX } from "preact"; -import { Head } from "$fresh/runtime.ts"; - -import { getSrcSet } from "./Image.tsx"; - -interface Context { - preload?: boolean; -} - -const Context = createContext({ - preload: false, -}); - -type SourceProps = - & Omit - & { - src: string; - width: number; - height?: number; - preload?: boolean; - fetchPriority?: "high" | "low" | "auto"; - }; - -export const Source = forwardRef( - (props, ref) => { - const { preload } = useContext(Context); - - const srcSet = getSrcSet(props.src, props.width, props.height); - const linkProps = { - imagesrcset: srcSet, - imagesizes: props.sizes, - fetchpriority: props.fetchPriority, - media: props.media, - }; - - return ( - <> - {preload && ( - - - - )} - - - ); - }, -); - -type Props = Omit & { - children: ComponentChildren; - preload?: boolean; -}; - -export const Picture = forwardRef( - ({ children, preload, ...props }, ref) => { - const value = useMemo(() => ({ preload }), [preload]); - - return ( - - - {children} - - - ); - }, -); +export { + Picture, + Source, +} from "deco-sites/std/packs/image/components/Picture.tsx"; diff --git a/components/Video.tsx b/components/Video.tsx index d187d7aa..84b554c4 100644 --- a/components/Video.tsx +++ b/components/Video.tsx @@ -1,44 +1 @@ -/** - * TODO: Implement video preload with link[rel="preload"] tags once - * browsers support it. More info at: https://stackoverflow.com/a/68368601 - */ -import { forwardRef } from "preact/compat"; -import type { JSX } from "preact"; - -import { getOptimizedMediaUrl, getSrcSet } from "./Image.tsx"; - -type Props = - & Omit - & { - width: number; - height: number; - src: string; - forceOptimizedSrc?: boolean; - }; - -const Video = forwardRef((props, ref) => { - const { loading = "lazy" } = props; - const srcSet = getSrcSet(props.src, props.width, props.height); - - const src = props.forceOptimizedSrc - ? getOptimizedMediaUrl({ - originalSrc: props.src, - width: props.width, - height: props.height, - factor: 1, - }) - : props.src; - - return ( -