blob: 65a61ce622f93d0a944d08c566785c4d09268b16 (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
|
---
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';
import { shareCaption } from '../../utils/share-caption';
const route = Astro.locals.starlightRoute;
const caption = shareCaption(
route.entry?.slug || route.id || '',
route.entry?.data?.title,
);
/** Date を「令和8年9月22日 11:14」の形にする（ローカル時刻） */
function toJapaneseDateTime(date: Date): string {
const y = date.getFullYear();
const m = date.getMonth() + 1;
const d = date.getDate();
let era = '昭和';
let n = y - 1925;
if (y > 2019 || (y === 2019 && m >= 5)) {
era = '令和';
n = y - 2018;
} else if (y >= 1989) {
era = '平成';
n = y - 1988;
}
const year = n === 1 ? `${era}元年` : `${era}${n}年`;
const hh = String(date.getHours()).padStart(2, '0');
const mm = String(date.getMinutes()).padStart(2, '0');
return `${year}${m}月${d}日 ${hh}:${mm}`;
}
const lastUpdated = route.lastUpdated;
---
<footer class="sl-flex">
<SocialShare title={caption} />
<div class="meta sl-flex">
{
lastUpdated && (
<p>
{Astro.locals.t('page.lastUpdated')}{' '}
<time datetime={lastUpdated.toISOString()}>{toJapaneseDateTime(lastUpdated)}</time>
</p>
)
}
{
route.editUrl && (
<a class="edit-history sl-flex" href={route.editUrl}>
<Icon name="code-branch" />
{Astro.locals.t('page.editLink')}
</a>
)
}
</div>
<Pagination />
{
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 {
flex-direction: column;
align-items: flex-end;
gap: 0.35rem;
margin-top: 3rem;
font-size: var(--sl-text-sm);
color: var(--sl-color-gray-3);
}
.meta > :global(p) {
margin: 0;
}
.edit-history {
align-items: center;
gap: 0.35em;
text-decoration: none;
color: var(--sl-color-gray-3);
}
.edit-history:hover {
color: var(--sl-color-white);
}
.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>
|
