Verified Commit 7aff3862 authored by Aral Balkan's avatar Aral Balkan
Browse files

Progressively enhance page to remove instructions for other platforms

parent ee90c2d2
......@@ -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 {
......
......@@ -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>
......
......@@ -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.
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment