Initial commit

Author: marnheus

.devcontainer/devcontainer.json

@@ -0,0 +1,6 @@
+{
+  "image": "mcr.microsoft.com/devcontainers/universal:2",
+  "features": {
+    "ghcr.io/devcontainers/features/node:1": {}
+  }
+}

.github/steps/1-step.md

@@ -0,0 +1,91 @@
+## Step 1: Setting up the project
+
+Imagine you’ve got a repetitive task you’d love to automate. You've searched through the [**GitHub Marketplace**](https://github.com/marketplace?type=actions) for existing actions that might help, you come up empty-handed…
+
+Maybe that’s because your task is a bit _too_ unique 😆
+
+**GENERATING DAD JOKES**! 🎭
+
+<img width="600" alt="dadjoke-mona" src="https://github.com/user-attachments/assets/46b6b931-8d1f-4a01-88f4-4568704039a0" />
+
+Since no pre-built action exists for your quirky automation needs, it's time to roll up your sleeves and create your own!
+
+### ⌨️ Activity: Set up your development environment
+
+Let's use **GitHub Codespaces** to set up a cloud-based development environment and work in it for the remainder of the exercise!
+
+1. Right-click the below button to open the **Create Codespace** page in a new tab. Use the default configuration.
+
+   [![Open in GitHub Codespaces](https://github.com/codespaces/badge.svg)](https://codespaces.new/{{full_repo_name}}?quickstart=1)
+
+1. Confirm the **Repository** field is your copy of the exercise, not the original, then click the green **Create Codespace** button.
+
+   - ✅ Your copy: `/{{full_repo_name}}`
+   - ❌ Original: `/skills/write-javascript-actions`
+
+1. Wait a moment for Visual Studio Code to load in your browser.
+
+1. Verify that **Node.js** is available by opening a terminal and running:
+
+   ```sh
+   node --version
+   npm --version
+   ```
+
+   <details>
+   <summary>Having trouble? 🤷</summary><br/>
+
+   - Make sure you selected your personal copy of the repository, not the original template.
+   - If the Codespace fails to start, try refreshing the page and creating a new one.
+   - Node.js and npm should be pre-installed in the development environment.
+
+   </details>
+
+### ⌨️ Activity: Initialize Project
+
+Now that your Codespace is ready, let's initialize a new Node.js project and install the dependencies needed for your Dad Jokes action.
+
+1. Within your GitHub Codespace terminal window initialize a new project:
+
+   ```sh
+   npm init -y
+   ```
+
+1. Install the required dependencies:
+
+   ```sh
+   npm install request request-promise @actions/core @vercel/ncc
+   ```
+
+   > 🪧 **Note:** You will learn each library purpose in the next steps
+
+1. Review `package.json` to confirm dependencies are listed in the `dependencies` section.
+
+1. Open the `.gitignore` file and add an entry to exclude the `node_modules` directory from being tracked by Git:
+
+   ```text
+   node_modules/
+   ```
+
+   We don't want to commit `node_modules` because it contains thousands of files that would bloat the repository. 
+
+   > 🪧 **Note:** Instead, later in the exercise you will bundle your action into a single JavaScript file with all dependencies included.
+
+1. Commit and push your changes:
+
+   ```sh
+   git status
+   git add .
+   git commit -m "Initialize project"
+   git push
+   ```
+
+1. With the changes pushed to GitHub, Mona will check your work and share the next steps.
+
+<details>
+<summary>Having trouble? 🤷</summary><br/>
+
+- Ensure you are at the repository root before running `npm init -y`.
+- Do not commit `node_modules/` to the repository; ensure it's listed in `.gitignore`.
+
+</details>

.github/steps/2-step.md

@@ -0,0 +1,79 @@
+## Step 2: Create Source Files & Run Locally
+
+Nice! Now that we have the project initialized and dependencies installed, it's time to create the source files for your Dad Jokes GitHub Action.
+
+### 📖 Theory: The GitHub Actions Toolkit
+
+The `@actions/core` library is the main library from the [GitHub Actions Toolkit](https://github.com/actions/toolkit), a collection of packages for building JavaScript GitHub Actions. It provides essential methods to interact with the GitHub Actions runtime environment, accept action inputs, and produce outputs for other workflow steps.
+
+> [!TIP]
+> The [GitHub Actions Toolkit](https://github.com/actions/toolkit) includes other useful libraries like `@actions/github` for interacting with the GitHub API and `@actions/artifact` for uploading and downloading artifacts. 
+> 
+> Visit the [actions/toolkit](https://github.com/actions/toolkit) repository for more.
+
+
+### ⌨️ Activity: Implement the Dad Jokes Action
+
+Let's create the source files and implement the logic for your action.
+
+1. Create `src/` directory to hold your JavaScript files:
+
+1. Create `src/joke.js` file to hold the logic for fetching a joke from the `icanhazdadjoke.com` API:
+
+   ```js
+   const request = require("request-promise");
+
+   const options = {
+     method: "GET",
+     uri: "https://icanhazdadjoke.com/",
+     headers: {
+       Accept: "application/json",
+       "User-Agent": "Writing JavaScript action GitHub Skills exercise.",
+     },
+     json: true,
+   };
+
+   async function getJoke() {
+     const res = await request(options);
+     return res.joke;
+   }
+
+   module.exports = getJoke;
+   ```
+
+   The `getJoke` function makes an HTTP GET request to the `icanhazdadjoke.com` API and returns a random dad joke.
+
+   We export the `getJoke` function so it can be used in other files.
+
+1. Create `src/main.js` that will be the main entry point for your action:
+
+   ```js
+   const getJoke = require("./joke");
+   const core = require("@actions/core");
+
+   async function run() {
+     const joke = await getJoke();
+     console.log(joke);
+     core.setOutput("joke", joke);
+   }
+
+   run();
+   ```
+
+   We call the `getJoke` function and follow up with `core.setOutput()` to set the `joke` output of your GitHub Action.
+
+1. Run the action locally to verify it works:
+
+   ```sh
+   node src/main.js
+   ```
+
+1. Commit and push:
+
+   ```sh
+   git add src/
+   git commit -m "Add Dad Joke action source files"
+   git push
+   ```
+
+1. With the changes pushed to GitHub, Mona will check your work and share the next steps.

.github/steps/3-step.md

@@ -0,0 +1,44 @@
+## Step 3: Bundle the Action
+
+Good job! :tada:
+
+Now that you've created the source files for your Dad Jokes GitHub Action and tested it locally, it's time to bundle the action so it can be used in GitHub workflows.
+
+### 📖 Theory: Bundling Your Action
+
+When someone uses your action in their workflow, GitHub downloads and executes it as a complete package of code. This means you must include any package dependencies required to run the JavaScript code, such as the `@actions/core` and `request-promise` packages your action uses.
+
+Rather than committing your `node_modules` directory (which causes problems with repository size and performance), you can use bundling tools like `@vercel/ncc` to combine your code and dependencies into a single `dist/index.js` file for distribution.
+
+### ⌨️ Activity: Build Setup & Bundle
+
+1. Add a new `build` script to `package.json` (inside the existing `scripts` object):
+
+   ```json
+   "scripts": {
+      // Existing scripts...
+     "build": "ncc build src/main.js -o dist"
+   }
+   ```
+
+1. Run the build command. This should create a `dist/` directory with a bundled `index.js` file:
+
+   ```sh
+   npm run build
+   ```
+
+1. (optional) Run the bundled action to verify it works:
+
+   ```sh
+   node dist/index.js
+   ```
+
+1. Commit and push the changes to the `main` branch:
+
+   ```sh
+   git add .
+   git commit -m "Add ncc build script and bundled dist/index.js"
+   git push
+   ```
+
+1. With the changes pushed to GitHub, Mona will check your work and share the next steps.

.github/steps/4-step.md

@@ -0,0 +1,68 @@
+## Step 4: Add Action Metadata
+
+Great work! :tada: You've successfully bundled your Dad Jokes GitHub Action into a single file.
+
+Now it's time to create the **action metadata file** - this special file tells GitHub exactly how to use your action when someone includes it in their workflow!
+
+### 📖 Theory: Action Metadata
+
+Every GitHub Action requires a metadata file that defines how the action should be executed and what parameters it accepts.
+
+#### Metadata File Requirements
+
+The metadata file has specific requirements:
+
+- **Filename**: Must be `action.yml`
+- **Required for**: All actions types - JavaScript, [Docker container](https://docs.github.com/en/actions/tutorials/use-containerized-services/create-a-docker-container-action), and [composite action](https://docs.github.com/en/actions/tutorials/create-actions/create-a-composite-action)
+- **Format**: Written in YAML syntax
+
+#### Core Metadata Parameters
+
+| Parameter         | Description                                                    | Required |
+| ----------------- | -------------------------------------------------------------- | :------: |
+| **`name`**        | The name of your action.                                       |    ✅    |
+| **`description`** | A short description of what your action does.                  |    ✅    |
+| **`author`**      | The name of the action's author.                               |    ○     |
+| **`inputs`**      | Data that the action expects to receive.                       |    ○     |
+| **`outputs`**     | Data that downstream steps in the workflow can use             |    ○     |
+| **`runs`**        | Tells GitHub how to execute your action.                       |    ✅    |
+| **`branding`**    | Color and icon for your action in GitHub Marketplace.          |    ○     |
+
+#### JavaScript Action `runs` Configuration
+
+For JavaScript actions, the `runs` section needs:
+
+- **`using`**: Which Node.js version to use
+- **`main`**: The main JavaScript file to run
+
+> [!TIP]
+> For complete details on all available metadata parameters, optional fields, and advanced configurations, see the official [GitHub Actions metadata syntax documentation](https://docs.github.com/en/actions/reference/workflows-and-actions/metadata-syntax).
+
+---
+
+### ⌨️ Activity: Create Metadata File
+
+1. Create `action.yml` at the repository root (same level as `package.json`).
+
+   ```yaml
+   name: "Joke Action"
+   description: "Fetches a random joke and exposes it as an output"
+
+   outputs:
+     joke:
+       description: "The fetched joke text"
+
+   runs:
+     using: node24
+     main: dist/index.js
+   ```
+
+1. Commit and push the action metadata file to the `main` branch:
+
+   ```sh
+   git add action.yml
+   git commit -m "Add action metadata file"
+   git push
+   ```
+
+1. With the changes pushed to GitHub, Mona will check your work and share the next steps.

.github/steps/5-step.md

@@ -0,0 +1,60 @@
+## Step 5: Create Workflow & Consume Output
+
+Well done! :clap: You've created the Dad Jokes GitHub Action and defined its metadata.
+
+Your action should be ready to use in any GitHub repository now!
+
+### ⌨️ Activity: Author Workflow
+
+Let's see your Dad Jokes action in action by creating a GitHub Actions workflow that uses it!
+
+1. Create a new GitHub Actions workflow file with the following name
+
+   ```txt
+   .github/workflows/joke-action.yml
+   ```
+
+1. Add the following contents to the workflow file:
+
+   ```yaml
+   name: Joke Action
+   run-name: {% raw %}Dad Joke for issue ${{ github.event.issue.number }} by ${{ github.event.comment.user.login }}{% endraw %}
+
+   on:
+    issue_comment:
+      types: [created]
+
+   permissions:
+    issues: write
+    contents: read
+  
+   jobs:
+     joke:
+       if: startsWith(github.event.comment.body, '/joke')
+       runs-on: ubuntu-latest
+       steps:
+         - uses: actions/checkout@v5
+         - name: Get Joke
+           id: get-joke
+           uses: ./
+         - name: Create comment
+           uses: peter-evans/create-or-update-comment@v5
+           with:
+            issue-number: {% raw %}${{ github.event.issue.number }}{% endraw %}
+            body: {% raw %}${{ steps.get-joke.outputs.joke }}{% endraw %}
+   ```
+
+   This workflow triggers for all new issue comments in the repository.
+
+   Because of the `if` conditional, the `joke` job only runs if the comment starts with `/joke`.
+
+1. Commit and push the workflow file to the `main` branch:
+
+   ```sh
+   git add .github/workflows/joke-action.yml
+   git commit -m "Add workflow to test joke action"
+   git push
+   ```
+
+
+1. With the workflow pushed to GitHub, Mona will check your work and share the next steps.

.github/steps/6-step.md

@@ -0,0 +1,30 @@
+## Step 6: Trigger & Validate
+
+Awesome! :rocket: You've created the Dad Jokes GitHub Action, defined its metadata, and authored a workflow to use it.
+
+The only thing left to do is test it out!
+
+### ⌨️ Activity: Try out your action
+
+1. Create a comment in this issue (or create a new issue) with the text `/joke`
+
+1. Monitor the **Actions** tab for the `Joke Action` workflow to complete:
+
+   <img width="400" alt="SCR-20251113-kntg" src="https://github.com/user-attachments/assets/992da295-0123-4688-a068-d289967f2455" />
+
+
+1. Return to the issue and you should see a new comment posted by `github-actions[bot]` containing a random dad joke!
+
+1. Mona will post the exercise review once your new Dad Joke workflow completes **successfully**! 
+
+   <details>
+   <summary>Having trouble? 🤷</summary><br/>
+
+   If the workflow doesn't trigger or fails:
+   - Make sure your comment starts exactly with `/joke`
+   - Check the Actions tab for error messages
+   - Verify that your `dist/index.js` file exists and was committed
+   - If you did any updates to your source code, ensure you re-bundled with `npm run build` and pushed the changes
+   - Ensure your `action.yml` file is correctly formatted
+
+   </details>