interactive docs started

docs/.vitepress/components/gun-avatar.vue

@@ -0,0 +1,21 @@
+<script setup>
+import { gunAvatar } from '../../../src/main'
+import { useCssVar } from '@vueuse/core'
+import { computed } from 'vue';
+
+const props = defineProps({
+	pub: { type: String, default: '' },
+	size: { type: Number, default: 100 },
+	dark: { type: Boolean, default: false },
+	draw: { type: String, default: 'circles' },
+	reflect: { type: Boolean, default: true },
+	round: { type: Boolean, default: true }
+})
+
+const avatar = computed(() => gunAvatar({ ...props }))
+
+</script>
+
+<template>
+	<img :src="avatar" />
+</template>

docs/.vitepress/composables/state.js

@@ -1,8 +1,8 @@
 
 import Gun from "gun/gun";
 import SEA from "gun/sea.js";
-import { reactive } from "vue";
-
+import { reactive, computed, toRef } from "vue";
+import { useRefHistory } from '@vueuse/core'
 
 export const state = reactive({
 	pair: {
@@ -11,7 +11,10 @@ export const state = reactive({
 		epub: "GcA7UOQyRPo8GlG1PCTOfcOjwvfxNgvdAjILC7NM9gc.T7yZYjlb7iJWxokcI01oCGTGAK8XDBgks9hXA-FDkeY",
 		epriv: "Tr9_a9sWJbo7EI0ARB5VeptIBALFuVNkSkrRAuP8vQc",
 	},
+	pub: computed(() => state.pair.pub),
 	async generatePair() {
 		state.pair = await SEA.pair()
 	}
-})
+})
+
+state.history = useRefHistory(toRef(state, 'pair'))

docs/.vitepress/theme/Layout.vue

@@ -1,13 +1,20 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme'
+import { state } from '../composables/state'
 
 const { Layout } = DefaultTheme
+
+
 </script>
 
 <template lang="pug">
 Layout
 	template(#home-hero-image)
-		avatar-view
+		gun-avatar.image-src.rounded-full.cursor-pointer.m-auto(
+			:pub="state.pub"
+			:size="300"
+			@click="state.generatePair()"
+			)
 	template(#nav-bar-content-before)
 		header-links
 </template>

src/main.js

@@ -214,4 +214,4 @@ function chunkIt(list, chunkSize = 3) {
   return [...Array(Math.ceil(list.length / chunkSize))].map(() =>
     list.splice(0, chunkSize)
   );
-}
+}

vite.config.js

@@ -1,4 +1,5 @@
 import { defineConfig } from "vite";
+import Vue from '@vitejs/plugin-vue'
 import Unocss from 'unocss/vite'
 import { presetUno, presetIcons, transformerDirectives, extractorSplit } from "unocss";
 import extractorPug from '@unocss/extractor-pug'
@@ -9,6 +10,7 @@ export default defineConfig({
     outDir: "./demo",
   },
   plugins: [
+    Vue(),
     Unocss({
       presets: [
         presetIcons({