Copilot/add date added field (#62)

* Initial plan

* Add dateAdded field and implement recently added sorting with segmented button controls

- Add dateAdded field to all markdown files (derived from git commit dates)
- Implement gridByDate() for sorting by most recent additions
- Replace single toggle button with segmented control (Alphabetical, Platform, Recently Added)
- Add CSS styling for segmented button group with active states
- Generate grid-by-date.html partial for recently added view
- State is retained when navigating back from project/tag pages via history

Co-authored-by: teggr <837787+teggr@users.noreply.github.com>

* Separate sort buttons from hero section and make alphabetical default

- Move sort button group out of hero-left section into dedicated sort-controls-section
- Position sort buttons between hero and project grid for better visual hierarchy
- Remove github-cta-container wrapper, place Contribute button directly under title
- Change default sort from Platform to Alphabetical
- Update indexPage to show gridAlphabeticalContent by default
- Add CSS for .sort-controls-section with centered layout and spacing
- Update hero-left .github-cta styles without container wrapper
- All three sort options tested and working correctly

Co-authored-by: teggr <837787+teggr@users.noreply.github.com>

* Fix mobile responsiveness: stack sort buttons vertically and center contribute button

- Add mobile responsive styles for .sort-button-group (max-width 640px)
  - Stack buttons vertically with flex-direction: column
  - Set max-width: 320px for better mobile presentation
- Update .sort-btn for mobile with full width and left-aligned content
  - Increase vertical padding for easier tap targets
- Center .hero-left .github-cta button on mobile (max-width 768px)
  - Display as block with 100% width and centered text
- Desktop layout remains unchanged
- All button functionality tested and working correctly

Co-authored-by: teggr <837787+teggr@users.noreply.github.com>

* Center title and contribute button in hero-left container

- Add text-align: center to .hero-left on large screens (≥1024px)
  - Centers both title and contribute button within hero-left container
- Add text-align: center to .hero-left on mobile/tablet (≤768px)
  - Centers both title and contribute button on smaller screens
- Maintain responsive behavior across all viewport sizes
- Button remains inline-block on desktop, block on mobile

Co-authored-by: teggr <837787+teggr@users.noreply.github.com>

* Update dateAdded field for multiple UI frameworks to reflect new dates

* Add instructions for generating thumbnails and rebuilding the site

* Refactor thumbnail name generation logic for consistency

---------

Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>
Co-authored-by: teggr <837787+teggr@users.noreply.github.com>

Author: teggr

.github/skills/capture-screenshot/SKILL.md

@@ -145,6 +145,28 @@ After capturing, inform the user:
   - Format: PNG
 ```
 
+### 7. Generate Thumbnails (Post-Capture)
+
+After adding a new image to the `images/` directory, generate thumbnails so the site can use optimized versions.
+
+```bash
+jbang GenerateThumbnails.java
+```
+
+**Notes:**
+- The script creates `thumbnail-{name}.png` with a max height of 540px.
+- It skips unchanged images using hash tracking.
+
+### 8. (Optional) Rebuild the Site
+
+If you want to preview the updated image and thumbnail locally, rebuild the site after generating thumbnails:
+
+```bash
+jbang run build.java
+```
+
+---
+
 ## Tool Selection Guide
 
 Choose the appropriate tool based on availability:
@@ -251,31 +273,4 @@ This skill integrates with the add-project skill:
 2. After determining the project's URL (learnMoreHref field)
 3. Use this skill to automatically capture the screenshot
 4. Reference the image in the markdown front matter: `image: images/ui-{project}.png`
-
-**Manual Fallback**: If automated screenshot capture fails:
-1. Manually open the URL in a browser
-2. Resize window to approximately 1280x800px
-3. Use browser's built-in screenshot tool or OS screenshot tool
-4. Save as PNG with correct naming in images folder
-
-## Best Practices
-
-1. **Consistent Sizing**: Always use same viewport dimensions (1280x800px recommended)
-2. **Wait for Load**: Allow sufficient time for page to fully render
-3. **Check Quality**: Verify screenshot is clear and representative
-4. **Optimize Files**: Keep PNG files under 500KB when possible
-5. **Update Regularly**: Re-capture screenshots when projects rebrand or update their websites
-6. **Backup URLs**: Keep note of the URL and date captured for reference
-
-## Requirements
-
-**Tool Requirements** (choose one):
-- Node.js 16+ (for Playwright or pageres-cli)
-- Python 3.8+ (for shot-scraper)
-- Internet connection for accessing websites
-
-**Project Requirements**:
-- Valid project URL
-- Write access to `/images/` folder
-- Confirmation from user if overwriting existing image
-
+5. Run `jbang GenerateThumbnails.java` to generate the thumbnail

GenerateThumbnails.java

@@ -47,7 +47,10 @@ void main(String... args) throws IOException, NoSuchAlgorithmException {
                 currentHashes.put(fileName, imageHash);
 
                 // Determine thumbnail filename
-                String thumbnailName = "thumbnail-" + fileName.substring(fileName.lastIndexOf('-') + 1);
+                String thumbnailBaseName = fileName.startsWith("ui-")
+                    ? fileName.substring("ui-".length())
+                    : fileName.substring(fileName.lastIndexOf('-') + 1);
+                String thumbnailName = "thumbnail-" + thumbnailBaseName;
                 Path thumbnailPath = imagesDir.resolve(thumbnailName);
 
                 // Check if thumbnail needs to be generated

build.java

@@ -241,10 +241,10 @@ private static String getThumbnailUrl(String originalImageUrl) {
     return originalImageUrl;
   }
 
-  // Extract the filename after the last dash (e.g., "ui-casciian.png" -> "casciian.png")
+  // Extract the filename after the last slash (e.g., "ui-casciian.png" -> "ui-casciian.png")
   String filename = originalImageUrl.substring(originalImageUrl.lastIndexOf('/') + 1);
   if (filename.startsWith("ui-")) {
-    String thumbnailName = "thumbnail-" + filename.substring(filename.lastIndexOf('-') + 1);
+    String thumbnailName = "thumbnail-" + filename.substring("ui-".length());
     String thumbnailUrl = "images/" + thumbnailName;
 
     // Check if thumbnail exists