src/routes/+layout.svelte

<script>
	import { get } from "svelte/store";
	import Icon from "@iconify/svelte";
	import { SvelteToast } from '@zerodevx/svelte-toast'
	import { init } from "@huggingface/space-header"

	import Sidebar from "$lib/components/sidebar/Sidebar.svelte";
	import "$lib/styles/tailwind.css"
	import { openWindowLogin, userStore } from "$lib/stores/use-user";
	import Dialog from "$lib/components/dialog/Dialog.svelte";
	import { loginModalStore } from "$lib/stores/use-login-modal";
	import SpaceMiniHeader from "$lib/components/spaceheader/SpaceMiniHeader.svelte";
	import { onMount } from "svelte";
	import { browser } from "$app/environment";

	export let data;
	userStore.set(data?.user?.user);

	let open = get(loginModalStore);

	loginModalStore.subscribe((v) => {
		open = v;
  });

	onMount(() => {
		if (browser) {
			console.log(window.location)
			if (window.location.host === "enzostvs-lora-studio.hf.space") {
				window.location.href = "https://lorastudio.co";
			}
			const hasAncestorOrigin = Object.values(window.location.ancestorOrigins).some((origin) => origin.includes("huggingface.co"));
			if (!hasAncestorOrigin) {
				init("enzostvs/lora-studio")
			}
		}
	})
</script>

<svelte:head>
	<title>LoRA Studio</title>
	<meta name="description" content="Create, share and learn with this and many more LoRAs" />
	<meta property="og:title" content="LoRA Studio" />
	<meta
		property="og:description"
		content="Create, share and learn with this and many more LoRAs"
	/>
	<meta property="og:image" content="https://enzostvs-lora-studio.hf.space/metadata.png" />
	<meta property="og:url" content="https://enzostvs-lora-studio.hf.space/" />
	<meta property="og:type" content="website" />
	<meta name="twitter:card" content="summary_large_image" />
	<meta name="twitter:site" content="@huggingface" />
	<meta name="twitter:creator" content="@huggingface" />
	<meta name="twitter:title" content="LoRA Studio" />
	<meta
		name="twitter:description"
		content="Create, share and learn with this and many more LoRAs"
	/>
	<meta name="twitter:image" content="https://enzostvs-lora-studio.hf.space/metadata.png" />
</svelte:head>

<div class="flex items-start">
	<!-- <SpaceMiniHeader /> -->
	<Sidebar />
	<main id="app" class="flex-1 h-screen overflow-y-auto">
		<slot />
	</main>
	<SvelteToast />
	<Dialog {open} onClose={() => loginModalStore.set(false)}>
		<div class="grid grid-cols-1 gap-7 text-center relative">
			<!-- close icon -->
			<button class="absolute top-5 right-5" on:click={() => loginModalStore.set(false)}>
				<Icon icon="carbon:close" class="w-6 h-6 text-white cursor-pointer" />
			</button>
			
			<Icon icon="fluent-emoji:sparkles" class="w-12 h-12 mx-auto" />
			<header>
				<p class="text-white font-semibold text-lg">
					Login to LoRA Studio
				</p>
				<p class="text-neutral-300 text-base mt-1">
					Login to get a full access and get the most out of LoRA Studio.
				</p>
			</header>
			<main>
				<button class="inline-block" on:click={openWindowLogin}>
					<img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/sign-in-with-huggingface-lg.svg" alt="Sign in with Hugging Face" class="mx-auto" />
				</button>
			</main>
		</div>
	</Dialog>
</div>