generated from polymech/site-template
47 lines
1.5 KiB
Plaintext
47 lines
1.5 KiB
Plaintext
---
|
|
import renderBackgroundImage from "../api/renderBackgroundImage.js";
|
|
import type { BackgroundImageConfigOptions } from "../types.d";
|
|
|
|
const content = await Astro.slots.render("default");
|
|
|
|
declare interface Props
|
|
extends Pick<
|
|
BackgroundImageConfigOptions,
|
|
Exclude<keyof BackgroundImageConfigOptions, "content">
|
|
> {}
|
|
|
|
const { link, style, htmlElement } = await renderBackgroundImage({
|
|
content,
|
|
...(Astro.props as Props),
|
|
});
|
|
---
|
|
|
|
<Fragment set:html={link + style + htmlElement} />
|
|
|
|
<script>
|
|
const { classList } = document.documentElement;
|
|
|
|
const addClass = classList.add.bind(classList);
|
|
|
|
addClass("jpeg");
|
|
addClass("png");
|
|
|
|
const isFormatSupported = (format, dataUri) => {
|
|
const image = new Image();
|
|
|
|
image.src = `data:image/${format};base64,${dataUri}`;
|
|
|
|
image.onload = addClass(format);
|
|
};
|
|
|
|
// TODO: Check support for JXL images
|
|
// isFormatSupported("jxl", "/woAEBAJCAQBACwASxLFgoUJEP3D/wA=");
|
|
|
|
isFormatSupported("webp", "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==");
|
|
|
|
isFormatSupported(
|
|
"avif",
|
|
"AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A="
|
|
);
|
|
</script>
|