@soubiran/ui 0.4.0 → 0.6.0

package/dist/components/TableOfContents.vue

@@ -0,0 +1,74 @@
+<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

@@ -0,0 +1,75 @@
+<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

@@ -0,0 +1,11 @@
+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

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,6 @@
+//#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

@@ -0,0 +1,14 @@
+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 };