diff --git a/public/stylesheets/style.css b/public/stylesheets/style.css
index f7bd74a..c58279e 100644
--- a/public/stylesheets/style.css
+++ b/public/stylesheets/style.css
@@ -87,6 +87,76 @@ h4 {
border-left: 3px solid;
border-radius: 0px 4px 4px 0px;
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 {
diff --git a/views/index.jade b/views/index.jade
index 96c8404..ba21143 100644
--- a/views/index.jade
+++ b/views/index.jade
@@ -15,7 +15,8 @@ block content
section(id="documentation")
h2 Documentation
.row
- section(id="avatars", class="anchor")
+ section
+ a(id="avatars", class="anchor")
a(href="#avatars")
h3 Avatars
| Replace
@@ -25,7 +26,8 @@ block content
| #{domain}/avatars/
mark.green id
- section(id="avatars-parameters" class="anchor")
+ section
+ a(id="avatars-parameters" class="anchor")
a(href="#avatars-parameters")
h4 Avatar Parameters
table(class="table table-bordered table-striped")
@@ -44,85 +46,51 @@ block content
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 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).
| 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.
tr
td helm
- td mixed
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")
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&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.
- | Replace
- mark.green id
- | with a Mojang UUID or username to get the related skin.
- | The user's skin is returned, or the default image is served.
- | You can use the default parameter here as well.
.code
- | #{domain}/skins/
- mark.green id
+ #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 (this example assumes jeb_ does not exist)
+ #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 (this example assumes jeb_ does not exist)
+ .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).
- | 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")
- a(href="#skins-examples")
- 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")
+ section
+ a(id="renders" class="anchor")
a(href="#renders")
h3 3D Renders
p
@@ -140,7 +108,8 @@ block content
| #{domain}/renders/body/
mark.green id
- section(id="renders-parameters" class="anchor")
+ section
+ a(id="renders-parameters" class="anchor")
a(href="#renders-parameters")
h4 Render Parameters
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}.
tr
td helm
- td mixed
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")
- a(href="#renders-examples")
+ section
+ a(id="render-examples", class="anchor")
+ a(href="#render-examples")
h4 Render Examples
- .code #{domain}/renders/head/853c80ef3c3749fdaa49938b674adae6
- p Render of Jeb's Body, with helmet, by username
- .code #{domain}/renders/body/jeb_?helm
+ .code
+ #render-example-1.example-wrapper
+ .example #{domain}/renders/body/jeb_?helm&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.
+ | Replace
+ mark.green id
+ | with a Mojang UUID or username to get the related skin.
+ | The user's skin is returned, or the default image is served.
+ | 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).
+ | Usernames always default to steve.
+ td
+ | The image to be served when the id has no skin (404).
+ | 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 (this example assumes jeb_ does not exist)
+ .preview-background
+
+
+ section
+ a(id="meta" class="anchor")
+ 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.
| Please note that these headers are cached by CloudFlare (CF-Cache-Status: HIT).
- section(id="meta-response-time" class="anchor")
+ 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(id="meta-x-storage-type" class="anchor")
+ section
+ a(id="meta-x-storage-type" class="anchor")
a(href="#meta-x-storage-type")
h4 X-Storage-Type
ul
@@ -196,7 +231,8 @@ block content
| error: This can happen, for example, when Mojang's servers are down.
| 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")
h3 About Usernames
p
@@ -204,14 +240,16 @@ block content
| Usernames are deprecated by Mojang and you should only use usernames for testing.
| Malformed usernames are rejected.
- section(id="meta-about-uuids" class="anchor")
+ 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.
| Malformed UUIDs are rejected.
- section(id="meta-about-caching" class="anchor")
+ section
+ a(id="meta-about-caching" class="anchor")
a(href="#meta-about-caching")
h3 About Caching
p