40 lines
1.2 KiB
TypeScript
40 lines
1.2 KiB
TypeScript
|
import { createRoot } from 'react-dom/client'
|
||
|
|
import { App } from './App'
|
||
|
|
import reset from '@unocss/reset/tailwind.css?inline'
|
||
|
|
import css from 'virtual:uno.css?inline'
|
||
|
|
|
||
|
|
function mount() {
|
||
|
|
const host = document.createElement('div')
|
||
|
|
host.id = 'writekit-owner-tools'
|
||
|
|
document.body.appendChild(host)
|
||
|
|
|
||
|
|
const shadow = host.attachShadow({ mode: 'open' })
|
||
|
|
|
||
|
|
const style = document.createElement('style')
|
||
|
|
style.textContent = reset + css + `
|
||
|
|
:host {
|
||
|
|
font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
|
||
|
|
line-height: 1.5;
|
||
|
|
-webkit-font-smoothing: antialiased;
|
||
|
|
-moz-osx-font-smoothing: grayscale;
|
||
|
|
}
|
||
|
|
`
|
||
|
|
shadow.appendChild(style)
|
||
|
|
|
||
|
|
const container = document.createElement('div')
|
||
|
|
container.style.cssText = `
|
||
|
|
position:fixed;inset:0;z-index:99999;pointer-events:none;
|
||
|
|
--un-bg-opacity:100%;--un-text-opacity:100%;--un-border-opacity:100%;
|
||
|
|
--un-ring-opacity:100%;--un-shadow-opacity:100%;
|
||
|
|
`.replace(/\s+/g, '')
|
||
|
|
shadow.appendChild(container)
|
||
|
|
|
||
|
|
createRoot(container).render(<App />)
|
||
|
|
}
|
||
|
|
|
||
|
|
if (document.readyState === 'loading') {
|
||
|
|
document.addEventListener('DOMContentLoaded', mount)
|
||
|
|
} else {
|
||
|
|
mount()
|
||
|
|
}
|