update readme on markdown

Makefile

@@ -1,5 +1,5 @@
 install:
-	cp notes2web.py /usr/local/bin
+	cp notes2web.py n2w_add_uuid.py /usr/local/bin
 	pip3 install -r requirements.txt
 	mkdir -p /opt/notes2web
 	cp -r templates /opt/notes2web
@@ -7,6 +7,7 @@ install:
 	cp fuse.js /opt/notes2web
 	cp search.js /opt/notes2web
 	cp toc_search.js /opt/notes2web
+	cp permalink.js /opt/notes2web
 
 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

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,7 +10,7 @@ import pathlib
 import pypandoc
 import shutil
 import os
-import re
+import regex as re
 import json
 
 
@@ -84,10 +84,12 @@ def git_filehistory(working_dir, filename):
     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
@@ -111,12 +113,15 @@ 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('--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()
 
 
@@ -155,6 +160,7 @@ def main(args):
     all_entries=[]
     dirs_with_index_article = []
     tag_dict = {}
+    permalink_to_filepath = {}
 
     print(f"{markdown_files=}")
     for filename in markdown_files:
@@ -191,12 +197,16 @@ 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
+            '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)
@@ -205,7 +215,7 @@ def main(args):
                 '-V', f'filehistory={filehistory}',
                 '-V', f'licenseFull={notes_license}',
                 '--mathjax',
-                '--toc'
+                '--toc', f'--toc-depth={args.toc_depth}'
             ])
             pathlib.Path(output_filename).parent.mkdir(parents=True, exist_ok=True)
 
@@ -275,7 +285,7 @@ def main(args):
 
 
 
-    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=}")
 
@@ -333,9 +343,9 @@ def main(args):
         for entry in indexentries:
             html += (
                     '<li class="article">'
-                        f'<a href="{entry["path"]}">'
+                        f'<a href="{entry["path"]}"><p>'
                             f'{entry["title"]}{"/" if entry["isdirectory"] else ""}'
-                        '</a>'
+                        '</p></a>'
                     '</li>'
             )
         html += INDEX_TEMPLATE_FOOT
@@ -347,6 +357,7 @@ def main(args):
     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'))
+    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())
@@ -354,6 +365,12 @@ def main(args):
 
         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

@@ -37,6 +37,7 @@ 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.
         
 - notes2web indexes [ATX-style headings](https://pandoc.org/MANUAL.html#atx-style-headings) for
   searching
@@ -46,6 +47,18 @@ 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).
+
 ## 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
+regex==2021.11.10
 soupsieve==2.2.1

styles.css

@@ -1,42 +1,25 @@
-@import url("https://alv.cx/styles.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");
 
 html {
   scroll-behavior: smooth;
 }
 
+h1 { font-size: 2.5em }
+h2 { font-size: 2em;}
+h3 { font-size: 1.5em; }
+
 body {
 	max-width: none;
-	margin: none;
+	width: 100%;
-	padding: none;
+	box-sizing: border-box;
 }
 
 .article {
 	margin: 1em;
 }
 
-#searchWrapper > input {
-	padding: 1em;
-	margin: 1em 0.5em 1em 0.5em;
-	font-size: 1em;
-	min-width: 0;
-}
-
-#searchWrapper {
-	display: flex
-}
-
-#search { flex-grow: 9; }
-
-#sidebar #search {
-	flex-grow: 0;
-	padding: 1em;
-	margin: 0 1em 1em 1em;
-}
-
-#results {
-	overflow-x: scroll;
-}
-
 .smallText {
 	font-size: 0.7em;
 }
@@ -72,38 +55,33 @@ body {
 	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%;
 }
 
-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%;}
+li { padding: 0 !important; }
 
 #toc li > a,
-ul#articlelist li a {
+ul#articlelist > a{
 	text-decoration: none;
 	display: inline-block;
 	width: 100%;
@@ -117,6 +95,10 @@ ul#articlelist li a:hover {
 	color: black;
 }
 
+mjx-container {
+	overflow-x: scroll;
+}
+
 @media (max-width: 60em) {
   /* CSS that should be displayed if width is equal to or less than 60em goes here */
 	#contentWrapper { flex-direction: column }

templates/article.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" />
@@ -12,6 +12,9 @@
 	<div id="contentWrapper">
 		<div id="sidebar">
 			<div id="header">
+				<p class="smallText">
+					<a href="/permalink?uuid=$uuid$">permalink</a>
+				</p>
 				<p class="smallText"> tags: [
 					$for(tags)$
 					<a href="/.tags/$tags$.html">$tags$</a>$sep$,

templates/home_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" />

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" />

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" />
@@ -10,5 +10,5 @@
 	<div id="content">
 	<h1>$title$</h1>
 	$extra_content$
-	<ul id="articlelist">
+	<ul class="buttonlist">
-	<li class="article"><a href="..">../</a></li>
+		<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/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" />