Browse Source

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

Thomas B 15 hours ago
parent
commit
b8baff0e03
6 changed files with 88 additions and 14 deletions
  1. 2
    1
      input/index.md
  2. 4
    1
      macros.py
  3. 11
    5
      page.html
  4. 8
    0
      static/css/auto_toc.css
  5. 17
    4
      static/css/style.css
  6. 46
    3
      static/js/auto_toc.js

+ 2
- 1
input/index.md View File

11
 <img id="index-avatar" src="img/ava.jpg">
11
 <img id="index-avatar" src="img/ava.jpg">
12
 
12
 
13
 I'm a <!--% print(own_age()) %--> year old software developer from Germany.
13
 I'm a <!--% print(own_age()) %--> year old software developer from Germany.
14
-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!
14
+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.
15
+Have fun!
15
 
16
 
16
 To receive my latest updates, you can subscribe to the <a href="rss.xml"><img src="img/rss.png">RSS Feed</a>.
17
 To receive my latest updates, you can subscribe to the <a href="rss.xml"><img src="img/rss.png">RSS Feed</a>.
17
 
18
 

+ 4
- 1
macros.py View File

563
             print_cnsl_error(str(e), url)
563
             print_cnsl_error(str(e), url)
564
             return
564
             return
565
 
565
 
566
+    # kinda ugly, use 4 spaces for tabs for everything except Makefiles
567
+    data = data.expandtabs(8 if url.lower().endswith("makefile") else 4)
568
+
566
     if isinstance(data_slice, tuple):
569
     if isinstance(data_slice, tuple):
567
         start, end = data_slice
570
         start, end = data_slice
568
         if end < start:
571
         if end < start:
612
     print('</pre>')
615
     print('</pre>')
613
     print('<p class="sh_link_upstream">Link to the complete file "<a href="' + url + '">' + url.split("/")[-1] + '</a>"')
616
     print('<p class="sh_link_upstream">Link to the complete file "<a href="' + url + '">' + url.split("/")[-1] + '</a>"')
614
     if fallback != None:
617
     if fallback != None:
615
-        print(' (<a href="' + fallback + '">alternative</a>)')
618
+        print(' (<a href="' + fallback + '">alternative link</a>)')
616
     print('</p>')
619
     print('</p>')
617
 
620
 
618
 def restRequest(url):
621
 def restRequest(url):

+ 11
- 5
page.html View File

49
                     print(entry % (htmlspecialchars(p["url"]), htmlspecialchars(p["title"])))
49
                     print(entry % (htmlspecialchars(p["url"]), htmlspecialchars(p["title"])))
50
             %-->
50
             %-->
51
             <li>-</li>
51
             <li>-</li>
52
+            <li><a href="https://codeberg.org/xythobuz">Codeberg</a></li>
52
             <li><a href="https://git.xythobuz.de/explore/repos">Gitea</a></li>
53
             <li><a href="https://git.xythobuz.de/explore/repos">Gitea</a></li>
53
             <li><a href="https://github.com/xythobuz">GitHub</a></li>
54
             <li><a href="https://github.com/xythobuz">GitHub</a></li>
54
-            <li><a href="printer.html">🔨</a></li>
55
+            <!-- <li><a href="printer.html">🔨</a></li> -->
55
             <div class="fonts">
56
             <div class="fonts">
56
                 <li><span class="font-big">Text:</span></li>
57
                 <li><span class="font-big">Text:</span></li>
57
                 <li><a class="dec" href="#"><span class="font-big">A</span><span class="font-small">A</span></a></li>
58
                 <li><a class="dec" href="#"><span class="font-big">A</span><span class="font-small">A</span></a></li>
180
 
181
 
181
             // add button, initially hidden
182
             // add button, initially hidden
182
             $("<a>", {
183
             $("<a>", {
183
-                text: "",
184
+                text: "",
184
                 id: "scroll_up_btn",
185
                 id: "scroll_up_btn",
185
                 click: function() {
186
                 click: function() {
186
-                    window.scrollTo({ top: 0, behavior: 'smooth' });
187
-                    return false;
187
+                    var hash = location.hash.replace("#","");
188
+                    if (hash != "") {
189
+                        const location = window.location.href.split('#')[0];
190
+                        window.history.pushState({}, "", location);
191
+                    }
192
+                    window.scrollTo({ top: 0, behavior: "auto" });
193
+                    return true;
188
                 },
194
                 },
189
             }).appendTo('#scroll_up');
195
             }).appendTo('#scroll_up');
190
             $("#scroll_up").hide();
196
             $("#scroll_up").hide();
233
         }
239
         }
234
 
240
 
235
         function loadPage() {
241
         function loadPage() {
236
-            add_scroll_up();
237
             prepare_syntax_highlighting();
242
             prepare_syntax_highlighting();
243
+            add_scroll_up();
238
         }
244
         }
239
     </script>
245
     </script>
240
     <script type="text/javascript" src="js/sh_main.js"></script>
246
     <script type="text/javascript" src="js/sh_main.js"></script>

+ 8
- 0
static/css/auto_toc.css View File

70
 #toc ul {
70
 #toc ul {
71
     padding-left: 1em;
71
     padding-left: 1em;
72
 }
72
 }
73
+
74
+#toc_close {
75
+    opacity: 0.666;
76
+}
77
+
78
+#toc_close:hover {
79
+    cursor: pointer;
80
+}

+ 17
- 4
static/css/style.css View File

85
     display: none;
85
     display: none;
86
 }
86
 }
87
 
87
 
88
+#scroll_up_btn {
89
+    font-size: 3em;
90
+    border-radius: 10px;
91
+}
92
+
88
 #scroll_up_btn:hover {
93
 #scroll_up_btn:hover {
89
-    text-decoration: underline;
90
     cursor: pointer;
94
     cursor: pointer;
91
 }
95
 }
92
 
96
 
132
         display: block;
136
         display: block;
133
         position: fixed;
137
         position: fixed;
134
         left: 5%;
138
         left: 5%;
135
-        bottom: 0;
139
+        bottom: 5px;
136
     }
140
     }
137
 
141
 
138
     .access_link {
142
     .access_link {
268
     text-decoration: underline;
272
     text-decoration: underline;
269
 }
273
 }
270
 
274
 
275
+/*
276
+a[href*='//']:after {
277
+    content: "↗️";
278
+    font-size: 0.7em;
279
+    vertical-align: middle;
280
+    opacity: 0.666;
281
+}
282
+*/
283
+
271
 #nav a:link, #nav a:visited {
284
 #nav a:link, #nav a:visited {
272
     font-weight: bold;
285
     font-weight: bold;
273
 }
286
 }
560
     color: #444444;
573
     color: #444444;
561
 }
574
 }
562
 
575
 
563
-#toc {
576
+#toc, #scroll_up_btn {
564
     background-color: #E2E2E2;
577
     background-color: #E2E2E2;
565
 }
578
 }
566
 
579
 
647
         border-color: #111111;
660
         border-color: #111111;
648
     }
661
     }
649
 
662
 
650
-    #toc {
663
+    #toc, #scroll_up_btn {
651
         background-color: #1D1D1D;
664
         background-color: #1D1D1D;
652
     }
665
     }
653
 }
666
 }

+ 46
- 3
static/js/auto_toc.js View File

1
 function generate_toc() {
1
 function generate_toc() {
2
     var output = '<div id="toc">';
2
     var output = '<div id="toc">';
3
-    output += '<h3 class="toc">Table of Contents</h3>';
3
+    output += '<h3 class="toc">Table of Contents <a id="toc_close">❎</a></h3>';
4
     output += '<ul>';
4
     output += '<ul>';
5
     var level = 0;
5
     var level = 0;
6
     var counters = [ 1, 1, 1 ];
6
     var counters = [ 1, 1, 1 ];
34
         link += $('<span>').text($(this).text().toLowerCase().split(' ').join('_')).html();
34
         link += $('<span>').text($(this).text().toLowerCase().split(' ').join('_')).html();
35
 
35
 
36
         output += '<li>';
36
         output += '<li>';
37
-        output += '<a href="#' + link + '">' + title + '</a>';
37
+        output += '<a class="toc_btn" href="#' + link + '">' + title + '</a>';
38
         output += '</li>';
38
         output += '</li>';
39
 
39
 
40
         $(this).before('<a class="anchor al' + this_level + '" name="' + link + '" href="#' + link + '"></a>')
40
         $(this).before('<a class="anchor al' + this_level + '" name="' + link + '" href="#' + link + '"></a>')
45
     output += '</ul>';
45
     output += '</ul>';
46
     output += '</div>';
46
     output += '</div>';
47
     $("#toc_wrap").html(output);
47
     $("#toc_wrap").html(output);
48
+
49
+    $("#toc_close").on("click", function() {
50
+        $("#toc_wrap").toggle("fast");
51
+        return false;
52
+    });
48
 }
53
 }
49
 
54
 
50
 function register_toc_toggle() {
55
 function register_toc_toggle() {
51
     $("<a>", {
56
     $("<a>", {
52
-        text: "toggle ToC visibility",
57
+        text: "toggle visibility of Table of Contents",
53
         href: "",
58
         href: "",
54
         id: "toc_toggle",
59
         id: "toc_toggle",
55
         click: function() {
60
         click: function() {
59
     }).appendTo('#toc_toggle_wrap');
64
     }).appendTo('#toc_toggle_wrap');
60
 }
65
 }
61
 
66
 
67
+function listen_for_anchor_scrolls() {
68
+    var scroll_timeout = 0;
69
+
70
+    // don't update hash while scrolling for 1s after toc click
71
+    function prevent_auto_anchor() {
72
+        scroll_timeout = Date.now() + 1000;
73
+        return true;
74
+    }
75
+    $(".toc_btn").each(function() {
76
+        $(this).on("click", prevent_auto_anchor)
77
+    });
78
+    $("#scroll_up").on("click", prevent_auto_anchor);
79
+
80
+    $(window).on("scroll", function() {
81
+        if (Date.now() < scroll_timeout) {
82
+            return;
83
+        }
84
+
85
+        // remove hash when scrolled to top
86
+        if ($(document).scrollTop() < 50) {
87
+            const location = window.location.href.split('#')[0];
88
+            history.replaceState({}, "", location);
89
+            return;
90
+        }
91
+
92
+        // check all headings and set hash if we scrolled past
93
+        $("#content").children("h2, h3, h4").each(function() {
94
+            const top = $(this)[0].getBoundingClientRect().top;
95
+            if ((top > 50) && (top < 200)) {
96
+                const location = window.location.href.split('#')[0];
97
+                const link = $(this).prev().attr("name");
98
+                history.replaceState({}, "", location + '#' + link);
99
+            }
100
+        });
101
+    });
102
+}
103
+
62
 generate_toc();
104
 generate_toc();
63
 register_toc_toggle();
105
 register_toc_toggle();
106
+listen_for_anchor_scrolls();

Loading…
Cancel
Save