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,92 @@
++++
+title = 'GitHub Reactions Demo - Community Engagement Feature'
+featured_image = "/images/Hiero_v4.png"
+date = 2024-12-29T12:00:00-07:00
+categories = ["Blog"]
+duration = "2 min read"
+abstract = "This post demonstrates the new GitHub reactions feature that allows community members to react to blog posts and see engagement metrics."
+pr_number = "456"
+[[authors]]
+name = "Hiero Team"
+title = "Development Team"
+organization = "Hiero"
+link = ""
+image = "/images/profile-hiero.png"
++++
+
+## 🎉 Introducing GitHub Reactions for Blog Posts
+
+We're excited to announce a new feature that enhances community engagement on our blog posts! The GitHub reactions system allows community members to react to blog posts using the same reaction system they're familiar with from GitHub.
+
+## ✨ How It Works
+
+This feature automatically fetches reactions from GitHub Pull Requests 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.
+
+### Key Features
+
+- **Real-time Reactions**: See current reaction counts from GitHub
+- **Automatic PR Discovery**: If no PR number is specified, the system automatically searches for PRs that modified the blog post
+- **Smart Caching**: Implements intelligent caching to respect GitHub API rate limits
+- **Responsive Design**: Works perfectly on all device sizes
+
+## 🚀 Supported Reaction Types
+
+The system supports all standard GitHub reactions:
+- 👍 thumbs up
+- 👎 thumbs down
+- 😄 laugh
+- 🎉 hooray
+- 😕 confused
+- ❤️ heart
+- 🚀 rocket
+- 👀 eyes
+
+## 📱 Try It Out
+
+Below this post, you'll see the GitHub reactions component in action. It will automatically load reactions from PR #456 (this demo post's PR number).
+
+The component shows:
+- A loading state while fetching reactions
+- Real-time reaction counts from GitHub
+- A link to the GitHub PR for adding reactions
+- Graceful fallbacks if no reactions are found
+
+## 🔧 Technical Implementation
+
+This feature is built using:
+- **Frontend**: HTML, CSS, and JavaScript
+- **Backend**: GitHub REST API
+- **Caching**: Intelligent caching with 30-minute TTL
+- **Fallbacks**: Automatic PR discovery and error handling
+
+## 🌟 Benefits
+
+- **Community Engagement**: Measure what resonates with readers
+- **No Backend Required**: Leverages existing GitHub infrastructure
+- **Real-time Data**: Always up-to-date reaction counts
+- **User Experience**: Familiar interface for GitHub users
+
+## 📖 Usage
+
+To enable reactions on your blog post, simply add a `pr_number` field to the frontmatter:
+
+```yaml
++++
+title = 'Your Post Title'
+pr_number = "123"  # GitHub PR number
++++
+```
+
+If no PR number is specified, the system will automatically search for PRs that modified your blog post file.
+
+## 🎯 What's Next
+
+This is just the beginning! Future enhancements could include:
+- GitHub token support for higher rate limits
+- Real-time updates via GitHub webhooks
+- Analytics integration
+- Custom reaction types
+
+---
+
+*Try reacting to this post on GitHub and see your reaction appear here in real-time!*

content/posts/tsc-voting-process.md

@@ -1,10 +1,11 @@
 +++
 title = 'TSC Voting Process'
 featured_image = "/images/tsc-voting-process-post/TSCVotingProcessBanner_V1.jpg"
-date = 2025-04-29T10:12:50-07:00
+date = 2024-12-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."
+pr_number = "123"
 [[authors]]
 name = "Hiero Team"
 title = ""

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" 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>