mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-10 15:39:01 +00:00
127 lines
3.6 KiB
JavaScript
127 lines
3.6 KiB
JavaScript
/**
|
|
* notion-enhancer
|
|
* (c) 2022 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
|
* (https://notion-enhancer.github.io/) under the MIT license
|
|
*/
|
|
|
|
// these utils are for manual use (e.g. in the devtools console)
|
|
// to assist in the generation of the theme.css and variables.css files
|
|
|
|
const cssProperties = [
|
|
"background-color",
|
|
"border-color",
|
|
"box-shadow",
|
|
"caret-color",
|
|
"color",
|
|
"fill",
|
|
"outline-color",
|
|
"text-decoration-color",
|
|
],
|
|
prismTokens = [
|
|
"keyword",
|
|
"builtin",
|
|
"class-name",
|
|
"function",
|
|
"boolean",
|
|
"number",
|
|
"string",
|
|
"char",
|
|
"symbol",
|
|
"regex",
|
|
"url",
|
|
"operator",
|
|
"variable",
|
|
"constant",
|
|
"property",
|
|
"punctuation",
|
|
"important",
|
|
"comment",
|
|
"tag",
|
|
"attr-name",
|
|
"attr-value",
|
|
"namespace",
|
|
"prolog",
|
|
"doctype",
|
|
"cdata",
|
|
"entity",
|
|
"atrule",
|
|
"selector",
|
|
"inserted",
|
|
"deleted",
|
|
];
|
|
|
|
const generateQuerySelector = (el) => {
|
|
if (el.tagName === "HTML") return "html";
|
|
const parentSelector = generateQuerySelector(el.parentElement);
|
|
if (el.id) return `${parentSelector} > #${el.id}`;
|
|
const classes = [...el.classList].map((cls) => `.${cls}`).join(""),
|
|
style = el.getAttribute("style")
|
|
? `[style="${el.getAttribute("style").replace(/"/g, "'")}"]`
|
|
: "",
|
|
index = `:nth-child(${[...el.parentElement.children].indexOf(el) + 1})`;
|
|
return `${parentSelector} > ${classes || style || index}`;
|
|
},
|
|
getComputedPropertyValue = (el, prop) => {
|
|
const styles = window.getComputedStyle(el),
|
|
value = styles.getPropertyValue(prop);
|
|
return value;
|
|
};
|
|
|
|
const generatePrismVariables = () => {
|
|
let cssVariables = "",
|
|
colourRefs = {};
|
|
const el = document.querySelector(".notion-code-block .token");
|
|
for (const token of prismTokens) {
|
|
el.className = `token ${token}`;
|
|
const varName = token.replace(/-/g, "_"),
|
|
colourValue = getComputedPropertyValue(el, "color");
|
|
colourRefs[colourValue] ??= varName;
|
|
cssVariables += `--theme--code-${varName}: ${
|
|
colourRefs[colourValue] === varName
|
|
? colourValue
|
|
: `var(--theme--code-${colourRefs[colourValue]})`
|
|
};`;
|
|
}
|
|
return cssVariables;
|
|
};
|
|
|
|
console.log(generatePrismVariables());
|
|
|
|
// getComputedPropertyValues = (el) => {
|
|
// const styles = window.getComputedStyle(el),
|
|
// values = cssProperties.map((prop) => [
|
|
// prop,
|
|
// styles.getPropertyValue(prop),
|
|
// ]);
|
|
// return Object.fromEntries(values);
|
|
// },
|
|
// indexCssValues = () => {
|
|
// // Map<value, { [k: property]: selector[] }
|
|
// const cssValues = new Map();
|
|
// for (const el of document.querySelectorAll("*")) {
|
|
// const styles = getComputedPropertyValues(el),
|
|
// selector = generateQuerySelector(el);
|
|
// for (const prop in styles) {
|
|
// const value = styles[prop];
|
|
// if (value.includes("svg") || value.includes("url")) continue;
|
|
// if (!(value.includes("rgb") || value.includes("#"))) continue;
|
|
// if (!cssValues.has(value)) cssValues.set(value, {});
|
|
// cssValues.get(value)[prop] ??= [];
|
|
// cssValues.get(value)[prop].push(selector);
|
|
// }
|
|
// }
|
|
// return cssValues;
|
|
// },
|
|
// mapCssValuesToVariables = (cssValues) => {
|
|
// let i = 0,
|
|
// cssRoot = "",
|
|
// cssBody = "";
|
|
// for (const [value, props] of cssValues) {
|
|
// cssRoot += `--${++i}: ${value};`;
|
|
// for (const prop in props) {
|
|
// cssBody += `${props[prop].join(", ")} { ${prop}: var(--${i}); }`;
|
|
// }
|
|
// }
|
|
// return `:root { ${cssRoot} } ${cssBody}`;
|
|
// };
|