autogenerate

docs/.vitepress/theme/Layout.vue

@@ -1,6 +1,6 @@
 <script setup>
 import DefaultTheme from 'vitepress/theme'
-import { computed } from 'vue';
+import { computed, onMounted } from 'vue';
 import GunVueAvatar from '../components/gun-vue-avatar.vue';
 import HeaderLinks from '../components/header-links.vue'
 import { useState } from '../composables/state'
@@ -10,6 +10,13 @@ const { Layout } = DefaultTheme
 const state = useState()
 
 const list = computed(() => [...state.history.history].reverse())
+
+onMounted(() => {
+	const loop = setInterval(() => {
+		state.generatePair()
+	}, 2000)
+})
+
 </script>
 
 <template lang="pug">
@@ -20,12 +27,12 @@ Layout
 				transition(name="fade")
 					.flex.items-center.image-src(
 						:key="state.pub"
-					)
-						gun-vue-avatar.rounded-full.glow(
+						)
+						gun-vue-avatar.rounded-full.glow.z-10(
 							:pub="state.pub"
 							:size="300"
 							)
-						gun-vue-avatar.rounded-full.cursor-pointer.z-2(
+						gun-vue-avatar.rounded-full.cursor-pointer.z-20(
 							:pub="state.pub"
 							:size="300"
 							)
@@ -47,6 +54,6 @@ Layout
 
 <style scoped lang="postcss">
 .glow {
-	@apply absolute transform scale-110 filter blur-2xl z-1;
+	@apply absolute transform scale-110 filter blur-2xl z-10;
 }
 </style>

src/index.ts

@@ -3,4 +3,4 @@ import patchSafari from "./patch.js";
 patchSafari()
 
 export { gunAvatar } from './main.js'
-export { mountClass, mountElement, } from './mount'
+export { mountClass, mountElement } from './mount'

src/main.ts

@@ -2,28 +2,31 @@
 
 const cache = {}; // stores already generated avatars
 
+export interface AvatarOptions {
+  pub: string
+  size?: number
+  dark: boolean
+  draw: 'circles' | 'squares'
+  reflect: boolean
+}
+
 // actual generator function, returns the base64 string
 
 export function gunAvatar({
   pub,
-  size = 800,
+  size = 200,
   dark = false,
   draw = "circles",
   reflect = true,
-}: {
-  pub: string
-  size?: number
-  dark: boolean
-  draw: 'circles' | 'squares'
-  reflect: boolean
-}): string {
-  if (!pub) return;
-  if (!validatePub(pub)) return
-  if (!document) return
+}: AvatarOptions): string {
+
+  if (!validatePub(pub)) return ''
+  if (!document) return ''
+
   let mode = dark ? "dark" : "light";
-  const key = mode + draw + size + pub
+  const reflected = reflect ? 'ref' : 'noref'
+  const key = pub + mode + draw + size + reflected
   if (cache?.[key]) {
-    console.log('using cache')
     return cache[key]
   }
 
@@ -108,7 +111,7 @@ function drawGradient(
   ctx.fillRect(0, 0, size, size);
 }
 
-function drawSquares(data, ctx, size) {
+function drawSquares(data: number[], ctx: CanvasRenderingContext2D, size: number,) {
   const chunks = chunkIt(data, 14);
   chunks.forEach((chunk) => {
     if (chunk.length == 14) {
@@ -143,7 +146,8 @@ function drawSquares(data, ctx, size) {
   });
 }
 
-function drawCircles(data, ctx, size, radius) {
+function drawCircles(data: number[], ctx: CanvasRenderingContext2D, size: number, radius: number) {
+
   const chunks = chunkIt(data, 7);
   chunks.forEach((chunk) => {
     if (chunk.length == 7) {
@@ -164,7 +168,7 @@ function drawCircles(data, ctx, size, radius) {
   });
 }
 
-function decodeUrlSafeBase64(st) {
+function decodeUrlSafeBase64(st: string): number[] {
   const symbols =
     "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789-_";
   const symbolArray = symbols.split("");
@@ -176,7 +180,7 @@ function decodeUrlSafeBase64(st) {
   return arr;
 }
 
-function chunkIt(list, chunkSize = 3) {
+function chunkIt(list: number[], chunkSize = 3) {
   return [...Array(Math.ceil(list.length / chunkSize))].map(() =>
     list.splice(0, chunkSize)
   );