update message, use print theme names instead of slugs

.github/workflows/preview-theme.yml

@@ -48,6 +48,7 @@ jobs:
         with:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
+            const fs = require('fs');
             const createBlueprint = ( themeSlug, branch ) => {
               const template = {
                 steps: [
@@ -72,11 +73,26 @@ jobs:
             
               return JSON.stringify(template);
             };
-            
-            const comment = process.env.CHANGED_THEMES.split(' ').map(themeSlug => {
-              const theme = themeSlug.split('/').pop();
-              return `- [Preview changes for ${theme}](https://playground.wordpress.net/#${createBlueprint(themeSlug, context.payload.pull_request.head.ref)})`;
+
+            const getThemeNamesFromStyleCss = (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(' ').map(themeSlug => getThemeNamesFromStyleCss(themeSlug));
+            const previewLinks = changedThemes.map(themeSlug => {
+              return `- [Preview changes for **${getThemeNameFromStyleCss(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.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({
@@ -85,14 +101,14 @@ jobs:
               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;
             }
@@ -101,6 +117,6 @@ jobs:
               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}`
             });