diff --git a/README.md b/README.md index 79186a6..aa96536 100644 --- 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``` diff --git a/content/_index.md b/content/_index.md index 7d7cf15..a2c485f 100644 --- a/content/_index.md +++ b/content/_index.md @@ -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 If we do bad on the exam, Petar will come after us with the Dirac delta 🤜💥
-[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) -
[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) diff --git a/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content b/resources/_gen/assets/scss/css/style.scss_f120a3f402b106f64b18d498afd3d82e.content index a485d54..c0c1913 100644 --- 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; } } diff --git a/themes/zettels/assets/css/style.scss b/themes/zettels/assets/css/style.scss index 0ab9b98..61e6bc5 100644 --- a/themes/zettels/assets/css/style.scss +++ b/themes/zettels/assets/css/style.scss @@ -1,4 +1,3 @@ - input { margin: 0; padding: 0; @@ -6,32 +5,113 @@ input { font: inherit; color: inherit; font-size: 100%; - vertical-align: baseline + vertical-align: baseline } *:focus { outline: none; } - + textarea, input[type="search"], input[type="text"], input[type="button"], input[type="submit"] { - -webkit-appearance: none; - border-radius: 0; + -webkit-appearance: none; + border-radius: 0; } + // @todo: class ::selection { - background: var(--selected-text-background-color); - } + 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

tags nested inside

  • // This is need to prevent

    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; + } +} \ No newline at end of file diff --git a/themes/zettels/assets/js/search.js b/themes/zettels/assets/js/search.js index 7feeed8..8024e7f 100644 --- 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) { @@ -15,16 +20,16 @@ jQuery.fn.highlight = function(pat) { if (pos >= 0) { - var spannode = document.createElement('span'); + var spannode = document.createElement('span'); spannode.className = 'highlighted'; - var middlebit = node.splitText(pos); - var endbit = middlebit.splitText(pat.length); - var middleclone = middlebit.cloneNode(true); + var middlebit = node.splitText(pos); + var endbit = middlebit.splitText(pat.length); + var middleclone = middlebit.cloneNode(true); spannode.appendChild(middleclone); middlebit.parentNode.replaceChild(spannode, middlebit); - skip = 1; + skip = 1; } @@ -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) { @@ -71,7 +76,7 @@ jQuery.fn.removeHighlight = function() { if (next == null || next.nodeType != 3) { continue; } var combined_text = child.nodeValue + next.nodeValue; - new_node = node.ownerDocument.createTextNode(combined_text); + new_node = node.ownerDocument.createTextNode(combined_text); node.insertBefore(new_node, child); node.removeChild(child); @@ -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,64 +109,109 @@ $(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() { - var search_index = document.getElementById("search-results"); - var y = search_index.scrollTop; - scrollTop = y +document.addEventListener("turbolinks:before-render", function () { + var search_index = document.getElementById("search-results"); + var y = search_index.scrollTop; + scrollTop = y + - }) -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]; - - if (el.href === current) { - el.classList.add("selected") - } else { - el.classList.remove("selected") - } - } + var els = document.getElementsByTagName("a"); + for (var i = 0, l = els.length; i < l; i++) { + var el = els[i]; + + if (el.href === current) { + el.classList.add("selected") + } else { + el.classList.remove("selected") + } + } }) +// 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
    tag in _index.md + $("#note-wrapper br:nth-of-type(3)").before(p_tag); + }); + }); + } +} function loadIndex() { - fetchJSON(function(response) { - + + 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 = '

    '+ note.title + '

    '; + + // 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 = '

    ' + note.title + '

    '; const summary = '
    ' + note.summary + '
    '; - + const permalink = note.permalink - + var thumbnail = "" if (note.thumbnail === "") { thumbnail = "" @@ -175,20 +225,47 @@ function loadIndex() { // use lazy loading. thumbnail = '@attachments' } - + const tags = '' + note.tags + '' var list_content; if (current_note === permalink) { - list_content = '' + title + summary + '' + list_content = '' + title + summary + '' } else { - list_content = '' + title + summary + thumbnail + tags + '' + list_content = '' + title + summary + thumbnail + tags + '' } - + 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 // notes.tags.forEach(tag => { // const child = document.createElement("li"); @@ -196,20 +273,19 @@ function loadIndex() { // tags.append(child) // }); // - }); - } - - + }); +} + + 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() { - if (request.readyState === 4 && request.status === 200) { - callback(request.response); - } + request.onreadystatechange = function () { + if (request.readyState === 4 && request.status === 200) { + callback(request.response); + } }; request.send(null); } @@ -217,96 +293,91 @@ function fetchJSON(callback) { function focusTag(a) { showNav() performSearchWith(a.innerText) - + } function performSearchWith(query) { - - // document.getElementById('search-input').value = query - - var filter, ul, li, a, i, txtValue; - - filter = query.toLowerCase(); - filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); - - var re = new RegExp(filter, 'g'); - - ul = document.getElementById("search-results"); - li = ul.getElementsByTagName('li'); - for (i = 0; i < li.length; i++) { + // document.getElementById('search-input').value = query + + var filter, ul, li, a, i, txtValue; + + filter = query.toLowerCase(); + filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); + + var re = new RegExp(filter, 'g'); + + ul = document.getElementById("search-results"); + li = ul.getElementsByTagName('li'); + + for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; - + txtValue = a.textContent || a.innerText; if (txtValue.toLowerCase().indexOf(filter) > -1) { - li[i].style.display = "block"; - + li[i].style.display = "block"; + } else { - li[i].style.display = "none"; + li[i].style.display = "none"; } - } + } } function performSearch() { - - var input, filter, ul, li, a, i, txtValue; - input = document.getElementById('search-input'); - - filter = input.value.toLowerCase(); - filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); - - var re = new RegExp(filter, 'g'); - - ul = document.getElementById("search-results"); - li = ul.getElementsByTagName('li'); - for (i = 0; i < li.length; i++) { + var input, filter, ul, li, a, i, txtValue; + input = document.getElementById('search-input'); + + filter = input.value.toLowerCase(); + filter = filter.replace('/[.*+?^${}()|[\]\\]/g', '\\$&'); + + var re = new RegExp(filter, 'g'); + + ul = document.getElementById("search-results"); + li = ul.getElementsByTagName('li'); + + for (i = 0; i < li.length; i++) { a = li[i].getElementsByTagName("a")[0]; - + txtValue = a.textContent || a.innerText; if (txtValue.toLowerCase().indexOf(filter) > -1) { - li[i].style.display = "block"; - + li[i].style.display = "block"; + } else { - li[i].style.display = "none"; + li[i].style.display = "none"; } - } + } } // 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(); handleNavVisibility() } - + if (evt.key === "Escape" || evt.key === "Esc" | evt.keyCode === 27) { hideNav() } - + }); var nav_is_visible = false; function handleNavVisibility() { - if (!nav_is_visible) { - showNav(); - - } else { - hideNav() - } + $("#search").toggle("slide"); } function showNav() { - + document.getElementById("search").style.width = "300px"; document.getElementById("search").style.opacity = 1; document.getElementById("search-header").style.opacity = 1; document.getElementById("search-header").style.width = "299px"; pushNoteWrapper() - + nav_is_visible = true; } @@ -315,9 +386,9 @@ 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,54 +415,54 @@ const hoverTime = 300 const fetchers = {} const doc = document.implementation.createHTMLDocument('prefetch') -function fetchPage (url, success) { - const xhr = new XMLHttpRequest() - xhr.open('GET', url) - xhr.setRequestHeader('VND.PREFETCH', 'true') - xhr.setRequestHeader('Accept', 'text/html') - xhr.onreadystatechange = () => { - if (xhr.readyState !== XMLHttpRequest.DONE) return - if (xhr.status !== 200) return - success(xhr.responseText) - } - xhr.send() +function fetchPage(url, success) { + const xhr = new XMLHttpRequest() + xhr.open('GET', url) + xhr.setRequestHeader('VND.PREFETCH', 'true') + xhr.setRequestHeader('Accept', 'text/html') + xhr.onreadystatechange = () => { + if (xhr.readyState !== XMLHttpRequest.DONE) return + if (xhr.status !== 200) return + success(xhr.responseText) + } + xhr.send() } -function prefetchTurbolink (url) { - fetchPage(url, responseText => { - doc.open() - doc.write(responseText) - doc.close() - const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement) - Turbolinks.controller.cache.put(url, snapshot) - }) +function prefetchTurbolink(url) { + fetchPage(url, responseText => { + doc.open() + doc.write(responseText) + doc.close() + const snapshot = Turbolinks.Snapshot.fromHTMLElement(doc.documentElement) + Turbolinks.controller.cache.put(url, snapshot) + }) } -function prefetch (url) { - if (prefetched(url)) return - prefetchTurbolink(url) +function prefetch(url) { + if (prefetched(url)) return + prefetchTurbolink(url) } -function prefetched (url) { - return location.href === url || Turbolinks.controller.cache.has(url) +function prefetched(url) { + return location.href === url || Turbolinks.controller.cache.has(url) } -function prefetching (url) { - return !!fetchers[url] +function prefetching(url) { + return !!fetchers[url] } -function cleanup (event) { - const element = event.target - clearTimeout(fetchers[element.href]) - element.removeEventListener('mouseleave', cleanup) +function cleanup(event) { + const element = event.target + clearTimeout(fetchers[element.href]) + element.removeEventListener('mouseleave', cleanup) } document.addEventListener('mouseover', event => { - if (!event.target.dataset.prefetch) return - const url = event.target.href - if (prefetched(url)) return - if (prefetching(url)) return - cleanup(event) - event.target.addEventListener('mouseleave', cleanup) - fetchers[url] = setTimeout(() => prefetch(url), hoverTime) + if (!event.target.dataset.prefetch) return + const url = event.target.href + if (prefetched(url)) return + if (prefetching(url)) return + cleanup(event) + event.target.addEventListener('mouseleave', cleanup) + fetchers[url] = setTimeout(() => prefetch(url), hoverTime) }) diff --git a/themes/zettels/assets/js/thumbnails.js b/themes/zettels/assets/js/thumbnails.js index 604e9b6..767171a 100644 --- 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') - - 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 - } +// 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"); + + // 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 + "%"; + }); } \ No newline at end of file diff --git a/themes/zettels/layouts/index.html b/themes/zettels/layouts/index.html index 2be5127..e506610 100644 --- a/themes/zettels/layouts/index.html +++ b/themes/zettels/layouts/index.html @@ -1,7 +1,14 @@ {{ define "main" }} -

    Back to Sasserisop homepage

    - {{ partial "content.html" . }} -

    ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦


    -

    Gitea repository


    -

    Community discord

    -{{ end }} +

    Back to Sasserisop homepage

    +{{ partial "content.html" . }} +

    ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦ ❦


    +

    Gitea repository +


    +

    Community + discord

    + +{{ end }} \ No newline at end of file diff --git a/themes/zettels/layouts/partials/search.html b/themes/zettels/layouts/partials/search.html index 33254ae..d2f5444 100644 --- a/themes/zettels/layouts/partials/search.html +++ b/themes/zettels/layouts/partials/search.html @@ -6,130 +6,134 @@ - Focused current note --> + color: var(--text-base-color); + 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 { + 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 { + content: ""; + visibility: hidden; + display: none; + } + -
    -
    - - - - - - -
    -
    - - +
    +
    + + + +
    +
    + +     \ No newline at end of file diff --git a/themes/zettels/layouts/partials/toolbar.html b/themes/zettels/layouts/partials/toolbar.html index 2a95058..f570864 100644 --- a/themes/zettels/layouts/partials/toolbar.html +++ b/themes/zettels/layouts/partials/toolbar.html @@ -1,42 +1,58 @@ - - \ No newline at end of file + + + + \ No newline at end of file