feat: add fileglancer version during build

astro.config.mjs

@@ -31,6 +31,9 @@ export default defineConfig({
       },
       favicon: "/favicon.svg",
       customCss: ["./src/styles/global.css", "./src/styles/custom.css"],
+      components: {
+        SiteTitle: "./src/components/SiteTitle.astro",
+      },
       sidebar: [
         {
           label: "Getting Started",
@@ -47,6 +50,10 @@ export default defineConfig({
           items: [
             { label: "Navigating Files", slug: "workflows/navigation" },
             { label: "Creating Data Links", slug: "workflows/data-links" },
+            {
+              label: "Neuroglancer Short Links",
+              slug: "workflows/ng-links",
+            },
             {
               label: "File Conversion Requests",
               slug: "workflows/file-conversion",

package.json

@@ -5,9 +5,10 @@
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
-    "build": "astro build",
+    "build": "node scripts/fetch-version.js && astro build",
     "preview": "astro preview",
-    "astro": "astro"
+    "astro": "astro",
+    "fetch-version": "node scripts/fetch-version.js"
   },
   "dependencies": {
     "@astrojs/starlight": "^0.36.0",

scripts/fetch-version.js

@@ -0,0 +1,75 @@
+#!/usr/bin/env node
+
+/**
+ * Fetches the FileGlancer version from the main repository's package.json
+ * and writes it to a local file for use during the build process.
+ */
+
+import { writeFileSync } from 'fs';
+import { fileURLToPath } from 'url';
+import { dirname, join } from 'path';
+
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = dirname(__filename);
+
+const GITHUB_REPO = 'JaneliaSciComp/fileglancer';
+const RELEASES_API_URL = `https://api.github.com/repos/${GITHUB_REPO}/releases/latest`;
+
+async function fetchVersion() {
+  try {
+    console.log(`Fetching latest stable FileGlancer release from ${GITHUB_REPO}...`);
+
+    // Fetch from GitHub Releases API - this gets the latest non-prerelease version
+    const response = await fetch(RELEASES_API_URL);
+
+    if (!response.ok) {
+      throw new Error(`Failed to fetch latest release: ${response.status} ${response.statusText}`);
+    }
+
+    const release = await response.json();
+    const version = release.tag_name;
+
+    if (!version) {
+      throw new Error('Version not found in release data');
+    }
+
+    // Remove 'v' prefix if present (e.g., 'v2.4.0' -> '2.4.0')
+    const cleanVersion = version.startsWith('v') ? version.slice(1) : version;
+
+    console.log(`Found FileGlancer version: ${cleanVersion} (from release: ${release.name || version})`);
+
+    // Write to a file that can be imported during build
+    const outputPath = join(__dirname, '..', 'src', 'fileglancer-version.json');
+    const versionData = {
+      version: cleanVersion,
+      fetchedAt: new Date().toISOString(),
+      source: `${GITHUB_REPO} latest release`,
+      releaseName: release.name || version,
+      releaseUrl: release.html_url
+    };
+
+    writeFileSync(outputPath, JSON.stringify(versionData, null, 2));
+    console.log(`Version written to ${outputPath}`);
+
+    return cleanVersion;
+  } catch (error) {
+    console.error('Error fetching FileGlancer version:', error.message);
+    console.error('Using fallback version: unknown. No version badge will be displayed');
+
+    // Write fallback version
+    const outputPath = join(__dirname, '..', 'src', 'fileglancer-version.json');
+    const fallbackData = {
+      version: 'unknown',
+      fetchedAt: new Date().toISOString(),
+      source: `${GITHUB_REPO} latest release`,
+      error: error.message
+    };
+
+    writeFileSync(outputPath, JSON.stringify(fallbackData, null, 2));
+
+    // Don't fail the build, just use fallback. No version badge will be displayed
+    return 'unknown';
+  }
+}
+
+fetchVersion();

src/components/SiteTitle.astro

@@ -0,0 +1,36 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+import Default from '@astrojs/starlight/components/SiteTitle.astro';
+
+// Import the version data
+import versionData from '../fileglancer-version.json';
+---
+
+<Default {...Astro.props}>
+	<slot />
+</Default>
+{versionData.version !== 'unknown' ? (
+	<span class="version-badge">
+		v{versionData.version}
+	</span>
+): null}
+
+<style>
+	.version-badge {
+		display: flex;
+		align-items: center;
+		margin-left: 0.5rem;
+		padding: 0.125rem 0.5rem;
+		font-size: 0.75rem;
+		font-weight: 700;
+		color: var(--sl-color-gray-2);
+		background-color: var(--sl-color-gray-5);
+		border-radius: 0.25rem;
+	}
+
+	@media (max-width: 50rem) {
+		.version-badge {
+			display: none;
+		}
+	}
+</style>

src/content/docs/features/data-tools.mdx

@@ -11,7 +11,7 @@ import mascot from '@assets/mascot/fg-microscope.png'
 
 <img src={mascot.src} alt="Fileglancer mascot" style="width: 150px; float: right; margin: 0 0 1rem 1rem;" />
 
-Fileglancer provides seamless integration with multiple data viewers, allowing you to open compatible datasets directly for visualization, analysis, and sharing. When viewing OME-Zarr or compatible scientific imaging data, Fileglancer automatically displays "Open with" options for appropriate viewers.
+Fileglancer provides seamless integration with multiple data viewers, allowing you to open compatible datasets directly for visualization, analysis, and sharing. When viewing OME-Zarr, N5, or other compatible scientific imaging data, Fileglancer automatically displays "Open with" options for appropriate viewers.
 
 ## Available Data Tools
 
@@ -55,11 +55,11 @@ A diagnostic tool for verifying OME-Zarr dataset compliance:
 
 ### Locating Tool Options
 
-When you navigate to a compatible dataset (OME-Zarr or Zarr format):
+When you navigate to a compatible dataset (OME-Zarr, Zarr, or N5 format):
 
 <Steps>
 1. **View the file/directory in Fileglancer**<br/>
-Navigate to your OME-Zarr dataset directory. The dataset will be recognized automatically.
+Navigate to your OME-Zarr, Zarr, or N5 dataset directory. The dataset will be recognized automatically.
 
 2. **Find the "Open with" section**<br/>
    Located in the file preview area, below the thumbnail preview of the dataset. These is a list of compatible viewers with their respective logos. There is also a button to copy the direct data link.

src/content/docs/features/file-browser.mdx

@@ -7,6 +7,8 @@ import StyledImage from '@components/StyledImage.astro';
 
 import lightFileBrowser from '@assets/task-images/light-file-browser-annotated.png'
 import darkFileBrowser from '@assets/task-images/dark-file-browser-annotated.png'
+import lightFileglancerWithZarr from '@assets/base-images/light-fileglancer.png'
+import darkFileglancerWithZarr from '@assets/base-images/dark-fileglancer.png'
 import mascot from '@assets/mascot/fg-computer.png'
 
 <img src={mascot.src} alt="Fileglancer mascot" style="width: 150px; float: right; margin: 0 0 1rem 1rem;" />
@@ -66,6 +68,33 @@ Navigation and organization panel (left side):
 - **Saved favorites**: Quick access to bookmarked locations
 - **Zones and file share paths**: Available file systems
 
+## Modern Imaging Format Support
+
+<StyledImage
+lightSrc={lightFileglancerWithZarr}
+darkSrc={darkFileglancerWithZarr}
+alt="Screenshot of the Fileglancer interface, showing a Zarr dataset with metadata displayed in the file browser."
+/>
+
+The file browser is optimized for working with modern scientific imaging formats like OME-Zarr and N5. When these formats are detected, Fileglancer provides specialized features:
+
+**Automatic Metadata Display**
+- **Format recognition**: Automatically identifies OME-Zarr, Zarr, and N5 datasets
+- **Metadata tables**: Displays key metadata such as multiscale levels, axes, shape, and units
+- **Thumbnail preview**: Shows a visual preview of the dataset when available
+
+**Quick Viewer Integration**
+- **One-click access**: Open datasets directly in compatible viewers like Neuroglancer, Vol-E, and Avivator
+- **Viewer buttons**: Located below the thumbnail preview in the Properties Panel
+- **Copy data URL**: Quick button to copy shareable data links
+
+**Supported Formats**
+- **OME-Zarr**: Full metadata support with OME-NGFF specification compliance
+- **Zarr**: Standard Zarr arrays with metadata display
+- **N5**: Cellmap-style N5 datasets with automatic metadata parsing
+
+These specialized features make it easy to browse, preview, and share large imaging datasets without leaving the file browser interface. For more details on using data viewers, see the [Data Tools Integration](/features/data-tools/) guide.
+
 ## Browser Customization
 
 ### Display Options

src/content/docs/getting-started/quick-start.mdx

@@ -15,6 +15,8 @@ import lightZarrDataLink from '@assets/task-images/light-quick-start-zarr-data-l
 import darkZarrDataLink from '@assets/task-images/dark-quick-start-zarr-data-link.png'
 import lightZarrConversion from '@assets/task-images/light-zarr-conversion-request.png'
 import darkZarrConversion from '@assets/task-images/dark-zarr-conversion-request.png'
+import createNgLinkDark from '@assets/task-images/create-ng-link-dark.png'
+import createNgLinkLight from '@assets/task-images/create-ng-link-light.png'
 import mascot from '@assets/mascot/fg-starting-line.png'
 
 <img src={mascot.src} alt="Fileglancer mascot" style="width: 150px; float: right; margin: 0 0 1rem 1rem;" />
@@ -103,6 +105,38 @@ lightSrc={lightZarrDataLink}
 darkSrc={darkZarrDataLink}
 alt="Screenshot of the Fileglancer interface, with an arrow pointing to the 'navigate to path' button in the toolbar and to the Zarr viewer buttons under a Zarr thumbnail."
 />
+
+## Share a configured Neuroglancer view
+
+Once you have your image open in Neuroglancer (via a data link), you can save and share the exact viewer state (including layer visibility, colors, zoom level, and camera position) using Neuroglancer Short Links. This allows collaborators to see not just the image data, but your specific configuration of how to view it.
+
+<Steps>
+1. **Configure your view**<br/>
+With your image open in Neuroglancer, adjust the layers, colors, and camera position exactly how you want collaborators to see it.
+
+2. **Copy the Neuroglancer URL**<br/>
+From your Neuroglancer browser tab, copy the full URL from the address bar.
+
+3. **Navigate to NG Links page**<br/>
+In Fileglancer, click "NG Links" in the top navigation bar.
+
+4. **Create a new link**<br/>
+Click "+ New Link" button, select "URL Mode", paste your Neuroglancer URL, and optionally add a name and title.
+
+5. **Share the short link**<br/>
+Copy the generated short link and share it with your collaborators. They'll see exactly what you configured, and you can update the Neuroglancer state associated with the link later without changing the short link URL.
+</Steps>
+
+:::tip[Why use Neuroglancer short links?]
+Neuroglancer URLs can be very long and complex. The Neuroglancer short links created in Fileglancer are stable, shareable URLs that are easier to work with and can be updated without breaking existing links shared with collaborators.
+:::
+
+<StyledImage
+lightSrc={createNgLinkLight}
+darkSrc={createNgLinkDark}
+alt="Screenshot of the Fileglancer NG Links page, with an arrow pointing to the '+ New Link' button."
+/>
+
 ## Request a file conversion
 
 If your data is not already in OME-Zarr format, we can help!
@@ -158,7 +192,13 @@ alt="Screenshot of the Fileglancer interface, with an arrow pointing to the Conv
 3. Monitor the conversion progress on the *Tasks* page
 4. Once complete, create a data link for the converted data
 
-### Scenario 3: Organizing Your Workflow
+### Scenario 3: Collaborating on Image Analysis
+1. Open your OME-Zarr image in Neuroglancer
+2. Configure the viewer to highlight specific features or regions
+3. Create a Neuroglancer Short Link on the NG Links page
+4. Share the short link with collaborators so they see exactly what you configured
+
+### Scenario 4: Organizing Your Workflow
 1. Use search to find all your project directories
 2. Save frequently-accessed folders as favorites
 3. Create data links for datasets you reference often
@@ -170,6 +210,7 @@ Now that you've completed the basics, explore these guides for more detailed wor
 
 - **[Navigation Guide](../../workflows/navigation/)**: Master all navigation features
 - **[Data Links Guide](../../workflows/data-links/)**: Learn advanced sharing options
+- **[Neuroglancer Short Links Guide](../../workflows/ng-links/)**: Deep dive into creating and managing viewer state links
 - **[File Conversion Guide](../../workflows/file-conversion/)**: Understand the complete conversion process
 
 ## Quick Reference
@@ -180,7 +221,9 @@ Now that you've completed the basics, explore these guides for more detailed wor
 | Navigate to specific path | Toolbar widget | Paste path and navigate |
 | Save favorite | Toolbar | Click star icon |
 | Create data link | Properties Panel | Toggle switch in Overview |
+| Create Neuroglancer Short Link | NG Links page | Click "+ New Link" button |
 | Request conversion | Properties Panel | Use Conversion tab |
 | View all data links | URL | Navigate to the **Data Links** page |
+| View all Neuroglancer Short Links | URL | Navigate to the **NG Links** page |
 | Check data conversion task status | URL | Navigate to the **Tasks** page |
 | Go to home directory | Toolbar | Click home icon |

src/content/docs/index.mdx

@@ -51,7 +51,7 @@ alt="Screenshot of the Fileglancer interface showing a directory of OME-Zarr dat
 
 ## Common Workflows
 
-<CardGrid>
+<CardGrid stagger>
 	<Card title="Navigate Your Data" icon="right-arrow">
 		Learn how to browse files, save favorites, and efficiently navigate large directory structures.
 
@@ -62,6 +62,11 @@ alt="Screenshot of the Fileglancer interface showing a directory of OME-Zarr dat
 
 		[Data Links Guide →](./workflows/data-links/)
 	</Card>
+	<Card title="Create Neuroglancer Links" icon="star">
+		Save and share Neuroglancer views - your collaborators see exactly what you see.
+
+		[Neuroglancer Short Links Guide →](./workflows/ng-links/)
+	</Card>
 	<Card title="Request Conversions" icon="setting">
 		Submit requests for file format conversions and data processing through the integrated help desk system.