Allow SFCs in content and migrate event page to SFC

.vitepress/config.ts

@@ -14,7 +14,7 @@ export default defineConfig({
     plugins: [
       Components({
         // Auto import components and icons in Vue and Markdown files
-        dirs: ['../components'],
+        dirs: ['../components', '.'],
         include: [/\.vue($|\?)/, /\.md($|\?)/],
         resolvers: [
           IconsResolver({

content/event/index.md

@@ -0,0 +1,5 @@
+<script setup lang="ts">
+import Page from './index.vue'
+</script>
+
+<Page />

content/event/index.vue

@@ -0,0 +1,155 @@
+<script setup lang="ts">
+import type { CalendarEvent } from 'calendar-link'
+import { conference } from '#data/conference'
+
+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>
+
+<template>
+  <section class="info custom-block">
+    <div class="info-section">
+      <p class="custom-block-title">
+        <IconPhCalendarDots />日期
+      </p>
+      <h2>{{ start }} – {{ end }}</h2>
+      <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>
+    </div>
+  </section>
+
+  <section class="info custom-block">
+    <div class="info-section">
+      <p class="custom-block-title">
+        <IconPhMapPin />位置
+      </p>
+      <h2>國立臺灣科技大學</h2>
+      <p>{{ venueAddress }}<CopyButton :source="venueAddress" /></p>
+      <LeafletMap class="map" />
+      <div class="actions">
+        <VPButton
+          href="https://www.openstreetmap.org/relation/5355856"
+          target="_blank"
+          theme="alt"
+        >
+          <IconPhMagnifyingGlass /> 開放街圖
+        </VPButton>
+        <VPButton
+          href="https://www.google.com/maps/search/?api=1&query=國立臺灣科技大學&query_place_id=ChIJrcDEdiGqQjQRVfQp7kRe25A"
+          target="_blank"
+          theme="alt"
+        >
+          <IconPhGoogleLogo /> Google 地圖
+        </VPButton>
+        <VPButton
+          href="https://maps.apple.com/place?auid=1091116063745527859"
+          target="_blank"
+          theme="alt"
+        >
+          <IconPhAppleLogo /> Apple 地圖
+        </VPButton>
+      </div>
+    </div>
+  </section>
+</template>
+
+<style scoped>
+svg {
+  vertical-align: text-bottom;
+  display: inline-block;
+}
+
+.custom-block {
+  .custom-block-title {
+    font-size: large;
+  }
+
+  h2 {
+    margin: 24px 0 16px;
+    padding: 0;
+    border-top: none;
+
+    .header-anchor {
+      display: none;
+    }
+  }
+
+  /* Reset VitePress styles for map buttons */
+  .actions {
+    display: flex;
+    gap: 8px;
+    margin: 8px 0;
+    overflow-x: auto;
+
+    a {
+      text-decoration: none;
+    }
+  }
+
+  :deep(a:hover) {
+    opacity: unset;
+  }
+}
+
+.map {
+  width: 100%;
+  height: 400px;
+  margin: 16px 0;
+  border-radius: 4px;
+}
+</style>