ALTCHA Widget with Vite + Lit

This is an example Lit project using the ALTCHA widget.

Overview

ALTCHA is a free, open-source, self-hosted solution designed to protect websites, APIs, and online services from spam and unwanted content. It leverages a proof-of-work mechanism and is fully GDPR compliant, as it does not use cookies, fingerprinting, or tracking of any kind.

Get Started

To quickly get your project up and running with the ALTCHA widget, follow these steps:

1. Clone this repository and navigate to the project directory:

git clone https://github.com/altcha-org/altcha-starter-lit-ts.git
cd altcha-starter-lit-ts

2. Install the project dependencies:

npm install

3. Start the development server:

npm run dev

Creating a New Project Using Vite

If you prefer to create a new project from scratch, here are the steps:

1. Create a new Vite project with the Lit template:

npm create vite@latest my-lit-app -- --template lit-ts

2. Navigate to your project directory:

cd my-lit-app

3. Install the ALTCHA widget package:

npm install altcha --save

4. Import the altcha package in your project:

// src/main.js
import 'altcha';

5. Inject the CSS styles into the element's shadow DOM by adding them to static styles = []:

const altchaStyles = new CSSStyleSheet();
const altchaStylesUrl = new URL('altcha/altcha.css?raw', import.meta.url).href;
await altchaStyles.replace(await (await fetch(altchaStylesUrl)).text());

6. Use the <altcha-widget> element in your component:

// src/components/ExampleComponent.js
import { LitElement, html, css } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('example-component')
class ExampleComponent extends LitElement {
  static styles = [
    // Inject CSS
    altchaStyles,
    css`
      /* Add your component styles here */
    `
  ];

  render() {
    return html`
      <div>
        <h1>My Lit App with ALTCHA</h1>
        <altcha-widget challenge="https://your-challenge-url.com"></altcha-widget>
      </div>
    `;
  }
}

Additional Configuration

Ensure your challenge points to the endpoint where ALTCHA's proof-of-work challenge is processed. Customize the component attributes as needed based on your specific use case.

Conclusion

With these steps, you should have a Lit project running with the ALTCHA widget integrated. This setup helps protect your application from spam and unwanted content efficiently and compliantly. For more details, visit the ALTCHA documentation.