diff --git a/src/components/ui/Picture.astro b/src/components/ui/Picture.astro index 4eddb85..48bb28c 100644 --- a/src/components/ui/Picture.astro +++ b/src/components/ui/Picture.astro @@ -1,60 +1,21 @@ --- -import { R2_BASE } from "@/config/r2.mjs"; - export interface Props { src: string; alt: string; class?: string; - sizes?: string; fetchpriority?: "high" | "low" | "auto"; loading?: "lazy" | "eager"; } -const { - src, - alt, - class: className, - sizes = "(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px", - fetchpriority, - loading, -} = Astro.props; - -const WIDTHS = [480, 800, 1200]; - -const isR2 = src.includes(R2_BASE.replace("https://", "")); - -function buildTransformUrl(src: string, width: number) { - const path = src.replace(R2_BASE, ""); - return `${R2_BASE}/cdn-cgi/image/width=${width},format=auto,onerror=redirect${path}`; -} - -const srcset = WIDTHS.map((w) => `${buildTransformUrl(src, w)} ${w}w`).join( - ", ", -); -const defaultSrc = isR2 ? buildTransformUrl(src, 800) : src; +const { src, alt, class: className, fetchpriority, loading } = Astro.props; --- -{ - isR2 ? ( - - - {alt} - - ) : ( - {alt} - ) -} + + {alt} + diff --git a/src/plugins/rehype-picture-webp.mjs b/src/plugins/rehype-picture-webp.mjs index fd36a9a..093188c 100644 --- a/src/plugins/rehype-picture-webp.mjs +++ b/src/plugins/rehype-picture-webp.mjs @@ -1,14 +1,4 @@ import { visit } from "unist-util-visit"; -import { R2_BASE } from "../config/r2.mjs"; - -const WIDTHS = [480, 800, 1200]; -const SIZES = "(max-width: 640px) 100vw, (max-width: 1024px) 80vw, 1200px"; - -function buildTransformUrl(src, width) { - // Extract path từ full URL - const path = src.replace(R2_BASE, ""); - return `${R2_BASE}/cdn-cgi/image/width=${width},format=auto,onerror=redirect${path}`; -} export function rehypePictureWebp() { return (tree) => { @@ -16,46 +6,41 @@ export function rehypePictureWebp() { if (node.tagName !== "img") return; if (!parent || index == null) return; - const src = node.properties?.src || ""; - - // Chỉ xử lý ảnh từ R2 - if (!src.startsWith(R2_BASE)) return; - - // Tạo srcset với nhiều width - const srcset = WIDTHS.map( - (w) => `${buildTransformUrl(src, w)} ${w}w`, - ).join(", "); - - const defaultSrc = buildTransformUrl(src, 800); - - parent.children[index] = { + const alt = node.properties?.alt || node.alt || ""; + const pictureNode = { type: "element", tagName: "picture", properties: {}, children: [ - { - type: "element", - tagName: "source", - properties: { - type: "image/webp", - srcSet: srcset, - sizes: SIZES, - }, - children: [], - }, { ...node, properties: { ...node.properties, - src: defaultSrc, - srcSet: srcset, - sizes: SIZES, loading: "lazy", decoding: "async", }, }, ], }; + + if (alt) { + parent.children[index] = { + type: "element", + tagName: "figure", + properties: {}, + children: [ + pictureNode, + { + type: "element", + tagName: "figcaption", + properties: {}, + children: [{ type: "text", value: alt }], + }, + ], + }; + } else { + parent.children[index] = pictureNode; + } }); }; }