master #1

Open
DashCampbell wants to merge 4 commits from DashCampbell/MATH201:master into master
9 changed files with 755 additions and 399 deletions

View File

@ -13,8 +13,9 @@ Yes. Consider sharing it with your classmates ;)
Here's a quick rundown of how to build from source: 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``` 1) download or clone the repository ```git clone https://git.sasserisop.com/Sasserisop/MATH201```
2) make sure you have hugo installed 2) make sure you have hugo installed
3) open a command prompt in the MATH201/ directory and run the command ```hugo server --disableFastRender``` 3) if you are using localhost, inside of themes/zettels/assets/js/search.js set 'const localhost' to true.
4) visit your site by opening http://localhost:1313 on your browser. 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: Now if you want to host it on a live website, you can run:
```hugo``` ```hugo```

View File

@ -5,32 +5,6 @@ I have written these notes for myself, I thought it would be cool to share them.
Good luck on the final! <3 Good luck on the final! <3
If we do bad on the exam, Petar will come after us with the Dirac delta 🤜💥 If we do bad on the exam, Petar will come after us with the Dirac delta 🤜💥
</br> </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> </br>
[How to solve any DE, a flow chart](Solve-any-DE.png) (Last updated Oct 1st, needs revision. But it gives a nice overview.) [How to solve any DE, a flow chart](Solve-any-DE.png) (Last updated Oct 1st, needs revision. But it gives a nice overview.)
[Big LT table (.png)](drawings/bigLTtable.png) [Big LT table (.png)](drawings/bigLTtable.png)

View File

@ -26,7 +26,87 @@ input[type="submit"] {
Bear base styles Bear base styles
(Retrieved from official app, all credits belong to Bear Team) (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; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -37,29 +117,48 @@ html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockq
html { html {
line-height: 1; } line-height: 1; }
ol, ul { ol,
ul {
list-style: none; } list-style: none; }
table { table {
border-collapse: collapse; border-collapse: collapse;
border-spacing: 0; } border-spacing: 0; }
caption, th, td { caption,
th,
td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle; } vertical-align: middle; }
q, blockquote { q,
blockquote {
quotes: none; } quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { q:before,
q:after,
blockquote:before,
blockquote:after {
content: ""; content: "";
content: none; } content: none; }
a img { a img {
border: none; } 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; } display: block; }
* { * {
@ -80,7 +179,8 @@ body {
background: var(--background); background: var(--background);
color: var(--text-base-color); color: var(--text-base-color);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: "AvenirNext-Regular"; } font-family: "AvenirNext-Regular";
position: relative; }
a { a {
color: var(--link-text-color); color: var(--link-text-color);
@ -117,10 +217,14 @@ hr {
background-color: #dedede; background-color: #dedede;
margin: -1px auto 1.57143em auto; } margin: -1px auto 1.57143em auto; }
ul, ol { ul,
ol {
margin-bottom: .31429em; } margin-bottom: .31429em; }
ul ul, ul ol, ol ul, ol ol { ul ul,
ul ol,
ol ul,
ol ol {
margin-bottom: 0px; } margin-bottom: 0px; }
ol { ol {
@ -135,11 +239,13 @@ ol li:before {
min-width: 1em; min-width: 1em;
margin-right: 0.5em; } margin-right: 0.5em; }
b, strong { b,
strong {
font-family: "Menlo-Regular"; font-family: "Menlo-Regular";
font-weight: bold; } font-weight: bold; }
i, em { i,
em {
font-family: "Menlo-Regular"; font-family: "Menlo-Regular";
font-style: italic; } font-style: italic; }
@ -151,22 +257,48 @@ code {
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; } 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; } 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; } color: #838383; }
.sf_code_number, .sf_code_boolean { .sf_code_number,
.sf_code_boolean {
color: #0E73A2; } 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; } 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; } 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; } color: #920448; }
.note-wrapper { .note-wrapper {
@ -367,7 +499,12 @@ svg + ol {
* + h4 { * + h4 {
margin-top: 2.8em; } margin-top: 2.8em; }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
position: relative; } position: relative; }
h1:before, h1:before,
@ -458,3 +595,7 @@ li img {
.turbolinks-progress-bar { .turbolinks-progress-bar {
visibility: hidden; } visibility: hidden; }
@media only screen and (max-width: 460px) {
main .note-wrapper {
padding: 1.57143em 1.1em; } }

View File

@ -1,4 +1,3 @@
input { input {
margin: 0; margin: 0;
padding: 0; padding: 0;
@ -21,17 +20,98 @@ input[type="submit"] {
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 0; border-radius: 0;
} }
// @todo: class // @todo: class
::selection { ::selection {
background: var(--selected-text-background-color); background: var(--selected-text-background-color);
} }
/** /**
Bear base styles Bear base styles
(Retrieved from official app, all credits belong to Bear Team) (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; margin: 0;
padding: 0; padding: 0;
border: 0; border: 0;
@ -44,7 +124,8 @@ html {
line-height: 1 line-height: 1
} }
ol, ul { ol,
ul {
list-style: none list-style: none
} }
@ -53,17 +134,23 @@ table {
border-spacing: 0 border-spacing: 0
} }
caption, th, td { caption,
th,
td {
text-align: left; text-align: left;
font-weight: normal; font-weight: normal;
vertical-align: middle vertical-align: middle
} }
q, blockquote { q,
blockquote {
quotes: none quotes: none
} }
q:before, q:after, blockquote:before, blockquote:after { q:before,
q:after,
blockquote:before,
blockquote:after {
content: ""; content: "";
content: none content: none
} }
@ -71,7 +158,20 @@ q:before, q:after, blockquote:before, blockquote:after {
a img { a img {
border: none 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 display: block
} }
@ -97,7 +197,8 @@ body {
// @todo: not working // @todo: not working
color: var(--text-base-color); color: var(--text-base-color);
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
font-family: "AvenirNext-Regular" font-family: "AvenirNext-Regular";
position: relative;
} }
a { a {
@ -141,11 +242,15 @@ hr {
margin: -1px auto 1.57143em auto margin: -1px auto 1.57143em auto
} }
ul, ol { ul,
ol {
margin-bottom: .31429em; margin-bottom: .31429em;
} }
ul ul, ul ol, ol ul, ol ol { ul ul,
ul ol,
ol ul,
ol ol {
margin-bottom: 0px margin-bottom: 0px
} }
@ -163,13 +268,15 @@ ol li:before {
margin-right: 0.5em margin-right: 0.5em
} }
b, strong { b,
strong {
//font-family: "AvenirNext-Bold"; //font-family: "AvenirNext-Bold";
font-family: "Menlo-Regular"; font-family: "Menlo-Regular";
font-weight: bold; font-weight: bold;
} }
i, em { i,
em {
//font-family: "AvenirNext-Italic"; //font-family: "AvenirNext-Italic";
font-family: "Menlo-Regular"; font-family: "Menlo-Regular";
font-style: italic; font-style: italic;
@ -185,27 +292,53 @@ code {
white-space: nowrap 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 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 color: #838383
} }
.sf_code_number, .sf_code_boolean { .sf_code_number,
.sf_code_boolean {
color: #0E73A2 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 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 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 color: #920448
} }
@ -221,7 +354,7 @@ code {
u { u {
text-decoration: underline; 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-repeat: repeat-x;
background-size: 2px 2px; background-size: 2px 2px;
background-position: 0 1.05em background-position: 0 1.05em
@ -339,7 +472,7 @@ blockquote {
.address a { .address a {
color: #545454; 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-repeat: repeat-x;
background-size: 2px 2px; background-size: 2px 2px;
background-position: 0 1.05em background-position: 0 1.05em
@ -356,7 +489,7 @@ blockquote {
display: inline-block; display: inline-block;
width: 1em; width: 1em;
height: 1em; height: 1em;
border: solid 1px rgba(0,0,0,0.3); border: solid 1px rgba(0, 0, 0, 0.3);
border-radius: 50%; border-radius: 50%;
margin-right: 0.1em; margin-right: 0.1em;
position: relative; position: relative;
@ -415,7 +548,7 @@ img {
// Hugo renders footnotes with <p> tags nested inside <li> // Hugo renders footnotes with <p> tags nested inside <li>
// This is need to prevent <p> breaking lines // This is need to prevent <p> breaking lines
li > p { li>p {
display: inline-block; display: inline-block;
margin-left: 16px; margin-left: 16px;
} }
@ -434,25 +567,30 @@ h4 {
margin-bottom: .47143em margin-bottom: .47143em
} }
* + p, *+p,
* + ul, *+ul,
* + ol, *+ol,
* + blockquote { *+blockquote {
/*margin-top: 1.6em;*/ /*margin-top: 1.6em;*/
} }
svg + ul, svg+ul,
svg + ol { svg+ol {
margin-top: 0; margin-top: 0;
} }
* + h2, *+h2,
* + h3, *+h3,
* + h4 { *+h4 {
margin-top: 2.8em; margin-top: 2.8em;
} }
h1, h2, h3, h4, h5, h6 { h1,
h2,
h3,
h4,
h5,
h6 {
position: relative; position: relative;
} }
@ -511,9 +649,10 @@ h6:before {
content: "#" content: "#"
} }
* + table { *+table {
margin-top: 12px; margin-top: 12px;
} }
table { table {
border-radius: 4px; border-radius: 4px;
border: 1px solid var(--separator-color); border: 1px solid var(--separator-color);
@ -569,3 +708,11 @@ li img {
.turbolinks-progress-bar { .turbolinks-progress-bar {
visibility: hidden; 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;
}
}

View File

@ -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() loadIndex()
// Highlight with jQuery // Highlight with jQuery
// from: https://stackoverflow.com/questions/41533785/how-to-highlight-search-text-in-html-with-the-help-of-js // 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 // @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) { 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()); innerHighlight(this, pat.toUpperCase());
}); });
}; };
jQuery.fn.removeHighlight = function() { jQuery.fn.removeHighlight = function () {
function newNormalize(node) { 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; var thisParent = this.parentNode;
thisParent.replaceChild(this.firstChild, this); 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 // pull in the new value
var searchTerm = $(this).val(); var searchTerm = $(this).val();
@ -104,21 +109,19 @@ $(function() {
$('body').removeHighlight(); $('body').removeHighlight();
// disable highlighting if empty // disable highlighting if empty
if ( searchTerm ) { if (searchTerm) {
// highlight the new term // highlight the new term
$('body').highlight( searchTerm ); $('body').highlight(searchTerm);
} }
}); });
}); });
/// ///
var scrollTop = 0 var scrollTop = 0
document.addEventListener("turbolinks:before-render", function() { document.addEventListener("turbolinks:before-render", function () {
var search_index = document.getElementById("search-results"); var search_index = document.getElementById("search-results");
var y = search_index.scrollTop; var y = search_index.scrollTop;
scrollTop = y 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"); var search_index = document.getElementById("search-results");
search_index.scrollTop = scrollTop search_index.scrollTop = scrollTop
}) })
document.addEventListener("turbolinks:load", function() { document.addEventListener("turbolinks:load", function () {
setNoteWrapperState() setNoteWrapperState()
const current = window.location.href const current = window.location.href
var els = document.getElementsByTagName("a"); var els = document.getElementsByTagName("a");
for (var i = 0, l = els.length; i < l; i++) { for (var i = 0, l = els.length; i < l; i++) {
var el = els[i]; var el = els[i];
@ -149,15 +151,63 @@ document.addEventListener("turbolinks:load", function() {
} }
}) })
function loadIndex() { // load the lecture note links in homepage
fetchJSON(function(response) { 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 notes = response;
const search_results = document.getElementById('search-results'); const search_results = document.getElementById('search-results');
const tags = document.getElementById('tags'); const tags = document.getElementById('tags');
const current_note = window.location.href; 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 summary = '<div>' + note.summary + '</div>';
const permalink = note.permalink const permalink = note.permalink
@ -179,14 +229,41 @@ function loadIndex() {
const tags = '<span style="display:none">' + note.tags + '</span>' const tags = '<span style="display:none">' + note.tags + '</span>'
var list_content; var list_content;
if (current_note === permalink) { 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 { } 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"); const child = document.createElement("li");
child.innerHTML = list_content; 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 // @todo: wip
@ -197,16 +274,15 @@ function loadIndex() {
// }); // });
// //
}); });
} }
function fetchJSON(callback) { function fetchJSON(callback) {
const requestURL = root + '/index.json';
const requestURL = '/MATH201/index.json';
const request = new XMLHttpRequest(); const request = new XMLHttpRequest();
request.open('GET', requestURL, true); request.open('GET', requestURL, true);
request.responseType = 'json'; request.responseType = 'json';
request.onreadystatechange = function() { request.onreadystatechange = function () {
if (request.readyState === 4 && request.status === 200) { if (request.readyState === 4 && request.status === 200) {
callback(request.response); callback(request.response);
} }
@ -276,7 +352,7 @@ function performSearch() {
} }
// Keyboard shortcuts // Keyboard shortcuts
document.addEventListener('keydown', function(evt) { document.addEventListener('keydown', function (evt) {
if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) { if (evt.metaKey && evt.which === 75 || evt.ctrlKey && evt.which === 75) {
document.getElementById("search-input").focus(); document.getElementById("search-input").focus();
@ -291,12 +367,7 @@ document.addEventListener('keydown', function(evt) {
var nav_is_visible = false; var nav_is_visible = false;
function handleNavVisibility() { function handleNavVisibility() {
if (!nav_is_visible) { $("#search").toggle("slide");
showNav();
} else {
hideNav()
}
} }
function showNav() { function showNav() {
@ -315,7 +386,7 @@ function hideNav() {
document.getElementById("search-header").style.width = "0"; document.getElementById("search-header").style.width = "0";
document.getElementById("search").style.opacity = 0; document.getElementById("search").style.opacity = 0;
document.getElementById("search-header").style.opacity = 0; document.getElementById("search-header").style.opacity = 0;
document.getElementById("main").style.marginLeft= "0"; document.getElementById("main").style.marginLeft = "0";
pullNoteWrapper() pullNoteWrapper()
nav_is_visible = false; nav_is_visible = false;
@ -344,7 +415,7 @@ const hoverTime = 300
const fetchers = {} const fetchers = {}
const doc = document.implementation.createHTMLDocument('prefetch') const doc = document.implementation.createHTMLDocument('prefetch')
function fetchPage (url, success) { function fetchPage(url, success) {
const xhr = new XMLHttpRequest() const xhr = new XMLHttpRequest()
xhr.open('GET', url) xhr.open('GET', url)
xhr.setRequestHeader('VND.PREFETCH', 'true') xhr.setRequestHeader('VND.PREFETCH', 'true')
@ -357,7 +428,7 @@ function fetchPage (url, success) {
xhr.send() xhr.send()
} }
function prefetchTurbolink (url) { function prefetchTurbolink(url) {
fetchPage(url, responseText => { fetchPage(url, responseText => {
doc.open() doc.open()
doc.write(responseText) doc.write(responseText)
@ -367,20 +438,20 @@ function prefetchTurbolink (url) {
}) })
} }
function prefetch (url) { function prefetch(url) {
if (prefetched(url)) return if (prefetched(url)) return
prefetchTurbolink(url) prefetchTurbolink(url)
} }
function prefetched (url) { function prefetched(url) {
return location.href === url || Turbolinks.controller.cache.has(url) return location.href === url || Turbolinks.controller.cache.has(url)
} }
function prefetching (url) { function prefetching(url) {
return !!fetchers[url] return !!fetchers[url]
} }
function cleanup (event) { function cleanup(event) {
const element = event.target const element = event.target
clearTimeout(fetchers[element.href]) clearTimeout(fetchers[element.href])
element.removeEventListener('mouseleave', cleanup) element.removeEventListener('mouseleave', cleanup)

View File

@ -1,19 +1,14 @@
var thumbnail_mode = false // Resize images using an input range.
function imageMode() { function resizeImage() {
const note_wrapper = document.getElementById('note-wrapper') // make p tags wrapping img tags inline, to resize images correctly
const images = note_wrapper.getElementsByTagName('img') $("#main p").has("img").css("display", "inline-block");
if (thumbnail_mode) { // toggle vectical input range
var els = note_wrapper.getElementsByTagName('img') $("#toolbar input[type=range][orient=vertical]").slideToggle();
for(var i = 0, all = els.length; i < all; i++){
els[i].classList.remove('thumbnail'); // resize image
} $("#toolbar input[type=range][orient=vertical]").mouseup(function () {
thumbnail_mode = false $("#main p img").css("width", this.value + "%");
} else { this.title = this.value + "%";
var els = note_wrapper.getElementsByTagName('img') });
for(var i = 0, all = els.length; i < all; i++){
els[i].classList.add('thumbnail');
}
thumbnail_mode = true
}
} }

View File

@ -1,7 +1,14 @@
{{ define "main" }} {{ define "main" }}
<p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p> <p style="text-align: center;"><a href="http://sasserisop.com">Back to Sasserisop homepage</a></p>
{{ partial "content.html" . }} {{ partial "content.html" . }}
<p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</p></br> <p style="font-size:25pt;">❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦</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://git.sasserisop.com/Sasserisop/MATH201/src/branch/master">Gitea repository
<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> <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 }} {{ end }}

View File

@ -6,13 +6,13 @@
- Focused current note - Focused current note
--> -->
<style> <style>
search-menu { search-menu {
display: block; display: none;
} }
#search { #search {
height: 100%; height: 100%;
width: 0; width: 300px;
position: fixed; position: fixed;
background: var(--background-search); background: var(--background-search);
z-index: 1; z-index: 1;
@ -21,66 +21,66 @@ search-menu {
border-right: 1px solid var(--separator-color); border-right: 1px solid var(--separator-color);
overflow-x: hidden; overflow-x: hidden;
overflow-y: auto; overflow-y: auto;
opacity: 0;
-ms-overflow-style: none; /* IE and Edge */ -ms-overflow-style: none;
scrollbar-width: none; /* Firefox */ /* IE and Edge */
} scrollbar-width: none;
/* Firefox */
}
#search::-webkit-scrollbar { display: none; } #search::-webkit-scrollbar {
display: none;
}
#search-header { #search-header {
padding: 12px; padding: 12px 0;
position: fixed; margin: 0 auto;
padding-left: 12px;
padding-right: 12px;
background: var(--background-search); background: var(--background-search);
width: 250px; width: 250px;
opacity: 1; opacity: 1;
height: 50px; height: 50px;
z-index: 2; z-index: 2;
border-bottom: 1px solid var(--separator-color); border-bottom: 1px solid var(--separator-color);
} }
#search .input-container { #search .input-container {
position: relative position: relative
} }
#search-input { #search-input {
width: 100%; width: 100%;
height: 24px; height: 24px;
border: 1px solid var(--separator-color); border: 1px solid var(--separator-color);
border-radius: 4px; border-radius: 4px;
padding-left: 16px; padding-left: 24px;
background-color: white; background-color: white;
display: inline-block; display: inline-block;
} }
#search-input:focus { #search-input:focus {
border: 1px solid var(--search-field-focused-color); border: 1px solid var(--search-field-focused-color);
} }
#search-header .input-container .search-icon { #search-header .input-container .search-icon {
position: absolute; position: absolute;
top: 6px; top: 6px;
left: 8px; left: 8px;
fill: darkGray; fill: darkGray;
} }
#search-results img { #search-results img {
width: 122px; width: 122px;
height: 76px; height: 76px;
border: 1px solid var(--separator-color); border: 1px solid var(--separator-color);
object-fit: cover; object-fit: cover;
} }
#search-results { #search-results {
margin-top: 50px;
overflow: auto; overflow: auto;
height: 100%; height: 100%;
} }
#search-results a { #search-results a {
width: 100%; width: 100%;
padding-left: 25px; padding-left: 25px;
padding-right: 25px; padding-right: 25px;
@ -92,42 +92,46 @@ search-menu {
border-bottom: 1px solid var(--separator-color); border-bottom: 1px solid var(--separator-color);
border-left: 6px solid var(--background-search); 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; outline: 0;
background-color: var(--note-table-cell-selected-color); background-color: var(--note-table-cell-selected-color);
border-left: 6px solid var(--note-table-cell-ribbon-color) !important; border-left: 6px solid var(--note-table-cell-ribbon-color) !important;
} }
// Reseting default styles inside search component scope /* // Reseting default styles inside search component scope */
#search-results li { text-indent: 0; } #search-results li {
#search-results li:before, text-indent: 0;
#search-results h1:before, }
#search-results h2:before,
#search-results h3:before, #search-results li:before,
#search-results h4:before, #search-results h1:before,
#search-results h5:before, #search-results h2:before,
#search-results h6:before { #search-results h3:before,
#search-results h4:before,
#search-results h5:before,
#search-results h6:before {
content: ""; content: "";
visibility: hidden; visibility: hidden;
display: none; display: none;
} }
</style> </style>
<search-menu id="search" data-turbolinks-permanent> <search-menu id="search" data-turbolinks-permanent>
<header id="search-header"> <header id="search-header">
<div class="input-container"> <div class="input-container">
<svg aria-hidden="true" style="" class="search-icon" width="12" height="12" viewBox="0 0 18 18"> <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
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> </path>
</svg> </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> </div>
</header> </header>

View File

@ -1,8 +1,5 @@
<script>
</script>
<style> <style>
#toolbar { #toolbar {
position: fixed; position: fixed;
top: 0; top: 0;
right: 0; right: 0;
@ -17,26 +14,45 @@
transition: 1s; transition: 1s;
opacity: 0.5; opacity: 0.5;
z-index: 1;
padding: 18px 0px 18px 0px; padding: 18px 0px 18px 0px;
} }
#toolbar:hover { #toolbar:hover {
opacity: 1; opacity: 1;
} }
#close-nav-icon { #close-nav-icon {
display: none; display: none;
} }
#toolbar input[type=range][orient=vertical] {
appearance: slider-vertical;
display: none;
}
</style> </style>
<aside id="toolbar"> <aside id="toolbar">
<span style="cursor:pointer" id="open-nav-icon" onclick="handleNavVisibility()"> <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> <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>
<span onclick="imageMode()" style="cursor:pointer;margin-top:16px;"> <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> <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> </span>
<input title="100%" type="range" orient="vertical" min="0" max="100" step="0.5" value="100">
</aside> </aside>
<script>
</script>