= Activate-Web

image:https://img.shields.io/npm/v/activate-web?style=flat-square[npm]

The "Activate Windows" watermark ported to Open Web ™. Inspired by https://github.com/MrGlockenspiel/activate-linux[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

[source,html]

<activate-web name="The Open Web" gotoText="Donate" gotoLink="https://opencollective.com/theopenweb"></activate-web>
<!-- the link above is an example -->

=== React

$ npm install --save activate-web

[source,jsx]

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?: string as in title line: Activate ${name}
• gotoText?: string, gotoLink?: string as in detail line: Go to <a href="${gotoLink}">${gotoText}</a> to activate ${name}
• titleHtml?: string, detailHtml?: string custom HTML of respective parts, usually set together; updated using innerHTML, 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-web to 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.