update readme on markdown

notes2web.py

@@ -343,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

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
 
 ```

styles.css

@@ -1,4 +1,6 @@
-@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;
@@ -18,29 +20,6 @@ body {
 	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;
 }
@@ -76,16 +55,6 @@ body {
 	padding-right: 1em;
 }
 
-#toc {
-	overflow-y: scroll;
-	overflow-x: visible;
-	max-width: 100%;
-}
-
-li {
-	margin: 0;
-}
-
 #content {
 	margin: 0 auto;
 	width: 60em;
@@ -94,6 +63,12 @@ li {
 
 #commitlog, #license { padding: 0; }
 
+#toc {
+	overflow-y: scroll;
+	overflow-x: visible;
+	max-width: 100%;
+}
+
 #sidebar,
 #toc li > a { 
 	color: #656565;
@@ -103,6 +78,7 @@ li {
 #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 > a{

templates/indexhead.html

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