Steps to reproduce

• Go directly to https://personas.draftbit.com/

Current behavior

• The selected color options for skin, hair, facial hair, body and background do not match the displayed avatar.

Expected behavior

• The selected color options and displayed avatar colors match.

Before I knew what I was doing, I had the re / src folders consolidated, lets throw all the reason stuff inside src

In src/re/Types.re, we could try and use a "union" type for key, instead of rewriting the code for the style and color type. For reference, see these articles:

• https://reasonml.org/blog/union-types-in-bucklescript
• https://dev.to/yawaramin/emulating-typescript-union-types-with-reasonml-3ea0

it's such an easy one 😄

https://github.com/draftbit/avatar-generator/blob/master/src/pages/404.js

import React from 'react'
import Layout from '../components/layout'

const NotFoundPage = () => (
  <Layout>
    <h1>NOT FOUND</h1>
    <p>You just hit a route that doesn&#39;t exist... the sadness.</p>
  </Layout>
)

export default NotFoundPage

https://github.com/draftbit/avatar-generator/blob/master/src/pages/index.js

https://github.com/draftbit/avatar-generator/blob/master/re/AvatarGenerator.re#L92

this is what they currently are:

           onSelectColor={color => {
             let key =
               switch (o.id) {
               | "Skin" => "skinColor"
               | "Hair" => "hairColor"
               | "FacialHair" => "facialHairColor"
               | "Body" => "bodyColor"
               | "Background" => "bgColor"
               | _ => ""
               };

             onChange(key, color);
           }}
           onSelectStyle={style => {
             let key =
               switch (o.id) {
               | "Hair" => "hair"
               | "Skin" => "skin"
               | "FacialHair" => "facialHair"
               | "Body" => "body"
               | "Eyes" => "eyes"
               | "Mouth" => "mouth"
               | "Nose" => "nose"
               | _ => ""
               };

this is what we want:

type BodyColor = Skin | Hair | FacialHair | Body | Background
type BodyPart = Skin | Hair | FacialHair | Body | Eyes | Mouth | Nose

and then you can create the serializers for those:

bodyColorToStr = BodyColor => string
bodyPartToStr = BodyPart => string

you can then easily replace this getZIndex https://github.com/draftbit/avatar-generator/blob/master/re/AvatarGenerator.re#L12

The instructions in the README assume that I'd need to run this as a standalone application, but is there any interest in exposing this as, say, a react component? If so, I'd be happy to help out. All of the other avatar libraries aren't as polished as this one imo.

Hi guys!
I love your product.
Do you think you guys could make the Avatar previewer sticky? It'd make the generator a more comfortable mobile experience since users wouldn't have to scroll up all the time too see how the different choices look on their character.

You'll need to create bindings for gatsby and react-helmet, but I feel like this can be done.

there's an issue on html2canvas:
niklasvh/html2canvas#117

and other deps...

This file is still in JS because it (a) uses async/await syntax and (b) uses a lot of DOM-related methods. We'll need to create bindings for the html2canvas package as well, but that shouldn't be too difficult.

Once the rewrite in Reason is done, we can remove the file and keep all the functionality for export inside src/pages/Index.re.

Your site's "gatsby-node.js" created a page with a component that doesn't exist.

The path to the missing component is "C:\Users\lishuaibing\Desktop\avatar-generator\src\pages\page_404.bs.js"

The page object passed to createPage:
{
"path": "404",
"component": "C:\Users\lishuaibing\Desktop\avatar-generator\src\pages\page_404.bs.js"
}

See the documentation for the "createPage" action — https://www.gatsbyjs.org/docs/actions/#createPage

not finished createPages - 0.043s

error Command failed with exit code 1.