add example previews; move renders above skins; fix anchors

This commit is contained in:
jomo 2015-01-03 04:06:27 +01:00
parent b40ab60d50
commit dc08e925e5
2 changed files with 190 additions and 82 deletions

View File

@ -87,6 +87,76 @@ h4 {
border-left: 3px solid; border-left: 3px solid;
border-radius: 0px 4px 4px 0px; border-radius: 0px 4px 4px 0px;
box-shadow: 0 0 1px inset; box-shadow: 0 0 1px inset;
position: relative;
}
.code .example {
cursor: pointer;
}
.code .example:hover {
color: #000;
text-decoration: underline;
}
.preview-background {
background: #eee;
height: 220px;
}
.code .example-wrapper .preview {
display: none;
width: 100%;
position: absolute;
bottom: -240px;
padding-top: 200px;
background-position: left center;
background-repeat: no-repeat;
font-size: 14px;
font-family: "Helvetica Neue", Arial, sans-serif;
font-weight: 300;
color: #666;
}
.code .example-wrapper .preview i {
color: #aaa;
}
.code .example-wrapper:hover .preview {
display: block;
}
#avatar-example-1:hover .preview {
background-image: url("/avatars/jeb_");
}
#avatar-example-2:hover .preview {
background-image: url("/avatars/jeb_?helm");
}
#avatar-example-3:hover .preview {
background-image: url("/avatars/jeb_?size=128");
}
#avatar-example-4:hover .preview {
background-image: url("/avatars/853c80ef3c3749fdaa49938b674adae6");
}
#avatar-example-5:hover .preview {
background-image: url("/avatars/0?default=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/jeb_?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/jeb_");
}
#skin-example-2:hover .preview {
background-image: url("/skins/0?default=alex");
} }
.errmsg { .errmsg {

View File

@ -15,7 +15,8 @@ block content
section(id="documentation") section(id="documentation")
h2 Documentation h2 Documentation
.row .row
section(id="avatars", class="anchor") section
a(id="avatars", class="anchor")
a(href="#avatars") a(href="#avatars")
h3 Avatars h3 Avatars
| Replace | Replace
@ -25,7 +26,8 @@ block content
| #{domain}/avatars/ | #{domain}/avatars/
mark.green id mark.green id
section(id="avatars-parameters" class="anchor") section
a(id="avatars-parameters" class="anchor")
a(href="#avatars-parameters") a(href="#avatars-parameters")
h4 Avatar Parameters h4 Avatar Parameters
table(class="table table-bordered table-striped") table(class="table table-bordered table-striped")
@ -44,85 +46,51 @@ block content
tr tr
td default td default
td string td string
td The standard value is calculated based on the UUID (even = alex, odd = steve). Usernames always default to steve. td
| The standard value is calculated based on the UUID (even = alex, odd = steve).<br>
| Usernames always default to steve.
td td
| The image to be served when the id has no skin (404).<br> | The image to be served when the id has no skin (404).<br>
| Valid options are | Valid options are
a(href="/avatars/00000000000000000000000000000000?default=steve") steve a(href="/avatars/0?default=steve") steve
| , | ,
a(href="/avatars/00000000000000000000000000000000?default=alex") alex a(href="/avatars/0?default=alex") alex
| , or a custom URL. | , or a custom URL.
tr tr
td helm td helm
td mixed
td null td null
td Apply the "second" (hat) layer to the avatar. td
td Apply the "second" layer (hat) to the avatar.
section(id="avatars-examples", class="anchor") section
a(id="avatars-examples", class="anchor")
a(href="#avatars-examples") a(href="#avatars-examples")
h4 Avatars Examples h4 Avatars Examples
p Jeb's avatar by username, default size
.code #{domain}/avatars/jeb_
p Jeb's avatar by UUID, default size
.code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6
p Jeb's avatar, 64 × 64
.code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?size=64
p Jeb's avatar, 64 × 64, with helmet
.code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?size=64&amp;helm
p Jeb's avatar, or fall back to steve
.code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?default=steve
p
| Jeb's avatar, or fall back to
a(href="https://i.imgur.com/ozszMZV.png") a custom image
.code #{domain}/avatars/853c80ef3c3749fdaa49938b674adae6?default=https%3A%2F%2Fi.imgur.com%2FozszMZV.png
section(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.
.code .code
| #{domain}/skins/ #avatar-example-1.example-wrapper
mark.green id .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>
.preview-background
section(id="skins-parameters" class="anchor")
a(href="#skins-parameters")
h4 Skin Parameters
table(class="table table-bordered 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). 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/00000000000000000000000000000000?default=steve") steve
| ,
a(href="/skins/00000000000000000000000000000000?default=alex") alex
| , or a custom URL.
section(id="skins-examples", class="anchor") section
a(href="#skins-examples") a(id="renders" class="anchor")
h4 Skins Examples
p Jeb's skin
.code #{domain}/skins/853c80ef3c3749fdaa49938b674adae6
p Jeb's skin by username
.code #{domain}/skins/jeb_
p Render of Jeb's Head
section(id="renders" class="anchor")
a(href="#renders") a(href="#renders")
h3 3D Renders h3 3D Renders
p p
@ -140,7 +108,8 @@ block content
| #{domain}/renders/body/ | #{domain}/renders/body/
mark.green id mark.green id
section(id="renders-parameters" class="anchor") section
a(id="renders-parameters" class="anchor")
a(href="#renders-parameters") a(href="#renders-parameters")
h4 Render Parameters h4 Render Parameters
table(class="table table-bordered table-striped") table(class="table table-bordered table-striped")
@ -158,31 +127,97 @@ block content
td The scale factor of the image #{config.min_scale} - #{config.max_scale}. td The scale factor of the image #{config.min_scale} - #{config.max_scale}.
tr tr
td helm td helm
td mixed
td null td null
td Apply the "second" (hat) layer to the avatar. td
td Apply the "second" layer (hat) to the avatar.
section(id="renders-examples", class="anchor") section
a(href="#renders-examples") a(id="render-examples", class="anchor")
a(href="#render-examples")
h4 Render Examples h4 Render Examples
.code #{domain}/renders/head/853c80ef3c3749fdaa49938b674adae6 .code
p Render of Jeb's Body, with helmet, by username #render-example-1.example-wrapper
.code #{domain}/renders/body/jeb_?helm .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
.preview-background
section(id="meta" class="anchor")
section(id="meta-http-headers" class="anchor") 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.
.code
| #{domain}/skins/
mark.green id
section
a(id="skins-parameters" class="anchor")
a(href="#skins-parameters")
h4 Skin Parameters
table(class="table table-bordered 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>
.preview-background
section
a(id="meta" class="anchor")
section
a(id="meta-http-headers" class="anchor")
a(href="#meta-http-headers") a(href="#meta-http-headers")
h3 HTTP Headers h3 HTTP Headers
p p
| Responses come with these HTTP headers, useful for debugging.<br> | 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>. | Please note that these headers are cached by CloudFlare <small>(CF-Cache-Status: HIT)</small>.
section(id="meta-response-time" class="anchor") section
a(id="meta-response-time" class="anchor")
a(href="#meta-response-time") a(href="#meta-response-time")
h4 Response-Time h4 Response-Time
p The time, in milliseconds, it took Crafatar to process the request. p The time, in milliseconds, it took Crafatar to process the request.
section(id="meta-x-storage-type" class="anchor") section
a(id="meta-x-storage-type" class="anchor")
a(href="#meta-x-storage-type") a(href="#meta-x-storage-type")
h4 X-Storage-Type h4 X-Storage-Type
ul ul
@ -196,7 +231,8 @@ block content
| <b>error</b>: This can happen, for example, when Mojang's servers are down.<br> | <b>error</b>: This can happen, for example, when Mojang's servers are down.<br>
| If possible, an outdated image is served instead. | If possible, an outdated image is served instead.
section(id="meta-about-usernames" class="anchor") section
a(id="meta-about-usernames" class="anchor")
a(href="#meta-about-usernames") a(href="#meta-about-usernames")
h3 About Usernames h3 About Usernames
p p
@ -204,14 +240,16 @@ block content
| Usernames are deprecated by Mojang and you should only use usernames for testing.<br> | Usernames are deprecated by Mojang and you should only use usernames for testing.<br>
| Malformed usernames are rejected. | Malformed usernames are rejected.
section(id="meta-about-uuids" class="anchor") section
a(id="meta-about-uuids" class="anchor")
a(href="#meta-about-uuids") a(href="#meta-about-uuids")
h3 About UUIDs h3 About UUIDs
p p
| UUIDs may use the blank or dashed format.<br> | UUIDs may use the blank or dashed format.<br>
| Malformed UUIDs are rejected. | Malformed UUIDs are rejected.
section(id="meta-about-caching" class="anchor") section
a(id="meta-about-caching" class="anchor")
a(href="#meta-about-caching") a(href="#meta-about-caching")
h3 About Caching h3 About Caching
p p