hitCounter

Create a simple hit counter that you can attach to any website via fetch .

I created a web component to use this :

export class HitCounter extends HTMLElement {
    constructor() {
      super();
      this.attachShadow({ mode: 'open' });
      this.count = 0;
      this.fetchCount();
    }
  
    fetchCount() {
      fetch('https://triptych-hitcounter.web.val.run/')
        .then(response => response.json())
        .then(data => {
          this.count = data.siteCount;
          this.render();
        })
        .catch(error => console.error('Error fetching count:', error));
    }
  
    render() {
      const container = document.createElement('div');
      container.style.backgroundColor = 'black';
      container.style.color = 'white';
      container.style.border = '1px solid white';
      container.style.padding = '10px';
      container.style.display = 'inline-block'; // Add this line
      container.textContent = `hit count: ${this.count}`;
  
      this.shadowRoot.appendChild(container);
    }
  }
  
  customElements.define('hit-counter', HitCounter);