Website home page pass

visgl · Aug 30, 2024 · b7b9686 · b7b9686
1 parent b4dfb93
commit b7b9686
Show file tree

Hide file tree

Showing 10 changed files with 82 additions and 149 deletions.
diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
@@ -1,7 +1,7 @@
 const {getDocusaurusConfig} = require('@vis.gl/docusaurus-website');
 
 const config = getDocusaurusConfig({
-  projectName: 'probe.js',
+  projectName: 'probe.gl',
   tagline: 'JavaScript Console Logging, Instrumentation, Benchmarking and Test Utilities',
   siteUrl: 'https://visgl.github.io/probe.gl',
   repoUrl: 'https://github.com/visgl/probe.gl',

diff --git a/website/package.json b/website/package.json
@@ -21,7 +21,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"
   },

diff --git a/website/src/examples-sidebar.js b/website/src/examples-sidebar.js
diff --git a/website/src/pages/index.jsx b/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;
@@ -38,14 +16,19 @@ h2 {
 }
 h3 {
   font: bold 16px/24px;
-  margin: 16px 0 0;
+  margin: 0;
   position: relative;
 }
-h3 > img {
-  position: absolute;
-  top: -4px;
-  width: 36px;
-  left: -48px;
+> div {
+  display: flex;
+  align-items: start;
+  margin-top: 2em;
+}
+img {
+  margin-right: 1em;
+}
+p {
+  margin: 0;
 }
 hr {
   border: none;
@@ -66,43 +49,49 @@ 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>
-            JavaScript Console Logging, Instrumentation, Benchmarking and Test Utilities.
-            </h2>
-            <hr className="short" />
+    <Layout title="Home" description="probe.gl">
+      <>
+        <Home getStartedLink="./docs/get-started" />
+        <TextContainer>
+          <h2>
+          JavaScript Console Logging, Instrumentation, Benchmarking and Test Utilities.
+          </h2>
+          <hr className="short" />
 
-            <h3>
-              <img src={`${baseUrl}images/icon-layers.svg`} />
-              Console-Focused Logging
-            </h3>
-            <p>probe.gl optimizes in-browser logging.</p>
+          <div>
+            <img src={`${baseUrl}images/icon-console.svg`} />
+            <div>
+              <h3>Console-Focused Logging</h3>
+              <p>probe.gl optimizes in-browser logging.</p>
+            </div>
+          </div>
 
-            <h3>
-              <img src={`${baseUrl}images/icon-high-precision.svg`} />
-              Benchmarking and Regression Testing Support
-            </h3>
-            <p>Creation benchmarking suites, and compare performance of test across runs.</p>
-
-            <h3>
-            <img src={`${baseUrl}images/icon-basemap.webp`} />
-            Optimized Chrome Debugging Experience
-            </h3>
-            <p>Uses advanced console APIs when available to create rich logs. </p>
+          <div>
+            <img src={`${baseUrl}images/icon-high-precision.svg`} />
+            <div>
+              <h3>Benchmarking and Regression Testing Support</h3>
+              <p>Creation benchmarking suites, and compare performance of test across runs.</p>
+            </div>
+          </div>
+
+          <div>
+            <img src={`${baseUrl}images/icon-debug.svg`} />
+            <div>
+              <h3>Optimized Chrome Debugging Experience</h3>
+              <p>Uses advanced console APIs when available to create rich logs. </p>
+            </div>
+          </div>
 
-            <h3>
+          <div>
             <img src={`${baseUrl}images/icon-react.svg`} />
-            Size Conscious
-            </h3>
-            <p>An instrumentation library should be small.</p>
+            <div>
+              <h3>Size Conscious</h3>
+              <p>An instrumentation library should be small.</p>
+            </div>
+          </div>
 
-          </TextContainer>
-        </div>
-      </Home>
+        </TextContainer>
+      </>
     </Layout>
   );
 }
diff --git a/website/src/styles.css b/website/src/styles.css
@@ -25,27 +25,3 @@
   --ifm-color-black: #19202C
   --code-font-size: 95%;
 }
-main .container {
-  position: relative;
-  min-height: calc(100vh - var(--ifm-navbar-height));
-}
-.markdown {
-  position: relative;
-}
-.menu__link {
-  line-height: 1.5;
-}
-.menu__list {
-  padding-bottom: 0.5rem;
-}
-
-.docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.1);
-  display: block;
-  margin: 0 calc(-1 * var(--pre-padding));
-  padding: 0 var(--pre-padding);
-}
-
-html[data-theme='dark'] .docusaurus-highlight-code-line {
-  background-color: rgba(0, 0, 0, 0.3);
-}
diff --git a/website/static/images/icon-basemap.webp b/website/static/images/icon-basemap.webp
diff --git a/website/static/images/icon-console.svg b/website/static/images/icon-console.svg
diff --git a/website/static/images/icon-debug.svg b/website/static/images/icon-debug.svg
diff --git a/website/static/images/icon-layers.svg b/website/static/images/icon-layers.svg
diff --git a/website/yarn.lock b/website/yarn.lock
@@ -3744,9 +3744,9 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@vis.gl/docusaurus-website@npm:1.0.0-alpha.19":
-  version: 1.0.0-alpha.19
-  resolution: "@vis.gl/docusaurus-website@npm:1.0.0-alpha.19"
+"@vis.gl/docusaurus-website@npm:1.0.0-alpha.20":
+  version: 1.0.0-alpha.20
+  resolution: "@vis.gl/docusaurus-website@npm:1.0.0-alpha.20"
   dependencies:
     "@cmfcmf/docusaurus-search-local": "npm:^1.0.0"
     "@docusaurus/plugin-client-redirects": "npm:^3.0.0"
@@ -3765,7 +3765,7 @@ __metadata:
     react-dom: "*"
   bin:
     ocular-doc-headers: scripts/doc-headers.js
-  checksum: 10c0/c799f41580699270415e98af913d3493c014f1cabb296311ec1a2fded5de90147cb7ce9bc1754f4452b89d718cb16de93faf0c69cff4cfadcb4ebe14f0303863
+  checksum: 10c0/3638e24883c4f468814647a1771b4b44a6d2bdeaec423a893bba05220cf658ef8a9b187cc61fe8a403e426821d2de7a2d56289f0583a2ffd01cb2425c9ebe8fd
   languageName: node
   linkType: hard
 
@@ -10218,7 +10218,7 @@ __metadata:
   resolution: "project-website@workspace:."
   dependencies:
     "@docusaurus/core": "npm:^3.0.0"
-    "@vis.gl/docusaurus-website": "npm:1.0.0-alpha.19"
+    "@vis.gl/docusaurus-website": "npm:1.0.0-alpha.20"
     react: "npm:^18.2.0"
     react-dom: "npm:^18.2.0"
   languageName: unknown