From bb34c259368020f3d742ea320e0363efff01454f Mon Sep 17 00:00:00 2001 From: Lazaro Alonso Date: Tue, 9 Jun 2026 23:55:54 +0200 Subject: [PATCH 1/3] header --- docs/assets/css/main.css | 4 ++ docs/content/index.md | 89 +++++++++++++++++++++++++++------------- 2 files changed, 65 insertions(+), 28 deletions(-) diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css index 16d2a57a8..7d8311b00 100644 --- a/docs/assets/css/main.css +++ b/docs/assets/css/main.css @@ -88,3 +88,7 @@ transform: rotate(0deg) scale(1); } } + +.text-cta { + @apply bg-linear-to-r from-pink-500 to-yellow-500 text-transparent bg-clip-text font-semibold; +} \ No newline at end of file diff --git a/docs/content/index.md b/docs/content/index.md index 1e84a541f..44414ab07 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -1,19 +1,27 @@ --- seo: title: browzarr.io - description: A powerful, browser-native framework for visualizing, exploring, and analyzing Zarr data stores. + description: A powerful, browser-native framework for visualizing, exploring, and analyzing Zarr and NetCDF datasets. --- ::u-page-hero #title -Browzarr +Explore your data with [Browzarr]{.text-cta} #description -A powerful, browser-native framework for exploring and analyzing Zarr and NetCDF datasets. - -Load multi-dimensional datasets in the browser, slice and inspect data interactively, and gain insights without any backend or server setup. +A powerful framework for visualizing, exploring, and analyzing **Zarr and NetCDF datasets** - _runs entirely in the browser, whether your data is local or in the cloud._ #links + :::u-button + --- + size: xl + to: https://browzarr.io/ + icon: i-lucide-globe + class: "!bg-transparent !shadow-lg bg-linear-to-tr from-pink-500 to-yellow-500 text-white hover:opacity-90" + --- + Try it online + ::: + :::u-button --- color: neutral @@ -21,7 +29,7 @@ Load multi-dimensional datasets in the browser, slice and inspect data interacti to: /getting-started/landing trailing-icon: i-lucide-plane-landing --- -Landing + Get started ::: :::u-button @@ -34,16 +42,48 @@ Landing --- Give us a Star :icon{name="i-ph-star-fill" class="icon-md star-halo-wrapper" style="color: #f59e0b"} ::: +:: - :::u-button +::u-page-section +#title +Install & run anywhere + +#description +Use Browzarr online with no setup, or run it fully [offline]{.text-primary} via npm or Julia. + +#features + :::u-page-feature --- - color: warning - icon: i-lucide-box - size: xl - to: https://browzarr.io/ - variant: outline + icon: i-lucide-globe + to: https://browzarr.io + target: _blank + --- + #title + [Online]{.text-primary} — no install + #description + Open browzarr.io in any browser. Load local or remote Zarr and NetCDF files instantly. + ::: + + :::u-page-feature + --- + icon: simple-icons-npm + to: /getting-started/npm --- - browzarr.io + #title + [npm]{.text-primary} — offline-friendly + #description + `npm install -g browzarr` then run `browzarr` anytime, no internet needed. + ::: + + :::u-page-feature + --- + icon: simple-icons-julia + to: /getting-started/julia + --- + #title + [Julia]{.text-primary} — Browzarr.jl + #description + `Pkg.add("Browzarr")` and call `browzarr()` with a local path or remote store URL. ::: :: @@ -55,14 +95,12 @@ Explore your data in different ways :::u-page-feature --- icon: i-lucide-box - target: _blank to: /essentials/plot-settings --- #title Visualize a [Cube]{.text-secondary} - #description - Your data is spatio-temporal? then you could start by looking at it as a data cube. + Your data is spatio-temporal? Start by exploring it as an interactive 3D data cube. ::: :::u-page-feature @@ -72,9 +110,8 @@ Explore your data in different ways --- #title Project onto a [Sphere]{.text-primary} - #description - A traditional, normal sphere also works! + Render data on a traditional 3D globe for spatial context. ::: :::u-page-feature @@ -84,9 +121,8 @@ Explore your data in different ways --- #title Flat [map]{.text-primary} - #description - Rectangular flat maps are also in the menu. + Rectangular 2D projections for classic cartographic views. ::: :::u-page-feature @@ -96,9 +132,8 @@ Explore your data in different ways --- #title Plot [time series]{.text-primary} - #description - Select a pixel in any direction and plot a time series. + Select any pixel in any direction and plot its values over time. ::: :::u-page-feature @@ -107,10 +142,9 @@ Explore your data in different ways to: /essentials/plot-settings --- #title - Explore [point-clouds]{.text-primary} - + Explore [point clouds]{.text-primary} #description - Want more? explore your data using point clouds. + Visualize high-density spatial data as interactive point clouds. ::: :::u-page-feature @@ -119,9 +153,8 @@ Explore your data in different ways to: /essentials/plot-settings --- #title - Perform [analytics]{.text-primary} - + Run [analytics]{.text-primary} #description - Seeing is not enough? want to gain extra insights? then analyze your data by enabling WebGPU! + Enable WebGPU for accelerated computation and deeper insights. ::: :: From c5489e4f200fd998b623148d4d607500e904877e Mon Sep 17 00:00:00 2001 From: Lazaro Alonso Date: Wed, 10 Jun 2026 01:25:34 +0200 Subject: [PATCH 2/3] update hero --- docs/assets/css/main.css | 24 +++++++++++++++ .../1.getting-started/2.introduction.md | 6 ++-- docs/content/1.getting-started/3.landing.md | 29 +++++++++++++++++++ docs/content/index.md | 27 +++++++++++------ docs/nuxt.config.ts | 2 +- 5 files changed, 75 insertions(+), 13 deletions(-) diff --git a/docs/assets/css/main.css b/docs/assets/css/main.css index 7d8311b00..91f68d903 100644 --- a/docs/assets/css/main.css +++ b/docs/assets/css/main.css @@ -71,6 +71,30 @@ animation: star-wiggle 1.8s ease-in-out infinite; } +/* Hero gradient background */ + +.hero-gradient { + position: relative; +} + +.hero-gradient::before { + content: ''; + position: absolute; + inset: 0; + z-index: -1; + background: radial-gradient(ellipse 80% 60% at 50% -10%, + color-mix(in srgb, #90CAF9 25%, transparent), + transparent 70% + ); +} + +.dark .hero-gradient::before { + background: radial-gradient(ellipse 80% 50% at 50% 30%, + color-mix(in srgb, #5E35B1 30%, transparent), + transparent 70% + ); +} + @keyframes star-wiggle { 0% { transform: rotate(0deg) scale(1); diff --git a/docs/content/1.getting-started/2.introduction.md b/docs/content/1.getting-started/2.introduction.md index f5a2ab5f6..975a11143 100644 --- a/docs/content/1.getting-started/2.introduction.md +++ b/docs/content/1.getting-started/2.introduction.md @@ -1,14 +1,14 @@ --- title: Introduction -description: Welcome to Browzarr's documentation. +description: What is Browzarr? navigation: icon: i-lucide-soup seo: title: Introduction - description: Welcome to Browzarr's documentation. + description: What is Browzarr? --- -Welcome to **Browzarr**'s documentation. Although, `browzarr.io` user's interface is pretty intuitive, there are plenty of features that deserve some dedicated space for a longer explanation. But first, +Although `browzarr.io` user's interface is pretty intuitive, there are plenty of features that deserve some dedicated space for a longer explanation. But first, ## What is Browzarr? diff --git a/docs/content/1.getting-started/3.landing.md b/docs/content/1.getting-started/3.landing.md index f3f22ae62..a96fcd990 100644 --- a/docs/content/1.getting-started/3.landing.md +++ b/docs/content/1.getting-started/3.landing.md @@ -7,6 +7,35 @@ seo: description: User Interface. --- +## npm (offline) + +Install once, run anytime - no internet required after install: + +```bash +npm install -g browzarr +``` + +Then launch: + +```bash +browzarr +``` + +On a custom port: + +```bash +browzarr --port 8080 +# or via environment variable (macOS/Linux) +PORT=8080 browzarr +# Windows PowerShell +$env:PORT=8080; browzarr +# Windows CMD +set "PORT=8080" && browzarr +``` + +By default, Browzarr starts on port `3000`. If that port is already in use, it will automatically try the next available one. + + ## Main menu ::steps diff --git a/docs/content/index.md b/docs/content/index.md index 44414ab07..4fcd2bc52 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -9,7 +9,7 @@ seo: Explore your data with [Browzarr]{.text-cta} #description -A powerful framework for visualizing, exploring, and analyzing **Zarr and NetCDF datasets** - _runs entirely in the browser, whether your data is local or in the cloud._ +A powerful framework for visualizing, exploring, and analyzing **Zarr and NetCDF datasets** — runs entirely in the browser, whether your data is local or in the cloud. #links :::u-button @@ -17,6 +17,7 @@ A powerful framework for visualizing, exploring, and analyzing **Zarr and NetCDF size: xl to: https://browzarr.io/ icon: i-lucide-globe + target: _blank class: "!bg-transparent !shadow-lg bg-linear-to-tr from-pink-500 to-yellow-500 text-white hover:opacity-90" --- Try it online @@ -38,6 +39,7 @@ A powerful framework for visualizing, exploring, and analyzing **Zarr and NetCDF icon: simple-icons-github size: xl to: https://github.com/EarthyScience/Browzarr + target: _blank variant: outline --- Give us a Star :icon{name="i-ph-star-fill" class="icon-md star-halo-wrapper" style="color: #f59e0b"} @@ -45,11 +47,14 @@ A powerful framework for visualizing, exploring, and analyzing **Zarr and NetCDF :: ::u-page-section +--- +class: "hero-gradient" +--- #title -Install & run anywhere +Install & run anywhere #description -Use Browzarr online with no setup, or run it fully [offline]{.text-primary} via npm or Julia. +Use Browzarr online with no setup, or run it fully [offline]{.text-primary} via [npm](https://nodejs.org/en/download){target="_blank"} or [Julia](https://julialang.org/downloads/){target="_blank"}. #features :::u-page-feature @@ -57,9 +62,10 @@ Use Browzarr online with no setup, or run it fully [offline]{.text-primary} via icon: i-lucide-globe to: https://browzarr.io target: _blank + class: "ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl p-4 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-200" --- #title - [Online]{.text-primary} — no install + [Online]{.text-primary} — [ No Install ] #description Open browzarr.io in any browser. Load local or remote Zarr and NetCDF files instantly. ::: @@ -67,10 +73,11 @@ Use Browzarr online with no setup, or run it fully [offline]{.text-primary} via :::u-page-feature --- icon: simple-icons-npm - to: /getting-started/npm + to: /getting-started/landing#npm + class: "ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl p-4 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-200" --- #title - [npm]{.text-primary} — offline-friendly + [npm]{.text-primary} — [ Offline ] #description `npm install -g browzarr` then run `browzarr` anytime, no internet needed. ::: @@ -78,12 +85,14 @@ Use Browzarr online with no setup, or run it fully [offline]{.text-primary} via :::u-page-feature --- icon: simple-icons-julia - to: /getting-started/julia + to: https://github.com/EarthyScience/Browzarr.jl + target: _blank + class: "ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl p-4 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-200" --- #title - [Julia]{.text-primary} — Browzarr.jl + [ Browzarr.jl] — [ Offline ] #description - `Pkg.add("Browzarr")` and call `browzarr()` with a local path or remote store URL. + `Pkg.add("Browzarr")` then `using Browzarr` and call `browzarr()` with a local path or remote store URL. ::: :: diff --git a/docs/nuxt.config.ts b/docs/nuxt.config.ts index ae44445a8..025c5fa31 100644 --- a/docs/nuxt.config.ts +++ b/docs/nuxt.config.ts @@ -6,7 +6,7 @@ export default defineNuxtConfig({ css: ['~/assets/css/main.css'], site: { - name: 'docs' + name: 'Browzarr Documentation' }, // Disable server-only modules From f1a45292ba1ac7f964b47f946e77b9341de89662 Mon Sep 17 00:00:00 2001 From: Lazaro Alonso Date: Wed, 10 Jun 2026 01:30:09 +0200 Subject: [PATCH 3/3] suggestions --- docs/content/1.getting-started/2.introduction.md | 2 +- docs/content/index.md | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/content/1.getting-started/2.introduction.md b/docs/content/1.getting-started/2.introduction.md index 975a11143..1b7355a7b 100644 --- a/docs/content/1.getting-started/2.introduction.md +++ b/docs/content/1.getting-started/2.introduction.md @@ -8,7 +8,7 @@ seo: description: What is Browzarr? --- -Although `browzarr.io` user's interface is pretty intuitive, there are plenty of features that deserve some dedicated space for a longer explanation. But first, +Although the `browzarr.io` user interface is pretty intuitive, there are plenty of features that deserve some dedicated space for a longer explanation. But first, ## What is Browzarr? diff --git a/docs/content/index.md b/docs/content/index.md index 4fcd2bc52..69c8f212a 100644 --- a/docs/content/index.md +++ b/docs/content/index.md @@ -90,7 +90,7 @@ Use Browzarr online with no setup, or run it fully [offline]{.text-primary} via class: "ring-1 ring-gray-200 dark:ring-gray-800 rounded-xl p-4 hover:ring-gray-300 dark:hover:ring-gray-600 transition-all duration-200" --- #title - [ Browzarr.jl] — [ Offline ] + [ Browzarr.jl]{.text-primary} — [ Offline ] #description `Pkg.add("Browzarr")` then `using Browzarr` and call `browzarr()` with a local path or remote store URL. :::