update influxdb urls on window focus, exempt code blocks from being updated, added info to contributing.md

CONTRIBUTING.md

@@ -585,6 +585,24 @@ Redoc generates HTML documentation using the InfluxDB `swagger.yml`.
 For more information about generating InfluxDB API documentation, see the
 [API Documentation README](https://github.com/influxdata/docs-v2/tree/master/api-docs#readme).
 
+## InfluxDB URLs
+InfluxDB and InfluxDB cloud are accessed at different and varying URLs.
+The InfluxDB documentation customizes InfluxDB URLs inside of code blocks using
+the product / region selected by the user.
+InfluxDB URLs are configured in `/data/influxdb_urls.yml`.
+
+The default URL that is replaced inside of code blocks is `http://localhost:9999`.
+To exempt a code block from being updated, include the `{{< keep-url >}}` shortcode
+just before the code block.
+
+~~~
+{{< keep-url >}}
+```
+// This URL won't get updated
+http://localhost:9999
+```
+~~~
+
 ## New Versions of InfluxDB
 Version bumps occur regularly in the documentation.
 Each minor version has its own directory with unique content.

assets/js/influxdb-url.js

@@ -1,5 +1,7 @@
 var defaultUrl = "http://localhost:9999"
+var elementSelector = ".article--content pre:not(.preserve)"
 
+// Retrieve the selected URL from the influxdb_url session cookie
 function getUrl() {
   var currentUrl = Cookies.get('influxdb_url')
   if (typeof currentUrl == 'undefined' ) {
@@ -9,16 +11,29 @@ function getUrl() {
   }
 }
 
+// Retrieve the previously selected URL from the influxdb_prev_url session cookie
+// This is used to update URLs whenever you switch between browser tabs
+function getPrevUrl() {
+  var prevUrl = Cookies.get('influxdb_prev_url')
+  if (typeof prevUrl == 'undefined' ) {
+    return defaultUrl
+  } else {
+    return prevUrl
+  }
+}
+
+// Iterate through code blocks and update InfluxDB urls
 function updateUrls(currentUrl, newUrl) {
   if (typeof currentUrl != newUrl) {
-    $(".article--content pre").each(function() {
+    $(elementSelector).each(function() {
       $(this).html($(this).html().replace(currentUrl,  newUrl));
     });
   }
 }
 
+// Append the URL selector button to each codeblock with an InfluxDB URL
 function appendUrlSelector(currentUrl) {
-  $(".article--content pre").each(function() {
+  $(elementSelector).each(function() {
     var code = $(this).html()
     if (code.includes(currentUrl)) {
       $(this).after("<div class='select-url'><a class='url-trigger' href='#'>InfluxDB URL</a></div>")
@@ -27,24 +42,46 @@ function appendUrlSelector(currentUrl) {
   });
 }
 
+// Toggle the URL selector modal window
 function toggleModal() {
   $(".modal").fadeToggle(200).toggleClass("open")
 }
 
+// Set the selected URL radio button to :checked
 function setRadioButton(currentUrl) {
   $('input[name="influxdb-loc"][value="' + currentUrl + '"]').prop("checked", true)
 }
 
-function storeUrl(newUrl) {
+// Store the InfluxDB URL session cookies – influxdb_url and influxdb_prev_url
+function storeUrl(newUrl, prevUrl) {
+  Cookies.set('influxdb_prev_url', prevUrl)
   Cookies.set('influxdb_url', newUrl)
 }
 
+// Preserver URLs in codeblocks that come just after or are inside a div
+// with the class, .keep-url
+function addPreserve() {
+  $('.keep-url').each(function () {
+    // For code blocks with no syntax highlighting
+    $(this).next('pre').addClass('preserve')
+    // For code blocks with syntax highlighting
+    $(this).next('.highlight').find('pre').addClass('preserve')
+    // For code blocks inside .keep-url div
+    // Special use case for codeblocks generated from yaml data / frontmatter
+    $(this).find('pre').addClass('preserve')
+  })
+}
+
+// Update URLs when selected in the modal
 $('input[name="influxdb-loc"]').change(function() {
   var newUrl = $(this).val()
   updateUrls(getUrl(), newUrl)
-  storeUrl(newUrl)
+  storeUrl(newUrl, getUrl())
 })
 
+// Add the preserve tag to code blocks that shouldn't be udpated
+addPreserve()
+
 // Update URLs on load
 updateUrls(defaultUrl, getUrl())
 
@@ -54,7 +91,13 @@ appendUrlSelector(getUrl())
 // Set active radio button on page load
 setRadioButton(getUrl())
 
-// Open and close modal window
+// Update URLs whenever you focus on the browser tab
+$(window).focus(function() {
+  updateUrls(getPrevUrl(), getUrl())
+  setRadioButton(getUrl())
+});
+
+// Toggle modal window on click
 $("#modal-close, .modal-overlay, .url-trigger").click(function(e) {
   e.preventDefault()
   toggleModal()

content/v2.0/reference/flux/stdlib/experimental/csv/from.md

@@ -18,6 +18,7 @@ The experimental `csv.from()` function is an alternative to the standard
 
 _**Function type:** Input_
 
+{{< keep-url >}}
 ```js
 import "experimental/csv"
 

data/telegraf_plugins.yml

@@ -609,12 +609,13 @@ input:
 
       To collect data on an InfluxDB 2.x instance running on localhost, the configuration for the
       Prometheus input plugin would be:
-
-      ```
+      <div class="keep-url">
+      ```toml
       [[inputs.prometheus]]
-      ## An array of urls to scrape metrics from.
-      urls = ["http://localhost:9999/metrics"]
+        ## An array of urls to scrape metrics from.
+        urls = ["http://localhost:9999/metrics"]
       ```
+      </div>
     introduced: 1.8.0
     tags: [linux, macos, windows, data-stores]
 

layouts/shortcodes/keep-url.html

@@ -0,0 +1 @@
+<div class="keep-url"></div>