Creating a Guestbook to Highlight Your GitHub Profile

#github #tutorial #guestbook

Creating a guestbook on your GitHub profile is an excellent way to engage with visitors and showcase your projects. It allows others to leave comments, feedback, or appreciation for your work, making your profile more interactive and welcoming. Here’s a step-by-step guide on how to set up a guestbook using GitHub Actions.

What is a Guestbook?

A guestbook is a simple application that allows visitors to leave messages or comments without needing to create an account. In the context of GitHub, it can be implemented as part of your profile README, where users can submit their thoughts directly through issues in your repository.

Check here by clicking green "Click Here" button and add a comment.
Your message will be added to the table.

Why Add a Guestbook?

Engagement: A guestbook encourages interaction with your audience, allowing them to share their thoughts and experiences.
Feedback: It provides a platform for users to give feedback on your projects, which can be invaluable for improvement.
Community Building: By allowing others to express their appreciation or suggestions, you foster a sense of community around your work.

Step 1: Create a Repository

Create a New Repository: Start by creating a new repository on GitHub where you will host your guestbook. For displaying on your Github profile, you can name the repository as the same as your Github username. For example, https://github.com/LovelyDev829/LovelyDev829.
Initialize with a README: Ensure that the repository has a README file since this will be where the guestbook entries will be displayed.

Step 2: Install the Guestbook Action

To automate the process of adding comments to your guestbook, you can use the readme-guestbook GitHub Action.

Add the Action: In your repository, create a new workflow file in .github/workflows/guestbook.yml.
Define the Workflow: Use the following example configuration:

name: Guestbook

on:
  issue_comment:
    types: [created, edited, deleted]

permissions:
  contents: write  # Grant write permission to the contents of the repository

jobs:
  update_guestbook:
    name: Update guestbook
    if: ${{ github.event.issue.title == 'Guestbook' }}
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repo
        uses: actions/checkout@v3

      - name: Update guestbook from comments
        uses: actions/github-script@v6
        with:
          script: |
            const truncateString = (str, num) => str.length > num ? str.slice(0, num) + "..." : str;

            const query = `query($owner:String!, $name:String!, $issue_number:Int!) {
                repository(owner:$owner, name:$name){
                    issue(number:$issue_number) {
                        comments(first:5,orderBy:{direction:DESC, field:UPDATED_AT}) {
                            nodes {
                                author {
                                    avatarUrl(size: 24)
                                    login
                                    url
                                }
                                bodyText
                                updatedAt
                            }
                        }
                    }
                }
            }`;
            const variables = {
                owner: context.repo.owner,
                name: context.repo.repo,
                issue_number: context.issue.number
            }

            const result = await github.graphql(query, variables);
            const renderComments = (comments) => {
                return comments.reduce((prev, curr) => {
                    let text = curr.bodyText.replace(/(\r\n|\r|\n)/g, "<br />").replace('|', '&#124;');
                    text = truncateString(text, 125);
                    return `${prev}| <a href="${curr.author.url}" style="display: flex; align-items: center;"><img width="30" src="${curr.author.avatarUrl}" alt="${curr.author.login}" style="border-radius: 50%; margin-right: 5px;"/> ${curr.author.login}</a> |${new Date(curr.updatedAt).toLocaleString()}|${text}|\n`;
                }, "| Name | Date | Message |\n|---|---|---|\n");
            };
            const fileSystem = require('fs');
            const readme = fileSystem.readFileSync('README.md', 'utf8');
            fileSystem.writeFileSync('README.md', readme.replace(/(?<=<!-- Guestbook -->.*\n)[\S\s]*?(?=<!-- \/Guestbook -->|$(?![\n]))/gm, renderComments(result.repository.issue.comments.nodes)), 'utf8');

      - name: Push guestbook update
        run: |
          git config --global user.name 'Github Actions'
          git config --global user.email '41898282+github-actions[bot]@users.noreply.github.com'
          git commit -am ':sparkles: update guestbook' || exit 0  # Avoid error if no changes
          git push

Step 3: Create an Issue for Comments

Create an issue named as "Guestbook" in your repository that will serve as the comment section for your guestbook.

Step 4: Modify Your README

In your README file, add markers for where the guestbook entries will appear:

<!-- Guestbook -->
| Name | Date | Message |
|---|---|---|
| <a href="https://github.com/bryan6738" style="display: flex; align-items: center;"><img width="30" src="https://avatars.githubusercontent.com/u/140149575?s=24&u=f327fb5544257f1efd0db05dd24c3ffd495be4c6&v=4" alt="bryan6738" style="border-radius: 50%; margin-right: 5px;"/> bryan6738</a> |12/7/2024, 2:30:38 PM|Nice, highly recommend.|
| <a href="https://github.com/bestdeveloper23" style="display: flex; align-items: center;"><img width="30" src="https://avatars.githubusercontent.com/u/125925304?s=24&v=4" alt="bestdeveloper23" style="border-radius: 50%; margin-right: 5px;"/> bestdeveloper23</a> |12/7/2024, 2:28:16 PM|WooooooW.|
| <a href="https://github.com/reactmaster223" style="display: flex; align-items: center;"><img width="30" src="https://avatars.githubusercontent.com/u/97944031?s=24&v=4" alt="reactmaster223" style="border-radius: 50%; margin-right: 5px;"/> reactmaster223</a> |12/7/2024, 2:25:47 PM|Really Nice Profile !!!|
<!-- /Guestbook -->

[![Add a Note](https://img.shields.io/badge/Add%20a%20Note-Click%20Here-brightgreen)](https://github.com/LovelyDev829/LovelyDev829/issues/1)

Note: replace LovelyDev829 with your Github username.

Conclusion

Adding a guestbook to your GitHub profile is an effective way to enhance interaction and build community around your projects. By following these steps, you can create an engaging space for visitors to connect with you and provide valuable feedback. This not only highlights your work but also showcases your commitment to fostering collaboration and communication within the developer community.
Start setting up your guestbook today and watch as engagement on your profile grows!