10/25/2024, 9:59:16 AM
// ==UserScript==
// @name Display Toc On kernel.org[JS|UI]
// @namespace https://github.com/rikacelery
// @match https://lore.kernel.org/*
// @grant none
// @license MIT
// @compatible chrome
// @grant GM_addStyle
// @license MIT
// @version 0.0.3
// @author RikaCelery
// @supportURL https://github.com/RikaCelery/UserScriptSupport/issues
// @description 10/25/2024, 9:59:16 AM
// ==/UserScript==
GM_addStyle(`
*{
background: unset !important;
}
*.q {
display: block;
background: rgb(227, 249, 255)!important;
width: fit-content;
border-radius: 10px;
padding: 10px;
position: relative;
}
*.q::before{
content: '';
position: absolute;
left: 5px;
top: calc(10px);
height: calc(100% - 2 * 10px);
width: 5px;
border-radius: 5px;
background-color: rgb(166, 220, 228);
}
ul,body > form + pre {
position: relative;
background-color: rgba(200, 224, 228, 0.11)!important;
width: fit-content!important;
border-radius: 10px;
padding-top: 10px;
padding-bottom: 10px;
padding-right: 10px;
/* border: solid 1px rgba(39, 182, 175, 0.418); */
box-shadow: 2px 2px 15px rgba(0, 0, 0, 0.089);
}
body > form + pre {
padding-left: 10px;
padding-right: 10px;
}
ul li {
background: transparent!important;
width: fit-content!important;
}
ul::after{
content: '';
position: absolute;
left: 0px;
top: calc(3px);
height: calc(100% - 2 * 3px);
width: 2px;
border-radius: 5px;
background-color: rgba(65, 104, 101, 0.432);
}
body {
display: flex;
flex-direction: column;
}
body > pre.toc{
position: fixed;
top: 0;
right: 0;
width: fit-content;
align-self: flex-end;
z-index: 100;
padding-left: 10px;
padding-right: 10px;
}
body > pre.toc .container{
/* display: flex;/ */
/* flex-direction: column; */
}
body > pre.toc .container .item{
white-space: pre;
margin: 0;
padding: 0;
height: 1em;
/* display: inline-block; */
/* max-width:200px!important; */
/* overflow: hidden; */
}`)
window.onload = () => {
document.querySelectorAll("*.q").forEach((el) => {
el.childNodes.forEach((child) => {
if (child.nodeType === Node.TEXT_NODE) {
// console.log(child.textContent);
// child.textContent = child.textContent.replace(/^>\n\[\.\.\.\]/gm, "> [...]");
// child.textContent = child.textContent.replace(/^>( |$)/gm, " ");
}
// if (child.nodeType === Node.ELEMENT_NODE) console.log(child.innerHTML);
});
});
let pre = document.querySelectorAll("body > pre")[1];
pre.remove();
pre.classList.add("toc");
document.body.insertBefore(pre, document.querySelector("body > form"));
let tmp = [];
/**
* @type {{date:string,linkNode:ChildNode}[]}
*/
let strucured = [];
let parse = false;
let toc = document.querySelector("pre.toc")
toc.childNodes.forEach((node) => {
if (
node.nodeType === Node.TEXT_NODE &&
node.textContent.indexOf(
"-- links below jump to the message on this page --"
) != -1
) {
parse = true;
let idx =
node.textContent.indexOf(
"-- links below jump to the message on this page --"
) + "-- links below jump to the message on this page --".length;
let tmpNode = document.createTextNode(node.textContent.substring(0, idx));
tmp.push(tmpNode);
node = document.createTextNode(node.textContent.substring(idx));
console.log(idx, node.textContent, tmpNode.textContent);
} else {
if (!parse) tmp.push(node);
}
console.log(parse, node);
if (parse) {
if (node.nodeType === Node.TEXT_NODE) {
let content = node.textContent.trim();
if (!content) return;
if (!/^\d{4}-\d{2}-\d{2}$/.test(content)) {
let match = /^\s*(.*)\s*(\d{4}-\d{2}-\d{2} +\d+:\d+.*)/gs.exec(content);
console.log(content, match);
content = match[2];
strucured.push({
date: content,
linkNode: match[1],
});
} else
strucured.push({
date: content,
linkNode: null,
});
} else {
if (typeof strucured[strucured.length - 1].linkNode ==="string") {
strucured[strucured.length - 1].linkNode.textContent += strucured[strucured.length - 1].linkNode;
}
strucured[strucured.length - 1].linkNode = node;
}
}
});
console.log(tmp);
console.log(strucured);
toc.innerHTML=""
tmp.forEach(node=>toc.appendChild(node))
let tocContainer = document.createElement("div")
tocContainer.classList.add("container")
strucured.forEach(item=>{
let el = document.createElement("div")
el.classList.add("item")
el.innerHTML = `
${item.date}<a href="${item.linkNode.href}" id="${item.linkNode.id}">${item.linkNode.textContent}</a>
`
tocContainer.appendChild(el)
})
toc.appendChild(tocContainer)
};