various js and python improvements

macros.py

@@ -10,6 +10,20 @@ import os.path
 import time
 import codecs
 from datetime import datetime
+import json
+
+def print_cnsl_error(s, url = None):
+    sys.stderr.write("\n")
+    sys.stderr.write("warning: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n")
+    sys.stderr.write("warning: !!!!!!!                  WARNING                 !!!!!\n")
+    sys.stderr.write("warning: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n")
+    sys.stderr.write("warning: " + s + "\n")
+    if url != None:
+        sys.stderr.write("warning: URL: \"" + url + "\"\n")
+    sys.stderr.write("warning: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n")
+    sys.stderr.write("warning: !!!!!!!                  WARNING                 !!!!!\n")
+    sys.stderr.write("warning: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n")
+    sys.stderr.write("\n")
 
 # -----------------------------------------------------------------------------
 # Python 2/3 hacks
@@ -109,10 +123,16 @@ def tableHelper(style, header, content):
             print("<th>" + h + "</th>")
         print("</tr>")
     for ci in range(0, len(content)):
-        if len(content[ci]) != len(style):
+        if len(content[ci]) < len(style):
             # invalid call of table helper!
+            print_cnsl_error("invalid table: {}[{}] != {}", len(content[ci]), ci, len(style))
             continue
-        print("<tr>")
+
+        if len(content[ci]) > len(style):
+            print("<tr " + content[ci][len(style)] + ">")
+        else:
+            print("<tr>")
+
         for i in range(0, len(style)):
             s = style[i]
             td_style = ""
@@ -144,6 +164,7 @@ def tableHelper(style, header, content):
                 text = content[ci][i]
                 print(text)
             print("</td>")
+
         print("</tr>")
     print("</table>")
 
@@ -482,9 +503,12 @@ def lightgallery(links):
                     #img += "/default.jpg" # default thumbnail
                     style = ' style="width:300px;"'
                     img2 = '<img src="lg/video-play.png" class="picthumb">'
-                else:
+                elif link.startswith('img/'):
                     x = link.rfind('.')
                     img = link[:x] + '_small' + link[x:]
+                else:
+                    img = link
+                    style = ' style="max-width:300px;max-height:300px;"'
             lightgallery_check_thumbnail(link, img)
             print('<div class="border" style="position:relative;" data-src="' + link + '"><a href="' + link + '"><img class="pic" src="' + img + '" alt="' + alt + '"' + style + '>' + img2 + '</a></div>')
         elif len(l) == 5:
@@ -506,20 +530,6 @@ def lightgallery(links):
 # github helper macros
 # -----------------------------------------------------------------------------
 
-import json, sys
-
-def print_cnsl_error(s, url):
-    sys.stderr.write("\n")
-    sys.stderr.write("warning: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n")
-    sys.stderr.write("warning: !!!!!!!                  WARNING                 !!!!!\n")
-    sys.stderr.write("warning: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n")
-    sys.stderr.write("warning: " + s + "\n")
-    sys.stderr.write("warning: URL: \"" + url + "\"\n")
-    sys.stderr.write("warning: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n")
-    sys.stderr.write("warning: !!!!!!!                  WARNING                 !!!!!\n")
-    sys.stderr.write("warning: !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!\n")
-    sys.stderr.write("\n")
-
 def http_request(url, timeout = 5):
     if PY3:
         response = urllib.request.urlopen(url, timeout = timeout)
@@ -532,7 +542,7 @@ def http_request(url, timeout = 5):
     data = response.read().decode("utf-8")
     return data
 
-def include_url(url, fallback = None, timeout = 2):
+def include_url(url, fallback = None, data_slice = None, timeout = 2):
     sys.stderr.write('sub    : fetching page "%s"\n' % url)
 
     if fallback == None:
@@ -553,6 +563,33 @@ def include_url(url, fallback = None, timeout = 2):
             print_cnsl_error(str(e), url)
             return
 
+    if isinstance(data_slice, tuple):
+        start, end = data_slice
+        if end < start:
+            print_cnsl_error("invalid slice: end={} < start={}", end, start)
+        else:
+            lines = data.split("\n")
+            slc = lines[max(0, start - 1) : end]
+            data = "\n".join(slc)
+            #sys.stderr.write("\n")
+            #sys.stderr.write("Selected Slice:\n")
+            #sys.stderr.write(str(len(slc)))
+            #sys.stderr.write("\n")
+            #for l in slc:
+            #    sys.stderr.write(l + "\n")
+            #sys.stderr.write("\n\n")
+    elif isinstance(data_slice, list):
+        lines = data.split("\n")
+        data = []
+        for ds in data_slice:
+            start, end = ds
+            if end < start:
+                print_cnsl_error("invalid slice: end={} < start={}", end, start)
+            else:
+                slc = lines[max(0, start - 1) : end]
+                data.append("\n".join(slc))
+        data = "\n\n// ...\n\n".join(data)
+
     if PY3:
         encoded = html.escape(data)
     else:
@@ -560,6 +597,24 @@ def include_url(url, fallback = None, timeout = 2):
 
     print(encoded, end="")
 
+def include_sourcecode_slice(sh_type, data_slice, filename, url_pre, fallback_pre = None, timeout = 2):
+    url = url_pre + filename
+    fallback = (fallback_pre + filename) if fallback_pre != None else None
+    off = data_slice[0] if data_slice != None else 1
+
+    print('<pre class="sh_' + sh_type + '" offset="' + str(off))
+    if isinstance(data_slice, list):
+        print(' skip_line_no')
+    print('">')
+
+    include_url(url, fallback, data_slice, timeout)
+
+    print('</pre>')
+    print('<p class="sh_link_upstream">Link to the complete file "<a href="' + url + '">' + url.split("/")[-1] + '</a>"')
+    if fallback != None:
+        print(' (<a href="' + fallback + '">alternative</a>)')
+    print('</p>')
+
 def restRequest(url):
     sys.stderr.write('sub    : fetching REST "%s"\n' % url)
     data = json.loads(http_request(url))

page.html

@@ -11,12 +11,16 @@ else:
     <meta name="description" content="{{ htmlspecialchars(page.get("description", "Electronics & Software Projects")) }}" />
     <meta name="keywords" content="{{ htmlspecialchars(page.get("keywords", "xythobuz")) }}" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="shortcut icon" href="img/favicon.ico" />
+    <link rel="shortcut icon" href="{{ page.get("favicon", "img/favicon.ico") }}" />
     <link rel="alternate" type="application/rss+xml" title="xythobuz.de" href="rss.xml" />
     <link type="text/css" rel="stylesheet" href="css/style.css" />
     <link type="text/css" rel="stylesheet" href="css/print.css" media="print" />
     <link type="text/css" rel="stylesheet" href="css/gh-fork-ribbon.css" />
     <link type="text/css" rel="stylesheet" href="css/lightgallery.min.css" />
+    <!--%
+        if page.get("auto_toc", "false") == "true":
+            print('<link type="text/css" rel="stylesheet" href="css/auto_toc.css" />')
+    %-->
 </head>
 <body onload="loadPage()">
     <!--%
@@ -64,6 +68,10 @@ else:
             %-->
         </ul>
     </div></div>
+    <!--%
+        if page.get("auto_toc", "false") == "true":
+            print('<div id="toc_wrap"></div>')
+    %-->
     <div id="content">
         <!--%
             from datetime import datetime
@@ -146,6 +154,9 @@ else:
         <br><span style="font-size: xx-small">
             Static HTML generated at <!--% print(datetime.now().strftime("%Y-%m-%d %H:%M:%S %z")) %-->
         </span>
+        <br><span style="font-size: xx-small">
+            <a href="<!--% print(page.get('fname').replace('./input/', '').replace('.de.md', '.md')) %-->">View Source '<!--% print(page.get("fname").replace('./input/', '').replace('.de.md', '.md')) %-->'</a>
+        </span>
     </div>
     <script type="text/javascript">
         function loadPage() {
@@ -155,15 +166,28 @@ else:
                 $('<div class="_sh"><div class="_sh_lines"></div></div>').insertBefore($(this));
                 $(this).appendTo($(this).prev('._sh'));
 
+                // allow skipping line numbers
+                if ($(this).attr("skip_line_no") != undefined) {
+                    return;
+                }
+
                 // split content of pre with linebreaks so we can get total line number
                 var content = $.trim($(this).html());
                 var lines = content.split('\n');
 
+                // configurable line number offset
+                var line_cnt_off = "1";
+                if ($(this).attr("offset") != undefined) {
+                    line_cnt_off = $(this).attr("offset");
+                }
+                var max = lines.length + parseInt(line_cnt_off);
+
                 // append line number to span._sh_lines
-                for(var line = 1; line < lines.length + 1; line++) {
+                for (var line = line_cnt_off; line < max; line++) {
                     $(this).prev('._sh_lines').append('<span data-line="' + line + '">' + line + '</span>');
                 }
             });
+
             $("pre:not([class^='sh_']):not([class='ascii'])").each(function() {
                 // wrap pre with div._sh
                 $('<div class="_sh"></div>').insertBefore($(this));
@@ -179,6 +203,10 @@ else:
         if page.get("comments", "false") == "true":
             print('<script defer src="https://comments.xythobuz.de/js/commento.js"></script>')
     %-->
+    <!--%
+        if page.get("auto_toc", "false") == "true":
+            print('<script defer src="js/auto_toc.js"></script>')
+    %-->
     <script type="text/javascript">
         $(document).ready(function() {
             jQuery(window).resize(function() {

static/css/auto_toc.css

@@ -0,0 +1,72 @@
+#content {
+    counter-reset: heading;
+}
+
+#content h2:not(.toc):before {
+    content: counter(heading)") ";
+    counter-increment: heading;
+}
+
+#content h2:not(.toc) {
+    counter-reset: subheading;
+}
+
+#content h3:not(.toc):before {
+    content: counter(heading)"." counter(subheading)") ";
+    counter-increment: subheading;
+}
+
+#content h3:not(.toc) {
+    counter-reset: subsubheading;
+}
+
+#content h4:not(.toc):before {
+    content: counter(heading)"." counter(subheading)"." counter(subsubheading)") ";
+    counter-increment: subsubheading;
+}
+
+#toc {
+    float: right;
+    width: fit-content;
+    font-size: smaller;
+    padding: 0 0.5em;
+    border-width: 2px;
+    border-style: solid;
+    border-radius: 10px;
+    max-height: 50vh;
+    overflow: auto;
+}
+
+#toc_wrap {
+    display: none;
+}
+
+@media (min-width: 1000px) {
+    #toc_wrap {
+        display: block;
+        float: right;
+        position: sticky;
+        max-width: 12%;
+        top: 1em;
+    }
+}
+
+@media (min-height: 750px) {
+    #toc_wrap {
+        top: 8em;
+    }
+}
+
+@media (min-width: 1500px) {
+    #toc_wrap {
+        right: 100px;
+    }
+}
+
+#toc ul, .toc {
+    margin: 0.25em 0;
+}
+
+#toc ul {
+    padding-left: 1em;
+}

static/css/style.css

@@ -90,6 +90,12 @@ a.anchor {
     }
 }
 
+.sh_link_upstream {
+    font-size: small;
+    padding-left: 2em;
+    margin-top: -0.75em
+}
+
 ._sh {
     max-height: 300px;
     overflow: auto;
@@ -337,8 +343,43 @@ blockquote p {
     margin: 0 0 0 2em;
 }
 
+:not(pre) > code {
+    padding: 0.25em 0.5em;
+    border-radius: 0.5em;
+}
+
+#nav::after {
+    content: "";
+    height: 0.25em;
+    width: 100%;
+    display: block;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0.125em;
+}
+
+hr {
+    border: none;
+    height: 0.25em;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0.125em;
+}
+
+#footbar {
+    border: none;
+    height: 0.25em;
+    border-width: 1px;
+    border-style: solid;
+    border-radius: 0.125em;
+}
+
 /* colors */
 
+:not(pre) > code {
+    background: #DEDEDE;
+}
+
 body, #nav, .collapsecontent {
     background-color: #FFFFFF;
 }
@@ -360,10 +401,7 @@ body, #nav, #nav a:link, #nav a:visited {
 }
 
 #nav::after {
-    content: "";
-    height: 0.25em;
-    width: 100%;
-    display: block;
+    /* pride colors https://www.flagcolorcodes.com/pride-rainbow */
     background: linear-gradient(
         to right,
         rgb(228, 3, 3) 0%,
@@ -379,15 +417,11 @@ body, #nav, #nav a:link, #nav a:visited {
         rgb(115, 41, 130) 83.25%,
         rgb(115, 41, 130) 100%
     );
-}
-
-._sh_lines {
-    border-right-color: #32CD32;
+    border-color: #DDDDDD;
 }
 
 hr {
-    border: none;
-    height: 0.25em;
+    /* bisexual colors https://www.flagcolorcodes.com/bisexual */
     background: linear-gradient(
         to right,
         rgb(214, 2, 112) 0%,
@@ -397,11 +431,11 @@ hr {
         rgb(0, 56, 168) 60%,
         rgb(0, 56, 168) 100%
     );
+    border-color: #DDDDDD;
 }
 
 #footbar {
-    border: none;
-    height: 0.25em;
+    /* transgender colors https://www.flagcolorcodes.com/transgender */
     background: linear-gradient(
         to right,
         rgb(91, 206, 250) 0%,
@@ -415,9 +449,14 @@ hr {
         rgb(91, 206, 250) 80%,
         rgb(91, 206, 250) 100%
     );
+    border-color: #DDDDDD;
 }
 
-table, th, td, ._sh, .ascii, .border, .releasecard, #index-avatar, .collapsecontent {
+._sh_lines {
+    border-right-color: #32CD32;
+}
+
+table, th, td, ._sh, .ascii, .border, .releasecard, #index-avatar, .collapsecontent, #toc {
     border-color: #32CD32;
 }
 
@@ -451,6 +490,10 @@ blockquote:before, blockquote:after {
     color: #444444;
 }
 
+#toc {
+    background-color: #E2E2E2;
+}
+
 /* dark mode */
 @media (prefers-color-scheme: dark) {
     body, #nav, .collapsecontent {
@@ -517,6 +560,10 @@ blockquote:before, blockquote:after {
         background-color: #424242;
     }
 
+    :not(pre) > code {
+        background: #252525;
+    }
+
     blockquote {
         background: #252525;
         border-left-color: #888888;
@@ -525,4 +572,12 @@ blockquote:before, blockquote:after {
     blockquote:before, blockquote:after {
         color: #888888;
     }
+
+    #nav::after, hr, #footbar {
+        border-color: #111111;
+    }
+
+    #toc {
+        background-color: #1D1D1D;
+    }
 }

static/js/auto_toc.js

@@ -0,0 +1,50 @@
+function generate_toc() {
+    var output = '<div id="toc">';
+    output += '<h3 class="toc">Table of Contents</h3>';
+    output += '<ul>';
+    var level = 0;
+    var counters = [ 1, 1, 1 ];
+
+    $("#content").children("h2, h3, h4").each(function() {
+        var this_level = parseInt($(this).prop("tagName").slice(1));
+        if (level <= 0) level = this_level;
+        if (this_level > level) {
+            output += '<ul>';
+        } else if (this_level < level) {
+            output += '</ul>';
+            counters[level - 2] = 1;
+        }
+        level = this_level;
+
+        var title = '';
+        var link = '';
+        for (var lvl = 2; lvl <= this_level; lvl++) {
+            if (lvl > 2) {
+                title += ".";
+                link += ".";
+            }
+            title += counters[lvl - 2] - ((lvl < this_level) ? 1 : 0);
+            link += counters[lvl - 2] - ((lvl < this_level) ? 1 : 0);
+        }
+
+        title += ') ';
+        title += $(this).text();
+
+        link += '_';
+        link += $('<span>').text($(this).text().toLowerCase().split(' ').join('_')).html();
+
+        output += '<li>';
+        output += '<a href="#' + link + '">' + title + '</a>';
+        output += '</li>';
+
+        $(this).after('<a class="anchor" name="' + link + '"></a>')
+
+        counters[this_level - 2]++;
+    });
+
+    output += '</ul>';
+    output += '</div>';
+    $("#toc_wrap").html(output);
+}
+
+generate_toc();