Merge pull request #43 from sun-rhythms/tutorial-links-update

"More Tutorials" changes
ton-community · Oct 12, 2023 · 4be183c · 4be183c
2 parents ecccce7 + 993fbc7
commit 4be183c
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 5 deletions.
diff --git a/scripts/assets/helpers.js b/scripts/assets/helpers.js
@@ -12,6 +12,15 @@ const getSelectedCombination = () => {
 
 const getSelectBoxes = () => document.querySelectorAll(".selectbox");
 const getPosts = () => document.querySelectorAll(".post");
+const getTutorialLinks = () => document.querySelectorAll("[data=tutorial-link]")
+
+const setSelectedTutorialLink = () => {
+  getTutorialLinks().forEach((tutorialLink) => {
+    if(tutorialLink.href === window.location.href) {
+      tutorialLink.classList.add("selected");
+    }
+  });
+};
 
 const onOutsideClick = (container) => {
   document.addEventListener("click", (event) => {
@@ -129,6 +138,7 @@ const updateCombination = () => {
 };
 
 window.onload = () => {
+  setSelectedTutorialLink();
   updateCombination();
   getSelectBoxes().forEach((selectbox) => {
     const selected = selectbox.querySelector(".selectbox-selected");

diff --git a/scripts/index-template.ejs b/scripts/index-template.ejs
@@ -50,12 +50,12 @@
           <% } %>
           </div>
           <div class="more">
-            <h3>More Tutorials</h3>
+            <h3>Tutorials</h3>
             <ul>
-              <li><a href="https://ton-community.github.io/tutorials/01-wallet">01. Working with your first wallet</a></li>
-              <li><a href="https://ton-community.github.io/tutorials/02-contract">02. Writing your first smart contract</a></li>
-              <li><a href="https://ton-community.github.io/tutorials/03-client">03. Building your first web client</a></li>
-              <li><a href="https://ton-community.github.io/tutorials/04-testing">04. Testing your first smart contract</a></li>
+              <li><a data="tutorial-link" href="https://ton-community.github.io/tutorials/01-wallet">01. Working with your first wallet</a></li>
+              <li><a data="tutorial-link" href="https://ton-community.github.io/tutorials/02-contract">02. Writing your first smart contract</a></li>
+              <li><a data="tutorial-link" href="https://ton-community.github.io/tutorials/03-client">03. Building your first web client</a></li>
+              <li><a data="tutorial-link" href="https://ton-community.github.io/tutorials/04-testing">04. Testing your first smart contract</a></li>
             </ul>
           </div>
           <div class="more">

diff --git a/styles.scss b/styles.scss
@@ -29,6 +29,11 @@ a {
   border-bottom: .75px solid #08c9;
 }
 
+a.selected {
+  text-decoration: underline;
+  pointer-events: none;
+}
+
 /* http://meyerweb.com/eric/tools/css/reset/ 
    v2.0 | 20110126
    License: none (public domain)