4. Extras

4. Extras

1. Add new profiles automatically using GitHub Action

Creating profiles can be a time-consuming process, especially if you have hundreds of profiles to add to your site. You can reduce this pain by using a GitHub action to generate the markdown and placeholder image for a profile. This allows the user to jump straight into their profile and start editing without the need to create their profile from scratch.

Figure: Postman configuration for GitHub Dispatch trigger

1. Set the POST URL https://api.github.com/repos/_Your_GITHUB_ACCOUNT_/Northwind.People/dispatches
2. Add the additional headers

Accept = application/vnd.github.everest-preview+json
Authorization = token <GitHubToken>

3. Ensure the original Accept header is disabled. Figure: JSON payload required for the automated profile generation
4. Create the payload for the new profile
5. Send the post request to GitHub

2. Trigger a build when modifying a profile (markdown)

When a profile is modified, you need to re-build SSW.People to be able to see your changes. If done manually, it could be time-consuming as you will spend time to launch the build on every change and people will chase you to get their information up to date. Luckily there is a way to automate the build on profile change.

1. Create a new secret on your Northwind.People fork called ACCESS_TOKEN.
   The value of this secret will be your GitHub username and Personal Access Token for example username:access_token.
   This will be used to allow dispatch commands to be sent to your SSW.People fork.

2. Update the build and deployment workflow on your SSW.People fork.
   Add the following code snippet to the on trigger of your existing build and deploy workflow.

  repository_dispatch:
    types: [build_and_deploy]

Your on trigger will now look something like this.

on:
  repository_dispatch:
    types: [build_and_deploy]
  push:
    branches:
      - main
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - main

If there is a filter on the events that allow the build to run, you will need to add the following.

github.event.action == 'build_and_deploy' ||

Here is an example of it with the Azure Static Web App build and deploy workflow.

jobs:
  build_and_deploy_job:
    if: github.event.action == 'build_and_deploy' || github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')

3. Create the trigger workflow on the Northwind.People fork.
   Create a new workflow with the following code, replacing <USERNAME> with your GitHub username.

name: Trigger CI/CD when updating the repository 

on:
  push:
    branches: [ main ]
  pull_request:
    branches: [ main ]

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Run a multi-line script
      run: |
          curl -X POST https://api.github.com/repos/<USERNAME>/SSW.People/dispatches \
          -H 'Accept: application/vnd.github.everest-preview+json' \
          -u ${{ secrets.ACCESS_TOKEN }} \
          --data '{"event_type": "build_and_deploy", "client_payload": { "repository": "'"$GITHUB_REPOSITORY"'" }}'

4. Edit a file on the Northwind.People fork.
   To test everything works, update a file on your Northwind.People fork.
   Once the change has been pushed to your forks main branch, the workflow should run and generate a build on your SSW.People fork.

3. Copy Feature: Displaying Profile Details with Image

The copy feature allows users to display profile details alongside an image in a structured format. This is achieved using a combination of HTML and CSS, ensuring compatibility with email clients like Outlook as well as Word.

How to Use

1. Navigate to the Desired Employee Profile:
   • Find the employee whose details you want to copy.
2. Locate the Copy Icon:
   • Next to the "Download Profile Picture" icon, you'll see a new "Copy" icon. Figure: Copy Icon button
3. Click the Copy Icon:
   • This will copy the employee's details to your clipboard.
4. Paste the Details:
   • Open your email client or a Word document.
5. Insert the Details:
   • Right-click and select "Paste" or use the keyboard shortcut (Ctrl+V for Windows, Cmd+V for Mac) to insert the copied details.

Preview

Figure: Formatted profile info

4. Mailto Link: Configure your default mail client

Sometimes, when you click on an email link, nothing happens. To ensure that it opens your email client, you need to configure your default app for 'mailto' links.

Figure: Email link

For example, if you are using Microsoft Outlook, you should have Outlook set as the default MailTo protocol, as shown below:

Figure: You can find the setting by navigating to Start Menu, then selecting Settings | Apps | Default Apps

If you need help to adapt SSW.People to your need (data source, design, new widgets for the profile page), contact SSW