archive notice

https://github.com/yaml/pyyaml/issues/601

.gitignore

@@ -2,3 +2,4 @@
 env
 n
 web
+__pycache__

Makefile

@@ -1,11 +1,16 @@
 install:
-	cp notes2web.py /usr/local/bin
-	pip3 install -r requirements.txt
+	cp  n2w_add_uuid.py /usr/local/bin
+	sed "s/N2W_COMMIT = \"\"/N2W_COMMIT = \"$$(git rev-parse --short HEAD)\"/" notes2web.py > /usr/local/bin/notes2web.py
+	pip3 install -r requirements.txt --break-system-packages
 	mkdir -p /opt/notes2web
 	cp -r templates /opt/notes2web
 	cp styles.css /opt/notes2web
 	cp fuse.js /opt/notes2web
 	cp search.js /opt/notes2web
+	cp indexsearch.js /opt/notes2web
+	cp toc_search.js /opt/notes2web
+	cp permalink.js /opt/notes2web
+	chmod +x /usr/local/bin/notes2web.py
 
 uninstall:
-	rm -rf /usr/local/bin/notes2web.py /opt/notes2web
+	rm -rf /usr/local/bin/notes2web.py /usr/local/bin/n2w_add_uuid.py /opt/notes2web

indexsearch.js

@@ -0,0 +1,75 @@
+const HEADERS = "headers"
+const PATH = "path"
+const TAGS = "tags"
+const TITLE = "title"
+
+const SEARCH_TIMEOUT_MS = 100
+var SEARCH_TIMEOUT_ID = -1
+
+const fuse = new Fuse(data, {
+  keys: [ 'title' ],
+  ignoreLocation: true,
+  threshhold: 0.4,
+  minMatchCharLength: 0,
+})
+
+const RESULTS_MAX = 15
+
+const searchBar = document.getElementById('search')
+const resultsDiv = document.getElementById('searchResults')
+
+var results = []
+
+function updateResultsWithTimeout() {
+  console.log("clearing timeout")
+  if (SEARCH_TIMEOUT_ID) SEARCH_TIMEOUT_ID = clearTimeout(SEARCH_TIMEOUT_ID)
+  SEARCH_TIMEOUT_ID = setTimeout(updateResults, SEARCH_TIMEOUT_MS)
+}
+
+function updateResults() {
+  console.log("updating results")
+  resultsDiv.innerHTML = ''
+  if (searchBar.value) results = fuse.search(searchBar.value, { limit: RESULTS_MAX }).map(r => r.item)
+  else results = data
+
+  results.forEach(r => {
+    wrapper = document.createElement('li')
+    wrapper.className = "article"
+
+    atag = document.createElement('a')
+    atag.href = r.path
+
+    ptag = document.createElement('p')
+    ptag.innerHTML = r.title + (r.isdirectory ? '/' : '')
+
+    atag.appendChild(ptag)
+    wrapper.appendChild(atag)
+    resultsDiv.appendChild(wrapper)
+  })
+}
+
+searchBar.addEventListener('keyup', e => {
+  console.log(e)
+  // if user pressed enter
+  if (e.keyCode === 13) {
+    if (e.shiftKey) {
+      window.open(results[0].path, '_blank')
+    } else {
+    window.location.href = results[0].path
+    }
+    return
+  }
+  updateResultsWithTimeout()
+})
+
+searchBar.addEventListener('change', updateResultsWithTimeout)
+
+const searchParams = new URL(window.location.href).searchParams;
+searchBar.value = searchParams.get('q');
+updateResults();
+
+console.log(results)
+
+if (searchParams.has('lucky')) {
+  window.location.href = results[0].path;
+}

n2w_add_uuid.py

@@ -0,0 +1,51 @@
+#!/usr/bin/env python3
+
+import editfrontmatter
+import frontmatter
+import pathlib
+import sys
+import uuid
+
+def get_args():
+    """ Get command line arguments """
+
+    import argparse
+    parser = argparse.ArgumentParser()
+    parser.add_argument('filename', type=pathlib.Path)
+    parser.add_argument('--template',
+            default=pathlib.Path("/opt/notes2web/templates/n2w_add_uuid_frontmatter_template"),
+            type=pathlib.Path
+    )
+    parser.add_argument('-w', '--write', action='store_true',
+            help='write to file instead of stdout')
+    return parser.parse_args()
+
+
+def main(args):
+    """ Entry point for script """
+    with open(args.template) as fp:
+        template_str=fp.read()
+
+    with open(args.filename) as fp:
+        fm_pre = frontmatter.load(fp)
+
+    processor = editfrontmatter.EditFrontMatter(file_path=args.filename, template_str=template_str)
+    fm_data = fm_pre.metadata
+    if 'uuid' not in fm_data.keys():
+        fm_data['uuid'] = str(uuid.uuid4())
+
+    processor.run(fm_data)
+
+    if args.write:
+        with open(args.filename, 'w') as fp:
+            fp.write(processor.dumpFileData())
+    else:
+        print(processor.dumpFileData())
+    return 0
+
+
+if __name__ == '__main__':
+    try:
+        sys.exit(main(get_args()))
+    except KeyboardInterrupt:
+        sys.exit(0)

notes2web.py

@@ -10,8 +10,9 @@ import pathlib
 import pypandoc
 import shutil
 import os
-import re
+import regex as re
 import json
+import yaml
 
 
 TEXT_ARTICLE_TEMPLATE_FOOT = None
@@ -20,6 +21,11 @@ INDEX_TEMPLATE_FOOT = None
 INDEX_TEMPLATE_HEAD = None
 EXTRA_INDEX_CONTENT = None
 
+N2W_COMMIT = ""
+
+
+def is_plaintext(filename):
+    return re.match(r'^text/', magic.from_file(str(filename), mime=True)) is not None
 
 def get_files(folder):
     markdown = []
@@ -33,7 +39,7 @@ def get_files(folder):
             name = os.path.join(root, filename)
             if pathlib.Path(name).suffix == '.md':
                 markdown.append(name)
-            elif re.match(r'^text/', magic.from_file(name, mime=True)):
+            elif is_plaintext(name):
                 plaintext.append(name)
                 other.append(name)
             else:
@@ -41,6 +47,34 @@ def get_files(folder):
 
     return markdown, plaintext, other
 
+def get_inherited_tags(file, base_folder):
+    tags = []
+    folder = pathlib.Path(file)
+
+    while folder != base_folder.parent:
+        print(f"get_inherited_tags {folder=}")
+        folder = pathlib.Path(folder).parent
+        folder_metadata = folder.joinpath('.n2w.yml')
+        if not folder_metadata.exists():
+            continue
+
+        with open(folder.joinpath('.n2w.yml')) as fp:
+            folder_properties = yaml.safe_load(fp)
+
+        tags += folder_properties.get('itags')
+
+    print(f"get_inherited_tags {tags=}")
+    return list(set(tags))
+
+
+def git_head_sha1(working_dir):
+    git_response = subprocess.run(
+            [ 'git', f"--git-dir={working_dir.joinpath('.git')}", 'rev-parse', '--short', 'HEAD' ],
+            stdout=subprocess.PIPE
+    ).stdout.decode('utf-8')
+
+    return git_response.strip()
+
 
 def git_filehistory(working_dir, filename):
     print(f"{pathlib.Path(filename).relative_to(working_dir)=}")
@@ -77,15 +111,19 @@ def git_filehistory(working_dir, filename):
     if filehistory == "":
         filehistory = ["This file has no history (it may not be part of the git repository)."]
 
+    filehistory = [ x.replace("<", "&lt;").replace(">", "&gt;") for x in filehistory]
+
     filehistory = "<pre>\n" + "</pre><pre>\n".join(filehistory) + "</pre>"
 
     return filehistory
 
 
-def get_dirs(folder):
+def get_dirs_to_index(folder):
     r = []
 
     for root, folders, files in os.walk(folder):
+        if pathlib.Path(os.path.join(root, folder)).is_relative_to(folder.joinpath('permalink')):
+            continue
         [r.append(os.path.join(root, folder)) for folder in folders]
 
     return r
@@ -109,11 +147,16 @@ def get_args():
     parser.add_argument('-I', '--template-index-foot', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/templates/indexfoot.html'))
     parser.add_argument('-s', '--stylesheet', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/styles.css'))
     parser.add_argument('--home_index', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/templates/home_index.html'))
+    parser.add_argument('--permalink_index', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/templates/permalink_index.html'))
     parser.add_argument('-e', '--extra-index-content', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/templates/extra_index_content.html'))
     parser.add_argument('-n', '--index-article-names', action='append', default=['index.md'])
     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('--indexsearchjs', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/indexsearch.js'))
+    parser.add_argument('--permalinkjs', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/permalink.js'))
+    parser.add_argument('--tocsearchjs', type=pathlib.Path, default=pathlib.Path('/opt/notes2web/toc_search.js'))
+    parser.add_argument('--toc-depth', type=int, default=6, dest='toc_depth')
     return parser.parse_args()
 
 
@@ -152,6 +195,7 @@ def main(args):
     all_entries=[]
     dirs_with_index_article = []
     tag_dict = {}
+    permalink_to_filepath = {}
 
     print(f"{markdown_files=}")
     for filename in markdown_files:
@@ -169,7 +213,7 @@ def main(args):
         # extract tags from frontmatter, save to tag_dict
         fm = frontmatter.load(filename)
         if isinstance(fm.get('tags'), list):
-            for tag in fm.get('tags'):
+            for tag in list(set(fm.get('tags') + get_inherited_tags(filename, args.notes))):
                 t = {
                     'path': str(pathlib.Path(output_filename).relative_to(args.output_dir)),
                     'title': fm.get('title') or pathlib.Path(filename).name
@@ -188,20 +232,30 @@ def main(args):
                 header_lines.append(" ".join(line.split(" ")[1:]))
 
         all_entries.append({
-            'path': str(pathlib.Path(*pathlib.Path(output_filename).parts[1:])),
+            'path': '/' + str(pathlib.Path(*pathlib.Path(output_filename).parts[1:])),
             'title': fm.get('title') or pathlib.Path(filename).name,
-            'tags': fm.get('tags'),
-            'headers': header_lines
+            'tags': list(set(fm.get('tags'))),
+            'headers': header_lines,
+            'uuid': fm.get('uuid')
         })
 
+        if 'uuid' in fm.keys():
+            permalink_to_filepath[fm['uuid']] = all_entries[-1]['path']
+
         # update file if required
         if update_required(filename, output_filename) or args.force:
             filehistory = git_filehistory(args.notes, filename)
-            html = pypandoc.convert_file(filename, 'html', extra_args=[
+            with open(filename) as fp:
+                article = frontmatter.load(fp)
+
+            article['tags'] += get_inherited_tags(filename, args.notes)
+            article['tags'] = sorted(list(set(article['tags'])))
+            article['filehistory'] = filehistory
+            article['licenseFull'] = notes_license
+            html = pypandoc.convert_text(frontmatter.dumps(article), 'html', format='md', extra_args=[
                 f'--template={args.template}',
-                '-V', f'filehistory={filehistory}',
-                '-V', f'licenseFull={notes_license}',
-                '--mathjax'
+                '--mathjax',
+                '--toc', f'--toc-depth={args.toc_depth}'
             ])
             pathlib.Path(output_filename).parent.mkdir(parents=True, exist_ok=True)
 
@@ -234,7 +288,7 @@ def main(args):
         all_entries.append({
             'path': str(pathlib.Path(*pathlib.Path(output_filename).parts[1:])),
             'title': title,
-            'tags': [],
+            'tags': [get_inherited_tags(filename, args.notes)],
             'headers': []
         })
 
@@ -245,11 +299,12 @@ def main(args):
                 pathlib.Path(filename).relative_to(args.notes)
             )
         )
+        title = os.path.basename(filename)
         pathlib.Path(output_filename).parent.mkdir(parents=True, exist_ok=True)
         all_entries.append({
             'path': str(pathlib.Path(*pathlib.Path(output_filename).parts[1:])),
-            'title': str(pathlib.Path(*pathlib.Path(output_filename).parts[1:])),
-            'tags': [],
+            'title': title,
+            'tags': [get_inherited_tags(filename, args.notes)],
             'headers': []
         })
         shutil.copyfile(filename, output_filename)
@@ -263,15 +318,14 @@ def main(args):
         html = re.sub(r'\$extra_content\$', '', html)
 
         for entry in tag_dict[tag]:
-            html += f"<div class=\"article\"><a href=\"/{entry['path']}\">{entry['title']}</a></div>"
-        html += INDEX_TEMPLATE_FOOT
+            entry['path'] = '/' + entry['path']
+            html += f"<div class=\"article\"><a href=\"{entry['path']}\">{entry['title']}</a></div>"
+        html += re.sub('\$data\$', json.dumps(tag_dict[tag]), INDEX_TEMPLATE_FOOT)
 
         with open(tagdir.joinpath(f'{tag}.html'), 'w+') as fp:
             fp.write(html)
 
-
-
-    dirs_to_index = [args.output_dir.name] + get_dirs(args.output_dir)
+    dirs_to_index = [args.output_dir.name] + get_dirs_to_index(args.output_dir)
     print(f"{dirs_to_index=}")
     print(f"{dirs_with_index_article=}")
 
@@ -293,6 +347,7 @@ def main(args):
                 continue
 
             fullpath = directory.joinpath(path)
+            title = path.name
             if path.suffix == '.html':
                 with open(fullpath) as fp:
                     soup = bs(fp.read(), 'html.parser')
@@ -303,7 +358,7 @@ def main(args):
                     title = pathlib.Path(path).stem
             elif fullpath.is_dir():
                 title = path
-            else:
+            elif is_plaintext(fullpath):
                 # don't add plaintext files to index, since they have a html wrapper
                 continue
 
@@ -312,7 +367,7 @@ def main(args):
 
             indexentries.append({
                 'title': str(title),
-                'path': str(path),
+                'path': './' + str(path),
                 'isdirectory': fullpath.is_dir()
                 })
 
@@ -328,13 +383,13 @@ def main(args):
 
         for entry in indexentries:
             html += (
-                    '<div class="article">'
-                        f'<a href="{entry["path"]}">'
+                    '<li class="article">'
+                        f'<a href="{entry["path"]}"><p>'
                             f'{entry["title"]}{"/" if entry["isdirectory"] else ""}'
-                        '</a>'
-                    '</div>'
+                        '</p></a>'
+                    '</li>'
             )
-        html += INDEX_TEMPLATE_FOOT
+        html += re.sub(r'\$data\$', json.dumps(indexentries), INDEX_TEMPLATE_FOOT)
 
         with open(directory.joinpath('index.html'), 'w+') as fp:
             fp.write(html)
@@ -342,13 +397,24 @@ 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.indexsearchjs, args.output_dir.joinpath('indexsearch.js'))
+    shutil.copyfile(args.tocsearchjs, args.output_dir.joinpath('toc_search.js'))
+    shutil.copyfile(args.permalinkjs, args.output_dir.joinpath('permalink.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())
             html = re.sub(r'\$h1title\$', args.output_dir.parts[0], html)
+            html = re.sub(r'\$n2w_commit\$', N2W_COMMIT, html)
+            html = re.sub(r'\$notes_git_head_sha1\$', git_head_sha1(args.notes), html)
 
         html = re.sub(r'\$data\$', json.dumps(all_entries), html)
 
+        fp.write(html)
+    permalink_dir = args.output_dir.joinpath('permalink')
+    permalink_dir.mkdir(exist_ok=True)
+    with open(args.permalink_index) as fp:
+        html = re.sub(r'\$data\$', json.dumps(permalink_to_filepath), fp.read())
+    with open(permalink_dir.joinpath('index.html'), 'w+') as fp:
         fp.write(html)
     print(tag_dict)
 

permalink.js

@@ -0,0 +1,8 @@
+'use strict';
+
+const MANUAL_REDIRECT = document.getElementById('manual_redirect');
+
+const newLocation = data[new URLSearchParams(window.location.search).get('uuid')];
+
+MANUAL_REDIRECT.href = newLocation;
+window.location = newLocation;

readme.md

@@ -1,9 +1,13 @@
+> notes2web is now called [gronk](https://github.com/alvierahman90/gronk) and development has moved
+
 # notes2web
 
 View your notes as a static html site. Browse a live sample of it [here](https://notes.alv.cx).
 
 ![](./screenshot.png)
 
+Tested with [pandoc v2.19.2](https://github.com/jgm/pandoc/releases/tag/2.19.2).
+
 
 ## Why?
 
@@ -20,13 +24,7 @@ doing it for me:
 
 ## Install
 
-0. Install [Pandoc](https://pandoc.org/index.html) and [Pip](https://github.com/pypa/pip)
-
-   On arch:
-   ```
-   # pacman -S pandoc python-pip
-   ```
-
+0. Install [Pandoc](https://pandoc.org/index.html) and [Pip](https://github.com/pypa/pip), python3-dev, and a C compiler
 1. Run `make install` as root
 
 ## Things to Remember Whilst Writing Notes
@@ -37,6 +35,9 @@ doing it for me:
   - `tags` --- A YAML list of tags which the article relates to - this is used for browsing and also
                searching
   - `title` --- The title of the article
+  - `uuid` --- A unique identifier used for permalinks. More below.
+  - `lecture_slides` --- a list of paths pointing to lecture slides used while taking notes
+  - `lecture_notes` --- a list of paths pointing to other notes used while taking notes
         
 - notes2web indexes [ATX-style headings](https://pandoc.org/MANUAL.html#atx-style-headings) for
   searching
@@ -46,6 +47,34 @@ doing it for me:
   This is optional but if you would like to add a license you can find one
   [here](https://choosealicense.com).
 
+### Permalinks
+
+Permalinks are currently rather basic and requires JavaScript to be enabled on the local computer.
+In order to identify documents between file changes, a unique identifier is used to identify a file.
+
+This unique identifier can be generated using the `uuidgen` command in the `uuid-runtime` package or
+`str(uuid.uuid())` in the `uuid` python package.
+
+The included `n2w_add_uuid.py` will add a UUID to a markdown file which does not have a UUID in it
+already.
+Combine it with `find` to UUIDify all your markdown files (but make a backup first).
+
+### Inherited Properties
+
+Notes can inherit a some properties from their parent folder(s) by creating a `.n2w.yml` file in a
+folder.
+
+#### Tags
+
+If you have a folder `uni` with all you university notes, you might want all the files in there to
+be tagged `uni`:
+
+`NOTES_PATH/uni/.n2w.yaml`:
+
+```yaml
+itags: [ university ]
+```
+
 ## CLI Usage
 
 ```

requirements.txt

@@ -1,6 +1,11 @@
 beautifulsoup4==4.9.3
+editfrontmatter==0.0.1
+Jinja2==3.0.3
+MarkupSafe==2.1.0
+oyaml==1.0
 pypandoc==1.5
 python-frontmatter==1.0.0
 python-magic==0.4.24
-PyYAML==5.4.1
+PyYAML==5.3.1
+regex==2021.11.10
 soupsieve==2.2.1

search.js

@@ -3,20 +3,51 @@ const PATH = "path"
 const TAGS = "tags"
 const TITLE = "title"
 
+const SEARCH_TIMEOUT_MS = 100
+var SEARCH_TIMEOUT_ID = -1
+
 const fuse = new Fuse(data, {
-  keys: [ HEADERS, PATH, TAGS, TITLE ],
-  includeMatches: true
+  keys: [
+    {
+      name: HEADERS,
+      weight: 0.2
+    },
+    {
+      name: PATH,
+      weight: 0.1
+    },
+    {
+      name: TAGS,
+      weight: 0.1
+    },
+    {
+      name: TITLE,
+      weight: 4
+    }
+  ],
+  includeMatches: true,
+  useExtendedSearch: true,
+  ignoreLocation: true,
+  threshhold: 0.4,
 })
 
+const RESULTS_MAX = 5
+
 const searchBar = document.getElementById('search')
-const resultsMax = document.getElementById('resultsMax')
 const resultsDiv = document.getElementById('results')
 
 var results = []
 
+function updateResultsWithTimeout() {
+  console.log("clearing timeout")
+  if (SEARCH_TIMEOUT_ID) SEARCH_TIMEOUT_ID = clearTimeout(SEARCH_TIMEOUT_ID)
+  SEARCH_TIMEOUT_ID = setTimeout(updateResults, SEARCH_TIMEOUT_MS)
+}
+
 function updateResults() {
+  console.log("updating results")
   resultsDiv.innerHTML = ''
-  results = fuse.search(searchBar.value).slice(0, parseInt(resultsMax.value))
+  results = fuse.search(searchBar.value, { limit: RESULTS_MAX })
   results.forEach(r => {
     wrapper = document.createElement('div')
     wrapper.className = "article"
@@ -78,9 +109,17 @@ searchBar.addEventListener('keyup', e => {
     }
     return
   }
-  updateResults()
+  updateResultsWithTimeout()
 })
-searchBar.addEventListener('change', updateResults)
-resultsMax.addEventListener('keyup', updateResults)
-resultsMax.addEventListener('change', updateResults)
-updateResults()
+
+searchBar.addEventListener('change', updateResultsWithTimeout)
+
+const searchParams = new URL(window.location.href).searchParams;
+searchBar.value = searchParams.get('q');
+updateResults();
+
+console.log(results)
+
+if (searchParams.has('lucky')) {
+  window.location.href = results[0].item.path;
+}

styles.css

@@ -1,94 +1,27 @@
+@import url("https://styles.alv.cx/colors/gruvbox.css");
+@import url("https://styles.alv.cx/base.css");
+@import url("https://styles.alv.cx/modules/search.css");
+@import url("https://styles.alv.cx/modules/buttonlist.css");
+@import url("https://styles.alv.cx/modules/darkmode.css");
+
+html {
+  scroll-behavior: smooth;
+}
+
+h1 { font-size: 2.5em }
+h2 { font-size: 2em;}
+h3 { font-size: 1.5em; }
+
 body {
-	font-family: "Open Sans", sans-serif;
-	color: #454545;
-	font-size: 16px;
-	margin: 2em auto;
-	max-width: 800px;
-	padding: 1em;
-	line-height: 1.4;
-	background-color: #fefefe;
-	overflow-wrap: break-word;
-}
-
-a { color: #07a; }
-a:visited { color: #941352; }
-
-img[class="centered"] {
-	margin: 0 auto;
-	display: block;
-}
-
-table {
-	border-collapse: collapse;
-	margin: 1em auto;
-	max-width: 100%;
-}
-th, td {
-	padding: 1em;
-	border: 1px solid #454545;
-	margin: 0;
-}
-
-
-pre {
-	background-color: #d9d9d9 ;
-	color: #000;
-	padding: 1em;
-	overflow-x: scroll;
-}
-
-details {
-	padding: 1em 0 1em 0;
-}
-
-li {
-	margin-bottom: 1em;
-}
-
-img, video {
-	margin: 0 auto;
-	display: block;
-	max-width: 100%;
-}
-
-figcaption {
-	margin: 0 auto;
-	width: max-content;
+	max-width: none;
+	width: 100%;
+	box-sizing: border-box;
 }
 
 .article {
 	margin: 1em;
 }
 
-blockquote {
-	border-left: 0.4em solid #454545;
-	margin-left: 0;
-	padding-left: 1em;
-	padding-top: 0.5em;
-	padding-bottom: 0.5em;
-}
-
-blockquote * {
-	margin: 0;
-}
-
-#searchWrapper > input {
-	padding: 1em;
-	margin: 1em 0.5em 1em 0.5em;
-	font-size: 1em;
-	min-width: 0;
-}
-
-#searchWrapper {
-	display: flex
-}
-
-#search { flex-grow: 9 }
-
-#results {
-	overflow-x: scroll;
-}
-
 .smallText {
 	font-size: 0.7em;
 }
@@ -98,23 +31,86 @@ blockquote * {
 }
 
 .matchHighlight {
-	background-color: #86c1b9;
+	background-color: var(--blue);
 }
 
+#sidebar > #header { padding-bottom: 1em; color: var(--fg-lc);}
+
 #header > * {
 	margin: 0;
-	padding: 0
+	padding: 0;
 }
 
-kbd {
-	background-color: #d9d9d9;
-	border-radius: 0.25em;
-	padding: 0.2em;
-	box-shadow: 0.15em 0.15em 0 #c9c9c9;
-	margin-left: 0.2em;
-	margin-right: 0.2em;
+#contentWrapper {
+	display: flex
 }
 
+
+#sidebar {
+	position: sticky;
+	top: 10vh;
+	height: 80vh;
+	max-width: 30em;
+	display: flex;
+	flex-direction: column;
+	min-width: 20em;
+	padding-right: 1em;
+}
+
+#content {
+	margin: 0 auto;
+	width: 60em;
+	max-width: 100%;
+}
+
+#commitlog, #license { padding: 0; }
+
+#toc {
+	overflow-y: scroll;
+	overflow-x: visible;
+	max-width: 100%;
+}
+
+#sidebar,
+#toc li > a { 
+	color: var(--fg-lc);
+}
+
+#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 var(--fg-lc);}
+#toc > ul { padding; none; padding: 0; margin: 0; border: none;max-width: 100%;}
+li { padding: 0 !important; }
+
+#toc li > a,
+ul#articlelist > 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: var(--bg-lc);
+	color: black;
+}
+
+mjx-container {
+	overflow-x: auto;
+}
+
+p.metadata { margin: 0 }
+
+@media (max-width: 80em) {
+  /* 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; height: auto; }
+	#tocWrapper { display: none }
+}
+
+
 /*  ==============================================================================
                          Pygments (pandoc built-in style)
     ==============================================================================

templates/article.html

@@ -1,42 +1,74 @@
 <head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" />
 <link rel="stylesheet" type="text/css" href="/styles.css" />
 <script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
+<script>
+	MathJax = {
+		tex: {
+			tags: 'ams'
+		}
+	}
+</script>
 <script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
 <title>$title$</title>
 </head>
 
 <body>
-	<div id="header">
-	<p style="font-size: 0.7em"> 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>
-	<div>
-	$body$
+	<div id="contentWrapper">
+		<div id="content">
+		<p class="smallText metadata">
+			title: $title$
+		</p>
+		$if(lecture_slides)$
+		<p class="smallText metadata"> lecture_slides: [
+			$for(lecture_slides)$
+			<a href="$lecture_slides$">$lecture_slides$</a>$sep$,
+			$endfor$
+		]</p>
+		$endif$
+		$if(lecture_notes)$
+		<p class="smallText metadata"> lecture_notes: [
+			$for(lecture_notes)$
+			<a href="$lecture_notes$">$lecture_notes$</a>$sep$,
+			$endfor$
+		]</p>
+		$endif$
+
+		<p class="smallText metadata">
+			uuid: $uuid$ (<a href="/permalink?uuid=$uuid$">permalink</a>)
+		</p>
+		<p class="smallText metadata"> tags: [
+			$for(tags)$
+			<a href="/.tags/$tags$.html">$tags$</a>$sep$,
+			$endfor$
+		]</p>
+		<p class="smallText metadata">
+			written by $for(author)$$author$$sep$, $endfor$
+		</p>
+		<p class="smallText metadata">
+			syntax highlighting based on <a href="https://pygments.org/">Pygments'</a> default
+			colors
+		</p>
+		<p class="smallText metadata">
+			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 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>

templates/home_index.html

@@ -1,11 +1,12 @@
 <head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" />
 <link rel="stylesheet" type="text/css" href="/styles.css" />
 <title>$title$</title>
 </head>
 <body>
+<div id="content">
 	<h1>$h1title$</h1>
 <p>
 These are my personal notes. Correctness is not guaranteed.
@@ -13,15 +14,14 @@ Browse <a href="/notes">here</a> or by tag <a href="/.tags">here</a>.
 </p>
 
 <div id="searchWrapper">
-<input placeholder="Search" id="search">
-<input type="number" id="resultsMax" min="0" value="5">
+<input autocomplete="off" placeholder="search" id="search" autofocus>
 </div>
 <p class="smallText" style="margin-top: 0; text-align: center;"> Press <kbd>Enter</kbd> to open first result or <kbd>Shift</kbd>+<kbd>Enter</kbd> to open in new tab</p>
 <div id="results">
 </div>
 
-<p class="smallText"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
-
+<p class="smallText"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a> (commit $n2w_commit$) notes commit $notes_git_head_sha1$</p>
+</div>
 <script src="/fuse.js"> </script>
 <script> const data = $data$ </script>
 <script src="/search.js"> </script>

templates/index.html

@@ -1,5 +1,5 @@
 <head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" />
 <link rel="stylesheet" type="text/css" href="/styles.css" />
@@ -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>

templates/indexfoot.html

@@ -1,2 +1,7 @@
+	</ul>
 	<p style="font-size: 0.7em;"> 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="/indexsearch.js"> </script>
 </body>

templates/indexhead.html

@@ -1,5 +1,5 @@
 <head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" />
 <link rel="stylesheet" type="text/css" href="/styles.css" />
@@ -7,6 +7,15 @@
 </head>
 
 <body>
+	<div id="content">
 	<h1>$title$</h1>
 	$extra_content$
-	<div class="article"><a href="..">../</a></div>
+	<div id="searchWrapper">
+	<input id="search" placeholder="search" autocomplete="off" autofocus>
+	</div>
+	<p class="searchSmallText" style="margin-top: 0; text-align: center">
+		Press (<kbd>Shift</kbd>+)<kbd>Enter</kbd> to open first result (in new tab)
+	</p>
+
+	<ul id="searchResults" class="buttonlist">
+		<li class="article"><a href=".."><p>../</p></a></li>

templates/listitem.html

@@ -1,7 +0,0 @@
-<li>
-	<a href="$filepath$"> $if(title)$
-$title$
-$else$
-no title ($filepath$)
-$endif$</a>
-</li>

templates/n2w_add_uuid_frontmatter_template

@@ -0,0 +1,5 @@
+author: {{ author }}
+date: {{ date }}
+title: {{ title }}
+tags: {{ tags }}
+uuid: {{ uuid }}

templates/permalink_index.html

@@ -0,0 +1,19 @@
+<head>
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+<meta charset="utf-8"> 
+<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" />
+<link rel="stylesheet" type="text/css" href="/styles.css" />
+<title></title>
+</head>
+<body>
+<div id="content">
+<p>
+You should be being redirected...
+Otherwise, click <a id="manual_redirect">here</a>.
+</p>
+
+<p class="smallText"> page generated by <a href="https://github.com/alvierahman90/notes2web">notes2web</a></p>
+</div>
+<script> const data = $data$ </script>
+<script src="/permalink.js"> </script>
+</body>

templates/textarticlefoot.html

@@ -1,2 +1,3 @@
 	</pre>
+	</div>
 </body>

templates/textarticlehead.html

@@ -1,5 +1,5 @@
 <head>
-<meta name="viewport" content="width=device-width, initial-scale=1">
+<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
 <meta charset="utf-8"> 
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Open+Sans&display=swap" />
 <link rel="stylesheet" type="text/css" href="/styles.css" />
@@ -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>

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;
+}