@blogmcp/mdx-render-vue 0.4.0 → 0.5.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Lukas Zubal
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/composables/useTripMap.d.ts

@@ -12,7 +12,7 @@
  */
 import { type ComputedRef, type InjectionKey } from 'vue';
 import type { TripMapHandNode, TripMapProps } from '@blogmcp/mdx-schema';
-import { parseTripMapHandNodes, tripMapFormatTime, type TripMapGeoNode, type TripMapGeoResponse, type TripMapUiTexts } from '@blogmcp/mdx-schema/tripmap';
+import { parseTripMapHandNodes, tripMapFormatTime, type TripMapFacadeMedia, type TripMapFacadeStop, type TripMapFacadeThumb, type TripMapUiLabels, type TripMapGeoNode, type TripMapGeoResponse, type TripMapUiTexts } from '@blogmcp/mdx-schema/tripmap';
 export { tripMapFormatTime };
 export { parseTripMapHandNodes as parseHandNodes };
 export type { TripMapGeoNode, TripMapGeoResponse };
@@ -26,17 +26,28 @@ export type { TripMapGeoNode, TripMapGeoResponse };
 export interface MdxArticleContext {
     filename: string;
     language?: string;
+    /**
+     * The article's geotagged media (the GraphQL `contentImagesGeo` rows),
+     * when the host already has them. Lets the SERVER-RENDERED facade carry
+     * real thumbnails with alt text and named stops in AUTO mode — the part of
+     * a TripMap that crawlers and answer engines read. Optional: without it
+     * the live map still fetches everything, only the no-JS view is poorer.
+     */
+    media?: readonly TripMapFacadeMedia[] | null;
 }
 export declare const MDX_ARTICLE_CONTEXT_KEY: InjectionKey<MdxArticleContext | null>;
 export interface UseTripMapResult {
     slugList: ComputedRef<string[]>;
     excludeList: ComputedRef<string[]>;
     handNodes: ComputedRef<TripMapHandNode[]>;
-    /** Deterministic SSR thumbs for explicit-slugs mode (author order). */
-    facadeThumbs: ComputedRef<{
-        slug: string;
-        src: string;
-    }[]>;
+    /**
+     * Deterministic SSR thumbs: author order for explicit `slugs`, capture
+     * order for AUTO mode when the host provided `context.media`. Alt text
+     * comes from that media (empty when unknown).
+     */
+    facadeThumbs: ComputedRef<TripMapFacadeThumb[]>;
+    /** Named stops for the SSR facade: place-labelled photos + hand-made nodes, chronological. */
+    facadeStops: ComputedRef<TripMapFacadeStop[]>;
     heightStyle: ComputedRef<{
         height: string;
     }>;
@@ -50,10 +61,7 @@ export interface UseTripMapResult {
     isConfigOnly: ComputedRef<boolean>;
     /** Always set: slugs / article selection, or the config-only URL. */
     geoUrl: ComputedRef<string>;
-    labels: ComputedRef<{
-        play: string;
-        stop: string;
-    } | undefined>;
+    labels: ComputedRef<TripMapUiLabels | undefined>;
     texts: ComputedRef<TripMapUiTexts>;
 }
 export declare function useTripMap(props: TripMapProps): UseTripMapResult;

package/dist/composables/useTripMap.js

@@ -1,5 +1,5 @@
 import { inject, computed } from "vue";
-import { splitTripMapList, parseTripMapHandNodes, TRIPMAP_DEFAULT_HEIGHT, buildTripMapGeoUrl, tripMapPlaybackLabels, tripMapUiTexts } from "@blogmcp/mdx-schema/tripmap";
+import { splitTripMapList, parseTripMapHandNodes, tripMapFacade, TRIPMAP_DEFAULT_HEIGHT, buildTripMapGeoUrl, tripMapPlaybackLabels, tripMapUiTexts } from "@blogmcp/mdx-schema/tripmap";
 import { parseTripMapHandNodes as parseTripMapHandNodes2, tripMapFormatTime } from "@blogmcp/mdx-schema/tripmap";
 const MDX_ARTICLE_CONTEXT_KEY = /* @__PURE__ */ Symbol.for("blogmcp:mdx-article-context");
 function useTripMap(props) {
@@ -9,12 +9,9 @@ function useTripMap(props) {
   const handNodes = computed(() => parseTripMapHandNodes(props.nodes));
   const isAutoMode = computed(() => slugList.value.length === 0);
   const isConfigOnly = computed(() => slugList.value.length === 0 && !articleContext?.filename);
-  const facadeThumbs = computed(
-    () => slugList.value.map((slug) => ({
-      slug,
-      src: `/api/media/thumb/${encodeURIComponent(slug)}?width=192`
-    }))
-  );
+  const facade = computed(() => tripMapFacade(props, articleContext));
+  const facadeThumbs = computed(() => facade.value.thumbs);
+  const facadeStops = computed(() => facade.value.stops);
   const heightStyle = computed(() => ({ height: props.height || TRIPMAP_DEFAULT_HEIGHT }));
   const geoUrl = computed(() => buildTripMapGeoUrl(props, articleContext));
   const labels = computed(() => tripMapPlaybackLabels(articleContext?.language));
@@ -24,6 +21,7 @@ function useTripMap(props) {
     excludeList,
     handNodes,
     facadeThumbs,
+    facadeStops,
     heightStyle,
     articleContext,
     isAutoMode,

package/dist/edit/TripMapEdit.vue.js

@@ -18,6 +18,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     playback: { type: Boolean },
     cluster: { type: Boolean },
     theme: {},
+    detail: {},
     styleUrl: {},
     center: {},
     zoom: {},

package/dist/render/tripmap/TripMapDefault.vue.d.ts

@@ -5,5 +5,6 @@ declare const _default: import("vue").DefineComponent<TripMapProps, {}, {}, {},
     playback: boolean;
     cluster: boolean;
     theme: "light" | "dark" | "auto";
+    detail: "popup" | "panel";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/render/tripmap/TripMapDefault.vue.js

@@ -3,7 +3,7 @@ import { tripMapStyles } from "@blogmcp/mdx-schema/styles";
 import { useTripMap } from "../../composables/useTripMap.js";
 import { tripMapFormatTime } from "@blogmcp/mdx-schema/tripmap";
 const _hoisted_1 = ["aria-label"];
-const _hoisted_2 = ["src"];
+const _hoisted_2 = ["src", "alt"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "TripMapDefault",
   props: {
@@ -16,6 +16,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     playback: { type: Boolean, default: true },
     cluster: { type: Boolean, default: true },
     theme: { default: "auto" },
+    detail: { default: "popup" },
     styleUrl: {},
     center: {},
     zoom: {},
@@ -23,9 +24,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   },
   setup(__props) {
     const props = __props;
-    const { slugList, handNodes, facadeThumbs, heightStyle, geoUrl, isConfigOnly, labels, texts } = useTripMap(props);
+    const { slugList, handNodes, facadeThumbs, facadeStops, heightStyle, geoUrl, isConfigOnly, labels, texts } = useTripMap(props);
     const rootEl = ref(null);
     const mapEl = ref(null);
+    const detailEl = ref(null);
     const status = ref("facade");
     const skippedCount = ref(0);
     let destroyMap = null;
@@ -54,6 +56,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           capturedAt: n.capturedAt ?? void 0,
           thumbnailUrl: n.thumbnailUrl ?? void 0,
           imageUrl: n.url ?? void 0,
+          largeImageUrl: n.largeUrl ?? void 0,
           altText: n.altText ?? void 0,
           title: n.placeName ?? void 0
         }));
@@ -71,6 +74,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           showLine: props.line,
           showFilmstrip: props.filmstrip,
           showPlayback: props.playback,
+          title: props.title,
+          detail: props.detail,
+          detailHost: props.detail === "panel" ? detailEl.value ?? void 0 : void 0,
           extraAttribution: geo.config?.attribution,
           labels: labels.value,
           initialView: initialViewFromProps(),
@@ -136,7 +142,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             }, [
               createElementVNode("img", {
                 src: thumb.src,
-                alt: "",
+                alt: thumb.alt,
                 width: "80",
                 height: "80",
                 loading: "lazy",
@@ -168,24 +174,30 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ], 2)
           ], 2)) : createCommentVNode("", true)
         ], 6),
-        unref(handNodes).length && status.value !== "live" ? (openBlock(), createElementBlock("ol", {
+        props.detail === "panel" ? (openBlock(), createElementBlock("div", {
           key: 2,
+          ref_key: "detailEl",
+          ref: detailEl,
+          class: normalizeClass(unref(tripMapStyles).detailHost)
+        }, null, 2)) : createCommentVNode("", true),
+        unref(facadeStops).length && status.value !== "live" ? (openBlock(), createElementBlock("ol", {
+          key: 3,
           class: normalizeClass(unref(tripMapStyles).stopList)
         }, [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(handNodes), (node, i) => {
+          (openBlock(true), createElementBlock(Fragment, null, renderList(unref(facadeStops), (stop) => {
             return openBlock(), createElementBlock("li", {
-              key: node.id || i
+              key: stop.key
             }, [
-              node.capturedAt ? (openBlock(), createElementBlock("span", {
+              stop.capturedAt ? (openBlock(), createElementBlock("span", {
                 key: 0,
                 class: normalizeClass(unref(tripMapStyles).stopTime)
-              }, toDisplayString(unref(tripMapFormatTime)(node.capturedAt)), 3)) : createCommentVNode("", true),
-              createElementVNode("span", null, toDisplayString(node.title || `${node.lat}, ${node.lng}`), 1)
+              }, toDisplayString(unref(tripMapFormatTime)(stop.capturedAt)), 3)) : createCommentVNode("", true),
+              createElementVNode("span", null, toDisplayString(stop.title), 1)
             ]);
           }), 128))
         ], 2)) : createCommentVNode("", true),
         status.value !== "live" ? (openBlock(), createElementBlock("p", {
-          key: 3,
+          key: 4,
           class: normalizeClass(unref(tripMapStyles).note)
         }, toDisplayString(unref(texts).unavailable), 3)) : createCommentVNode("", true)
       ], 10, _hoisted_1);

package/dist/useTripMap.d.ts

@@ -1,11 +1,15 @@
 import { ComputedRef } from 'vue';
 import { InjectionKey } from 'vue';
 import { parseTripMapHandNodes as parseHandNodes } from '@blogmcp/mdx-schema/tripmap';
+import { TripMapFacadeMedia } from '@blogmcp/mdx-schema/tripmap';
+import { TripMapFacadeStop } from '@blogmcp/mdx-schema/tripmap';
+import { TripMapFacadeThumb } from '@blogmcp/mdx-schema/tripmap';
 import { tripMapFormatTime } from '@blogmcp/mdx-schema/tripmap';
 import { TripMapGeoNode } from '@blogmcp/mdx-schema/tripmap';
 import { TripMapGeoResponse } from '@blogmcp/mdx-schema/tripmap';
 import { TripMapHandNode } from '@blogmcp/mdx-schema';
 import { TripMapProps } from '@blogmcp/mdx-schema';
+import { TripMapUiLabels } from '@blogmcp/mdx-schema/tripmap';
 import { TripMapUiTexts } from '@blogmcp/mdx-schema/tripmap';
 
 export declare const MDX_ARTICLE_CONTEXT_KEY: InjectionKey<MdxArticleContext | null>;
@@ -20,6 +24,14 @@ export declare const MDX_ARTICLE_CONTEXT_KEY: InjectionKey<MdxArticleContext | n
 export declare interface MdxArticleContext {
     filename: string;
     language?: string;
+    /**
+     * The article's geotagged media (the GraphQL `contentImagesGeo` rows),
+     * when the host already has them. Lets the SERVER-RENDERED facade carry
+     * real thumbnails with alt text and named stops in AUTO mode — the part of
+     * a TripMap that crawlers and answer engines read. Optional: without it
+     * the live map still fetches everything, only the no-JS view is poorer.
+     */
+    media?: readonly TripMapFacadeMedia[] | null;
 }
 
 export { parseHandNodes }
@@ -36,11 +48,14 @@ export declare interface UseTripMapResult {
     slugList: ComputedRef<string[]>;
     excludeList: ComputedRef<string[]>;
     handNodes: ComputedRef<TripMapHandNode[]>;
-    /** Deterministic SSR thumbs for explicit-slugs mode (author order). */
-    facadeThumbs: ComputedRef<{
-        slug: string;
-        src: string;
-    }[]>;
+    /**
+     * Deterministic SSR thumbs: author order for explicit `slugs`, capture
+     * order for AUTO mode when the host provided `context.media`. Alt text
+     * comes from that media (empty when unknown).
+     */
+    facadeThumbs: ComputedRef<TripMapFacadeThumb[]>;
+    /** Named stops for the SSR facade: place-labelled photos + hand-made nodes, chronological. */
+    facadeStops: ComputedRef<TripMapFacadeStop[]>;
     heightStyle: ComputedRef<{
         height: string;
     }>;
@@ -54,10 +69,7 @@ export declare interface UseTripMapResult {
     isConfigOnly: ComputedRef<boolean>;
     /** Always set: slugs / article selection, or the config-only URL. */
     geoUrl: ComputedRef<string>;
-    labels: ComputedRef<{
-        play: string;
-        stop: string;
-    } | undefined>;
+    labels: ComputedRef<TripMapUiLabels | undefined>;
     texts: ComputedRef<TripMapUiTexts>;
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blogmcp/mdx-render-vue",
-  "version": "0.4.0",
+  "version": "0.5.0",
   "description": "Vue renderer for MDX components — edit + render SFCs wired to @blogmcp/mdx-schema",
   "type": "module",
   "publishConfig": {
@@ -98,9 +98,9 @@
     "typecheck": "vue-tsc --noEmit"
   },
   "dependencies": {
-    "@blogmcp/mdx-schema": "^0.4.0",
+    "@blogmcp/mdx-schema": "^0.5.0",
     "@blogmcp/sanitize": "^0.3.0",
-    "@blogmcp/tripmap-core": "^0.1.0",
+    "@blogmcp/tripmap-core": "^0.1.2",
     "@ark-ui/vue": "^5.0.0",
     "@iconify/vue": "^5.0.0"
   },

package/src/composables/useTripMap.ts

@@ -19,7 +19,12 @@ import {
   splitTripMapList,
   TRIPMAP_DEFAULT_HEIGHT,
   tripMapFormatTime,
+  tripMapFacade,
   tripMapPlaybackLabels,
+  type TripMapFacadeMedia,
+  type TripMapFacadeStop,
+  type TripMapFacadeThumb,
+  type TripMapUiLabels,
   tripMapUiTexts,
   type TripMapGeoNode,
   type TripMapGeoResponse,
@@ -42,6 +47,14 @@ export type { TripMapGeoNode, TripMapGeoResponse }
 export interface MdxArticleContext {
   filename: string
   language?: string
+  /**
+   * The article's geotagged media (the GraphQL `contentImagesGeo` rows),
+   * when the host already has them. Lets the SERVER-RENDERED facade carry
+   * real thumbnails with alt text and named stops in AUTO mode — the part of
+   * a TripMap that crawlers and answer engines read. Optional: without it
+   * the live map still fetches everything, only the no-JS view is poorer.
+   */
+  media?: readonly TripMapFacadeMedia[] | null
 }
 
 export const MDX_ARTICLE_CONTEXT_KEY: InjectionKey<MdxArticleContext | null> =
@@ -51,8 +64,14 @@ export interface UseTripMapResult {
   slugList: ComputedRef<string[]>
   excludeList: ComputedRef<string[]>
   handNodes: ComputedRef<TripMapHandNode[]>
-  /** Deterministic SSR thumbs for explicit-slugs mode (author order). */
-  facadeThumbs: ComputedRef<{ slug: string; src: string }[]>
+  /**
+   * Deterministic SSR thumbs: author order for explicit `slugs`, capture
+   * order for AUTO mode when the host provided `context.media`. Alt text
+   * comes from that media (empty when unknown).
+   */
+  facadeThumbs: ComputedRef<TripMapFacadeThumb[]>
+  /** Named stops for the SSR facade: place-labelled photos + hand-made nodes, chronological. */
+  facadeStops: ComputedRef<TripMapFacadeStop[]>
   heightStyle: ComputedRef<{ height: string }>
   articleContext: MdxArticleContext | null
   isAutoMode: ComputedRef<boolean>
@@ -64,7 +83,7 @@ export interface UseTripMapResult {
   isConfigOnly: ComputedRef<boolean>
   /** Always set: slugs / article selection, or the config-only URL. */
   geoUrl: ComputedRef<string>
-  labels: ComputedRef<{ play: string; stop: string } | undefined>
+  labels: ComputedRef<TripMapUiLabels | undefined>
   texts: ComputedRef<TripMapUiTexts>
 }
 
@@ -77,12 +96,9 @@ export function useTripMap(props: TripMapProps): UseTripMapResult {
   const isAutoMode = computed(() => slugList.value.length === 0)
   const isConfigOnly = computed(() => slugList.value.length === 0 && !articleContext?.filename)
 
-  const facadeThumbs = computed(() =>
-    slugList.value.map((slug) => ({
-      slug,
-      src: `/api/media/thumb/${encodeURIComponent(slug)}?width=192`,
-    })),
-  )
+  const facade = computed(() => tripMapFacade(props, articleContext))
+  const facadeThumbs = computed(() => facade.value.thumbs)
+  const facadeStops = computed(() => facade.value.stops)
 
   const heightStyle = computed(() => ({ height: props.height || TRIPMAP_DEFAULT_HEIGHT }))
 
@@ -96,6 +112,7 @@ export function useTripMap(props: TripMapProps): UseTripMapResult {
     excludeList,
     handNodes,
     facadeThumbs,
+    facadeStops,
     heightStyle,
     articleContext,
     isAutoMode,

package/src/render/tripmap/TripMapDefault.vue

@@ -25,13 +25,16 @@ const props = withDefaults(defineProps<TripMapProps>(), {
   playback: true,
   cluster: true,
   theme: 'auto',
+  detail: 'popup',
 })
 
-const { slugList, handNodes, facadeThumbs, heightStyle, geoUrl, isConfigOnly, labels, texts } =
+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)
 
@@ -69,6 +72,7 @@ async function start(): Promise<void> {
         capturedAt: n.capturedAt ?? undefined,
         thumbnailUrl: n.thumbnailUrl ?? undefined,
         imageUrl: n.url ?? undefined,
+        largeImageUrl: n.largeUrl ?? undefined,
         altText: n.altText ?? undefined,
         title: n.placeName ?? undefined,
       }))
@@ -86,6 +90,9 @@ async function start(): Promise<void> {
       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(),
@@ -139,10 +146,14 @@ onBeforeUnmount(() => {
   <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 (explicit-slugs mode); replaced by the live filmstrip. -->
+    <!--
+      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="" width="80" height="80" loading="lazy" decoding="async" :class="tripMapStyles.stripImg" />
+        <img :src="thumb.src" :alt="thumb.alt" width="80" height="80" loading="lazy" decoding="async" :class="tripMapStyles.stripImg" />
       </li>
     </ol>
 
@@ -162,12 +173,14 @@ onBeforeUnmount(() => {
         </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>
 
-    <!-- Waypoint stop list (hand-made nodes) for the static facade. -->
-    <ol v-if="handNodes.length && status !== 'live'" :class="tripMapStyles.stopList">
-      <li v-for="(node, i) in handNodes" :key="node.id || i">
-        <span v-if="node.capturedAt" :class="tripMapStyles.stopTime">{{ tripMapFormatTime(node.capturedAt) }}</span>
-        <span>{{ node.title || `${node.lat}, ${node.lng}` }}</span>
+    <!-- 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>