Skip to content

Activate The Open Web ™ ("Activate Windows" watermark ported to the web)

License

Notifications You must be signed in to change notification settings

nc7s/activate-web

Repository files navigation

Activate-Web

npm

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.

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?: 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.

About

Activate The Open Web ™ ("Activate Windows" watermark ported to the web)

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published