TS and Vitepress

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

@@ -13,16 +13,18 @@ const props = defineProps({
 const avatar = ref('')
 
 onMounted(() => {
-	import('../../../src/main').then(d => {
+	import('../../../src/main').then(({ gunAvatar, mountElement }) => {
 		watch(props, p => {
-			avatar.value = d.gunAvatar({ ...props })
+			avatar.value = gunAvatar({ ...props })
 		}, { immediate: true })
 	})
 
 })
 
 </script>
 
-<template>
-	<img :src="avatar" />
+<template lang="pug">
+.flex.overflow-hidden
+	img(:src="avatar")
+// <gun-avatar :pub="pub" :size="200" />
 </template>

docs/.vitepress/config.js

@@ -32,6 +32,13 @@ export default defineConfig({
 		['meta', { name: 'twitter:creator', content: '@davay42' }],
 		['meta', { name: 'twitter:image', content: 'https://gun-avatar.js.org/avatar.png' }],
 	],
+	vue: {
+		template: {
+			compilerOptions: {
+				isCustomElement: tag => tag == 'gun-avatar'
+			}
+		}
+	},
 	vite: {
 		plugins: [
 			Unocss({

docs/.vitepress/theme/Layout.vue

@@ -1,24 +1,52 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme'
-import gunAvatar from '../components/gun-avatar.vue';
+import { computed } from 'vue';
+import GunVueAvatar from '../components/gun-vue-avatar.vue';
 import HeaderLinks from '../components/header-links.vue'
 import { useState } from '../composables/state'
 
 const { Layout } = DefaultTheme
 
 const state = useState()
 
+const list = computed(() => [...state.history.history].reverse())
 </script>
 
 <template lang="pug">
 Layout
 	template(#home-hero-image)
 		client-only
-			gun-avatar.image-src.rounded-full.cursor-pointer.m-auto(
-				:pub="state.pub"
-				:size="300"
-				@click="state.generatePair()"
-				)
+			.flex(@click="state.generatePair()")
+				transition(name="fade")
+					.flex.items-center.image-src(
+						:key="state.pub"
+					)
+						gun-vue-avatar.rounded-full.glow(
+							:pub="state.pub"
+							:size="300"
+							)
+						gun-vue-avatar.rounded-full.cursor-pointer.z-2(
+							:pub="state.pub"
+							:size="300"
+							)
+
 	template(#nav-bar-content-before)
 		header-links
-</template>
+	template(#home-hero-after)
+		.flex.flex-wrap.items-center.px-12.justify-start.max-w-1200px.m-auto.flex-column-reverse.gap-2.pb-12.flex-wrap-reverse
+			transition-group(name="fade")
+				.flex(
+					v-for="rec in list"
+					:key="rec"
+				)
+					gun-vue-avatar.rounded-full(
+						:pub="rec.snapshot.pub"
+						:size="50"
+						) {{ rec.snapshot.pub }}
+</template>
+
+<style scoped lang="postcss">
+.glow {
+	@apply absolute transform scale-110 filter blur-2xl z-1;
+}
+</style>

docs/.vitepress/theme/index.js

@@ -2,6 +2,7 @@ import DefaultTheme from 'vitepress/theme'
 import MyLayout from './Layout.vue'
 
 import "@unocss/reset/tailwind.css";
+import './styles.css'
 import "uno.css";
 
 export default {

docs/.vitepress/theme/styles.css

@@ -0,0 +1,25 @@
+/* FADE */
+
+.fade {
+	transition: all 0.5s ease;
+}
+
+.fade-enter-active {
+	transition: all 0.2s ease;
+}
+.fade-leave-active {
+	opacity: 0;
+	transition: all 0.1s ease;
+}
+
+.fade-leave-to {
+	opacity: 0;
+}
+
+.fade-enter-from {
+	opacity: 0;
+}
+
+.fade-enter-to {
+	opacity: 1;
+}

docs/guide/index.md

@@ -0,0 +1,14 @@
+---
+title: Guide
+---
+
+```html
+<gun-avatar
+	pub="O6_tdEg_zCSNO-nMWds2o-fjPgwqQ3sHyxczMiGwl50.zuMgYb93u6LrxWYTVIlIBFG7LkClU_FtOHlsNCbQDH8"
+	size="100"
+	draw="squares"
+	reflect="false"
+	round
+	dark
+></gun-avatar>
+```

docs/index.md

@@ -3,26 +3,26 @@ title: Gun-Avatar
 layout: home
 hero:
   name: Gun-Avatar
-  text: Public key visualisation web-component
-  tagline: User avatar and background generator
+  text: Human recognizable public key representation
+  tagline: Cryptographic user avatar and room background generator
   image:
     src: /logo.png
     alt: Gun-Avatar
   actions:
     - theme: brand
       text: Get Started
-      link: /guide/what-is-vitepress
+      link: /guide/
     - theme: alt
       text: View on GitHub
       link: https://github.com/defucc/gun-avatar
 features:
   - icon: 🛠️
-    title: Simple and minimal, always
-    details: Lorem ipsum...
+    title: Typescript
+    details: Types exported for best developer experience
   - icon: ⚡️
-    title: Another cool feature
-    details: Lorem ipsum...
+    title: Fast
+    details: Uses canvas to render images and caches previous renders for further use
   - icon: ✨
-    title: Another cool feature
-    details: Lorem ipsum...
+    title: Customizable
+    details: Choose your size, render mode, reflection, dark mode and more.
 ---

package.json

@@ -35,7 +35,7 @@
 	},
 	"main": "./dist/gun-avatar.umd.cjs",
 	"module": "./dist/gun-avatar.js",
-	"types": "./dist/types/main.d.ts",
+	"types": "./dist/types/index.d.ts",
 	"files": [
 		"dist"
 	],
@@ -50,18 +50,19 @@
 	},
 	"dependencies": {
 		"@unocss/reset": "0.48.4",
-		"@vueuse/core": "9.11.0",
+		"@vueuse/core": "9.11.1",
 		"gun": "0.2020.1239",
 		"vue": "^3.2.45"
 	},
 	"devDependencies": {
-		"@iconify/json": "^2.2.8",
+		"@iconify/json": "^2.2.10",
 		"@unocss/extractor-pug": "0.48.4",
 		"@vitejs/plugin-vue": "^4.0.0",
+		"@volar/vue-language-plugin-pug": "^1.0.24",
 		"pug": "3.0.2",
 		"unocss": "^0.48.4",
 		"unplugin-icons": "^0.15.1",
 		"vite": "^4.0.4",
-		"vitepress": "1.0.0-alpha.38"
+		"vitepress": "1.0.0-alpha.40"
 	}
 }