FEAT: Subscribe to calendar link

src/_assets/js/main.js

@@ -2,5 +2,5 @@ import Alpine from 'alpinejs';
 import coreNav from './alpine/navigation.js';
 
 window.Alpine = Alpine;
-Alpine.data('coreNav', coreNav)
+Alpine.data('coreNav', coreNav);
 Alpine.start();

src/_includes/blocks/eventList.njk → src/_includes/blocks/cal/eventList.njk

@@ -4,8 +4,14 @@
   {% for event in eventList %}
 
     {% if event.startDate | formatDate('MMMM') !== m %}
-      <h2 class="glbHeading px-4 mt-8 col-span-full">{{ event.startDate | formatDate('MMMM') }}</h2>
-      {% set m = event.startDate | formatDate('MMMM') %}
+      <div class="col-span-full px-4 flex justify-between items-baseline">
+        <h2 class="glbHeading mt-8">
+          {{ event.startDate | formatDate('MMMM') }}
+        </h2>
+
+        {% include 'blocks/cal/subscribe.njk' %}
+        {% set m = event.startDate | formatDate('MMMM') %}
+      </div>
     {% endif %}
 
     {% if event.startDate | formatDate !== d %}

src/_includes/blocks/eventsUpcoming.njk → src/_includes/blocks/cal/eventsUpcoming.njk

@@ -10,7 +10,7 @@
     {% set featuredEvent = events | eventsFuture | eventsFeatured | eventsSort | limit(1) | first %}
     {% if featuredEvent %}
       {% set event = featuredEvent %}
-      {% include 'blocks/simpleEvent.njk' %}
+      {% include 'blocks/cal/simpleEvent.njk' %}
       {% set eventCount = 3 %}
     {% endif %}
 
@@ -20,7 +20,7 @@
       {% if event.title == featuredEvent.title or displayedEvents == eventCount%}
         {# nothing to see here #}
       {% else %}
-        {% include 'blocks/simpleEvent.njk' %}
+        {% include 'blocks/cal/simpleEvent.njk' %}
         {% set displayedEvents = displayedEvents + 1 %}
       {% endif %}
 

src/_includes/blocks/cal/subscribe.njk

@@ -0,0 +1,44 @@
+<div x-data="{ open: false }">
+  <a href="#subscribe" class="text-black no-underline inline-flex gap-1 items-center group" @click.prevent="open = ! open" @keyup.escape="open = ! open">
+    {% svgIcon "icon-calendar", "h-4 w-4 inline-block transition" %}
+    <span class="underline hover:no-underline">Subscribe to the church calendar</span>
+  </a>
+
+  <div id="subscribe" x-show="open" x-transition class="fixed inset-0 z-50 flex items-center justify-center overflow-auto bg-black bg-opacity-90" >
+    <ul class="divide-y" @click.outside="open = ! open">
+      <li class="p-2">
+        <p class="glbHeading text-white py-4">Select your calendar</p>
+      </li>
+      <li class="p-2">
+        <a class="text-white no-underline flex gap-2 items-center group" href="webcal://www.globe.church/calendar/globeCal.ics">
+          {% svgIcon "icon-apple", "h-4 w-4 inline-block transition group-hover:-translate-x-1" %}
+          <span class="underline hover:no-underline">Apple Calendar</span>
+        </a>
+      </li>
+      <li class="p-2">
+        <a class="text-white no-underline flex gap-2 items-center group" href="https://calendar.google.com/calendar/r?cid=webcal://www.globe.church/calendar/globeCal.ics">
+          {% svgIcon "icon-googlecalendar", "h-4 w-4 inline-block transition group-hover:-translate-x-1" %}
+          <span class="underline hover:no-underline">Google Calendar</span>
+        </a>
+      </li>
+      <li class="p-2">
+        <a class="text-white no-underline flex gap-2 items-center group" href="https://outlook.office.com/calendar/0/addfromweb?url=webcal://www.globe.church/calendar/globeCal.ics">
+          {% svgIcon "icon-microsoft365", "h-4 w-4 inline-block transition group-hover:-translate-x-1" %}
+          <span class="underline hover:no-underline">Microsoft365</span>
+        </a>
+      </li>
+      <li class="p-2">
+        <a class="text-white no-underline flex gap-2 items-center group" href="webcal://www.globe.church/calendar/globeCal.ics">
+          {% svgIcon "icon-outlook", "h-4 w-4 inline-block transition group-hover:-translate-x-1" %}
+          <span class="underline hover:no-underline">Outlook</span>
+        </a>
+      </li>
+      <li class="p-2">
+        <a class="text-white no-underline flex gap-2 items-center group" href="https://www.globe.church/calendar/globeCal.ics">
+          {% svgIcon "icon-calendar", "h-4 w-4 inline-block transition group-hover:-translate-x-1" %}
+          <span class="underline hover:no-underline">iCal Feed</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+</div>

src/calendar/event.njk

@@ -76,4 +76,4 @@ eleventyComputed:
 
 </main>
 
-{% include 'blocks/eventsUpcoming.njk' %}
+{% include 'blocks/cal/eventsUpcoming.njk' %}

src/calendar/index.njk

@@ -32,7 +32,7 @@ featuredImage: "./src/_assets/img/core/the-globe-church-people.jpg"
 
         <p class="my-4"><a href="/sundays" class="glbBtn bg-blue hover:bg-white hover:text-orange">Join us this Sunday</a></p>
 
-        <p>
+        <p class="py-2">
           <a href="#thisWeek" class="text-white no-underline inline-flex gap-2 items-center group">
             {% svgIcon "icon-arrowDown", "h-6 w-6 inline-block transition group-hover:translate-y-1" %}
             <span class="underline hover:no-underline">All events</span>
@@ -50,7 +50,7 @@ featuredImage: "./src/_assets/img/core/the-globe-church-people.jpg"
   <div class="mx-auto lg:container mb-4 scroll-mt-4 lg:scroll-mt-12" id="thisWeek">
     {% set eventList = events | eventsFuture | eventsSort %}
     {# <h2 class="glbHeading px-4 mb-4">Events this week</h2> #}
-    {% include 'blocks/eventList.njk' %}
+    {% include 'blocks/cal/eventList.njk' %}
   </div>
 
 
@@ -88,6 +88,6 @@ featuredImage: "./src/_assets/img/core/the-globe-church-people.jpg"
   {# <div class="mx-auto lg:container mb-4 scroll-mt-4" id="futureEvents">
     {% set eventList = events | eventsFuture(8, 'day') | eventsSort %}
     <h2 class="glbHeading px-4 mb-4">Future events</h2>
-    {% include 'blocks/eventList.njk' %}
+    {% include 'blocks/cal/eventList.njk' %}
   </div> #}
 </main>

src/index.njk

@@ -56,7 +56,7 @@ eleventyComputed:
     </div>
   </section>
 
-  {% include 'blocks/eventsUpcoming.njk' %}
+  {% include 'blocks/cal/eventsUpcoming.njk' %}
 
   <div class="mx-auto lg:container mb-4">
   {% include 'blocks/latestSermon.njk' %}