Added scroll to top button on docs

docs/_data/nav.yml

@@ -32,8 +32,14 @@ docsnav:
     url: preparing-media
   - page: Scheduling Shows
     url: scheduling-shows
+  - page: Playlists and Smartblocks
+    url: playlists-smartblocks
+  - page: Podcasts and Webstreams
+    url: podcasts-webstreams
   - page: Broadcasting Live
     url: live-broadcast
+  - page: LibreTime Settings
+    url: settings
   - page: Managing Users
     url: users
   - page: Listen To Your Stream

docs/_layouts/docs.html

@@ -58,6 +58,15 @@ layout: default
       </div>
     </nav>
     
+    <!-- Scroll to Top link -->
+    
+    <a class="top-link hide" href="" id="js-top">
+      <svg class="bi bi-arrow-up-circle-fill" width="4em" height="4em" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+        <path fill-rule="evenodd" d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0zm-10.646.354a.5.5 0 1 1-.708-.708l3-3a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1-.708.708L8.5 6.207V11a.5.5 0 0 1-1 0V6.207L5.354 8.354z"/>
+      </svg>
+      <span class="screen-reader-text">Back to top</span>
+    </a>
+    
     <!-- Sidebar -->
     
     <nav id="sidebar">
@@ -103,5 +112,43 @@ layout: default
     <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
     <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anonymous"></script>
+    
+    <!-- For Scroll to Top text; from https://getflywheel.com/layout/sticky-back-to-top-button-tutorial/ -->
+    <script>
+      // Set a variable for our button element.
+      const scrollToTopButton = document.getElementById('js-top');
+      
+      const scrollFunc = () => {
+        // Get the current scroll value
+        let y = window.scrollY;
+         
+        // If the scroll value is greater than the window height, let's add a class to the scroll-to-top button to show it!
+        if (y > 0) {
+          scrollToTopButton.className = "top-link show";
+        } else {
+          scrollToTopButton.className = "top-link hide";
+        }
+      };
+      window.addEventListener("scroll", scrollFunc);
+      const scrollToTop = () => {
+        // Let's set a variable for the number of pixels we are from the top of the document.
+        const c = document.documentElement.scrollTop || document.body.scrollTop;
+         
+        // If that number is greater than 0, we'll scroll back to 0, or the top of the document.
+        // We'll also animate that scroll with requestAnimationFrame:
+        // https://developer.mozilla.org/en-US/docs/Web/API/window/requestAnimationFrame
+        if (c > 0) {
+          window.requestAnimationFrame(scrollToTop);
+          // ScrollTo takes an x and a y coordinate.
+          // Increase the '10' value to get a smoother/slower scroll!
+          window.scrollTo(0, c - c / 10);
+        }
+      };
+      // When the button is clicked, run our ScrolltoTop function above!
+      scrollToTopButton.onclick = function(e) {
+        e.preventDefault();
+        scrollToTop();
+      }
+    </script>
   </body>
 </html>

docs/css/creative.min.css

@@ -243,4 +243,63 @@ padding: 10px 20px;
  width: 20%;
  height: 100%;
  background-color: #fff
+}
+
+/* Scroll to Top */
+.top-link {
+  transition: all .25s ease-in-out;
+  position: fixed;
+  bottom: 0;
+  right: 0;
+  display: inline-flex;
+   
+  cursor: pointer;
+  align-items: center;
+  justify-content: center;
+  margin: 0 3em 3em 0;
+  border-radius: 50%;
+  padding: .25em;
+  width: 80px;
+  height: 80px;
+  background-color: #F8F8F8;
+}
+
+.show {
+  visibility: visible;
+  opacity: 1;
+}
+ 
+.hide {
+  visibility: hidden;
+  opacity: 0;
+}
+
+.screen-reader-text {
+    position: absolute;
+    clip-path: inset(50%);
+    margin: -1px;
+    border: 0;
+    padding: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    word-wrap: normal !important;
+    clip: rect(1px, 1px, 1px, 1px);
+ 
+    &:focus {
+        display: block;
+        top: 5px;
+        left: 5px;
+        z-index: 100000; // Above WP toolbar
+        clip-path: none;
+        background-color: #eee;
+        padding: 15px 23px 14px;
+        width: auto;
+        height: auto;
+        text-decoration: none;
+        line-height: normal;
+        color: #444;
+        font-size: 1em;
+        clip: auto !important;
+    }
 }

docs/history-templates.md

@@ -1,4 +0,0 @@
-History Templates
------------------
-
-Coming soon.

docs/playlists-smartblocks.md

@@ -3,6 +3,12 @@ layout: docs
 title: Playlists and Smartblocks
 ---
 
+> Quick Links:
+- [Playlists](#playlists)
+- [Smartblocks](#smartblocks)
+
+# Playlists {#playlists}
+
 ## Creating a new playlist
 
 You can create a new playlist on the toolbar of the **Playlists** page.
@@ -43,6 +49,8 @@ If you want to edit the playlist content or metadata later, you can find it by *
 
 ![](img/Screenshot501-Edit_playlist_240.png)
 
+# Smartblocks {#smartblocks}
+
 ## Creating a Smartblock
 
 Smart blocks are automatically filled with media files from the LibreTime library, according to the criteria that you specify. This feature is intended to save staff time, compared to selecting items for a playlist manually, and can be used to schedule shows that operate in a consistent format.

docs/podcasts-webstreams.md

@@ -2,6 +2,11 @@
 layout: docs
 title: Podcasts and Webstreams
 ---
+> Quick Links:
+- [Podcasts](#podcasts)
+- [Webstreams](#webstreams)
+
+# Podcasts   {#podcasts}
 
 The Podcasts page allows you add subscriptions to podcasts which are often used to syndicated audio files using a URL called a RSS feed. This allows your LibreTime instance to automatically download new shows from the web.
 
@@ -33,6 +38,8 @@ A search box is available to search for episodes within the feed.
 - To delete an episode from LibreTime, select the episode and click on the red trash can on the toolbar.
 - If you would like LibreTime to automatically download the latest episodes of a podcast, make sure *Download latest episodes* is checked. This can be used in conjunction with Smartblocks and Playlists to automate downloading and scheduling shows that are received via podcast feed.
 
+# Webstreams   {#webstreams}
+
 ## Adding a webstream
 A web stream URL and metadata can be added to the LibreTime library, so that a remote stream can be searched for and scheduled to be *pulled* into a show. For example, at the top of the hour your station may pull a news report from journalists working in another studio. This is a different concept from **Master Source** and **Show Source** remote streams which are *pushed* into the LibreTime playout schedule.
 

docs/settings.md

@@ -93,6 +93,11 @@ their username on the right side of the menu bar.
 
 ----
 
+> Quick Links:
+- [General Settings](#general)
+- [Stream Settings](#stream)
+- [LibreTime Status](#status)
+
 # Stream Settings      {#stream}
 
 Global settings
@@ -176,6 +181,11 @@ Any connection problems between Liquidsoap and Icecast or SHOUTcast are shown on
 
 ------
 
+> Quick Links:
+- [General Settings](#general)
+- [Stream Settings](#stream)
+- [LibreTime Status](#status)
+
 # The Status page    {#status}
 
 On the **Settings** menu, the **Status** page provides an overview of the health and resource usage of the various