Update existing tutorials

.gitignore

@@ -3,3 +3,4 @@ test/*.svg
 /*.svg
 node_modules/
 package-lock.json
+.CondaPkg

Project.toml

@@ -0,0 +1,3 @@
+[deps]
+Franklin = "713c75ef-9fc9-4b05-94a9-213340da978e"
+NodeJS = "2bd173c7-0d6d-553b-b6af-13a54713934c"

README.md

@@ -47,9 +47,7 @@ Find the corresponding script, fix it in a PR.
 Once all that's done, the remaining things to do are to create the HTML page and a link in the appropriate location. Let's assume you wanted to add an E2E tutorial "Dinosaurs" then in the previous step you'd have `EX-dinosaurs` and you would
 
 * create a file `dinosaurs.md` in `end-to-end/` by duplicating the `end-to-end/wine.md` and changing the reference in it to `\tutorial{EX-dinosaurs}`
-* add links pointing to that tutorial
-  * in `index.md` following the template
-  * in `_layout/head.html` following the template
+* add a link pointing to that tutorial in `_libs/nav/head.js` following the template so your tutorial shows in the navigation bar
 * lastly, to make sections in your tutorial collapsible like other tutorials run the `collapse-script.jl` file via `julia collapse-script.jl`
 
 

_css/extra.css

@@ -114,7 +114,7 @@ li.pure-menu-sublist-title {
     list-style-type: square;
 }
 
-ul#e2e.pure-menu-sublist {
+ul#adv.pure-menu-sublist {
     margin-bottom: 7em;
 }
 

_css/franklin.css

@@ -156,9 +156,9 @@ html {
 ================================================================== */
 
 .franklin-content img {
-    width: 70%;
+    width: 40%;
     text-align: center;
-    padding-left: 10%; }
+    padding-left: 5%; }
 
 .franklin-content .img-small img {
     width: 50%;

_css/nav.css

@@ -17,11 +17,16 @@
 }
 
 /* hide if screen size is from 900 to 1000 */
-@media screen and (max-width: 1200px) {
+@media screen and (max-width: 1300px) {
   .brand {
     display: none;
   }
 }
+
+a#home {
+  border-radius: 3rem;
+}
+
 .brand a,
 .brand a:visited {
   text-decoration: none;
@@ -116,3 +121,38 @@ nav ul li ul li a {
   background-color: #f1f1f1;
 
 }
+
+.bottom-nav-container {
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+  margin-top: 2rem;
+  margin-bottom: -2rem;
+
+}
+
+.bottom-nav {
+  background-color: #f1f1f1;
+  font-weight: 600;
+  padding: 8px 8px;
+  color: #2e2e2e;
+  border-radius: 45px;
+  outline: none;
+  text-align: center;
+  cursor: pointer;
+  transition: background-color 0.3s, color 0.3s;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-decoration: none;
+  width: 200px;
+  border: 2px solid #c1c1c1;
+}
+.bottom-nav:hover {
+  background-color: #9b59b6;
+  color: #f1f1f1;
+}
+.button-label {
+  font-size: 0.9rem;
+  font-weight: 400;
+}

_css/side-menu.css

@@ -77,7 +77,7 @@ The content `<div>` is where all your content goes.
         height: 40px;
       }
       /* media queries for header */
-      @media only screen and (max-width: 800px) {
+      @media only screen and (max-width: 1200px) {
         .header h1::before {
          display: none;
         }

_layout/foot.html

@@ -1,20 +1,24 @@
 <!-- CONTENT ENDS HERE -->
-      </div> <!-- end of id=main -->
-  </div> <!-- end of id=layout -->
-  <!-- for collapse functionality -->
-  <script src="/libs/collapse/collapse.js"></script>
-  <script src="/libs/pure/ui.min.js"></script>
-    <!-- navigation bar -->
-    <script src="/libs/nav/nav.js"></script>
-    <!-- responsive navigation bar -->
-    <script src="/libs/nav/responsive.js"></script>
-    <!-- landing page -->
-    <script src="/libs/landing/landing.js"></script>
-  {{ if hasmath }}
-      {{ insert foot_katex.html }}
-  {{ end }}
-  {{ if hascode }}
-      {{ insert foot_highlight.html }}
-  {{ end }}
+</div> <!-- end of id=main -->
+</div> <!-- end of id=layout -->
+<!-- for collapse functionality -->
+<script src="/libs/collapse/collapse.js"></script>
+<script src="/libs/pure/ui.min.js"></script>
+<!-- head and footer-nav -->
+<script src="/libs/nav/head.js"></script>
+<script src="/libs/nav/footer-nav.js"></script>
+<!-- landing page -->
+<script src="/libs/landing/landing.js"></script>
+<!-- navigation bar -->
+<script src="/libs/nav/nav.js"></script>
+<!-- responsive navigation bar -->
+<script src="/libs/nav/responsive.js"></script>
+{{ if hasmath }}
+{{ insert foot_katex.html }}
+{{ end }}
+{{ if hascode }}
+{{ insert foot_highlight.html }}
+{{ end }}
 </body>
-</html>
+
+</html>

_layout/head.html

@@ -88,25 +88,12 @@
                   Ensembles</a></li>
               <li class="pure-menu-item {{ispage getting-started/ensembles-2/index.html}}pure-menu-selected{{end}}"><a
                   href="/getting-started/ensembles-2/" class="pure-menu-link"><span
-                    style="padding-right:0.5rem;">•</span> Ensembles (2)</a></li>
-              <li class="pure-menu-item {{ispage getting-started/ensembles-3/index.html}}pure-menu-selected{{end}}"><a
-                  href="/getting-started/ensembles-3/" class="pure-menu-link"><span
-                    style="padding-right:0.5rem;">•</span> Ensembles (3)</a></li>
+                    style="padding-right:0.5rem;">•</span> Ensembles 2</a></li>
               <li
                 class="pure-menu-item {{ispage getting-started/composing-models/index.html}}pure-menu-selected{{end}}">
                 <a href="/getting-started/composing-models/" class="pure-menu-link"><span
                     style="padding-right:0.5rem;">•</span> Composing models</a>
               </li>
-              <li
-                class="pure-menu-item {{ispage getting-started/learning-networks/index.html}}pure-menu-selected{{end}}">
-                <a href="/getting-started/learning-networks/" class="pure-menu-link"><span
-                    style="padding-right:0.5rem;">•</span> Learning networks</a>
-              </li>
-              <li
-                class="pure-menu-item {{ispage getting-started/learning-networks-2/index.html}}pure-menu-selected{{end}}">
-                <a href="/getting-started/learning-networks-2/" class="pure-menu-link"><span
-                    style="padding-right:0.5rem;">•</span> Learning networks (2)</a>
-              </li>
               <li class="pure-menu-item {{ispage getting-started/stacking/index.html}}pure-menu-selected{{end}}"><a
                   href="/getting-started/stacking/" class="pure-menu-link"><span style="padding-right:0.5rem;">•</span>
                   Stacking</a></li>
@@ -136,12 +123,12 @@
                     style="padding-right:0.5rem;">•</span> Lab 10</a></li>
             </ul>
           </div>
-          <!-- END TO END EXAMPLES -->
+          <!-- End to End -->
           <div class="dropdown">
-            <li class="pure-menu-sublist-title"><strong>End to End Examples</strong></li>
+            <li class="pure-menu-sublist-title"><strong>End to End</strong></li>
           </div>
           <div class="dropdown-content collapse">
-            <ul class="pure-menu-sublist" id=e2e>
+            <ul class="pure-menu-sublist" >
               <li class="pure-menu-item {{ispage end-to-end/telco/index.html}}pure-menu-selected{{end}}"><a
                   href="/end-to-end/telco/" class="pure-menu-link"><span style="padding-right:0.5rem;">•</span>Telco
                   Churn</a></li>
@@ -169,97 +156,43 @@
                     style="padding-right:0.5rem;">•</span> Boston (Flux) </a></li>
               <li class="pure-menu-item "><a href="/end-to-end/breastcancer" class="pure-menu-link"><span
                     style="padding-right:0.5rem;">•</span> Breast Cancer</a></li>
+              <li class="pure-menu-item "><a href="/end-to-end/creditfraud" class="pure-menu-link"><span
+                    style="padding-right:0.5rem;">•</span> Credit Fraud</a></li>
+            </ul>
+          </div>
+          <!-- ADVANCED EXAMPLES -->
+          <div class="dropdown">
+            <li class="pure-menu-sublist-title"><strong>Advanced Examples</strong></li>
+          </div>
+          <div class="dropdown-content collapse">
+            <ul class="pure-menu-sublist" id=adv>
+              <li class="pure-menu-item "><a href="/advanced/ensembles-3/" class="pure-menu-link"><span
+                    style="padding-right:0.5rem;">•</span> Ensembles (3)</a></li>
             </ul>
           </div>
-        </ul>
-        <!-- END OF LIST OF MENU ITEMS -->
       </div>
+      </ul>
+      <!-- END OF LIST OF MENU ITEMS -->
     </div>
-    <div id="nav" class="navigation">
-      <div class="nav-container">
-        <div class="brand">
-          <a href="/">DataScienceTutorials.jl</a>
-        </div>
-        <nav>
-          <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
-          <ul class="nav-list">
-            <li>
-              <a id="home" class="main-nav-item" style="border-radius: 2rem 2rem 2rem 2rem;"  href="/">Home</a>
-            </li>
-            <li>
-              <a class="main-nav-item" id="data"  href="#!">Data Basics</a>
-              <ul class="nav-dropdown">
-                <li class="short-item"><a href="/data/loading/">Loading data</a></li>
-                <li class="short-item"><a href="/data/dataframe/">Data Frames</a></li>
-                <li class="short-item"><a href="/data/categorical/">Categorical Arrays</a></li>
-                <li class="short-item"><a href="/data/scitype/">Scientific Type</a></li>
-                <li class="short-item"><a href="/data/processing/">Data processing</a></li>
-              </ul>
-            </li>
-            <li>
-              <a class="main-nav-item" id="getting-started"  href="#!">Getting Started</a>
-              <ul class="nav-dropdown">
-                <li>
-                  <a href="/getting-started/choosing-a-model/"> Choosing a model</a>
-                </li>
-                <li>
-                  <a href="/getting-started/fit-and-predict/"> Fit, predict, transform</a>
-                </li>
-                <li class="medium-item"><a href="/getting-started/model-tuning/"> Model tuning</a></li>
-                <li class="medium-item"><a href="/getting-started/ensembles/"> Ensembles</a></li>
-                <li class="medium-item"><a href="/getting-started/ensembles-2/"> Ensembles (2)</a></li>
-                <li class="medium-item"><a href="/getting-started/ensembles-3/"> Ensembles (3)</a></li>
-                <li class="medium-item"><a href="/getting-started/composing-models/"> Composing models</a></li>
-                <li class="medium-item"><a href="/getting-started/learning-networks/"> Learning networks</a></li>
-                <li class="medium-item"><a href="/getting-started/learning-networks-2/"> Learning networks (2)</a></li>
-                <li class="medium-item"><a href="/getting-started/stacking/"> Stacking</a></li>
-              </ul>
-            </li>
-            <li>
-              <a class="main-nav-item" id="stats-learning"  href="#!">Intro to Stats Learning</a>
-              <ul class="nav-dropdown">
-                <li class="long-item"><a href="/isl/lab-2/"> Lab 2</a></li>
-                <li class="long-item"><a href="/isl/lab-3/"> Lab 3</a></li>
-                <li class="long-item"><a href="/isl/lab-4/"> Lab 4</a></li>
-                <li class="long-item"><a href="/isl/lab-5/"> Lab 5</a></li>
-                <li class="long-item"><a href="/isl/lab-6b/"> Lab 6b</a></li>
-                <li class="long-item"><a href="/isl/lab-8/"> Lab 8</a></li>
-                <li class="long-item"><a href="/isl/lab-9/"> Lab 9</a></li>
-                <li class="long-item"><a href="/isl/lab-10/"> Lab 10</a></li>
-              </ul>
-            </li>
-            <li>
-              <a class="main-nav-item" href="#!" id="end-to-end">End to End Examples</a>
-              <ul class="nav-dropdown">
-                <li class="long-item"><a href="/end-to-end/telco/">Telco Churn</a></li>
-                <li class="long-item"><a href="/end-to-end/AMES/"> AMES</a></li>
-                <li class="long-item"><a href="/end-to-end/wine/"> Wine</a></li>
-                <li class="long-item"><a href="/end-to-end/crabs-xgb/"> Crabs (XGB)</a></li>
-                <li class="long-item"><a href="/end-to-end/horse/"> Horse</a></li>
-                <li class="long-item"><a href="/end-to-end/HouseKingCounty/"> King County Houses</a></li>
-                <li class="long-item"><a href="/end-to-end/airfoil"> Airfoil </a></li>
-                <li class="long-item"><a href="/end-to-end/boston-lgbm"> Boston (lgbm) </a></li>
-                <li class="long-item"><a href="/end-to-end/glm/"> Using GLM.jl </a></li>
-                <li class="long-item"><a href="/end-to-end/powergen/"> Power Generation </a></li>
-                <li class="long-item"><a href="/end-to-end/boston-flux"> Boston (Flux) </a></li>
-                <li class="long-item"><a href="/end-to-end/breastcancer"> Breast Cancer</a></li>
-              </ul>
-            </li>
-            <li>
-              <form id="lunrSearchForm" name="lunrSearchForm" style="margin-left: 1.5rem; margin-right: -2rem;">
-                <input class="search-input" name="q" placeholder="Search..." type="text">
-                <input type="submit" value="Search" formaction="/search/index.html" style="display:none">
-              </form>
-            </li>
-          </ul>
-        </nav>
+  </div>
+  <div id="nav" class="navigation">
+    <div class="nav-container">
+      <div class="brand">
+        <a href="/">DataScienceTutorials.jl</a>
       </div>
+      <nav>
+        <div class="nav-mobile"><a id="nav-toggle" href="#!"><span></span></a></div>
+        <ul class="nav-list">
+        <!-- horizontal navigation bar gets injected -->
+        </ul>
+      </nav>
     </div>
-    <div id="main"> <!-- Closed in foot -->
-      {{ispage index.html}}
-      <div class="header">
-        <h1>{{fill title}}</h1>
-      </div>
-      {{end}}
+  </div>
+  <div id="main"> <!-- Closed in foot -->
+    {{ispage index.html}}
+    <div class="header">
+      <h1>{{fill title}}</h1>
+    </div>
+    {{end}}
 
-      <!-- Content appended here -->
+    <!-- Content appended here -->

_layout/page_foot.html

@@ -1,5 +1,16 @@
+<div class="bottom-nav-container">
+  <a id="prev-tutorial" style="text-decoration: none"><Button class="bottom-nav">
+        <div>← Previous Tutorial</div>
+        <div id="prev-label" class="button-label"> Home</div>
+    </Button></a>
+  <a id="next-tutorial" style="text-decoration: none"><Button class="bottom-nav">
+        <div>Next Tutorial →</div>
+        <div id="next-label" class="button-label">Home</div> 
+    </Button></a>
+</div>
 <div class="page-foot">
   <div class="copyright">
-    &copy; {{ fill author }}. Last modified: {{ fill fd_mtime }}. Website built with <a href="https://github.com/tlienart/Franklin.jl">Franklin.jl</a>.
+    &copy; {{ fill author }}. Last modified: {{ fill fd_mtime }}. Website built with <a
+      href="https://github.com/tlienart/Franklin.jl">Franklin.jl</a>.
   </div>
-</div>
+</div>

_libs/landing/landing.js

@@ -17,6 +17,27 @@ tabContainer.addEventListener('click', function(event) {
     const index = Array.from(tabs).indexOf(event.target);
     // add "selected-content" class to the corresponding content
     tabContents[index].classList.add('selected-content');
+
+    // Store the selected tab index in local storage
+    localStorage.setItem('selectedTabIndex', index.toString());
+});
+
+// Restore selected tab on page load
+document.addEventListener("DOMContentLoaded", function() {
+    // Get the stored index from local storage
+    const storedIndex = localStorage.getItem('selectedTabIndex');
+    if (storedIndex !== null) {
+        const index = parseInt(storedIndex);
+        // Get all tabs and select the one corresponding to the stored index
+        const tabs = tabContainer.querySelectorAll('.get-started-tab');
+        tabs.forEach(tab => tab.classList.remove('selected'));
+        tabs[index].classList.add('selected');
+
+        // Get all tab contents and select the one corresponding to the stored index
+        const tabContents = document.querySelectorAll('.tab-content');
+        tabContents.forEach(tab => tab.classList.remove('selected-content'));
+        tabContents[index].classList.add('selected-content');
+    }
 });
 
 // make the button link to how-to-run-code