feat: イベントのリンク対応

Author: takusandayooo

_data/time_table.yml

@@ -29,6 +29,7 @@ events:
     start: "10:10"
     end:   "10:20"
     title: "基調講演 (宮島さん)"
+    link:  "/sessions/keynote1/"
 
   - room:  "大会議室 (セッション)"
     start: "11:00"
@@ -75,6 +76,7 @@ events:
     start: "15:20"
     end:   "15:30"
     title: "招待講演 (小宮山さん)"
+    link:  "/sessions/keynote2/"
 
   - room:  "大会議室 (セッション)"
     start: "16:00"

_pages/time-table.html

@@ -58,13 +58,21 @@ <h2 class="text-4xl text-center mb-8">
                 <td class="ttable__cell ttable__cell--event"
                     rowspan="{{ event.duration }}"
                     style="--span: {{ event.duration }};">
-                  <div class="ttable__event" style="--accent: {{ accent }};">
-                    <div class="ttable__event-time" >{{ event.start }}–{{ event.end }}</div>
-                    <div class="ttable__event-title">{{ event.title }}</div>
-                    {% if event.subtitle %}<div class="ttable__event-subtitle">{{ event.subtitle }}</div>{% endif %}
-                    {% if event.badge %}<span class="ttable__badge">{{ event.badge }}</span>{% endif %}
-                    {% if event.note %}<div class="ttable__event-note">{{ event.note }}</div>{% endif %}
-                  </div>
+                  {% if link_url %}
+                    <a class="ttable__event" href="{{ link_url | relative_url }}" style="--accent: {{ accent }};">
+                  {% else %}
+                    <div class="ttable__event" style="--accent: {{ accent }};">
+                  {% endif %}
+                      <div class="ttable__event-time" >{{ event.start }}–{{ event.end }}</div>
+                      <div class="ttable__event-title">{{ event.title }}</div>
+                      {% if event.subtitle %}<div class="ttable__event-subtitle">{{ event.subtitle }}</div>{% endif %}
+                      {% if event.badge %}<span class="ttable__badge">{{ event.badge }}</span>{% endif %}
+                      {% if event.note %}<div class="ttable__event-note">{{ event.note }}</div>{% endif %}
+                  {% if link_url %}
+                    </a>
+                  {% else %}
+                    </div>
+                  {% endif %}
                 </td>
               {% else %}
                 {% comment %} イベント無し {% endcomment %}

_sass/pages/time-table.scss

@@ -100,7 +100,10 @@
   display: flex;
   flex-direction: column;
   overflow: clip;
+  text-decoration: none;
+  color: inherit;
 }
+.ttable__event[href]{ cursor: pointer; }
 .ttable__event::before{ content:""; position:absolute; inset:0 0 auto 0; height: 6px; background: var(--accent, #c43b3b); }
 .ttable__event-time{ font-weight: 800; font-size: 1.05rem; letter-spacing: .3px; margin: 8px 0 4px; color: #c43b3b; }
 .ttable__event-title{ font-weight: 800; line-height: 1.35; margin-bottom: 4px; color: #121212; }