Progressively enhance page to remove instructions for other platforms

css/index.css

@@ -31,7 +31,7 @@
  body, h1, h2, h3, h4, h5, h6, p, ol, ul { margin: 0; padding: 0; font-weight: normal; }
  ol, ul { list-style: none; }
  img { max-width: 100%; height: auto; }
- span { white-space: pre; } /* preserve whitespace in spans */
+ span { white-space: pre; }
 
 
 /********************************************************************************
@@ -128,6 +128,10 @@ a {
   color: #334b4c;
   text-decoration: underline;
   text-decoration-color: #CCD6CE;
+
+  /* Make the links thicker and offset them further away. */
+  text-decoration-thickness: 0.2em;
+  text-underline-offset: 0.25em;
 }
 
 a:hover {

index.html

@@ -125,13 +125,10 @@
           <h3>Install Site.js.</h3>
           <p>Launch a terminal on Linux/macOS (only use Windows Terminal on Windows) and follow along.</p>
           <p>The installation script downloads the correct Site.js binary for your platform and places it on your path</p>
-          <aside>
-            <p>(<strong>Make sure you understand what a script does before piping it into your shell.</strong> View the source of the <a href="https://should-i-pipe.it/https://sitejs.org/install">Linux and macOS</a><span class='no-js'> and </span><a href="https://should-i-pipe.it/https://sitejs.org/install.txt">Windows</a><span class='no-js'> scripts.</span>)</p>
-          </aside>
+          <aside>(<strong>Make sure you understand what a script does before piping it into your shell.</strong> View the source of the <a class='linux macos' href="https://should-i-pipe.it/https://sitejs.org/install">Linux and macOS</a><span class='no-js'> and </span><a class='windows' href="https://should-i-pipe.it/https://sitejs.org/install.txt">Windows</a> installation script<span class='no-js'>s</span>.)</aside>
 
           <aside id='copy-tip' class='tip hidden'><h3>Tip</h3><p>Click on the code samples to copy them to the clipboard.</p></aside>
 
-
           <h4 class='no-js'>Linux</h4>
           <pre class='linux'><code class='language-bash'>wget -qO- https://sitejs.org/install | bash</code></pre>
 
@@ -294,11 +291,11 @@
         <!-- ===== erroneously placing the closing parenthesis on the next line.          -->
         <pre><code class='language-js'>let counter = 0
 
-  module.exports = (request, response) => {
-    response
-      .type('html')
-      .end(`&lt;h1&gt;Hit count: ${++counter}&lt;/h1&gt;`)
-  }</code></pre>
+module.exports = (request, response) => {
+  response
+    .type('html')
+    .end(`&lt;h1&gt;Hit count: ${++counter}&lt;/h1&gt;`)
+}</code></pre>
 
         <p>If this reminds you of a route in <a href='https://expressjs.com'>Express</a>, that’s because that’s exactly what it is.</p>
 

js/index.js

@@ -46,13 +46,22 @@ if (navigator.clipboard !== undefined) {
 const userAgent = navigator.userAgent.toLowerCase()
 let currentPlatform = 'unknown'
 if (userAgent.includes('linux')) { currentPlatform = 'linux' }
-if (userAgent.includes('mac os x')) { currentPlatform = 'mac' }
+if (userAgent.includes('mac os x')) { currentPlatform = 'macos' }
 if (userAgent.includes('windows')) { currentPlatform = 'windows'}
 
 // If we know the platform, remove instructions that are not
 // relevant for the current person
 if (currentPlatform !== 'unknown') {
-
+  $$('.no-js').forEach(node => node.className='hidden')
+
+  ;['.linux', '.macos', '.windows'].forEach(className => {
+    $$(className).forEach(node => {
+      if (!node.classList.contains(currentPlatform)) {
+        console.log('hiding')
+        node.className = 'hidden'
+      }
+    })
+  })
 }
 
 // TODO: Add option to display the page as if the person was on a different platform.