[WIP] Add CI workflow for automatic screenshots generation

[Copilot]

• Create scripts/generateScreenshots.js using Puppeteer to capture screenshots and update README
• Add images/ directory with a placeholder .gitkeep
• Add puppeteer as a dependency in package.json and add generate:screenshots npm script
• Add a "Screenshots" section to README.md
• Create .github/workflows/screenshots.yml GitHub Actions workflow

Original prompt

Create a CI workflow system to automatically generate screenshots for the README file. The workflow should utilize GitHub Actions and include the following steps:

1. Trigger on every push to the main branch and allow manual dispatch.
2. Check out the repository code.
3. Set up a Node.js environment (e.g., Node.js 18).
4. Install dependencies specified in package.json.
5. Run a script that captures screenshots using Puppeteer (or a similar library). The script should:
   • Visit specified URLs or app states.
   • Save screenshots in a designated folder (e.g., images/).
   • Update the README.md file with references to the new screenshots.
6. Commit and push changes to the repository, including the updated README.md and screenshot images.

Additionally, include an example script scripts/generateScreenshots.js in the repository. This script should:

• Automatically generate screenshots for predefined URLs or states.
• Update README.md to reflect the new screenshots using markdown image syntax.

Ensure that the README.md file contains the new screenshots under the "Screenshots" section. Provide clear instructions and comments within the files for maintainability.

The following is the prior conversation context from the user's chat exploration (may be truncated):

User: Get me started with Git.

Assistant: Getting started with Git is exciting! Here’s a step-by-step guide to help you begin:

---

1. What is Git?

Git is a version control system that helps you track changes in your code, collaborate with others, and manage your project files efficiently.

---

2. Install Git

Start by installing Git on your computer:

• Windows: Download the installer from Git for Windows.
• macOS: Use brew install git (via Homebrew) or download the installer here.
• Linux: Run sudo apt install git (Ubuntu/Debian) or sudo yum install git (Fedora).

---

3. Set Up Git

Once installed, set up your user information (this will appear on your commits):

git config --global user.name "Your Name"
git config --global user.email "your-email@example.com"

---

4. Initialize a Repository

If you want to start tracking changes on a new project:

mkdir my_project
cd my_project
git init

This creates a .git folder in your project, initializing it as a Git repository.

---

5. Clone an Existing Repository

If you want to work on an already existing repository, you can clone it:

git clone <repository-url>

For example:

git clone https://github.com/example-user/example-repo.git

---

6. Track Changes

• Add your changes to the staging area:

  git add <filename> # Add specific file
  git add .          # Add all files in the directory

• Commit changes to save a checkpoint:

  git commit -m "Your commit message"

---

7. View and Check Changes

• See the current status of your repository:

  git status

• View the commit history:

  git log

• Compare changes between saved stages:

  git diff

---

8. Push to a Remote Repository

After making changes, you can push them to a remote repository like GitHub:

git remote add origin <repository-url>
git push -u origin main

(Replace main with your branch name, if different.)

---

9. Branching and Merging

• Create a branch:

  git branch <branch-name>
  git checkout <branch-name>

• Merge a branch into main:

  git checkout main
  git merge <branch-name>

• To list all branches:

  git branch

---

Additional Resources:

• Git Official Documentation
• Interactive Git Tutorial
• Try with virtual environments like GitHub’s "Hello World" guide.

If you have questions about specific steps or commands, I’d be happy to help!

User: ADD screenshots in readme

Assistant: To include screenshots in a README.md file, you'll need to follow these steps:

---

1. Take and Upload Screenshots

First, capture the relevant screenshots of your project and upload them to the GitHub repository. You can upload images by dragging and dropping files into the issue area or directly uploading them to the repository.

---

2. Reference the Screenshot in the README

Update your README.md file to reference these screenshots using Markdown.

The syntax to include images in Markdown is:

![Alt text describing the image](relative_or_direct_url_of_image)

For example:

## Preview

Screenshot of the CoreTex project:

![CoreTex Screenshot](images/screenshot.png)

---

3. Organize the Repository

To organize the images, you can create a new directory called images in your repository:

1. Create a new director...

This pull request was created from Copilot chat.

---

✨ Let Copilot coding agent set things up for you — coding agent works faster and does higher quality work when set up for your repo.

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[Copilot]

Copilot wasn't able to review any files in this pull request.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[GizzZmo]

Ok