mirror of
https://github.com/notion-enhancer/notion-enhancer.git
synced 2025-04-04 12:49:03 +00:00
chore: switch to unocss for styling
faster + more powerful + better documented + more active than twind. sticking with custom preset-icons to avoid fetching over cdn + to load custom icons
This commit is contained in:
parent
7fe993d356
commit
f0e2570448
GPG Key ID:
7998D08F7D7BD7A8
@ -9,10 +9,41 @@ import { existsSync } from "node:fs";
|
||||
import { resolve } from "node:path";
|
||||
import { fileURLToPath } from "node:url";
|
||||
|
||||
const esmVersion = "135",
|
||||
esTarget = "es2022",
|
||||
esmBundle = ({ name, version, path = "", exports = [] }) => {
|
||||
const scopedName = name;
|
||||
if (name.startsWith("@")) name = name.split("/")[1];
|
||||
path ||= `${name}.bundle.mjs`;
|
||||
let bundleSrc = `https://esm.sh/v${esmVersion}/${scopedName}@${version}/${esTarget}/${path}`;
|
||||
if (exports.length) bundleSrc += `?bundle&exports=${exports.join()}`;
|
||||
return { [`${scopedName.replace(/\//g, "-")}.mjs`]: bundleSrc };
|
||||
};
|
||||
|
||||
const dependencies = {
|
||||
"htm.min.js": "https://unpkg.com/htm@3.1.1/mini/index.js",
|
||||
"twind.min.js": "https://unpkg.com/@twind/cdn@1.0.8/cdn.global.js",
|
||||
"lucide.min.js": "https://unpkg.com/lucide@0.319.0/dist/umd/lucide.min.js",
|
||||
...esmBundle({ name: "htm", version: "3.1.1" }),
|
||||
...esmBundle({
|
||||
name: "lucide",
|
||||
version: "0.319.0",
|
||||
path: "dist/umd/lucide.mjs",
|
||||
}),
|
||||
...esmBundle({
|
||||
name: "@unocss/core",
|
||||
version: "0.58.5",
|
||||
exports: ["createGenerator", "expandVariantGroup"],
|
||||
}),
|
||||
...esmBundle({
|
||||
name: "@unocss/preset-uno",
|
||||
version: "0.58.5",
|
||||
exports: ["presetUno"],
|
||||
}),
|
||||
...esmBundle({
|
||||
name: "@unocss/preset-icons",
|
||||
version: "0.58.5",
|
||||
exports: ["presetIcons"],
|
||||
}),
|
||||
"@unocss-preflight-tailwind.css":
|
||||
"https://esm.sh/@unocss/reset@0.58.5/tailwind.css",
|
||||
"coloris.min.js":
|
||||
"https://cdn.jsdelivr.net/gh/mdbassit/Coloris@v0.22.0/dist/coloris.min.js",
|
||||
"coloris.min.css":
|
||||
@ -29,22 +60,3 @@ for (const file in dependencies) {
|
||||
res = await (await fetch(source)).text();
|
||||
await write(file, res);
|
||||
}
|
||||
|
||||
// expose vendored twind cdn
|
||||
await append("twind.min.js", `\n;globalThis.twind = twind;`);
|
||||
|
||||
// build content type lookup script from mime-db to avoid
|
||||
// re-processing entire the database every time a file is
|
||||
// requested via notion://www.notion.so/__notion-enhancer/
|
||||
let contentTypes = [];
|
||||
for (const [type, { extensions, charset }] of Object.entries(
|
||||
await (await fetch("https://unpkg.com/mime-db@1.52.0/db.json")).json()
|
||||
)) {
|
||||
if (!extensions) continue;
|
||||
const contentType = charset
|
||||
? `${type}; charset=${charset.toLowerCase()}`
|
||||
: type;
|
||||
for (const ext of extensions) contentTypes.push([ext, contentType]);
|
||||
}
|
||||
contentTypes = `module.exports=new Map(${JSON.stringify(contentTypes)});`;
|
||||
await write("content-types.min.js", contentTypes);
|
||||
|
||||
@ -61,56 +61,6 @@ const _state = {},
|
||||
},
|
||||
dumpState = () => _state;
|
||||
|
||||
let documentObserver,
|
||||
mutationListeners = [];
|
||||
const mutationQueue = [],
|
||||
addMutationListener = (selector, callback, subtree = true) => {
|
||||
mutationListeners.push([selector, callback, subtree]);
|
||||
},
|
||||
removeMutationListener = (callback) => {
|
||||
mutationListeners = mutationListeners.filter(([, c]) => c !== callback);
|
||||
},
|
||||
selectorMutated = (mutation, selector, subtree) => {
|
||||
const target =
|
||||
mutation.type === "characterData"
|
||||
? mutation.target.parentElement
|
||||
: mutation.target,
|
||||
matchesTarget = target?.matches(selector);
|
||||
if (!subtree) return matchesTarget;
|
||||
const descendsFromTarget = target?.matches(`${selector} *`),
|
||||
addedToTarget = [...(mutation.addedNodes || [])].some(
|
||||
(node) =>
|
||||
node instanceof HTMLElement &&
|
||||
(node?.matches(`${selector}, ${selector} *`) ||
|
||||
node?.querySelector(selector))
|
||||
);
|
||||
return matchesTarget || descendsFromTarget || addedToTarget;
|
||||
},
|
||||
handleMutations = () => {
|
||||
while (mutationQueue.length) {
|
||||
const mutation = mutationQueue.shift();
|
||||
for (const [selector, callback, subtree] of mutationListeners) {
|
||||
const matches = selectorMutated(mutation, selector, subtree);
|
||||
if (matches) callback(mutation);
|
||||
}
|
||||
}
|
||||
},
|
||||
attachObserver = () => {
|
||||
if (document.readyState !== "complete") return;
|
||||
documentObserver ??= new MutationObserver((mutations, _observer) => {
|
||||
if (!mutationQueue.length) requestIdleCallback(handleMutations);
|
||||
mutationQueue.push(...mutations);
|
||||
});
|
||||
documentObserver.observe(document.body, {
|
||||
attributes: true,
|
||||
characterData: true,
|
||||
childList: true,
|
||||
subtree: true,
|
||||
});
|
||||
};
|
||||
document.addEventListener("readystatechange", attachObserver);
|
||||
attachObserver();
|
||||
|
||||
let keyListeners = [];
|
||||
// accelerators approximately match electron accelerators.
|
||||
// logic used when recording hotkeys in menu matches logic used
|
||||
@ -163,17 +113,21 @@ const modifierAliases = [
|
||||
});
|
||||
if (combinationTriggered) callback(event);
|
||||
}
|
||||
},
|
||||
onKeyup = (event) => {
|
||||
const keyupListeners = keyListeners //
|
||||
.filter(([, , waitForKeyup]) => waitForKeyup);
|
||||
handleKeypress(event, keyupListeners);
|
||||
},
|
||||
onKeydown = (event) => {
|
||||
const keydownListeners = keyListeners //
|
||||
.filter(([, , waitForKeyup]) => !waitForKeyup);
|
||||
handleKeypress(event, keydownListeners);
|
||||
};
|
||||
document.addEventListener("keyup", (event) => {
|
||||
const keyupListeners = keyListeners //
|
||||
.filter(([, , waitForKeyup]) => waitForKeyup);
|
||||
handleKeypress(event, keyupListeners);
|
||||
});
|
||||
document.addEventListener("keydown", (event) => {
|
||||
const keydownListeners = keyListeners //
|
||||
.filter(([, , waitForKeyup]) => !waitForKeyup);
|
||||
handleKeypress(event, keydownListeners);
|
||||
});
|
||||
document.removeEventListener("keyup", onKeyup);
|
||||
document.removeEventListener("keydown", onKeydown);
|
||||
document.addEventListener("keyup", onKeyup);
|
||||
document.addEventListener("keydown", onKeydown);
|
||||
|
||||
Object.assign((globalThis.__enhancerApi ??= {}), {
|
||||
sleep,
|
||||
@ -181,8 +135,6 @@ Object.assign((globalThis.__enhancerApi ??= {}), {
|
||||
setState,
|
||||
useState,
|
||||
dumpState,
|
||||
addMutationListener,
|
||||
removeMutationListener,
|
||||
addKeyListener,
|
||||
removeKeyListener,
|
||||
});
|
||||
|
||||
@ -1,598 +0,0 @@
|
||||
/**
|
||||
* notion-enhancer
|
||||
* (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
const { twind, htm, lucide } = globalThis,
|
||||
{ iconColour, iconMonochrome } = globalThis.__enhancerApi;
|
||||
|
||||
const kebabToPascalCase = (string) =>
|
||||
string[0].toUpperCase() +
|
||||
string.replace(/-[a-z]/g, (match) => match.slice(1).toUpperCase()).slice(1),
|
||||
hToString = (type, props, ...children) =>
|
||||
`<${type}${Object.entries(props)
|
||||
.map(([attr, value]) => ` ${attr}="${value}"`)
|
||||
.join("")}>${children
|
||||
.map((child) => (Array.isArray(child) ? hToString(...child) : child))
|
||||
.join("")}</${type}>`;
|
||||
|
||||
const encodeSvg = (svg) =>
|
||||
// https://gist.github.com/jennyknuth/222825e315d45a738ed9d6e04c7a88d0
|
||||
svg
|
||||
.replace(
|
||||
"<svg",
|
||||
~svg.indexOf("xmlns")
|
||||
? "<svg"
|
||||
: '<svg xmlns="http://www.w3.org/2000/svg"'
|
||||
)
|
||||
.replace(/"/g, "'")
|
||||
.replace(/%/g, "%25")
|
||||
.replace(/#/g, "%23")
|
||||
.replace(/{/g, "%7B")
|
||||
.replace(/}/g, "%7D")
|
||||
.replace(/</g, "%3C")
|
||||
.replace(/>/g, "%3E")
|
||||
.replace(/\s+/g, " "),
|
||||
presetIcons = ([, icon, mode]) => {
|
||||
let svg;
|
||||
// manually register i-notion-enhancer: renders the colour
|
||||
// version by default, renders the monochrome version when
|
||||
// mask mode is requested via i-notion-enhancer?mask
|
||||
if (icon === "notion-enhancer") {
|
||||
svg = mode === "mask" ? iconMonochrome : iconColour;
|
||||
} else {
|
||||
icon = kebabToPascalCase(icon);
|
||||
if (!lucide[icon]) return;
|
||||
const [type, props, children] = lucide[icon];
|
||||
svg = hToString(type, props, ...children);
|
||||
}
|
||||
// https://antfu.me/posts/icons-in-pure-css
|
||||
const dataUri = `url("data:image/svg+xml;utf8,${encodeSvg(svg)}")`;
|
||||
if (mode === "auto") mode = undefined;
|
||||
mode ??= svg.includes("currentColor") ? "mask" : "bg";
|
||||
return {
|
||||
display: "inline-block",
|
||||
height: "1em",
|
||||
width: "1em",
|
||||
...(mode === "mask"
|
||||
? {
|
||||
mask: `${dataUri} no-repeat`,
|
||||
"mask-size": "100% 100%",
|
||||
"background-color": "currentColor",
|
||||
color: "inherit",
|
||||
}
|
||||
: {
|
||||
background: `${dataUri} no-repeat`,
|
||||
"background-size": "100% 100%",
|
||||
"background-color": "transparent",
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
// at-runtime utility class evaluation w/ twind:
|
||||
// - feature parity w/ tailwind v3
|
||||
// - useful for building self-contained components
|
||||
// (mods can extend interfaces w/out needing to
|
||||
// import additional stylesheets)
|
||||
// - integrated with lucide to render icons w/out
|
||||
// complex markup, e.g. `<i class="i-bookmark" />`
|
||||
twind.install({
|
||||
darkMode: "class",
|
||||
rules: [
|
||||
["text-(wrap|nowrap|balance|pretty)", "textWrap"],
|
||||
[/^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/, presetIcons],
|
||||
[/^size-\[([^\]]+)\]$/, ({ 1: $1 }) => ({ height: $1, width: $1 })],
|
||||
],
|
||||
variants: [
|
||||
["children", "&>*"],
|
||||
["siblings", "&~*"],
|
||||
["sibling", "&+*"],
|
||||
[/^&/, (match) => match.input],
|
||||
[/^has-\[([^\]]+)\]/, (match) => `&:has(${match[1]})`],
|
||||
[
|
||||
/^not-([a-z-]+|\[.+\])/,
|
||||
({ 1: $1 }) => `&:not(${($1[0] == "[" ? "" : ":") + $1})`,
|
||||
],
|
||||
],
|
||||
});
|
||||
|
||||
// https://developer.mozilla.org/en-US/docs/Web/SVG/Element
|
||||
const svgElements = [
|
||||
"animate",
|
||||
"animateMotion",
|
||||
"animateTransform",
|
||||
"circle",
|
||||
"clipPath",
|
||||
"defs",
|
||||
"desc",
|
||||
"discard",
|
||||
"ellipse",
|
||||
"feBlend",
|
||||
"feColorMatrix",
|
||||
"feComponentTransfer",
|
||||
"feComposite",
|
||||
"feConvolveMatrix",
|
||||
"feDiffuseLighting",
|
||||
"feDisplacementMap",
|
||||
"feDistantLight",
|
||||
"feDropShadow",
|
||||
"feFlood",
|
||||
"feFuncA",
|
||||
"feFuncB",
|
||||
"feFuncG",
|
||||
"feFuncR",
|
||||
"feGaussianBlur",
|
||||
"feImage",
|
||||
"feMerge",
|
||||
"feMergeNode",
|
||||
"feMorphology",
|
||||
"feOffset",
|
||||
"fePointLight",
|
||||
"feSpecularLighting",
|
||||
"feSpotLight",
|
||||
"feTile",
|
||||
"feTurbulence",
|
||||
"filter",
|
||||
"foreignObject",
|
||||
"g",
|
||||
"hatch",
|
||||
"hatchpath",
|
||||
"image",
|
||||
"line",
|
||||
"linearGradient",
|
||||
"marker",
|
||||
"mask",
|
||||
"metadata",
|
||||
"mpath",
|
||||
"path",
|
||||
"pattern",
|
||||
"polygon",
|
||||
"polyline",
|
||||
"radialGradient",
|
||||
"rect",
|
||||
"script",
|
||||
"set",
|
||||
"stop",
|
||||
"style",
|
||||
"svg",
|
||||
"switch",
|
||||
"symbol",
|
||||
"text",
|
||||
"textPath",
|
||||
"title",
|
||||
"tspan",
|
||||
"use",
|
||||
"view",
|
||||
],
|
||||
htmlAttributes = [
|
||||
// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
|
||||
"accept",
|
||||
"accept-charset",
|
||||
"accesskey",
|
||||
"action",
|
||||
"align",
|
||||
"allow",
|
||||
"alt",
|
||||
"async",
|
||||
"autocapitalize",
|
||||
"autocomplete",
|
||||
"autofocus",
|
||||
"autoplay",
|
||||
"background",
|
||||
"bgcolor",
|
||||
"border",
|
||||
"buffered",
|
||||
"capture",
|
||||
"challenge",
|
||||
"charset",
|
||||
"checked",
|
||||
"cite",
|
||||
"class",
|
||||
"code",
|
||||
"codebase",
|
||||
"color",
|
||||
"cols",
|
||||
"colspan",
|
||||
"content",
|
||||
"contenteditable",
|
||||
"contextmenu",
|
||||
"controls",
|
||||
"coords",
|
||||
"crossorigin",
|
||||
"csp",
|
||||
"data",
|
||||
"data-*",
|
||||
"datetime",
|
||||
"decoding",
|
||||
"default",
|
||||
"defer",
|
||||
"dir",
|
||||
"dirname",
|
||||
"disabled",
|
||||
"download",
|
||||
"draggable",
|
||||
"enctype",
|
||||
"enterkeyhint",
|
||||
"for",
|
||||
"form",
|
||||
"formaction",
|
||||
"formenctype",
|
||||
"formmethod",
|
||||
"formnovalidate",
|
||||
"formtarget",
|
||||
"headers",
|
||||
"height",
|
||||
"hidden",
|
||||
"high",
|
||||
"href",
|
||||
"hreflang",
|
||||
"http-equiv",
|
||||
"icon",
|
||||
"id",
|
||||
"importance",
|
||||
"integrity",
|
||||
"inputmode",
|
||||
"ismap",
|
||||
"itemprop",
|
||||
"keytype",
|
||||
"kind",
|
||||
"label",
|
||||
"lang",
|
||||
"loading",
|
||||
"list",
|
||||
"loop",
|
||||
"low",
|
||||
"max",
|
||||
"maxlength",
|
||||
"minlength",
|
||||
"media",
|
||||
"method",
|
||||
"min",
|
||||
"multiple",
|
||||
"muted",
|
||||
"name",
|
||||
"novalidate",
|
||||
"open",
|
||||
"optimum",
|
||||
"pattern",
|
||||
"ping",
|
||||
"placeholder",
|
||||
"playsinline",
|
||||
"poster",
|
||||
"preload",
|
||||
"radiogroup",
|
||||
"readonly",
|
||||
"referrerpolicy",
|
||||
"rel",
|
||||
"required",
|
||||
"reversed",
|
||||
"role",
|
||||
"rows",
|
||||
"rowspan",
|
||||
"sandbox",
|
||||
"scope",
|
||||
"selected",
|
||||
"shape",
|
||||
"size",
|
||||
"sizes",
|
||||
"slot",
|
||||
"span",
|
||||
"spellcheck",
|
||||
"src",
|
||||
"srcdoc",
|
||||
"srclang",
|
||||
"srcset",
|
||||
"start",
|
||||
"step",
|
||||
"style",
|
||||
"tabindex",
|
||||
"target",
|
||||
"title",
|
||||
"translate",
|
||||
"type",
|
||||
"usemap",
|
||||
"value",
|
||||
"width",
|
||||
"wrap",
|
||||
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute[
|
||||
"accent-height",
|
||||
"accumulate",
|
||||
"additive",
|
||||
"alignment-baseline",
|
||||
"alphabetic",
|
||||
"amplitude",
|
||||
"arabic-form",
|
||||
"ascent",
|
||||
"attributeName",
|
||||
"attributeType",
|
||||
"azimuth",
|
||||
"baseFrequency",
|
||||
"baseline-shift",
|
||||
"baseProfile",
|
||||
"bbox",
|
||||
"begin",
|
||||
"bias",
|
||||
"by",
|
||||
"calcMode",
|
||||
"cap-height",
|
||||
"clip",
|
||||
"clipPathUnits",
|
||||
"clip-path",
|
||||
"clip-rule",
|
||||
"color-interpolation",
|
||||
"color-interpolation-filters",
|
||||
"color-profile",
|
||||
"color-rendering",
|
||||
"contentScriptType",
|
||||
"contentStyleType",
|
||||
"cursor",
|
||||
"cx",
|
||||
"cy",
|
||||
"d",
|
||||
"decelerate",
|
||||
"descent",
|
||||
"diffuseConstant",
|
||||
"direction",
|
||||
"display",
|
||||
"divisor",
|
||||
"dominant-baseline",
|
||||
"dur",
|
||||
"dx",
|
||||
"dy",
|
||||
"edgeMode",
|
||||
"elevation",
|
||||
"enable-background",
|
||||
"end",
|
||||
"exponent",
|
||||
"fill",
|
||||
"fill-opacity",
|
||||
"fill-rule",
|
||||
"filter",
|
||||
"filterRes",
|
||||
"filterUnits",
|
||||
"flood-color",
|
||||
"flood-opacity",
|
||||
"font-family",
|
||||
"font-size",
|
||||
"font-size-adjust",
|
||||
"font-stretch",
|
||||
"font-style",
|
||||
"font-variant",
|
||||
"font-weight",
|
||||
"format",
|
||||
"from",
|
||||
"fr",
|
||||
"fx",
|
||||
"fy",
|
||||
"g1",
|
||||
"g2",
|
||||
"glyph-name",
|
||||
"glyph-orientation-horizontal",
|
||||
"glyph-orientation-vertical",
|
||||
"glyphRef",
|
||||
"gradientTransform",
|
||||
"gradientUnits",
|
||||
"hanging",
|
||||
"horiz-adv-x",
|
||||
"horiz-origin-x",
|
||||
"ideographic",
|
||||
"image-rendering",
|
||||
"in",
|
||||
"in2",
|
||||
"intercept",
|
||||
"k",
|
||||
"k1",
|
||||
"k2",
|
||||
"k3",
|
||||
"k4",
|
||||
"kernelMatrix",
|
||||
"kernelUnitLength",
|
||||
"kerning",
|
||||
"keyPoints",
|
||||
"keySplines",
|
||||
"keyTimes",
|
||||
"lengthAdjust",
|
||||
"letter-spacing",
|
||||
"lighting-color",
|
||||
"limitingConeAngle",
|
||||
"local",
|
||||
"marker-end",
|
||||
"marker-mid",
|
||||
"marker-start",
|
||||
"markerHeight",
|
||||
"markerUnits",
|
||||
"markerWidth",
|
||||
"mask",
|
||||
"maskContentUnits",
|
||||
"maskUnits",
|
||||
"mathematical",
|
||||
"mode",
|
||||
"numOctaves",
|
||||
"offset",
|
||||
"opacity",
|
||||
"operator",
|
||||
"order",
|
||||
"orient",
|
||||
"orientation",
|
||||
"origin",
|
||||
"overflow",
|
||||
"overline-position",
|
||||
"overline-thickness",
|
||||
"panose-1",
|
||||
"paint-order",
|
||||
"path",
|
||||
"pathLength",
|
||||
"patternContentUnits",
|
||||
"patternTransform",
|
||||
"patternUnits",
|
||||
"pointer-events",
|
||||
"points",
|
||||
"pointsAtX",
|
||||
"pointsAtY",
|
||||
"pointsAtZ",
|
||||
"preserveAlpha",
|
||||
"preserveAspectRatio",
|
||||
"primitiveUnits",
|
||||
"r",
|
||||
"radius",
|
||||
"referrerPolicy",
|
||||
"refX",
|
||||
"refY",
|
||||
"rendering-intent",
|
||||
"repeatCount",
|
||||
"repeatDur",
|
||||
"requiredExtensions",
|
||||
"requiredFeatures",
|
||||
"restart",
|
||||
"result",
|
||||
"rotate",
|
||||
"rx",
|
||||
"ry",
|
||||
"scale",
|
||||
"seed",
|
||||
"shape-rendering",
|
||||
"slope",
|
||||
"spacing",
|
||||
"specularConstant",
|
||||
"specularExponent",
|
||||
"speed",
|
||||
"spreadMethod",
|
||||
"startOffset",
|
||||
"stdDeviation",
|
||||
"stemh",
|
||||
"stemv",
|
||||
"stitchTiles",
|
||||
"stop-color",
|
||||
"stop-opacity",
|
||||
"strikethrough-position",
|
||||
"strikethrough-thickness",
|
||||
"string",
|
||||
"stroke",
|
||||
"stroke-dasharray",
|
||||
"stroke-dashoffset",
|
||||
"stroke-linecap",
|
||||
"stroke-linejoin",
|
||||
"stroke-miterlimit",
|
||||
"stroke-opacity",
|
||||
"stroke-width",
|
||||
"surfaceScale",
|
||||
"systemLanguage",
|
||||
"tableValues",
|
||||
"targetX",
|
||||
"targetY",
|
||||
"text-anchor",
|
||||
"text-decoration",
|
||||
"text-rendering",
|
||||
"textLength",
|
||||
"to",
|
||||
"transform",
|
||||
"transform-origin",
|
||||
"u1",
|
||||
"u2",
|
||||
"underline-position",
|
||||
"underline-thickness",
|
||||
"unicode",
|
||||
"unicode-bidi",
|
||||
"unicode-range",
|
||||
"units-per-em",
|
||||
"v-alphabetic",
|
||||
"v-hanging",
|
||||
"v-ideographic",
|
||||
"v-mathematical",
|
||||
"values",
|
||||
"vector-effect",
|
||||
"version",
|
||||
"vert-adv-y",
|
||||
"vert-origin-x",
|
||||
"vert-origin-y",
|
||||
"viewBox",
|
||||
"viewTarget",
|
||||
"visibility",
|
||||
"widths",
|
||||
"word-spacing",
|
||||
"writing-mode",
|
||||
"x",
|
||||
"x-height",
|
||||
"x1",
|
||||
"x2",
|
||||
"xChannelSelector",
|
||||
"xlink:actuate",
|
||||
"xlink:arcrole",
|
||||
"xlink:href",
|
||||
"xlink:role",
|
||||
"xlink:show",
|
||||
"xlink:title",
|
||||
"xlink:type",
|
||||
"xml:base",
|
||||
"xml:lang",
|
||||
"xml:space",
|
||||
"y",
|
||||
"y1",
|
||||
"y2",
|
||||
"yChannelSelector",
|
||||
"z",
|
||||
"zoomAndPan",
|
||||
];
|
||||
|
||||
// enables use of the jsx-like htm syntax
|
||||
// for building components and interfaces
|
||||
// with tagged templates. instantiates dom
|
||||
// elements directly, does not use a vdom.
|
||||
// e.g. html`<div class=${className}></div>`
|
||||
const h = (type, props, ...children) => {
|
||||
children = children.flat(Infinity);
|
||||
// html`<${Component} attr="value">Click Me<//>`
|
||||
if (typeof type === "function") {
|
||||
return type(props ?? {}, ...children);
|
||||
}
|
||||
const elem = svgElements.includes(type)
|
||||
? document.createElementNS("http://www.w3.org/2000/svg", type)
|
||||
: document.createElement(type);
|
||||
for (const prop in props ?? {}) {
|
||||
if (typeof props[prop] === "undefined") continue;
|
||||
const isAttr =
|
||||
htmlAttributes.includes(prop) ||
|
||||
prop.startsWith("data-") ||
|
||||
prop.startsWith("aria-");
|
||||
if (isAttr) {
|
||||
if (typeof props[prop] === "boolean") {
|
||||
if (!props[prop]) continue;
|
||||
elem.setAttribute(prop, "");
|
||||
} else elem.setAttribute(prop, props[prop]);
|
||||
} else elem[prop] = props[prop];
|
||||
}
|
||||
if (type === "style") {
|
||||
elem.append(children.join("").replace(/\s+/g, " "));
|
||||
} else elem.append(...children);
|
||||
return elem;
|
||||
},
|
||||
// combines instance-provided element props
|
||||
// with a template of element props such that
|
||||
// island/component/template props handlers
|
||||
// and styles can be preserved and extended
|
||||
// rather than overwritten
|
||||
extendProps = (props, extend) => {
|
||||
for (const key in extend) {
|
||||
const { [key]: userProvided } = props;
|
||||
if (typeof extend[key] === "function") {
|
||||
props[key] = (...args) => {
|
||||
extend[key](...args);
|
||||
userProvided?.(...args);
|
||||
};
|
||||
} else if (key === "class") {
|
||||
if (userProvided) props[key] += " ";
|
||||
if (!userProvided) props[key] = "";
|
||||
props[key] += extend[key];
|
||||
} else props[key] = extend[key] ?? userProvided;
|
||||
}
|
||||
return props;
|
||||
},
|
||||
html = htm.bind(h);
|
||||
|
||||
Object.assign((globalThis.__enhancerApi ??= {}), {
|
||||
html,
|
||||
extendProps,
|
||||
});
|
||||
234
src/common/markup.mjs
Normal file
234
src/common/markup.mjs
Normal file
@ -0,0 +1,234 @@
|
||||
/**
|
||||
* notion-enhancer
|
||||
* (c) 2023 dragonwocky <thedragonring.bod@gmail.com> (https://dragonwocky.me/)
|
||||
* (https://notion-enhancer.github.io/) under the MIT license
|
||||
*/
|
||||
|
||||
"use strict";
|
||||
|
||||
import htm from "../vendor/htm.mjs";
|
||||
import lucide from "../vendor/lucide.mjs";
|
||||
import {
|
||||
createGenerator,
|
||||
expandVariantGroup,
|
||||
} from "../vendor/@unocss-core.mjs";
|
||||
import { presetUno } from "../vendor/@unocss-preset-uno.mjs";
|
||||
|
||||
// prettier-ignore
|
||||
// https://developer.mozilla.org/en-US/docs/Web/SVG/Element
|
||||
// https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute
|
||||
// https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes
|
||||
const svgElements = ["animate","animateMotion","animateTransform","circle","clipPath","defs","desc","discard","ellipse","feBlend","feColorMatrix","feComponentTransfer","feComposite","feConvolveMatrix","feDiffuseLighting","feDisplacementMap","feDistantLight","feDropShadow","feFlood","feFuncA","feFuncB","feFuncG","feFuncR","feGaussianBlur","feImage","feMerge","feMergeNode","feMorphology","feOffset","fePointLight","feSpecularLighting","feSpotLight","feTile","feTurbulence","filter","foreignObject","g","hatch","hatchpath","image","line","linearGradient","marker","mask","metadata","mpath","path","pattern","polygon","polyline","radialGradient","rect","script","set","stop","style","svg","switch","symbol","text","textPath","title","tspan","use","view"],
|
||||
htmlAttributes = ["accept","accept-charset","accesskey","action","align","allow","alt","async","autocapitalize","autocomplete","autofocus","autoplay","background","bgcolor","border","buffered","capture","challenge","charset","checked","cite","class","code","codebase","color","cols","colspan","content","contenteditable","contextmenu","controls","coords","crossorigin","csp","data","data-*","datetime","decoding","default","defer","dir","dirname","disabled","download","draggable","enctype","enterkeyhint","for","form","formaction","formenctype","formmethod","formnovalidate","formtarget","headers","height","hidden","high","href","hreflang","http-equiv","icon","id","importance","integrity","inputmode","ismap","itemprop","keytype","kind","label","lang","loading","list","loop","low","max","maxlength","minlength","media","method","min","multiple","muted","name","novalidate","open","optimum","pattern","ping","placeholder","playsinline","poster","preload","radiogroup","readonly","referrerpolicy","rel","required","reversed","role","rows","rowspan","sandbox","scope","selected","shape","size","sizes","slot","span","spellcheck","src","srcdoc","srclang","srcset","start","step","style","tabindex","target","title","translate","type","usemap","value","width","wrap","accent-height","accumulate","additive","alignment-baseline","alphabetic","amplitude","arabic-form","ascent","attributeName","attributeType","azimuth","baseFrequency","baseline-shift","baseProfile","bbox","begin","bias","by","calcMode","cap-height","clip","clipPathUnits","clip-path","clip-rule","color-interpolation","color-interpolation-filters","color-profile","color-rendering","contentScriptType","contentStyleType","cursor","cx","cy","d","decelerate","descent","diffuseConstant","direction","display","divisor","dominant-baseline","dur","dx","dy","edgeMode","elevation","enable-background","end","exponent","fill","fill-opacity","fill-rule","filter","filterRes","filterUnits","flood-color","flood-opacity","font-family","font-size","font-size-adjust","font-stretch","font-style","font-variant","font-weight","format","from","fr","fx","fy","g1","g2","glyph-name","glyph-orientation-horizontal","glyph-orientation-vertical","glyphRef","gradientTransform","gradientUnits","hanging","horiz-adv-x","horiz-origin-x","ideographic","image-rendering","in","in2","intercept","k","k1","k2","k3","k4","kernelMatrix","kernelUnitLength","kerning","keyPoints","keySplines","keyTimes","lengthAdjust","letter-spacing","lighting-color","limitingConeAngle","local","marker-end","marker-mid","marker-start","markerHeight","markerUnits","markerWidth","mask","maskContentUnits","maskUnits","mathematical","mode","numOctaves","offset","opacity","operator","order","orient","orientation","origin","overflow","overline-position","overline-thickness","panose-1","paint-order","path","pathLength","patternContentUnits","patternTransform","patternUnits","pointer-events","points","pointsAtX","pointsAtY","pointsAtZ","preserveAlpha","preserveAspectRatio","primitiveUnits","r","radius","referrerPolicy","refX","refY","rendering-intent","repeatCount","repeatDur","requiredExtensions","requiredFeatures","restart","result","rotate","rx","ry","scale","seed","shape-rendering","slope","spacing","specularConstant","specularExponent","speed","spreadMethod","startOffset","stdDeviation","stemh","stemv","stitchTiles","stop-color","stop-opacity","strikethrough-position","strikethrough-thickness","string","stroke","stroke-dasharray","stroke-dashoffset","stroke-linecap","stroke-linejoin","stroke-miterlimit","stroke-opacity","stroke-width","surfaceScale","systemLanguage","tableValues","targetX","targetY","text-anchor","text-decoration","text-rendering","textLength","to","transform","transform-origin","u1","u2","underline-position","underline-thickness","unicode","unicode-bidi","unicode-range","units-per-em","v-alphabetic","v-hanging","v-ideographic","v-mathematical","values","vector-effect","version","vert-adv-y","vert-origin-x","vert-origin-y","viewBox","viewTarget","visibility","widths","word-spacing","writing-mode","x","x-height","x1","x2","xChannelSelector","xlink:actuate","xlink:arcrole","xlink:href","xlink:role","xlink:show","xlink:title","xlink:type","xml:base","xml:lang","xml:space","y","y1","y2","yChannelSelector","z","zoomAndPan"];
|
||||
|
||||
const kebabToPascalCase = (string) =>
|
||||
string[0].toUpperCase() +
|
||||
string.replace(/-[a-z]/g, (match) => match.slice(1).toUpperCase()).slice(1),
|
||||
hToString = (type, props, ...children) =>
|
||||
`<${type}${Object.entries(props)
|
||||
.map(([attr, value]) => ` ${attr}="${value}"`)
|
||||
.join("")}>${children
|
||||
.map((child) => (Array.isArray(child) ? hToString(...child) : child))
|
||||
.join("")}</${type}>`,
|
||||
svgToUri = (svg) => {
|
||||
// https://gist.github.com/jennyknuth/222825e315d45a738ed9d6e04c7a88d0
|
||||
const xlmns = ~svg.indexOf("xmlns")
|
||||
? "<svg"
|
||||
: '<svg xmlns="http://www.w3.org/2000/svg"';
|
||||
return `url("data:image/svg+xml;utf8,${svg
|
||||
.replace("<svg", xlmns)
|
||||
.replace(/"/g, "'")
|
||||
.replace(/%/g, "%25")
|
||||
.replace(/#/g, "%23")
|
||||
.replace(/{/g, "%7B")
|
||||
.replace(/}/g, "%7D")
|
||||
.replace(/</g, "%3C")
|
||||
.replace(/>/g, "%3E")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim()}")`;
|
||||
};
|
||||
|
||||
const iconPattern = /^i-((?:\w|-)+)(?:\?(mask|bg|auto))?$/,
|
||||
presetIcons = ([, icon, mode]) => {
|
||||
let svg;
|
||||
if (!["bg", "mask"].includes(mode)) mode = undefined;
|
||||
if (icon === "notion-enhancer") {
|
||||
const { iconColour, iconMonochrome } = globalThis.__enhancerApi;
|
||||
svg = mode === "mask" ? iconMonochrome : iconColour;
|
||||
} else {
|
||||
icon = kebabToPascalCase(icon);
|
||||
if (!lucide[icon]) return;
|
||||
const [type, props, children] = lucide[icon];
|
||||
svg = hToString(type, props, ...children);
|
||||
}
|
||||
mode ??= svg.includes("currentColor") ? "mask" : "bg";
|
||||
return {
|
||||
// https://antfu.me/posts/icons-in-pure-css
|
||||
display: "inline-block",
|
||||
height: "1em",
|
||||
width: "1em",
|
||||
...(mode === "mask"
|
||||
? {
|
||||
mask: `${svgToUri(svg)} no-repeat`,
|
||||
"mask-size": "100% 100%",
|
||||
"background-color": "currentColor",
|
||||
}
|
||||
: {
|
||||
background: `${svgToUri(svg)} no-repeat`,
|
||||
"background-size": "100% 100%",
|
||||
"background-color": "transparent",
|
||||
}),
|
||||
};
|
||||
};
|
||||
|
||||
let documentObserver,
|
||||
observerDefaults = {
|
||||
attributes: true,
|
||||
characterData: true,
|
||||
childList: true,
|
||||
subtree: true,
|
||||
},
|
||||
mutationListeners = [];
|
||||
const _mutations = [],
|
||||
addMutationListener = (selector, callback, opts) => {
|
||||
opts = { ...observerDefaults, ...opts };
|
||||
mutationListeners.push([selector, callback, opts]);
|
||||
},
|
||||
removeMutationListener = (callback) => {
|
||||
mutationListeners = mutationListeners.filter(([, c]) => c !== callback);
|
||||
},
|
||||
selectorMutated = (mutation, selector, opts) => {
|
||||
if (!opts.attributes && mutation.type === "attributes") return false;
|
||||
if (!opts.characterData && mutation.type === "characterData") return false;
|
||||
const target =
|
||||
mutation.type === "characterData"
|
||||
? mutation.target.parentElement
|
||||
: mutation.target;
|
||||
if (!target) return false;
|
||||
const matchesTarget = target.matches(selector),
|
||||
matchesParent = opts.subtree && target.matches(`${selector} *`),
|
||||
matchesChild = opts.subtree && target.querySelector(selector),
|
||||
matchesAdded =
|
||||
// was matching element added?
|
||||
opts.childList &&
|
||||
[...(mutation.addedNodes || [])].some((node) => {
|
||||
if (!(node instanceof HTMLElement)) node = node.parentElement;
|
||||
return node?.querySelector(selector);
|
||||
});
|
||||
return matchesTarget || matchesParent || matchesChild || matchesAdded;
|
||||
},
|
||||
handleMutations = () => {
|
||||
let mutation;
|
||||
while ((mutation = _mutations.shift())) {
|
||||
for (const [selector, callback, subtree] of mutationListeners)
|
||||
if (selectorMutated(mutation, selector, subtree)) callback(mutation);
|
||||
}
|
||||
},
|
||||
attachObserver = () => {
|
||||
if (document.readyState !== "complete") return;
|
||||
document.removeEventListener("readystatechange", attachObserver);
|
||||
(documentObserver ??= new MutationObserver((mutations, _observer) => {
|
||||
if (!_mutations.length) requestIdleCallback(handleMutations);
|
||||
_mutations.push(...mutations);
|
||||
})).disconnect();
|
||||
documentObserver.observe(document.body, observerDefaults);
|
||||
};
|
||||
document.addEventListener("readystatechange", attachObserver);
|
||||
attachObserver();
|
||||
|
||||
// combines instance-provided element props
|
||||
// with a template of element props such that
|
||||
// island/component/template props handlers
|
||||
// and styles can be preserved and extended
|
||||
// rather than overwritten
|
||||
const extendProps = (props, extend) => {
|
||||
for (const key in extend) {
|
||||
const { [key]: value } = props;
|
||||
if (typeof extend[key] === "function") {
|
||||
props[key] = (...args) => {
|
||||
extend[key](...args);
|
||||
if (typeof value === "function") value(...args);
|
||||
};
|
||||
} else if (key === "class") {
|
||||
props[key] = value ? `${value} ${extend[key]}` : extend[key];
|
||||
} else props[key] = extend[key] ?? value;
|
||||
}
|
||||
return props;
|
||||
},
|
||||
// enables use of the jsx-like htm syntax
|
||||
// for building components and interfaces
|
||||
// with tagged templates. instantiates dom
|
||||
// elements directly, does not use a vdom.
|
||||
// e.g. html`<div class=${className}></div>`
|
||||
h = function (type, props, ...children) {
|
||||
// disables element caching
|
||||
this[0] = 3;
|
||||
children = children.flat(Infinity);
|
||||
if (typeof type === "function") {
|
||||
// html`<${Component} attr="value">Click Me<//>`
|
||||
return type(props ?? {}, ...children);
|
||||
}
|
||||
const elem = svgElements.includes(type)
|
||||
? document.createElementNS("http://www.w3.org/2000/svg", type)
|
||||
: document.createElement(type);
|
||||
for (const prop in props ?? {}) {
|
||||
if (typeof props[prop] === "undefined") continue;
|
||||
if (["class", "className"].includes(prop)) {
|
||||
// collapse multiline classes &
|
||||
// expand utility variant class groups
|
||||
props[prop] = props[prop].replace(/\s+/g, " ");
|
||||
props[prop] = expandVariantGroup(props[prop]).trim();
|
||||
elem.setAttribute("un-cloak", "");
|
||||
}
|
||||
if (htmlAttributes.includes(prop) || prop.includes("-")) {
|
||||
if (typeof props[prop] === "boolean") {
|
||||
if (!props[prop]) continue;
|
||||
elem.setAttribute(prop, "");
|
||||
} else elem.setAttribute(prop, props[prop]);
|
||||
} else elem[prop] = props[prop];
|
||||
}
|
||||
if (type === "style") {
|
||||
elem.append(children.join("").replace(/\s+/g, " "));
|
||||
} else elem.append(...children);
|
||||
return elem;
|
||||
},
|
||||
html = htm.bind(h);
|
||||
|
||||
let _renderedTokens = -1;
|
||||
const _tokens = new Set(),
|
||||
_stylesheet = html`<style id="__unocss"></style>`,
|
||||
uno = createGenerator({
|
||||
presets: [presetUno()],
|
||||
preflights: [{ getCSS: () => `[un-cloak]{display:none!important}` }],
|
||||
rules: [[iconPattern, presetIcons, { layer: "icons" }]],
|
||||
layers: { preflights: -2, icons: -1, default: 1 },
|
||||
}),
|
||||
extractTokens = ($root) => {
|
||||
if (!$root?.classList) return;
|
||||
for (const t of $root.classList) _tokens.add(t);
|
||||
for (const $ of $root.children) extractTokens($);
|
||||
$root.removeAttribute("un-cloak");
|
||||
},
|
||||
renderStylesheet = async () => {
|
||||
if (_renderedTokens === _tokens.size) return;
|
||||
_renderedTokens = _tokens.size;
|
||||
const res = await uno.generate(_tokens);
|
||||
if (!document.contains(_stylesheet)) document.head.append(_stylesheet);
|
||||
if (_stylesheet.innerHTML !== res.css) _stylesheet.innerHTML = res.css;
|
||||
};
|
||||
addMutationListener("*", (mutation) => {
|
||||
const targets = [];
|
||||
if (mutation.type === "childList") {
|
||||
for (const node of mutation.addedNodes) extractTokens(node);
|
||||
} else if (mutation.type === "attributes") extractTokens(mutation.target);
|
||||
else return;
|
||||
renderStylesheet();
|
||||
});
|
||||
renderStylesheet();
|
||||
|
||||
Object.assign((globalThis.__enhancerApi ??= {}), {
|
||||
html,
|
||||
extendProps,
|
||||
addMutationListener,
|
||||
removeMutationListener,
|
||||
});
|
||||
@ -72,7 +72,7 @@ const insertMenu = async (api, db) => {
|
||||
// pass notion-enhancer api to electron menu process
|
||||
if (["linux", "win32", "darwin"].includes(platform)) {
|
||||
const apiKey = "__enhancerApi";
|
||||
this.contentWindow[apiKey] = globalThis[apiKey];
|
||||
this.contentWindow[apiKey] = { ...globalThis[apiKey] };
|
||||
}
|
||||
_contentWindow = this.contentWindow;
|
||||
updateMenuTheme();
|
||||
@ -99,7 +99,7 @@ const insertMenu = async (api, db) => {
|
||||
<b>Configure the notion-enhancer and its mods</b>
|
||||
<//>`.attach($button, "right");
|
||||
addMutationListener(notionSidebar, appendToDom);
|
||||
addMutationListener(".notion-app-inner", updateMenuTheme, false);
|
||||
addMutationListener(".notion-app-inner", updateMenuTheme, { subtree: false });
|
||||
appendToDom();
|
||||
|
||||
addKeyListener(openMenuHotkey, (event) => {
|
||||
|
||||
@ -18,7 +18,7 @@ const setupWrapper = () => {
|
||||
const $wrapper = html`<div
|
||||
class="notion-enhancer--floating-buttons z-50
|
||||
absolute bottom-[calc(26px+env(safe-area-inset-bottom))]
|
||||
flex gap-[12px] !(&>.notion-help-button:static)"
|
||||
flex gap-[12px] important:[&>.notion-help-button]:static"
|
||||
style="right:${$help.style.right}"
|
||||
></div>`;
|
||||
removeMutationListener(addToDom);
|
||||
|
||||
@ -99,12 +99,12 @@ function Panel({
|
||||
<i
|
||||
class="i-chevrons-left size-[20px]
|
||||
text-[color:var(--theme--fg-secondary)] transition-transform
|
||||
group-&[data-pinned]/panel:rotate-180 duration-[${transitionDuration}ms]"
|
||||
group-[&[data-pinned]]/panel:rotate-180 duration-[${transitionDuration}ms]"
|
||||
/>
|
||||
</button>`,
|
||||
$panel = html`<div
|
||||
class="notion-enhancer--panel group/panel order-2
|
||||
shrink-0 &[data-pinned]:w-[var(--panel--width,0)]"
|
||||
shrink-0 [&[data-pinned]]:w-[var(--panel--width,0)]"
|
||||
>
|
||||
<style>
|
||||
.notion-frame {
|
||||
@ -120,8 +120,8 @@ function Panel({
|
||||
</style>
|
||||
<aside
|
||||
class="border-(l-1 [color:var(--theme--fg-border)]) w-0
|
||||
group-&[data-pinned]/panel:(w-[var(--panel--width,0)]) h-[calc(100vh-45px)] bottom-0)
|
||||
absolute right-0 z-20 bg-[color:var(--theme--bg-primary)] group-&[data-peeked]/panel:(
|
||||
group-[&[data-pinned]]/panel:(w-[var(--panel--width,0)]) h-[calc(100vh-45px)] bottom-0)
|
||||
absolute right-0 z-20 bg-[color:var(--theme--bg-primary)] group-[&[data-peeked]]/panel:(
|
||||
w-[var(--panel--width,0)] h-[calc(100vh-120px)] bottom-[60px] rounded-l-[8px] border-(t-1 b-1))"
|
||||
>
|
||||
<div
|
||||
@ -138,7 +138,7 @@ function Panel({
|
||||
</div>`;
|
||||
|
||||
const topbarId = "e0700ce3-a9ae-45f5-92e5-610ded0e348d",
|
||||
topbarFavorite = ".notion-topbar-favorite-button",
|
||||
topbarFavorite = ".notion-topbar .notion-topbar-favorite-button",
|
||||
$topbarToggle = html`<${TopbarButton}
|
||||
aria-label="Toggle side panel"
|
||||
icon="panel-right"
|
||||
@ -149,7 +149,7 @@ function Panel({
|
||||
};
|
||||
$panelToggle.onclick = $topbarToggle.onclick = () => $panel.toggle();
|
||||
addMutationListener(topbarFavorite, addToTopbar);
|
||||
addToTopbar(topbarFavorite);
|
||||
addToTopbar();
|
||||
|
||||
isEnabled(topbarId).then(async (topbarEnabled) => {
|
||||
if (!topbarEnabled) return;
|
||||
@ -225,11 +225,11 @@ function Panel({
|
||||
class="absolute opacity-0 h-full w-[3px] left-[-2px]
|
||||
active:cursor-text bg-[color:var(--theme--fg-border)] z-20
|
||||
transition duration-300 hover:(cursor-col-resize opacity-100)
|
||||
group-&[data-peeked]/panel:(w-[8px] left-[-1px] rounded-l-[7px])"
|
||||
group-[&[data-peeked]]/panel:(w-[8px] left-[-1px] rounded-l-[7px])"
|
||||
>
|
||||
<div
|
||||
class="ml-[2px] bg-[color:var(--theme--bg-primary)]
|
||||
group-&[data-peeked]/panel:(my-px h-[calc(100%-2px)] rounded-l-[6px])"
|
||||
group-[&[data-peeked]]/panel:(my-px h-[calc(100%-2px)] rounded-l-[6px])"
|
||||
></div>
|
||||
</div>`,
|
||||
startDrag = async (event) => {
|
||||
@ -284,8 +284,8 @@ function Panel({
|
||||
const coreId = "0f0bf8b6-eae6-4273-b307-8fc43f2ee082",
|
||||
$peekTrigger = html`<div
|
||||
class="absolute z-10 right-0 h-[calc(100vh-120px)] bottom-[60px] w-[96px]
|
||||
group-&[data-peeked]/panel:(w-[calc(var(--panel--width,0)+8px)])
|
||||
group-&[data-pinned]/panel:(w-[calc(var(--panel--width,0)+8px)])"
|
||||
group-[&[data-peeked]]/panel:(w-[calc(var(--panel--width,0)+8px)])
|
||||
group-[&[data-pinned]]/panel:(w-[calc(var(--panel--width,0)+8px)])"
|
||||
></div>`;
|
||||
modDatabase(coreId).then(async (db) => {
|
||||
_peekPanelOnHover = await db.get("peekPanelOnHover");
|
||||
|
||||
@ -21,7 +21,7 @@ function Tooltip(props, ...children) {
|
||||
leading-[1.4] font-medium py-[4px] px-[8px] rounded-[4px]
|
||||
drop-shadow-md transition duration-100 opacity-0
|
||||
group-open/tooltip:(pointer-events-auto opacity-100)
|
||||
&>b:text-[color:var(--theme--fg-primary)]"
|
||||
[&>b]:text-[color:var(--theme--fg-primary)]"
|
||||
>
|
||||
${children}
|
||||
</div>
|
||||
|
||||
@ -15,9 +15,9 @@ function TopbarButton({ icon, ...props }, ...children) {
|
||||
select-none h-[28px] w-[33px] duration-[20ms]
|
||||
transition inline-flex items-center justify-center
|
||||
rounded-[3px] hover:bg-[color:var(--theme--bg-hover)]
|
||||
has-[span]:w-auto &>span:(text-[14px] leading-[1.2] px-[8px])
|
||||
&[data-active]:bg-[color:var(--theme--bg-hover)]
|
||||
&>i:size-[20px]`,
|
||||
has-[span]:w-auto [&>span]:(text-[14px] leading-[1.2] px-[8px])
|
||||
[&[data-active]]:bg-[color:var(--theme--bg-hover)]
|
||||
[&>i]:size-[20px]`,
|
||||
});
|
||||
|
||||
return html`<button ...${props}>
|
||||
|
||||
@ -64,7 +64,7 @@ function Circle(rect) {
|
||||
const { html } = globalThis.__enhancerApi;
|
||||
return html`<div
|
||||
class="absolute rounded-full
|
||||
border-(& purple-500) bg-purple-400"
|
||||
border-(~ purple-500) bg-purple-400"
|
||||
style=${rectToStyle(rect)}
|
||||
></div>`;
|
||||
}
|
||||
@ -115,7 +115,7 @@ function Banner({ updateAvailable, isDevelopmentBuild }) {
|
||||
|
||||
const $welcome = html`<div
|
||||
class="relative flex overflow-hidden h-[192px] rounded-t-[4px]
|
||||
border-(& purple-400) bg-purple-500 from-white/20 to-transparent
|
||||
border-(~ purple-400) bg-purple-500 from-white/20 to-transparent
|
||||
text-white bg-[linear-gradient(225deg,var(--tw-gradient-stops))]"
|
||||
>
|
||||
<${Circle} width="128px" height="128px" bottom="-64px" left="-64px" />
|
||||
@ -138,7 +138,7 @@ function Banner({ updateAvailable, isDevelopmentBuild }) {
|
||||
class="absolute bottom-0 right-0 py-[24px]
|
||||
px-[32px] md:px-[48px] lg:px-[64px]"
|
||||
>
|
||||
<div class="relative flex-(& col)">
|
||||
<div class="relative flex-(~ col)">
|
||||
<i class="i-notion-enhancer text-[42px] mx-auto mb-[8px]"></i>
|
||||
${$version}
|
||||
</div>
|
||||
@ -146,7 +146,7 @@ function Banner({ updateAvailable, isDevelopmentBuild }) {
|
||||
</div>`,
|
||||
$sponsorship = html`<div
|
||||
class="py-[18px] px-[16px] rounded-b-[4px]
|
||||
border-(& [color:var(--theme--fg-border)]) bg-[color:var(--theme--bg-secondary)]"
|
||||
border-(~ [color:var(--theme--fg-border)]) bg-[color:var(--theme--bg-secondary)]"
|
||||
>
|
||||
<div class="flex items-center gap-[16px]">
|
||||
<p class="text-[14px] font-semibold">
|
||||
|
||||
@ -19,13 +19,13 @@ function Button({ icon, variant, tagName, ...props }, ...children) {
|
||||
hover:bg-[color:var(--theme--accent-primary\\_hover)]`
|
||||
: variant === "secondary"
|
||||
? `text-[color:var(--theme--accent-secondary)]
|
||||
border-(& [color:var(--theme--accent-secondary)])
|
||||
border-(~ [color:var(--theme--accent-secondary)])
|
||||
hover:bg-[color:var(--theme--accent-secondary\\_hover)]`
|
||||
: variant === "brand"
|
||||
? `text-white border-(& purple-400)
|
||||
? `text-white border-(~ purple-400)
|
||||
bg-purple-500 hover:(from-white/20 to-transparent
|
||||
bg-[linear-gradient(225deg,var(--tw-gradient-stops))])`
|
||||
: `border-(& [color:var(--theme--fg-border)])
|
||||
: `border-(~ [color:var(--theme--fg-border)])
|
||||
not-disabled:hover:bg-[color:var(--theme--bg-hover)]
|
||||
disabled:text-[color:var(--theme--fg-secondary)]`
|
||||
}`,
|
||||
|
||||
@ -11,11 +11,9 @@ function Checkbox({ _get, _set, _requireReload = true, ...props }) {
|
||||
const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
|
||||
$input = html`<input
|
||||
type="checkbox"
|
||||
class="hidden checked:&+div:(px-px
|
||||
bg-[color:var(--theme--accent-primary)])
|
||||
not-checked:&+div:(&>i:text-transparent
|
||||
border-(& [color:var(--theme--fg-primary)])
|
||||
hover:bg-[color:var(--theme--bg-hover)])"
|
||||
class="hidden [&:checked+div]:(px-px bg-[color:var(--theme--accent-primary)])
|
||||
[&:not(:checked)+div>i]:text-transparent [&:not(:checked)+div]:(border-(~
|
||||
[color:var(--theme--fg-primary)]) hover:bg-[color:var(--theme--bg-hover)])"
|
||||
...${props}
|
||||
/>`;
|
||||
extendProps($input, { onchange: () => _set?.($input.checked) });
|
||||
|
||||
@ -52,7 +52,7 @@ function Footer({ categories, transitionDuration = 150 }) {
|
||||
return html`<footer
|
||||
class="notion-enhancer--menu-footer px-[60px] py-[16px]
|
||||
flex w-full bg-[color:var(--theme--bg-primary)] h-[64px]
|
||||
border-t-(& [color:var(--theme--fg-border)])"
|
||||
border-t-(~ [color:var(--theme--fg-border)])"
|
||||
>
|
||||
${$categories.map(([, $btn]) => $btn)}${$reload}
|
||||
</footer>`;
|
||||
|
||||
@ -11,7 +11,7 @@ function Heading(props, ...children) {
|
||||
extendProps(props, {
|
||||
class: `notion-enhancer--menu-heading text-[16px]
|
||||
font-semibold mb-[16px] mt-[48px] first:mt-0 pb-[12px]
|
||||
border-b-(& [color:var(--theme--fg-border)])`,
|
||||
border-b-(~ [color:var(--theme--fg-border)])`,
|
||||
});
|
||||
return html`<h4 ...${props}>${children}</h4>`;
|
||||
}
|
||||
|
||||
@ -111,7 +111,7 @@ function Input({
|
||||
${type === "hotkey" ? "text-[color:var(--theme--fg-secondary)]" : ""}
|
||||
${type === "color"
|
||||
? "font-medium"
|
||||
: "border-(& [color:var(--theme--fg-border)])"}"
|
||||
: "border-(~ [color:var(--theme--fg-border)])"}"
|
||||
data-coloris=${type === "color"}
|
||||
...${props}
|
||||
/>`,
|
||||
@ -175,7 +175,7 @@ function Input({
|
||||
px-[8px] bg-[color:var(--theme--bg-secondary)]
|
||||
h-[28px] rounded-[4px] transition duration-[20ms]
|
||||
text-([14px] [color:var(--theme--fg-secondary)])
|
||||
border-(& [color:var(--theme--fg-border)])
|
||||
border-(~ [color:var(--theme--fg-border)])
|
||||
hover:bg-[color:var(--theme--bg-hover)]"
|
||||
onkeydown=${(event) => {
|
||||
if ([" ", "Enter"].includes(event.key)) {
|
||||
@ -191,7 +191,7 @@ function Input({
|
||||
class="notion-enhancer--menu-input
|
||||
${variant === "lg" ? "h-[32px]" : "h-[28px]"}
|
||||
relative overflow-hidden rounded-[4px] w-full inline-block
|
||||
focus-within:ring-(& [color:var(--theme--accent-primary)])
|
||||
focus-within:ring-(~ [color:var(--theme--accent-primary)])
|
||||
${className ?? ""} ${type === "color"
|
||||
? "bg-([image:repeating-linear-gradient(45deg,#aaa_25%,transparent_25%,transparent_75%,#aaa_75%,#aaa),repeating-linear-gradient(45deg,#aaa_25%,#fff_25%,#fff_75%,#aaa_75%,#aaa)] [position:0_0,4px_4px] [size:8px_8px])"
|
||||
: "bg-[color:var(--theme--bg-hover)]"}"
|
||||
|
||||
@ -64,7 +64,7 @@ function List({ id, mods, description }) {
|
||||
};
|
||||
return html`<${Mod} ...${{ ...mod, _get, _set }} />`;
|
||||
});
|
||||
return html`<div class="flex-(& col) gap-y-[14px]">
|
||||
return html`<div class="flex-(~ col) gap-y-[14px]">
|
||||
<${Search} items=${$mods} itemType=${id} />
|
||||
<${Description} innerHTML=${description} />
|
||||
${$mods}
|
||||
|
||||
@ -31,7 +31,7 @@ function Mod({
|
||||
bg-[color:var(--theme--bg-secondary)] w-full py-[18px] px-[16px]
|
||||
border border-[color:var(--theme--fg-border)] cursor-pointer
|
||||
duration-[20ms] hover:bg-[color:var(--theme--bg-hover)]
|
||||
transition &+.notion-enhancer--menu-option:mt-[24px]"
|
||||
transition [&+.notion-enhancer--menu-option]:mt-[24px]"
|
||||
>
|
||||
${thumbnail
|
||||
? html`<img
|
||||
@ -39,7 +39,7 @@ function Mod({
|
||||
class="rounded-[4px] mr-[12px] h-[74px] my-auto"
|
||||
/>`
|
||||
: ""}
|
||||
<div class="flex-(& col) w-full">
|
||||
<div class="flex-(~ col) w-full">
|
||||
<div class="flex flex-wrap items-center gap-[8px] text-[14px] mb-[5px]">
|
||||
<h3 class="my-0">${name}</h3>
|
||||
${[`v${version}`, ...tags].map((tag) => {
|
||||
|
||||
@ -65,7 +65,7 @@ function Onboarding() {
|
||||
};
|
||||
|
||||
const $regularGreeting = html`<div
|
||||
class="mt-[16px] grid-(& cols-3) gap-[16px]"
|
||||
class="mt-[16px] grid-(~ cols-3) gap-[16px]"
|
||||
>
|
||||
<${Tile}
|
||||
href="https://notion-enhancer.github.io/getting-started/basic-usage/"
|
||||
@ -93,7 +93,7 @@ function Onboarding() {
|
||||
A few awesome companies out there have teamed up with me to provide
|
||||
you with the notion-enhancer, free forever. Check them out!
|
||||
<//>
|
||||
<div class="mt-[16px] grid-(& cols-1) gap-[16px]"></div>
|
||||
<div class="mt-[16px] grid-(~ cols-1) gap-[16px]"></div>
|
||||
<${Description} class="mt-[12px]">
|
||||
<a href="mailto:thedragonring.bod@gmail.com">Join this list.</a>
|
||||
<//>
|
||||
|
||||
@ -45,7 +45,7 @@ function Option({ _get, _set, ...opt }) {
|
||||
class="notion-enhancer--menu-option flex items-center justify-between
|
||||
mb-[18px] ${opt.type === "toggle" ? "cursor-pointer" : ""}"
|
||||
>
|
||||
<div class="flex-(& col) ${opt.type === "text" ? "w-full" : "mr-[10%]"}">
|
||||
<div class="flex-(~ col) ${opt.type === "text" ? "w-full" : "mr-[10%]"}">
|
||||
<h5 class="text-[14px] mb-[2px] mt-0">${opt.label}</h5>
|
||||
${opt.type === "text"
|
||||
? html`<${Input}
|
||||
|
||||
@ -19,7 +19,7 @@ function Popup(
|
||||
extendProps(props, {
|
||||
class: `notion-enhancer--menu-popup group/popup
|
||||
absolute top-0 left-0 z-20 text-left font-normal
|
||||
flex-(& col) justify-center pointer-events-none
|
||||
flex-(~ col) justify-center pointer-events-none
|
||||
items-end w-full ${isDropdown ? "" : "h-full"}`,
|
||||
});
|
||||
|
||||
|
||||
@ -133,7 +133,7 @@ function Profile({ id }) {
|
||||
<p class="text-[14px] py-[2px] px-[8px]">
|
||||
Are you sure you want to delete the profile ${$confirmName} permanently?
|
||||
</p>
|
||||
<div class="flex-(& col) gap-[8px] py-[6px] px-[8px]">
|
||||
<div class="flex-(~ col) gap-[8px] py-[6px] px-[8px]">
|
||||
<${Button}
|
||||
tabindex="0"
|
||||
icon="trash"
|
||||
|
||||
@ -62,7 +62,7 @@ function Sidebar({ items, categories }) {
|
||||
</span>`,
|
||||
$sidebar = html`<aside
|
||||
class="notion-enhancer--menu-sidebar h-full
|
||||
px-[4px] overflow-y-auto flex-(& col) row-span-1
|
||||
px-[4px] overflow-y-auto flex-(~ col) row-span-1
|
||||
bg-[color:var(--theme--bg-secondary)]"
|
||||
>
|
||||
${items.map((item) => {
|
||||
|
||||
@ -10,7 +10,7 @@ function Tile({ icon, title, tagName, ...props }, ...children) {
|
||||
const { html, extendProps } = globalThis.__enhancerApi;
|
||||
extendProps(props, {
|
||||
class: `flex items-center gap-[12px] rounded-[4px]
|
||||
border-(& [color:var(--theme--fg-border)]) px-[16px]
|
||||
border-(~ [color:var(--theme--fg-border)]) px-[16px]
|
||||
bg-[color:var(--theme--bg-secondary)] py-[12px]
|
||||
hover:bg-[color:var(--theme--bg-hover)]`,
|
||||
});
|
||||
|
||||
@ -11,7 +11,7 @@ function Toggle({ _get, _set, _requireReload = true, ...props }) {
|
||||
const { html, extendProps, setState, useState } = globalThis.__enhancerApi,
|
||||
$input = html`<input
|
||||
type="checkbox"
|
||||
class="hidden checked:&+div>div:(
|
||||
class="hidden [&:checked+div>div]:(
|
||||
bg-[color:var(--theme--accent-primary)]
|
||||
after:translate-x-[12px])"
|
||||
...${props}
|
||||
|
||||
@ -11,8 +11,8 @@ function View({ id }, ...children) {
|
||||
// set padding on last child to maintain pad on overflow
|
||||
$view = html`<article
|
||||
id=${id}
|
||||
class="notion-enhancer--menu-view absolute h-full w-full
|
||||
min-w-[580px] px-[60px] pt-[36px] !&>*:last:pb-[36px]"
|
||||
class="notion-enhancer--menu-view h-full w-full min-w-[580px]
|
||||
absolute px-[60px] pt-[36px] important:[&>*]:last:pb-[36px]"
|
||||
>
|
||||
${children}
|
||||
</article>`;
|
||||
|
||||
@ -127,7 +127,7 @@ const renderMenu = async () => {
|
||||
/>`,
|
||||
$main = html`
|
||||
<main
|
||||
class="flex-(& col) overflow-hidden transition-[height]"
|
||||
class="flex-(~ col) overflow-hidden transition-[height]"
|
||||
style="height: calc(100% + 65px)"
|
||||
>
|
||||
<!-- wrappers necessary for transitions and breakpoints -->
|
||||
|
||||
@ -77,7 +77,7 @@
|
||||
"value": true
|
||||
}
|
||||
],
|
||||
"clientStyles": ["variables.css"],
|
||||
"clientStyles": ["variables.css", "../vendor/@unocss-preflight-tailwind.css"],
|
||||
"clientScripts": ["client.mjs"],
|
||||
"electronScripts": [[".webpack/main/index", "electron.cjs"]]
|
||||
}
|
||||
|
||||
@ -16,7 +16,7 @@ function Heading({ indent, ...props }, ...children) {
|
||||
decoration-(2 [color:var(--theme--fg-border)])
|
||||
hover:bg-[color:var(--theme--bg-hover)]
|
||||
py-[6px] pr-[2px] pl-[${indent * 18}px]
|
||||
underline-(& offset-4) last:mb-[24px]"
|
||||
underline-(~ offset-4) last:mb-[24px]"
|
||||
...${props}
|
||||
>
|
||||
${children}
|
||||
@ -131,6 +131,6 @@ export default async (api, db) => {
|
||||
|
||||
const semanticHeadings = '[class$="header-block"] :is(h2, h3, h4)';
|
||||
addMutationListener(`${page} ${semanticHeadings}`, updateHeadings);
|
||||
addMutationListener(`${page}, ${scroller}`, setup, false);
|
||||
addMutationListener(`${page}, ${scroller}`, setup, { subtree: false });
|
||||
setup();
|
||||
};
|
||||
|
||||
@ -55,6 +55,6 @@ export default async (api, db) => {
|
||||
$scroller?.addEventListener("scroll", onScroll);
|
||||
onScroll();
|
||||
};
|
||||
addMutationListener(scroller, setup, false);
|
||||
addMutationListener(scroller, setup, { subtree: false });
|
||||
setup();
|
||||
};
|
||||
|
||||
@ -14,7 +14,7 @@ export default async (api, db) => {
|
||||
|
||||
const { onMessage, addMutationListener, removeMutationListener } = api,
|
||||
$buttons = await createWindowButtons(),
|
||||
topbarMore = ".notion-topbar-more-button",
|
||||
topbarMore = ".notion-topbar .notion-topbar-more-button",
|
||||
addToTopbar = () => {
|
||||
if (document.contains($buttons)) removeMutationListener(addToTopbar);
|
||||
document.querySelector(topbarMore)?.after($buttons);
|
||||
|
||||
@ -78,7 +78,7 @@ export default async function (api, db) {
|
||||
}
|
||||
});
|
||||
|
||||
const favoriteSelector = " n",
|
||||
const favoriteSelector = ".notion-topbar-favorite-button",
|
||||
favoriteButton = await db.get("favoriteButton"),
|
||||
favoriteIcon = await db.get("favoriteIcon"),
|
||||
$favoriteIcon = favoriteIcon ? html(favoriteIcon.content) : undefined;
|
||||
@ -108,8 +108,7 @@ export default async function (api, db) {
|
||||
|
||||
const alwaysOnTopButton = await db.get("alwaysOnTopButton");
|
||||
if (alwaysOnTopButton === "Disabled") return;
|
||||
|
||||
const topbarFavorite = ".notion-topbar-favorite-button",
|
||||
const topbarFavorite = `.notion-topbar ${favoriteSelector}`,
|
||||
pinIcon = await db.get("pinIcon"),
|
||||
unpinIcon = await db.get("unpinIcon"),
|
||||
$pin = html`<${TopbarButton}
|
||||
@ -138,10 +137,8 @@ export default async function (api, db) {
|
||||
icon="pin-off"
|
||||
/>`,
|
||||
addToTopbar = () => {
|
||||
const $topbarFavorite = document.querySelector(topbarFavorite);
|
||||
if (!$topbarFavorite) return;
|
||||
$topbarFavorite.after($pin, $unpin);
|
||||
removeMutationListener(addToTopbar);
|
||||
if (document.contains($pin)) removeMutationListener(addToTopbar);
|
||||
document.querySelector(topbarFavorite)?.after($pin, $unpin);
|
||||
};
|
||||
html`<${Tooltip}><b>${pinTooltip}</b><//>`.attach($pin, "bottom");
|
||||
html`<${Tooltip}><b>${unpinTooltip}</b><//>`.attach($unpin, "bottom");
|
||||
|
||||
20
src/load.mjs
20
src/load.mjs
@ -38,29 +38,16 @@ export default (async () => {
|
||||
// extension:// pages can access chrome apis
|
||||
|
||||
// in both situations, modules that attach to
|
||||
// the dom must be re-imported, and should not
|
||||
// be used until import is complete, otherwise
|
||||
// their local states will be cleared (e.g.,
|
||||
// references to registered hotkeys)
|
||||
|
||||
const _state = globalThis.__enhancerApi?.dumpState?.();
|
||||
// the dom must be re-imported
|
||||
await Promise.all([
|
||||
// i.e. if (not_menu) or (is_menu && not_electron), then import
|
||||
!(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("assets/icons.svg.js")),
|
||||
import(enhancerUrl("vendor/twind.min.js")),
|
||||
import(enhancerUrl("vendor/lucide.min.js")),
|
||||
import(enhancerUrl("vendor/htm.min.js")),
|
||||
]);
|
||||
await Promise.all([
|
||||
!(!IS_MENU || !IS_ELECTRON) || import(enhancerUrl("common/registry.js")),
|
||||
import(enhancerUrl("common/scaffold.mjs")),
|
||||
import(enhancerUrl("common/events.js")),
|
||||
import(enhancerUrl("common/markup.js")),
|
||||
]);
|
||||
// copy across state from prev. module imports if
|
||||
// useState / setState are called early, otherwise
|
||||
// e.g. menu will not persist theme from initial msg
|
||||
globalThis.__enhancerApi.setState(_state ?? {});
|
||||
|
||||
globalThis.__enhancerApi.__isReady(globalThis.__enhancerApi);
|
||||
const { getMods, isEnabled, modDatabase } = globalThis.__enhancerApi;
|
||||
for (const mod of await getMods()) {
|
||||
if (!(await isEnabled(mod.id))) continue;
|
||||
@ -85,5 +72,4 @@ export default (async () => {
|
||||
}
|
||||
|
||||
if (IS_MENU) console.log("notion-enhancer: ready");
|
||||
globalThis.__enhancerApi.__isReady(globalThis.__enhancerApi);
|
||||
})();
|
||||
|
||||
4
src/vendor/@unocss-core.mjs
vendored
Normal file
4
src/vendor/@unocss-core.mjs
vendored
Normal file
File diff suppressed because one or more lines are too long
387
src/vendor/@unocss-preflight-tailwind.css
vendored
Normal file
387
src/vendor/@unocss-preflight-tailwind.css
vendored
Normal file
@ -0,0 +1,387 @@
|
||||
/*
|
||||
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
|
||||
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
|
||||
2. [UnoCSS]: allow to override the default border color with css var `--un-default-border-color`
|
||||
*/
|
||||
|
||||
*,
|
||||
::before,
|
||||
::after {
|
||||
box-sizing: border-box; /* 1 */
|
||||
border-width: 0; /* 2 */
|
||||
border-style: solid; /* 2 */
|
||||
border-color: var(--un-default-border-color, #e5e7eb); /* 2 */
|
||||
}
|
||||
|
||||
::before,
|
||||
::after {
|
||||
--un-content: '';
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use a consistent sensible line-height in all browsers.
|
||||
2. Prevent adjustments of font size after orientation changes in iOS.
|
||||
3. Use a more readable tab size.
|
||||
4. Use the user's configured `sans` font-family by default.
|
||||
5. Use the user's configured `sans` font-feature-settings by default.
|
||||
6. Use the user's configured `sans` font-variation-settings by default.
|
||||
7. Disable tap highlights on iOS.
|
||||
*/
|
||||
|
||||
html,
|
||||
:host {
|
||||
line-height: 1.5; /* 1 */
|
||||
-webkit-text-size-adjust: 100%; /* 2 */
|
||||
-moz-tab-size: 4; /* 3 */
|
||||
tab-size: 4; /* 3 */
|
||||
font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; /* 4 */
|
||||
font-feature-settings: normal; /* 5 */
|
||||
font-variation-settings: normal; /* 6 */
|
||||
-webkit-tap-highlight-color: transparent; /* 7 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove the margin in all browsers.
|
||||
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
|
||||
*/
|
||||
|
||||
body {
|
||||
margin: 0; /* 1 */
|
||||
line-height: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Add the correct height in Firefox.
|
||||
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
|
||||
3. Ensure horizontal rules are visible by default.
|
||||
*/
|
||||
|
||||
hr {
|
||||
height: 0; /* 1 */
|
||||
color: inherit; /* 2 */
|
||||
border-top-width: 1px; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct text decoration in Chrome, Edge, and Safari.
|
||||
*/
|
||||
|
||||
abbr:where([title]) {
|
||||
text-decoration: underline dotted;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the default font size and weight for headings.
|
||||
*/
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-size: inherit;
|
||||
font-weight: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Reset links to optimize for opt-in styling instead of opt-out.
|
||||
*/
|
||||
|
||||
a {
|
||||
color: inherit;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font weight in Edge and Safari.
|
||||
*/
|
||||
|
||||
b,
|
||||
strong {
|
||||
font-weight: bolder;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Use the user's configured `mono` font-family by default.
|
||||
2. Use the user's configured `mono` font-feature-settings by default.
|
||||
3. Use the user's configured `mono` font-variation-settings by default.
|
||||
4. Correct the odd `em` font sizing in all browsers.
|
||||
*/
|
||||
|
||||
code,
|
||||
kbd,
|
||||
samp,
|
||||
pre {
|
||||
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */
|
||||
font-feature-settings: normal; /* 2 */
|
||||
font-variation-settings: normal; /* 3 */
|
||||
font-size: 1em; /* 4 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct font size in all browsers.
|
||||
*/
|
||||
|
||||
small {
|
||||
font-size: 80%;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
|
||||
*/
|
||||
|
||||
sub,
|
||||
sup {
|
||||
font-size: 75%;
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
sub {
|
||||
bottom: -0.25em;
|
||||
}
|
||||
|
||||
sup {
|
||||
top: -0.5em;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
|
||||
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
|
||||
3. Remove gaps between table borders by default.
|
||||
*/
|
||||
|
||||
table {
|
||||
text-indent: 0; /* 1 */
|
||||
border-color: inherit; /* 2 */
|
||||
border-collapse: collapse; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
1. Change the font styles in all browsers.
|
||||
2. Remove the margin in Firefox and Safari.
|
||||
3. Remove default padding in all browsers.
|
||||
*/
|
||||
|
||||
button,
|
||||
input,
|
||||
optgroup,
|
||||
select,
|
||||
textarea {
|
||||
font-family: inherit; /* 1 */
|
||||
font-feature-settings: inherit; /* 1 */
|
||||
font-variation-settings: inherit; /* 1 */
|
||||
font-size: 100%; /* 1 */
|
||||
font-weight: inherit; /* 1 */
|
||||
line-height: inherit; /* 1 */
|
||||
color: inherit; /* 1 */
|
||||
margin: 0; /* 2 */
|
||||
padding: 0; /* 3 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inheritance of text transform in Edge and Firefox.
|
||||
*/
|
||||
|
||||
button,
|
||||
select {
|
||||
text-transform: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Remove default button styles.
|
||||
*/
|
||||
|
||||
button,
|
||||
[type='button'],
|
||||
[type='reset'],
|
||||
[type='submit'] {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
background-color: transparent; /* 2 */
|
||||
background-image: none; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Use the modern Firefox focus style for all focusable elements.
|
||||
*/
|
||||
|
||||
:-moz-focusring {
|
||||
outline: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
|
||||
*/
|
||||
|
||||
:-moz-ui-invalid {
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct vertical alignment in Chrome and Firefox.
|
||||
*/
|
||||
|
||||
progress {
|
||||
vertical-align: baseline;
|
||||
}
|
||||
|
||||
/*
|
||||
Correct the cursor style of increment and decrement buttons in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-inner-spin-button,
|
||||
::-webkit-outer-spin-button {
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the odd appearance in Chrome and Safari.
|
||||
2. Correct the outline style in Safari.
|
||||
*/
|
||||
|
||||
[type='search'] {
|
||||
-webkit-appearance: textfield; /* 1 */
|
||||
outline-offset: -2px; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Remove the inner padding in Chrome and Safari on macOS.
|
||||
*/
|
||||
|
||||
::-webkit-search-decoration {
|
||||
-webkit-appearance: none;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Correct the inability to style clickable types in iOS and Safari.
|
||||
2. Change font properties to `inherit` in Safari.
|
||||
*/
|
||||
|
||||
::-webkit-file-upload-button {
|
||||
-webkit-appearance: button; /* 1 */
|
||||
font: inherit; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Add the correct display in Chrome and Safari.
|
||||
*/
|
||||
|
||||
summary {
|
||||
display: list-item;
|
||||
}
|
||||
|
||||
/*
|
||||
Removes the default spacing for appropriate elements.
|
||||
*/
|
||||
|
||||
blockquote,
|
||||
dl,
|
||||
dd,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
figure,
|
||||
p,
|
||||
pre {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
legend {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
ol,
|
||||
ul,
|
||||
menu {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
dialog {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
/*
|
||||
Prevent resizing textareas horizontally by default.
|
||||
*/
|
||||
|
||||
textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
|
||||
2. Set the default placeholder color to the user's configured gray 400 color.
|
||||
*/
|
||||
|
||||
input::placeholder,
|
||||
textarea::placeholder {
|
||||
opacity: 1; /* 1 */
|
||||
color: #9ca3af; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Set the default cursor for buttons.
|
||||
*/
|
||||
|
||||
button,
|
||||
[role="button"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/*
|
||||
Make sure disabled buttons don't get the pointer cursor.
|
||||
*/
|
||||
|
||||
:disabled {
|
||||
cursor: default;
|
||||
}
|
||||
|
||||
/*
|
||||
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
|
||||
This can trigger a poorly considered lint error in some tools but is included by design.
|
||||
*/
|
||||
|
||||
img,
|
||||
svg,
|
||||
video,
|
||||
canvas,
|
||||
audio,
|
||||
iframe,
|
||||
embed,
|
||||
object {
|
||||
display: block; /* 1 */
|
||||
vertical-align: middle; /* 2 */
|
||||
}
|
||||
|
||||
/*
|
||||
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
|
||||
*/
|
||||
|
||||
img,
|
||||
video {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
Make elements with the HTML hidden attribute stay hidden by default.
|
||||
*/
|
||||
|
||||
[hidden] {
|
||||
display: none;
|
||||
}
|
||||
26
src/vendor/@unocss-preset-icons.mjs
vendored
Normal file
26
src/vendor/@unocss-preset-icons.mjs
vendored
Normal file
File diff suppressed because one or more lines are too long
27
src/vendor/@unocss-preset-uno.mjs
vendored
Normal file
27
src/vendor/@unocss-preset-uno.mjs
vendored
Normal file
File diff suppressed because one or more lines are too long
1
src/vendor/content-types.min.js
vendored
1
src/vendor/content-types.min.js
vendored
File diff suppressed because one or more lines are too long
1
src/vendor/htm.min.js
vendored
1
src/vendor/htm.min.js
vendored
@ -1 +0,0 @@
|
||||
!function(){var n=(new Map,function(n){for(var e,l,s=arguments,t=1,u="",r="",o=[0],f=function(n){1===t&&(n||(u=u.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?o.push(n?s[n]:u):3===t&&(n||u)?(o[1]=n?s[n]:u,t=2):2===t&&"..."===u&&n?o[2]=Object.assign(o[2]||{},s[n]):2===t&&u&&!n?(o[2]=o[2]||{})[u]=!0:t>=5&&(5===t?((o[2]=o[2]||{})[l]=n?u?u+s[n]:s[n]:u,t=6):(n||u)&&(o[2][l]+=n?u+s[n]:u)),u=""},i=0;i<n.length;i++){i&&(1===t&&f(),f(i));for(var p=0;p<n[i].length;p++)e=n[i][p],1===t?"<"===e?(f(),o=[o,"",null],t=3):u+=e:4===t?"--"===u&&">"===e?(t=1,u=""):u=e+u[0]:r?e===r?r="":u+=e:'"'===e||"'"===e?r=e:">"===e?(f(),t=1):t&&("="===e?(t=5,l=u,u=""):"/"===e&&(t<5||">"===n[i][p+1])?(f(),3===t&&(o=o[0]),t=o,(o=o[0]).push(this.apply(null,t.slice(1))),t=0):" "===e||"\t"===e||"\n"===e||"\r"===e?(f(),t=2):u+=e),3===t&&"!--"===u&&(t=4,o=o[0])}return f(),o.length>2?o.slice(1):o[1]});"undefined"!=typeof module?module.exports=n:self.htm=n}();
|
||||
4
src/vendor/htm.mjs
vendored
Normal file
4
src/vendor/htm.mjs
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
/* esm.sh - esbuild bundle(htm@3.1.1) es2022 production */
|
||||
var a=function(p,f,c,n){var l;f[0]=0;for(var u=1;u<f.length;u++){var g=f[u++],o=f[u]?(f[0]|=g?1:2,c[f[u++]]):f[++u];g===3?n[0]=o:g===4?n[1]=Object.assign(n[1]||{},o):g===5?(n[1]=n[1]||{})[f[++u]]=o:g===6?n[1][f[++u]]+=o+"":g?(l=p.apply(o,a(p,o,c,["",null])),n.push(l),o[0]?f[0]|=2:(f[u-2]=0,f[u]=l)):n.push(o)}return n},M=new Map;function b(p){var f=M.get(this);return f||(f=new Map,M.set(this,f)),(f=a(this,f.get(p)||(f.set(p,f=function(c){for(var n,l,u=1,g="",o="",i=[0],s=function(v){u===1&&(v||(g=g.replace(/^\s*\n\s*|\s*\n\s*$/g,"")))?i.push(0,v,g):u===3&&(v||g)?(i.push(3,v,g),u=2):u===2&&g==="..."&&v?i.push(4,v,0):u===2&&g&&!v?i.push(5,0,!0,g):u>=5&&((g||!v&&u===5)&&(i.push(u,0,g,l),u=6),v&&(i.push(u,v,0,l),u=6)),g=""},t=0;t<c.length;t++){t&&(u===1&&s(),s(t));for(var w=0;w<c[t].length;w++)n=c[t][w],u===1?n==="<"?(s(),i=[i],u=3):g+=n:u===4?g==="--"&&n===">"?(u=1,g=""):g=n+g[0]:o?n===o?o="":g+=n:n==='"'||n==="'"?o=n:n===">"?(s(),u=1):u&&(n==="="?(u=5,l=g,g=""):n==="/"&&(u<5||c[t][w+1]===">")?(s(),u===3&&(i=i[0]),u=i,(i=i[0]).push(2,0,u),u=0):n===" "||n===" "||n===`
|
||||
`||n==="\r"?(s(),u=2):g+=n),u===3&&g==="!--"&&(u=4,i=i[0])}return s(),i}(p)),f),arguments,[])).length>1?f:f[0]}export{b as default};
|
||||
//# sourceMappingURL=htm.bundle.mjs.map
|
||||
12
src/vendor/lucide.min.js
vendored
12
src/vendor/lucide.min.js
vendored
File diff suppressed because one or more lines are too long
16
src/vendor/lucide.mjs
vendored
Normal file
16
src/vendor/lucide.mjs
vendored
Normal file
File diff suppressed because one or more lines are too long
3
src/vendor/twind.min.js
vendored
3
src/vendor/twind.min.js
vendored
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue
Block a user