@soubiran/ui 0.9.2 → 0.10.1

package/dist/components/Header.vue

@@ -1,138 +0,0 @@
-<script lang="ts">
-import type { FunctionalComponent, SVGAttributes } from 'vue'
-import { tv } from 'tailwind-variants'
-import { computed } from 'vue'
-import discord from '~icons/simple-icons/discord'
-import github from '~icons/simple-icons/github'
-import linkedin from '~icons/simple-icons/linkedin'
-import twitch from '~icons/simple-icons/twitch'
-import x from '~icons/simple-icons/x'
-import useUmami from '../composables/useUmami'
-import Container from './Container.vue'
-
-const header = tv({
-  slots: {
-    base: 'h-(--ui-header-height) flex flex-row gap-4 items-center justify-end',
-    link: 'p-0 text-dimmed',
-  },
-})
-
-export interface HeaderProps {
-  links: {
-    icon: FunctionalComponent<SVGAttributes>
-    label: string
-    to?: string
-    href?: string
-    target?: string
-    rel?: string
-  }[]
-  class?: any
-  ui?: Partial<typeof header.slots>
-}
-export interface HeaderEmits {}
-export interface HeaderSlots {}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<HeaderProps>()
-defineEmits<HeaderEmits>()
-defineSlots<HeaderSlots>()
-
-const { track } = useUmami()
-function trackClick(label: string) {
-  track('header_click', { label })
-}
-
-const ui = computed(() => header())
-</script>
-
-<template>
-  <Container :ui="{ inner: 'max-w-5xl' }">
-    <header :class="ui.base({ class: [props.ui?.base, props.class] })">
-      <UTooltip
-        v-for="link of props.links"
-        :key="link.label"
-        :text="link.label"
-      >
-        <UButton
-          variant="link"
-          color="neutral"
-          :to="link.to"
-          :href="link.href"
-          :aria-label="link.label"
-          :icon="link.icon"
-          :target="link.target"
-          :rel="link.rel"
-          :class="ui.link({ class: props.ui?.link })"
-          @click="trackClick(link.label)"
-        />
-      </UTooltip>
-      <USeparator orientation="vertical" class="h-5" />
-      <UTooltip text="LinkedIn">
-        <UButton
-          href="https://www.linkedin.com/in/esteban25/"
-          target="_blank"
-          variant="link"
-          color="neutral"
-          aria-label="LinkedIn"
-          :icon="linkedin"
-          :class="ui.link({ class: props.ui?.link })"
-          :ui="{ leadingIcon: 'size-4' }"
-          @click="trackClick('LinkedIn')"
-        />
-      </UTooltip>
-      <UTooltip text="X">
-        <UButton
-          href="https://x.com/soubiran_"
-          target="_blank"
-          variant="link"
-          color="neutral"
-          aria-label="X"
-          :icon="x"
-          :class="ui.link({ class: props.ui?.link })"
-          :ui="{ leadingIcon: 'size-4' }"
-          @click="trackClick('X')"
-        />
-      </UTooltip>
-      <UTooltip text="Twitch">
-        <UButton
-          href="https://www.twitch.tv/barbapapazes"
-          target="_blank"
-          variant="link"
-          color="neutral"
-          aria-label="Twitch"
-          :icon="twitch"
-          :class="ui.link({ class: props.ui?.link })"
-          :ui="{ leadingIcon: 'size-4' }"
-          @click="trackClick('Twitch')"
-        />
-      </UTooltip>
-      <UTooltip text="GitHub">
-        <UButton
-          href="https://github.com/barbapapazes"
-          target="_blank"
-          variant="link"
-          color="neutral"
-          aria-label="GitHub"
-          :icon="github"
-          :class="ui.link({ class: props.ui?.link })"
-          :ui="{ leadingIcon: 'size-4' }"
-          @click="trackClick('GitHub')"
-        />
-      </UTooltip>
-      <UTooltip text="Discord">
-        <UButton
-          href="https://discord.gg/q2ghCGUuFR"
-          target="_blank"
-          variant="link"
-          color="neutral"
-          aria-label="Discord"
-          :icon="discord"
-          :class="ui.link({ class: props.ui?.link })"
-          :ui="{ leadingIcon: 'size-4' }"
-          @click="trackClick('Discord')"
-        />
-      </UTooltip>
-    </header>
-  </Container>
-</template>

package/dist/components/Page.vue

@@ -1,63 +0,0 @@
-<script lang="ts">
-import { tv } from 'tailwind-variants'
-import { computed } from 'vue'
-import Container from './Container.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',
-  },
-})
-
-export interface PageProps {
-  class?: any
-  ui?: Partial<typeof page.slots>
-}
-export interface PageEmits {}
-export interface PageSlots {
-  default: (props: any) => any
-  header: (props: any) => any
-  right: (props: any) => any
-  bottom: (props: any) => any
-}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<PageProps>()
-defineEmits<PageEmits>()
-defineSlots<PageSlots>()
-
-const ui = computed(() => page())
-</script>
-
-<template>
-  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <Container>
-      <div :class="ui.header({ class: props.ui?.header })">
-        <div :class="ui.headerInner({ class: props.ui?.headerInner })">
-          <slot name="header" />
-        </div>
-      </div>
-
-      <div :class="ui.content({ class: props.ui?.content })">
-        <div :class="ui.contentInner({ class: props.ui?.contentInner })">
-          <slot />
-        </div>
-
-        <div :class="ui.right({ class: props.ui?.right })">
-          <div :class="ui.rightInner({ class: props.ui?.rightInner })">
-            <slot name="right" />
-          </div>
-        </div>
-      </div>
-    </Container>
-
-    <slot name="bottom" />
-  </div>
-</template>

package/dist/components/PageHeader.vue

@@ -1,36 +0,0 @@
-<script lang="ts">
-import { tv } from 'tailwind-variants'
-import { computed } from 'vue'
-import PageTitle from './PageTitle.vue'
-
-const pageHeader = tv({
-  slots: {
-    base: '',
-  },
-})
-
-export interface PageHeaderProps {
-  title: string
-  class?: any
-  ui?: Partial<typeof pageHeader.slots>
-}
-export interface PageHeaderEmits {}
-export interface PageHeaderSlots {
-  after: (props: any) => any
-}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<PageHeaderProps>()
-defineEmits<PageHeaderEmits>()
-defineSlots<PageHeaderSlots>()
-
-const ui = computed(() => pageHeader())
-</script>
-
-<template>
-  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <PageTitle :title="props.title" />
-    <slot name="after" />
-  </div>
-</template>

package/dist/components/PageTitle.vue

@@ -1,32 +0,0 @@
-<script lang="ts">
-import { tv } from 'tailwind-variants'
-import { computed } from 'vue'
-
-const pageTitle = tv({
-  slots: {
-    base: 'text-xl font-bold text-highlighted',
-  },
-})
-
-export interface PageTitleProps {
-  title: string
-  class?: any
-  ui?: Partial<typeof pageTitle.slots>
-}
-export interface PageTitleEmits {}
-export interface PageTitleSlots {}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<PageTitleProps>()
-defineEmits<PageTitleEmits>()
-defineSlots<PageTitleSlots>()
-
-const ui = computed(() => pageTitle())
-</script>
-
-<template>
-  <h1 :class="ui.base({ class: [props.ui?.base, props.class] })">
-    {{ title }}
-  </h1>
-</template>

package/dist/components/Socials.vue

@@ -1,82 +0,0 @@
-<script lang="ts">
-import { tv } from 'tailwind-variants'
-import { computed } from 'vue'
-import github from '~icons/simple-icons/github'
-import linkedin from '~icons/simple-icons/linkedin'
-import twitch from '~icons/simple-icons/twitch'
-import x from '~icons/simple-icons/x'
-import youtube from '~icons/simple-icons/youtube'
-
-const socials = tv({
-  slots: {
-    base: 'flex flex-wrap gap-2',
-    link: 'flex items-center gap-1',
-    icon: 'size-4',
-  },
-})
-
-export interface SocialsProps {
-  class?: any
-  ui?: Partial<typeof socials.slots>
-}
-export interface SocialsEmits {}
-export interface SocialsSlots {}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<SocialsProps>()
-defineEmits<SocialsEmits>()
-defineSlots<SocialsSlots>()
-
-const ui = computed(() => socials())
-</script>
-
-<template>
-  <p :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <a
-      href="https://www.linkedin.com/in/esteban25/"
-      rel="noopener noreferrer"
-      target="_blank"
-      :class="ui.link({ class: props.ui?.link })"
-    >
-      <UIcon :name="linkedin" :class="ui.icon({ class: props.ui?.icon })" />
-      <span>LinkedIn</span>
-    </a>
-    <a
-      href="https://x.com/soubiran_"
-      rel="noopener noreferrer"
-      target="_blank"
-      :class="ui.link({ class: props.ui?.link })"
-    >
-      <UIcon :name="x" :class="ui.icon({ class: props.ui?.icon })" />
-      <span>X (Twitter)</span>
-    </a>
-    <a
-      href="https://github.com/barbapapazes"
-      rel="noopener noreferrer"
-      target="_blank"
-      :class="ui.link({ class: props.ui?.link })"
-    >
-      <UIcon :name="github" :class="ui.icon({ class: props.ui?.icon })" />
-      <span>GitHub</span>
-    </a>
-    <a
-      href="https://www.twitch.tv/barbapapazes"
-      rel="noopener noreferrer"
-      target="_blank"
-      :class="ui.link({ class: props.ui?.link })"
-    >
-      <UIcon :name="twitch" :class="ui.icon({ class: props.ui?.icon })" />
-      <span>Twitch</span>
-    </a>
-    <a
-      href="https://www.youtube.com/@barbapapazes"
-      target="_blank"
-      rel="noopener noreferrer"
-      :class="ui.link({ class: props.ui?.link })"
-    >
-      <UIcon :name="youtube" :class="ui.icon({ class: props.ui?.icon })" />
-      <span>YouTube</span>
-    </a>
-  </p>
-</template>

package/dist/components/Sponsors.vue

@@ -1,34 +0,0 @@
-<script lang="ts">
-import { tv } from 'tailwind-variants'
-import { computed } from 'vue'
-
-const sponsors = tv({
-  slots: {
-    base: 'not-prose',
-    img: 'border-0',
-  },
-})
-
-export interface SponsorsProps {
-  class?: any
-  ui?: Partial<typeof sponsors.slots>
-}
-export interface SponsorsEmits {}
-export interface SponsorsSlots {}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<SponsorsProps>()
-defineEmits<SponsorsEmits>()
-defineSlots<SponsorsSlots>()
-
-const ui = computed(() => sponsors())
-</script>
-
-<template>
-  <p :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <a href="https://soubiran.dev/sponsorship?utm_source=infra.soubiran.dev&utm_medium=link" target="_blank">
-      <img src="https://raw.githubusercontent.com/Barbapapazes/static/refs/heads/main/sponsors.svg" alt="Sponsors" :class="ui.img({ class: props.ui?.img })">
-    </a>
-  </p>
-</template>

package/dist/components/TableOfContents.vue

@@ -1,74 +0,0 @@
-<script lang="ts">
-import { tv } from 'tailwind-variants'
-import { computed } from 'vue'
-import useTableOfContents from '../composables/useTableOfContents'
-import useUmami from '../composables/useUmami'
-
-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',
-  },
-})
-
-export interface TableOfContentsItem {
-  level: number
-  anchor: string | null
-  text: string
-  children?: TableOfContentsItem[]
-}
-
-export interface TableOfContentsProps {
-  toc: TableOfContentsItem[]
-  class?: any
-  ui?: Partial<typeof tableOfContents.slots>
-}
-export interface TableOfContentsEmits {}
-export interface TableOfContentsSlots {}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<TableOfContentsProps>()
-defineEmits<TableOfContentsEmits>()
-defineSlots<TableOfContentsSlots>()
-
-const { track } = useUmami()
-function trackClick(text: string, hash: string) {
-  track('table_of_contents_click', {
-    toc_text: text,
-    toc_hash: hash,
-  })
-}
-
-const { activeHeadings } = useTableOfContents()
-
-const ui = computed(() => tableOfContents())
-</script>
-
-<template>
-  <div :class="ui.base({ class: [props.ui?.base, props.class] })">
-    <div :class="ui.title({ class: props.ui?.title })">
-      Table of Contents
-    </div>
-    <ul :class="ui.list({ class: props.ui?.list })">
-      <li v-for="(item, index) in props.toc" :key="item.anchor || index">
-        <!-- Cannot use RouterLink as the anchor will be prefixed with the route path. -->
-        <a
-          v-if="item.anchor"
-          custom
-          variant="link"
-          color="neutral"
-          :href="`#${item.anchor}`"
-          :data-active="activeHeadings.includes(item.anchor || '') ? true : undefined"
-          :class="ui.link({ class: props.ui?.link })"
-          @click="trackClick(item.text, item.anchor)"
-        >
-          <span>{{ index + 1 }}.</span>
-          {{ item.text }}
-        </a>
-      </li>
-    </ul>
-  </div>
-</template>

package/dist/components/ViewersCounter.vue

@@ -1,75 +0,0 @@
-<script lang="ts">
-import PartySocket from 'partysocket'
-import { tv } from 'tailwind-variants'
-import { computed, onMounted, ref } from 'vue'
-
-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',
-  },
-})
-
-interface Data {
-  count: number
-  connections: { [key: string]: number }
-}
-
-export interface ViewersCounterProps {
-  class?: any
-  ui?: Partial<typeof viewersCounter.slots>
-}
-export interface ViewersCounterEmits {}
-export interface ViewersCounterSlots {}
-</script>
-
-<script lang="ts" setup>
-const props = defineProps<ViewersCounterProps>()
-defineEmits<ViewersCounterEmits>()
-defineSlots<ViewersCounterSlots>()
-
-const count = ref<number>(0)
-const connections = ref<{ [key: string]: number }>({})
-
-function connect() {
-  return new PartySocket({
-    host: import.meta.env.VITE_PARTYKIT_URL,
-    room: 'soubiran-dev',
-  })
-}
-
-onMounted(() => {
-  const ws = connect()
-
-  ws.addEventListener('message', (event) => {
-    const data = JSON.parse(event.data) as 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())
-</script>
-
-<template>
-  <Transition name="fade">
-    <div
-      v-if="count"
-      :title
-      :class="ui.base({ class: [props.class, props.ui?.base] })"
-    >
-      <span>{{ count }}</span>
-      <span
-        :class="ui.dot({ class: props.ui?.dot })"
-        aria-hidden="true"
-      />
-    </div>
-  </Transition>
-</template>

package/dist/composables/useTableOfContents.d.ts

@@ -1,11 +0,0 @@
-import * as _$vue from "vue";
-
-//#region src/composables/useTableOfContents.d.ts
-declare function _useTableOfContents(): {
-  setActive: (id: string) => void;
-  unsetActive: (id: string) => void;
-  activeHeadings: Readonly<_$vue.Ref<readonly string[], readonly string[]>>;
-};
-declare const _default: typeof _useTableOfContents;
-//#endregion
-export { _default };

package/dist/composables/useTableOfContents.js

@@ -1,20 +0,0 @@
-import { createSharedComposable } from "@vueuse/core";
-import { readonly, ref } from "vue";
-//#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
-export { useTableOfContents_default as default };

package/dist/composables/useUmami.d.ts

@@ -1,6 +0,0 @@
-//#region src/composables/useUmami.d.ts
-declare function useUmami(): {
-  track: (event: string, data?: Record<string, unknown>) => void;
-};
-//#endregion
-export { useUmami };

package/dist/composables/useUmami.js

@@ -1,14 +0,0 @@
-import { useRoute } from "vue-router";
-//#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
-export { useUmami as default };