fixing avatar reactivity

layouts/partials/sidebar.html

@@ -1,14 +1,5 @@
 <section>
-    {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
-        {{ $d1 := time.ParseDuration "-168h" }}
-        {{ $t1 := time.Now.Add $d1 }}
-        {{ $t2 := time.AsTime .PublishDate }}
-        {{ if $t2.After $t1 }}
     <div id="avatar-frame" class="online">
-        {{ else }}
-            <div id="avatar-frame" class="busy">
-        {{ end }}
-    {{ end }}
         <span class="gloss"></span>
         <img class="u-photo" width="100px" src="/images/avatar.jpg">
     </div>

themes/dreamcast/layouts/partials/footer.html

@@ -1,3 +1,5 @@
 <p>
-    peanut butter in the internet vent.
+    {{ range first 1 (where .Site.RegularPages.ByDate.Reverse "Section" "blog") }}
+        Last updated <time id="last-update" datetime="{{ .PublishDate }}">{{ .PublishDate.Format "January 2, 2006" }}</time>.
+    {{ end }}
 </p>

themes/dreamcast/layouts/partials/head.html

@@ -7,6 +7,7 @@
     <title>{{ .Page.Title }}</title>
     <link rel="stylesheet" href="/css/main.css">
     <link rel="icon" type="image/png" href="/favicon.png">
+    <script src="/js/avatar.js" defer></script>
     <script src="/js/quotes.js" defer></script>
     <link rel="webmention" href="https://webmention.io/yequari.com/webmention" />
     <link rel="pingback" href="https://webmention.io/yequari.com/xmlrpc" />

themes/dreamcast/static/css/main.css

@@ -262,7 +262,7 @@ nav li a:hover, nav li a:active {
 .sidebar {
     flex: 0 1 20%;
     border-right: 1px solid;
-    border-image: linear-gradient(transparent 5vh, grey 5.1vh, grey 94%, transparent 95%) 1;
+    border-image: linear-gradient(transparent 30px, grey 31px, grey 97%, transparent 98%) 1;
     padding: 30px 15px;
     /* background: linear-gradient(aqua 0%, transparent 15%); */
     /* border-radius: 15px 0 0 0; */
@@ -371,6 +371,7 @@ code {
 pre code{
     padding: 15px;
     display: block;
+    max-width: 640px;
 }
 
 ul.pagination {

themes/dreamcast/static/js/avatar.js

@@ -0,0 +1,14 @@
+let latest = document.querySelector('#last-update');
+let avatar = document.querySelector('#avatar-frame');
+
+let latestDate = Date.parse(latest.attributes.getNamedItem('datetime').value);
+let threshold = new Date();
+threshold.setDate(threshold.getDate() - 7);
+
+console.log(latestDate)
+
+if (latestDate < threshold) {
+  avatar.className = 'busy';
+} else {
+  avatar.className = 'online';
+}