Merge pull request #127 from ajogseneca/issue118

Added fix for issue #118
computerclubkec · Oct 31, 2024 · 4b9652c · 4b9652c
2 parents 28b0504 + e00eeda
commit 4b9652c
Show file tree

Hide file tree

Showing 5 changed files with 75 additions and 19 deletions.
diff --git a/_includes/add-to-calendar-button.html b/_includes/add-to-calendar-button.html
@@ -0,0 +1,21 @@
+<a href="data:text/calendar;charset=utf8,BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:-//YourSite//EventCalendar//EN
+CALSCALE:GREGORIAN
+BEGIN:VEVENT
+UID:{{ uid }}
+DTSTART:{{ start_date }}
+{% if end_date %}
+DTEND:{{ end_date }}
+{% endif %}
+SUMMARY:{{ title }}
+DESCRIPTION:{{ description }}
+LOCATION:{{ location }}
+URL:{{ url }}
+END:VEVENT
+END:VCALENDAR" download="{{ title | slugify }}.ics">
+  <button
+    class="inline-block border-2 border-orange-500 text-orange-500 font-semibold px-1.5 py-1.5 rounded-lg hover:bg-orange-500 hover:text-white transition-colors duration-300">
+    Add to Calendar
+  </button>
+</a>
diff --git a/_includes/upcoming-events.html b/_includes/upcoming-events.html
@@ -71,7 +71,9 @@ <h3 class="font-montserrat md:text-2xl text-base font-bold">{{ event.title }}</h
               {{ event.participants }}
             </p>
 
-            <!-- Register Button -->
+            <!-- Button Container -->
+          <div class="flex flex-col lg:flex-row items-center lg:space-x-4 space-y-2 lg:space-y-0 mt-2 relative z-20">
+            <!-- Register Now Button -->
             <a href="{{ event.registration_link }}">
               <div class="relative inset-0">
                 <button
@@ -81,10 +83,22 @@ <h3 class="font-montserrat md:text-2xl text-base font-bold">{{ event.title }}</h
                 </button>
               </div>
             </a>
+
+            <!-- Calendar Button Component -->
+            {% assign uid = event.url %}
+            {% assign start_date = event.date | date: '%Y%m%dT%H%M%S' %}
+            {% assign end_date = event.end_date | date: '%Y%m%dT%H%M%S' %}
+            {% assign title = event.title %}
+            {% assign description = event.description %}
+            {% assign location = event.location %}
+
+            {% include add-to-calendar-button.html uid=uid start_date=start_date end_date=end_date title=title description=description location=location  %}
+
+          </div>
           </div>
         </div>
       </div>
       {% endfor %}
     </div>
   </div>
-</div>
+</div>
diff --git a/_layouts/event.html b/_layouts/event.html
@@ -6,6 +6,7 @@
 
   <body>
     {% include nav.html %}
+
     {% if page.custom_layout == false %}
     <div
       class="event-hero flex flex-col items-center justify-center px-4 sm:px-6 md:px-8 lg:px-0 max-w-[900px] mx-auto"
@@ -15,7 +16,7 @@
       >
         {{ page.title }}
       </div>
-
+      
       <div
         class="font-inter title text-20px lg:text-xl md:text-xl sm:text-[20px] text-gray-500"
       >
@@ -35,10 +36,20 @@
           <button
             class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-inter font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300"
           >
+
             Register Now
           </button>
-        </div>
+
       </a>
+      {% assign uid = page.url %}
+        {% assign start_date = page.date | date: '%Y%m%dT%H%M%S' %}
+        {% assign end_date = page.end_date | date: '%Y%m%dT%H%M%S' %}
+        {% assign title = page.title %}
+        {% assign description = page.description %}
+        {% assign location = page.location %}
+
+        {% include add-to-calendar-button.html uid=uid start_date=start_date end_date=end_date title=title description=description location=location  %}
+      </div>
       {% else %}
       <div class="pb-10"></div>
       {% endif %}
@@ -51,10 +62,12 @@
       <div class="font-inter container py-2 items-center">
         {{content}}
       </div>
+
     </div>
     {% else %}
-      {{content}}
+      {{ content }}
     {% endif %}
+
     {% include footer.html %}
   </body>
 </html>
diff --git a/_layouts/home.html b/_layouts/home.html
@@ -139,4 +139,4 @@
 
     <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
   </body>
-</html>
+</html>
diff --git a/upcoming-events.markdown b/upcoming-events.markdown
@@ -2,7 +2,6 @@
 layout: default
 title: Upcoming Events
 permalink: /events/upcoming
-
 ---
 
 <div class="container pb-10 px-2 md:mx-auto" data-aos="fade-up">
@@ -22,14 +21,14 @@ permalink: /events/upcoming
   {% elsif event_count == 2 %}
     <div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-8">
   {% else %}
-    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8 items-start"> <!-- Added items-start -->
+    <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 md:gap-8 items-start">
   {% endif %}
 
   {% for event in upcoming_events %}
     <div
       class="event-card relative bg-[{{site.bg-colors.darkBlue}}] p-6 rounded-2xl shadow-lg transition duration-300 hover:shadow-xl hover:scale-[1.02] cursor-pointer"
     >
-    <a href="{{ event.url }}" class="absolute inset-0 block"></a>
+      <a href="{{ event.url }}" class="absolute inset-0 block"></a>
       <!-- Event Image on Top -->
       <div class="w-full flex justify-center">
         <img loading="lazy"
@@ -59,16 +58,25 @@ permalink: /events/upcoming
           <button class="text-blue-400 read-less hidden relative z-10">Show Less</button>
         </p>
 
-        <!-- Register Button -->
-        <a href="{{ event.registration_link }}">
-              <div class="relative inset-0">
-                <button
-                  class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-inter font-semibold px-4 py-2 rounded-lg mt-2 hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300"
-                >
-                  Register Now
-                </button>
-              </div>
-            </a>
+         <!-- Button Container -->
+        <div class="flex flex-col lg:flex-row items-center lg:space-x-4 space-y-2 lg:space-y-0 mt-2 relative z-20">
+          <!-- Register Now Button -->
+          <a href="{{ event.registration_link }}">
+            <button class="inline-block bg-[{{site.bg-colors.orange-button}}] text-white font-inter font-semibold px-4 py-2 rounded-lg hover:bg-[{{site.bg-colors.orange-button}}]/80 transition-colors duration-300">
+              Register Now
+            </button>
+          </a>
+
+          <!-- Calendar Button Component -->
+          {% assign uid = event.url %}
+          {% assign start_date = event.date | date: '%Y%m%dT%H%M%S' %}
+          {% assign end_date = event.end_date | date: '%Y%m%dT%H%M%S' %}
+          {% assign title = event.title %}
+          {% assign description = event.description %}
+          {% assign location = event.location %}
+          
+          {% include add-to-calendar-button.html uid=uid start_date=start_date end_date=end_date title=title description=description location=location %}
+        </div>
       </div>
     </div>
   {% endfor %}
-Original file line number
+Diff line change
@@ Expand Up / @@ -139,4 +139,4 @@ @@
         <script src="{{ '/assets/js/main.js' | relative_url }}"></script>
       </body>
-    </html>
+    </html>