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

.gitignore

@@ -5,3 +5,4 @@ resources/
 .idea
 .env
 *.code-workspace
+pnpm-lock.yaml

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,52 @@
++++
+title = 'GitHub Reactions Demo - Testing Community Engagement'
+featured_image = "/images/Hiero_v4.png"
+date = 2025-01-15T10:00:00-07:00
+categories = ["Blog", "Demo"]
+duration = "5 min read"
+abstract = "This is a demo post to test the GitHub reactions feature for measuring community engagement with blog posts."
+pr_number = "73"
+[[authors]]
+name = "Hiero Team"
+title = ""
+organization = ""
+link = ""
+image = "/images/profile-hiero.png"
++++
+
+## 🚀 Testing GitHub Reactions Feature
+
+This is a demo blog post to test our new GitHub reactions feature. This feature allows readers to react to blog posts through GitHub PR reactions, helping us measure community engagement.
+
+### How It Works
+
+The GitHub reactions feature:
+
+1. **Displays reactions** from the corresponding GitHub PR
+2. **Shows reaction counts** for different emoji types (👍, ❤️, 🚀, etc.)
+3. **Provides a link** to the GitHub PR for users to add their own reactions
+4. **Auto-discovers PRs** when no specific PR number is provided
+
+### Testing the Feature
+
+This demo post is linked to [PR #73](https://github.com/hiero-ledger/hiero-website/pull/73) which implements the GitHub reactions feature. You should see the reactions from that PR displayed below.
+
+### Features Implemented
+
+- ✅ GitHub API integration
+- ✅ Reaction caching and rate limiting
+- ✅ Auto-discovery of related PRs
+- ✅ Responsive design with Tailwind CSS
+- ✅ Development mode with mock data
+- ✅ Error handling and fallbacks
+- ✅ Accessibility features
+
+### Try It Out
+
+Visit the [GitHub PR #73](https://github.com/hiero-ledger/hiero-website/pull/73) to add your own reactions, and they should appear on this blog post!
+
+---
+
+## 💬 Join the Discussion
+
+We value your feedback on this feature! Visit the [GitHub Pull Request #73](https://github.com/hiero-ledger/hiero-website/pull/73) where this feature was developed to share your thoughts, ask questions, or contribute to the discussion.

content/posts/hiero-graduation-with-further-reading.md

@@ -3,12 +3,13 @@ title          = "Hiero Graduates as the First Project under the Linux Foundatio
 date           = 2025-08-22
 draft          = false
 slug           = "hiero-graduation"
-description    = "Hiero has become the first project to graduate under both LFDT’s umberlla and it's new project lifecycle framework — a milestone that highlights its technical maturity, thriving ecosystem, and cross-community collaboration."
+description    = "Hiero has become the first project to graduate under both LFDT's umberlla and it's new project lifecycle framework — a milestone that highlights its technical maturity, thriving ecosystem, and cross-community collaboration."
 tags           = ["Hiero", "LFDT", "Graduation", "Open Source", "DLT", "Decentralized Trust"]
 categories     = ["Announcements"]
 featured_image = "/images/hiero-graduation.png"
 images         = ["/images/hiero-graduation.png"]
 canonical_url  = "https://hiero.org/blog/hiero-graduation"
+pr_number      = "73"
 +++
 
 ## Hiero Becomes the First Graduated Project under LFDT’s New Project Lifecycle Framework — and the First to Achieve Graduation since LFDT’s Expanded Umbrella.

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,27 @@
+{{ $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="20" height="20" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm5 11H7v-2h10v2zm0-4H7V7h10v2z"/>
+        </svg>
+        Community Reactions
+      </span>
+      <a href="#" class="github-link" target="_blank" rel="noopener" style="display: none;">
+        <span>React on GitHub</span>
+        <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
+          <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
+        </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>