Website home page pass

.eslintrc.cjs

@@ -22,6 +22,7 @@ module.exports = getESLintConfig({
         rules: {
           'no-use-before-define': 0,
           'import/named': 0,
+          '@typescript-eslint/no-shadow': 0,
           '@typescript-eslint/ban-ts-comment': 0 // We do need our ts-ignores
         }
       },
@@ -43,7 +44,6 @@ module.exports = getESLintConfig({
           '@typescript-eslint/explicit-module-boundary-types': 0,
           '@typescript-eslint/restrict-template-expressions': 0,
           '@typescript-eslint/restrict-plus-operands': 0,
-          'no-shadow': 0,
           'max-params': 0,
           'max-statements': 0,
           complexity: 0,

package.json

@@ -21,7 +21,7 @@
     "publish-beta": "ocular-publish version-only-beta",
     "publish-prod": "ocular-publish version-only-prod",
     "test": "ocular-test",
-    "test-pre-commit": "ocular-lint pre-commit && ocular-test node"
+    "test-pre-commit": "ocular-lint && ocular-test node"
   },
   "devDependencies": {
     "@probe.gl/bench": "^4.0.0",

website/docusaurus.config.js

@@ -17,8 +17,7 @@ const config = getDocusaurusConfig({
   webpackConfig: {
     resolve: {
       alias: {
-        'website-examples': resolve('../examples'),
-        '@probe.gl/bench': resolve('../node_modules/@probe.gl/bench')
+        'website-examples': resolve('../examples')
       }
     }
   }

website/package.json

@@ -19,7 +19,7 @@
   },
   "dependencies": {
     "@docusaurus/core": "^3.0.0",
-    "@vis.gl/docusaurus-website": "1.0.0-alpha.19",
+    "@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,14 @@ h3 {
   margin: 16px 0 0;
   position: relative;
 }
-h3 > img {
-  position: absolute;
-  top: -4px;
+div {
+  display: flex;
+  align-items: center;
+  margin-top: 1em;
+}
+div > img {
   width: 36px;
-  left: -48px;
+  margin-right: 1em;
 }
 hr {
   border: none;
@@ -66,43 +47,37 @@ 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="math.gl">
+      <>
+        <Home getStartedLink="./docs/developer-guide/get-started" />
+        <TextContainer>
+          <h2>
+            A collection of math modules for Geospatial and 3D use cases.
+          </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-layers.svg`} />
+            Toolbox of 3D math modules
+          </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-high-precision.svg`} />
+            Matrices and vectors, bounding boxes, frustum culling etc
+          </div>
+
+          <div>
+          <img src={`${baseUrl}images/icon-basemap.webp`} />
+            Geospatial reprojection, gravity models, solar position, etc
+          </div>
 
-            <h3>
-            <img src={`${baseUrl}images/icon-react.svg`} />
-              Strict TypeScript and run-time checks that detect bad data
-            </h3>
-            <p></p>
+          <div>
+          <img src={`${baseUrl}images/icon-typescript.svg`} />
+            Strict TypeScript and run-time checks that detect bad data
+          </div>
 
-          </TextContainer>
-        </div>
-      </Home>
+        </TextContainer>
+      </>
     </Layout>
   );
 }