update search.js key weighting

format article browsing list
Update screenshot
2021-12-22 21:46:16 +00:00 · 2021-12-22 21:45:20 +00:00 · 2021-12-22 21:25:20 +00:00 · 2021-12-22 21:16:09 +00:00 · 2021-12-22 17:46:01 +00:00
13 changed files with 241 additions and 46 deletions
--- a/1
+++ b/1
@@ -6,6 +6,7 @@ install:
 	cp styles.css /opt/notes2web
 	cp fuse.js /opt/notes2web
 	cp search.js /opt/notes2web
+	cp toc_search.js /opt/notes2web

 uninstall:
 	rm -rf /usr/local/bin/notes2web.py /opt/notes2web
--- a/notes2web.py
+++ b/notes2web.py
@@ -116,6 +116,7 @@ def get_args():
    parser.add_argument('-F', '--force', action="store_true", help="Generate new output html even if source file was modified before output html")
    parser.add_argument('--fuse', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/fuse.js'))
    parser.add_argument('--searchjs', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/search.js'))
+    parser.add_argument('--tocsearchjs', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/toc_search.js'))
    return parser.parse_args()


@@ -331,11 +332,11 @@ def main(args):

        for entry in indexentries:
            html += (
-                    '<div class="article">'
+                    '<li class="article">'
                        f'<a href="{entry["path"]}">'
                            f'{entry["title"]}{"/" if entry["isdirectory"] else ""}'
                        '</a>'
-                    '</div>'
+                    '</li>'
            )
        html += INDEX_TEMPLATE_FOOT

@@ -345,6 +346,7 @@ def main(args):
    shutil.copyfile(args.stylesheet, args.output_dir.joinpath('styles.css'))
    shutil.copyfile(args.fuse, args.output_dir.joinpath('fuse.js'))
    shutil.copyfile(args.searchjs, args.output_dir.joinpath('search.js'))
+    shutil.copyfile(args.tocsearchjs, args.output_dir.joinpath('toc_search.js'))
    with open(args.output_dir.joinpath('index.html'), 'w+') as fp:
        with open(args.home_index) as fp2:
            html = re.sub(r'\$title\$', args.output_dir.parts[0], fp2.read())
--- a/screenshot.png
+++ b/screenshot.png
--- a/search.js
+++ b/search.js
@@ -7,15 +7,15 @@ const fuse = new Fuse(data, {
  keys: [
    {
      name: HEADERS,
-      weight: 1
+      weight: 2
    },
    {
      name: PATH,
-      weight: 1
+      weight: 0.5
    },
    {
      name: TAGS,
-      weight: 1
+      weight: 1.5
    },
    {
      name: TITLE,
--- a/styles.css
+++ b/styles.css
@@ -1,5 +1,15 @@
@import url("https://alv.cx/styles.css");

+html {
+  scroll-behavior: smooth;
+}
+
+body {
+	max-width: none;
+	margin: none;
+	padding: none;
+}
+
 .article {
 	margin: 1em;
 }
@@ -15,7 +25,13 @@
 	display: flex
 }

-#search { flex-grow: 9 }
+#search { flex-grow: 9; }
+
+#sidebar #search {
+	flex-grow: 0;
+	padding: 1em;
+	margin: 0 1em 1em 1em;
+}

 #results {
 	overflow-x: scroll;
@@ -33,9 +49,78 @@
 	background-color: #86c1b9;
 }

+#sidebar > #header { padding-bottom: 1em; color: #656565;}
+
 #header > * {
 	margin: 0;
-	padding: 0
+	padding: 0;
+}
+
+#contentWrapper {
+	display: flex
+}
+
+
+#sidebar {
+	position: sticky;
+	top: 10vh;
+	height: 80vh;
+	max-width: 30em;
+	display: flex;
+	flex-direction: column;
+	min-width: 20em;
+	padding-right: 1em;
+}
+
+#toc {
+	overflow-y: scroll;
+	overflow-x: visible;
+	max-width: 100%;
+}
+
+li {
+	margin: 0;
+}
+
+#content {
+	margin: 0 auto;
+	padding: 1em;
+	max-width: 60em;
+}
+
+#commitlog, #license { padding: 0; }
+
+#sidebar,
+#toc li > a { 
+	color: #656565;
+}
+
+ul#articlelist li a { color: #454545 }
+
+#toc li, ul#articlelist { list-style: none; }
+#toc ul, ul#articlelist { margin-left: 0.75em ; padding-left: 0.75em; }
+#toc ul, ul#articlelist { border-left: 1px solid #b3b3b3;}
+#toc > ul { padding; none; padding: 0; margin: 0; border: none;max-width: 100%;}
+
+#toc li > a,
+ul#articlelist li a {
+	text-decoration: none;
+	display: inline-block;
+	width: 100%;
+	transition: 0.5s;
+	padding: 0.5em;
+	box-sizing: border-box;
+}
+#toc li > a:hover,
+ul#articlelist li a:hover {
+	background: #d9d9d9;
+	color: black;
+}
+
+@media (max-width: 60em) {
+  /* CSS that should be displayed if width is equal to or less than 60em goes here */
+	#contentWrapper { flex-direction: column }
+	#sidebar { position: static; width: 100%; max-width: none; }
 }


--- a/templates/article.html
+++ b/templates/article.html
@@ -9,40 +9,45 @@
 </head>

 <body>
-	<div id="header">
-	<p class="smallText"> tags: [
-		$for(tags)$
-		<a href="/.tags/$tags$.html">$tags$</a>$sep$,
-		$endfor$
-	]</p>
-	<p class="smallText">
-		written by $for(author)$$author$$sep$, $endfor$
-	</p>
-	<p class="smallText">
-		syntax highlighting based on <a href="https://pygments.org/">Pygments'</a> default
-		colors
-	</p>
-	<p class="smallText">
-		page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
-	</p>
-	<details id="commitLog">
-		<summary class="smallText">
-			Commit log (file history)
-		</summary>
-		$filehistory$
-	</details>
-	<details>
-		<summary class="smallText">
-			License
-		</summary>
-		<pre>$licenseFull$</pre>
-	</details>
-	<details>
-		<summary class="smallText"> Table of Contents </summary>
-		<div>$toc$</div>
-	</details>
-	</div>
-	<div id="content">
-	$body$
+	<div id="contentWrapper">
+		<div id="sidebar">
+			<div id="header">
+				<p class="smallText"> tags: [
+					$for(tags)$
+					<a href="/.tags/$tags$.html">$tags$</a>$sep$,
+					$endfor$
+				]</p>
+				<p class="smallText">
+					written by $for(author)$$author$$sep$, $endfor$
+				</p>
+				<p class="smallText">
+					syntax highlighting based on <a href="https://pygments.org/">Pygments'</a> default
+					colors
+				</p>
+				<p class="smallText">
+					page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
+				</p>
+			</div>
+			<h3>Table of Contents</h3>
+			<input id="search" placeholder="Search table of contents" />
+			<div id="toc">$toc$</div>
+		</div>
+		<div id="content">
+		<details id="commitLog">
+			<summary class="smallText">
+				Commit log (file history)
+			</summary>
+			$filehistory$
+		</details>
+		<details id="license">
+			<summary class="smallText">
+				License
+			</summary>
+			<pre>$licenseFull$</pre>
+		</details>
+		$body$
+		</div>
 	</div>
+	<script src="/fuse.js"> </script>
+	<script src="/toc_search.js"> </script>
 </body>
--- a/templates/home_index.html
+++ b/templates/home_index.html
@@ -6,6 +6,7 @@
 <title>$title$</title>
 </head>
 <body>
+<div id="content">
 	<h1>$h1title$</h1>
 <p>
 These are my personal notes. Correctness is not guaranteed.
@@ -21,7 +22,7 @@ Browse <a href="/notes">here</a> or by tag <a href="/.tags">here</a>.
 </div>

 <p class="smallText"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
-
+</div>
 <script src="/fuse.js"> </script>
 <script> const data = $data$ </script>
 <script src="/search.js"> </script>
--- a/templates/index.html
+++ b/templates/index.html
@@ -7,7 +7,8 @@
 </head>
 <body>
 	<h1>$h1title$</h1>
+	<div id="content">
 $body$
-
-<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
+	<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
+	</div>
 </body>
--- a/templates/indexfoot.html
+++ b/templates/indexfoot.html
@@ -1,2 +1,4 @@
+	</ul>
 	<p style="font-size: 0.7em;"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
+	</div>
 </body>
--- a/templates/indexhead.html
+++ b/templates/indexhead.html
@@ -7,6 +7,8 @@
 </head>

 <body>
+	<div id="content">
 	<h1>$title$</h1>
 	$extra_content$
-	<div class="article"><a href="..">../</a></div>
+	<ul id="articlelist">
+	<li class="article"><a href="..">../</a></li>
--- a/templates/textarticlefoot.html
+++ b/templates/textarticlefoot.html
@@ -1,2 +1,3 @@
 	</pre>
+	</div>
 </body>
--- a/templates/textarticlehead.html
+++ b/templates/textarticlehead.html
@@ -7,6 +7,7 @@
 </head>

 <body>
+	<div id="content">
 	<div id="header">
 	<p class="smallText">
 		page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
--- a/toc_search.js
+++ b/toc_search.js
@@ -0,0 +1,94 @@
+'use strict';
+
+var raw_html_tree = document.getElementById('toc').firstChild.cloneNode(true);
+
+function createSearchable(el) {
+  var par = el.parentElement;
+  var obj = el.cloneNode(true);
+
+  while(par != raw_html_tree) {
+    var clone_parent = par.cloneNode(true);
+
+    while (clone_parent.firstChild != clone_parent.lastChild) {
+      clone_parent.removeChild(clone_parent.lastChild);
+    }
+    console.log("obj.innerHTML: " + obj.innerHTML);
+    console.log("clone_parent.firstChild.innerHTML: " + clone_parent.firstChild.innerHTML);
+    if (obj.innerHTML != clone_parent.firstChild.innerHTML) 
+      clone_parent.appendChild(obj);
+
+    obj = clone_parent;
+    par = par.parentElement;
+  }
+
+  return {
+    searchable: el.innerHTML,
+    obj: obj
+  };
+}
+
+var searchables = [];
+Array(...raw_html_tree.getElementsByTagName('a'))
+  .forEach(el => searchables.push(createSearchable(el)));
+
+var fuse = new Fuse(searchables, { keys: [ 'searchable' ], includeMatches: true});
+var searchBar = document.getElementById('search');
+var resultsDiv = document.getElementById('toc');
+
+function updateResults() {
+  var ul = document.createElement('ul');
+  resultsDiv.innerHTML = '';
+  if (searchBar.value == '') {
+    resultsDiv.appendChild(raw_html_tree);
+    return;
+  }
+  var results = fuse.search(searchBar.value);
+
+
+  results.forEach(r => {
+    console.log(r)
+    var content = r.item.obj
+    var last_a = Array.from(r.item.obj.getElementsByTagName('a')).pop()
+
+    r.matches.reverse().every(match => {
+      var display_match = match.value;
+      if (match.indices.length >= 1) {
+        match.indices.sort((a, b) => (b[1]-b[0])-(a[1]-a[0]));
+        const indexPair = match.indices[0];
+        const matching_slice = match.value.slice(indexPair[0], indexPair[1]+1);
+        last_a.innerHTML = match.value.replace(
+          matching_slice,
+          '<span class="matchHighlight">' + matching_slice + '</span>'
+        );
+      }
+      return true;
+    })
+
+    ul.appendChild(content);
+    ul.appendChild(document.createElement('br'));
+  })
+  resultsDiv.appendChild(ul);
+}
+
+searchBar.addEventListener('keyup', e => {
+  // if user pressed enter
+  if (e.keyCode === 13) {
+    if (e.shiftKey) {
+      window.open(results[0].item.path, '_blank');
+    } else {
+    window.location.href = results[0].item.path;
+    }
+    return;
+  }
+  updateResults();
+})
+
+searchBar.addEventListener('change', updateResults);
+
+const searchParams = new URL(window.location.href).searchParams;
+searchBar.value = searchParams.get('q');
+updateResults();
+
+if (searchParams.has('lucky')) {
+  window.location.href = results[0].item.path;
+}
Author	SHA1	Message	Date
Alvie Rahman	5c5f6ab89d	update search.js key weighting	2021-12-22 21:46:16 +00:00
Alvie Rahman	ab618e77c1	format article browsing list	2021-12-22 21:45:20 +00:00
Alvie Rahman	2f4ba8bba2	Update screenshot	2021-12-22 21:25:20 +00:00
Alvie Rahman	117f1ee6ee	Add search bar to table of contents	2021-12-22 21:16:09 +00:00
Alvie Rahman	a5341e770c	Restructure page to have a contents page on the side	2021-12-22 17:46:01 +00:00