feat: add event date and calendar links

components/VPButton.vue

@@ -0,0 +1,120 @@
+<!-- Ported from https://github.com/vuejs/vitepress/blob/main/src/client/theme-default/components/VPButton.vue -->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  tag?: string
+  size?: 'medium' | 'big'
+  theme?: 'brand' | 'alt' | 'sponsor'
+  href?: string
+}
+const props = withDefaults(defineProps<Props>(), {
+  size: 'medium',
+  theme: 'brand',
+})
+
+const component = computed(() => {
+  return props.tag || props.href ? 'a' : 'button'
+})
+</script>
+
+<template>
+  <component
+    :is="component"
+    class="VPButton"
+    :class="[size, theme]"
+    :href="href"
+  >
+    <slot />
+  </component>
+</template>
+
+<style scoped>
+.VPButton {
+  display: inline-block;
+  border: 1px solid transparent;
+  text-align: center;
+  font-weight: 600;
+  white-space: nowrap;
+  transition:
+    color 0.25s,
+    border-color 0.25s,
+    background-color 0.25s;
+}
+
+.VPButton:active {
+  transition:
+    color 0.1s,
+    border-color 0.1s,
+    background-color 0.1s;
+}
+
+.VPButton.medium {
+  border-radius: 20px;
+  padding: 0 20px;
+  line-height: 38px;
+  font-size: 14px;
+}
+
+.VPButton.big {
+  border-radius: 24px;
+  padding: 0 24px;
+  line-height: 46px;
+  font-size: 16px;
+}
+
+.VPButton.brand {
+  border-color: var(--vp-button-brand-border);
+  color: var(--vp-button-brand-text);
+  background-color: var(--vp-button-brand-bg);
+}
+
+.VPButton.brand:hover {
+  border-color: var(--vp-button-brand-hover-border);
+  color: var(--vp-button-brand-hover-text);
+  background-color: var(--vp-button-brand-hover-bg);
+}
+
+.VPButton.brand:active {
+  border-color: var(--vp-button-brand-active-border);
+  color: var(--vp-button-brand-active-text);
+  background-color: var(--vp-button-brand-active-bg);
+}
+
+.VPButton.alt {
+  border-color: var(--vp-button-alt-border);
+  color: var(--vp-button-alt-text);
+  background-color: var(--vp-button-alt-bg);
+}
+
+.VPButton.alt:hover {
+  border-color: var(--vp-button-alt-hover-border);
+  color: var(--vp-button-alt-hover-text);
+  background-color: var(--vp-button-alt-hover-bg);
+}
+
+.VPButton.alt:active {
+  border-color: var(--vp-button-alt-active-border);
+  color: var(--vp-button-alt-active-text);
+  background-color: var(--vp-button-alt-active-bg);
+}
+
+.VPButton.sponsor {
+  border-color: var(--vp-button-sponsor-border);
+  color: var(--vp-button-sponsor-text);
+  background-color: var(--vp-button-sponsor-bg);
+}
+
+.VPButton.sponsor:hover {
+  border-color: var(--vp-button-sponsor-hover-border);
+  color: var(--vp-button-sponsor-hover-text);
+  background-color: var(--vp-button-sponsor-hover-bg);
+}
+
+.VPButton.sponsor:active {
+  border-color: var(--vp-button-sponsor-active-border);
+  color: var(--vp-button-sponsor-active-text);
+  background-color: var(--vp-button-sponsor-active-bg);
+}
+</style>

content/event.md

@@ -1,9 +1,77 @@
 <script setup lang="ts">
+import { conference } from '#data/conference'
+import type { CalendarEvent } from 'calendar-link';
+
+const start = conference.startDate.toLocaleDateString()
+const end = conference.endDate.toLocaleDateString()
+
 const venueAddress = '106 台北市大安區基隆路四段 43 號'
+
+// Supported calendar types by `calendar-link`
+type CalendarType = keyof typeof import('calendar-link')
+
+// Create an link or an ICS file to add the event to the user's calendar
+async function addToCalendar(type: CalendarType) {
+  const { [type]: getCalendarLink } = await import('calendar-link')
+
+  const event: CalendarEvent = {
+    title: conference.title,
+    description: `<a href="${document.location.origin}">${conference.description}</a>`,
+    start: conference.startDate,
+    end: conference.endDate,
+    allDay: true,
+    location: venueAddress,
+  }
+
+  const link = getCalendarLink(event) as string
+
+  if (type == 'ics') {
+    // Set the ICS file name by creating an anchor element
+    const anchor = document.createElement('a')
+    anchor.href = link
+    anchor.download = `${conference.title}.ics`
+    anchor.click()
+  } else {
+    window.open(link, '_blank')
+  }
+}
 </script>
 
 # 活動資訊
 
+::: info <IconPhCalendarDots /> 日期
+
+## {{ start }} – {{ end }}
+
+<div class="actions">
+  <VPButton
+    theme="alt"
+    @click="addToCalendar('google')"
+  >
+    <IconPhGoogleLogo /> Google 日曆
+  </VPButton>
+  <VPButton
+    theme="alt"
+    @click="addToCalendar('outlookMobile')"
+  >
+    <IconPhMicrosoftOutlookLogo /> Outlook
+  </VPButton>
+  <VPButton
+    theme="alt"
+    @click="addToCalendar('yahoo')"
+  >
+    <IconPhExclamationMark /> Yahoo
+  </VPButton>
+  <VPButton
+    theme="alt"
+    @click="addToCalendar('ics')"
+  >
+    <IconPhCalendarPlus /> ICS
+  </VPButton>
+</div>
+
+:::
+
 ::: info <IconPhMapPin /> 位置
 
 ## 國立臺灣科技大學
@@ -46,6 +114,13 @@ svg {
   }
 
   /* Reset VitePress styles for map buttons */
+  .actions {
+    display: flex;
+    gap: 8px;
+    margin: 8px 0;
+    overflow-x:auto;
+  }
+
   :deep(a:hover) {
     opacity: unset;
   }

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@vueuse/core": "^11.0.3",
+    "calendar-link": "^2.7.0",
     "leaflet": "^1.9.4",
     "osmtogeojson": "3.0.0-beta.5",
     "vue": "^3.4.37"