Ophan Component Viewer

bookmarklet

javascript:(function()%7Bfetch(%22https%3A%2F%2Fgist.githubusercontent.com%2Fmxdvl%2Fb17f344678ed34d45683896e208ecdc1%2Fraw%2Fophan-components.css%22).then(r%20%3D%3E%20r.text()).then(css%20%3D%3E%20%7B%20const%20style%20%3D%20document.createElement(%22style%22)%3B%20style.innerHTML%20%3D%20css%3B%20document.body.appendChild(style)%3B%20%7D)%3B%7D)()%3B

ophan-components.css

[data-link-name], [data-component] {
/*     contain: layout !important; */
/*     position: relative; */
}

[data-link-name]::before, [data-component]::after {
    position: absolute !important;
    color: white !important;
    width: auto !important;
    height: auto !important;
    font-size: x-small !important;
    z-index: 999999 !important;
    border: none !important;
    padding: 2px !important;
    font-family: system-ui;
    line-height: 1 !important;
}

[data-link-name]::before {
    content: attr(data-link-name) !important;
    background: #001133cc !important;
    left: -2px !important;
    top: -2px !important;
}

[data-component]::after {
    content: attr(data-component) !important;
    background: #441100cc !important;
    bottom: -2px !important;
    right: 2px !important;
}

[data-link-name="article"]::before {
    color: darkred !important;
    background: goldenrod !important;
    left: 50% !important;
    top: 50% !important;
}

run-script.js

const gist = "https://gist.githubusercontent.com/mxdvl/b17f344678ed34d45683896e208ecdc1/raw/ophan-components.css";
const style = document.createElement("style");
const css = await fetch(gist).then(r => r.text());
style.innerHTML = css;
document.body.appendChild(style);