Merge branch 'DashCampbell-master'

merge branch 'DashCampbell/MATH201/master' into master
made edits
2024-02-05 20:06:00 -07:00 · 2024-02-05 20:05:39 -07:00 · 2023-12-30 08:50:30 -07:00 · 2023-12-29 21:47:03 -07:00 · 2023-12-29 20:05:27 -07:00 · 2023-12-29 16:17:03 -07:00
9 changed files with 756 additions and 400 deletions
--- a/README.md
+++ b/README.md
@ -13,8 +13,9 @@ Yes. Consider sharing it with your classmates ;)
 Here's a quick rundown of how to build from source:
 1) download or clone the repository ```git clone https://git.sasserisop.com/Sasserisop/MATH201```
 2) make sure you have hugo installed
-3) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender```
-4) visit your site by opening http://localhost:1313 on your browser.
+3) if you are using localhost, inside of themes/zettels/assets/js/search.js set 'const localhost' to true.
+4) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender```
+5) visit your site by opening http://localhost:1313 on your browser.

 Now if you want to host it on a live website, you can run:
 ```hugo```
--- a/content/_index.md
+++ b/content/_index.md
@ -2,32 +2,6 @@
 These are notes for the [University of Alberta MATH 201 - Differential Equations](https://apps.ualberta.ca/catalogue/course/math/201) course.
 I have written these notes for myself, I thought it would be cool to share them. These notes may be inaccurate, incomplete, or incoherent. No warranty is expressed or implied. Reader assumes all risk and liabilities.
 </br>
-[Separable equations (lec 1)](separable-equations-lec-1.html)
-[Homogenous equations (lec 2)](homogenous-equations-lec-2.html)
-[Linear equations (lec 2-3)](linear-equations-lec-2-3.html)
-[Bernoulli equations (lec 3)](bernoulli-equations-lec-3.html)
-[Linear coefficient equations (lec 4)](linear-coefficient-equations-lec-4.html)
-[Exact equations (lec 4-5)](exact-equations-lec-4-5.html)
-[Second order homogenous linear equations (lec 5-7)](second-order-homogenous-linear-equations-lec-5-7.html) 
-[Method of undetermined coefficients (lec 8-9)](method-of-undetermined-coefficients-lec-8-9.html)
-[Variation of parameters (lec 9-10)](variation-of-parameters-lec-9-10.html) 
-[Cauchy-Euler equations (lec 10-11)](cauchy-euler-equations-lec-10-11.html)
-[Reduction of order (lec 11)](reduction-of-order-lec-11.html)
-[Free vibrations (lec 11-12)](free-vibrations-lec-11-12.html) 
-[Resonance & AM (lec 13-14)](resonance-am-lec-13-14.html)
-[Laplace transform (lec 14-16)](laplace-transform-lec-14-16.html)
-[Solving IVP's using Laplace transform (lec 17-18)](solving-ivps-using-laplace-transform-lec-17-18.html)
-[(Heaviside) Unit step function (lec 18)](heaviside-unit-step-function-lec-18.html)
-[Periodic functions (lec 19)](periodic-functions-lec-19.html)
-[Convolution (lec 19-20)](convolution-lec-19-20.html)
-[Dirak δ-function (lec 21)](dirak-δ-function-lec-21.html)
-[Systems of linear equations (lec 21-22)](systems-of-linear-equations-lec-21-22.html)
-[Power series (lec 22-25)](power-series-lec-22-25.html)
-[Separation of variables & Eigen value problems (lec 26-28)](separation-of-variables-eigen-value-problems-lec-26-28.html)
-[Fourier series (lec 28-29)](fourier-series-lec-28-29.html)
-[Heat equation (lec 30-33)](heat-equation-lec-30-33.html)
-[Wave equation (lec 33-36)](wave-equation-lec-33-36.html)
-</br>
 [How to solve any DE, a flow chart](Solve-any-DE.png) (Last updated Oct 1st 2023. Needs revision, but it gives a nice overview.)
 [Big LT table (.png)](drawings/bigLTtable.png)
 [Small LT table (.png)](drawings/smallLTtable.png)
--- a/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content
+++ b/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content
@ -26,7 +26,87 @@ input[type="submit"] {
 	Bear base styles
 	(Retrieved from official app, all credits belong to Bear Team)
 */
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
  margin: 0;
  padding: 0;
  border: 0;
@ -37,29 +117,48 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
 html {
  line-height: 1; }

-ol, ul {
+ol,
+ul {
  list-style: none; }

 table {
  border-collapse: collapse;
  border-spacing: 0; }

-caption, th, td {
+caption,
+th,
+td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

-q, blockquote {
+q,
+blockquote {
  quotes: none; }

-q:before, q:after, blockquote:before, blockquote:after {
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
  content: "";
  content: none; }

 a img {
  border: none; }

-article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
  display: block; }

 * {
@ -80,7 +179,8 @@ body {
  background: var(--background);
  color: var(--text-base-color);
  text-rendering: optimizeLegibility;
-  font-family: "AvenirNext-Regular"; }
+  font-family: "AvenirNext-Regular";
+  position: relative; }

 a {
  color: var(--link-text-color);
@ -117,10 +217,14 @@ hr {
  background-color: #dedede;
  margin: -1px auto 1.57143em auto; }

-ul, ol {
+ul,
+ol {
  margin-bottom: .31429em; }

-ul ul, ul ol, ol ul, ol ol {
+ul ul,
+ul ol,
+ol ul,
+ol ol {
  margin-bottom: 0px; }

 ol {
@ -135,11 +239,13 @@ ol li:before {
  min-width: 1em;
  margin-right: 0.5em; }

-b, strong {
+b,
+strong {
  font-family: "Menlo-Regular";
  font-weight: bold; }

-i, em {
+i,
+em {
  font-family: "Menlo-Regular";
  font-style: italic; }

@ -151,22 +257,48 @@ code {
  text-overflow: ellipsis;
  white-space: nowrap; }

-.sf_code_string, .sf_code_selector, .sf_code_attr-name, .sf_code_char, .sf_code_builtin, .sf_code_inserted {
+.sf_code_string,
+.sf_code_selector,
+.sf_code_attr-name,
+.sf_code_char,
+.sf_code_builtin,
+.sf_code_inserted {
  color: #D33905; }

-.sf_code_comment, .sf_code_prolog, .sf_code_doctype, .sf_code_cdata {
+.sf_code_comment,
+.sf_code_prolog,
+.sf_code_doctype,
+.sf_code_cdata {
  color: #838383; }

-.sf_code_number, .sf_code_boolean {
+.sf_code_number,
+.sf_code_boolean {
  color: #0E73A2; }

-.sf_code_keyword, .sf_code_atrule, .sf_code_rule, .sf_code_attr-value, .sf_code_function, .sf_code_class-name, .sf_code_class, .sf_code_regex, .sf_code_important, .sf_code_variable, .sf_code_interpolation {
+.sf_code_keyword,
+.sf_code_atrule,
+.sf_code_rule,
+.sf_code_attr-value,
+.sf_code_function,
+.sf_code_class-name,
+.sf_code_class,
+.sf_code_regex,
+.sf_code_important,
+.sf_code_variable,
+.sf_code_interpolation {
  color: #0E73A2; }

-.sf_code_property, .sf_code_tag, .sf_code_constant, .sf_code_symbol, .sf_code_deleted {
+.sf_code_property,
+.sf_code_tag,
+.sf_code_constant,
+.sf_code_symbol,
+.sf_code_deleted {
  color: #1B00CE; }

-.sf_code_macro, .sf_code_entity, .sf_code_operator, .sf_code_url {
+.sf_code_macro,
+.sf_code_entity,
+.sf_code_operator,
+.sf_code_url {
  color: #920448; }

 .note-wrapper {
@ -367,7 +499,12 @@ svg + ol {
 * + h4 {
  margin-top: 2.8em; }

-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
  position: relative; }

 h1:before,
@ -458,3 +595,7 @@ li img {

 .turbolinks-progress-bar {
  visibility: hidden; }
+
+@media only screen and (max-width: 460px) {
+  main .note-wrapper {
+    padding: 1.57143em 1.1em; } }
--- a/themes/zettels/assets/css/style.scss
+++ b/themes/zettels/assets/css/style.scss
@ -1,4 +1,3 @@
-
 input {
 	margin: 0;
 	padding: 0;
@ -21,17 +20,98 @@ input[type="submit"] {
 	-webkit-appearance: none;
 	border-radius: 0;
 }
+
 // @todo: class

 ::selection {
 	background: var(--selected-text-background-color);
-	}
+}

 /** 
 	Bear base styles
 	(Retrieved from official app, all credits belong to Bear Team)
 */
-html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
 	margin: 0;
 	padding: 0;
 	border: 0;
@ -44,7 +124,8 @@ html {
 	line-height: 1
 }

-ol, ul {
+ol,
+ul {
 	list-style: none
 }

@ -53,17 +134,23 @@ table {
 	border-spacing: 0
 }

-caption, th, td {
+caption,
+th,
+td {
 	text-align: left;
 	font-weight: normal;
 	vertical-align: middle
 }

-q, blockquote {
+q,
+blockquote {
 	quotes: none
 }

-q:before, q:after, blockquote:before, blockquote:after {
+q:before,
+q:after,
+blockquote:before,
+blockquote:after {
 	content: "";
 	content: none
 }
@ -71,7 +158,20 @@ q:before, q:after, blockquote:before, blockquote:after {
 a img {
 	border: none
 }
-article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
 	display: block
 }

@ -97,7 +197,8 @@ body {
 	// @todo: not working
 	color: var(--text-base-color);
 	text-rendering: optimizeLegibility;
-	font-family: "AvenirNext-Regular"
+	font-family: "AvenirNext-Regular";
+	position: relative;
 }

 a {
@ -141,11 +242,15 @@ hr {
 	margin: -1px auto 1.57143em auto
 }

-ul, ol {
+ul,
+ol {
 	margin-bottom: .31429em;
 }

-ul ul, ul ol, ol ul, ol ol {
+ul ul,
+ul ol,
+ol ul,
+ol ol {
 	margin-bottom: 0px
 }

@ -163,13 +268,15 @@ ol li:before {
 	margin-right: 0.5em
 }

-b, strong {
+b,
+strong {
 	//font-family: "AvenirNext-Bold";
 	font-family: "Menlo-Regular";
 	font-weight: bold;
 }

-i, em {
+i,
+em {
 	//font-family: "AvenirNext-Italic";
 	font-family: "Menlo-Regular";
 	font-style: italic;
@ -185,27 +292,53 @@ code {
 	white-space: nowrap
 }

-.sf_code_string, .sf_code_selector, .sf_code_attr-name, .sf_code_char, .sf_code_builtin, .sf_code_inserted {
+.sf_code_string,
+.sf_code_selector,
+.sf_code_attr-name,
+.sf_code_char,
+.sf_code_builtin,
+.sf_code_inserted {
 	color: #D33905
 }

-.sf_code_comment, .sf_code_prolog, .sf_code_doctype, .sf_code_cdata {
+.sf_code_comment,
+.sf_code_prolog,
+.sf_code_doctype,
+.sf_code_cdata {
 	color: #838383
 }

-.sf_code_number, .sf_code_boolean {
+.sf_code_number,
+.sf_code_boolean {
 	color: #0E73A2
 }

-.sf_code_keyword, .sf_code_atrule, .sf_code_rule, .sf_code_attr-value, .sf_code_function, .sf_code_class-name, .sf_code_class, .sf_code_regex, .sf_code_important, .sf_code_variable, .sf_code_interpolation {
+.sf_code_keyword,
+.sf_code_atrule,
+.sf_code_rule,
+.sf_code_attr-value,
+.sf_code_function,
+.sf_code_class-name,
+.sf_code_class,
+.sf_code_regex,
+.sf_code_important,
+.sf_code_variable,
+.sf_code_interpolation {
 	color: #0E73A2
 }

-.sf_code_property, .sf_code_tag, .sf_code_constant, .sf_code_symbol, .sf_code_deleted {
+.sf_code_property,
+.sf_code_tag,
+.sf_code_constant,
+.sf_code_symbol,
+.sf_code_deleted {
 	color: #1B00CE
 }

-.sf_code_macro, .sf_code_entity, .sf_code_operator, .sf_code_url {
+.sf_code_macro,
+.sf_code_entity,
+.sf_code_operator,
+.sf_code_url {
 	color: #920448
 }

@ -221,7 +354,7 @@ code {

 u {
 	text-decoration: underline;
-	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%,var(--accent-text-color) 50%);
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, var(--accent-text-color) 50%);
 	background-repeat: repeat-x;
 	background-size: 2px 2px;
 	background-position: 0 1.05em
@ -339,7 +472,7 @@ blockquote {

 .address a {
 	color: #545454;
-	background-image: linear-gradient(to bottom, rgba(0,0,0,0) 50%,#0da35e 50%);
+	background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 50%, #0da35e 50%);
 	background-repeat: repeat-x;
 	background-size: 2px 2px;
 	background-position: 0 1.05em
@ -356,7 +489,7 @@ blockquote {
 	display: inline-block;
 	width: 1em;
 	height: 1em;
-	border: solid 1px rgba(0,0,0,0.3);
+	border: solid 1px rgba(0, 0, 0, 0.3);
 	border-radius: 50%;
 	margin-right: 0.1em;
 	position: relative;
@ -415,7 +548,7 @@ img {

 // Hugo renders footnotes with <p> tags nested inside <li>
 // This is need to prevent <p> breaking lines
-li > p {
+li>p {
 	display: inline-block;
 	margin-left: 16px;
 }
@ -434,25 +567,30 @@ h4 {
 	margin-bottom: .47143em
 }

-* + p,
-* + ul,
-* + ol,
-* + blockquote {
+*+p,
+*+ul,
+*+ol,
+*+blockquote {
 	/*margin-top: 1.6em;*/
 }

-svg + ul,
-svg + ol {
+svg+ul,
+svg+ol {
 	margin-top: 0;
 }

-* + h2,
-* + h3,
-* + h4 {
+*+h2,
+*+h3,
+*+h4 {
 	margin-top: 2.8em;
 }

-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
 	position: relative;
 }

@ -511,9 +649,10 @@ h6:before {
 	content: "#"
 }

-* + table {
+*+table {
 	margin-top: 12px;
 }
+
 table {
 	border-radius: 4px;
 	border: 1px solid var(--separator-color);
@ -569,3 +708,11 @@ li img {
 .turbolinks-progress-bar {
 	visibility: hidden;
 }
+
+@media only screen and (max-width: 460px) {
+
+	// decrease padding of notes when screen width is < 460px
+	main .note-wrapper {
+		padding: 1.57143em 1.1em;
+	}
+}
--- a/themes/zettels/assets/js/search.js
+++ b/themes/zettels/assets/js/search.js
@ -1,9 +1,14 @@
+// On localhost the root url is /MATH201 
+// On sasserisop the root url is /sasserisop
+const localhost = false;
+const root = localhost ? "" : "/MATH201";
+
 loadIndex()

 // Highlight with jQuery
 // from: https://stackoverflow.com/questions/41533785/how-to-highlight-search-text-in-html-with-the-help-of-js
 // @todo: This is the only use of jQuery. Find a vanila JS way
-jQuery.fn.highlight = function(pat) {
+jQuery.fn.highlight = function (pat) {

 	function innerHighlight(node, pat) {

@ -41,15 +46,15 @@ jQuery.fn.highlight = function(pat) {

 	}

-	return this.each(function() {
+	return this.each(function () {

 		innerHighlight(this, pat.toUpperCase());

 	});

- };
+};

-jQuery.fn.removeHighlight = function() {
+jQuery.fn.removeHighlight = function () {

 	function newNormalize(node) {

@ -83,7 +88,7 @@ jQuery.fn.removeHighlight = function() {

 	}

-	return this.find("span.highlighted").each(function() {
+	return this.find("span.highlighted").each(function () {

 		var thisParent = this.parentNode;
 		thisParent.replaceChild(this.firstChild, this);
@ -93,9 +98,9 @@ jQuery.fn.removeHighlight = function() {

 };

-$(function() {
+$(function () {

-	$('#search-input').bind('keyup change', function(ev) {
+	$('#search-input').bind('keyup change', function (ev) {

 		// pull in the new value
 		var searchTerm = $(this).val();
@ -104,21 +109,19 @@ $(function() {
 		$('body').removeHighlight();

 		// disable highlighting if empty
-		if ( searchTerm ) {
+		if (searchTerm) {

 			// highlight the new term
-			$('body').highlight( searchTerm );
+			$('body').highlight(searchTerm);

 		}
-
 	});
-
 });

 ///

 var scrollTop = 0
-document.addEventListener("turbolinks:before-render", function() {
+document.addEventListener("turbolinks:before-render", function () {
 	var search_index = document.getElementById("search-results");
 	var y = search_index.scrollTop;
 	scrollTop = y
@ -126,17 +129,16 @@ document.addEventListener("turbolinks:before-render", function() {

 })

-document.addEventListener("turbolinks:render", function() {
+document.addEventListener("turbolinks:render", function () {
 	var search_index = document.getElementById("search-results");
 	search_index.scrollTop = scrollTop
 })

-document.addEventListener("turbolinks:load", function() {
+document.addEventListener("turbolinks:load", function () {
 	setNoteWrapperState()


 	const current = window.location.href
-	  
 	var els = document.getElementsByTagName("a");
 	for (var i = 0, l = els.length; i < l; i++) {
 		var el = els[i];
@ -149,15 +151,63 @@ document.addEventListener("turbolinks:load", function() {
 	}
 })

-function loadIndex() {
-	  fetchJSON(function(response) {
+// load the lecture note links in homepage
+function load_lecture_links() {
+	// check if links have already been generated first
+	if ($("p.lecture-link").length == 0) {
+		fetchJSON(function (response) {
+			const notes = response;
+			// for homepage lecture links
+			const lecture_links = new Map();

+			notes.index.filter(n => !/^Drawing|^20/.test(n.title)).forEach(note => {
+				// Add lecture notes to a dictionary, and then sort them by lecture number.
+				// second last character of the title may be first digit of lecture number
+				const d1 = note.title[note.title.length - 2];
+				// find the lecture number, if there is one
+				if (/\d/.test(d1)) {
+					// it has a lecture number
+					// if the third last character is a digit, then the lecture number is 2 digits
+					const d2 = note.title[note.title.length - 3];
+					var lecture_number = /\d/.test(d2) ? Number(d2 + d1) : Number(d1);
+					// some lecture titles have the same last lecture number
+					if (lecture_links.has(lecture_number)) {
+						// prevents two lectures from having the same key
+						lecture_number += 0.5;
+					}
+					lecture_links.set(lecture_number, [note.title, note.permalink])
+				}
+			});
+			const sorted_links = new Map([...lecture_links.entries()].sort((a, b) => (a[0] - b[0])));
+			sorted_links.forEach(val => {
+				a_tag = document.createElement('a');
+				a_tag.innerText = val[0];	//title
+				a_tag.href = val[1];	//permalink
+				p_tag = document.createElement('p');
+				p_tag.append(a_tag);
+				p_tag.className = "lecture-link"
+				// Add lecture notes before third </br> tag in _index.md
+				$("#note-wrapper br:nth-of-type(3)").before(p_tag);
+			});
+		});
+	}
+}
+function loadIndex() {
+
+	fetchJSON(function (response) {
 		const notes = response;
 		const search_results = document.getElementById('search-results');
 		const tags = document.getElementById('tags');
 		const current_note = window.location.href;
-		notes.index.forEach(note => {
-			const title = '<h4>'+ note.title + '</h4>';
+
+		// sorted notes by lecture number
+		const lecture_notes = new Map();
+		const non_lecture_notes = [];
+
+		// Fixed a bug where the search results had unwanted notes. 
+		// The notes are now filtered first.
+		notes.index.filter(n => !/^Drawing|^20/.test(n.title)).forEach(note => {
+			const title = '<h4>' + note.title + '</h4>';
 			const summary = '<div>' + note.summary + '</div>';

 			const permalink = note.permalink
@ -179,14 +229,41 @@ function loadIndex() {
 			const tags = '<span style="display:none">' + note.tags + '</span>'
 			var list_content;
 			if (current_note === permalink) {
-				list_content = '<a href="/MATH201' + permalink + '" class="selected search-item" tabindex="0">' + title + summary + '</a>'
+				list_content = '<a href="' + permalink + '" class="selected search-item" tabindex="0">' + title + summary + '</a>'
 			} else {
-				list_content = '<a href="/MATH201' + permalink + '" class="search-item" tabindex="0">' + title + summary + thumbnail + tags + '</a>'
+				list_content = '<a href="' + permalink + '" class="search-item" tabindex="0">' + title + summary + thumbnail + tags + '</a>'
 			}

 			const child = document.createElement("li");
 			child.innerHTML = list_content;
-			search_results.append(child)
+
+			// Add lecture notes to a dictionary, and then sort them by lecture number.
+			// second last character of the title may be first digit of lecture number
+			const d1 = note.title[note.title.length - 2];
+			// find the lecture number, if there is one
+			if (/\d/.test(d1)) {
+				// it has a lecture number
+				// if the third last character is a digit, then the lecture number is 2 digits
+				const d2 = note.title[note.title.length - 3];
+				var lecture_number = /\d/.test(d2) ? Number(d2 + d1) : Number(d1);
+				if (lecture_notes.has(lecture_number)) {
+					// prevent lectures from having the same key
+					lecture_number += 0.5;
+				}
+				lecture_notes.set(lecture_number, child);
+			} else {
+				non_lecture_notes.push(child);
+			}
+		});
+		// sort notes by lecture number
+		const sorted_notes = new Map([...lecture_notes.entries()].sort((a, b) => (a[0] - b[0])));
+
+		// Add sorted notes first
+		sorted_notes.forEach(val => {
+			search_results.append(val);
+		});
+		non_lecture_notes.forEach(child => {
+			search_results.append(child);
 		});

 		// @todo: wip
@ -197,16 +274,15 @@ function loadIndex() {
 		// });
 		// 
 	});
-	}
+}


 function fetchJSON(callback) {
-	  
-	const requestURL = '/MATH201/index.json';
+	const requestURL = root + '/index.json';
 	const request = new XMLHttpRequest();
 	request.open('GET', requestURL, true);
 	request.responseType = 'json';
-	request.onreadystatechange = function() {
+	request.onreadystatechange = function () {
 		if (request.readyState === 4 && request.status === 200) {
 			callback(request.response);
 		}
@ -276,7 +352,7 @@ function performSearch() {
 }

 // Keyboard shortcuts
-document.addEventListener('keydown', function(evt) {
+document.addEventListener('keydown', function (evt) {

 	if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) {
 		document.getElementById("search-input").focus();
@ -291,12 +367,7 @@ document.addEventListener('keydown', function(evt) {

 var nav_is_visible = false;
 function handleNavVisibility() {
-	if (!nav_is_visible) {
-		showNav();
-
-	} else {
-		hideNav()
-	}
+	$("#search").toggle("slide");
 }

 function showNav() {
@ -315,7 +386,7 @@ function hideNav() {
 	document.getElementById("search-header").style.width = "0";
 	document.getElementById("search").style.opacity = 0;
 	document.getElementById("search-header").style.opacity = 0;
-	document.getElementById("main").style.marginLeft= "0";
+	document.getElementById("main").style.marginLeft = "0";
 	pullNoteWrapper()

 	nav_is_visible = false;
@ -344,7 +415,7 @@ const hoverTime = 300
 const fetchers = {}
 const doc = document.implementation.createHTMLDocument('prefetch')

-function fetchPage (url, success) {
+function fetchPage(url, success) {
 	const xhr = new XMLHttpRequest()
 	xhr.open('GET', url)
 	xhr.setRequestHeader('VND.PREFETCH', 'true')
@ -357,7 +428,7 @@ function fetchPage (url, success) {
 	xhr.send()
 }

-function prefetchTurbolink (url) {
+function prefetchTurbolink(url) {
 	fetchPage(url, responseText => {
 		doc.open()
 		doc.write(responseText)
@ -367,20 +438,20 @@ function prefetchTurbolink (url) {
 	})
 }

-function prefetch (url) {
+function prefetch(url) {
 	if (prefetched(url)) return
 	prefetchTurbolink(url)
 }

-function prefetched (url) {
+function prefetched(url) {
 	return location.href === url || Turbolinks.controller.cache.has(url)
 }

-function prefetching (url) {
+function prefetching(url) {
 	return !!fetchers[url]
 }

-function cleanup (event) {
+function cleanup(event) {
 	const element = event.target
 	clearTimeout(fetchers[element.href])
 	element.removeEventListener('mouseleave', cleanup)
--- a/themes/zettels/assets/js/thumbnails.js
+++ b/themes/zettels/assets/js/thumbnails.js
@ -1,19 +1,14 @@
-var thumbnail_mode = false
-function imageMode() {
-	const note_wrapper = document.getElementById('note-wrapper')
-	const images = note_wrapper.getElementsByTagName('img')
+// Resize images using an input range.
+function resizeImage() {
+	// make p tags wrapping img tags inline, to resize images correctly
+	$("#main p").has("img").css("display", "inline-block");

-	if (thumbnail_mode) {
-		var els = note_wrapper.getElementsByTagName('img')
-		for(var i = 0, all = els.length; i < all; i++){   
-			 els[i].classList.remove('thumbnail');
-		 }
-		 thumbnail_mode = false
-	} else {
-		var els = note_wrapper.getElementsByTagName('img')
-		for(var i = 0, all = els.length; i < all; i++){   
-			 els[i].classList.add('thumbnail');
-		 }
-		 thumbnail_mode = true
-	}
+	// toggle vectical input range
+	$("#toolbar input[type=range][orient=vertical]").slideToggle();
+
+	// resize image
+	$("#toolbar input[type=range][orient=vertical]").mouseup(function () {
+		$("#main p img").css("width", this.value + "%");
+		this.title = this.value + "%";
+	});
 }
--- a/themes/zettels/layouts/index.html
+++ b/themes/zettels/layouts/index.html
@ -1,8 +1,15 @@
 {{ define "main" }}
-	<p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p>
-	{{ partial "content.html" . }}
-	<p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</p></br>
+<p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p>
+{{ partial "content.html" . }}
+<p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</p></br>
 <p style="text-align: left;">Seeing people use these notes and benefitting from it makes me happy, so thanks for sticking around :) and remember to use what you learn for good! And to lead life with honor and integrity and be ethical engineers. Dr. Minev used to always stress the importance of this in his lectures, and I wholeheartedly agree.</p></br>
-	<p style="text-align: left;"><a href="https://git.sasserisop.com/Sasserisop/MATH201/src/branch/master">Gitea repository <img style="vertical-align: middle;" border="0" src="gitea-logo.svg" width="35" height="35"></a></p></br>
-	<p style="text-align: left;"><a href="https://discord.gg/G3DWjgvP3A" target="_blank" rel="noopener noreferrer">Community discord <img style="vertical-align: middle;" border="0" src="discord-logo.svg" width="35" height="35"></a></p>
+<p style="text-align: left;"><a href="https://git.sasserisop.com/Sasserisop/MATH201/src/branch/master">Gitea repository
+		<img style="vertical-align: middle;" border="0" src="gitea-logo.svg" width="35" height="35"></a></p></br>
+<p style="text-align: left;"><a href="https://discord.gg/G3DWjgvP3A" target="_blank" rel="noopener noreferrer">Community
+		discord <img style="vertical-align: middle;" border="0" src="discord-logo.svg" width="35" height="35"></a></p>
+<script>
+	$(function () {
+		load_lecture_links();
+	});
+</script>
 {{ end }}
--- a/themes/zettels/layouts/partials/search.html
+++ b/themes/zettels/layouts/partials/search.html
@ -6,13 +6,13 @@
 	- Focused current note
 -->
 <style>
-search-menu {
-	display: block;
-}
+	search-menu {
+		display: none;
+	}

-#search { 
+	#search {
 		height: 100%;
-	width: 0;
+		width: 300px;
 		position: fixed;
 		background: var(--background-search);
 		z-index: 1;
@ -21,66 +21,66 @@ search-menu {
 		border-right: 1px solid var(--separator-color);
 		overflow-x: hidden;
 		overflow-y: auto;
-	opacity: 0;

-	-ms-overflow-style: none;  /* IE and Edge */
-	scrollbar-width: none;  /* Firefox */
-}      
+		-ms-overflow-style: none;
+		/* IE and Edge */
+		scrollbar-width: none;
+		/* Firefox */
+	}

-#search::-webkit-scrollbar { display: none; }
+	#search::-webkit-scrollbar {
+		display: none;
+	}

-#search-header {
-	padding: 12px;
-	position: fixed;
-	padding-left: 12px;
-	padding-right: 12px;
+	#search-header {
+		padding: 12px 0;
+		margin: 0 auto;
 		background: var(--background-search);
 		width: 250px;
 		opacity: 1;
 		height: 50px;
 		z-index: 2;
 		border-bottom: 1px solid var(--separator-color);
-}
+	}

-#search .input-container {
+	#search .input-container {
 		position: relative
-}
+	}

-#search-input { 
+	#search-input {
 		width: 100%;
 		height: 24px;
 		border: 1px solid var(--separator-color);
 		border-radius: 4px;
-  padding-left: 16px;
+		padding-left: 24px;
 		background-color: white;
 		display: inline-block;
-}
+	}

-#search-input:focus {
+	#search-input:focus {
 		border: 1px solid var(--search-field-focused-color);
-}
+	}

-#search-header .input-container .search-icon {
+	#search-header .input-container .search-icon {
 		position: absolute;
 		top: 6px;
 		left: 8px;
 		fill: darkGray;
-}
+	}

-#search-results img {
+	#search-results img {
 		width: 122px;
 		height: 76px;
 		border: 1px solid var(--separator-color);
 		object-fit: cover;
-}
+	}

-#search-results { 
-	margin-top: 50px; 
+	#search-results {
 		overflow: auto;
 		height: 100%;
-}
+	}

-#search-results a {
+	#search-results a {
 		width: 100%;
 		padding-left: 25px;
 		padding-right: 25px;
@ -92,42 +92,46 @@ search-menu {
 		border-bottom: 1px solid var(--separator-color);
 		border-left: 6px solid var(--background-search);

-}
+	}

-#search-results a:first-child:hover, a:first-child:focus, .selected { 
+	#search-results a:first-child:hover,
+	a:first-child:focus,
+	.selected {
 		outline: 0;
 		background-color: var(--note-table-cell-selected-color);
 		border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
-}
+	}

-// Reseting default styles inside search component scope
-#search-results li { text-indent: 0; }
-#search-results li:before,
-#search-results h1:before,
-#search-results h2:before,
-#search-results h3:before,
-#search-results h4:before,
-#search-results h5:before,
-#search-results h6:before {
+	/* // Reseting default styles inside search component scope */
+	#search-results li {
+		text-indent: 0;
+	}
+
+	#search-results li:before,
+	#search-results h1:before,
+	#search-results h2:before,
+	#search-results h3:before,
+	#search-results h4:before,
+	#search-results h5:before,
+	#search-results h6:before {
 		content: "";
 		visibility: hidden;
 		display: none;
-}
+	}
 </style>


 <search-menu id="search" data-turbolinks-permanent>
 	<header id="search-header">
 		<div class="input-container">
-			 <svg aria-hidden="true" style="" class="search-icon" width="12" height="12" viewBox="0 0 18 18">
-			<path d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z">
+			<svg aria-hidden="true" class="search-icon" width="12" height="12" viewBox="0 0 18 18">
+				<path
+					d="M18 16.5l-5.14-5.18h-.35a7 7 0 10-1.19 1.19v.35L16.5 18l1.5-1.5zM12 7A5 5 0 112 7a5 5 0 0110 0z">
 				</path>
 			</svg>

-			 <input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0" placeholder="Search note">
-			 
-			
-			 
+			<input type="search" autocomplete="off" id="search-input" onkeyup="performSearch()" tabindex="0"
+				placeholder="Search Notes">
 		</div>
 	</header>

--- a/themes/zettels/layouts/partials/toolbar.html
+++ b/themes/zettels/layouts/partials/toolbar.html
@ -1,8 +1,5 @@
-<script>
-</script>
-
 <style>
-#toolbar {
+	#toolbar {
 		position: fixed;
 		top: 0;
 		right: 0;
@ -17,26 +14,45 @@

 		transition: 1s;
 		opacity: 0.5;
+		z-index: 1;

 		padding: 18px 0px 18px 0px;
-}
+	}

-#toolbar:hover {
+	#toolbar:hover {
 		opacity: 1;
-}
+	}

-#close-nav-icon {
+	#close-nav-icon {
 		display: none;
-}
+	}

+	#toolbar input[type=range][orient=vertical] {
+		appearance: slider-vertical;
+		display: none;
+	}
 </style>

 <aside id="toolbar">
-	<span style="cursor:pointer" id="open-nav-icon" onclick="handleNavVisibility()">
-	<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle fill="none" stroke="var(--text-base-color)" stroke-width="1.1" cx="9" cy="9" r="7"></circle><path fill="none" stroke="var(--text-base-color)" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path></svg>
+	<span title="Toggle Search Menu" style="cursor:pointer" id="open-nav-icon" onclick="handleNavVisibility()">
+		<svg width="18" height="18" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+			<circle fill="none" stroke="var(--text-base-color)" stroke-width="1.1" cx="9" cy="9" r="7"></circle>
+			<path fill="none" stroke="var(--text-base-color)" stroke-width="1.1" d="M14,14 L18,18 L14,14 Z"></path>
+		</svg>
 	</span>

-	<span onclick="imageMode()" style="cursor:pointer;margin-top:16px;">
-		<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><circle cx="16.1" cy="6.1" r="1.1"></circle><rect fill="none" stroke="var(--text-base-color" x=".5" y="2.5" width="19" height="15"></rect><polyline fill="none" stroke="var(--text-base-color" stroke-width="1.01" points="4,13 8,9 13,14"></polyline><polyline fill="none" stroke="var(--text-base-color)" stroke-width="1.01" points="11,12 12.5,10.5 16,14"></polyline></svg>
+	<span title="Adjusts Diagram Size" style="cursor:pointer;margin-top:16px;" onclick="resizeImage()">
+		<svg width="20" height="20" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg">
+			<circle cx="16.1" cy="6.1" r="1.1"></circle>
+			<rect fill="none" stroke="var(--text-base-color" x=".5" y="2.5" width="19" height="15"></rect>
+			<polyline fill="none" stroke="var(--text-base-color" stroke-width="1.01" points="4,13 8,9 13,14"></polyline>
+			<polyline fill="none" stroke="var(--text-base-color)" stroke-width="1.01" points="11,12 12.5,10.5 16,14">
+			</polyline>
+		</svg>
 	</span>
+	<input title="100%" type="range" orient="vertical" min="0" max="100" step="0.5" value="100">
 </aside>
+
+<script>
+
+</script>
Author	SHA1	Message	Date
Sasserisop	82b02513e6	Merge branch 'DashCampbell-master'	2024-02-05 20:06:00 -07:00
Sasserisop	c15b2386d4	merge branch 'DashCampbell/MATH201/master' into master	2024-02-05 20:05:39 -07:00
DashCampbell	fa560a5b29	made edits	2023-12-30 08:50:30 -07:00
DashCampbell	d69c9e8e88	Automated Lecture Note link generation in the homepage.	2023-12-29 21:47:03 -07:00
DashCampbell	6a0094f858	Updated UI	2023-12-29 20:05:27 -07:00
DashCampbell	4ddd503616	Updated search menu and toolbar	2023-12-29 16:17:03 -07:00