diff options
Diffstat (limited to 'src/components/SocialShare.astro')
| -rw-r--r-- | src/components/SocialShare.astro | 50 |
1 files changed, 38 insertions, 12 deletions
diff --git a/src/components/SocialShare.astro b/src/components/SocialShare.astro index a818822..bb6c04f 100644 --- a/src/components/SocialShare.astro +++ b/src/components/SocialShare.astro @@ -25,53 +25,79 @@ const SHARE_LINKS = [ svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"/></svg>', }, { - label: "LINE", - href: `https://social-plugins.line.me/lineit/share?url=${encodedUrl}`, - svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12h2"/><path d="M6 8v8"/><path d="M10 6v12"/><path d="M14 9.5V20"/><path d="M18 6v12"/><path d="M22 8v8"/></svg>', + label: "URLコピー", + href: "#", + svg: '<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>', }, ]; --- <div class="social-share"> - <span class="social-share-label">Share:</span> + <span class="social-share-label">このページを共有:</span> {SHARE_LINKS.map((link) => ( <a href={link.href} - target="_blank" + target={link.label === "URLコピー" ? undefined : "_blank"} rel="noopener noreferrer" class="social-share-btn" title={`${link.label}で共有`} + data-action={link.label === "URLコピー" ? "copy" : undefined} > <span set:html={link.svg} /> + {link.label} </a> ))} </div> +<script> + document.currentScript?.parentElement?.addEventListener("click", (e) => { + const btn = e.target.closest?.("[data-action='copy']"); + if (btn) { + e.preventDefault(); + navigator.clipboard.writeText(location.href).then(() => { + btn.title = "コピーしました！"; + btn.classList.add("copied"); + setTimeout(() => { + btn.title = "URLコピーで共有"; + btn.classList.remove("copied"); + }, 2000); + }); + } + }); +</script> + <style> @layer starlight.core { .social-share { display: flex; align-items: center; gap: 0.5rem; - margin-top: 2rem; - padding-top: 1rem; - border-top: 1px solid var(--sl-color-gray-5); + margin-bottom: 1rem; } .social-share-label { font-size: 0.85rem; color: var(--sl-color-gray-2); } .social-share-btn { - color: var(--sl-color-gray-2); - padding: 0.35rem; - border-radius: 4px; - transition: color 0.2s, background 0.2s; display: flex; align-items: center; + gap: 0.3rem; + padding: 0.3rem 0.6rem; + border-radius: 6px; + border: 1px solid var(--sl-color-gray-5); + color: var(--sl-color-gray-2); + font-size: 0.8rem; + text-decoration: none; + transition: color 0.2s, background 0.2s, border-color 0.2s; } .social-share-btn:hover { color: var(--sl-color-white); background: var(--sl-color-gray-5); + border-color: var(--sl-color-gray-3); + } + .social-share-btn.copied { + color: var(--sl-color-green-high, #16a34a); + border-color: var(--sl-color-green-high, #16a34a); } } </style> |