add a logo, changes to css, format older articles

1 files changed, 55 insertions, 15 deletions

diff --git a/article.js b/article.js
index 723d97f..292d61c 100644
--- a/article.js
+++ b/article.js
@@ -1,24 +1,63 @@
+function addMetadata() {
+    // Favicon
+    const favicon = document.createElement("link");
+    favicon.rel = "icon";
+    favicon.href = "/Logo.svg";
+    favicon.type = "image/svg+xml";
+    document.head.appendChild(favicon);
+
+    // UTF-8 (for special characters)
+    const charset = document.createElement("meta");
+    charset.setAttribute("charset", "UTF-8");
+    document.head.appendChild(charset);
+
+    // viewport (for mobile)
+    const viewport = document.createElement("meta");
+    viewport.setAttribute("name", "viewport");
+    viewport.setAttribute("content", "width=device-width, initial-scale=1.0");
+    document.head.appendChild(viewport);
+
+    // css
+    const proseCss = document.createElement("link");
+    proseCss.rel = "stylesheet";
+    proseCss.href = "prose.css";
+    document.head.appendChild(proseCss);
+}
+
 function addHeader() {
     const header = document.querySelector("header");
-    
-    const h1 = document.createElement('h1');
+
+    // Logo
+    const logoLink = document.createElement("a");
+    logoLink.href = "/writing.html";
+    logoLink.classList.add("header-logo-link");
+    header.appendChild(logoLink);
+
+    // Right-side content
+    const info = document.createElement("div");
+    info.classList.add("header-info");
+
+    const h1 = document.createElement("h1");
     h1.textContent = document.title;
-    header.appendChild(h1);
-    
-    const time = document.createElement('time');
+    info.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'
+    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');
+    time.setAttribute("datetime", dateString);
+    time.textContent = `Published ${displayDate}`;
+    info.appendChild(time);
+
+    header.appendChild(info);
+
+    const hr = document.createElement("hr");
     header.appendChild(hr);
 }
 
@@ -47,6 +86,7 @@ function addTOC() {
 }
 
 document.addEventListener("DOMContentLoaded", () => {
+    addMetadata()
     addHeader()
     addTOC()
 })
\ No newline at end of file