The "Activate Windows" watermark ported to Open Web ™. Inspired by activate-linux.
As of 0.1, it’s a Web Component written in TypeScript, with a simply packed React component. The old class based version stayed at 0.0.x.
It’s intended as a parody, although still customizeable in both style and content.
React demo at https://activate-web-demo.netlify.app, vanilla https://activate-web-demo.netlify.app/vanilla.html.
<head>
<!-- other head tags -->
<script type="module" src="https://esm.run/activate-web"</script>
</head>
<body>
<!-- other important things -->
<activate-web name="The Open Web" gotoText="Donate" gotoLink="https://opencollective.com/theopenweb"></activate-web>
<!-- the link above is an example -->
</body>These attributes are shared between vanilla and React versions.
-
name?: stringas in title line:Activate ${name} -
gotoText?: string, gotoLink?: stringas in detail line:Go to <a href="${gotoLink}">${gotoText}</a> to activate ${name} -
titleHtml?: string, detailHtml?: stringcustom HTML of respective parts, usually set together; updated usinginnerHTML, so only trusted input can be passed in, and no React component or other fancy stuff (do tell me how though)
The Html attributes can be used for more personalized text, or i18n, for example.
All attributes filter out "falsy" strings: 'false', 'null', 'undefined',
except Html ones, which silently sets themselves to empty string (''),
thus reverting to default format.
Use the following selectors:
-
activate-webto style the host element -
activate-web::part(title)to style the title part -
activate-web::part(detail)to style the detail part
Be sure to override the opacity and filter properties if you want the text to have visible color.
The default style is written in plain CSS, at import { DEFAULT_STYLES } from 'activate-web/lib.ts'.