1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
|
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");
// 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;
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"
});
time.setAttribute("datetime", dateString);
time.textContent = `Published ${displayDate}`;
info.appendChild(time);
header.appendChild(info);
const hr = document.createElement("hr");
header.appendChild(hr);
}
function addTOC() {
const tocDiv = document.getElementById("toc");
if (!tocDiv) return;
const tocHeading = document.createElement("h2");
tocHeading.textContent = "Table of Contents";
tocDiv.appendChild(tocHeading);
const toc = document.createElement("ul");
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;
const li = document.createElement("li");
li.appendChild(link);
toc.appendChild(li);
});
tocDiv.appendChild(toc);
}
document.addEventListener("DOMContentLoaded", () => {
addMetadata()
addHeader()
addTOC()
})
|
