chore: Enhance documentation

biome.json

@@ -7,7 +7,7 @@
     },
     "files": {
         "ignoreUnknown": false,
-        "includes": ["**", "!**/dist/**/*", "!**/coverage/**/*", "!**/.astro/**/*"]
+        "includes": ["**", "!**/dist/**/*", "!**/coverage/**/*", "!**/.astro/**/*", "!**/*.astro"]
     },
     "formatter": {
         "enabled": true,

site/astro.config.mjs

@@ -29,7 +29,7 @@ export default defineConfig({
                     autogenerate: { directory: 'packages' },
                 },
                 {
-                    label: 'Developers',
+                    label: 'Vis Package Developers',
                     autogenerate: { directory: 'developers' },
                 },
             ],

site/src/components/PackageManagerTabs.astro

@@ -0,0 +1,23 @@
+---
+import { Tabs, TabItem, Code } from '@astrojs/starlight/components';
+
+interface Props {
+    npm: string;
+    pnpm: string;
+    yarn: string;
+}
+
+const { npm, pnpm, yarn } = Astro.props;
+---
+
+<Tabs syncKey="pkg">
+    <TabItem label="npm">
+        <Code code={npm} lang="bash" />
+    </TabItem>
+    <TabItem label="pnpm">
+        <Code code={pnpm} lang="bash" />
+    </TabItem>
+    <TabItem label="yarn">
+        <Code code={yarn} lang="bash" />
+    </TabItem>
+</Tabs>

site/src/content/docs/getting-started/packages.md

@@ -7,14 +7,19 @@ sidebar:
 
 The `AllenInstitute/vis` repository holds multiple published packages. The current list of packages is below:
 
--   `vis-core`: A collection of useful utilities used to build our big-data, scalable, data visualization tools, including the DZI viewer, OME-Zarr viewer, and our scatterplot tool "Scatterbrain" for the [ABC Atlas](https://knowledge.brain-map.org/abcatlas) in the Brain Knowledge Platform web application
--   `vis-dzi`: A renderer for [Deep Zoom Images](https://en.wikipedia.org/wiki/Deep_Zoom)
--   `vis-geometry`: A collection of vector functions for 2D and 3D geometry
--   `vis-omezarr`: A renderer for [OME-Zarr](https://ngff.openmicroscopy.org/latest/) datasets
+- `vis-core`: A collection of useful utilities used to build our big-data, scalable, data visualization tools, including the DZI viewer, OME-Zarr viewer, and our scatterplot tool "Scatterbrain" for the [ABC Atlas](https://knowledge.brain-map.org/abcatlas) in the Brain Knowledge Platform web application
+- `vis-dzi`: A renderer for [Deep Zoom Images](https://en.wikipedia.org/wiki/Deep_Zoom)
+- `vis-geometry`: A collection of vector functions for 2D and 3D geometry
+- `vis-omezarr`: A renderer for [OME-Zarr](https://ngff.openmicroscopy.org/latest/) datasets
+- `vis-scatterbrain`: A scatterplot viewer optimized for visualizing large datasets, such as those in the [ABC Atlas](https://knowledge.brain-map.org/abcatlas)
 
 To install and use these packages, see the instructions on [using packages](../using-packages).
 
 ## Future Packages
 
--   `@alleninstitute/vis-scatterbrain` - Code for building scatterplots
--   `@alleninstitute/vis-react` - React component implementations of each of the visualization packages.
+The following is a list of packages that we would like to create in the future.
+
+If you are interested in contributing to the development of any of these packages, please reach out on GitHub to get started!
+- `vis-components` - A collection of web components for displaying visualizations built with our `vis` packages
+- `vis-react` - React component implementations of each of the visualization packages
+- `vis-[your favorite framework]` - Any other framework-specific implementations of our visualization packages, as driven by community needs

site/src/content/docs/index.mdx

@@ -7,12 +7,12 @@ hero:
   image:
     file: ../../assets/umap.png
   actions:
+    - text: Get Started
+      link: /vis/getting-started/packages
+      variant: primary
     - text: Examples
       link: /vis/examples/omezarr1
-      icon: right-arrow
-    - text: Read the docs
-      link: /vis/getting-started/packages/
-      variant: minimal
+      variant: secondary
 ---
 
 import { Card, CardGrid } from '@astrojs/starlight/components';
@@ -22,14 +22,14 @@ import { Card, CardGrid } from '@astrojs/starlight/components';
 <CardGrid stagger>
 	<Card title="ABC Atlas" icon="rocket">
 		The [Allen Brain Cell Atlas (ABC Atlas)](https://knowledge.brain-map.org/abcatlas)
-        uses `@alleninstitue/vis-core` to visualize millions of points of data in the browser.
+        uses `@alleninstitute/vis-core` to visualize millions of points of data in the browser.
 	</Card>
 	<Card title="GTA" icon="magnifier">
 		The [Genetic Tools Atlas (GTA)](https://knowledge.brain-map.org/data/7CVKSF7QGAKIQ8LM5LC/specimens/HTS03VQD4BBB67I3BAP)
         uses `@alleninstitute/vis-omezarr` to display OME-Zarr previews.
 	</Card>
 	<Card title="DZI" icon="information">
-		The [SEA-AD project](https://dev-knowledge.brain-map.org/data/JGN327NUXRZSHEV88TN/specimens/JGCXWER774NLNWX2NNR)
+		The [SEA-AD project](https://knowledge.brain-map.org/data/JGN327NUXRZSHEV88TN/specimens/JGCXWER774NLNWX2NNR)
         uses `@alleninstitute/vis-dzi` to display Deep Zoom Image (DZI) views.
 	</Card>
 </CardGrid>

site/src/content/docs/packages/core.md → site/src/content/docs/packages/core.mdx

@@ -1,8 +1,21 @@
 ---
 title: Core
-description: Documentation for the `@alleninstiute/vis-core` package
+description: Documentation for the `@alleninstitute/vis-core` package
 ---
 
+import PackageManagerTabs from '../../../components/PackageManagerTabs.astro';
+
+## Installation
+
+To install the `@alleninstitute/vis-core` package, make sure you've followed the instructions for [authenticating 
+with the Allen Institute's npm registry on GitHub](../../getting-started/using-packages), then run the following command in your terminal:
+
+<PackageManagerTabs 
+    npm="npm install @alleninstitute/vis-core"
+    pnpm="pnpm add @alleninstitute/vis-core"
+    yarn="yarn add @alleninstitute/vis-core"
+/>
+
 ## How To use generic rendering tools for your cool data
 
 ### Use case

site/src/content/docs/packages/dzi.mdx

@@ -1,8 +1,27 @@
 ---
 title: DZI
-description: Documentation for the `@alleninstiute/vis-dzi` package
+description: Documentation for the `@alleninstitute/vis-dzi` package
 ---
 
 import { Aside } from '@astrojs/starlight/components';
+import PackageManagerTabs from '../../../components/PackageManagerTabs.astro';
+
+# Installation
+
+To install the `@alleninstitute/vis-dzi` package, make sure you've followed the instructions for [authenticating 
+with the Allen Institute's npm registry on GitHub](../../getting-started/using-packages), then run the following command in your terminal:
+
+<PackageManagerTabs 
+    npm="npm install @alleninstitute/vis-dzi"
+    pnpm="pnpm add @alleninstitute/vis-dzi"
+    yarn="yarn add @alleninstitute/vis-dzi"
+/>
+
+## Examples
+
+There is one DZI example to view:
+- [Linked views with an SVG overlay](../../examples/dzi)
+
+## Usage
 
 <Aside type="caution">Docs under construction</Aside>

site/src/content/docs/packages/geometry.mdx

@@ -1,8 +1,22 @@
 ---
 title: Geometry
-description: Documentation for the `@alleninstiute/vis-geometry` package
+description: Documentation for the `@alleninstitute/vis-geometry` package
 ---
 
 import { Aside } from '@astrojs/starlight/components';
+import PackageManagerTabs from '../../../components/PackageManagerTabs.astro';
+
+## Installation
+
+To install the `@alleninstitute/vis-geometry` package, make sure you've followed the instructions for [authenticating 
+with the Allen Institute's npm registry on GitHub](../../getting-started/using-packages), then run the following command in your terminal:
+
+<PackageManagerTabs 
+    npm="npm install @alleninstitute/vis-geometry"
+    pnpm="pnpm add @alleninstitute/vis-geometry"
+    yarn="yarn add @alleninstitute/vis-geometry"
+/>
+
+## Usage
 
 <Aside type="caution">Docs under construction</Aside>

site/src/content/docs/packages/ome-zarr.mdx

@@ -1,8 +1,29 @@
 ---
 title: OME-Zarr
-description: Documentation for the `@alleninstiute/vis-omezarr` package
+description: Documentation for the `@alleninstitute/vis-omezarr` package
 ---
 
 import { Aside } from '@astrojs/starlight/components';
+import PackageManagerTabs from '../../../components/PackageManagerTabs.astro';
+
+## Installation
+
+To install the `@alleninstitute/vis-omezarr` package, make sure you've followed the instructions for [authenticating 
+with the Allen Institute's npm registry on GitHub](../../getting-started/using-packages), then run the following command in your terminal:
+
+<PackageManagerTabs 
+    npm="npm install @alleninstitute/vis-omezarr"
+    pnpm="pnpm add @alleninstitute/vis-omezarr"
+    yarn="yarn add @alleninstitute/vis-omezarr"
+/>
+
+## Examples
+
+There are three OME-Zarr examples to view:
+- [Basic example with a few selectable datasets that shows the viewer and the dataset metadata](../../examples/omezarr1)
+- [Basic example but using our priority cache from `@alleninstitute/vis-core`](../../examples/omezarr2-priority)
+- [Gallery example of multiple viewers sharing the same web context](../../examples/omezarr3-gallery)
+
+## Usage
 
 <Aside type="caution">Docs under construction</Aside>

site/src/content/docs/packages/scatterbrain.mdx

@@ -0,0 +1,27 @@
+---
+title: Scatterbrain
+description: Documentation for the `@alleninstitute/vis-scatterbrain` package
+---
+
+import { Aside } from '@astrojs/starlight/components';
+import PackageManagerTabs from '../../../components/PackageManagerTabs.astro';
+
+## Installation
+
+To install the `@alleninstitute/vis-scatterbrain` package, make sure you've followed the instructions for [authenticating 
+with the Allen Institute's npm registry on GitHub](../../getting-started/using-packages), then run the following command in your terminal:
+
+<PackageManagerTabs 
+    npm="npm install @alleninstitute/vis-scatterbrain"
+    pnpm="pnpm add @alleninstitute/vis-scatterbrain"
+    yarn="yarn add @alleninstitute/vis-scatterbrain"
+/>
+
+## Examples
+
+There is one Scatterbrain example to view:
+- [Basic example](../../examples/scatterbrain)
+
+## Usage
+
+<Aside type="caution">Docs under construction</Aside>