@blogmcp/mdx-render-vue 0.3.0 → 0.5.0

package/src/render/tripmap/TripMapDefault.vue

@@ -0,0 +1,189 @@
+<script setup lang="ts">
+/**
+ * TripMap Default Render Component
+ *
+ * SSR-safe facade → lazy MapLibre island. The server (and any no-JS
+ * surface, incl. the sanitized article-review embed) sees a static strip
+ * of photo thumbnails + waypoint list + a placeholder box; when the block
+ * scrolls near the viewport we fetch the geo nodes and dynamically import
+ * @blogmcp/tripmap-core (the ONLY path to maplibre-gl — see useTripMap's
+ * module docblock for why this must never become a static import). If the
+ * import or fetch fails, the facade simply stays.
+ */
+
+import { onBeforeUnmount, onMounted, ref } from 'vue'
+import { tripMapStyles } from '@blogmcp/mdx-schema/styles'
+import type { TripMapProps } from '@blogmcp/mdx-schema'
+import { tripMapFormatTime, useTripMap, type TripMapGeoResponse } from '../../composables/useTripMap'
+
+// withDefaults is load-bearing for the boolean props: Vue boolean-casts an
+// ABSENT `filmstrip?: boolean` prop to false, which would silently flip all
+// the default-true toggles off for every author who doesn't spell them out.
+const props = withDefaults(defineProps<TripMapProps>(), {
+  line: true,
+  filmstrip: true,
+  playback: true,
+  cluster: true,
+  theme: 'auto',
+  detail: 'popup',
+})
+
+const { slugList, handNodes, facadeThumbs, facadeStops, heightStyle, geoUrl, isConfigOnly, labels, texts } =
+  useTripMap(props)
+
+const rootEl = ref<HTMLElement | null>(null)
+const mapEl = ref<HTMLElement | null>(null)
+// detail="panel": the engine mounts the photo panel here, below the sized map box.
+const detailEl = ref<HTMLElement | null>(null)
+const status = ref<'facade' | 'loading' | 'live' | 'empty'>('facade')
+const skippedCount = ref(0)
+
+let destroyMap: (() => void) | null = null
+let observer: IntersectionObserver | null = null
+let started = false
+
+async function fetchGeoNodes(): Promise<TripMapGeoResponse> {
+  try {
+    const res = await fetch(geoUrl.value, { headers: { accept: 'application/json' } })
+    if (!res.ok) throw new Error(`media/geo ${res.status}`)
+    return (await res.json()) as TripMapGeoResponse
+  } catch (err) {
+    // Config-only call (hand-made nodes, nothing selected): the map still has
+    // its nodes — run on the core default style rather than staying a facade.
+    // With a selection the nodes ARE the response, so the failure propagates
+    // and the static facade stays (designed degradation).
+    if (isConfigOnly.value) return { nodes: [] }
+    throw err
+  }
+}
+
+async function start(): Promise<void> {
+  if (started) return
+  started = true
+  status.value = 'loading'
+  try {
+    const [core, geo] = await Promise.all([import('@blogmcp/tripmap-core'), fetchGeoNodes()])
+    const mediaNodes = (geo.nodes ?? [])
+      .filter((n) => typeof n.latitude === 'number' && typeof n.longitude === 'number')
+      .map((n) => ({
+        id: n.slug,
+        lat: n.latitude,
+        lng: n.longitude,
+        capturedAt: n.capturedAt ?? undefined,
+        thumbnailUrl: n.thumbnailUrl ?? undefined,
+        imageUrl: n.url ?? undefined,
+        largeImageUrl: n.largeUrl ?? undefined,
+        altText: n.altText ?? undefined,
+        title: n.placeName ?? undefined,
+      }))
+    const nodes = core.buildTripNodes(mediaNodes, handNodes.value)
+    skippedCount.value = geo.skipped ?? 0
+    if (nodes.length === 0 || !mapEl.value) {
+      status.value = 'empty'
+      return
+    }
+    const map = new core.TripMap(mapEl.value, {
+      styleUrl: props.styleUrl || geo.config?.styleUrl || '',
+      darkStyleUrl: geo.config?.darkStyleUrl,
+      theme: props.theme,
+      cluster: props.cluster,
+      showLine: props.line,
+      showFilmstrip: props.filmstrip,
+      showPlayback: props.playback,
+      title: props.title,
+      detail: props.detail,
+      detailHost: props.detail === 'panel' ? (detailEl.value ?? undefined) : undefined,
+      extraAttribution: geo.config?.attribution,
+      labels: labels.value,
+      initialView: initialViewFromProps(),
+      events: {},
+    })
+    map.setNodes(nodes)
+    await map.init()
+    destroyMap = () => map.destroy()
+    status.value = 'live'
+  } catch {
+    // Core unavailable (review-app iframe, offline) or fetch failed —
+    // the static facade stays, which is the designed degradation.
+    status.value = started && status.value === 'loading' ? 'facade' : status.value
+  }
+}
+
+function initialViewFromProps(): { center?: [number, number]; zoom?: number } | undefined {
+  if (!props.center) return undefined
+  const [lat, lng] = props.center.split(',').map((v) => Number.parseFloat(v.trim()))
+  if (!Number.isFinite(lat) || !Number.isFinite(lng)) return undefined
+  return { center: [lng, lat], zoom: props.zoom }
+}
+
+onMounted(() => {
+  const el = rootEl.value
+  if (!el) return
+  if (typeof IntersectionObserver === 'undefined') {
+    void start()
+    return
+  }
+  observer = new IntersectionObserver(
+    (entries) => {
+      if (entries.some((e) => e.isIntersecting)) {
+        observer?.disconnect()
+        observer = null
+        void start()
+      }
+    },
+    { rootMargin: '300px' },
+  )
+  observer.observe(el)
+})
+
+onBeforeUnmount(() => {
+  observer?.disconnect()
+  destroyMap?.()
+})
+</script>
+
+<template>
+  <div ref="rootEl" :class="tripMapStyles.container" data-mdx-component="TripMap" :aria-label="title">
+    <p v-if="title" :class="tripMapStyles.head">{{ title }}</p>
+
+    <!--
+      Facade thumb strip — server-rendered, with alt text when the host
+      provided the article media (crawlers read THIS, never the canvas);
+      replaced by the live filmstrip once the engine mounts.
+    -->
+    <ol v-if="facadeThumbs.length && status !== 'live'" :class="tripMapStyles.strip">
+      <li v-for="thumb in facadeThumbs" :key="thumb.slug" :class="tripMapStyles.stripItem">
+        <img :src="thumb.src" :alt="thumb.alt" width="80" height="80" loading="lazy" decoding="async" :class="tripMapStyles.stripImg" />
+      </li>
+    </ol>
+
+    <!--
+      Sized wrapper: the engine host is a static absolutely-positioned child
+      that Vue never re-patches (reactive bindings on the engine's container
+      would clobber the classes/children the engine adds); the facade box is
+      an overlay that simply unmounts when the map goes live.
+    -->
+    <div :class="tripMapStyles.mapWrap" :style="heightStyle">
+      <div ref="mapEl" class="absolute inset-0"></div>
+      <div v-if="status !== 'live'" :class="[tripMapStyles.mapOverlay]">
+        <div :class="tripMapStyles.mapBox">
+          <span :class="tripMapStyles.mapHint">
+            {{ status === 'empty' ? texts.empty : texts.hint }}
+          </span>
+        </div>
+      </div>
+    </div>
+    <!-- detail="panel": engine-owned photo panel host (static, never re-patched). -->
+    <div v-if="props.detail === 'panel'" ref="detailEl" :class="tripMapStyles.detailHost"></div>
+
+    <!-- Named stops (place-labelled photos + hand-made nodes) for the static facade. -->
+    <ol v-if="facadeStops.length && status !== 'live'" :class="tripMapStyles.stopList">
+      <li v-for="stop in facadeStops" :key="stop.key">
+        <span v-if="stop.capturedAt" :class="tripMapStyles.stopTime">{{ tripMapFormatTime(stop.capturedAt) }}</span>
+        <span>{{ stop.title }}</span>
+      </li>
+    </ol>
+
+    <p v-if="status !== 'live'" :class="tripMapStyles.note">{{ texts.unavailable }}</p>
+  </div>
+</template>

package/src/render/tripmap/index.ts

@@ -0,0 +1,8 @@
+/**
+ * TripMap Render Component Variants
+ */
+
+export { default as TripMapDefault } from './TripMapDefault.vue'
+
+// Default export for convenience
+export { default } from './TripMapDefault.vue'