Implemented Trek Detail button

common/js/trekungen.js

@@ -11,6 +11,8 @@ const TREKS = [ 'denvegaser', 'via603', 'sierraround', 'phoever', 'amtrak8',
 const offcanvasTitle = document.querySelector('#offcanvasTitle');
 const trekTitle = document.querySelector('#trekTitle');
 const trekYouTube = document.querySelector('#trekYouTube');
+const trekWebPage = document.querySelector('#trekWebPage');
+const trekGitHub = document.querySelector('#trekGitHub');
 const offcanvas = new bootstrap.Offcanvas(document.querySelector('#offcanvas'));
 
 // OpenLayers components
@@ -68,6 +70,8 @@ function updateOffcanvas(trek) {
       .then((response) => response.json())
       .then((json) => { trekTitle.textContent = json.title;
                         trekYouTube.src = json.youtube;
+                        trekWebPage.href = document.location.href + trek,
+                        trekWebPage.hidden = (json.hasWebPage !== true),
                         trekGitHub.href = TREKUNGEN_GITHUB + trek });
   offcanvasTitle.textContent = trek;
   offcanvas.show();

denvegaser/overview.json

@@ -1,4 +1,5 @@
 {
   "title": "Denver to Las Vegas roundtrip on scenic byways",
-  "youtube": "https://www.youtube.com/embed/videoseries?si=kqP-Vkp7r0FaX5Cy&list=PLuoY9uzz-lDHwVTLOTdI0hVyUgSXRSK1r"
+  "youtube": "https://www.youtube.com/embed/videoseries?si=kqP-Vkp7r0FaX5Cy&list=PLuoY9uzz-lDHwVTLOTdI0hVyUgSXRSK1r",
+  "hasWebPage": true
 }

index.html

@@ -94,6 +94,10 @@ <h3 id="trekTitle" class="mb-3"></h3>
                   referrerpolicy="strict-origin-when-cross-origin"
                   allowfullscreen></iframe>
         </div>
+        <p>
+          <a href="" id="trekWebPage" class="btn btn-primary"
+             hidden> Trek Page </a>
+        </p>
         <p>
           <i class="bi-github"></i>
           <a href="" target="_blank" id="trekGitHub"> Source </a>