updated readme

Author: bennobuilder

.github/img/landing.png

@@ -1,6 +1,22 @@
-# Website
-
-This website is built using [Docusaurus 2](https://v2.docusaurus.io/), a modern static website generator.
+# agile-ts.org
+
+[This website](https://agile-ts.org) is built using
+[Docusaurus 2](https://v2.docusaurus.io/). Pages & components are written in TypeScript, the styles in vanilla CSS with
+variables using
+[CSS Modules](https://github.com/css-modules/css-modules).
+(We would have preferred using [styled-components](https://styled-components.com/) but docusaurus has no ssr support for
+it yet)
+
+<div align="center">
+  <a href="http://questdb.io">
+    <img src=".github/img/landing.png"/>
+  </a>
+</div>
+<div align="center">
+  <a href="https://agile-ts.org" style="color: #1e2136">
+    agile-ts.org
+  </a>
+</div>
 
 ## Installation
 

README.md

@@ -1,5 +1,5 @@
 import { animated, useSpring } from 'react-spring';
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import { useAgile } from '@agile-ts/react';
 import core from '../../../../../../core';
 import styles from './styles.module.css';
@@ -34,11 +34,48 @@ const Astronaut: React.FC<Props> = (props) => {
     return () => clearTimeout(timeoutId);
   }, [isRaised, timing]);
 
-  const trigger = () => setIsRaised(true);
+  const imageRef = useRef<HTMLImageElement>(null);
+  const ctx = document.createElement('canvas').getContext('2d');
+
+  // https://medium.com/@pdx.lucasm/canvas-with-react-js-32e133c05258
+  // https://stackoverflow.com/questions/38487569/click-through-png-image-only-if-clicked-coordinate-is-transparent
+  function trigger(event: React.MouseEvent<HTMLImageElement, MouseEvent>) {
+    console.log('on click');
+
+    console.log(event);
+    console.log(ctx);
+
+    // Get click coordinates
+    const x = event.pageX - imageRef.current.offsetLeft;
+    const y = event.pageY - imageRef.current.offsetTop;
+    const w = (ctx.canvas.width = imageRef.current.width);
+    const h = (ctx.canvas.height = imageRef.current.height);
+
+    // Draw image to canvas
+    // and read Alpha channel value
+    ctx.drawImage(imageRef.current, 0, 0, w, h);
+    const alpha = ctx.getImageData(x, y, 1, 1).data[3]; // [0]R [1]G [2]B [3]A
+
+    console.log(ctx.getImageData(x, y, 1, 1));
+
+    // If pixel is transparent,
+    // retrieve the element underneath and trigger it's click event
+    if (alpha === 0) {
+      console.log('alpha0');
+      imageRef.current.style.pointerEvents = 'none';
+      const element = document.elementFromPoint(event.clientX, event.clientY);
+      // element.trigger('click');
+      imageRef.current.style.pointerEvents = 'auto';
+    } else {
+      setIsRaised(true);
+      console.log('LOGO clicked!');
+    }
+  }
 
   return (
     <div className={clsx(styles.Container, className)}>
       <animated.img
+        ref={imageRef}
         onMouseEnter={trigger}
         style={animated_Astronaut}
         className={styles.Image}

src/_pages/LandingPage/components/HeaderView/components/Astronaut/index.tsx

@@ -13,4 +13,5 @@
 .Image {
   width: 100%;
   max-width: 800px;
+  background-color: red;
 }

src/_pages/LandingPage/components/HeaderView/components/Astronaut/styles.module.css

@@ -20,5 +20,5 @@ export const THEME = App.createState<ThemeInterface>(
 });
 
 export const ASTRONAUT_DARK = App.createState<boolean>(false).persist(
-  'astronaut-color'
+  'astronaut-dark'
 );