From: Danilo M. Date: Fri, 17 Apr 2026 14:30:46 +0000 (+0200) Subject: docs: add social sharing widget implementation plan X-Git-Tag: release_22042026-1342~113 X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=cc36b4d5a38f271b4b036075202df2d024e27091;p=danix.xyz-2.git docs: add social sharing widget implementation plan Co-Authored-By: Claude Haiku 4.5 --- diff --git a/docs/superpowers/plans/2026-04-17-social-share-widget.md b/docs/superpowers/plans/2026-04-17-social-share-widget.md new file mode 100644 index 0000000..aa40088 --- /dev/null +++ b/docs/superpowers/plans/2026-04-17-social-share-widget.md @@ -0,0 +1,456 @@ +# Social Sharing Widget Implementation Plan + +> **For agentic workers:** REQUIRED SUB-SKILL: Use superpowers:subagent-driven-development (recommended) or superpowers:executing-plans to implement this plan task-by-task. Steps use checkbox (`- [ ]`) syntax for tracking. + +**Goal:** Add a reusable icon-only social sharing widget (9 targets) to the sidebar and as an inline embed on the repository page. + +**Architecture:** A single partial `social-share.html` accepts a `mode` parameter (`sidebar` or `inline`) that controls grid layout. Sidebar mode uses a 2-column grid; inline mode uses a 5-column centered grid. Alpine.js handles clipboard copy with icon swap feedback. Brand icons are inline SVGs styled to match Feather Icons visually. + +**Tech Stack:** Hugo partials, Alpine.js (already loaded), Feather Icons (already loaded via CDN), Tailwind CSS utility classes, Hugo i18n. + +--- + +## File Map + +| Action | Path | Purpose | +|---|---|---| +| Create | `themes/danix-xyz-hacker/layouts/partials/social-share.html` | The widget partial — all 9 buttons, both modes | +| Modify | `themes/danix-xyz-hacker/layouts/partials/sidebar.html` | Add sidebar call between author and related posts | +| Modify | `themes/danix-xyz-hacker/layouts/repository/list.html` | Add inline call after `.Content`, before cards | +| Modify | `themes/danix-xyz-hacker/i18n/en.yaml` | Add 7 new sharing keys | +| Modify | `themes/danix-xyz-hacker/i18n/it.yaml` | Add 7 new sharing keys (Italian) | +| Modify | `i18n/en.yaml` | Keep in sync with theme i18n | +| Modify | `i18n/it.yaml` | Keep in sync with theme i18n | + +--- + +## Task 1: Add i18n Keys to All Four Translation Files + +**Files:** +- Modify: `themes/danix-xyz-hacker/i18n/en.yaml` +- Modify: `themes/danix-xyz-hacker/i18n/it.yaml` +- Modify: `i18n/en.yaml` +- Modify: `i18n/it.yaml` + +- [ ] **Step 1: Add keys to `themes/danix-xyz-hacker/i18n/en.yaml`** + +The file currently has a `# Sharing` section ending at `facebook: "Facebook"` (line 39). Append these keys immediately after `facebook`: + +```yaml +# Sharing +share: "Share" +shareOn: "Share on" +copyLink: "Copy link" +twitter: "Twitter" +facebook: "Facebook" +reddit: "Reddit" +pinterest: "Pinterest" +whatsapp: "WhatsApp" +telegram: "Telegram" +signal: "Signal" +shareViaEmail: "Share via email" +linkCopied: "Link copied!" +``` + +- [ ] **Step 2: Add keys to `themes/danix-xyz-hacker/i18n/it.yaml`** + +Same section, currently ending at `facebook: "Facebook"` (line 39). Replace that section with: + +```yaml +# Sharing +share: "Condividi" +shareOn: "Condividi su" +copyLink: "Copia link" +twitter: "Twitter" +facebook: "Facebook" +reddit: "Reddit" +pinterest: "Pinterest" +whatsapp: "WhatsApp" +telegram: "Telegram" +signal: "Signal" +shareViaEmail: "Condividi via email" +linkCopied: "Link copiato!" +``` + +- [ ] **Step 3: Add keys to `i18n/en.yaml`** + +This file has a `# Sharing` section. Add the same 7 new keys after `facebook`: + +```yaml +reddit: "Reddit" +pinterest: "Pinterest" +whatsapp: "WhatsApp" +telegram: "Telegram" +signal: "Signal" +shareViaEmail: "Share via email" +linkCopied: "Link copied!" +``` + +- [ ] **Step 4: Add keys to `i18n/it.yaml`** + +Same as above for Italian: + +```yaml +reddit: "Reddit" +pinterest: "Pinterest" +whatsapp: "WhatsApp" +telegram: "Telegram" +signal: "Signal" +shareViaEmail: "Condividi via email" +linkCopied: "Link copiato!" +``` + +- [ ] **Step 5: Verify Hugo builds without i18n warnings** + +```bash +hugo -D 2>&1 | grep -i "i18n\|warn\|error" | head -20 +``` + +Expected: no i18n-related warnings or errors. + +- [ ] **Step 6: Commit** + +```bash +git add themes/danix-xyz-hacker/i18n/en.yaml themes/danix-xyz-hacker/i18n/it.yaml i18n/en.yaml i18n/it.yaml +git commit -m "i18n: add social sharing translation keys (EN + IT)" +``` + +--- + +## Task 2: Create the Social Share Partial + +**Files:** +- Create: `themes/danix-xyz-hacker/layouts/partials/social-share.html` + +- [ ] **Step 1: Create the partial with full content** + +Create `themes/danix-xyz-hacker/layouts/partials/social-share.html` with the following complete content: + +```html +{{ $page := .page }} +{{ $mode := .mode | default "sidebar" }} +{{ $url := $page.Permalink | urlquery }} +{{ $title := $page.Title | urlquery }} + +{{ $gridClass := "grid-cols-2 gap-2" }} +{{ if eq $mode "inline" }} + {{ $gridClass = "grid-cols-5 gap-3 justify-items-center" }} +{{ end }} + +
+

{{ i18n "share" }}

+ +
+``` + +- [ ] **Step 2: Verify Hugo builds cleanly** + +```bash +hugo -D 2>&1 | tail -10 +``` + +Expected: build completes, no errors. Page count unchanged (partial not yet included anywhere). + +- [ ] **Step 3: Commit** + +```bash +git add themes/danix-xyz-hacker/layouts/partials/social-share.html +git commit -m "feat: add social-share partial with 9 targets and two layout modes" +``` + +--- + +## Task 3: Wire into Sidebar + +**Files:** +- Modify: `themes/danix-xyz-hacker/layouts/partials/sidebar.html` + +Current sidebar structure: +- Lines 1–8: Author widget +- Lines 10–42: Related posts widget (articles only) + +- [ ] **Step 1: Insert the partial call after the author widget** + +In `themes/danix-xyz-hacker/layouts/partials/sidebar.html`, insert the call between the closing `` of the author widget (line 8) and the related posts comment (line 10): + +```html +