aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/starlight
diff options
context:
space:
mode:
authorYasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>2026-06-25 13:56:02 +0900
committerYasutake Yohei <61961825+yasutakeyohei@users.noreply.github.com>2026-06-25 13:56:02 +0900
commitc40643a98487d0dbe4d9b89877fb98249055c31d (patch)
treed77b47696c4b5f639328cc8da8a9af9a240c3a91 /src/components/starlight
parentfdb543c2ec991906f8bafc752a4a5e24aa07e349 (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.astro64
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>