diff options
| author | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-06-25 13:56:02 +0900 |
|---|---|---|
| committer | Yasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com> | 2026-06-25 13:56:02 +0900 |
| commit | c40643a98487d0dbe4d9b89877fb98249055c31d (patch) | |
| tree | d77b47696c4b5f639328cc8da8a9af9a240c3a91 /src/components/starlight | |
| parent | fdb543c2ec991906f8bafc752a4a5e24aa07e349 (diff) | |
全ページにSNS共有ボタンと見出しアンカーリンクを追加
- SocialShare コンポーネント: X/Facebook/LINE 共有ボタンを
各ページフッターに表示
- Footer コンポーネントを上書きして SocialShare を組み込み
- 見出し(h2/h3)にホバーでコピー可能なアンカーリンクを追加
- custom.css にアンカーリンクのスタイルを追加
Diffstat (limited to 'src/components/starlight')
| -rw-r--r-- | src/components/starlight/Footer.astro | 64 |
1 files changed, 64 insertions, 0 deletions
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'; +--- + +<footer class="sl-flex"> + <div class="meta sl-flex"> + <EditLink /> + <LastUpdated /> + </div> + <Pagination /> + + <SocialShare /> + + { + config.credits && ( + <a class="kudos sl-flex" href="https://starlight.astro.build"> + <Icon name={'starlight'} /> {Astro.locals.t('builtWithStarlight.label')} + </a> + ) + } +</footer> + +<style> + @layer starlight.core { + footer { + flex-direction: column; + gap: 1.5rem; + } + .meta { + gap: 0.75rem 3rem; + justify-content: space-between; + flex-wrap: wrap; + margin-top: 3rem; + font-size: var(--sl-text-sm); + color: var(--sl-color-gray-3); + } + .meta > :global(p:only-child) { + margin-inline-start: auto; + } + + .kudos { + align-items: center; + gap: 0.5em; + margin: 1.5rem auto; + font-size: var(--sl-text-xs); + text-decoration: none; + color: var(--sl-color-gray-3); + } + .kudos:hover { + color: var(--sl-color-white); + } + } + + @layer starlight.components { + .kudos :global(svg) { + color: var(--sl-color-orange); + } + } +</style> |
