Style noscript message, update and credit icons

theory · Nov 1, 2024 · 59e1002 · 59e1002
1 parent 2690136
commit 59e1002
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 35 deletions.
diff --git a/README.md b/README.md
@@ -50,8 +50,8 @@ field will contain the JSON object used in examples from [RFC 9535].
 
 Copyright (c) 2024 David E. Wheeler. Distributed under the [MIT License].
 
-Based on [Goldmark Playground] the [serde_json_path Sandbox], both distributed
-under the [MIT License].
+Based on [Goldmark Playground] the [serde_json_path Sandbox], with icons from
+[Boxicons], all distributed under the [MIT License].
 
   [Go JSONPath Playground]: https://theory.github.io/jsonpath/playground
   [Go RFC 9535 JSONPath]: https://pkg.go.dev/github.com/theory/jsonpath
@@ -63,3 +63,4 @@ under the [MIT License].
   [privacy statement]: https://docs.github.com/en/site-policy/privacy-policies/github-general-privacy-statement
   [RFC 9535]: https://www.rfc-editor.org/rfc/rfc9535.html
   [MIT License]: https://opensource.org/license/mit
+  [Boxicons]: https://boxicons.com
diff --git a/src/index.html b/src/index.html
@@ -150,35 +150,17 @@
     <h1>Go JSONPath Playground</h1>
     <div>
       <button type="button" id="btn-help" title="JSONPath expression cheat sheet">
-        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="18" width="18"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M12 6a3.939 3.939 0 0 0-3.934 3.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626a9.208 9.208 0 0 0-.691.599c-.998.997-1.027 2.056-1.027 2.174V15h2l-.001-.633c.001-.016.033-.386.441-.793.15-.15.339-.3.535-.458.779-.631 1.958-1.584 1.958-3.182A3.937 3.937 0 0 0 12 6zm-1 10h2v2h-2z" />
-          <path
-            d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z" />
-        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" style="fill: currentcolor;transform: ;msFilter:;"><path d="M12 6a3.939 3.939 0 0 0-3.934 3.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626a9.208 9.208 0 0 0-.691.599c-.998.997-1.027 2.056-1.027 2.174V15h2l-.001-.633c.001-.016.033-.386.441-.793.15-.15.339-.3.535-.458.779-.631 1.958-1.584 1.958-3.182A3.937 3.937 0 0 0 12 6zm-1 10h2v2h-2z"></path><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"></path></svg>
       </button>
       <button type="button" id="btn-info" title="About the Go JSONPath Playground">
-        <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="18" width="18"
-          xmlns="http://www.w3.org/2000/svg">
-          <path
-            d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z">
-          </path>
-          <path d="M11 11h2v6h-2zm0-4h2v2h-2z"></path>
-        </svg>
+        <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" style="fill: currentcolor;transform: ;msFilter:;"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z"></path><path d="M11 11h2v6h-2zm0-4h2v2h-2z"></path></svg>
       </button>
     </div>
   </header>
   <details id="about">
     <summary>About</summary>
     <h2>
-      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z">
-        </path>
-        <path d="M11 11h2v6h-2zm0-4h2v2h-2z"></path>
-      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill:currentcolor; transform: ;msFilter:;"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"></path></svg>
       About
     </h2>
     <p>This is the playground for <strong>github.com/theory/jsonpath</strong>, a Go package that executes <a
@@ -195,13 +177,7 @@ <h2>
   <details id="help">
     <summary>JSONPath Expressions</summary>
     <h2>
-      <svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 24 24" height="1em" width="1em"
-        xmlns="http://www.w3.org/2000/svg">
-        <path
-          d="M12 6a3.939 3.939 0 0 0-3.934 3.934h2C10.066 8.867 10.934 8 12 8s1.934.867 1.934 1.934c0 .598-.481 1.032-1.216 1.626a9.208 9.208 0 0 0-.691.599c-.998.997-1.027 2.056-1.027 2.174V15h2l-.001-.633c.001-.016.033-.386.441-.793.15-.15.339-.3.535-.458.779-.631 1.958-1.584 1.958-3.182A3.937 3.937 0 0 0 12 6zm-1 10h2v2h-2z" />
-        <path
-          d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z" />
-      </svg>
+      <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: currentcolor;transform: ;msFilter:;"><path d="M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm1 16h-2v-2h2v2zm.976-4.885c-.196.158-.385.309-.535.459-.408.407-.44.777-.441.793v.133h-2v-.167c0-.118.029-1.177 1.026-2.174.195-.195.437-.393.691-.599.734-.595 1.216-1.029 1.216-1.627a1.934 1.934 0 0 0-3.867.001h-2C8.066 7.765 9.831 6 12 6s3.934 1.765 3.934 3.934c0 1.597-1.179 2.55-1.958 3.181z"></path></svg>
       JSONPath Expressions
     </h2>
     <table>
@@ -271,9 +247,18 @@ <h2>
       </tbody>
     </table>
   </details>
-  <section id="message">
-    <noscript class="warn">JavaScript must be enabled to run this app.</noscript>
-  </section>
+  <noscript>
+    <div class="warn">
+      <h2>
+        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" style="fill: currentcolor;transform: ;msFilter:;"><path d="M16.707 2.293A.996.996 0 0 0 16 2H8a.996.996 0 0 0-.707.293l-5 5A.996.996 0 0 0 2 8v8c0 .266.105.52.293.707l5 5A.996.996 0 0 0 8 22h8c.266 0 .52-.105.707-.293l5-5A.996.996 0 0 0 22 16V8a.996.996 0 0 0-.293-.707l-5-5zM13 17h-2v-2h2v2zm0-4h-2V7h2v6z"></path></svg>
+        This app requires JavaScript
+      </h2>
+      <p>The Go JSONPath Playground is a stateless single-page site written in
+      JavaScript. It therefore requires JavaScript to be enabled in the
+      browser.</p>
+      <p>No data is stored except in the Permalink URL.</p>
+    </div>
+  </noscript>
   <div id="fluid">
     <input id="path" placeholder="Enter a JSONPath query…" />
     <div id="go">

diff --git a/src/play.css b/src/play.css
@@ -208,7 +208,7 @@ body ol,
 body dl,
 body table,
 body pre,
-body details {
+body details, .warn {
   margin-top: 0;
   margin-bottom: 16px;
 }
@@ -372,7 +372,7 @@ footer > * {
   text-decoration: none;
 }
 
-details[open] {
+details[open], .warn {
   background-color: var(--color-canvas-muted);
   padding: .75rem;
   border: 1px solid var(--color-input-bg);