ExcaliburFRC · Starlight220 · Dec 7, 2020 · Nov 22, 2020 · Nov 22, 2020 · Nov 22, 2020
diff --git a/Resources.html b/Resources.html
@@ -3,69 +3,85 @@
 layout: default
 ---
 
-    <script>
-        function getVideoUrl(index) {
-            videos = [
-                "https://www.youtube.com/embed/eSvPmKbIGUw?controls=0",
-                "https://www.youtube.com/embed/049cwhnNpvI?controls=0",
-                "https://www.youtube.com/embed/CLljYpERAao?controls=0",
-                "https://www.youtube.com/embed/1TTuW-5MPws?controls=0"
-            ]
-            if (index > videos.length - 1) {
-                alert("Wrong Video Index!");
-                return;
-            }
-            return videos[index];
+<script>
+    function getVideoUrl(index) {
+        const videos = [
+            "https://www.youtube.com/embed/eSvPmKbIGUw?controls=0",
+            "https://www.youtube.com/embed/049cwhnNpvI?controls=0",
+            "https://www.youtube.com/embed/CLljYpERAao?controls=0",
+            "https://www.youtube.com/embed/1TTuW-5MPws?controls=0"
+        ];
+        if (index > videos.length - 1) {
+            alert("Wrong Video Index!");
+            return;
         }
-        function changeVideo(index) {
+        return videos[index];
+    }
 
-            document.getElementById("videoframe").src = getVideoUrl(index);
-        }
-    </script>
+    function changeVideo(index) {
+
+        document.getElementById("videoframe").src = getVideoUrl(index);
+    }
+</script>
 <div class="row justify-content-md-center m-0 mb-md-5 mb-sm-0">
     <div style="background-color:#012265;" class="jumbotron col-md-12 col-sm-12 m-0 p-2">
         <div class="accordion" id="accordionExample">
             <div class="card">
-                <div class="card-header" id="headingOne">
+                <div class="card-header" id="headingTwo">
                     <h5 class="mb-0">
-                        <button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne"
-                            aria-expanded="true" aria-controls="collapseOne">
-                            Useful Links
+                        <button class="btn btn-link" type="button" data-toggle="collapse"
+                                data-target="#collapseTwo" aria-expanded="false"
+                                aria-controls="collapseTwo">
+                            Team Resources
                         </button>
                     </h5>
                 </div>
-
-                <div id="collapseOne" class="collapse show" aria-labelledby="headingOne"
-                    data-parent="#accordionExample">
+                <div id="collapseTwo" class="collapse show" aria-labelledby="headingTwo"
+                     data-parent="#accordionExample">
                     <div class="card-body">
                         <div class="row">
                             <ul>
-                                <li><a href="https://docs.wpilib.org/en/stable/">frc-docs (WPILib Documentation) -
-                                        Documentation for the Java Robot Programming Library</a><br /></li>
-                                <li><a href="https://www.thebluealliance.com/">The Blue Alliance (TBA) - FRC game and team
-                                        statistics</a></li>
+                                <li><a href="Logo.png">High Quality Team Logo</a></li>
+                                <li><a href="code-standards.html">Team Coding Standards</a></li>
+                                <li><a href="color-standards.html">Team Color Standards</a></li>
                             </ul>
                         </div>
                     </div>
                 </div>
             </div>
+            <div class="card">
+                <div class="card-header" id="tutorial-heading">
+                    <h5 class="mb-0">
+                        <a class="btn btn-link" href="/tutorials/">
+                            Tutorials
+                        </a>
+                    </h5>
+                </div>
+            </div>
 
             <div class="card">
-                <div class="card-header" id="headingTwo">
+                <div class="card-header" id="headingOne">
                     <h5 class="mb-0">
                         <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
-                            data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
-                            Team Resources
+                                data-target="#collapseOne"
+                                aria-expanded="true" aria-controls="collapseOne">
+                            Useful Links
                         </button>
                     </h5>
                 </div>
-                <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+
+                <div id="collapseOne" class="collapse" aria-labelledby="headingOne"
+                     data-parent="#accordionExample">
                     <div class="card-body">
                         <div class="row">
                             <ul>
-                                <li><a href="Logo.png">High Quality Team Logo</a></li>
-                                <li><a href="code-standards.html">Team Coding Standards</a></li>
-                                <li><a href="color-standards.html">Team Color Standards</a></li>
+                                <li><a href="https://docs.wpilib.org/en/stable/">frc-docs (WPILib
+                                    Documentation) -
+                                    Documentation for the Java Robot Programming Library</a><br/>
+                                </li>
+                                <li><a href="https://www.thebluealliance.com/">The Blue Alliace -
+                                    FRC game and team
+                                    statistics</a></li>
                             </ul>
                         </div>
                     </div>
@@ -76,12 +92,14 @@ <h5 class="mb-0">
                 <div class="card-header" id="headingThree">
                     <h5 class="mb-0">
                         <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
-                            data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
+                                data-target="#collapseThree" aria-expanded="false"
+                                aria-controls="collapseThree">
                             Presentations
                         </button>
                     </h5>
                 </div>
-                <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
+                <div id="collapseThree" class="collapse" aria-labelledby="headingThree"
+                     data-parent="#accordionExample">
                     <div class="card-body">
                         <div class="row">
                             <ul>
@@ -93,30 +111,36 @@ <h5 class="mb-0">
             </div>
 
             <div class="card">
-                <div class="card-header" id="headingTwo">
+                <div class="card-header" id="headingFour">
                     <h5 class="mb-0">
                         <button class="btn btn-link collapsed" type="button" data-toggle="collapse"
-                            data-target="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
+                                data-target="#collapseFour" aria-expanded="false"
+                                aria-controls="collapseFour">
                             Team Videos
                         </button>
                     </h5>
                 </div>
-                <div id="collapseFour" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
+                <div id="collapseFour" class="collapse" aria-labelledby="headingTwo"
+                     data-parent="#accordionExample">
                     <div class="card-body pb-sm-2 pb-md-4">
                         <div class="row pr-md-4 pr-sm-0">
                             <div class="col-md-4 col-sm-12">
                                 <ul>
-                                    <li><a href="javascript:changeVideo(3)">2020 Ri3D Reveal</a></li>
-                                    <li><a href="javascript:changeVideo(0)">2019 Robot Reveal</a></li>
-                                    <li><a href="javascript:changeVideo(2)">2019 Season Recap</a></li>
-                                    <li><a href="javascript:changeVideo(1)">2018 Robot Teaser</a></li>
+                                    <li><a href="javascript:changeVideo(3)">2020 Ri3D Reveal</a>
+                                    </li>
+                                    <li><a href="javascript:changeVideo(0)">2019 Robot Reveal</a>
+                                    </li>
+                                    <li><a href="javascript:changeVideo(2)">2019 Season Recap</a>
+                                    </li>
+                                    <li><a href="javascript:changeVideo(1)">2018 Robot Teaser</a>
+                                    </li>
                                 </ul>
                             </div>
                             <div class="col-md-8 col-sm-12 embed-responsive embed-responsive-16by9 rounded">
                                 <iframe class="embed-responsive-item" id="videoframe"
-                                    src="" frameborder="0"
-                                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                                    allowfullscreen></iframe>
+                                        src="" frameborder="0"
+                                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+                                        allowfullscreen></iframe>
                             </div>
                             <script>
                                 changeVideo(3)
@@ -127,5 +151,4 @@ <h5 class="mb-0">
             </div>
         </div>
     </div>
-
-</div>
+</div>
diff --git a/_includes/head.html b/_includes/head.html
@@ -6,7 +6,6 @@
 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
 <link rel="stylesheet" type="text/css" href="/assets/css/syntax.css">
 <link rel="stylesheet" href="/assets/css/animstyles.css">
-<link rel="stylesheet" href="/assets/css/tabs.css">
 <link rel="stylesheet" type="text/css" href="/assets/css/styles.css">
 
 <!-- Design -->

diff --git a/_layouts/default.html b/_layouts/default.html
@@ -2,6 +2,7 @@
 <html lang="en">
   <head>
     {% include head.html %}
+    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
   </head>
 
   <body>
@@ -11,6 +12,7 @@
     </div>
 
     <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
+
     <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
     <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
     <!-- A Script For Mobile Support -->

diff --git a/_layouts/load-tutorial.js b/_layouts/load-tutorial.js
@@ -0,0 +1,60 @@
+const json = JSON.parse(`
+{{ content }}
+`)
+
+function loadProgressButtons(currentPermalink) {
+    let i;
+    if (currentPermalink.endsWith("/")) {
+        setProgressLinks(null, json["articles"][0]["file"])
+        document.getElementById("tutorial-home").hidden = true;
+        return;
+    }
+    // alert(json) // debug
+    // alert(json["articles"]); // debug
+    for (i = 0; i < json["articles"].length; i++) {
+        let element = json["articles"][i];
+        if (element["file"] === currentPermalink) {
+            setProgressLinks((i === 0)? null : json["articles"][i-1]["file"],
+                (i === json["articles"].length - 1)? null : json["articles"][i+1]["file"])
+            break;
+        }
+    }
+    function setProgressLinks(prevLink, nextLink) {
+        let prev = document.getElementById("previous");
+        let next = document.getElementById("next");
+        if (prevLink === null) {
+            prev.hidden = true;
+        } else {
+            prev.setAttribute("href", prevLink);
+        }
+        if (nextLink === null) {
+            next.hidden = true;
+        } else {
+            next.setAttribute("href", nextLink);
+        }
+    }
+}
+
+function loadSidebar(currentPermalink) {
+    // alert("loadSidebar() called"); // debug
+    let parent = document.getElementById("sidebar");
+    json["articles"].forEach(function (current, idx, arr) {
+        let element = document.createElement("a");
+        element.className = "sidebar-item";
+        element.setAttribute("href", current["file"]);
+        element.text = current["name"];
+        if (current["file"] === currentPermalink) {
+            document.getElementById("tutorial-intro").className -= " active";
+            element.className += " active";
+        }
+        parent.appendChild(element);
+    });
+}
+
+function setTitle(currentPermalink) {
+    let header = document.getElementById("title");
+
+    let currentfile = json["articles"].filter(article => article["file"] === currentPermalink)[0];
+    header.id = currentfile["name"].replace(" ", "-").replace("/", "").toLowerCase();
+    header.innerText = currentfile["name"];
+}
diff --git a/_layouts/tutorial.html b/_layouts/tutorial.html
@@ -0,0 +1,25 @@
+---
+layout: default
+---
+<link rel="stylesheet" href="/assets/css/tabs.css">
+<link rel="stylesheet" href="/assets/css/sidenav.css">
+<script src="./load-tutorial.js"></script>
+<!-- sidenav -->
+<div id="sidebar" class="sidebar">
+    <a id="tutorial-intro" class="sidebar-item active" href="./">Introduction</a>
+</div><script>loadSidebar("{{ page.permalink }}")</script>
+
+<div class="row justify-content-md-center m-0 mb-sm-0 pt-md-0">
+    <!--    <div class="row justify-content-md-center m-0 mb-sm-0 pt-md-0" style="width:100%; display: block; justify-content: center !important;">-->
+    <a id="previous" href="#"><- Previous</a>
+    <a id="tutorial-home" href="./">Tutorial Home</a>
+    <a id="next" href="#">Next -></a>
+    <script>loadProgressButtons("{{ page.permalink }}")</script>
+    <div class="jumbotron col-sm-12 col-md-10 m-0 pb-md-0" style="background-color:#012265;">
+        <h1 id="title"></h1>
+        <script>setTitle("{{ page.permalink }}")</script>
+        {{ content }}
+    </div>
+</div>
+<!-- Tab links -->
+<script src="/scripts/tabs.js"></script>