From c40643a98487d0dbe4d9b89877fb98249055c31d Mon Sep 17 00:00:00 2001 From: Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> Date: Thu, 25 Jun 2026 13:56:02 +0900 Subject: 全ページにSNS共有ボタンと見出しアンカーリンクを追加 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - SocialShare コンポーネント: X/Facebook/LINE 共有ボタンを 各ページフッターに表示 - Footer コンポーネントを上書きして SocialShare を組み込み - 見出し（h2/h3）にホバーでコピー可能なアンカーリンクを追加 - custom.css にアンカーリンクのスタイルを追加 --- astro.config.mjs | 6 +++ src/components/SocialShare.astro | 77 +++++++++++++++++++++++++++++++++++ src/components/starlight/Footer.astro | 64 +++++++++++++++++++++++++++++ src/styles/custom.css | 22 ++++++++++ 4 files changed, 169 insertions(+) create mode 100644 src/components/SocialShare.astro create mode 100644 src/components/starlight/Footer.astro diff --git a/astro.config.mjs b/astro.config.mjs index 8b38f9c..6f7f212 100644 --- a/astro.config.mjs +++ b/astro.config.mjs @@ -222,6 +222,11 @@ export default defineConfig({ content: "document.addEventListener('DOMContentLoaded', () => { mermaid.initialize({ startOnLoad: false, theme: 'default' }); document.querySelectorAll('pre code.language-mermaid').forEach(el => { const pre = el.parentElement; pre.classList.add('mermaid'); pre.innerHTML = el.textContent; }); mermaid.run(); });", }, + { + tag: "script", + content: + "document.addEventListener('DOMContentLoaded', () => { document.querySelectorAll('.sl-markdown-content h2[id], .sl-markdown-content h3[id]').forEach(h => { const a = document.createElement('a'); a.href = '#' + h.id; a.className = 'heading-anchor'; a.innerHTML = ''; a.title = 'この見出しへのリンクをコピー'; a.addEventListener('click', e => { e.preventDefault(); const url = location.origin + location.pathname + '#' + h.id; navigator.clipboard.writeText(url).then(() => { a.classList.add('copied'); setTimeout(() => a.classList.remove('copied'), 1500); }); }); h.prepend(a); }); });", + }, { tag: "script", content: @@ -231,6 +236,7 @@ export default defineConfig({ components: { PageTitle: "./src/components/starlight/PageTitle.astro", SocialIcons: "./src/components/starlight/SocialIcons.astro", + Footer: "./src/components/starlight/Footer.astro", }, }), ], diff --git a/src/components/SocialShare.astro b/src/components/SocialShare.astro new file mode 100644 index 0000000..a818822 --- /dev/null +++ b/src/components/SocialShare.astro @@ -0,0 +1,77 @@ +--- +export interface Props { + /** Page URL (defaults to current page) */ + url?: string; + /** Page title */ + title?: string; +} + +const { url, title } = Astro.props; +const pageUrl = url ?? Astro.url.href; +const pageTitle = title ?? ""; + +const encodedUrl = encodeURIComponent(pageUrl); +const encodedTitle = encodeURIComponent(pageTitle); + +const SHARE_LINKS = [ + { + label: "X", + href: `https://x.com/intent/tweet?url=${encodedUrl}&text=${encodedTitle}`, + svg: '', + }, + { + label: "Facebook", + href: `https://www.facebook.com/sharer/sharer.php?u=${encodedUrl}`, + svg: '', + }, + { + label: "LINE", + href: `https://social-plugins.line.me/lineit/share?url=${encodedUrl}`, + svg: '', + }, +]; +--- + +
+ Share: + {SHARE_LINKS.map((link) => ( + + + + ))} +
+ + diff --git a/src/components/starlight/Footer.astro b/src/components/starlight/Footer.astro new file mode 100644 index 0000000..7b10569 --- /dev/null +++ b/src/components/starlight/Footer.astro @@ -0,0 +1,64 @@ +--- +import EditLink from 'virtual:starlight/components/EditLink'; +import LastUpdated from 'virtual:starlight/components/LastUpdated'; +import Pagination from 'virtual:starlight/components/Pagination'; +import config from 'virtual:starlight/user-config'; +import { Icon } from '@astrojs/starlight/components'; +import SocialShare from '../SocialShare.astro'; +--- + + + + diff --git a/src/styles/custom.css b/src/styles/custom.css index 67a4c79..f765954 100644 --- a/src/styles/custom.css +++ b/src/styles/custom.css @@ -1048,3 +1048,25 @@ main:has(.home-hero) { font-size: 0.75em; vertical-align: super; } + +/* ── Heading Anchor Links ── */ +.heading-anchor { + opacity: 0; + margin-left: -1.2em; + padding-right: 0.3em; + color: var(--sl-color-gray-3); + text-decoration: none; + transition: opacity 0.2s; + float: left; +} +h2:hover .heading-anchor, +h3:hover .heading-anchor, +.heading-anchor.copied { + opacity: 1; +} +.heading-anchor:hover { + color: var(--sl-color-accent); +} +.heading-anchor.copied { + color: var(--sl-color-green-high, #16a34a); +} -- cgit v1.3.1