vuepress-theme-hope/dist/presets/BingHeroBackground.js

A light vuepress theme with tons of features

import { onClickOutside, useStorage } from "@vueuse/core";
import { Transition, computed, defineComponent, h, onMounted, ref, shallowRef } from "vue";
import { ClientOnly, useLang } from "vuepress/client";
import "@vuepress/helper/transition/fade-in.css";
import "./bing-hero-background.scss";

//#region src/presets/BingHeroBackground.ts
const bingStorage = useStorage("bing-image", {
	index: 0,
	data: []
});
var BingHeroBackground_default = defineComponent({
	name: "BingHeroBackground",
	setup() {
		const lang = useLang();
		const bingInfo = shallowRef();
		const showInfo = ref(false);
		const currentWallpaper = computed(() => {
			const { index, data } = bingStorage.value;
			const langCode = lang.value.toLowerCase().split("-").shift();
			if (data[index]) {
				const { url, wallpaper, downloadable, locales } = data[index];
				return {
					url,
					wallpaper,
					downloadable,
					...locales[langCode] ?? locales.en
				};
			}
			return null;
		});
		const getBingWallpapers = () => fetch("https://bing-wallpaper.vuejs.press/api/wallpaper").then((response) => response.json());
		const prev = () => {
			bingStorage.value.index -= 1;
		};
		const next = () => {
			bingStorage.value.index += 1;
		};
		onClickOutside(bingInfo, () => {
			showInfo.value = false;
		});
		onMounted(async () => {
			bingStorage.value.data = await getBingWallpapers();
		});
		return () => {
			const { title, headline, url, backstage, quickFact, copyright } = currentWallpaper.value ?? {};
			return h(ClientOnly, () => url ? [h("div", {
				class: "vp-blog-mask",
				style: { background: `url(${url}) center/cover no-repeat` }
			}), h("div", {
				class: "bing-switch",
				onClick: () => {
					showInfo.value = true;
				}
			}, [
				h(Transition, { name: "fade-in" }, () => showInfo.value ? h("div", {
					class: "bing-info",
					ref: bingInfo
				}, [
					h("a", {
						href: backstage,
						target: "_blank",
						class: "bing-info-header"
					}, headline),
					h("hr"),
					h("div", { class: "bing-info-body" }, quickFact),
					h("div", { class: "bing-info-copyright" }, copyright)
				]) : null),
				h("div", { class: "bing-location" }, [h("span", { class: "bing-location-icon" }), title]),
				h("button", {
					class: "bing-switch-prev",
					title: "prev image",
					type: "button",
					disabled: bingStorage.value.index === 0,
					onClick: () => {
						prev();
					}
				}),
				h("button", {
					class: "bing-switch-next",
					title: "next image",
					type: "button",
					disabled: bingStorage.value.index === bingStorage.value.data.length - 1,
					onClick: () => {
						next();
					}
				})
			])] : null);
		};
	}
});

//#endregion
export { BingHeroBackground_default as default };
//# sourceMappingURL=BingHeroBackground.js.map