Merge branch 'master' into copilot/fix-253

Author: dannystaple

.eleventyignore

@@ -2,6 +2,6 @@
 ./_image_sources
 ./_drafts
 ./tests
-
+./.github
 Dockerfile
 DOCKER_OPTIMIZATION.md

.github/scripts/README.md

@@ -0,0 +1,55 @@
+# GitHub Scripts and Automation
+
+This directory contains scripts and documentation for GitHub Actions automation in the Orionrobots repository.
+
+## Features
+
+### Automated Docker Image PR Comments
+
+When a Pull Request modifies files that affect the base Docker image (such as `Dockerfile`, `package.json`, `package-lock.json`, or workflow files), the CI system automatically:
+
+1. **Detects changes** to base image related files
+2. **Builds and pushes** a Docker image tagged with the PR number to `ghcr.io/orionrobots/orionrobots-site.base:${PR_NUMBER}`
+3. **Comments on the PR** with a direct link to the newly built Docker image
+
+#### How it works
+
+The automation is implemented in `.github/workflows/on_pr_test.yaml`:
+
+- **Detection**: The `detect_base_image_changes` job uses `tj-actions/changed-files` to detect changes to base image files
+- **Build**: If changes are detected, the `build_site` job builds and pushes the image with the PR number as tag
+- **Comment**: The `comment_docker_image` job creates or updates a comment on the PR with the image details
+
+#### Benefits
+
+- **Easy access**: Reviewers and team members can quickly find and use the Docker image built for a specific PR
+- **No searching**: No need to dig through workflow logs or GitHub Package registry
+- **Idempotent**: Comments are updated rather than duplicated when the image is rebuilt
+- **Clear instructions**: The comment includes copy-paste commands for using the image
+
+#### Comment format
+
+The automated comment includes:
+- Direct link to the Docker image
+- Instructions for pulling and running the image
+- Usage examples for local development
+- Clear indication that the comment is automatically managed
+
+#### Permissions and fork compatibility
+
+- **Internal PRs**: Full functionality with automatic image building and commenting
+- **Forks**: May have limited access to push images depending on repository settings
+- **Security**: Uses minimal required permissions (`pull-requests: write` for commenting)
+
+### Scripts
+
+- `new_post.sh`: Script for creating new blog posts with proper folder structure
+- `staging/`: Configuration files for staging environment setup
+
+## Maintenance
+
+The Docker image commenting system is self-maintaining and requires no manual intervention. If issues arise:
+
+1. Check the workflow logs in GitHub Actions
+2. Verify that the GitHub token has appropriate permissions
+3. Ensure the base image build completed successfully before the comment job runs

.github/workflows/on_call_staging_test.yaml

@@ -46,6 +46,7 @@ jobs:
           
           # Perform the tests
           set +e  # Don't exit on error so we can clean up
+          set -o pipefail  # Ensure pipeline returns exit code of first failing command
           exit_code=0
           
           curl -I -f http://localhost:8080/ || exit_code=1

.github/workflows/on_pr_test.yaml

@@ -19,6 +19,7 @@ on:
       - '.github/workflows/on_push_to_master_test_and_deploy.yaml'
       - '.github/workflows/on_call_build_site.yaml'
       - '.github/workflows/on_call_staging_test.yaml'
+      - '.github/workflows/on_pr_test.yaml'
       - 'package.json'
       - 'package-lock.json'
       - 'webpack.config.js'
@@ -58,6 +59,76 @@ jobs:
         ${{ needs.detect_base_image_changes.outputs.changed == 'true'
             && github.event.number || '' }}
 
+  comment_docker_image:
+    needs: [detect_base_image_changes, build_site]
+    runs-on: ubuntu-latest
+    # Only run if base image changes were detected and this is a PR event
+    if: needs.detect_base_image_changes.outputs.changed == 'true' && github.event_name == 'pull_request'
+    permissions:
+      pull-requests: write  # Allow commenting on PR
+    steps:
+      - name: Comment on PR with Docker image link
+        uses: actions/github-script@v7
+        with:
+          script: |
+            const prNumber = context.issue.number;
+            const imageTag = prNumber;
+            const imageUrl = `ghcr.io/orionrobots/orionrobots-site.base:${imageTag}`;
+            
+            // Comment body with Docker image information
+            const commentBody = `## 🐳 Docker Base Image Available
+            
+            A new base Docker image has been built and pushed for this PR:
+            
+            **Image:** \`${imageUrl}\`
+            
+            ### How to use this image:
+            
+            \`\`\`bash
+            # Pull the image
+            docker pull ${imageUrl}
+            
+            # Run with the image
+            docker run -it ${imageUrl} bash
+            \`\`\`
+            
+            ### For local development:
+            You can use this image as a base for testing changes without rebuilding dependencies.
+            
+            _This comment is automatically updated when the base image is rebuilt._`;
+            
+            // Look for existing comment from this bot
+            const comments = await github.rest.issues.listComments({
+              owner: context.repo.owner,
+              repo: context.repo.repo,
+              issue_number: prNumber,
+            });
+            
+            const botComment = comments.data.find(comment => 
+              comment.user.type === 'Bot' && 
+              comment.body.includes('🐳 Docker Base Image Available')
+            );
+            
+            if (botComment) {
+              // Update existing comment
+              await github.rest.issues.updateComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                comment_id: botComment.id,
+                body: commentBody
+              });
+              console.log('Updated existing Docker image comment');
+            } else {
+              // Create new comment
+              await github.rest.issues.createComment({
+                owner: context.repo.owner,
+                repo: context.repo.repo,
+                issue_number: prNumber,
+                body: commentBody
+              });
+              console.log('Created new Docker image comment');
+            }
+
   staging_test:
     uses: ./.github/workflows/on_call_staging_test.yaml
     needs: build_site

src/thumbnails.js

@@ -36,11 +36,21 @@ function has_thumbnail(post) {
 
 async function thumbnail_for_post(post) {
     const thumbnailUrl = getPostThumbnailPath(post);
+    let imageSrc;
+    
     if(thumbnailUrl == undefined) {
-        return "";
+        // Use favicon.png as fallback when no thumbnail is defined
+        imageSrc = "favicon.png";
+    } else {
+        imageSrc = stripLeadingSlash(thumbnailUrl);
+        if ( !fs.existsSync(imageSrc)) {
+            // Use favicon.png as fallback when thumbnail file doesn't exist
+            imageSrc = "favicon.png";
+        }
     }
-    const imageSrc = stripLeadingSlash(thumbnailUrl);
+    
     if ( !fs.existsSync(imageSrc)) {
+        // If even favicon.png doesn't exist, return empty (shouldn't happen)
         return "";
     } else {
         // console.log("Generating thumbnail for " + imageSrc);

tests/staging/features/recent-posts-thumbnails.feature

@@ -0,0 +1,7 @@
+Feature: Recent Posts Thumbnails
+
+  Scenario: All recent posts should have thumbnail images
+    Given the Staging site is started
+    When the index page is visited
+    Then the recent posts list should be present
+    And each recent post should have a picture tag with an img element

tests/staging/step_definitions/website_steps.js

@@ -76,3 +76,53 @@ Then('the Logo should be displayed in the top left corner', async function () {
     throw new Error('Logo (favicon.png) is not displayed in a nav element');
   }
 });
+
+Then('the recent posts list should be present', async function () {
+  if (!page) {
+    throw new Error('Page not initialized. Make sure previous steps are executed first.');
+  }
+  
+  // Check that the recent posts section exists with its heading
+  try {
+    const recentPostsHeading = await page.locator('h2:has-text("Recent Posts")');
+    await recentPostsHeading.waitFor({ state: 'visible', timeout: 10000 });
+    
+    // Check that the posts list exists
+    const postsList = await page.locator('ul.posts');
+    await postsList.waitFor({ state: 'visible', timeout: 10000 });
+  } catch (error) {
+    throw new Error('Recent posts list is not present on the page');
+  }
+});
+
+Then('each recent post should have a picture tag with an img element', async function () {
+  if (!page) {
+    throw new Error('Page not initialized. Make sure previous steps are executed first.');
+  }
+  
+  // Find all post items in the recent posts list
+  const postItems = await page.locator('ul.posts li.post').all();
+  
+  if (postItems.length === 0) {
+    throw new Error('No recent posts found in the posts list');
+  }
+  
+  // Check each post item has a picture tag with img element
+  for (let i = 0; i < postItems.length; i++) {
+    const postItem = postItems[i];
+    
+    try {
+      // Look for either a picture tag with img, or just an img tag within the media-left link
+      const imageElement = await postItem.locator('a.media-left picture img, a.media-left img').first();
+      await imageElement.waitFor({ state: 'visible', timeout: 5000 });
+      
+      // Verify the img element has a valid src attribute
+      const src = await imageElement.getAttribute('src');
+      if (!src || src.trim() === '') {
+        throw new Error(`Post ${i + 1} has an img element but no src attribute`);
+      }
+    } catch (error) {
+      throw new Error(`Post ${i + 1} does not have a picture tag with img element: ${error.message}`);
+    }
+  }
+});