hp-archive: カレンダーに「今日」ボタンを追加

- 月表示の横に「今日」ボタンを置き、押すと今日の日付を選んでその月に戻る
- ヘッダーの高さが変わらないよう行の高さを固定
- X投稿用のキャプチャ画像を追加

3 files changed, 34 insertions, 1 deletions

diff --git a/drafts/schedule-card-1102.png b/drafts/schedule-card-1102.png
new file mode 100644
index 0000000..2ef42ff
--- /dev/null
+++ b/drafts/schedule-card-1102.png
diff --git a/src/components/ScheduleInteractive.astro b/src/components/ScheduleInteractive.astro
index 6bcbb1c..4e1894b 100644
--- a/src/components/ScheduleInteractive.astro
+++ b/src/components/ScheduleInteractive.astro
@@ -323,7 +323,10 @@
       calendarEl.innerHTML = `
         <div class="schedule-cal-header">
           <button type="button" class="schedule-cal-nav" data-dir="-1" aria-label="前の月" ${index <= 0 ? 'disabled' : ''}>‹</button>
-          <div class="schedule-cal-title">${year}年${month}月</div>
+          <div class="schedule-cal-mid">
+            <div class="schedule-cal-title">${year}年${month}月</div>
+            <button type="button" class="schedule-cal-today" aria-label="今日を選ぶ">今日</button>
+          </div>
           <button type="button" class="schedule-cal-nav" data-dir="1" aria-label="次の月" ${index >= months.length - 1 ? 'disabled' : ''}>›</button>
         </div>
         <div class="schedule-cal-grid">
@@ -348,6 +351,15 @@
         });
       });
 
+      calendarEl.querySelectorAll('.schedule-cal-today').forEach((btn) => {
+        btn.addEventListener('click', () => {
+          selectedDate = todayKey;
+          currentMonth = todayMonth;
+          renderCalendar();
+          showDayDetails(selectedDate);
+        });
+      });
+
       calendarEl.querySelectorAll('.schedule-cal-nav').forEach((btn) => {
         btn.addEventListener('click', () => {
           const next = months.indexOf(currentMonth) + Number(btn.dataset.dir);
diff --git a/src/styles/custom.css b/src/styles/custom.css
index cdaab01..8a27700 100644
--- a/src/styles/custom.css
+++ b/src/styles/custom.css
@@ -2067,6 +2067,27 @@ td.sanpi-open .sanpi-title {
 .schedule-cal-title {
   font-weight: 600;
 }
+.schedule-cal-mid {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  /* ボタンを足してもヘッダーの高さが変わらないよう、行の高さを固定する */
+  height: 2rem;
+}
+/* 高さを増やさないよう、月表示と同じ行に小さく置く */
+.schedule-cal-today {
+  padding: 0 0.5rem;
+  border: 1px solid var(--sl-color-gray-5);
+  border-radius: 999px;
+  background: var(--sl-color-bg);
+  color: var(--sl-color-text);
+  font-size: 0.72rem;
+  line-height: 1.4;
+  cursor: pointer;
+}
+.schedule-cal-today:hover {
+  background: var(--sl-color-gray-6);
+}
 .schedule-cal-nav {
   width: 2rem;
   height: 2rem;