Allow visitors to choose an environment by passing an env query par…

…am. (#440)

* Allow visitors to choose an environment by passing an `env` query param.

* Reconstruct entire URL and refactor a bit

* Capitalize environment name

* Undo formatting

app/app.js

@@ -76,6 +76,36 @@ if (console.log) {
   console.log('Scenic started. Publication: ' + getConfig().publicationId);
 }
 
+/**
+ * Allow visitors to choose an environment by passing an `env` query param.
+ */
+app.use((req, res, next) => {
+  const env = req.query.env;
+
+  // Skip, if `env` query param is missing or invalid.
+  if (!['prod', 'qual'].includes(env)) {
+    next();
+    return;
+  }
+
+  // Update `script` cookie.
+  res.clearCookie('script');
+  res.cookie('script', env);
+
+  // Remove `env` param from URL.
+  const params = new URLSearchParams(req.query);
+  params.delete('env');
+  const protocol = req.protocol;
+  const host = req.get('host');
+  const path = req.path;
+  const query = params
+    .toString()
+    // Remove trailing `=` character.
+    .replace(/\=$/, '');
+  const url = `${protocol}://${host}${path}?${query}`;
+  res.redirect(url);
+});
+
 /**
  * List all Articles.
  */

app/views/article.html

@@ -45,10 +45,6 @@
         background: lightyellow;
         padding: 16px;
       }
-      .comments {
-        font-size: 8px;
-        margin: 16px;
-      }
     </style>
 
     <script type="application/ld+json">

public/styles.css

@@ -362,6 +362,25 @@ body:not(.metering) #metering-controls {
   top: 50px;
 }
 
+.comments {
+  background: rgb(0 0 0 / 85%);
+  border-radius: 8px;
+  bottom: 8px;
+  font-family: sans-serif;
+  font-size: 16px;
+  left: 8px;
+  letter-spacing: 0.5px;
+  text-transform: capitalize;
+  padding: 4px 8px;
+  position: fixed;
+  z-index: 999;
+}
+
+.comments a {
+  color: white;
+  text-decoration: none;
+}
+
 @keyframes fadeIn {
   from {
     opacity: 0;