${story.score || 0} points by
${escapeHTML(story.by || "")}
|
${timeAgo(story.time)}
${sanitizeHTML(comment.text) || ""}
`;
container.appendChild(div);
const children = div.querySelector(".children");
const toggle = div.querySelector(".toggle");
toggle.onclick = () => {
children.classList.toggle("hidden");
toggle.textContent = children.classList.contains("hidden")
? "[+]"
: "[–]";
};
const replyButton = div.querySelector(".reply-link");
replyButton.onclick = function (event) {
event.preventDefault();
openHNWindow(reply);
};
for (let i = 0; i < replies.length; i++) {
await renderComment(replies[i], children, storyID);
if (i > 0 && i % 10 === 0) {
await new Promise(requestAnimationFrame);
}
}
}
// -------------------------
// Discussion loading
// -------------------------
async function renderSingleDiscussion(story, ui) {
ui.body.innerHTML = "";
renderStory(story, ui.body);
const comments = document.createElement("div");
comments.className = "top-level-comments";
ui.body.appendChild(comments);
for (const child of story.kids || []) {
await renderComment(child, comments, story.id);
}
}
async function renderBlendedDiscussion(stories, ui) {
ui.body.innerHTML = "";
for (const story of stories) {
const section = document.createElement("div");
section.className = "submission";
ui.body.appendChild(section);
renderStory(story, section, {
multiple: true,
stories,
});
const comments = document.createElement("div");
comments.className = "top-level-comments";
section.appendChild(comments);
for (const child of story.kids || []) {
await renderComment(child, comments, story.id);
}
}
}
async function loadStories(stories) {
const loaded = [];
for (const story of normalizeStories(stories)) {
const item = await getItem(story.objectID);
if (item) {
loaded.push(item);
}
}
loaded.sort((a, b) => b.time - a.time);
return loaded;
}
// -------------------------
// Open sidebar
// -------------------------
function normalizeStories(stories) {
return stories.map((story) =>
typeof story === "string" ? { objectID: story } : story,
);
}
async function openSidebar(stories) {
if (opening) return;
opening = true;
try {
const ui = await createSidebar();
const loaded = await loadStories(stories);
if (!loaded.length) {
throw new Error("No HN stories could be loaded");
}
if (loaded.length === 1) {
await renderSingleDiscussion(loaded[0], ui);
} else {
await renderBlendedDiscussion(loaded, ui);
}
} catch (e) {
console.error(e);
} finally {
opening = false;
}
}
// -------------------------
// Hacker News click tracking
// -------------------------
function setupHNListener() {
document.addEventListener(
"click",
async function (event) {
try {
const link = event.target.closest("a");
if (!link) return;
const row = link.closest("tr.athing");
if (!row) return;
if (!link.closest(".titleline")) return;
const id = row.id;
if (!id) return;
console.log("Saving HN story:", id, link.href);
await save(STORAGE.last, {
url: link.href,
ids: [id],
timestamp: Date.now(),
});
} catch (e) {
console.error("Failed saving HN story:", e);
}
},
true,
);
}
// -------------------------
// URL helpers
// -------------------------
function sameURL(a, b) {
return normalizeURL(a) === normalizeURL(b);
}
// -------------------------
// Initialization
// -------------------------
async function init() {
console.log("HNewhere sidebar loaded", location.href);
// On HN, only record clicked stories.
if (location.hostname === "news.ycombinator.com") {
setupHNListener();
return;
}
// Check if we arrived here by clicking
// a story from Hacker News.
let last = await load(STORAGE.last, null);
if (last && Date.now() - last.timestamp > 300000) {
await save(STORAGE.last, null);
last = null;
}
console.log("Stored HN click:", last);
console.log("Current URL:", location.href);
console.log("Same URL:", last && sameURL(last.url, location.href));
console.log("Age:", last ? Date.now() - last.timestamp : null);
if (
last &&
sameURL(last.url, location.href) &&
Date.now() - last.timestamp < 300000
) {
console.log("Opening HN discussion from click:", last.ids);
await save(STORAGE.last, null);
await openSidebar(
last.ids.map((id) => ({
objectID: id,
})),
);
return;
}
// Otherwise, silently check if this URL
// already has an HN discussion.
const stories = await findHN(location.href);
if (stories.length) {
console.log(
"Found HN discussions:",
stories.map((s) => s.objectID),
);
if (isMobile()) {
await createCollapsedButton(stories);
} else {
await openSidebar(
stories.map((story) => ({
objectID: story.objectID,
})),
);
}
}
}
init().catch(console.error);
})();