Enhancement: Add Hugo / Jekyll Integration — demo page section and CDN usage guide #51
Description
🎯 Direction
SocialShareButton is a lightweight, zero-dependency, framework-agnostic social sharing component. Hugo and Jekyll are the most widely used static site generators for open-source project sites, documentation, and blogs — exactly the type of pages where a social share button adds the most value. No wrapper file is needed; integration is entirely CDN-based and dropped into the site's base layout template.
📹 See the button in action: https://youtu.be/cLJaT-8rEvQ?si=CLipA0Db4WL0EqKM
📁 Files to Create / Modify
ℹ️ No New Wrapper File Needed
Hugo and Jekyll generate static HTML — integration is done via CDN <script> and <link> tags placed in the base layout template. No JavaScript framework wrapper is required.
✅ Existing File: index.html — Add Hugo / Jekyll Integration Section
Add a new section with:
- Section heading:
📄 Hugo / Jekyll Integration - Step 1: Add CDN links to the base layout template
- Step 2: Add the container element and initialization script to the layout or a shortcode/include
Hugo (layouts/_default/baseof.html):
<!-- In <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css">
<!-- Before </body> -->
<script src="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.js"></script>
<div id="share-button"></div>
<script>
new SocialShareButton({
container: '#share-button',
url: window.location.href,
title: document.title,
description: '{{ .Description }}',
theme: 'dark',
buttonText: 'Share'
});
</script>Jekyll (_layouts/default.html):
<!-- In <head> -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.css">
<!-- Before </body> -->
<script src="https://cdn.jsdelivr.net/npm/social-share-button/dist/social-share-button.js"></script>
<div id="share-button"></div>
<script>
new SocialShareButton({
container: '#share-button',
url: window.location.href,
title: document.title,
description: '{{ page.description }}',
theme: 'dark',
buttonText: 'Share'
});
</script>✅ Acceptance Criteria
- No new wrapper file required — integration is HTML/CDN only
-
index.htmlupdated with a Hugo / Jekyll section containing separate code snippets for both generators - Copy-to-clipboard button present on new code blocks in
index.html - README updated to list Hugo and Jekyll as supported integration patterns
⚠️ Planned — Not Final
This issue represents a planned enhancement and is not guaranteed to be implemented. It may be dropped if it does not align with the repository's direction. Before opening a pull request, please discuss with the maintainers in this issue thread.