feat: Add GitHub reactions system for blog posts to measure community engagement

README.md

@@ -116,5 +116,17 @@ Reference the assets with a relative path such as **images/my-firt-post-image.jp
 #### Sharing
 The Hiero website uses [Hugo Share Buttons](https://github.com/Stals/hugo-share-buttons) for post sharing functionality.
 
+#### GitHub Reactions
+The Hiero website includes a GitHub reactions system that displays community reactions from Pull Requests on blog posts. This feature helps measure community engagement without requiring a backend.
+
+To enable reactions on a blog post, add a `pr_number` field to the frontmatter:
+```
+pr_number = "123"  # GitHub PR number
+```
+
+If no PR number is specified, the system will automatically search for PRs that modified the blog post file.
+
+For detailed usage instructions, see [docs/github-reactions-usage.md](docs/github-reactions-usage.md).
+
 #### Settings
 Additional settings can be found in the **hugo.toml** configuration file.

content/posts/github-reactions-demo.md

@@ -0,0 +1,96 @@
++++
+title = 'TSC Voting Process'
+featured_image = "/images/tsc-voting-process-post/TSCVotingProcessBanner_V1.jpg"
+date = 2025-04-29T10:12:50-07:00
+categories = ["Blog"]
+duration = ""
+abstract = "We'll walk you through the steps to cast your vote, the criteria for eligibility, and the tools you'll use to participate."
+[[authors]]
+name = "Hiero Team"
+title = ""
+organization = ""
+link = ""
+image = "/images/profile-hiero.png"
++++
+
+## 🗳️ Upcoming Hiero TSC Elections - How Does Voting Work?
+
+In the earlier LF/DT [blog post](https://www.lfdecentralizedtrust.org/blog/announcing-the-upcoming-elections-for-end-user-and-community-seats-on-the-hiero-technical-steering-committee-tsc), we announced the upcoming elections for the End User and Contributor seats on the Hiero Technical Steering Committee (TSC), set to take place from May 7 to May 31, 2025. These elections are a pivotal moment for the Hiero community, offering a chance to directly influence the project's technical direction and governance.
+
+Now, as the election period approaches, it's time to dive into how the voting process will unfold. In this follow-up post, we'll walk you through the steps to cast your vote, the criteria for eligibility, and the tools you'll use to participate. Whether you're an experienced contributor or a first-time voter, understanding this process (and our commitment to offer transparency) is key to making your voice heard.
+
+## 📅 TSC Election Timeline for May 2025
+
+The following timeline borrows its process from the sample in the [LF Decentralized Trust documentation](https://lf-decentralized-trust.github.io/governance/member-info/election-timeline.html).
+
+### 📝 Nomination Timeline
+
+- Mar 17 2025 - Nominations are open for TSC End User and Contributor Chair.
+- Apr 29 2025 - The community architects will gather the GitHub IDs of the active contributors to approve them as voters.
+- Apr 30 2025 - All nominees must have created their nomination statement as a GitHub Pull Request.
+- Apr 30 2025 - Nominations close EOD Pacific.
+- May 01 2025 - Update the eligibility check site.
+- May 06 2025 - Update the TSC on upcoming elections starting next day.
+
+### 🗳️ Voting Timeline
+
+- May 07 2025 - Formally announce the slate of candidates.
+- May 07 2025 - Open the vote using https://vote.heliosvoting.org/. A GitHub notification will be sent to eligible voters with information about casting their ballot. GitHub IDs will be used for the voters.
+- May 13 2025 - TSC first reminder of voting for candidates.
+- May 20 2025 - TSC second reminder of voting for candidates.
+- May 27 2025 - TSC third and final reminder of voting for candidates.
+- May 31 2025 - Voting closes at 23:59 UTC.
+- Jun 01 2025 - The vote results will determine the two elected TSC members. An announcement will be made to the winning candidates.
+- Jun 03 2025 - The TSC will be formally updated with the results of the vote.
+
+## 🧭 How does the nomination process start?
+
+Earlier, we announced that our nomination process starts by reviewing the [elections documentation](https://github.com/hiero-ledger/governance/blob/main/elections/elections.md) and submitting your application.
+
+As of today, this process is still open, and we continue to welcome more nominations!
+
+Additional information on how to submit a nomination is provided in the following [video](https://www.youtube.com/watch?v=aqWDbzJbeig).
+
+## 🛠️ What tools are used during the nomination process?
+
+While the nomination process is open, the LFDT Community Architects will work in parallel to build the election template using [Helios Voting](https://vote.heliosvoting.org/). This template contains general information including the name of the election, description, type (election or referendum), privacy options and voting details.
+
+![🔗 Helios Voting Home Page](/images/tsc-voting-process-post/helios-voting-home-page.png)
+
+The GitHub IDs of active voting members are collected and verified to confirm their eligibility. These members will be registered in the election form to invite them to cast their vote when the time comes.
+
+The GitHub IDs of the voters is kept private. However the number of voters is kept visible and participants can check eligibility using a tool similar to the one used in the [LFDT TAC](https://lf-decentralized-trust.github.io/tac-eligibility-check/). Once this tool is available for Hiero, we will make it public to the team.
+
+New voters can always be added as the vote remains open.
+
+The content of the election consists of one or more questions (depending on the open positions in the election) where the registered voters will cast their vote in favor of the nominees. Since our current election is open for an End User and Contributor seats, this template will contain two questions.
+
+![🗳️ Helios Vote](/images/tsc-voting-process-post/helios-vote.png)
+
+The template is then published and is open for registering the nominations. Behind the scenes, the [nominations collected during the election process](https://github.com/hiero-ledger/governance/tree/main/elections/nominees/mar-2025-election) are accounted for in the Helios Voting template.
+
+This template will remain accessible throughout the nomination phase to allow for the continued collection of candidate submissions.
+
+## 📣 What happens once the vote begins?
+
+Once the vote starts, the registered voters are notified via (GitHub Notifications)[https://docs.github.com/en/account-and-profile/managing-subscriptions-and-notifications-on-github/setting-up-notifications/configuring-notifications] welcoming them to make their selection. The LFDT Community Architects will configure this notification via Helios Voting.
+
+![🧪 Helios Test Election](/images/tsc-voting-process-post/helios-test-election.png)
+
+The notification includes detailed instructions guiding voters through the voting process. Voters are directed to the Helios Voting platform via a provided link and are required to log in using their GitHub credentials.
+
+As the voting deadline approaches, a reminder will be sent to all eligible voters to inform them that the voting period is nearing its close.
+
+## ✅ How are votes counted?
+
+Once voting has concluded, the results for the End User and Contributor seats will be reviewed by the LFDT Community Architects and formally announced during the next TSC meeting.
+
+For a comprehensive overview of the voting process, we encourage community members to attend the upcoming [Hiero Community Call](https://zoom-lfx.platform.linuxfoundation.org/meetings/hiero?view=week), where additional details will be shared and participants will have the opportunity to ask questions.
+
+Additionally, members are encouraged to explore the [Helios Voting](https://vote.heliosvoting.org/) platform to become familiar with its features and functionality.
+
+---
+
+## 💬 Join the Discussion
+
+We value your feedback on this voting process! Visit the [GitHub Pull Request #73](https://github.com/hiero-ledger/hiero-website/pull/73) where this blog post was developed to share your thoughts, ask questions, or contribute to the discussion. Your input helps us improve our community processes and ensures transparency in our governance.

content/posts/tsc-voting-process.md

@@ -4,7 +4,7 @@ featured_image = "/images/tsc-voting-process-post/TSCVotingProcessBanner_V1.jpg"
 date = 2025-04-29T10:12:50-07:00
 categories = ["Blog"]
 duration = ""
-abstract = "We’ll walk you through the steps to cast your vote, the criteria for eligibility, and the tools you’ll use to participate."
+abstract = "We'll walk you through the steps to cast your vote, the criteria for eligibility, and the tools you'll use to participate."
 [[authors]]
 name = "Hiero Team"
 title = ""
@@ -88,3 +88,9 @@ Once voting has concluded, the results for the End User and Contributor seats wi
 For a comprehensive overview of the voting process, we encourage community members to attend the upcoming [Hiero Community Call](https://zoom-lfx.platform.linuxfoundation.org/meetings/hiero?view=week), where additional details will be shared and participants will have the opportunity to ask questions.
 
 Additionally, members are encouraged to explore the [Helios Voting](https://vote.heliosvoting.org/) platform to become familiar with its features and functionality.
+
+---
+
+## 💬 Join the Discussion
+
+We value your feedback on this voting process! Visit the [GitHub Pull Request #73](https://github.com/hiero-ledger/hiero-website/pull/73) where this blog post was developed to share your thoughts, ask questions, or contribute to the discussion. Your input helps us improve our community processes and ensures transparency in our governance.

docs/github-reactions-usage.md

@@ -0,0 +1,130 @@
+# GitHub Reactions for Blog Posts
+
+This feature allows blog posts to display GitHub reactions from their corresponding Pull Requests, providing a way to measure community engagement without requiring a backend.
+
+## How It Works
+
+The GitHub reactions system automatically fetches reaction data from GitHub PRs and displays them on blog posts. Users can see community reactions (thumbs up, heart, rocket, etc.) and click through to the GitHub PR to add their own reactions.
+
+## Features
+
+- **Automatic PR Discovery**: If no PR number is specified, the system automatically searches for PRs that modified the blog post
+- **Real-time Reactions**: Fetches current reaction counts from GitHub
+- **Caching**: Implements intelligent caching to respect GitHub API rate limits
+- **Fallback Handling**: Gracefully handles cases where no PR is found
+- **Responsive Design**: Works on all device sizes
+
+## Usage
+
+### Option 1: Specify PR Number (Recommended)
+
+Add a `pr_number` field to your blog post frontmatter:
+
+```yaml
++++
+title = 'Your Blog Post Title'
+date = 2025-01-01T00:00:00Z
+pr_number = "456"  # GitHub PR number
++++
+```
+
+### Option 2: Automatic Discovery
+
+If you don't specify a PR number, the system will automatically search for PRs that modified your blog post file. This works by:
+
+1. Searching through recent closed PRs
+2. Checking which files were modified in each PR
+3. Matching the blog post filename/slug
+4. Loading reactions from the discovered PR
+
+## Supported Reaction Types
+
+The system supports all standard GitHub reactions:
+- 👍 thumbs up
+- 👎 thumbs down
+- 😄 laugh
+- 🎉 hooray
+- 😕 confused
+- ❤️ heart
+- 🚀 rocket
+- 👀 eyes
+
+## Technical Implementation
+
+### Files
+- **Shortcode**: `layouts/shortcodes/github-reactions.html`
+- **CSS**: `static/css/github-reactions.css`
+- **JavaScript**: `static/js/github-reactions.js`
+- **Layout Integration**: `layouts/posts/single.html`
+
+### API Endpoints Used
+- `GET /repos/hiero-ledger/hiero-website/pulls/{pr_number}/reactions`
+- `GET /repos/hiero-ledger/hiero-website/pulls/{pr_number}`
+- `GET /repos/hiero-ledger/hiero-website/pulls?state=closed&sort=updated&direction=desc&per_page=50`
+- `GET /repos/hiero-ledger/hiero-website/pulls/{pr_number}/files`
+
+### Rate Limiting
+- Respects GitHub API rate limits
+- Implements intelligent caching (30-minute cache)
+- Graceful fallback when rate limits are exceeded
+
+## Customization
+
+### Styling
+The appearance can be customized by modifying `static/css/github-reactions.css`. The component uses CSS custom properties and supports both light and dark modes.
+
+### JavaScript Behavior
+Modify `static/js/github-reactions.js` to change:
+- Cache duration
+- API endpoints
+- Reaction display logic
+- Error handling
+
+## Troubleshooting
+
+### Common Issues
+
+1. **No reactions displayed**
+   - Check browser console for errors
+   - Verify the PR number is correct
+   - Ensure the PR has reactions
+
+2. **Rate limit errors**
+   - The system will show appropriate error messages
+   - Reactions will load when rate limits reset
+
+3. **PR not found**
+   - Verify the PR number exists
+   - Check if the PR is public and accessible
+
+### Debug Mode
+
+Open browser console and look for:
+- `🚀 Initializing GitHub reactions...`
+- `Found X reaction containers`
+- `Processing container X: {prNumber, slug}`
+
+## Future Enhancements
+
+- GitHub token support for higher rate limits
+- Real-time updates via GitHub webhooks
+- Analytics integration
+- Custom reaction types
+- Bulk reaction loading for multiple posts
+
+## Contributing
+
+To contribute to this feature:
+
+1. Fork the repository
+2. Make your changes
+3. Test with different PR scenarios
+4. Submit a PR with clear description of changes
+
+## Support
+
+For issues or questions:
+1. Check the browser console for error messages
+2. Review this documentation
+3. Open an issue on GitHub with detailed information
+4. Tag @belloibrahv for assistance

layouts/partials/github-reactions.html

@@ -0,0 +1,29 @@
+{{ $prNumber := .Params.pr_number | default "" }}
+{{ $postSlug := .File.BaseFileName }}
+
+<div class="github-reactions" data-pr="{{ $prNumber }}" data-slug="{{ $postSlug }}">
+  <div class="reactions-container">
+    <div class="reactions-header">
+      <span class="reactions-label">
+        <svg class="reaction-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M8 0C3.58 0 0 3.58 0 8c0 4.42 3.58 8 8 8s8-3.58 8-8c0-4.42-3.58-8-8-8zM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/>
+          <path d="M5 6.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM5.5 9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5"/>
+        </svg>
+        Community reactions
+      </span>
+      <a href="#" class="github-link" target="_blank" rel="noopener" style="display: none;">
+        <span>React on GitHub</span>
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Z"/>
+          <path d="M6.854 10.146a.75.75 0 0 1-1.061 1.061L1.646 7.061a.75.75 0 0 1 0-1.061L5.793 1.854a.75.75 0 1 1 1.061 1.061L3.207 6.5H14a.75.75 0 0 1 0 1.5H3.207l3.647 3.646Z"/>
+        </svg>
+      </a>
+    </div>
+    <div class="reactions-list" id="reactions-{{ $postSlug }}">
+      <div class="loading">
+        <div class="loading-spinner"></div>
+        <span>Loading reactions...</span>
+      </div>
+    </div>
+  </div>
+</div>

layouts/partials/head/css.html

@@ -16,3 +16,6 @@
 <!-- Link Swiper's CSS -->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/swiper@11/swiper-bundle.min.css" />
 {{- end }}
+
+<!-- GitHub Reactions CSS -->
+<link rel="stylesheet" href="/css/github-reactions.css">

layouts/partials/head/js.html

@@ -10,3 +10,6 @@
     {{- end }}
   {{- end }}
 {{- end }}
+
+<!-- GitHub Reactions JavaScript -->
+<script src="/js/github-reactions.js"></script>

layouts/posts/single.html

@@ -30,7 +30,7 @@ <h1 class="font-medium text-xl sm:text-2xl leading-none relative mb-6 sm:mb-5">{
                         {{- $joinTitleAndOrganizationWith := " " -}}  
                         {{- if and ($author.title) ($author.organization) }}
                             {{ $joinTitleAndOrganizationWith = ", " }}  
-                        {{ end -}}
+                        {{- end -}}
                         {{- if or ($author.title) ($author.organization) }}
                         <p class="m-0">{{- if $author.title }}{{ $author.title }}{{ end -}}{{$joinTitleAndOrganizationWith}}{{- if $author.organization }}{{ $author.organization }}{{ end -}}</p>
                         {{- end -}}
@@ -48,6 +48,12 @@ <h1 class="font-medium text-xl sm:text-2xl leading-none relative mb-6 sm:mb-5">{
             <main class="w-full min-w-0 max-w-[800px] mx-auto">
                 <div class="content text-sm text-charcoal font-normal sm:text-base">                
                 {{ .Content | safeHTML }}
+
+                <!-- GitHub Reactions -->
+                <div class="mt-8">
+                    {{ partial "github-reactions.html" . }}
+                </div>
+
                     <div class="mt-11 mx-auto w-fit">
                     {{ partial "share-buttons.html" . }}
                     </div>

layouts/shortcodes/github-reactions.html

@@ -0,0 +1,30 @@
+{{/* layouts/shortcodes/github-reactions.html */}}
+{{ $prNumber := .Get "pr" }}
+{{ $postSlug := .Get "slug" | default .Page.File.BaseFileName }}
+
+<div class="github-reactions" data-pr="{{ $prNumber }}" data-slug="{{ $postSlug }}">
+  <div class="reactions-container">
+    <div class="reactions-header">
+      <span class="reactions-label">
+        <svg class="reaction-icon" width="16" height="16" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M8 0C3.58 0 0 3.58 0 8c0 4.42 3.58 8 8 8s8-3.58 8-8c0-4.42-3.58-8-8-8zM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6z"/>
+          <path d="M5 6.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM8 6.5a1.5 1.5 0 1 1 3 0 1.5 1.5 0 0 1-3 0zM5.5 9.5c0 1.38 1.12 2.5 2.5 2.5s2.5-1.12 2.5-2.5"/>
+        </svg>
+        Community reactions
+      </span>
+      <a href="#" class="github-link" target="_blank" rel="noopener">
+        <span>React on GitHub</span>
+        <svg width="12" height="12" viewBox="0 0 16 16" fill="currentColor">
+          <path d="M3.75 2h3.5a.75.75 0 0 1 0 1.5h-3.5a.25.25 0 0 0-.25.25v8.5c0 .138.112.25.25.25h8.5a.25.25 0 0 0 .25-.25v-3.5a.75.75 0 0 1 1.5 0v3.5A1.75 1.75 0 0 1 12.25 14h-8.5A1.75 1.75 0 0 1 2 12.25v-8.5C2 2.784 2.784 2 3.75 2Z"/>
+          <path d="M6.854 10.146a.75.75 0 0 1-1.061 1.061L1.646 7.061a.75.75 0 0 1 0-1.061L5.793 1.854a.75.75 0 1 1 1.061 1.061L3.207 6.5H14a.75.75 0 0 1 0 1.5H3.207l3.647 3.646Z"/>
+        </svg>
+      </a>
+    </div>
+    <div class="reactions-list" id="reactions-{{ $postSlug }}">
+      <div class="loading">
+        <div class="loading-spinner"></div>
+        <span>Loading reactions...</span>
+      </div>
+    </div>
+  </div>
+</div>