Add an "add to calendar" button to event pages

_includes/calendar-button.html

@@ -0,0 +1,17 @@
+<add-to-calendar-button
+  name="{{ site.title }}"
+  {% comment %}startDate is required{% endcomment %}
+  startDate="1970-01-01"
+  subscribe
+  icsFile="https://studentrobotics.org/events.ics"
+  iCalFileName="{{ site.title }}"
+  options="'Apple','Google','iCal','Outlook.com','Microsoft 365','Microsoft Teams'"
+  size="{{ include.sizes }}"
+  buttonStyle="text"
+  trigger="click"
+  hideBackground
+  styleLight="--btn-shadow: none; --btn-border: none; --list-border: none; --font: 'Open Sans', Arial, sans-serif; --overlay-cursor: initial; --btn-underline: transparent; --btn-text: {{ include.text_colour }}; --btn-text-hover: {{ include.text_colour }}; --btn-text-shadow: none; --btn-background: transparent"
+  lightMode="light"
+  hideIconButton
+  hideCheckmark
+/>

_includes/script.html

@@ -1,6 +1,8 @@
 <script src="{{ '/js/main.js' | prepend: site.baseurl }}"></script>
 <script src="{{ '/js/localise-times.js' | prepend: site.baseurl }}"></script>
 
+<script src="https://cdn.jsdelivr.net/npm/add-to-calendar-button@2.1.1/dist/atcb.min.js"></script>
+
 {% if site.user_tracking %}
   <script defer data-domain="studentrobotics.org" src="https://plausible.io/js/plausible.js"></script>
 {% endif %}

_layouts/event.html

@@ -1,7 +1,7 @@
 ---
 layout: page
 ---
-<div class="header-card">
+<div class="header-card with-calendar-button">
   <div class="fixed-width">
     <h1>{{ page.title }}</h1>
   </div>
@@ -19,6 +19,10 @@ <h1>{{ page.title }}</h1>
             {% assign date_only_format = '%e %B %Y <small class="muted">(time <abbr title="To be confirmed">TBC</abbr>)</small>' %}
             {% include datetime.html date_only_format=date_only_format datetime_format='%e %B %Y at %l%P' time_only_format = '%l%P' event=page %}
           </li>
+          <li class="with-add-to-calendar-button">
+            <i class="fa-solid fa-calendar" aria-hidden="true"></i>
+            {% include calendar-button.html text_colour="black" sizes="5" %}
+          </li>
           <li><i class="fa-solid fa-fw fa-location-dot" aria-hidden="true"></i> {{ page.location }}</li>
         </ul>
       </div>

_sass/common.scss

@@ -34,6 +34,14 @@
     color: $sr-white;
     margin-bottom: 0;
   }
+
+  &.with-calendar-button .fixed-width {
+    display: flex;
+    justify-content: space-between;
+    overflow: initial;
+    align-items: center;
+
+  }
 }
 
 .top-spacing {

_sass/events.scss

@@ -77,3 +77,10 @@ ul.event-listing {
 .event-date time {
   white-space: nowrap;
 }
+
+.detail-list li.with-add-to-calendar-button {
+  padding-top: 0.25em;
+  padding-bottom: 0.25em;
+  display: flex;
+  align-items: center;
+}

events.html

@@ -3,9 +3,10 @@
 title: Events
 permalink: /events/
 ---
-<div class="header-card">
+<div class="header-card with-calendar-button">
   <div class="fixed-width">
     <h1>Events</h1>
+    {% include calendar-button.html text_colour="white" sizes="6|6|2" %}
   </div>
 </div>
 <div class="main">