From: Danilo M. Date: Fri, 17 Apr 2026 14:24:43 +0000 (+0200) Subject: docs: add social sharing widget design spec X-Git-Tag: release_22042026-1342~114 X-Git-Url: https://git.danix.xyz/?a=commitdiff_plain;h=acc294e0ef80408d27d2df8c3c392dcc9ba27c6d;p=danix.xyz-2.git docs: add social sharing widget design spec Co-Authored-By: Claude Haiku 4.5 --- diff --git a/docs/superpowers/specs/2026-04-17-social-share-widget-design.md b/docs/superpowers/specs/2026-04-17-social-share-widget-design.md new file mode 100644 index 0000000..0a0ccba --- /dev/null +++ b/docs/superpowers/specs/2026-04-17-social-share-widget-design.md @@ -0,0 +1,199 @@ +# Social Sharing Widget — Design Spec + +**Date:** 2026-04-17 +**Status:** Approved +**Scope:** New partial + integration into sidebar and repository page + +--- + +## Problem + +The site has i18n keys for sharing (`share`, `copyLink`, `twitter`, `facebook`) but no implemented sharing UI. Users have no in-page way to share content on social platforms. + +## Goal + +A reusable, icon-only social sharing widget that: +- Works in the narrow sidebar column (2-col grid) +- Works embedded in full-width pages like the Repository (5-col centered grid) +- Covers 9 share targets: Copy link, Email, Facebook, Twitter/X, Reddit, Pinterest, WhatsApp, Telegram, Signal +- Meets WCAG 2.1 AA accessibility requirements +- Is visually consistent with the existing theme system + +--- + +## Architecture + +### New File +`themes/danix-xyz-hacker/layouts/partials/social-share.html` + +A single partial with a `mode` parameter that controls grid layout: + +```hugo +{{ partial "social-share.html" (dict "page" . "mode" "sidebar") }} +{{ partial "social-share.html" (dict "page" . "mode" "inline") }} +``` + +| Mode | Grid class | Use case | +|---|---|---| +| `sidebar` (default) | `grid-cols-2 gap-2` | Inside `sidebar.html` | +| `inline` | `grid-cols-5 gap-3 justify-items-center` | Full-width pages (repository) | + +### Modified Files +- `layouts/partials/sidebar.html` — add sidebar call after author widget +- `layouts/repository/list.html` — add inline call after `.Content`, before cards +- `themes/.../i18n/en.yaml`, `themes/.../i18n/it.yaml` — add 7 new keys +- `i18n/en.yaml`, `i18n/it.yaml` — keep in sync + +--- + +## Icon Strategy + +Feather Icons (already loaded via CDN) lacks brand icons. Solution: + +| Button | Source | Details | +|---|---|---| +| Copy link | Feather `copy` / `check` | Toggles via Alpine.js | +| Email | Feather `mail` | — | +| Facebook | Inline SVG | Facebook "f" path | +| Twitter/X | Inline SVG | X logo path | +| Reddit | Inline SVG | Reddit alien path | +| Pinterest | Inline SVG | Pinterest "P" path | +| WhatsApp | Inline SVG | WhatsApp logo path | +| Telegram | Inline SVG | Telegram paper-plane path | +| Signal | Inline SVG | Signal logo path | + +All inline SVGs use: `width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"` — matches Feather Icon visual style exactly. `aria-hidden="true" focusable="false"` on every SVG/icon. + +--- + +## Share URL Patterns + +All URLs built server-side in Hugo using `.Permalink` and `.Title | urlquery`. + +| Target | URL | +|---|---| +| Facebook | `https://www.facebook.com/sharer/sharer.php?u={url}` | +| Twitter/X | `https://twitter.com/intent/tweet?url={url}&text={title}` | +| Reddit | `https://www.reddit.com/submit?url={url}&title={title}` | +| Pinterest | `https://pinterest.com/pin/create/button/?url={url}&description={title}` | +| WhatsApp | `https://api.whatsapp.com/send?text={title}%20{url}` | +| Telegram | `https://t.me/share/url?url={url}&text={title}` | +| Signal | `https://signal.me/#p/{url}` | +| Email | `mailto:?subject={title}&body={title}%0A%0A{url}` | + +--- + +## Copy to Clipboard + +Alpine.js local state — no dependency on the toast/modal system: + +```html +
+ +
+``` + +Icon swaps from `copy` → `check` (green, `text-accent2`) for 2 seconds, then resets. Feather replaces both `` elements at page load; Alpine.js toggles visibility via `x-show`. + +--- + +## Accessibility (WCAG 2.1 AA) + +- `