feat: Set up docusaurus website

.gitignore

@@ -1,3 +1,4 @@
+docs/build/
 *.xml
 
 # pixi environments
@@ -118,6 +119,7 @@ dist
 
 # Docusaurus cache and generated files
 .docusaurus
+docs/docs/api/
 
 # Serverless directories
 .serverless/

DEVELOP.md

@@ -35,3 +35,14 @@ pnpm typecheck
 Publishing happens automatically when you push a new tag to the `main` branch with format `v*`.
 
 You must be part of the "release" environment in the repository settings to publish a new version.
+
+## Documentation
+
+The documentation site is built using Docusaurus and is located in the `docs/` folder.
+
+```bash
+cd docs
+
+# Start local development server
+pnpm start
+```

biome.json

@@ -15,7 +15,9 @@
       "!!**/node_modules",
       "!!**/coverage",
       "!!**/*.log",
-      "!!**/fixtures"
+      "!!**/fixtures",
+      "!!docs/.docusaurus",
+      "!!docs/build"
     ]
   },
   "formatter": {
@@ -36,6 +38,9 @@
     "enabled": true,
     "rules": {
       "recommended": true,
+      "correctness": {
+        "useImportExtensions": "error"
+      },
       "style": {
         "noNonNullAssertion": "off",
         "useImportType": {

docs/blog/2026-01-15-welcome.mdx

@@ -0,0 +1,64 @@
+---
+slug: welcome
+title: Welcome to deck.gl-raster
+authors:
+  - kylebarron
+tags: [announcement, deck.gl, geospatial]
+---
+
+import ColorMapDemo from '@site/src/components/ColorMapDemo';
+import BrowserMap from '@site/src/components/Map';
+import COGMap from '@site/src/components/Map/COGMap';
+
+Welcome to the deck.gl-raster documentation! This blog will feature updates, tutorials, and tips for working with raster data in deck.gl.
+
+{/* truncate */}
+
+## What is deck.gl-raster?
+
+deck.gl-raster is a collection of packages that enable GPU-accelerated visualization of georeferenced raster data in [deck.gl](https://deck.gl). Whether you're working with Cloud-Optimized GeoTIFFs, Zarr arrays, or other raster formats, these packages provide efficient, scalable rendering.
+
+## Live Demo
+
+Here's a live COG layer rendering Sentinel-2 imagery:
+
+<BrowserMap height="400px">
+  <COGMap url="https://sentinel-cogs.s3.us-west-2.amazonaws.com/sentinel-s2-l2a-cogs/18/T/WL/2026/1/S2B_18TWL_20260101_0_L2A/TCI.tif" />
+</BrowserMap>
+
+## Interactive Example: Color Maps
+
+One of the key features is the ability to apply color maps to your data. Here's an interactive demo of some available color maps:
+
+<ColorMapDemo />
+
+You can use these colormaps in your layers like this:
+
+```typescript
+import { COGLayer, colormapModule } from "@developmentseed/deck.gl-geotiff";
+
+new COGLayer({
+  id: "dem-layer",
+  url: "https://example.com/dem.tif",
+  modules: [colormapModule],
+  moduleProps: {
+    colormap: "viridis", // Try changing this!
+    range: [0, 3000],
+  },
+});
+```
+
+## Key Features
+
+- **Streaming**: Load only the data you need with COG and Zarr's chunk-based architecture
+- **GPU Rendering**: Hardware-accelerated rendering for smooth performance
+- **Reprojection**: Client-side reprojection for seamless integration with any map projection
+- **Extensible**: Custom GPU modules for advanced rendering effects
+
+## Getting Started
+
+Check out the [Quick Start guide](/getting-started/quick-start) to begin visualizing your raster data.
+
+## About This Blog
+
+This blog demonstrates Docusaurus's MDX capabilities. The colormap demo above is a React component embedded directly in this Markdown file. You can create your own interactive components in `src/components/` and import them into any `.mdx` file.

docs/blog/authors.yml

@@ -0,0 +1,8 @@
+developmentseed:
+  name: Development Seed
+  url: https://developmentseed.org
+  image_url: https://github.com/developmentseed.png
+kylebarron:
+  name: Kyle Barron
+  url: https://developmentseed.org/team/kyle-barron/
+  image_url: https://github.com/kylebarron.png

docs/docs/getting-started/installation.md

@@ -0,0 +1,56 @@
+---
+sidebar_position: 1
+---
+
+# Installation
+
+## Prerequisites
+
+Make sure you have the following peer dependencies installed:
+
+- deck.gl 9.x
+- luma.gl 9.x
+
+## Installing Packages
+
+Install the packages you need using your preferred package manager:
+
+### For COG/GeoTIFF Visualization
+
+```bash
+npm install @developmentseed/deck.gl-geotiff
+```
+
+This package includes `@developmentseed/deck.gl-raster` and `@developmentseed/raster-reproject` as dependencies.
+
+### For Zarr Visualization
+
+```bash
+npm install @developmentseed/deck.gl-zarr
+```
+
+### Core Package Only
+
+If you're building custom raster layers:
+
+```bash
+npm install @developmentseed/deck.gl-raster
+```
+
+### Reprojection Utilities Only
+
+For standalone reprojection mesh generation:
+
+```bash
+npm install @developmentseed/raster-reproject
+```
+
+## TypeScript Support
+
+All packages include TypeScript type definitions. No additional `@types/*` packages are required.
+
+## Bundler Configuration
+
+These packages use ES modules. Most modern bundlers (Vite, esbuild, webpack 5+) should work out of the box.
+
+If you're using webpack, ensure you have the appropriate loaders for GLSL shader files if you're customizing shaders.

docs/docs/getting-started/quick-start.md

@@ -0,0 +1,117 @@
+---
+sidebar_position: 2
+---
+
+# Quick Start
+
+This guide will help you render your first Cloud-Optimized GeoTIFF using deck.gl-raster.
+
+## Basic Setup
+
+### 1. Create a deck.gl Map
+
+First, set up a basic deck.gl application:
+
+```typescript
+import { Deck } from "@deck.gl/core";
+
+const deck = new Deck({
+  initialViewState: {
+    longitude: -122.4,
+    latitude: 37.8,
+    zoom: 11,
+  },
+  controller: true,
+  layers: [],
+});
+```
+
+### 2. Add a COG Layer
+
+Import and add a `COGLayer` to visualize a Cloud-Optimized GeoTIFF:
+
+```typescript
+import { Deck } from "@deck.gl/core";
+import { COGLayer } from "@developmentseed/deck.gl-geotiff";
+
+const deck = new Deck({
+  initialViewState: {
+    longitude: -122.4,
+    latitude: 37.8,
+    zoom: 11,
+  },
+  controller: true,
+  layers: [
+    new COGLayer({
+      id: "cog-layer",
+      url: "https://example.com/your-cog.tif",
+    }),
+  ],
+});
+```
+
+## Adding Custom Rendering
+
+### Apply a Color Map
+
+You can apply custom color maps using GPU modules:
+
+```typescript
+import { COGLayer, colormapModule } from "@developmentseed/deck.gl-geotiff";
+
+new COGLayer({
+  id: "cog-with-colormap",
+  url: "https://example.com/dem.tif",
+  modules: [colormapModule],
+  moduleProps: {
+    colormap: "viridis",
+    range: [0, 4000], // elevation range in meters
+  },
+});
+```
+
+### Multi-Band RGB Rendering
+
+For multi-band imagery like satellite data:
+
+```typescript
+new COGLayer({
+  id: "rgb-cog",
+  url: "https://example.com/satellite.tif",
+  rgbBands: [3, 2, 1], // Red, Green, Blue band indices
+});
+```
+
+## Using with Mapbox/MapLibre
+
+deck.gl-raster integrates seamlessly with Mapbox GL JS or MapLibre:
+
+```typescript
+import { MapboxOverlay } from "@deck.gl/mapbox";
+import { COGLayer } from "@developmentseed/deck.gl-geotiff";
+import mapboxgl from "mapbox-gl";
+
+const map = new mapboxgl.Map({
+  container: "map",
+  style: "mapbox://styles/mapbox/dark-v11",
+  center: [-122.4, 37.8],
+  zoom: 11,
+});
+
+const overlay = new MapboxOverlay({
+  layers: [
+    new COGLayer({
+      id: "cog-layer",
+      url: "https://example.com/cog.tif",
+    }),
+  ],
+});
+
+map.addControl(overlay);
+```
+
+## Next Steps
+
+- Learn about [COG Visualization](../guides/cog-visualization) in detail
+- Explore [Zarr Visualization](../guides/zarr-visualization) for multi-dimensional data
+- Check the [API Reference](/api/deck.gl-geotiff) for all available options