@soubiran/ui 0.0.0 → 0.1.2

package/dist/index.js

@@ -0,0 +1,876 @@
+import { Fragment, Transition, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createTextVNode, createVNode, defineComponent, markRaw, mergeModels, normalizeClass, onMounted, openBlock, readonly, ref, renderList, renderSlot, toDisplayString, unref, useModel, withCtx } from "vue";
+import { tv } from "tailwind-variants";
+import UButton from "@nuxt/ui/components/Button.vue";
+import UPopover from "@nuxt/ui/components/Popover.vue";
+import { useRoute } from "vue-router";
+import UCard from "@nuxt/ui/components/Card.vue";
+import UFormField from "@nuxt/ui/components/FormField.vue";
+import UIcon from "@nuxt/ui/components/Icon.vue";
+import UTextarea from "@nuxt/ui/components/Textarea.vue";
+import UTooltip from "@nuxt/ui/components/Tooltip.vue";
+import { useMutation } from "@pinia/colada";
+import { motion } from "motion-v";
+import { ofetch } from "ofetch";
+import { RadioGroupIndicator, RadioGroupItem, RadioGroupRoot } from "reka-ui";
+import USeparator from "@nuxt/ui/components/Separator.vue";
+import { createSharedComposable } from "@vueuse/core";
+import PartySocket from "partysocket";
+
+//#region src/components/Container.vue
+const container = tv({ slots: {
+	base: "px-4 sm:px-6 lg:px-8",
+	inner: "w-full max-w-7xl mx-auto"
+} });
+const _sfc_main$10 = /* @__PURE__ */ defineComponent({
+	__name: "Container",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => container());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("div", { class: normalizeClass(ui.value.inner({ class: props.ui?.inner })) }, [renderSlot(_ctx.$slots, "default")], 2)], 2);
+		};
+	}
+});
+var Container_default = _sfc_main$10;
+
+//#endregion
+//#region ~icons/ph/thumbs-up
+const _hoisted_1$11 = {
+	viewBox: "0 0 256 256",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$7(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$11, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M234 80.12A24 24 0 0 0 216 72h-56V56a40 40 0 0 0-40-40a8 8 0 0 0-7.16 4.42L75.06 96H32a16 16 0 0 0-16 16v88a16 16 0 0 0 16 16h172a24 24 0 0 0 23.82-21l12-96A24 24 0 0 0 234 80.12M32 112h40v88H32Zm191.94-15l-12 96a8 8 0 0 1-7.94 7H88v-94.11l36.71-73.43A24 24 0 0 1 144 56v24a8 8 0 0 0 8 8h64a8 8 0 0 1 7.94 9"
+	}, null, -1)])]);
+}
+var thumbs_up_default = markRaw({
+	name: "ph-thumbs-up",
+	render: render$7
+});
+
+//#endregion
+//#region src/composables/useUmami.ts
+function useUmami() {
+	const route = useRoute();
+	function track(event, data) {
+		window.umami?.track(event, {
+			...data,
+			page_path: route.path
+		});
+	}
+	return { track };
+}
+
+//#endregion
+//#region ~icons/ph/check-circle
+const _hoisted_1$10 = {
+	viewBox: "0 0 256 256",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$6(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$10, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M173.66 98.34a8 8 0 0 1 0 11.32l-56 56a8 8 0 0 1-11.32 0l-24-24a8 8 0 0 1 11.32-11.32L112 148.69l50.34-50.35a8 8 0 0 1 11.32 0M232 128A104 104 0 1 1 128 24a104.11 104.11 0 0 1 104 104m-16 0a88 88 0 1 0-88 88a88.1 88.1 0 0 0 88-88"
+	}, null, -1)])]);
+}
+var check_circle_default = markRaw({
+	name: "ph-check-circle",
+	render: render$6
+});
+
+//#endregion
+//#region src/components/FeedbackCard.vue
+const _hoisted_1$9 = ["for"];
+const feedbackCard = tv({ slots: {
+	base: "relative w-64",
+	successfullySentOverlay: "absolute z-10 inset-0 bg-default",
+	successfullySentContent: "absolute z-20 inset-0 flex flex-col justify-center items-center text-muted text-xs",
+	successfullySentIcon: "size-5",
+	input: "w-full",
+	radioGroup: "flex flex-row gap-2 text-lg",
+	radioGroupItem: "peer",
+	radioGroupLabel: "grayscale-100 hover:grayscale-0 peer-data-[state=checked]:grayscale-0"
+} });
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+	__name: "FeedbackCard",
+	props: /* @__PURE__ */ mergeModels({
+		id: {},
+		class: {},
+		ui: {}
+	}, {
+		"content": { required: true },
+		"contentModifiers": {},
+		"rating": { required: true },
+		"ratingModifiers": {}
+	}),
+	emits: /* @__PURE__ */ mergeModels(["success"], ["update:content", "update:rating"]),
+	setup(__props, { emit: __emit }) {
+		const props = __props;
+		const emits = __emit;
+		const content = useModel(__props, "content");
+		const rating = useModel(__props, "rating");
+		const ratings = [
+			{
+				label: "😭",
+				value: "Hate it"
+			},
+			{
+				label: "🙁",
+				value: "Not great"
+			},
+			{
+				label: "🙂",
+				value: "It's ok"
+			},
+			{
+				label: "🤩",
+				value: "Love it"
+			}
+		];
+		const successfullySent = ref(false);
+		const { track } = useUmami();
+		const { mutate, isLoading, error } = useMutation({
+			mutation: ({ rating: rating$1, content: content$1 }) => ofetch(`/api/posts/${props.id}/feedback`, {
+				method: "POST",
+				body: {
+					rating: rating$1,
+					content: content$1
+				},
+				baseURL: import.meta.env.VITE_API_BASE_URL
+			}),
+			onSuccess: () => {
+				successfullySent.value = true;
+				track("feedback_submit");
+				setTimeout(() => emits("success"), 200);
+			}
+		});
+		function sendFeedback() {
+			mutate({
+				rating: rating.value,
+				content: content.value
+			});
+		}
+		const formattedError = computed(() => {
+			if (!error.value) return void 0;
+			if (error.value.data?.errors) return error.value.data.errors.content?.[0] || error.value.data.errors.rating?.[0];
+			if (error.value.status === 404) return "Page not found. Cannot send feedback. It's us, not you!";
+			if (error.value.status === 503) return "Service is currently unavailable. Please try again later.";
+			return "An unexpected error occurred.";
+		});
+		const ui = computed(() => feedbackCard());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(UCard, {
+				class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
+				ui: {
+					body: "p-2 sm:p-2",
+					footer: "p-2 sm:p-2 flex items-center justify-between"
+				}
+			}, {
+				footer: withCtx(() => [createVNode(unref(RadioGroupRoot), {
+					modelValue: rating.value,
+					"onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => rating.value = $event),
+					class: normalizeClass(ui.value.radioGroup({ class: props.ui?.radioGroup }))
+				}, {
+					default: withCtx(() => [(openBlock(), createElementBlock(Fragment, null, renderList(ratings, (item) => {
+						return createElementVNode("div", { key: item.value }, [createVNode(unref(RadioGroupItem), {
+							id: item.value,
+							value: item.value,
+							class: normalizeClass(ui.value.radioGroupItem({ class: props.ui?.radioGroupItem }))
+						}, {
+							default: withCtx(() => [createVNode(unref(RadioGroupIndicator))]),
+							_: 1
+						}, 8, [
+							"id",
+							"value",
+							"class"
+						]), createVNode(UTooltip, { text: item.value }, {
+							default: withCtx(() => [createElementVNode("label", {
+								for: item.value,
+								class: normalizeClass(ui.value.radioGroupLabel({ class: props.ui?.radioGroupLabel }))
+							}, toDisplayString(item.label), 11, _hoisted_1$9)]),
+							_: 2
+						}, 1032, ["text"])]);
+					}), 64))]),
+					_: 1
+				}, 8, ["modelValue", "class"]), createVNode(UButton, {
+					size: "sm",
+					label: "Send",
+					loading: unref(isLoading),
+					onClick: sendFeedback
+				}, null, 8, ["loading"])]),
+				default: withCtx(() => [successfullySent.value ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [createVNode(unref(motion).div, {
+					initial: { opacity: 0 },
+					animate: {
+						opacity: 1,
+						transition: { duration: .2 }
+					},
+					class: normalizeClass(ui.value.successfullySentOverlay({ class: props.ui?.successfullySentOverlay }))
+				}, null, 8, ["class"]), createElementVNode("div", { class: normalizeClass(ui.value.successfullySentContent({ class: props.ui?.successfullySentContent })) }, [
+					createVNode(unref(motion).div, {
+						initial: {
+							opacity: 0,
+							transform: "translateY(4px)"
+						},
+						animate: {
+							opacity: 1,
+							transform: "translateY(0)",
+							transition: {
+								delay: .1,
+								duration: .3
+							}
+						}
+					}, {
+						default: withCtx(() => [createVNode(UIcon, {
+							name: unref(check_circle_default),
+							class: normalizeClass(ui.value.successfullySentIcon({ class: props.ui?.successfullySentIcon }))
+						}, null, 8, ["name", "class"])]),
+						_: 1
+					}),
+					createVNode(unref(motion).p, {
+						initial: {
+							opacity: 0,
+							transform: "translateY(4px)"
+						},
+						animate: {
+							opacity: 1,
+							transform: "translateY(0)",
+							transition: {
+								delay: .2,
+								duration: .3
+							}
+						},
+						class: "mt-3"
+					}, {
+						default: withCtx(() => [..._cache[2] || (_cache[2] = [createTextVNode(" Your feedback has been received. ", -1)])]),
+						_: 1
+					}),
+					createVNode(unref(motion).p, {
+						initial: {
+							opacity: 0,
+							transform: "translateY(4px)"
+						},
+						animate: {
+							opacity: 1,
+							transform: "translateY(0)",
+							transition: {
+								delay: .3,
+								duration: .3
+							}
+						},
+						class: "mt-1"
+					}, {
+						default: withCtx(() => [..._cache[3] || (_cache[3] = [createTextVNode(" Thanks for your help! ", -1)])]),
+						_: 1
+					})
+				], 2)], 64)) : createCommentVNode("v-if", true), createVNode(UFormField, { error: formattedError.value }, {
+					error: withCtx(({ error: formFieldError }) => [formFieldError ? (openBlock(), createBlock(unref(motion).div, {
+						key: 0,
+						initial: { height: 0 },
+						animate: { height: "auto" },
+						class: "text-sm"
+					}, {
+						default: withCtx(() => [createTextVNode(toDisplayString(formFieldError), 1)]),
+						_: 2
+					}, 1024)) : createCommentVNode("v-if", true)]),
+					default: withCtx(() => [createVNode(UTextarea, {
+						modelValue: content.value,
+						"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => content.value = $event),
+						placeholder: "Your feedback...",
+						variant: "soft",
+						class: normalizeClass(ui.value.input({ class: props.ui?.input }))
+					}, null, 8, ["modelValue", "class"])]),
+					_: 1
+				}, 8, ["error"])]),
+				_: 1
+			}, 8, ["class"]);
+		};
+	}
+});
+var FeedbackCard_default = _sfc_main$9;
+
+//#endregion
+//#region src/components/Feedback.vue
+const feedback = tv({ slots: { base: "px-0 py-1 text-dimmed text-sm" } });
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+	__name: "Feedback",
+	props: {
+		id: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { track } = useUmami();
+		function onClick() {
+			track("feedback_click");
+		}
+		const content = ref("");
+		const rating = ref("");
+		function onSuccess() {
+			content.value = "";
+			rating.value = "";
+		}
+		const ui = computed(() => feedback());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(UPopover, { ui: { content: "ring-0 data-[state=open]:animate-[scale-up_100ms_ease-out]" } }, {
+				content: withCtx(() => [createVNode(FeedbackCard_default, {
+					id: props.id,
+					rating: rating.value,
+					"onUpdate:rating": _cache[0] || (_cache[0] = ($event) => rating.value = $event),
+					content: content.value,
+					"onUpdate:content": _cache[1] || (_cache[1] = ($event) => content.value = $event),
+					onSuccess
+				}, null, 8, [
+					"id",
+					"rating",
+					"content"
+				])]),
+				default: withCtx(() => [createVNode(UButton, {
+					variant: "link",
+					color: "neutral",
+					label: "Give feedback",
+					size: "sm",
+					icon: unref(thumbs_up_default),
+					class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })),
+					onClick
+				}, null, 8, ["icon", "class"])]),
+				_: 1
+			});
+		};
+	}
+});
+var Feedback_default = _sfc_main$8;
+
+//#endregion
+//#region ~icons/simple-icons/discord
+const _hoisted_1$8 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$5(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$8, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M20.317 4.37a19.8 19.8 0 0 0-4.885-1.515a.074.074 0 0 0-.079.037c-.21.375-.444.864-.608 1.25a18.3 18.3 0 0 0-5.487 0a13 13 0 0 0-.617-1.25a.08.08 0 0 0-.079-.037A19.7 19.7 0 0 0 3.677 4.37a.1.1 0 0 0-.032.027C.533 9.046-.32 13.58.099 18.057a.08.08 0 0 0 .031.057a19.9 19.9 0 0 0 5.993 3.03a.08.08 0 0 0 .084-.028a14 14 0 0 0 1.226-1.994a.076.076 0 0 0-.041-.106a13 13 0 0 1-1.872-.892a.077.077 0 0 1-.008-.128a10 10 0 0 0 .372-.292a.07.07 0 0 1 .077-.01c3.928 1.793 8.18 1.793 12.062 0a.07.07 0 0 1 .078.01q.181.149.373.292a.077.077 0 0 1-.006.127a12.3 12.3 0 0 1-1.873.892a.077.077 0 0 0-.041.107c.36.698.772 1.362 1.225 1.993a.08.08 0 0 0 .084.028a19.8 19.8 0 0 0 6.002-3.03a.08.08 0 0 0 .032-.054c.5-5.177-.838-9.674-3.549-13.66a.06.06 0 0 0-.031-.03M8.02 15.33c-1.182 0-2.157-1.085-2.157-2.419c0-1.333.956-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.956 2.418-2.157 2.418m7.975 0c-1.183 0-2.157-1.085-2.157-2.419c0-1.333.955-2.419 2.157-2.419c1.21 0 2.176 1.096 2.157 2.42c0 1.333-.946 2.418-2.157 2.418"
+	}, null, -1)])]);
+}
+var discord_default = markRaw({
+	name: "simple-icons-discord",
+	render: render$5
+});
+
+//#endregion
+//#region ~icons/simple-icons/github
+const _hoisted_1$7 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$4(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$7, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"
+	}, null, -1)])]);
+}
+var github_default = markRaw({
+	name: "simple-icons-github",
+	render: render$4
+});
+
+//#endregion
+//#region ~icons/simple-icons/linkedin
+const _hoisted_1$6 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$3(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$6, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z"
+	}, null, -1)])]);
+}
+var linkedin_default = markRaw({
+	name: "simple-icons-linkedin",
+	render: render$3
+});
+
+//#endregion
+//#region ~icons/simple-icons/twitch
+const _hoisted_1$5 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$2(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$5, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M11.571 4.714h1.715v5.143H11.57zm4.715 0H18v5.143h-1.714zM6 0L1.714 4.286v15.428h5.143V24l4.286-4.286h3.428L22.286 12V0zm14.571 11.143l-3.428 3.428h-3.429l-3 3v-3H6.857V1.714h13.714Z"
+	}, null, -1)])]);
+}
+var twitch_default = markRaw({
+	name: "simple-icons-twitch",
+	render: render$2
+});
+
+//#endregion
+//#region ~icons/simple-icons/x
+const _hoisted_1$4 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render$1(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$4, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M14.234 10.162L22.977 0h-2.072l-7.591 8.824L7.251 0H.258l9.168 13.343L.258 24H2.33l8.016-9.318L16.749 24h6.993zm-2.837 3.299l-.929-1.329L3.076 1.56h3.182l5.965 8.532l.929 1.329l7.754 11.09h-3.182z"
+	}, null, -1)])]);
+}
+var x_default = markRaw({
+	name: "simple-icons-x",
+	render: render$1
+});
+
+//#endregion
+//#region src/components/Header.vue
+const header = tv({ slots: {
+	base: "h-(--ui-header-height) flex flex-row gap-4 items-center justify-end",
+	link: "p-0 text-dimmed"
+} });
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+	__name: "Header",
+	props: {
+		links: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { track } = useUmami();
+		function trackClick(label) {
+			track("header_click", { label });
+		}
+		const ui = computed(() => header());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Container_default, { ui: { inner: "max-w-5xl" } }, {
+				default: withCtx(() => [createElementVNode("header", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [
+					(openBlock(true), createElementBlock(Fragment, null, renderList(props.links, (link) => {
+						return openBlock(), createBlock(UTooltip, {
+							key: link.label,
+							text: link.label
+						}, {
+							default: withCtx(() => [createVNode(UButton, {
+								variant: "link",
+								color: "neutral",
+								to: link.to,
+								"aria-label": link.label,
+								icon: link.icon,
+								class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+								onClick: ($event) => trackClick(link.label)
+							}, null, 8, [
+								"to",
+								"aria-label",
+								"icon",
+								"class",
+								"onClick"
+							])]),
+							_: 2
+						}, 1032, ["text"]);
+					}), 128)),
+					createVNode(USeparator, {
+						orientation: "vertical",
+						class: "h-5"
+					}),
+					createVNode(UTooltip, { text: "LinkedIn" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://www.linkedin.com/in/esteban25/",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "LinkedIn",
+							icon: unref(linkedin_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[0] || (_cache[0] = ($event) => trackClick("LinkedIn"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					}),
+					createVNode(UTooltip, { text: "X" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://x.com/soubiran_",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "X",
+							icon: unref(x_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[1] || (_cache[1] = ($event) => trackClick("X"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					}),
+					createVNode(UTooltip, { text: "Twitch" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://www.twitch.tv/barbapapazes",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "Twitch",
+							icon: unref(twitch_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[2] || (_cache[2] = ($event) => trackClick("Twitch"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					}),
+					createVNode(UTooltip, { text: "GitHub" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://github.com/barbapapazes",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "GitHub",
+							icon: unref(github_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[3] || (_cache[3] = ($event) => trackClick("GitHub"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					}),
+					createVNode(UTooltip, { text: "Discord" }, {
+						default: withCtx(() => [createVNode(UButton, {
+							href: "https://discord.gg/q2ghCGUuFR",
+							target: "_blank",
+							variant: "link",
+							color: "neutral",
+							"aria-label": "Discord",
+							icon: unref(discord_default),
+							class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+							ui: { leadingIcon: "size-4" },
+							onClick: _cache[4] || (_cache[4] = ($event) => trackClick("Discord"))
+						}, null, 8, ["icon", "class"])]),
+						_: 1
+					})
+				], 2)]),
+				_: 1
+			});
+		};
+	}
+});
+var Header_default = _sfc_main$7;
+
+//#endregion
+//#region src/components/Page.vue
+const page = tv({ slots: {
+	base: "py-12",
+	header: "max-w-3xl mx-auto xl:max-w-none xl:grid xl:grid-cols-[256px_768px_256px]",
+	headerInner: "xl:col-start-2",
+	content: "mt-6 max-w-3xl mx-auto xl:max-w-none xl:grid xl:grid-cols-[256px_768px_256px] xl:mx-auto",
+	contentInner: "xl:col-start-2",
+	right: "hidden xl:block xl:col-start-3 xl:pl-8 xl:h-full",
+	rightInner: "sticky top-4"
+} });
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+	__name: "Page",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => page());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createVNode(Container_default, null, {
+				default: withCtx(() => [createElementVNode("div", { class: normalizeClass(ui.value.header({ class: props.ui?.header })) }, [createElementVNode("div", { class: normalizeClass(ui.value.headerInner({ class: props.ui?.headerInner })) }, [renderSlot(_ctx.$slots, "header")], 2)], 2), createElementVNode("div", { class: normalizeClass(ui.value.content({ class: props.ui?.content })) }, [createElementVNode("div", { class: normalizeClass(ui.value.contentInner({ class: props.ui?.contentInner })) }, [renderSlot(_ctx.$slots, "default")], 2), createElementVNode("div", { class: normalizeClass(ui.value.right({ class: props.ui?.right })) }, [createElementVNode("div", { class: normalizeClass(ui.value.rightInner({ class: props.ui?.rightInner })) }, [renderSlot(_ctx.$slots, "right")], 2)], 2)], 2)]),
+				_: 3
+			}), renderSlot(_ctx.$slots, "bottom")], 2);
+		};
+	}
+});
+var Page_default = _sfc_main$6;
+
+//#endregion
+//#region src/components/PageTitle.vue
+const pageTitle = tv({ slots: { base: "text-xl font-bold text-highlighted" } });
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+	__name: "PageTitle",
+	props: {
+		title: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => pageTitle());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("h1", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, toDisplayString(__props.title), 3);
+		};
+	}
+});
+var PageTitle_default = _sfc_main$5;
+
+//#endregion
+//#region src/components/PageHeader.vue
+const pageHeader = tv({ slots: { base: "" } });
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+	__name: "PageHeader",
+	props: {
+		title: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => pageHeader());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createVNode(PageTitle_default, { title: props.title }, null, 8, ["title"]), renderSlot(_ctx.$slots, "after")], 2);
+		};
+	}
+});
+var PageHeader_default = _sfc_main$4;
+
+//#endregion
+//#region ~icons/simple-icons/youtube
+const _hoisted_1$3 = {
+	viewBox: "0 0 24 24",
+	width: "1.2em",
+	height: "1.2em"
+};
+function render(_ctx, _cache) {
+	return openBlock(), createElementBlock("svg", _hoisted_1$3, [..._cache[0] || (_cache[0] = [createElementVNode("path", {
+		fill: "currentColor",
+		d: "M23.498 6.186a3.02 3.02 0 0 0-2.122-2.136C19.505 3.545 12 3.545 12 3.545s-7.505 0-9.377.505A3.02 3.02 0 0 0 .502 6.186C0 8.07 0 12 0 12s0 3.93.502 5.814a3.02 3.02 0 0 0 2.122 2.136c1.871.505 9.376.505 9.376.505s7.505 0 9.377-.505a3.02 3.02 0 0 0 2.122-2.136C24 15.93 24 12 24 12s0-3.93-.502-5.814M9.545 15.568V8.432L15.818 12z"
+	}, null, -1)])]);
+}
+var youtube_default = markRaw({
+	name: "simple-icons-youtube",
+	render
+});
+
+//#endregion
+//#region src/components/Socials.vue
+const socials = tv({ slots: {
+	base: "flex flex-wrap gap-2",
+	link: "flex items-center gap-1",
+	icon: "size-4"
+} });
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+	__name: "Socials",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => socials());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [
+				createElementVNode("a", {
+					href: "https://www.linkedin.com/in/esteban25/",
+					rel: "noopener noreferrer",
+					target: "_blank",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(linkedin_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[0] || (_cache[0] = createElementVNode("span", null, "LinkedIn", -1))], 2),
+				createElementVNode("a", {
+					href: "https://x.com/soubiran_",
+					rel: "noopener noreferrer",
+					target: "_blank",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(x_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[1] || (_cache[1] = createElementVNode("span", null, "X (Twitter)", -1))], 2),
+				createElementVNode("a", {
+					href: "https://github.com/barbapapazes",
+					rel: "noopener noreferrer",
+					target: "_blank",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(github_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[2] || (_cache[2] = createElementVNode("span", null, "GitHub", -1))], 2),
+				createElementVNode("a", {
+					href: "https://www.twitch.tv/barbapapazes",
+					rel: "noopener noreferrer",
+					target: "_blank",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(twitch_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[3] || (_cache[3] = createElementVNode("span", null, "Twitch", -1))], 2),
+				createElementVNode("a", {
+					href: "https://www.youtube.com/@barbapapazes",
+					target: "_blank",
+					rel: "noopener noreferrer",
+					class: normalizeClass(ui.value.link({ class: props.ui?.link }))
+				}, [createVNode(UIcon, {
+					name: unref(youtube_default),
+					class: normalizeClass(ui.value.icon({ class: props.ui?.icon }))
+				}, null, 8, ["name", "class"]), _cache[4] || (_cache[4] = createElementVNode("span", null, "YouTube", -1))], 2)
+			], 2);
+		};
+	}
+});
+var Socials_default = _sfc_main$3;
+
+//#endregion
+//#region src/components/Sponsors.vue
+const _hoisted_1$2 = {
+	href: "https://soubiran.dev/sponsorship?utm_source=infra.soubiran.dev&utm_medium=link",
+	target: "_blank"
+};
+const sponsors = tv({ slots: {
+	base: "not-prose",
+	img: "border-0"
+} });
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+	__name: "Sponsors",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const ui = computed(() => sponsors());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("p", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("a", _hoisted_1$2, [createElementVNode("img", {
+				src: "https://raw.githubusercontent.com/Barbapapazes/static/refs/heads/main/sponsors.svg",
+				alt: "Sponsors",
+				class: normalizeClass(ui.value.img({ class: props.ui?.img }))
+			}, null, 2)])], 2);
+		};
+	}
+});
+var Sponsors_default = _sfc_main$2;
+
+//#endregion
+//#region src/composables/useTableOfContents.ts
+function _useTableOfContents() {
+	const activeHeadings = ref([]);
+	function setActive(id) {
+		activeHeadings.value.push(id);
+	}
+	function unsetActive(id) {
+		activeHeadings.value = activeHeadings.value.filter((h) => h !== id);
+	}
+	return {
+		setActive,
+		unsetActive,
+		activeHeadings: readonly(activeHeadings)
+	};
+}
+var useTableOfContents_default = createSharedComposable(_useTableOfContents);
+
+//#endregion
+//#region src/components/TableOfContents.vue
+const _hoisted_1$1 = [
+	"href",
+	"data-active",
+	"onClick"
+];
+const tableOfContents = tv({ slots: {
+	base: "space-y-1 text-sm text-dimmed font-medium",
+	title: "",
+	list: "font-sofia",
+	link: "flex gap-1 px-0 py-1 text-dimmed hover:text-default active:text-default transition-colors focus:outline-none focus-visible:ring-inset focus-visible:ring-2 focus-visible:ring-inverted data-active:text-default rounded-md"
+} });
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+	__name: "TableOfContents",
+	props: {
+		toc: {},
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const { track } = useUmami();
+		function trackClick(text, hash) {
+			track("table_of_contents_click", {
+				toc_text: text,
+				toc_hash: hash
+			});
+		}
+		const { activeHeadings } = useTableOfContents_default();
+		const ui = computed(() => tableOfContents());
+		return (_ctx, _cache) => {
+			return openBlock(), createElementBlock("div", { class: normalizeClass(ui.value.base({ class: [props.ui?.base, props.class] })) }, [createElementVNode("div", { class: normalizeClass(ui.value.title({ class: props.ui?.title })) }, " Table of Contents ", 2), createElementVNode("ul", { class: normalizeClass(ui.value.list({ class: props.ui?.list })) }, [(openBlock(true), createElementBlock(Fragment, null, renderList(props.toc, (item, index) => {
+				return openBlock(), createElementBlock("li", { key: item.anchor || index }, [createCommentVNode(" Cannot use RouterLink as the anchor will be prefixed with the route path. "), item.anchor ? (openBlock(), createElementBlock("a", {
+					key: 0,
+					custom: "",
+					variant: "link",
+					color: "neutral",
+					href: `#${item.anchor}`,
+					"data-active": unref(activeHeadings).includes(item.anchor || "") ? true : void 0,
+					class: normalizeClass(ui.value.link({ class: props.ui?.link })),
+					onClick: ($event) => trackClick(item.text, item.anchor)
+				}, [createElementVNode("span", null, toDisplayString(index + 1) + ".", 1), createTextVNode(" " + toDisplayString(item.text), 1)], 10, _hoisted_1$1)) : createCommentVNode("v-if", true)]);
+			}), 128))], 2)], 2);
+		};
+	}
+});
+var TableOfContents_default = _sfc_main$1;
+
+//#endregion
+//#region src/components/ViewersCounter.vue
+const _hoisted_1 = ["title"];
+const viewersCounter = tv({ slots: {
+	base: "flex items-center justify-center gap-[0.375rem] border border-green-400 rounded-full px-[0.375rem] py-[0.125rem] text-xs text-muted font-light leading-3 dark:border-green-700",
+	dot: "inline-block h-[0.375rem] w-[0.375rem] animate-[pulse_4s_cubic-bezier(0.4,_0,_0.6,_1)_infinite] rounded-full bg-green-400 ring ring-2 ring-green-200 dark:bg-green-700 dark:ring-green-500"
+} });
+const _sfc_main = /* @__PURE__ */ defineComponent({
+	__name: "ViewersCounter",
+	props: {
+		class: {},
+		ui: {}
+	},
+	setup(__props) {
+		const props = __props;
+		const count = ref(0);
+		const connections = ref({});
+		function connect() {
+			return new PartySocket({
+				host: import.meta.env.VITE_PARTYKIT_URL,
+				room: "soubiran-dev"
+			});
+		}
+		onMounted(() => {
+			connect().addEventListener("message", (event) => {
+				const data = JSON.parse(event.data);
+				count.value = data.count;
+				connections.value = data.connections;
+			});
+		});
+		const title = computed(() => {
+			return `${count.value} viewer${count.value > 1 ? "s" : ""} currently online (${Object.keys(connections.value).map((host) => `${connections.value[host]} from ${host}`).join(", ")})`;
+		});
+		const ui = computed(() => viewersCounter());
+		return (_ctx, _cache) => {
+			return openBlock(), createBlock(Transition, { name: "fade" }, {
+				default: withCtx(() => [count.value ? (openBlock(), createElementBlock("div", {
+					key: 0,
+					title: title.value,
+					class: normalizeClass(ui.value.base({ class: [props.class, props.ui?.base] }))
+				}, [createElementVNode("span", null, toDisplayString(count.value), 1), createElementVNode("span", {
+					class: normalizeClass(ui.value.dot({ class: props.ui?.dot })),
+					"aria-hidden": "true"
+				}, null, 2)], 10, _hoisted_1)) : createCommentVNode("v-if", true)]),
+				_: 1
+			});
+		};
+	}
+});
+var ViewersCounter_default = _sfc_main;
+
+//#endregion
+export { Container_default as Container, Feedback_default as Feedback, FeedbackCard_default as FeedbackCard, Header_default as Header, Page_default as Page, PageHeader_default as PageHeader, PageTitle_default as PageTitle, Socials_default as Socials, Sponsors_default as Sponsors, TableOfContents_default as TableOfContents, ViewersCounter_default as ViewersCounter, useTableOfContents_default as useTableOfContents, useUmami };