Website fixes and clean up

website/docusaurus.config.js

@@ -2,7 +2,7 @@ const {getDocusaurusConfig} = require('@vis.gl/docusaurus-website');
 
 const config = getDocusaurusConfig({
   projectName: 'mjolnir.js',
-  tagline: 'An event manager',
+  tagline: 'A modern event manager',
   siteUrl: 'https://visgl.github.io/mjolnir.js',
   repoUrl: 'https://github.com/visgl/mjolnir.js',
 

website/package.json

@@ -21,7 +21,7 @@
   },
   "dependencies": {
     "@docusaurus/core": "^3.0.0",
-    "@vis.gl/docusaurus-website": "1.0.0-alpha.18",
+    "@vis.gl/docusaurus-website": "1.0.0-alpha.20",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   },

website/src/pages/index.jsx

@@ -4,32 +4,10 @@ import useBaseUrl from '@docusaurus/useBaseUrl';
 import styled from 'styled-components';
 import Layout from '@theme/Layout';
 
-// import HeroExample from '../examples/home-demo';
-const HeroExample = ({children}) => <div>{children}</div>;
-
-const FeatureImage = styled.div`
-position: absolute;
-height: 100%;
-width: 50%;
-top: 0;
-right: 0;
-z-index: -1;
-border-top: solid 200px transparent;
-background-image: url(${props => props.src});
-background-size: contain;
-background-repeat: no-repeat;
-background-position: right top;
-
-@media screen and (max-width: 768px) {
-  display: none;
-}
-`;
-
 const TextContainer = styled.div`
 max-width: 800px;
 padding: 64px 112px;
-width: 70%;
-font-size: 14px;
+font-size: 16px;
 
 h2 {
   font: bold 32px/48px;
@@ -41,11 +19,13 @@ h3 {
   margin: 16px 0 0;
   position: relative;
 }
-h3 > img {
-  position: absolute;
-  top: -4px;
-  width: 36px;
-  left: -48px;
+div {
+  display: flex;
+  align-items: center;
+  margin-top: 1em;
+}
+div > img {
+  margin-right: 1em;
 }
 hr {
   border: none;
@@ -66,43 +46,32 @@ export default function IndexPage() {
   const baseUrl = useBaseUrl('/');
 
   return (
-    <Layout title="Home" description="deck.gl">
-      <Home HeroExample={HeroExample}>
-        <div style={{position: 'relative'}}>
-          <FeatureImage src={`${baseUrl}images/maps.jpg`}  />
-          <TextContainer>
-            <h2>
-              A collection of math modules for Geospatial and 3D use cases.
-            </h2>
-            <hr className="short" />
+    <Layout title="Home" description="mjolnir.js">
+      <>
+        <Home />
+        <TextContainer>
+          <h2>
+            A dependency-free input handling and gesture recognition system
+          </h2>
+          <hr className="short" />
 
-            <h3>
-              <img src={`${baseUrl}images/icon-layers.svg`} />
-              Toolbox of 3D math modules
-            </h3>
-            <p></p>
+          <div>
+            <img src={`${baseUrl}images/icon-high-precision.svg`} />
+            Predictable behavior across browsers and input devices
+          </div>
 
-            <h3>
-              <img src={`${baseUrl}images/icon-high-precision.svg`} />
-              Matrices and vectors, bounding boxes, frustum culling etc
-            </h3>
-            <p></p>
-
-            <h3>
-            <img src={`${baseUrl}images/icon-basemap.webp`} />
-              Geospatial reprojection, gravity models, solar position, etc
-            </h3>
-            <p></p>
+          <div>
+            <img src={`${baseUrl}images/icon-typescript.svg`} />
+            Fully typed API
+          </div>
 
-            <h3>
+          <div>
             <img src={`${baseUrl}images/icon-react.svg`} />
-              Strict TypeScript and run-time checks that detect bad data
-            </h3>
-            <p></p>
+            Treeshakable and SSR-ready ESM package
+          </div>
 
-          </TextContainer>
-        </div>
-      </Home>
+        </TextContainer>
+      </>
     </Layout>
   );
 }