@jet-w/astro-blog.component.img-viewer

A reusable, feature-rich image viewer Vue component designed for @jet-w/astro-blog. Browse, filter, and present collections of images with keyboard navigation, multiple layouts, and dark mode support.

Tech Stack

Framework

Vue 3 Astro

Language

TypeScript

Build

tsup ESM

Features

Category Filtering

Filter images by category with multi-select checkbox filters

Keyboard Navigation

Arrow keys, Space, Escape, and F key shortcuts

Multiple Layouts

Stack and side-by-side layout modes

Full Page & Fullscreen

Expand to full page or native fullscreen mode

What is Image Viewer?

@jet-w/astro-blog.component.img-viewer is a Vue 3 component that provides an interactive image browsing experience within Astro-based blogs and documentation sites.

It is designed for scenarios where you need to present a collection of images — such as diagrams, flowcharts, maps, or screenshots — with rich browsing controls and optional descriptions.

Key Capabilities

  • Category Filters — Filter images by tags like Graph, Flowchart, Map, Image, etc. Multi-select supported.
  • Keyboard Shortcuts — Navigate with arrow keys, toggle descriptions with Space/Up/Down, full page with F, and exit with Escape.
  • Stack & Side Layout — Switch between vertical (image on top, description below) and side-by-side layout.
  • Random Mode — Shuffle through images randomly for review or study.
  • Zoom Toggle — Expand the image to fill the available width.
  • Full Page Mode — Take over the entire viewport while staying within the page.
  • Native Fullscreen — Enter the browser’s native fullscreen mode.
  • Rich Descriptions — Show/hide HTML descriptions with highlight support using the .hi class.
  • Dark Mode — Full dark mode support, including fullscreen variants.
  • Click Navigation — Click the left or right half of the image area to navigate.

Quick Start

Install the package:

npm install @jet-w/astro-blog.component.img-viewer

Use the component in an Astro MDX page:

import ImageViewer from '@jet-w/astro-blog.component.img-viewer/components/ImageViewer.vue';

export const images = [
  {
    src: '/images/chart.png',
    title: 'Revenue Chart',
    categories: ['graph'],
    description: 'Quarterly revenue with <span class="hi">Q3 peak</span>.',
  },
  {
    src: '/images/flowchart.png',
    title: 'CI/CD Pipeline',
    categories: ['flowchart'],
  },
];

<ImageViewer client:load images={images} />

Links