investigate output problems

.github/workflows/preview-theme.yml

@@ -23,65 +23,100 @@ jobs:
               dir_name=$(dirname "$file")
               echo $dir_name
               if [[ -f "$dir_name/style.css" ]]; then  # Check if the directory contains a theme
-                  unique_dirs["$dir_name"]=1  # Use associative array to keep directories unique
+                  # save only the basename
+                  unique_dirs[$dir_name]=$(basename $dir_name)
                   echo $unique_dirs
               fi
           done
 
-          # Check if any themes have changed
+          # Check if themes have changed
           if [[ ${#unique_dirs[@]} -eq 0 ]]; then
-              echo "No themes have changed"
+              echo "No theme changes detected"
               echo "HAS_THEME_CHANGES=false" >> $GITHUB_OUTPUT
-              exit 78  # Exit with neutral status code
+              exit 78 # Use neutral exit code
           fi
 
+          # Output list of theme slugs with changes
           echo "HAS_THEME_CHANGES=true" >> $GITHUB_OUTPUT
+          echo "CHANGED_THEMES=$(echo ${unique_dirs[@]})" >> $GITHUB_ENV
+          echo "Theme directories with changes: $CHANGED_THEME_DIRS"
 
-          # Generate preview links for each theme
-          preview_links=()
-          for dir in "${!unique_dirs[@]}"; do
-              theme_slug=$(basename "$dir")
-              preview_links+=$(bash ./bin/generate-preview-link.sh "$theme_slug" "${{ github.event.pull_request.head.ref }}")
-          done
-
-          # parse preview links into a json array, and minify the output into a single line
-          preview_links=$(echo "${preview_links[@]}" | jq -R . | jq -s . | jq -c .)
-
-          echo "PREVIEW_LINKS=$preview_links" >> $GITHUB_ENV
-        
       - name: Comment on PR
         id: comment-on-pr
         if: ${{ steps.check-for-changes.outputs.HAS_THEME_CHANGES == 'true' }}
         uses: actions/github-script@v7
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
-            const previewLinks = JSON.parse(process.env.PREVIEW_LINKS);
-            const comment = previewLinks.join('\n');
+            const fs = require('fs');
+            const createBlueprint = ( themeSlug, branch ) => {
+              const template = {
+                steps: [
+                  {
+                    step: 'login',
+                    username: 'admin',
+                    password: 'password'
+                  },
+                  { 
+                    step: 'installTheme',
+                    themeZipFile: {
+                      resourece: 'url',
+                      url: `https://github-proxy.com/partial/Automattic/themes/${themeSlug}?branch=${branch}`
+                    }
+                  },
+                  {
+                    step: 'activateTheme',
+                    themeFolderName: themeSlug
+                  }
+                ]
+              };
+            
+              return JSON.stringify(template);
+            };
+
+            const getThemeName = (themeSlug) => {
+              const styleCss = fs.readFileSync(`${themeSlug}/style.css`, 'utf8');
+              const themeName = styleCss.match(/Theme Name:(.*)/i)[1].trim();
+              return themeName;
+            };
+            const changedThemes = process.env.CHANGED_THEMES.split(' ');
+            const previewLinks = changedThemes.map(themeSlug => {
+              return `- [Preview changes for **${getThemeName(themeSlug)}**](https://playground.wordpress.net/#${createBlueprint(themeSlug, context.payload.pull_request.head.ref)})`;
+            }).join('\n');
+
+            const comment = `
+              I've detected changes to the following themes: ${changedThemes.map(themeSlug => getThemeName(themeSlug)).join(', ')}.\n
+              You can preview these changes by following the links below:\n
+              ${previewLinks}
 
+              I will update this comment with the latest preview links as you push more changes to this PR.
+              The preview sites are created using [WordPress Playground](https://wordpress.org/playground/). You can add content, edit settings, and test the themes as you would on a real site,
+              but please note that changes are not saved between sessions.
+            `;
+            
             // Check if a comment already exists
             const { data: comments } = await github.rest.issues.listComments({
               issue_number: context.payload.pull_request.number,
               owner: context.repo.owner,
               repo: context.repo.repo
             });
-
-            const existingComment = comments.find(comment => comment.user.login === 'github-actions[bot]' && comment.body.startsWith('Preview links for theme changes:'));
+            
+            const existingComment = comments.find(comment => comment.user.login === 'github-actions[bot]' && comment.body.startsWith('### Preview changes'));
             
             if (existingComment) {
               await github.rest.issues.updateComment({
                 comment_id: existingComment.id,
                 owner: context.repo.owner,
                 repo: context.repo.repo,
-                body: `Preview links for theme changes:\n${comment}`
+                body: `### Preview changes\n-\n${comment}`
               });
               return;
             }
-
+            
             github.rest.issues.createComment({
               issue_number: context.payload.pull_request.number,
               owner: context.repo.owner,
               repo: context.repo.repo,
-              body: `Preview links for theme changes:\n${comment}`
+              body: `### Preview changes\n-\n${comment}`
             });