hide toc on smaller width devices (for now)

notes2web.py

@@ -12,6 +12,7 @@ import shutil
 import os
 import regex as re
 import json
+import yaml
 
 
 TEXT_ARTICLE_TEMPLATE_FOOT = None
@@ -21,6 +22,9 @@ INDEX_TEMPLATE_HEAD = None
 EXTRA_INDEX_CONTENT = None
 
 
+def is_plaintext(filename):
+    return re.match(r'^text/', magic.from_file(str(filename), mime=True)) is not None
+
 def get_files(folder):
     markdown = []
     plaintext = []
@@ -33,7 +37,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 +45,25 @@ 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 tags
+
 
 def git_filehistory(working_dir, filename):
     print(f"{pathlib.Path(filename).relative_to(working_dir)=}")
@@ -178,7 +201,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 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
@@ -210,10 +233,14 @@ def main(args):
         # 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['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',
                 '--toc', f'--toc-depth={args.toc_depth}'
             ])
@@ -248,7 +275,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': []
         })
 
@@ -259,11 +286,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)
@@ -307,6 +335,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')
@@ -317,7 +346,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
 
@@ -326,7 +355,7 @@ def main(args):
 
             indexentries.append({
                 'title': str(title),
-                'path': str(path),
+                'path': './' + str(path),
                 'isdirectory': fullpath.is_dir()
                 })
 

readme.md

@@ -4,6 +4,8 @@ View your notes as a static html site. Browse a live sample of it [here](https:/
 
 ![](./screenshot.png)
 
+Tested with [pandoc v2.19.2](https://github.com/jgm/pandoc/releases/tag/2.19.2).
+
 
 ## Why?
 
@@ -59,6 +61,22 @@ The included `n2w_add_uuid.py` will add a UUID to a markdown file which does not
 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
 
 ```

search.js

@@ -7,7 +7,7 @@ const fuse = new Fuse(data, {
   keys: [
     {
       name: HEADERS,
-      weight: 2
+      weight: 1.5
     },
     {
       name: PATH,
@@ -19,7 +19,7 @@ const fuse = new Fuse(data, {
     },
     {
       name: TITLE,
-      weight: 1.5
+      weight: 4
     }
   ],
   includeMatches: true

styles.css

@@ -1,6 +1,8 @@
+@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;
@@ -29,10 +31,10 @@ body {
 }
 
 .matchHighlight {
-	background-color: #86c1b9;
+	background-color: var(--blue);
 }
 
-#sidebar > #header { padding-bottom: 1em; color: #656565;}
+#sidebar > #header { padding-bottom: 1em; color: var(--fg-lc);}
 
 #header > * {
 	margin: 0;
@@ -71,12 +73,12 @@ body {
 
 #sidebar,
 #toc li > a { 
-	color: #656565;
+	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 #b3b3b3;}
+#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; }
 
@@ -91,18 +93,19 @@ ul#articlelist > a{
 }
 #toc li > a:hover,
 ul#articlelist li a:hover {
-	background: #d9d9d9;
+	background: var(--bg-lc);
 	color: black;
 }
 
 mjx-container {
-	overflow-x: scroll;
+	overflow-x: auto;
 }
 
-@media (max-width: 60em) {
+@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; }
+	#sidebar { position: static; width: 100%; max-width: none; height: auto; }
+	#tocWrapper { display: none }
 }
 
 

templates/article.html

@@ -4,6 +4,13 @@
 <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>
@@ -31,9 +38,11 @@
 					page generated by <a href="https://git.alv.cx/alvierahman90/notes2web">notes2web</a>
 				</p>
 			</div>
+			<div id="tocWrapper" style="width: 100%" >
 			<h3>Table of Contents</h3>
-			<input id="search" placeholder="Search table of contents" />
+			<input id="search" width="100%" placeholder="Search table of contents" />
 			<div id="toc">$toc$</div>
+			</div>
 		</div>
 		<div id="content">
 		<details id="commitLog">