Add info block.

alecthomas · alecthomas · commit c86a26959c21 · 2019-07-16T22:08:09.000+10:00
diff --git a/cmd/chromad/static/index.js b/cmd/chromad/static/index.js
@@ -11,6 +11,13 @@ document.addEventListener("DOMContentLoaded", function () {
     var output = document.getElementById("output");
     var htmlCheckbox = document.getElementById("html");
 
+    (document.querySelectorAll('.notification .delete') || []).forEach(($delete) => {
+        $notification = $delete.parentNode;
+        $delete.addEventListener('click', () => {
+            $notification.parentNode.removeChild($notification);
+        });
+    });
+
     function debounce(func, wait, immediate) {
         var timeout;
         return function () {
diff --git a/cmd/chromad/templates/index.html.tmpl b/cmd/chromad/templates/index.html.tmpl
@@ -9,8 +9,7 @@
     }
 
     #output {
-      {{.Background}}
-
+      {{.Background}};
       overflow-x: scroll;
     }
 
@@ -22,10 +21,16 @@
 </head>
 <body>
 <div class="container">
-  <div class="notification is-hidden"></div>
 
   <h1 class="title">Chroma Playground</h1>
 
+  <div class="notification is-info">
+    <button class="delete"></button>
+    <a href="https://github.com/alecthomas/chroma">Chroma</a> is a general purpose syntax highlighter in pure Go.
+    It takes source code and other structured text and converts it into syntax highlighted HTML, ANSI-coloured text,
+    etc. Chroma is based heavily on Pygments, and includes translators for Pygments lexers and styles.
+  </div>
+
   <form id="chroma" method="post">
     {{ .CSRFField }}
     <div class="columns">
