Add event date and location

components/CopyButton.vue

@@ -0,0 +1,62 @@
+<script setup lang="ts">
+import { useClipboard } from '@vueuse/core'
+
+const props = defineProps<{
+  source: string
+}>()
+
+const { copy, copied, isSupported } = useClipboard({ source: props.source })
+
+// Unconditionally render in SSR, but only render in client if supported
+const shouldRender = import.meta.env.SSR || isSupported.value
+</script>
+
+<template>
+  <button
+    v-if="shouldRender"
+    class="CopyButton"
+    title="Copy"
+    @click="copy(source)"
+  >
+    <!-- Only apply transition when copied goes from true to false -->
+    <transition
+      mode="out-in"
+      :name="copied ? undefined : 'fade'"
+    >
+      <IconPhCheck
+        v-if="copied"
+        class="copied-icon"
+      />
+      <IconPhCopy
+        v-else
+        class="copy-icon"
+      />
+    </transition>
+  </button>
+</template>
+
+<style scoped>
+.CopyButton {
+  vertical-align: text-bottom;
+  margin: 0 0.5em;
+}
+
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.3s ease;
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+
+.copy-icon:hover {
+  cursor: pointer;
+  color: var(--vp-c-brand);
+}
+
+.copied-icon {
+  color: var(--vp-c-green-1);
+}
+</style>

components/LeafletMap.vue

@@ -0,0 +1,64 @@
+<script setup lang="ts">
+import { onMounted, ref } from 'vue'
+import 'leaflet/dist/leaflet.css'
+import { data } from '#loaders/overpass.data'
+
+const { venueGeometry, buildingGeometries } = data
+
+const mapEl = ref()
+
+onMounted(async () => {
+  const Leaflet = await import('leaflet')
+  const map = Leaflet.map(mapEl.value)
+
+  Leaflet.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap 貢獻者</a>',
+  }).addTo(map)
+
+  Leaflet.geoJSON(buildingGeometries, {
+    onEachFeature: (feature, layer) => {
+      const { name, ref } = feature.properties
+      layer.bindTooltip(`${name} (${ref})`)
+    },
+  }).addTo(map)
+
+  const venue = Leaflet.geoJSON(venueGeometry)
+  map.fitBounds(venue.getBounds())
+  map.zoomIn()
+})
+</script>
+
+<template>
+  <div ref="mapEl" />
+</template>
+
+<style>
+/* Create a new stacking context for Leaflet */
+.leaflet-container {
+  isolation: isolate;
+}
+
+.dark {
+  .leaflet-layer {
+    filter: invert(100%) hue-rotate(180deg) contrast(60%);
+  }
+
+  .leaflet-control,
+  .leaflet-control a {
+    color: var(--vp-button-alt-text);
+    background-color: var(--vp-button-alt-bg);
+
+    &.leaflet-disabled {
+      color: var(--vp-c-text-2);
+    }
+
+    &:hover {
+      background-color: var(--vp-button-alt-hover-bg);
+    }
+  }
+
+  .leaflet-container {
+    background-color: transparent;
+  }
+}
+</style>

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>