Add an "add to calendar" button to event pages

_includes/calendar-button.html

@@ -0,0 +1,15 @@
+<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="4|4|2"
+  buttonStyle="flat"
+  trigger="click"
+  hideBackground
+  styleLight="--btn-shadow: none; --btn-border: none; --font: 'Open Sans', Arial, sans-serif"
+  lightMode="light"
+/>

_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/[email protected]/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,9 +1,10 @@
 ---
 layout: page
 ---
-<div class="header-card">
+<div class="header-card with-calendar-button">
   <div class="fixed-width">
     <h1>{{ page.title }}</h1>
+    {% include calendar-button.html %}
   </div>
 </div>
 <div class="main">

_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 {

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 %}
   </div>
 </div>
 <div class="main">