crafatar/lib/views/index.jade

extends layout

block content
  .jumbotron
      .container
        h1 Crafatar
        p A blazing fast API for Minecraft faces!
        .avatar-wrapper
          .avatar.jomo(title="jomo's avatar")
          .avatar.jake_0(title="jake_0's avatar")
          .avatar.sk89q(title="sk89q's avatar")
          .avatar.md_5(title="md_5's avatar")
          .avatar.notch(title="notch's avatar")
          .avatar.jeb(title="jeb's avatar")
          .avatar.dinnerbone.flipped(title="dinnerbone's avatar")
          .avatar.ez(title="ez' avatar")
          .avatar.grumm.flipped(title="grumm's avatar")
          .avatar.themogmimer(title="themogmimer's avatar")
          .avatar.searge(title="searge's avatar")
          .avatar.xlson(title="xlson's avatar")
          .avatar.krisjelbring(title="krisjelbring's avatar")
          .avatar.minecraftchick(title="minecraftchick's avatar")
          .avatar.kappe(title="kappe's avatar")
          .avatar.marc(title="marc's avatar")
          .avatar.mollstam(title="mollstam's avatar")
          .avatar.evilseph(title="evilseph's avatar")
          .avatar.thinkofdeath(title="thinkofdeath's avatar")

  .container
    section(id="documentation")
      h2 Documentation
      .row
        section
          a(id="avatars", class="anchor")
          a(href="#avatars")
            h3 Avatars
          | Replace
          mark.green  userid
          |  with a Mojang <b>UUID</b> or <b>username</b> to get the related head. All images are PNGs.
          .code
            | #{domain}/avatars/
            mark.green userid

          section
            a(id="avatar-parameters" class="anchor")
            a(href="#avatar-parameters")
              h4 Avatar Parameters
            table(class="table table-striped")
              thead
                tr
                  td parameter
                  td type
                  td default
                  td description
              tbody
                tr
                  td size
                  td integer
                  td #{config.default_size}
                  td The size of the image in pixels, #{config.min_size} - #{config.max_size}.
                tr
                  td default
                  td string
                  td
                    | The standard value is calculated based on the UUID (even = alex, odd = steve).<br>
                    | Usernames always default to steve.
                  td
                    | The image to be served when the userid has no skin.<br>
                    | Valid options are
                    a(href="/avatars/0?default=steve")  steve
                    | ,
                    a(href="/avatars/0?default=alex")  alex
                    | , or a custom URL.
                tr
                  td helm
                  td null
                  td
                  td Apply the "second" layer (hat) to the avatar.

          section
            a(id="avatar-examples", class="anchor")
            a(href="#avatar-examples")
              h4 Avatar Examples
            .code
              #avatar-example-1.example-wrapper
                .example #{domain}/avatars/jeb_
                p.preview Jeb's avatar
              #avatar-example-2.example-wrapper
                .example #{domain}/avatars/jeb_?helm
                p.preview Jeb's avatar with helm
              #avatar-example-3.example-wrapper
                .example #{domain}/avatars/jeb_?size=128
                p.preview Jeb's avatar, 128 × 128
              #avatar-example-4.example-wrapper
                .example #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6
                p.preview Jeb's avatar by UUID
              #avatar-example-5.example-wrapper
                .example #{domain}/avatars/jeb_?default=alex
                p.preview Jeb's avatar, or fall back to alex <i>(this example assumes jeb_ does not exist)</i>
              #avatar-example-6.example-wrapper
                .example #{domain}/avatars/jeb_?default=https://i.imgur.com/ocJVWAc.png
                p.preview
                  | Jeb's avatar, or fall back to a custom image <i>(this example assumes jeb_ does not exist)</i>
              p.preview-placeholder
                | Hover over the example URLs above for a preview!
            .preview-background


        section
          a(id="renders" class="anchor")
          a(href="#renders")
            h3 3D Renders
          p
            | Crafatar also provides support for 3D renders of Minecraft skins.<br>
            | Please note that <b>this feature is currently beta</b>!<br>
            | Replace
            mark.green  userid
            |  with a Mojang <b>UUID</b> or <b>username</b> to get a render of the skin.
            | The <b>head</b> render type returns a render of the skin's head.
            span.code
              | #{domain}/renders/head/
              mark.green userid
            | The <b>body</b> render returns a render of the entire skin.
            span.code
              | #{domain}/renders/body/
              mark.green userid

          section
            a(id="render-parameters" class="anchor")
            a(href="#render-parameters")
              h4 Render Parameters
            table(class="table table-striped")
              thead
                tr
                  td parameter
                  td type
                  td default
                  td description
              tbody
                tr
                  td scale
                  td integer
                  td #{config.default_scale}. The actual size differs between the type of render.
                  td The scale factor of the image #{config.min_scale} - #{config.max_scale}.
                tr
                  td helm
                  td null
                  td
                  td Apply the "second" layer (hat) to the avatar.

          section
            a(id="render-examples", class="anchor")
            a(href="#render-examples")
              h4 Render Examples
            .code
              #render-example-1.example-wrapper
                .example #{domain}/renders/body/jeb_?helm&amp;scale=4
                p.preview Jeb's body, with helmet, scale 4
              #render-example-2.example-wrapper
                .example #{domain}/renders/head/853c80ef3c3749fdaa49938b674adae6?scale=8
                p.preview Jeb's head, by UUID, scale 8
              p.preview-placeholder
                | Hover over the example URLs above for a preview!
            .preview-background


        section
          a(id="skins" class="anchor")
          a(href="#skins")
            h3 Skins
          p
            | You can also get the full skin file of a player.<br>
            | Replace
            mark.green  userid
            |  with a Mojang <b>UUID</b> or <b>username</b> to get the related skin.<br>
            | The user's skin is returned, or the default image is served.<br>
            | You can use the default parameter here as well.
            span.code
              | #{domain}/skins/
              mark.green userid

          section
            a(id="skin-parameters" class="anchor")
            a(href="#skin-parameters")
              h4 Skin Parameters
            table(class="table table-striped")
              thead
                tr
                  td parameter
                  td type
                  td default
                  td description
              tbody
                tr
                  td default
                  td string
                  td
                    | The standard value is calculated based on the UUID (even = alex, odd = steve).<br>
                    | Usernames always default to steve.
                  td
                    | The image to be served when the userid has no skin.<br>
                    | Valid options are
                    a(href="/skins/0?default=steve")  steve
                    | ,
                    a(href="/skins/0?default=alex")  alex
                    | , or a custom URL.

          section
            a(id="skin-examples", class="anchor")
            a(href="#skin-examples")
              h4 Skin Examples
            .code
              #skin-example-1.example-wrapper
                .example #{domain}/skins/jeb_
                p.preview Jeb's skin
              #skin-example-2.example-wrapper
                .example #{domain}/skins/jeb_?default=alex
                p.preview Jeb's skin, or fall back to alex <i>(this example assumes jeb_ does not exist)</i>
              p.preview-placeholder
                | Hover over the example URLs above for a preview!
            .preview-background

        section
          a(id="capes" class="anchor")
          a(href="#capes")
            h3 Capes
          p
            | A cape endpoint is also available to get the active cape of a user.<br>
            | Replace
            mark.green  userid
            |  with a Mojang <b>UUID</b> or <b>username</b> to get the related cape.<br>
            | The user's cape is returned, otherwise a 404 is returned.<br>
            .code
              | #{domain}/capes/
              mark.green userid

          section
            a(id="cape-examples", class="anchor")
            a(href="#cape-examples")
              h4 Cape Examples
            .code
              #cape-example-1.example-wrapper
                .example #{domain}/capes/Dinnerbone
                p.preview Dinnerbone's Cape <i>Mojang capes are not transparent...</i>
              #cape-example-2.example-wrapper
                .example #{domain}/capes/md_5
                p.preview md_5's Cape
              p.preview-placeholder
                | Hover over the example URLs above for a preview!
            .preview-background

        section
          a(id="meta" class="anchor")
          a(href="#meta")
            h2 Meta

          section
            a(id="meta-cors" class="anchor")
            a(href="#meta-cors")
              h3 CORS
            p
              | Crafatar supports CORS so you can make AJAX request from within the browser!

          section
            a(id="meta-http-headers" class="anchor")
            a(href="#meta-http-headers")
              h3 HTTP Headers
            p
              | Responses come with these HTTP headers, useful for debugging.<br>
              | Please note that these headers are cached by CloudFlare <small>(CF-Cache-Status: HIT)</small>.

            section
              a(id="meta-response-time" class="anchor")
              a(href="#meta-response-time")
                h4 Response-Time
              p The time, in milliseconds, it took Crafatar to process the request.

            section
              a(id="meta-x-storage-type" class="anchor")
              a(href="#meta-x-storage-type")
                h4 X-Storage-Type
              p Details about how the requested image was stored on the server
              ul
                li <b>none</b>: No external requests. Cached: User has no skin.
                li <b>cached</b>: No external requests. Skin cached and stored locally.
                li
                  | <b>checked</b>: 1 external request. Skin cached, checked for updates, no skin downloaded.<br>
                  | This happens either when the user removed their skin or when it didn't change.
                li <b>downloaded</b>: 2 external requests. First request or skin changed, skin downloaded.
                li
                  | <b>server error</b>: This can happen, for example, when Mojang's servers are down.<br>
                  | If possible, a cached image is served instead.
                li
                  | <b>user error</b>: You have done something wrong, such as requesting a malformed userid.<br>
                  | Check the response body for details.
            section
              a(id="meta-x-request-id" class="anchor")
              a(href="#meta-x-request-id")
                h4 X-Request-ID
              p
                | The internal ID assigned to this request.<br>
                | If you think something is wrong with your request, please <a href="#contact">contact us</a> and provide this ID.

          section
            a(id="meta-about-usernames" class="anchor")
            a(href="#meta-about-usernames")
              h3 About Usernames
            p
              | We strongly advise you to use UUIDs instead of usernames in production.<br>
              | Usernames are deprecated by Mojang and you should only use usernames for testing.<br>
              | You don't have to change anything when using UUIDs and someone changes their Username.<br>
              | Malformed usernames are rejected.

          section
            a(id="meta-about-uuids" class="anchor")
            a(href="#meta-about-uuids")
              h3 About UUIDs
            p
              | UUIDs may use the blank or dashed format.<br>
              | Malformed UUIDs are rejected.

          section
            a(id="meta-about-caching" class="anchor")
            a(href="#meta-about-caching")
              h3 About Caching
            p
              | Crafatar caches skins for #{config.local_cache_time/60} minutes before checking for skin changes.<br>
              | Images are cached in your browser for #{config.browser_cache_time/60} minutes until a new request to Crafatar is made.<br>
              | When you changed your skin you can try clearing your browser cache to see the change faster.


        section
          a(id="contact" class="anchor")
          a(href="#contact")
            h2 Contact
          ul
            li Follow us on twitter <a href="https://twitter.com/crafatar" target="_blank">@crafatar</a>
            li Open an issue <a href="https://github.com/crafatar/crafatar/issues" target="_blank">on GitHub</a>
            li <a href="https://webchat.esper.net/?channels=crafatar" target="_blank">Join us</a> in #crafatar on irc.esper.net

    footer
      hr
      p(class="pull-right") Copyright Crafatar #{new Date().getFullYear()}


  // preload hover images
  img.preload(src="/avatars/020242a17b9441799eff511eea1221da?size=64", alt="preloaded image")
  img.preload(src="/avatars/020242a17b9441799eff511eea1221da?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/069a79f444e94726a5befca90e38aaf5?size=64", alt="preloaded image")
  img.preload(src="/avatars/0?default=alex", alt="preloaded image")
  img.preload(src="/avatars/0?default=https%3A%2F%2Fi.imgur.com%2FocJVWAc.png", alt="preloaded image")
  img.preload(src="/avatars/0ea8eca3dbf647cc9d1ac64551ca975c?size=64", alt="preloaded image")
  img.preload(src="/avatars/0ea8eca3dbf647cc9d1ac64551ca975c?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/1c1bd09a6a0f4928a7914102a35d2670?size=64", alt="preloaded image")
  img.preload(src="/avatars/1c1bd09a6a0f4928a7914102a35d2670?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/2d5aa9cdaeb049189930461fc9b91cc5?size=64", alt="preloaded image")
  img.preload(src="/avatars/2d5aa9cdaeb049189930461fc9b91cc5?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/4566e69fc90748ee8d71d7ba5aa00d20?size=64", alt="preloaded image")
  img.preload(src="/avatars/4566e69fc90748ee8d71d7ba5aa00d20?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/61699b2ed3274a019f1e0ea8c3f06bc6?size=64", alt="preloaded image")
  img.preload(src="/avatars/61699b2ed3274a019f1e0ea8c3f06bc6?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/696a82ce41f44b51aa31b8709b8686f0?size=64", alt="preloaded image")
  img.preload(src="/avatars/696a82ce41f44b51aa31b8709b8686f0?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/7125ba8b1c864508b92bb5c042ccfe2b?size=64", alt="preloaded image")
  img.preload(src="/avatars/7125ba8b1c864508b92bb5c042ccfe2b?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/7d043c7389524696bfba571c05b6aec0?size=64", alt="preloaded image")
  img.preload(src="/avatars/7d043c7389524696bfba571c05b6aec0?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/853c80ef3c3749fdaa49938b674adae6", alt="preloaded image")
  img.preload(src="/avatars/853c80ef3c3749fdaa49938b674adae6?size=64", alt="preloaded image")
  img.preload(src="/avatars/853c80ef3c3749fdaa49938b674adae6?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/9769ecf6331448f3ace67ae06cec64a3?size=64", alt="preloaded image")
  img.preload(src="/avatars/9769ecf6331448f3ace67ae06cec64a3?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/ae795aa86327408e92ab25c8a59f3ba1?size=64", alt="preloaded image")
  img.preload(src="/avatars/ae795aa86327408e92ab25c8a59f3ba1?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/af74a02d19cb445bb07f6866a861f783?size=64", alt="preloaded image")
  img.preload(src="/avatars/af74a02d19cb445bb07f6866a861f783?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/b05881186e75410db2db4d3066b223f7?size=64", alt="preloaded image")
  img.preload(src="/avatars/b05881186e75410db2db4d3066b223f7?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/b9583ca43e64488a9c8c4ab27e482255?size=64", alt="preloaded image")
  img.preload(src="/avatars/b9583ca43e64488a9c8c4ab27e482255?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/c9b54008fd8047428b238787b5f2401c?size=64", alt="preloaded image")
  img.preload(src="/avatars/c9b54008fd8047428b238787b5f2401c?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/d8f9a4340f2d415f9acfcd70341c75ec?size=64", alt="preloaded image")
  img.preload(src="/avatars/d8f9a4340f2d415f9acfcd70341c75ec?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/e6b5c088068044df9e1b9bf11792291b?size=64", alt="preloaded image")
  img.preload(src="/avatars/e6b5c088068044df9e1b9bf11792291b?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/f8cdb6839e9043eea81939f85d9c5d69?size=64", alt="preloaded image")
  img.preload(src="/avatars/f8cdb6839e9043eea81939f85d9c5d69?size=64&helm", alt="preloaded image")
  img.preload(src="/avatars/jeb_", alt="preloaded image")
  img.preload(src="/avatars/jeb_?helm", alt="preloaded image")
  img.preload(src="/avatars/jeb_?size=128", alt="preloaded image")
  img.preload(src="/capes/Dinnerbone", alt="preloaded image")
  img.preload(src="/capes/md_5", alt="preloaded image")
  img.preload(src="/renders/body/jeb_?helm&scale=4", alt="preloaded image")
  img.preload(src="/renders/head/853c80ef3c3749fdaa49938b674adae6?scale=8", alt="preloaded image")
  img.preload(src="/skins/0?default=alex", alt="preloaded image")
  img.preload(src="/skins/jeb_", alt="preloaded image")