dynamic scrollspy for projects works. ideally will tweak a bit more to make it look nicer

assets/script/dynamicscrollspy.min.js

@@ -0,0 +1,5 @@
+/**
+*  AutoScrollspy v 0.2.0
+*  https://github.com/psalmody/dynamic-scrollspy
+*/
+!function($){$.fn.DynamicScrollspy=function(opts){function encodeHTML(value){return $("<div></div>").text(value).html()}function selectAllH(){for(var st=[],i=self.options.tH;i<=self.options.bH;i++)st.push("H"+i);return $(st.join(",")).not(self.options.exclude)}function randID(){function rand(){r=Math.floor(900*Math.random())+100}var r;for(rand();self.rands.indexOf(r)>=0;)rand();return self.rands.push(r),r}function genIDs(){selectAllH().prop("id",function(){return""===$(this).prop("id")?$(this).prop("tagName")+randID():$(this).prop("id")})}function checkIDs(){var missing=0;if(selectAllH().each(function(){if(""===$(this).prop("id"))missing++;else if($('[id="'+$(this).prop("id")+'"]').length>1)throw new Error("DynamicScrollspy: Error! Duplicate id "+$(this).prop("id"))}),missing>0){var msg="DynamicScrollspy: Not all headers have ids and genIDs: false.";throw new Error(msg)}return missing}function showTesting(){selectAllH().append(function(){return" ("+$(this).prop("tagName")+", "+$(this).prop("id")+")"})}function makeTree(){var tree=self.tree;return $("H"+self.options.tH).not(self.options.exclude).each(function(){tree[$(this).prop("id")]={dstext:encodeHTML($(this).text()),jqel:$(this)}}),self.options.tH+1<=self.options.bH&&itCreateTree(tree),tree}function itCreateTree(what){for(var k in what)if(""!==k&&"dstext"!=k&&"jqel"!=k){var lvl=Number($("#"+k).prop("tagName").replace("H",""));if(lvl>=self.options.bH)return!1;$("#"+k).nextUntil("H"+lvl).filter("H"+(lvl+1)).not(self.options.exclude).each(function(){what[k][$(this).prop("id")]={dstext:encodeHTML($(this).text()),jqel:$(this)}}),lvl<self.options.bH&&itCreateTree(what[k])}}function renderTree(){var ul=$('<ul class="nav '+self.options.ulClassNames+'"></ul>');return self.append(ul),$.each(self.tree,function(k){var c=self.tree[k],li='<li id="dsli'+k+'" class="nav-item"><a href="#'+k+'" class="nav-link">'+c.dstext+"</a></li>";ul.append(li),itRenderTree(self.tree[k])}),self}function itRenderTree(what){if(Object.keys(what).length<3)return!1;var parent=$("#dsli"+what.jqel.prop("id")),ul=$("<ul class='nav child'></ul>");parent.append(ul);for(var k in what)if("dstext"!=k&&"jqel"!=k){var c=what[k];ul.append('<li id="dsli'+k+'" class="nav-item"><a href="#'+k+'" class="nav-link">'+c.dstext+"</a></li>"),itRenderTree(what[k])}}function init(){if(self.isinit===!1){if(self.options.genIDs?genIDs():checkIDs(),self.options.testing&&showTesting(),makeTree(),renderTree(),self.options.affix&&"function"==typeof self.children("ul").affix){var ul=self.children("ul");self.children("ul").affix({offset:{top:function(){var c=ul.offset().top,d=parseInt(ul.children(0).css("margin-top"),10),e=$(self).height();return this.top=c-e-d},bottom:function(){return this.bottom=$(self).outerHeight(!0)}}})}$("body").attr("data-spy","true").scrollspy({target:"#"+self.prop("id"),offset:self.options.offset}),self.isinit=!0}else makeTree(),renderTree(),$('[data-spy="scroll"]').each(function(){$(this).scrollspy("refresh")});return self}if(opts="undefined"==typeof opts?{}:opts,this.isinit="undefined"!=typeof this.isinit&&self.isinit,"destroy"==opts)return this.isinit=!1,this.empty(),this.off("activate.bs.scrollspy"),$("body").removeAttr("data-spy"),this;this.options=$.extend({},{affix:!0,tH:2,bH:6,exclude:!1,genIDs:!1,offset:100,ulClassNames:"hidden-print",activeClass:"",testing:!1},this.options,opts);var self=this;return this.tree={},this.rands=[],init()}}(jQuery);

views/pages/index.ejs

@@ -65,7 +65,7 @@
                             <p class="card-text">Tbh, idk what other project to put here, we'll have to figure it our later</p>
                         </div>
                         <div class="card-footer">
-                            <a href="https://github.com/len0rd/Repley" class="card-link card-soft-link">See Code</a>
+                            <a href="https://github.com/len0rd/darkstar_copter" class="card-link card-soft-link">See Code</a>
                             <a href="projects/darkstar" class="btn btn-outline-light">Read More</a>
                         </div>
                     </div>

views/pages/projects/project_template.ejs

@@ -15,10 +15,10 @@
 
 	<div class="container mt-5">
 		<div class="row">
-			<div class="col-3 mt-5">
-				<%- include(rootPath + page + navExt) %>
+			<div class="col-3 mt-5" id="scrollBar">
+				
 			</div>
-			<div data-spy="scroll" data-target="#nav-scroll" data-offset="0" class="col-9 mt-5 pt-5 pb-5">
+			<div data-spy="scroll" data-target="#scrollBar" data-offset="0" class="col-9 mt-5 pt-5 pb-5">
 				<%- include(rootPath + page) %>
 			</div>
 		</div>
@@ -26,5 +26,11 @@
 
 	<%- include(rootPath + 'partials/footer') %>
 	<%- include(rootPath + 'partials/post_html_include') %>
+	<script type="text/javascript" src="/script/dynamicscrollspy.min.js"></script>
+	<script>
+		$('#scrollBar').DynamicScrollspy({
+			ulClassNames: 'navbar navbar-light bg-light sticky-top sticky-offset'
+		});
+	</script>
 </body>
 </html>