Reversible Programming, html formatting changes, and css tweaksHEADmain

1 files changed, 40 insertions, 41 deletions

diff --git a/article.js b/article.js
index 4818a3d..723d97f 100644
--- a/article.js
+++ b/article.js
@@ -1,53 +1,52 @@
+function addHeader() {
+    const header = document.querySelector("header");
+    
+    const h1 = document.createElement('h1');
+    h1.textContent = document.title;
+    header.appendChild(h1);
+    
+    const time = document.createElement('time');
+    const metaDate = document.querySelector('meta[property="article:published_time"]');
+    const dateString = metaDate.getAttribute('content');
+    const displayDate = (new Date(dateString)).toLocaleDateString('en-US', {
+        month: 'short',
+        day: 'numeric',
+        year: 'numeric',
+        timeZone: 'UTC'
+    });
+    time.setAttribute('datetime', dateString);
+    time.textContent = displayDate;
+    header.appendChild(time);
+
+    const hr = document.createElement('hr');
+    header.appendChild(hr);
+}
+
 function addTOC() {
-    var tocDiv = document.createElement("div");
-    tocDiv.classList += "toc";
-    var toc = document.createElement("ul");
+    const tocDiv = document.getElementById("toc");
+    if (!tocDiv) return;
 
-    document.body.querySelectorAll('h1, h2, h3, h4, h5, h6').forEach(heading => {
-        var link = document.createElement('a');
-        link.setAttribute('href', '#'+heading.id.toLowerCase());
-        link.textContent = heading.textContent;
-        
-        var li = document.createElement('li');
-        li.appendChild(link);
-        
-        toc.appendChild(li);
-    });
+    const tocHeading = document.createElement("h2");
+    tocHeading.textContent = "Table of Contents";
+    tocDiv.appendChild(tocHeading);
 
-    tocDiv.append(toc);
-    document.body.prepend(tocDiv);
+    const toc = document.createElement("ul");
 
-    var styleBlock = document.createElement("style");
-    styleBlock.textContent = `
-        .toc {
-            position: fixed;
-            width: 17rem;
-            top: 32px;
-            left: calc(50vw - 37.5ch - 20rem);
-            padding-right: 0.75rem;
-            z-index: 1;
+    document.querySelectorAll('article :is(h1, h2, h3, h4, h5, h6):not(header *, #toc *)').forEach(heading => {
+        const link = document.createElement("a");
+        link.href = "#" + heading.id.toLowerCase();
+        link.textContent = heading.textContent;
 
-            ul {
-                margin: 0;
-                padding-left: 1rem;
-                line-height: 1.4;
-            }
+        const li = document.createElement("li");
+        li.appendChild(link);
 
-            li {
-                margin-bottom: 0.35rem;
-                font-size: 1.1rem;
-            }
-        }
+        toc.appendChild(li);
+    });
 
-        @media (max-width: 1000px) {
-            .toc {
-                display: none;
-            }
-        }
-    `;
-    document.head.append(styleBlock);
+    tocDiv.appendChild(toc);
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+    addHeader()
     addTOC()
 })
\ No newline at end of file