init

lib/components/bio/elements/Banner.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+  export let banner: string | undefined = undefined;
+</script>
+
+<div class="w-full h-80 bg-center bg-cover md:rounded-[32px] shadow" style="--banner: url({banner ?? ''})" />
+
+<style lang="postcss">
+  div {
+    @apply bg-accent;
+    background-image: var(--banner);
+  }
+</style>

lib/components/bio/elements/BannerContainer.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import Banner from './Banner.svelte';
+  import { getBioBanner } from '$lib/config';
+  import { editorStore } from '$lib/stores/editor';
+  import { page } from '$app/stores';
+
+  export let loadTime: number | undefined = undefined;
+  export let bioId: number | undefined = undefined;
+  export let simple: boolean = false;
+
+  $: noBanner =
+    ($page.data.bio?.hasBanner !== true && $editorStore.banner == null) ||
+    $editorStore.edits.edits.deleteBanner != null;
+
+  $: isEditor = $page.url.pathname.startsWith('/dashboard');
+  $: banner = noBanner
+    ? undefined
+    : $editorStore.banner
+    ? $editorStore.banner
+    : bioId
+    ? getBioBanner(bioId, isEditor ? loadTime : undefined)
+    : undefined;
+</script>
+
+<div class="w-full grid">
+  {#if !simple}
+    <div class="w-full blur-[70px] opacity-40 dark:opacity-80 transition-opacity">
+      <Banner {banner} />
+    </div>
+  {/if}
+  <div class="w-full z-[1]">
+    <Banner {banner} />
+  </div>
+</div>
+
+<style lang="postcss">
+  div > div {
+    @apply col-start-1 row-start-1;
+  }
+</style>

lib/components/bio/elements/InteractivePanel.svelte

@@ -0,0 +1,40 @@
+<script lang="ts">
+  import { editorStore } from '$lib/stores/editor';
+  import { faExternalLink } from '@fortawesome/free-solid-svg-icons';
+  import Fa from 'svelte-fa';
+  import Panel from './Panel.svelte';
+
+  export let preview: boolean = false;
+  export let handle: boolean = false;
+  export let url: string | undefined = undefined;
+  export let title: string | undefined = undefined;
+</script>
+
+<a
+  class="panel cursor-pointer rounded-3xl hover:bg-dark-hover-ui-element-bg/50 dark:hover:bg-light-hover-ui-element-bg/50 active:bg-dark-active-ui-element-bg/50 dark:active:bg-light-active-ui-element-bg/50 transition-colors box-content"
+  href={!$editorStore.editMode ? url : undefined}
+  target="_blank">
+  <Panel {handle} {preview}>
+    <div class="flex gap-1" class:title>
+      <div class="flex-grow" class:min-w-0={!title}>
+        <slot />
+      </div>
+      <div class="contents text-text-clickable text-xs">
+        {#if title}
+          <p class="whitespace-nowrap leading-[.8] text-base font-normal">{title}</p>
+        {/if}
+        <Fa icon={faExternalLink} />
+      </div>
+    </div>
+  </Panel>
+</a>
+
+<style lang="postcss">
+  div.title {
+    @apply flex-col-reverse gap-0;
+  }
+
+  div.title > div:last-of-type {
+    @apply flex w-full justify-between items-center mb-5;
+  }
+</style>

lib/components/bio/elements/Panel.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+  import Handle from '$lib/components/dashboard/editor/Handle.svelte';
+  import { editorStore } from '$lib/stores/editor';
+
+  export let preview: boolean = false;
+  export let handle: boolean = false;
+  export let fit: boolean = false;
+  export let full: boolean = false;
+  export let invisible: boolean = false;
+
+  $: hasHandle = handle ? $editorStore.editMode : false;
+</script>
+
+<div
+  class="panel flex-shrink-0 flex"
+  class:w-fit={fit}
+  class:w-full={full}
+  class:visible={!invisible}
+  class:widget-preview={preview}>
+  {#if hasHandle}
+    <Handle pad={true} />
+  {/if}
+  <div class="panel-content w-full h-fit min-w-0" class:!pl-0={hasHandle} class:-ml-6={hasHandle && invisible}>
+    <slot />
+  </div>
+</div>
+
+<style lang="postcss">
+  .panel.visible {
+    @apply bg-widget-fill rounded-3xl border border-widget-stroke backdrop-blur-xl transition-colors text-text-header transform-gpu;
+  }
+
+  .panel.visible .panel-content {
+    @apply p-6;
+  }
+</style>

lib/components/bio/elements/WidgetRenderContainer.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+  import Name from '../profile/Name.svelte';
+
+  export let hasPreview: boolean = true;
+</script>
+
+{#if hasPreview}
+  <slot />
+{:else}
+  <div class="w-full">
+    <Name identifier={'Loading widget...'} secondaryIdentifier={'Loading...'} placeholder={true} />
+  </div>
+{/if}