Contains various web components that are used on the Viva con Agua website.
The components only need to be installed in the head of the page. They can then be used on the entire page.
<head>
...
<script type="module" crossorigin src="https://components.vivaconagua.org/assets/index.js"></script>
...
</head>
First create a normal component under src/components. The file should have the extension .ce.vue. Then the components must be defined in src/main.ts as customElement.
import copyButton from './components/CopyButton.ce.vue';
const copyButtonComponent = defineCustomElement(copyButton);
customElements.define('copy-button', copyButtonComponent);
You can run a Docker to run the components in your localhost.
docker compose up -d --build
The service can be reached at http://localhost:8020 and can be integrated with:
<script type="module" src="http://localhost:8020/assets/index.js"></script>
Copies the value in copy_value to the clipboard.
<!--
label: Default button label.
copy_label: Label after copy the copy_value.
copy_value: Value what is copied.
countdown: Seconds until the button resets. Default 5 sec.
color: Button color, `orange`, `dark` and `default`
-->
<copy-button
label="test"
copy_label="Kopiert!"
copy_value="blabla"
countdown="5">
</copy-button>
Simple linking. The campaign information is automatically attached.
<!--
label: Default button label.
to: Path or Link.
utm_campaign: Campaign name for tracking.
utm_medium: Tracking parameter.
utm_source: Tracking parameter.
color: Button color, `orange`, `dark` and `default`
-->
<link-button
label="Jetzt Spenden!"
to="https://vivaconagua.org/spende/"
utm_campaign="dev"
utm_source="localhost"
utm_medium="button"
color="orange">
</link-button>