link to codeberg in header. make scroll-up-button bigger. automatically add anchors to url hash while scrolling.

input/index.md

@@ -11,7 +11,8 @@ noheader: true
 <img id="index-avatar" src="img/ava.jpg">
 
 I'm a <!--% print(own_age()) %--> year old software developer from Germany.
-All of my projects are released as free or open-source software on [my Gitea Server](https://git.xythobuz.de/thomas), [my GitHub profile](https://github.com/xythobuz) and here on my website. Have fun!
+All of my projects are released as free or open-source software on [my Codeberg profile](https://codeberg.org/xythobuz), [my Gitea Server](https://git.xythobuz.de/thomas), [my GitHub profile](https://github.com/xythobuz) or here on my website.
+Have fun!
 
 To receive my latest updates, you can subscribe to the <a href="rss.xml"><img src="img/rss.png">RSS Feed</a>.
 

macros.py

@@ -563,6 +563,9 @@ def include_url(url, fallback = None, data_slice = None, timeout = 2):
             print_cnsl_error(str(e), url)
             return
 
+    # kinda ugly, use 4 spaces for tabs for everything except Makefiles
+    data = data.expandtabs(8 if url.lower().endswith("makefile") else 4)
+
     if isinstance(data_slice, tuple):
         start, end = data_slice
         if end < start:
@@ -612,7 +615,7 @@ def include_sourcecode_slice(sh_type, data_slice, filename, url_pre, fallback_pr
     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(' (<a href="' + fallback + '">alternative link</a>)')
     print('</p>')
 
 def restRequest(url):

page.html

@@ -49,9 +49,10 @@ else:
                     print(entry % (htmlspecialchars(p["url"]), htmlspecialchars(p["title"])))
             %-->
             <li>-</li>
+            <li><a href="https://codeberg.org/xythobuz">Codeberg</a></li>
             <li><a href="https://git.xythobuz.de/explore/repos">Gitea</a></li>
             <li><a href="https://github.com/xythobuz">GitHub</a></li>
-            <li><a href="printer.html">🔨</a></li>
+            <!-- <li><a href="printer.html">🔨</a></li> -->
             <div class="fonts">
                 <li><span class="font-big">Text:</span></li>
                 <li><a class="dec" href="#"><span class="font-big">A</span><span class="font-small">A</span></a></li>
@@ -180,11 +181,16 @@ else:
 
             // add button, initially hidden
             $("<a>", {
-                text: "⌃",
+                text: "⇑",
                 id: "scroll_up_btn",
                 click: function() {
-                    window.scrollTo({ top: 0, behavior: 'smooth' });
-                    return false;
+                    var hash = location.hash.replace("#","");
+                    if (hash != "") {
+                        const location = window.location.href.split('#')[0];
+                        window.history.pushState({}, "", location);
+                    }
+                    window.scrollTo({ top: 0, behavior: "auto" });
+                    return true;
                 },
             }).appendTo('#scroll_up');
             $("#scroll_up").hide();
@@ -233,8 +239,8 @@ else:
         }
 
         function loadPage() {
-            add_scroll_up();
             prepare_syntax_highlighting();
+            add_scroll_up();
         }
     </script>
     <script type="text/javascript" src="js/sh_main.js"></script>

static/css/auto_toc.css

@@ -70,3 +70,11 @@
 #toc ul {
     padding-left: 1em;
 }
+
+#toc_close {
+    opacity: 0.666;
+}
+
+#toc_close:hover {
+    cursor: pointer;
+}

static/css/style.css

@@ -85,8 +85,12 @@ a.anchor.al4:link:after {
     display: none;
 }
 
+#scroll_up_btn {
+    font-size: 3em;
+    border-radius: 10px;
+}
+
 #scroll_up_btn:hover {
-    text-decoration: underline;
     cursor: pointer;
 }
 
@@ -132,7 +136,7 @@ a.anchor.al4:link:after {
         display: block;
         position: fixed;
         left: 5%;
-        bottom: 0;
+        bottom: 5px;
     }
 
     .access_link {
@@ -268,6 +272,15 @@ a:link:hover, a:visited:hover, .show-comments:hover {
     text-decoration: underline;
 }
 
+/*
+a[href*='//']:after {
+    content: "↗️";
+    font-size: 0.7em;
+    vertical-align: middle;
+    opacity: 0.666;
+}
+*/
+
 #nav a:link, #nav a:visited {
     font-weight: bold;
 }
@@ -560,7 +573,7 @@ blockquote:before, blockquote:after {
     color: #444444;
 }
 
-#toc {
+#toc, #scroll_up_btn {
     background-color: #E2E2E2;
 }
 
@@ -647,7 +660,7 @@ blockquote:before, blockquote:after {
         border-color: #111111;
     }
 
-    #toc {
+    #toc, #scroll_up_btn {
         background-color: #1D1D1D;
     }
 }

static/js/auto_toc.js

@@ -1,6 +1,6 @@
 function generate_toc() {
     var output = '<div id="toc">';
-    output += '<h3 class="toc">Table of Contents</h3>';
+    output += '<h3 class="toc">Table of Contents <a id="toc_close">❎</a></h3>';
     output += '<ul>';
     var level = 0;
     var counters = [ 1, 1, 1 ];
@@ -34,7 +34,7 @@ function generate_toc() {
         link += $('<span>').text($(this).text().toLowerCase().split(' ').join('_')).html();
 
         output += '<li>';
-        output += '<a href="#' + link + '">' + title + '</a>';
+        output += '<a class="toc_btn" href="#' + link + '">' + title + '</a>';
         output += '</li>';
 
         $(this).before('<a class="anchor al' + this_level + '" name="' + link + '" href="#' + link + '"></a>')
@@ -45,11 +45,16 @@ function generate_toc() {
     output += '</ul>';
     output += '</div>';
     $("#toc_wrap").html(output);
+
+    $("#toc_close").on("click", function() {
+        $("#toc_wrap").toggle("fast");
+        return false;
+    });
 }
 
 function register_toc_toggle() {
     $("<a>", {
-        text: "toggle ToC visibility",
+        text: "toggle visibility of Table of Contents",
         href: "",
         id: "toc_toggle",
         click: function() {
@@ -59,5 +64,43 @@ function register_toc_toggle() {
     }).appendTo('#toc_toggle_wrap');
 }
 
+function listen_for_anchor_scrolls() {
+    var scroll_timeout = 0;
+
+    // don't update hash while scrolling for 1s after toc click
+    function prevent_auto_anchor() {
+        scroll_timeout = Date.now() + 1000;
+        return true;
+    }
+    $(".toc_btn").each(function() {
+        $(this).on("click", prevent_auto_anchor)
+    });
+    $("#scroll_up").on("click", prevent_auto_anchor);
+
+    $(window).on("scroll", function() {
+        if (Date.now() < scroll_timeout) {
+            return;
+        }
+
+        // remove hash when scrolled to top
+        if ($(document).scrollTop() < 50) {
+            const location = window.location.href.split('#')[0];
+            history.replaceState({}, "", location);
+            return;
+        }
+
+        // check all headings and set hash if we scrolled past
+        $("#content").children("h2, h3, h4").each(function() {
+            const top = $(this)[0].getBoundingClientRect().top;
+            if ((top > 50) && (top < 200)) {
+                const location = window.location.href.split('#')[0];
+                const link = $(this).prev().attr("name");
+                history.replaceState({}, "", location + '#' + link);
+            }
+        });
+    });
+}
+
 generate_toc();
 register_toc_toggle();
+listen_for_anchor_scrolls();