Merge pull request prettier#3562 from j-f1/patch-1

Make the playground header fit in with the rest of the site
roryokane · Dec 24, 2017 · 3ef89b5 · 3ef89b5
2 parents 5ccc213 + 9cbaecb
commit 3ef89b5
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 5 deletions.
diff --git a/website/pages/playground/index.html b/website/pages/playground/index.html
@@ -45,7 +45,9 @@
     html {
       background-color: #fafafa;
       color: #6a6a6a;
-      font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
+      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI",
+        Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans",
+        "Helvetica Neue", Arial, sans-serif;
       font-size: 12px;
       line-height: 1.25;
     }
@@ -63,7 +65,7 @@
       justify-content: space-between;
       align-items: center;
       height: 30px;
-      padding: 10px 27px;
+      padding: 11px 27px;
       background-color: #1a2b34;
       color: #e0e0e0;
       position: relative;
@@ -96,9 +98,20 @@
     }
 
     header h1 {
+      font-size: 20px;
+      display: block;
+      font-family: inherit;
+      font-weight: 400;
+      line-height: 18px;
+      position: relative;
+      z-index: 9999;
       margin: 0;
-      font-size: 18px;
-      font-weight: normal;
+    }
+
+    #version {
+      font-size: 0.5em;
+      line-height: 0;
+      opacity: 0.5;
     }
 
     .links {

diff --git a/website/static/playground.js b/website/static/playground.js
@@ -83,7 +83,25 @@ window.onload = function() {
   worker.onmessage = function(message) {
     if (prettierVersion === "?") {
       prettierVersion = message.data.version;
-      document.getElementById("version").textContent = prettierVersion;
+
+      var link = document.createElement("a");
+      var match = prettierVersion.match(/^pr-(\d+)$/);
+      if (match) {
+        link.href = "https://github.com/prettier/prettier/pull/" + match[1];
+        link.textContent = "PR #" + match[1];
+      } else {
+        if (prettierVersion.match(/\.0$/)) {
+          link.href =
+            "https://github.com/prettier/prettier/releases/tag/" +
+            prettierVersion;
+        } else {
+          link.href =
+            "https://github.com/j-f1/forked-prettier/blob/master/CHANGELOG.md#" +
+            prettierVersion;
+        }
+        link.textContent = "v" + prettierVersion;
+      }
+      document.getElementById("version").appendChild(link);
     }
     if (outputEditor && docEditor && astEditor) {
       outputEditor.setValue(message.data.formatted);