add example previews; move renders above skins; fix anchors

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 {

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).<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/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&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
-              | #{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 <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")
-            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&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
+          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(id="meta" class="anchor")
-          section(id="meta-http-headers" class="anchor")
+        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.<br>
               | 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")
                 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
                   | <b>error</b>: This can happen, for example, when Mojang's servers are down.<br>
                   | 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.<br>
               | 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.<br>
               | 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