cmgriffing/boringer-avatars

A fork from boring-avatars. This rewrites the base as Mitosis components and exports into multiple framework flavors.

Boringer Avatars

Boringer Avatars is a tiny JS library that generates custom, SVG-based avatars from any username and color palette.

Origins

This repo is hard-forked from https://github.com/boringdesigners/boring-avatars.

That repo is React-specific. Other users have forked it into framework specific libraries. But as new frameworks come out, that requires yet another codebase and maintainer.

In this repo, we rewrote the components into Mitosis components. This allows us to export the components into a multitude of other frameworks.

Frameworks/Packages

For specific usage, please see the README for whichever framework you need.

We currently support:

• Angular: source npm
• Qwik: source npm
• React: source npm
• Solid: source npm
• Svelte: source npm
• Vue2: source npm
• Vue3: source npm

Contributing

Want to see another framework supported? Have a way of improving Typescript Types output? Feel free to create an Issue or Pull Request.

Development

To develop and run the project locally, you will need:

• Node: >= 18

• pnpm: >= 7.4.0

Installation

Installing the dependencies is done via pnpm:

yarn install

This will install all depencies for the packages and apps within the workspace.

License

MIT License

Copyright (c) 2021 boringdesigners

Copyright (c) 2022 cmgriffing

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

boringer-avatars's Issues

Pixel variant when square is true has a missing pixel on the top left

Noticed a bug on the demo apps affecting all libraries. When the square property is set to true and the variant is pixel there is a missing pixel on the top left.

Impacted libraries

• React
• Angular
• Vue 2 & 3
• Svelte
• Angular
• Qwik

Reproducible example (React)

<Avatar
  name="test"
  variant="pixel"
  square={square}
/>

Screenshot:

SSR Support Solid Start

Issue

In Solid Start we are seeing on server side document is not defined. When importing import {Avatar as Boring} from "@boringer-avatars/solid";

Expected

To be able to import and use on SSR.

Workaround

To get around this currently what I have done is create a wrapper component around Boringer:

import {Avatar as Boringer} from "@boringer-avatars/solid";

export default function Avatar() {
    return (
        <Boringer
            title={false}
            size={400}
            variant="beam"
            name="testing"
            square={false}
            colors={["#FFAD08", "#EDD75A", "#73B06F", "#0C8F8F", "#405059"]}
        />
    )
}

You can then do a lazy load

const Avatar = lazy(() => import("./Avatar"));

This will mean it is only done client side and wont give issue.

Let me know how I can help.

Abstract and geometric variant options but don't exist

I noticed abstract and geometric variants in the core library but their isn't any variant for those two. Wanted to call it out

Impacted libraries

• All of them I'd imagine since it's on the core library

https://github.com/cmgriffing/boringer-avatars/blob/main/packages/core/src/avatar.utils.ts#L73