Activate-Web
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.
Usage
Vanilla
<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>
React
$ npm install --save activate-web
import Activate from 'activate-web/react'
export default App() {
return (
{...otherImportantThings}
<Activate
name='The Open Web'
gotoText='Donate'
gotoLink='https://opencollective.com/theopenweb'
/>
)
}
Attributes
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.
Styling
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'.
License
BSD 3-clause © 2022 Blair Noctis.
7 Dec 1, 2022
8 Dec 31, 2022
52 Dec 26, 2022
18 Apr 30, 2022
2 Jun 3, 2022
311 Jan 1, 2023
12 Dec 23, 2022
175 Dec 24, 2022
15 Oct 23, 2022
23 Dec 17, 2022