feat: reorganize action buttons into 3x3 grid layout

- Reorganize action buttons into centered 3x3 grid pattern
- Copy buttons form cross pattern (top, bottom, left, right)
- Download buttons positioned at corners
- Copy path button centered in grid
- Fix event listener selector to use card-actions-grid
- Update README with usage examples and format conversion details
- Pin Node.js version to 22 in GitHub Actions workflows
- Improve button visibility and interaction on hover

The new layout provides better visual organization with copy actions
forming a cross pattern, downloads at corners, and the copy path
button prominently displayed in the center.

Author: jajera

.github/workflows/pages.yml

@@ -26,7 +26,7 @@ jobs:
       - name: Setup Node.js (for fallback)
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
       - name: Generate assets.json if missing (fallback)
         run: |
           if [ ! -f "assets.json" ]; then

.github/workflows/update-assets.yml

@@ -22,7 +22,7 @@ jobs:
       - name: Setup Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: '20'
+          node-version: '22'
 
       - name: Generate assets.json
         run: |

README.md

@@ -1,3 +1,171 @@
-# visual-assets
+# Visual Assets
 
-Original format-ready visual assets for everyone
+Original format-ready visual assets for everyone.
+
+## Adding Assets
+
+**Important:** All assets must be placed inside the `assets/` directory only.
+
+### Directory Structure
+
+Place your assets in the appropriate subdirectory:
+
+- **Icons**: `assets/icons/` - Small icon files (typically SVG)
+- **Logos**: `assets/logos/` - Logo files (typically SVG)
+- **Images**: `assets/images/` - Image files (PNG, JPG, WebP, etc.)
+
+### Supported File Formats
+
+The following formats are supported:
+
+- **SVG** (recommended for icons and logos) - Vector format, scalable without quality loss
+- **PNG** - Raster format with transparency support
+- **JPG/JPEG** - Raster format, smaller file size, no transparency
+- **WebP** - Modern raster format with excellent compression
+
+### Format Conversion
+
+All assets can be converted between supported formats directly in the browser using the asset gallery interface. The conversion is performed client-side using the browser's Canvas API.
+
+**Conversion Matrix:**
+
+| From → To | PNG | JPG | WebP | SVG |
+|-----------|-----|-----|------|-----|
+| **SVG** | ✅ | ✅ | ✅ | ✅ (original) |
+| **PNG** | ✅ (original) | ✅ | ✅ | ⚠️ (embedded) |
+| **JPG** | ✅ | ✅ (original) | ✅ | ⚠️ (embedded) |
+| **WebP** | ✅ | ✅ | ✅ (original) | ⚠️ (embedded) |
+
+**Notes:**
+
+- ✅ **Full conversion** - Maintains quality and dimensions
+- ⚠️ **Embedded conversion** - Raster images embedded in SVG (not true vector conversion)
+- SVG to raster conversions maintain quality at the original size
+- Raster to raster conversions preserve image dimensions
+- Use the copy/download buttons in the asset gallery to access different formats
+- Conversions are performed on-demand in your browser (no server processing)
+
+### Example
+
+To add a new icon:
+
+1. Place your file in `assets/icons/your-icon-name.svg`
+2. Commit and push to the repository
+3. The system will automatically update `assets.json` (see below)
+
+## Automatic Asset Registration
+
+**`assets.json` is updated programmatically** - you should not edit it manually.
+
+When you add, modify, or remove files in the `assets/` directory:
+
+1. A GitHub Action workflow automatically scans the filesystem
+2. Extracts metadata (name, type, tags, size) from your files
+3. Generates or updates `assets.json` automatically
+4. Commits the changes back to the repository
+
+The system automatically:
+
+- Extracts tags from filenames (e.g., `aws-black-orange-icon.svg` → tags: `["aws", "black", "orange", "icon"]`)
+- Determines asset type from directory (`icons/` → `icon`, `logos/` → `logo`)
+- Extracts size information from SVG files (viewBox or width/height attributes)
+- Generates descriptions based on filename and metadata
+
+## Direct Asset URLs
+
+Assets are automatically made available at shorter, direct URLs:
+
+- Icons: `https://assets.awsug.nz/icons/filename.svg`
+- Logos: `https://assets.awsug.nz/logos/filename.svg`
+- Images: `https://assets.awsug.nz/images/filename.png`
+
+For example:
+
+- `assets/icons/aws-black-orange.svg` → `https://assets.awsug.nz/icons/aws-black-orange.svg`
+- `assets/logos/datacom-primary-blue.svg` → `https://assets.awsug.nz/logos/datacom-primary-blue.svg`
+
+**Full URL format:** All assets can be accessed using the full URL path:
+
+- `https://assets.awsug.nz/icons/aws-black-orange.svg`
+- `https://assets.awsug.nz/logos/datacom-primary-blue.svg`
+- `https://assets.awsug.nz/images/your-image.png`
+
+These URLs are created automatically during deployment - no manual configuration needed.
+
+## Usage
+
+### Direct Image Links
+
+You can link directly to any asset using its direct URL:
+
+**Icons:**
+
+- `https://assets.awsug.nz/icons/aws-black-orange.svg`
+- `https://assets.awsug.nz/icons/aws-blue-orange.svg`
+
+**Logos:**
+
+- `https://assets.awsug.nz/logos/aws-black-orange-sphere.svg`
+- `https://assets.awsug.nz/logos/datacom-primary-blue.svg`
+
+**Images:**
+
+- `https://assets.awsug.nz/images/your-image.png`
+
+### In HTML
+
+Embed an image directly:
+
+```html
+<img src="https://assets.awsug.nz/icons/aws-black-orange.svg" alt="AWS Icon">
+```
+
+Link to an image (opens in new tab):
+
+```html
+<a href="https://assets.awsug.nz/icons/aws-black-orange.svg" target="_blank">
+  View AWS Icon
+</a>
+```
+
+### In Markdown
+
+Display an image:
+
+```markdown
+![AWS Icon](https://assets.awsug.nz/icons/aws-black-orange.svg)
+```
+
+Link to an image:
+
+```markdown
+[View AWS Icon](https://assets.awsug.nz/icons/aws-black-orange.svg)
+```
+
+### In CSS
+
+Use as background image:
+
+```css
+background-image: url('https://assets.awsug.nz/logos/datacom-primary-blue.svg');
+```
+
+### In React/JSX
+
+```jsx
+<img src="https://assets.awsug.nz/icons/aws-black-orange.svg" alt="AWS Icon" />
+```
+
+### Download Links
+
+You can also use these URLs as download links:
+
+```html
+<a href="https://assets.awsug.nz/icons/aws-black-orange.svg" download>
+  Download AWS Icon
+</a>
+```
+
+## License
+
+Use responsibly and according to their respective licenses.

index.html

@@ -14,8 +14,8 @@
     <header class="header">
         <h1><a href="/" class="header-title-link">Visual Assets</a></h1>
         <div class="header-actions">
-            <a href="https://github.com/jajera/visual-assets" class="github-button" aria-label="View on GitHub"
-                target="_blank" rel="noopener noreferrer">
+            <a href="https://github.com/aws-user-group-nz/visual-assets" class="github-button"
+                aria-label="View on GitHub" target="_blank" rel="noopener noreferrer">
                 <svg width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
                     <path
                         d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z" />