feat: add build step for docs, minor improvements

docs/index.html

@@ -16,8 +16,26 @@
     <meta name="msapplication-config" content="./icons/browserconfig.xml" />
     <meta name="theme-color" content="#ffffff" />
     <!-- Base styles of water.css, so styles don't have to wait until JS is loaded -->
-    <link rel="stylesheet" href="../dist/dark-legacy.standalone.css" />
-    <!-- Final, dynamic version of water.css, JS sets & updates href. Overwrites base styles -->
+    <link
+      rel="preload"
+      as="style"
+      href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.standalone.min.css"
+    />
+    <link
+      rel="preload"
+      as="style"
+      href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.standalone.min.css"
+      media="(prefers-color-scheme: dark)"
+    />
+    <link
+      rel="stylesheet"
+      href="https://cdn.jsdelivr.net/gh/kognise/water.css/dist/dark-legacy.min.css"
+    />
+
+    <!-- TODO: Remove once water.css v2 is hosted so the above links work -->
+    <link rel="stylesheet" href="../dark.min.css" />
+
+    <!-- Dynamic version of water.css, overwrites base styles. JavaScript sets & updates href. -->
     <link rel="stylesheet" id="js-stylesheet" />
     <!-- Custom styles for the documentation / version picker -->
     <link rel="stylesheet" href="style.css" />
@@ -64,10 +82,11 @@
       </a>
     </div>
 
+    <!-- Start interactive version picker -->
     <div id="installation" v-cloak>
       <h2>Installation</h2>
 
-      <div>
+      <div style="overflow: hidden">
         <header class="row">
           <h3>Paste this into the <code>&lt;head&gt;</code> of your HTML:</h3>
           <button type="button" @click="copyToClipboard">
@@ -85,13 +104,15 @@
 
         <h3>Version options:</h3>
         <form action="./" method="post" @submit.prevent>
-          <label>
-            <span class="emoji">🌙</span> Dark theme
+          <label title="Selected theme may be overwritten by theme settings on user's device">
             <input type="radio" value="dark" v-model="versionOptions.theme" checked name="theme" />
+            Dark theme <span class="emoji">🌙</span>
+            <span class="emoji translucent" v-if="!versionOptions.isStandalone"> / ☀</span>
           </label>
-          <label>
-            <span class="emoji">☀</span> Light theme
+          <label title="Selected theme may be overwritten by theme settings on user's device">
             <input type="radio" value="light" v-model="versionOptions.theme" name="theme" />
+            Light theme <span class="emoji">☀</span>
+            <span class="emoji translucent" v-if="!versionOptions.isStandalone"> / 🌙</span>
           </label>
           <br /><br />
           <label>
@@ -126,12 +147,14 @@
                 </template>
 
                 <template v-else>
-                  <span class="emoji" v-if="versionOptions.theme === 'dark'">🌙 / ☀</span>
-                  <span class="emoji" v-else>☀ / 🌙</span>
-                  Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings
-                  if set.
+                  <span class="emoji" v-if="versionOptions.theme === 'dark'">
+                    🌙<span class="translucent"> / ☀</span>
+                  </span>
+                  <span class="emoji" v-else>☀ <span class="translucent"> / 🌙</span></span>
+                  Defaults to {{ versionOptions.theme }}, but respects user-defined theme settings.
+                  (detected via <code>prefers-color-scheme</code>)
                   <template v-if="preferedColorScheme">
-                    Your device is currently set to {{ preferedColorScheme }} mode.
+                    <br />Your device is currently set to {{ preferedColorScheme }} mode.
                   </template>
                 </template>
               </td>
@@ -140,7 +163,7 @@
               <th>Browser support</th>
               <td>
                 <template v-if="versionOptions.isLegacy">
-                  All browsers including Internet Explorer
+                  All browsers (including Internet Explorer)
                 </template>
                 <template v-else>
                   All current browsers (<a href="https://caniuse.com/#feat=css-variables"
@@ -153,6 +176,7 @@
         </table>
       </div>
     </div>
+    <!-- End interactive version picker -->
 
     <h2 id="goals">Goals</h2>
     <ul>

docs/script.js

@@ -6,7 +6,9 @@
  * @prop {boolean} isStandalone
  */
 
-/** The base URI from where to load the CSS files. */
+/** The base URI from where the docs page loads the CSS files. */
+const DEV_BASE = '../'
+/** The base URI from where instructions show to load the CSS files. */
 const CDN_BASE = 'https://cdn.jsdelivr.net/gh/kognise/water.css/dist/'
 
 /** An object mapping the (minified + gzipped) fileSize in KB to a fileName. */
@@ -57,14 +59,20 @@ const externalElements = {
   _phImage: document.querySelector('#js-producthunt'),
   _stylesheet: document.querySelector('#js-stylesheet'),
 
+  updateStylesheet(href) {
+    this._stylesheet.href = href
+  },
+  updateProductHunt(theme) {
+    this._phImage.src = this._phImage.src.replace(/dark|light/, theme)
+  },
   /** @param {VersionOptions} options @param {'dark' | 'light'} [preferedColorScheme] */
   update(options, preferedColorScheme) {
     const { theme, isStandalone } = options
-    const href = '../dist/' + getFileName(options)
+    const href = DEV_BASE + getFileName(options)
     const visibleTheme = isStandalone ? theme : preferedColorScheme || theme
 
-    this._stylesheet.href = href
-    this._phImage.src = this._phImage.src.replace(/dark|light/, visibleTheme)
+    this.updateStylesheet(href)
+    this.updateProductHunt(visibleTheme)
   },
 }
 
@@ -78,7 +86,7 @@ new Vue({
   el: '#installation',
   filters: { capitalize: str => str.charAt(0).toUpperCase() + str.slice(1) },
   data: {
-    versionOptions: { theme: 'dark', isStandalone: true, isLegacy: false },
+    versionOptions: { theme: 'dark', isStandalone: false, isLegacy: false },
     preferedColorScheme: null,
     copyStatus: null,
   },
@@ -92,19 +100,17 @@ new Vue({
     },
   },
   created() {
-    externalElements.update(this.versionOptions, this.preferedColorScheme)
-
     createColorSchemeListener('dark', match => match && (this.preferedColorScheme = 'dark'))
     createColorSchemeListener('light', match => match && (this.preferedColorScheme = 'light'))
+
+    if (this.preferedColorScheme) externalElements.updateProductHunt(this.preferedColorScheme)
   },
   methods: {
-    async copyToClipboard() {
-      try {
-        await clipboard.writeText(this.selectedVersion.fileSnippet)
-        this.copyStatus = 'success'
-      } catch (error) {
-        this.copyStatus = 'failed'
-      }
+    copyToClipboard() {
+      Promise.resolve()
+        .then(() => clipboard.writeText(this.selectedVersion.fileSnippet))
+        .then(() => (this.copyStatus = 'success'))
+        .catch(() => (this.copyStatus = 'failed'))
       setTimeout(() => (this.copyStatus = undefined), 1000)
     },
   },

docs/style.css

@@ -45,6 +45,9 @@ html {
     BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Fira Sans, Droid Sans,
     Helvetica Neue, sans-serif;
 }
+.translucent {
+  opacity: 0.5;
+}
 
 /* For the bounce transitions of code snippet and copy success Emoji */
 .v-enter,