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 ? (
-
-
-
-
- ) : (
-
- )
-}
+
+
+
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;
+ }
});
};
}