npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

gun-avatar

v1.9.4

Published

Avatar generator for GUN public keys

Downloads

123

Readme

Avatar generator for GUN public keys

Try it on codepen

avatar

Gun-Avatar takes a public key string 88 symbols long and creates a base64 encoded picture to be set as a source for an <img> tag.

SEA public key consists of 87 symbols including a dot in the middle, so we can consider it as (7*4+1)*2. So the steps to generate a unique picture for the key are like that:

  1. We split the public key in two halves by the dot ..
  2. We cut one digit from each part of the key. It gives us a pair of numbers, that we use to generate a grayscale vertical background gradient (light or dark)
  3. Then we break the remaining 42 characters of each part into 4 groups of 7 numbers. Each group describes a circle: it's coordinates (x,y), it's radius (r) and 4 color parameters in the HSLA model (h,s,l,a). We place these circles on one side of a square canvas.
  4. Circles from the first part of the key are bigger and are placed with normal composite mode. Circles from the second part are smaller and placed with 'lighten' composite mode.
  5. Then half of the canvas gets reflected to create a nice symmetric 'portrait' to be used as an avatar of a SEA public key.

avatars

How to install?

npm / pnpm

Install the script from npm with a tool of your choice.

npm i gun-avatar

Then you can import {gunAvatar} from 'gun-avatar' and use the function to render the avatar. Or simply import 'gun-avatar' for custom element use.

How to use Gun-avatar?

1. Custom HTML element

After you add the script to the page you get a custom element <gun-avatar /> for ease of use. The attributes are reactive to changes. Set dark attribute if you need a dark version of the avatar. Set round attribute to get a rounded image. Also size in pixels is available.

<script type="module">
	import { mountElement } from "https://cdn.skypack.dev/gun-avatar";
	mountElement();
</script>
<gun-avatar
	pub="0000000kw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8"
	size="300"
	round
	dark
	reflect
	draw="circles"
/>

You can set up a custom element name with mountElement('avatar')

2. HTML img tag with data-pub attribute

Add the script to the page and then add gun-avatar class to an img tag along with add data-pub attribute with the pub key. gun-avatar automatically finds them on page and fills with corresponding base64 picture data. You can set data-size in px and style the avatar with css as you want. Also there's data-dark option to generate a dark version of the same avatar. You can add .gun-avatar {border-radius: 100%} to tour css to make it round.

<script type="module">
	import { mountClass } from "https://cdn.skypack.dev/gun-avatar";
	mountClass();
</script>
<img
	class="gun-avatar"
	data-size="200"
	data-draw="squares"
	data-reflect="false"
	data-pub="YZOBPSkw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8"
/>

You can set up a custom class name with mountClass('avatar')

3. JS function

Install the gun-avatar package and import the gunAvatar function. Then you can use it to generate the base64 string to place into the src attribute with your favourite library or vanilla js. Function gets an object with options: pub , size in px, draw mode, dark of not, reflect or not.

import { gunAvatar } from "https://cdn.skypack.dev/gun-avatar";

const pub =
	"YZOBPSkw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8";

document.addEventListener("DOMContentLoaded", () => {
	document.getElementById("avatar").src = gunAvatar({ pub, size: 200 });
});

MODES

  1. Circles - the default mode.

  2. Squares - gradient squares over blurred ones (useful for rooms)

rooms

<gun-avatar
	pub="0000000kw75Ute2tFhdjDQgzR-GsGhlfSlZxgEZKuquI.2F-j9ItJY44U8vcRAsj-5lxnECG5TDyuPD8gEiuInp8"
	size="300"
	reflect="false"
	draw="squares"
></gun-avatar>

ROAD MAP

  • [x] make the mirroring canvas work in Safari
  • [x] make adjustable canvas size with consistent result
  • [x] add more options to customize the view of the avatars
  • [x] custom element mount
  • [x] dark mode
  • [x] editable class and element to mount
  • [x] add more draw modes
    • [x] circles
    • [x] squares
    • [ ] triangles?