diff --git a/lib/public/stylesheets/style.css b/lib/public/stylesheets/style.css index bb3200f..c80312f 100644 --- a/lib/public/stylesheets/style.css +++ b/lib/public/stylesheets/style.css @@ -27,6 +27,7 @@ a.forkme { -webkit-transform: rotate(45deg) translate(62px); transform: rotate(45deg) translate(62px); } + a.forkme:hover { color: #ddd; text-decoration: none; @@ -46,13 +47,39 @@ a.sponsor { font-size: 1rem; } -mark.green { +#documentation .row { + background: #eee; + border: 1px solid transparent; + border-radius: 0.25rem; +} + +#documentation .row .col-md-2 { + text-align: center; +} + +#documentation .row > div { + padding: 15px; +} + +mark { background: inherit; - color: #008000; font-weight: bold; padding: 0; } +mark.green { + color: #080; +} + +mark.blue { + color: #08f; +} + +span[title] { + cursor: help; + text-decoration: underline dotted; +} + thead { font-weight: bold; } @@ -71,13 +98,10 @@ h1 { } h2 { - font-size: 1.3rem; -} - -h3 { margin-top: 2em; } + h4 { margin-top: 1em; } @@ -96,109 +120,6 @@ h4 { position: relative; } -.code .example { - cursor: text; -} - -.code .example:hover { - color: #000; - text-decoration: underline; -} - -.preview-background { - background: #eee; - height: 220px; -} - -.code .example-wrapper .preview, .code .preview-placeholder { - display: none; - left: 0; - right: 0; - position: absolute; - bottom: -260px; - padding-left: 10px; - height: 220px; - background-position: 10px center; - background-repeat: no-repeat; - font-size: 14px; - font-family: "Helvetica Neue", Arial, sans-serif; - font-weight: 300; - color: #666; -} - -.code .preview-placeholder { - display: block; - font-weight: bold; - line-height: 200px; -} - -.code .preview-placeholder:hover { - /* fixes glitchy blinking */ - display: block !important; -} - -.code:hover .preview-placeholder { - display: none; -} - -.code .example-wrapper .preview i { - color: #aaa; -} - -.code .example-wrapper:hover .preview { - display: block; -} - -#avatar-example-1:hover .preview { - background-image: url("/avatars/853c80ef3c3749fdaa49938b674adae6"); -} -#avatar-example-2:hover .preview { - background-image: url("/avatars/853c80ef3c3749fdaa49938b674adae6?helm"); -} -#avatar-example-3:hover .preview { - background-image: url("/avatars/853c80ef3c3749fdaa49938b674adae6?size=128"); -} -#avatar-example-4:hover .preview { - background-image: url("/avatars/853c80ef3c3749fdaa49938b674adae6"); -} -#avatar-example-5:hover .preview { - background-image: url("/avatars/0?default=mhf_alex"); -} -#avatar-example-6:hover .preview { - background-image: url("/avatars/0?default=https%3A%2F%2Fi.imgur.com%2FocJVWAc.png"); -} - -#render-example-1:hover .preview { - background-image: url("/renders/body/853c80ef3c3749fdaa49938b674adae6?helm&scale=4"); -} -#render-example-2:hover .preview { - background-image: url("/renders/head/853c80ef3c3749fdaa49938b674adae6?scale=8"); -} - -#skin-example-1:hover .preview { - background-image: url("/skins/853c80ef3c3749fdaa49938b674adae6"); -} -#skin-example-2:hover .preview { - background-image: url("/skins/0?default=mhf_alex"); -} - -#cape-example-1:hover .preview { - background-image: url("/capes/61699b2ed3274a019f1e0ea8c3f06bc6"); -} -#cape-example-2:hover .preview { - background-image: url("/capes/af74a02d19cb445bb07f6866a861f783"); -} - -img.preload { - /* - preload hover images - browsers don't load 0x0 images - */ - position: fixed; - top: -9999px; - left: -9999px; -} - .jumbotron { padding: 1em 0 3em; } @@ -282,4 +203,4 @@ img.preload { .avatar.flipped { -webkit-transform: rotate(180deg); transform: rotate(180deg); -} +} \ No newline at end of file diff --git a/lib/views/index.html.ejs b/lib/views/index.html.ejs index 7b828ea..2f5bca1 100644 --- a/lib/views/index.html.ejs +++ b/lib/views/index.html.ejs @@ -5,7 +5,7 @@ Crafatar - + <%# FIXME: Use CDN %> @@ -30,6 +30,7 @@

A blazing fast API for Minecraft faces!

+ <%# These are shuffled by JS %>
@@ -63,219 +64,146 @@
-

Documentation

-
-
-

Avatars

-
<%= domain %>/avatars/uuid +
+

Avatars

+
+
+ jeb_'s avatar
-
-

Avatar Parameters

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
parametertypedefaultdescription
sizeinteger<%= config.avatars.default_size %>The size of the image in pixels, <%= config.avatars.min_size %> - <%= config.avatars.max_size%>.
defaultstringThe standard value is calculated based on the UUID (even = MHF_Alex, odd = MHF_Steve).
- Usernames always default to MHF_Steve.
The image to be served when the player has no skin.
- Valid options are any name or uuid, including MHF_Steve and MHF_Alex, or a custom URL.
helmnullApply the "second" layer (hat) to the avatar.
-
-
-

Avatar Examples

+
-
-
<%= domain %>/avatars/853c80ef3c3749fdaa49938b674adae6
-

Jeb's avatar

-
-
-
<%= domain %>/avatars/853c80ef3c3749fdaa49938b674adae6?helm
-

Jeb's avatar with helm

-
-
-
<%= domain %>/avatars/853c80ef3c3749fdaa49938b674adae6?size=128
-

Jeb's avatar, 128 × 128

-
-
-
<%= domain %>/avatars/853c80ef3c3749fdaa49938b674adae6
-

Jeb's avatar by UUID

-
-
-
<%= domain %>/avatars/853c80ef3c3749fdaa49938b674adae6?default=MHF_Alex
-

Jeb's avatar, or fall back to MHF_Alex (this example assumes jeb_ does not exist)

-
-
-
<%= domain %>/avatars/853c80ef3c3749fdaa49938b674adae6?default=https%3A%2F%2Fi.imgur.com%2FocJVWAc.png
-

Jeb's avatar, or fall back to a custom image (this example assumes jeb_ does not exist)

-
-

Hover over the example URLs above for a preview!

+ <%= domain %>/avatars/uuid
-
-
-
-
-

3D Renders

-

Crafatar also provides support for 3D renders of Minecraft skins.
- Please note that this feature is currently beta!
- The head render type returns a render of the skin's head.<%= domain %>/renders/head/uuidThe body render returns a render of the entire skin.<%= domain %>/renders/body/uuid

-
-

Render Parameters

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
parametertypedefaultdescription
scaleinteger<%= config.renders.default_scale %>. The actual size differs between the type of render.The scale factor of the image <%= config.renders.min_scale %> - <%= config.renders.max_scale %>.
helmnullApply the "second" layer (hat) to the avatar.
defaultstringThe standard value is calculated based on the UUID (even = MHF_Alex, odd = MHF_Steve).
- Usernames always default to MHF_Steve.
The image to be served when the uuid has no skin.
- Valid options are any uuid, including MHF_Steve and MHF_Alex, or a custom URL.
-
-
-

Render Examples

+

Accepted parameters: size, helm, default.

+
+
+ + +
+

Head Renders

+
+
+ jeb_'s head +
+
-
-
<%= domain %>/renders/body/853c80ef3c3749fdaa49938b674adae6?helm&scale=4
-

Jeb's body, with helmet, scale 4

-
-
-
<%= domain %>/renders/head/853c80ef3c3749fdaa49938b674adae6?scale=8
-

Jeb's head, by UUID, scale 8

-
-

Hover over the example URLs above for a preview!

+ <%= domain %>/renders/head/uuid
-
-
- -
-

Skins

-

You can also get the full skin file of a player.
- The user's skin is returned, or the default image is served.
- You can use the default parameter here as well.<%= domain %>/skins/uuid

-
-

Skin Parameters

- - - - - - - - - - - - - - - - - -
parametertypedefaultdescription
defaultstringThe standard value is calculated based on the UUID (even = MHF_Alex, odd = MHF_Steve).
- Usernames always default to MHF_Steve.
The image to be served when the uuid has no skin.
- Valid options are any uuid, including MHF_Steve and MHF_Alex, or a custom URL.
-
-
-

Skin Examples

+

Accepted parameters: scale, helm, default.

+ + +
+ +
+

Body Renders

+
+
+ jeb_'s body +
+
-
-
<%= domain %>/skins/853c80ef3c3749fdaa49938b674adae6
-

Jeb's skin

-
-
-
<%= domain %>/skins/853c80ef3c3749fdaa49938b674adae6?default=MHF_Alex
-

Jeb's skin, or fall back to MHF_Alex (this example assumes jeb_ does not exist)

-
-

Hover over the example URLs above for a preview!

+ <%= domain %>/renders/body/uuid
-
-
-
-
-

Capes

-

A cape endpoint is also available to get the active cape of a user.
- The user's cape is returned, otherwise a 404 is returned.
-

<%= domain %>/capes/uuid +

Accepted parameters: scale, helm, default.

+
+ +
+ +
+

Skins

+
+
+ jeb_'s skin +
+
+
+ <%= domain %>/skins/uuid
+

Accepted parameters: default.

+
+
+
+ +
+

Capes

+
+
+ jeb_'s cape +
+
+
+ <%= domain %>/capes/uuid +
+

Accepted parameters: default.

+
+
+
+ +
+ +
+

Meta

+

+ In the examples above, you can generally use usernames instead of uuid. However, apart from the special cases MHF_Steve and MHF_Alex this is discouraged as explained below.
+ You can append .png or any other file extension to the URL path if you like to, but all images are PNG. +

+ +
+

URL Parameters

+

+ You can tweak images using query string parameters.
+ Example: <%= domain %>/avatars/853c80ef3c3749fdaa49938b674adae6?size=4&default=MHF_Steve&helm

-
-

Cape Examples

-
-
-
<%= domain %>/capes/61699b2ed3274a019f1e0ea8c3f06bc6
-

Dinnerbone's Cape Mojang capes are not transparent...

-
-
-
<%= domain %>/capes/af74a02d19cb445bb07f6866a861f783
-

md_5's Cape

-
-

Hover over the example URLs above for a preview!

-
-
-
+ +

+ +
+

About UUIDs

+

UUIDs may be any valid Mojang UUID in the blank or dashed format.

+

Malformed UUIDs are rejected.

-
-

Meta

-
-

CORS

-

Crafatar supports CORS so you can make AJAX request from within the browser!

-
-
-

HTTP Headers

-

Responses come with these HTTP headers, useful for debugging.
- Please note that these headers are cached by CloudFlare (CF-Cache-Status: HIT).

-
-

Response-Time

-

The time, in milliseconds, it took Crafatar to process the request.

-
-
-

X-Storage-Type

-

Details about how the requested image was stored on the server

+ +
+

About Usernames

+

+ We strongly advise you to use UUIDs instead of usernames! UUIDs never change while usernames do.
+ Looking up players by username has officially been deprecated by Mojang ever since UUIDs were introduced.
+ Crafatar uses a legacy API to retrieve skins for usernames that updates very slowly.
+ Skins come without any details, including whether a player uses the Alex or Steve skin model.
+ Additionally, Mojang has stated that this legacy interface may be disabled anytime, causing all requests to fail. +

+

Malformed usernames are rejected.

+
+ +
+

About Caching

+

Crafatar caches skins for <%= config.caching.local / 60 %> minutes before checking for skin updates.
+ Images are cached in your browser for <%= config.caching.browser / 60 %> minutes until a new request to Crafatar is made.
+ When you changed your skin you can try clearing your browser cache to see the change faster.

+
+ +
+

CORS

+

Crafatar supports CORS, so you can make AJAX request from other sites!

+
+ +
+

HTTP Headers

+

+ Responses come with some custom HTTP headers, useful for debugging.
+ Please note that these headers are cached by CloudFlare (CF-Cache-Status: HIT). +

+ +
    +
  • + X-Storage-Type: Details about how the requested image was stored on the server
    • none: No external requests. Cached: User has no skin.
    • cached: No external requests. Skin cached and stored locally.
    • @@ -287,101 +215,28 @@
    • user error: You have done something wrong, such as requesting a malformed uuid.
      Check the response body for details.
    -
-
-

X-Request-ID

-

The internal ID assigned to this request.
- If you think something is wrong with your request, please contact us and provide this ID.

-
-
-
-

About Usernames

-

- We strongly advise you to use UUIDs instead of usernames! UUIDs never change while usernames do.
- Looking up players by username has officially been deprecated by Mojang ever since UUIDs were introduced.
- Crafatar uses a legacy API to retrieve skins for usernames that updates very slowly.
- Skins come without any details, including whether a player uses the Alex or Steve skin model.
- Additionally, Mojang has stated that this legacy interface may be disabled anytime, causing all requests to fail.
- Malformed usernames are rejected. -

-
-
-

About UUIDs

-

UUIDs may use the blank or dashed format.
- Malformed UUIDs are rejected.

-
-
-

About Caching

-

Crafatar caches skins for <%= config.caching.local / 60 %> minutes before checking for skin changes.
- Images are cached in your browser for <%= config.caching.browser / 60 %> minutes until a new request to Crafatar is made.
- When you changed your skin you can try clearing your browser cache to see the change faster.

-
-
-
-

Contact

-
    -
  • Follow us on twitter @crafatar
  • -
  • Open an issue on GitHub
  • -
  • Join us in #crafatar on irc.esper.net
  • +
  • + X-Request-ID: The internal ID assigned to this request.
    + If you think something is wrong with your request, please contact us and provide this ID.
- +
+ +
+

Contact

+ +
+ - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image - preloaded image + \ No newline at end of file