crafatar/views/index.jade

extends layout

block content
  .jumbotron
      .container
        h1 Crafatar
        p A blazing fast API for Minecraft faces!
        .avatar-wrapper
          .avatar.redstone_sheep
          .avatar.jake0oo0
          .avatar.sk89q
          .avatar.md_5
          .avatar.notch
          .avatar.jeb
          .avatar.dinnerbone.flipped
          .avatar.ez
          .avatar.grumm.flipped
          .avatar.themogmimer
          .avatar.searge
          .avatar.xlson
          .avatar.krisjelbring
          .avatar.minecraftchick
          .avatar.kappe
          .avatar.marc
          .avatar.mollstam
          .avatar.evilseph
          .avatar.thinkofdeath

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

          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 id has no skin (404).<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 examples 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  id
            |  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 id
            | The <b>body</b> render returns a render of the entire skin.
            span.code
              | #{domain}/renders/body/
              mark.green id

          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 examples 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  id
            |  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 id

          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 id has no skin (404).<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 examples for a preview!
            .preview-background


        section
          a(id="meta" class="anchor")
          a(href="#meta")
            h2 Meta
          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
              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. Skin changed or unknown, downloaded.
                li
                  | <b>error</b>: This can happen, for example, when Mojang's servers are down.<br>
                  | If possible, an outdated image is served instead.

          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>
              | 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.

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


  // preload hover images
  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="/avatars/853c80ef3c3749fdaa49938b674adae6", 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="/renders/body/jeb_?helm&scale=4", alt="preloaded image")
  img.preload(src="/renders/head/853c80ef3c3749fdaa49938b674adae6?scale=8", alt="preloaded image")
  img.preload(src="/skins/jeb_", alt="preloaded image")
  img.preload(src="/skins/0?default=alex", 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/2d5aa9cdaeb049189930461fc9b91cc5?size=64", alt="preloaded image")
  img.preload(src="/avatars/2d5aa9cdaeb049189930461fc9b91cc5?size=64&helm", 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/af74a02d19cb445bb07f6866a861f783?size=64", alt="preloaded image")
  img.preload(src="/avatars/af74a02d19cb445bb07f6866a861f783?size=64&helm", 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/069a79f444e94726a5befca90e38aaf5?size=64", 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/7d043c7389524696bfba571c05b6aec0?size=64", alt="preloaded image")
  img.preload(src="/avatars/7d043c7389524696bfba571c05b6aec0?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/1c1bd09a6a0f4928a7914102a35d2670?size=64", alt="preloaded image")
  img.preload(src="/avatars/1c1bd09a6a0f4928a7914102a35d2670?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/696a82ce41f44b51aa31b8709b8686f0?size=64", alt="preloaded image")
  img.preload(src="/avatars/696a82ce41f44b51aa31b8709b8686f0?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/7125ba8b1c864508b92bb5c042ccfe2b?size=64", alt="preloaded image")
  img.preload(src="/avatars/7125ba8b1c864508b92bb5c042ccfe2b?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/020242a17b9441799eff511eea1221da?size=64", alt="preloaded image")
  img.preload(src="/avatars/020242a17b9441799eff511eea1221da?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/f8cdb6839e9043eea81939f85d9c5d69?size=64", alt="preloaded image")
  img.preload(src="/avatars/f8cdb6839e9043eea81939f85d9c5d69?size=64&helm", alt="preloaded image")