From 7ddb85a9b84958f5b447c2cd1adfde66ca7ed20f Mon Sep 17 00:00:00 2001 From: Ib Green Date: Sat, 3 Oct 2026 09:35:05 -0400 Subject: [PATCH 1/2] feat: add dev-tools documentation homepage --- website/src/pages/index.js | 103 +++++++++++++++++++++-- website/src/pages/index.module.css | 129 +++++++++++++++++++++++++++++ 2 files changed, 227 insertions(+), 5 deletions(-) create mode 100644 website/src/pages/index.module.css diff --git a/website/src/pages/index.js b/website/src/pages/index.js index 2cd29b4..1837668 100644 --- a/website/src/pages/index.js +++ b/website/src/pages/index.js @@ -1,14 +1,107 @@ import React from 'react'; import Link from '@docusaurus/Link'; import Layout from '@theme/Layout'; +import styles from './index.module.css'; + +const capabilities = [ + { + title: 'Build', + description: 'Compile single-package repositories and monorepos with shared, predictable defaults.' + }, + { + title: 'Test', + description: 'Run Node.js and browser test suites with Vitest and Playwright.' + }, + { + title: 'Lint', + description: 'Format and lint JavaScript and TypeScript with the shared Biome configuration.' + }, + { + title: 'Publish', + description: 'Bundle, measure, version, and publish packages using the project conventions.' + } +]; export default function Home() { return ( - -
-

vis.gl development tools

-

Shared tools for building, testing, linting, bundling, and publishing vis.gl projects.

- Read the documentation + +
+
+
+

VIS.GL DEVELOPER INFRASTRUCTURE

+

dev-tools

+

+ Shared tools for building, testing, linting, bundling, and publishing open source + JavaScript frameworks. +

+
+ + Get started + + + Explore the docs + +
+
+
+
+ +
+
+
+
+

ONE TOOLKIT, SHARED ACROSS PROJECTS

+

Build better libraries with less setup

+

+ dev-tools collects the build, test, and release workflows used across the vis.gl + ecosystem into reusable commands and configurations. +

+
+
+ {capabilities.map(capability => ( +
+
+ 0{capabilities.indexOf(capability) + 1} +

{capability.title}

+

{capability.description}

+
+
+ ))} +
+
+
+ +
+
+
+

THE TOOLKIT

+

Packages for the vis.gl ecosystem

+
+
+
+
+

@vis.gl/dev-tools

+

Build, lint, test, bundle, measure, and publish JavaScript packages.

+ Read dev-tools docs → +
+
+
+
+

@vis.gl/ts-plugins

+

TypeScript transforms and compiler helpers for modern graphics projects.

+ Read TypeScript plugin docs → +
+
+
+
+

@vis.gl/docusaurus-website

+

Shared configuration and components for current vis.gl documentation sites.

+ Read website docs → +
+
+
+
+
); diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css new file mode 100644 index 0000000..6579cc3 --- /dev/null +++ b/website/src/pages/index.module.css @@ -0,0 +1,129 @@ +.hero { + background: + radial-gradient(circle at 80% 20%, rgb(0 173 230 / 30%), transparent 32%), + linear-gradient(120deg, var(--ifm-color-gray-900), #1a5069); + color: var(--ifm-color-white); + padding: 7rem 0 8rem; +} + +.heroContent { + max-width: 52rem; +} + +.hero h1 { + color: inherit; + font-size: clamp(3.5rem, 10vw, 7rem); + letter-spacing: -0.06em; + line-height: 0.95; + margin: 0 0 1.5rem; +} + +.eyebrow { + color: var(--ifm-color-primary); + font-size: 0.75rem; + font-weight: 700; + letter-spacing: 0.16em; + margin-bottom: 1rem; +} + +.hero .eyebrow { + color: #8ee5ff; +} + +.tagline { + color: var(--ifm-color-gray-200); + font-size: 1.35rem; + line-height: 1.5; + margin: 0; + max-width: 42rem; +} + +.actions { + display: flex; + flex-wrap: wrap; + gap: 1rem; + margin-top: 2.5rem; +} + +.actions .button--secondary { + background: transparent; + border-color: var(--ifm-color-gray-300); + color: var(--ifm-color-white); +} + +.section { + padding: 6rem 0; +} + +.sectionMuted { + background: var(--ifm-color-gray-200); +} + +.sectionIntro { + margin: 0 auto 3rem; + max-width: 42rem; + text-align: center; +} + +.sectionIntro h2 { + font-size: 2.25rem; + margin-bottom: 1rem; +} + +.sectionIntro p:last-child { + color: var(--ifm-color-gray-700); + font-size: 1.1rem; + line-height: 1.6; +} + +.card, +.packageCard { + background: var(--ifm-color-white); + border: 1px solid var(--ifm-color-gray-300); + border-radius: 0.5rem; + height: 100%; + padding: 1.75rem; +} + +.card { + border-top: 3px solid var(--ifm-color-primary); +} + +.cardNumber { + color: var(--ifm-color-primary); + display: block; + font-size: 0.8rem; + font-weight: 700; + letter-spacing: 0.12em; + margin-bottom: 2rem; +} + +.card h3, +.packageCard h3 { + font-size: 1.3rem; + margin-bottom: 0.75rem; +} + +.card p, +.packageCard p { + color: var(--ifm-color-gray-700); + line-height: 1.6; + margin-bottom: 0; +} + +.packageCard a { + display: inline-block; + font-weight: 600; + margin-top: 1.5rem; +} + +@media (max-width: 996px) { + .hero { + padding: 5rem 0 6rem; + } + + .card, + .packageCard { + margin-bottom: 1.5rem; + } +} From 63459c5a52e2086c3a697b4e5e0e97d274be3254 Mon Sep 17 00:00:00 2001 From: Ib Green Date: Sat, 3 Oct 2026 09:43:34 -0400 Subject: [PATCH 2/2] fix: improve homepage theme contrast --- website/src/pages/index.module.css | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/website/src/pages/index.module.css b/website/src/pages/index.module.css index 6579cc3..8b700b7 100644 --- a/website/src/pages/index.module.css +++ b/website/src/pages/index.module.css @@ -45,7 +45,7 @@ margin-top: 2.5rem; } -.actions .button--secondary { +.actions :global(.button--secondary) { background: transparent; border-color: var(--ifm-color-gray-300); color: var(--ifm-color-white); @@ -78,9 +78,10 @@ .card, .packageCard { - background: var(--ifm-color-white); + background: var(--ifm-background-surface-color); border: 1px solid var(--ifm-color-gray-300); border-radius: 0.5rem; + color: var(--ifm-font-color-base); height: 100%; padding: 1.75rem; } @@ -100,13 +101,14 @@ .card h3, .packageCard h3 { + color: var(--ifm-heading-color); font-size: 1.3rem; margin-bottom: 0.75rem; } .card p, .packageCard p { - color: var(--ifm-color-gray-700); + color: var(--ifm-font-color-base); line-height: 1.6; margin-bottom: 0; }