aboutsummaryrefslogtreecommitdiffhomepage
path: root/src/components/starlight/Footer.astro
blob: 63470a42c3de842b416094f688ccf26a1f7b51c5 (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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
---
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 SanpiPagination from '../SanpiPagination.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;

// 年度別の賛否一覧はサイドバーに登録していないため、Starlight 標準の
// 前後ページは決まらない。URL から年度を判定し、前年度・次年度を渡す。
const SANPI_YEARS = [
  { key: 'r1d', label: '令和元年度の賛否一覧' },
  { key: 'r2d', label: '令和2年度の賛否一覧' },
  { key: 'r3d', label: '令和3年度の賛否一覧' },
  { key: 'r4d', label: '令和4年度の賛否一覧' },
  { key: 'r5d', label: '令和5年度の賛否一覧' },
  { key: 'r6d', label: '令和6年度の賛否一覧' },
  { key: 'r7d', label: '令和7年度の賛否一覧' },
  { key: 'r8d', label: '令和8年度の賛否一覧' },
];
const sanpiMatch = Astro.url.pathname.match(/^\/sanpi\/(r\d+d)\/?$/);
const sanpiIndex = sanpiMatch
  ? SANPI_YEARS.findIndex((year) => year.key === sanpiMatch[1])
  : -1;
const sanpiPrev =
  sanpiIndex > 0
    ? {
        href: `/sanpi/${SANPI_YEARS[sanpiIndex - 1].key}/`,
        label: SANPI_YEARS[sanpiIndex - 1].label,
      }
    : undefined;
const sanpiNext =
  sanpiIndex >= 0 && sanpiIndex < SANPI_YEARS.length - 1
    ? {
        href: `/sanpi/${SANPI_YEARS[sanpiIndex + 1].key}/`,
        label: SANPI_YEARS[sanpiIndex + 1].label,
      }
    : undefined;
---

<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>
  {
    sanpiIndex >= 0 ? (
      <SanpiPagination prev={sanpiPrev} next={sanpiNext} />
    ) : (
      <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>