Use Bootstrap components

[Samasaur1]

I left 3 TODOs for where it might be better for me to use Bootstrap components than what I'm doing right now. They are:

samasaur1.github.io/projects/index.html

Lines 50 to 81 in fd292c9

	<div class="list-group">
	{% for proj in site.data.projects %}
	<a href="{{ proj.link | relative_url }}" class="list-group-item list-group-item-action filterer-item filterer-{{proj.type | downcase}} hidden-transition">
	<span class="icon-{{ proj.type | downcase }}"></span> <strong>{{ proj.name }}</strong> <span class="text-muted">{{ proj.description }}</span>
	<span class="float-right">
	{% for lang in proj.languages %}
	<span class="badge badge-pill badge-{{ lang | downcase }}">{{ lang }}</span>
	{% endfor %}
	</span>
	</a>
	{% endfor %}
	</div>
	<script type="text/javascript">
	var filtererItemHeight = document.querySelector(".filterer-item").clientHeight;
	var filtererItemPadding = document.querySelector(".filterer-item").style.padding;
	var filterer_filter = function() {
	let value = document.getElementById("filterer").value;
	let toHide = document.querySelectorAll(".filterer-item:not(.filterer-" + value + ")");
	let toShow = document.querySelectorAll(".filterer-" + value);
	for(let i = 0; i < toHide.length; i++) {
	toHide[i].style.visibility = "hidden";
	toHide[i].style.height = "0px";
	toHide[i].style.padding = "0px";
	}
	for (let i = 0; i < toShow.length; i++) {
	toShow[i].style.visibility = "visible";
	toShow[i].style.height = filtererItemHeight + "px";
	toShow[i].style.padding = filtererItemPadding;
	}
	//TODO: https://getbootstrap.com/docs/4.5/components/collapse/
	}
	</script>

samasaur1.github.io/assets/js/search.js

Lines 23 to 44 in fd292c9

	function formatContent(content, searchTerm) {
	var termIdx = content.toLowerCase().indexOf(searchTerm.toLowerCase());
	if (termIdx >= 0) {
	var startIdx = Math.max(0, termIdx - 140);
	var endIdx = Math.min(content.length, termIdx + searchTerm.length + 140);
	var trimmedContent = (startIdx === 0) ? "" : "…";
	trimmedContent += content.substring(startIdx, endIdx);
	trimmedContent += (endIdx >= content.length) ? "" : "…"
	var highlightedContent = trimmedContent.replace(new RegExp(searchTerm, "ig"), function matcher(match) {
	return "<strong>" + match + "</strong>";
	});
	return highlightedContent;
	//TODO: https://getbootstrap.com/docs/4.5/components/breadcrumb/
	}
	else {
	var emptyTrimmedString = content.substr(0, 280);
	emptyTrimmedString += (content.length < 280) ? "" : "&hellip;";
	return emptyTrimmedString;
	}
	}

samasaur1.github.io/_layouts/project.html

Lines 27 to 49 in fd292c9

	<div class="hidden-transition" id="appstore-get-hidden">
	<br/>
	<a href="{{proj.appstore_url}}"><img src="/assets/images/appstore-get-ios.svg"/></a>
	<span class="float-right" id="appstore-rating-container"></span>
	<script type="text/javascript">
	var btn = document.getElementById('project-type-click-target');
	var hint = document.getElementById('appstore-get-hidden');
	var height = hint.clientHeight;
	hint.style.height = '0px';
	hint.style.visibility = 'hidden';
	btn.addEventListener('click', function(){
	if(hint.style.visibility == 'hidden'){
	hint.style.visibility = 'visible';
	hint.style.height = height + 'px';
	}
	else{
	hint.style.visibility = 'hidden';
	hint.style.height = '0px';
	}
	});
	//TODO: https://getbootstrap.com/docs/4.5/components/collapse/

I should either use the Bootstrap components, or get rid of the TODOs.