whereto-bike 0.0.3 → 0.0.5

package/aws/video-agent/package-lock.json

@@ -137,9 +137,9 @@
       }
     },
     "node_modules/@aws-sdk/client-mediaconvert": {
-      "version": "3.1009.0",
-      "resolved": "https://registry.npmjs.org/@aws-sdk/client-mediaconvert/-/client-mediaconvert-3.1009.0.tgz",
-      "integrity": "sha512-fUb16VXk1OcaLq1DQJ2gfacegFBRryc9F7P2xGaBqlnFSe24UrZ2ElOEZLgMvJD9hHfn7yGCjBylSiftk4e7HA==",
+      "version": "3.1010.0",
+      "resolved": "https://registry.npmjs.org/@aws-sdk/client-mediaconvert/-/client-mediaconvert-3.1010.0.tgz",
+      "integrity": "sha512-GrY3XZUhmmlWn69Plo6epoLBiZpQWtV0IlmyvOXPTLyyp+Vxjdf1w7fZcPjkJeC+OsnjURTAiIqVrasAyEYNFw==",
       "license": "Apache-2.0",
       "dependencies": {
         "@aws-crypto/sha256-browser": "5.2.0",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "whereto-bike",
   "type": "module",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Open-source cycling platform — the CMS for cycling",
   "license": "AGPL-3.0",
   "repository": {
@@ -34,6 +34,7 @@
     "packages/create-bike-blog"
   ],
   "scripts": {
+    "postinstall": "node scripts/patch-astro-renderers.js",
     "dev": "astro dev",
     "build": "tsx scripts/build-map-style.ts && astro build",
     "preview": "astro preview",
@@ -77,7 +78,7 @@
   },
   "devDependencies": {
     "@eslint/js": "^10.0.1",
-    "@playwright/test": "^1.58.2",
+    "@playwright/test": "^1.57.0",
     "@types/better-sqlite3": "^7.6.13",
     "@types/js-yaml": "^4.0.9",
     "@types/mapbox__polyline": "^1.0.5",

package/scripts/patch-astro-renderers.js

@@ -0,0 +1,40 @@
+#!/usr/bin/env node
+// Patches Astro's vite-plugin-renderers to not strip SSR renderers when all
+// routes are injected (origin:"external") rather than file-based (origin:"project").
+//
+// The bug: Astro 6's hasNonPrerenderedProjectRoute() only checks origin:"project"
+// routes. Since this project uses injectRoute() for all routes, Astro thinks there
+// are no SSR pages and strips the Preact renderer — causing NoMatchingRenderer
+// errors on every SSR page (/gate, /register, admin pages).
+//
+// This patch disables the optimization by replacing the condition with `false`.
+// It's safe because the only effect of the optimization is a smaller bundle when
+// renderers aren't needed — and we always need them.
+
+import { readFileSync, writeFileSync } from 'node:fs';
+import { resolve } from 'node:path';
+
+const file = resolve('node_modules/astro/dist/vite-plugin-renderers/index.js');
+const marker = '!hasNonPrerenderedProjectRoute(options.routesList.routes';
+
+let code;
+try {
+  code = readFileSync(file, 'utf8');
+} catch {
+  // astro not installed yet (e.g. during initial npm install)
+  process.exit(0);
+}
+
+if (code.includes('false && ' + marker)) {
+  console.log('[patch-astro-renderers] Already patched.');
+  process.exit(0);
+}
+
+if (!code.includes(marker)) {
+  console.warn('[patch-astro-renderers] Could not find the optimization to patch — Astro may have fixed the bug.');
+  process.exit(0);
+}
+
+const patched = code.replace(marker, 'false && ' + marker);
+writeFileSync(file, patched);
+console.log('[patch-astro-renderers] Patched: disabled renderer stripping for injected routes.');

package/src/components/EditEntryPoint.astro

@@ -0,0 +1,17 @@
+---
+import { getInstanceFeatures } from '../lib/config/instance-features';
+
+interface Props {
+  text: string;
+  href: string;
+}
+
+const { text, href } = Astro.props;
+const features = getInstanceFeatures();
+---
+
+{features.showsContributeLink && (
+  <p class="edit-entry-point">
+    <a href={href}>{text}</a>
+  </p>
+)}

package/src/components/MediaGallery.astro

@@ -0,0 +1,160 @@
+---
+import './PhotoGallery.scss';
+import { imageUrl } from '../lib/media/image-service';
+import { videoPlaybackSources, videoPosterUrl, videoDisplaySize, videoFallbackUrl } from '../lib/media/video-service';
+import ResponsiveImage from './ResponsiveImage.astro';
+import VideoPlayer from './VideoPlayer.tsx';
+import { t } from '../i18n';
+import { paths } from '../lib/paths';
+import { isBlogInstance } from '../lib/config/city-config';
+
+const locale = Astro.currentLocale;
+
+interface MediaItem {
+  type: string;
+  key: string;
+  caption?: string;
+  title?: string;
+  handle?: string;
+  width?: number;
+  height?: number;
+  score?: number;
+  duration?: string;
+}
+
+interface Props {
+  media: MediaItem[];
+  name: string;
+}
+
+const { media, name } = Astro.props;
+const photos = media.filter(m => m.type === 'photo').sort((a, b) => (b.score || 0) - (a.score || 0));
+const videos = media.filter(m => m.type === 'video');
+
+// Rails: Gallery.from_photos only shows photos with score >= 1, no fallback (empty gallery if none qualify).
+// We add a fallback to all photos in case scores haven't been set yet.
+const scored = photos.filter(p => (p.score || 0) >= 1);
+const allPhotos = scored.length > 0 ? scored : photos;
+const VISIBLE_COUNT = 9;
+const hasMore = allPhotos.length > VISIBLE_COUNT;
+
+const hasVideoPages = !isBlogInstance();
+
+function thumbDimensions(photo: MediaItem, targetWidth: number) {
+  if (!photo.width || !photo.height) return {};
+  const scale = targetWidth / photo.width;
+  return { width: targetWidth, height: Math.round(photo.height * scale) };
+}
+---
+
+{allPhotos.length > 0 && (
+  <section class="route-photos">
+    <h2>Photos</h2>
+    <div class="photo-gallery">
+      {allPhotos.map((photo, i) => (
+        <a
+          href={imageUrl(photo.key)}
+          data-pswp-width={photo.width}
+          data-pswp-height={photo.height}
+          data-cropped="true"
+          class={`photo-gallery--image${i >= VISIBLE_COUNT ? ' photo-hidden' : ''}`}
+          target="_blank"
+        >
+          <ResponsiveImage
+            blobKey={photo.key}
+            alt={photo.caption || name}
+            widths={[375, 750, 1170]}
+            width={thumbDimensions(photo, 375).width}
+            height={thumbDimensions(photo, 375).height}
+          />
+          {photo.caption && (
+            <span class="photo-gallery--caption pswp-caption-content">{photo.caption}</span>
+          )}
+        </a>
+      ))}
+    </div>
+    {hasMore && (
+      <button class="action-button" id="show-all-photos">
+        {t('photos.show_all', locale, { count: allPhotos.length })}
+      </button>
+    )}
+  </section>
+)}
+
+{videos.length > 0 && (
+  <section class="route-videos">
+    <h3>{t('videos.title', locale)}</h3>
+    {videos.map(video => {
+      const sources = videoPlaybackSources(video.key);
+      const size = videoDisplaySize(video.width || 640, video.height || 360);
+      return (
+        <div class="route-video">
+          <VideoPlayer
+            client:idle
+            sources={sources}
+            poster={videoPosterUrl(video.key)}
+            fallbackUrl={videoFallbackUrl(video.key)}
+            width={size.width}
+            height={size.height}
+            title={video.title}
+          />
+          {video.title && hasVideoPages && video.handle && (
+            <p><a href={paths.video(video.handle, locale)}>{video.title}</a></p>
+          )}
+          {video.title && !hasVideoPages && (
+            <p class="video-title">{video.title}</p>
+          )}
+        </div>
+      );
+    })}
+  </section>
+)}
+
+{(allPhotos.length > 0) && (
+  <script>
+    import PhotoSwipeLightbox from 'photoswipe/lightbox';
+    import 'photoswipe/style.css';
+    import 'photoswipe-dynamic-caption-plugin/photoswipe-dynamic-caption-plugin.css';
+    import PhotoSwipeDynamicCaption from 'photoswipe-dynamic-caption-plugin';
+    import ObjectPosition from '@vovayatsyuk/photoswipe-object-position';
+
+    const isMobile = window.innerWidth < 768;
+    const lightboxOptions: any = {
+      gallery: '.photo-gallery',
+      children: 'a.photo-gallery--image',
+      pswpModule: () => import('photoswipe'),
+    };
+    if (!isMobile) {
+      lightboxOptions.paddingFn = () => ({ top: 30, bottom: 30, left: 70, right: 70 });
+    }
+
+    const lightbox = new PhotoSwipeLightbox(lightboxOptions);
+    new ObjectPosition(lightbox);
+    new PhotoSwipeDynamicCaption(lightbox, { type: 'auto' });
+    lightbox.init();
+    lightbox.on('beforeOpen', () => {
+      window.BikeApp?.tE?.('gallery open', { props: { page: window.location.pathname } });
+    });
+
+    // Cover photo click opens first gallery image
+    const coverPhoto = document.querySelector('.gallery-cover-photo');
+    const firstPhoto = document.querySelector('.photo-gallery a.photo-gallery--image:first-child');
+    if (coverPhoto && firstPhoto) {
+      coverPhoto.addEventListener('click', () => {
+        window.BikeApp?.tE?.('click cover photo', { props: { page: window.location.pathname } });
+        (firstPhoto as HTMLElement).click();
+      });
+    }
+
+    const showAllBtn = document.getElementById('show-all-photos');
+    if (showAllBtn) {
+      showAllBtn.addEventListener('click', () => {
+        document.querySelectorAll('.photo-hidden').forEach(el => {
+          (el as HTMLElement).classList.remove('photo-hidden');
+        });
+        showAllBtn.style.display = 'none';
+        window.BikeApp?.tE?.('show more photos', { props: { page: window.location.pathname } });
+      });
+    }
+  </script>
+)}

package/src/components/NearbyPlaces.astro

@@ -1,17 +1,21 @@
 ---
+import './NearbyPlaces.scss';
 import type { NearbyPlace } from '../lib/geo/proximity';
 import { categoryEmoji } from '../lib/geo/place-categories';
 import { defaultLocale } from '../lib/i18n/locale-utils';
 import { t } from '../i18n';
+import { getInstanceFeatures } from '../lib/config/instance-features';
 
 interface Props {
   nearby: NearbyPlace[];
   limit?: number;
+  routeSlug?: string;
 }
 
-const { nearby, limit } = Astro.props;
+const { nearby, limit, routeSlug } = Astro.props;
 const locale = Astro.currentLocale;
 const hasMore = limit != null && nearby.length > limit;
+const features = getInstanceFeatures();
 ---
 
 {nearby.length > 0 && (
@@ -45,6 +49,11 @@ const hasMore = limit != null && nearby.length > limit;
         {t('places.show_all', locale, { count: nearby.length })}
       </button>
     )}
+    {features.showsContributeLink && routeSlug && (
+      <p class="nearby-places-add">
+        <a href={`/admin/places/new?near=${routeSlug}`}>{t('places.add_near_route_long', locale)}</a>
+      </p>
+    )}
   </section>
 )}
 

package/src/components/NearbyPlaces.scss

@@ -1,25 +1,73 @@
 @use '../styles/variables' as *;
 @use '../styles/mixins' as *;
 
-// Nearby places
-.nearby-places ul {
-  list-style: none;
-  padding: 0;
+.nearby-places {
+  h2 {
+    font-size: 1.2em;
+    margin-bottom: 0.5em;
+  }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  li {
+    padding: 0.4em 0;
+    display: flex;
+    align-items: baseline;
+    gap: 0.4em;
+    line-height: 1.4;
+  }
 }
-.nearby-places li {
-  padding: 0.3em 0;
-  display: flex;
-  align-items: center;
-  gap: 0.5em;
+
+.place-emoji {
+  flex-shrink: 0;
+  font-size: 1.1em;
 }
+
 .place-name {
   text-decoration: none;
   color: inherit;
+
   &:hover {
     text-decoration: underline;
   }
 }
+
 .place-link {
   font-size: 0.85em;
-  opacity: 0.7;
+  @include muted-text;
+  text-decoration: none;
+  white-space: nowrap;
+
+  &::before {
+    content: '·';
+    margin-right: 0.3em;
+  }
+
+  &:hover {
+    text-decoration: underline;
+  }
+}
+
+.places-hidden {
+  display: none;
+}
+
+.nearby-places-summary {
+  @include muted-text;
+  font-size: 0.9em;
+  margin-top: 0.6em;
+}
+
+.nearby-places-add {
+  @include muted-text;
+  font-size: 0.9em;
+  margin-top: 0.8em;
+
+  a {
+    color: inherit;
+  }
 }

package/src/components/ReactionsWidget.tsx

@@ -1,4 +1,5 @@
 import { useState, useEffect, useCallback, useRef } from 'preact/hooks';
+import TrustReceipt from './TrustReceipt';
 
 interface ReactionButton {
   type: string;
@@ -11,39 +12,21 @@ interface Props {
   contentType: 'route' | 'event';
   contentSlug: string;
   labels: ReactionButton[];
+  bookmarkHint?: string;
+  trustReceiptMessage?: string;
 }
 
 interface ReactionCounts {
   [key: string]: number;
 }
 
-const PENDING_KEY = 'pending_reaction';
-
-function storePendingReaction(contentType: string, contentSlug: string, reactionType: string) {
-  try {
-    localStorage.setItem(PENDING_KEY, JSON.stringify({ contentType, contentSlug, reactionType }));
-  } catch { /* localStorage unavailable */ }
-}
-
-function consumePendingReaction(contentType: string, contentSlug: string): string | null {
-  try {
-    const raw = localStorage.getItem(PENDING_KEY);
-    if (!raw) return null;
-    const pending = JSON.parse(raw);
-    if (pending.contentType === contentType && pending.contentSlug === contentSlug) {
-      localStorage.removeItem(PENDING_KEY);
-      return pending.reactionType;
-    }
-  } catch { /* ignore */ }
-  return null;
-}
-
-export default function ReactionsWidget({ contentType, contentSlug, labels }: Props) {
+export default function ReactionsWidget({ contentType, contentSlug, labels, bookmarkHint, trustReceiptMessage }: Props) {
   const [counts, setCounts] = useState<ReactionCounts>({});
   const [userReactions, setUserReactions] = useState<string[]>([]);
   const [loading, setLoading] = useState(true);
   const [animating, setAnimating] = useState<string | null>(null);
-  const pendingProcessed = useRef(false);
+  const [showReceipt, setShowReceipt] = useState(false);
+  const hasShownReceipt = useRef(false);
 
   const fetchReactions = useCallback(async () => {
     try {
@@ -69,17 +52,42 @@ export default function ReactionsWidget({ contentType, contentSlug, labels }: Pr
     setTimeout(() => setAnimating(null), 600);
   };
 
+  const createSilentGuest = useCallback(async (): Promise<boolean> => {
+    try {
+      const res = await fetch('/api/auth/guest', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+      });
+      return res.ok;
+    } catch {
+      return false;
+    }
+  }, []);
+
   const toggleReaction = useCallback(async (reactionType: string) => {
-    const res = await fetch('/api/reactions', {
+    let res = await fetch('/api/reactions', {
       method: 'POST',
       headers: { 'Content-Type': 'application/json' },
       body: JSON.stringify({ contentType, contentSlug, reactionType }),
     });
 
+    // Silent guest creation on 401
     if (res.status === 401) {
-      storePendingReaction(contentType, contentSlug, reactionType);
-      window.location.href = `/gate?returnTo=${encodeURIComponent(window.location.pathname)}`;
-      return;
+      const created = await createSilentGuest();
+      if (!created) return;
+
+      // Retry the reaction with the new session cookie
+      res = await fetch('/api/reactions', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ contentType, contentSlug, reactionType }),
+      });
+
+      // Show trust receipt on first silent guest creation
+      if (res.ok && !hasShownReceipt.current) {
+        hasShownReceipt.current = true;
+        setShowReceipt(true);
+      }
     }
 
     if (res.ok) {
@@ -99,40 +107,38 @@ export default function ReactionsWidget({ contentType, contentSlug, labels }: Pr
         setUserReactions(prev => prev.filter(r => r !== reactionType));
       }
     }
-  }, [contentType, contentSlug]);
-
-  // After loading, check for a pending reaction (user just returned from gate)
-  useEffect(() => {
-    if (loading || pendingProcessed.current) return;
-    pendingProcessed.current = true;
-    const pending = consumePendingReaction(contentType, contentSlug);
-    if (pending) {
-      toggleReaction(pending);
-    }
-  }, [loading, contentType, contentSlug, toggleReaction]);
+  }, [contentType, contentSlug, createSilentGuest]);
 
   if (loading) return null;
 
   return (
     <div class="reactions-widget">
-      {labels.map(({ type, icon, label, title }) => {
-        const count = counts[type] || 0;
-        const active = userReactions.includes(type);
-        const isAnimating = animating === type;
-        return (
-          <button
-            key={type}
-            type="button"
-            class={`reaction-btn ${active ? 'active' : ''} ${isAnimating ? 'pop' : ''}`}
-            onClick={() => toggleReaction(type)}
-            title={title || label}
-          >
-            <span class={`reaction-icon ${isAnimating ? 'pop' : ''}`}>{icon}</span>
-            <span class="reaction-label">{label}</span>
-            {count > 0 && <span class="reaction-count">{count}</span>}
-          </button>
-        );
-      })}
+      <div class="reactions-buttons">
+        {labels.map(({ type, icon, label, title }) => {
+          const count = counts[type] || 0;
+          const active = userReactions.includes(type);
+          const isAnimating = animating === type;
+          return (
+            <button
+              key={type}
+              type="button"
+              class={`reaction-btn ${active ? 'active' : ''} ${isAnimating ? 'pop' : ''}`}
+              onClick={() => toggleReaction(type)}
+              title={title || label}
+            >
+              <span class={`reaction-icon ${isAnimating ? 'pop' : ''}`}>{icon}</span>
+              <span class="reaction-label">{label}</span>
+              {count > 0 && <span class="reaction-count">{count}</span>}
+            </button>
+          );
+        })}
+      </div>
+      {showReceipt && trustReceiptMessage && (
+        <TrustReceipt message={trustReceiptMessage} />
+      )}
+      {bookmarkHint && (
+        <p class="reaction-hint">{bookmarkHint}</p>
+      )}
     </div>
   );
 }

package/src/components/RideDetailContent.astro

@@ -6,7 +6,7 @@ import { formatDuration } from '@/lib/date-utils';
 import { formatDistance, formatElevation, formatSpeed } from '@/lib/format';
 import { paths, assets } from '@/lib/paths';
 import { countryToFlag } from '@/lib/country-flags';
-import PhotoGallery from '@/components/PhotoGallery.astro';
+import MediaGallery from '@/components/MediaGallery.astro';
 import ContentDetail from '@/components/patterns/ContentDetail.astro';
 import StatBar from '@/components/StatBar.astro';
 import NearbyPlaces from '@/components/NearbyPlaces.astro';
@@ -26,7 +26,6 @@ const { name, distance_km, media, gpxTracks, renderedBody } = route.data;
 const locale = Astro.currentLocale;
 
 const cover = media.find((m: any) => m.cover);
-const photos = media.filter((m: any) => m.type === 'photo').sort((a: any, b: any) => (b.score || 0) - (a.score || 0));
 const hasMap = hasCachedMap(route.id);
 const mapLang = cachedMapLocale(route.id, undefined, locale);
 
@@ -157,9 +156,7 @@ const timeDisplay = route.data.elapsed_time_s && route.data.moving_time_s
   </Fragment>
 
   <Fragment slot="gallery">
-    {photos.length > 0 && (
-      <PhotoGallery photos={photos} routeName={name} />
-    )}
+    <MediaGallery media={media} name={name} />
   </Fragment>
 
   <Fragment slot="after">

package/src/components/TagFilter.astro

@@ -104,18 +104,5 @@ const locale = Astro.currentLocale;
     }
   }
 
-  // Hide welcome message after 3+ visits
-  function setupHomeMessageHider() {
-    const messages = document.querySelectorAll('.welcome-message, .tag-filter--label');
-    if (!messages.length) return;
-    const key = 'welcomeMessageShownV2';
-    let visits = parseInt(localStorage.getItem(key) || '0');
-    if (visits >= 3) {
-      messages.forEach(el => (el as HTMLElement).style.display = 'none');
-    }
-    localStorage.setItem(key, String(visits + 1));
-  }
-
   setupTagFiltering();
-  setupHomeMessageHider();
 </script>

package/src/components/TrustReceipt.tsx

@@ -0,0 +1,22 @@
+import { useState, useEffect } from 'preact/hooks';
+
+interface Props {
+  message: string;
+}
+
+export default function TrustReceipt({ message }: Props) {
+  const [visible, setVisible] = useState(true);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setVisible(false), 4000);
+    return () => clearTimeout(timer);
+  }, []);
+
+  if (!visible) return null;
+
+  return (
+    <span class="trust-receipt" role="status" aria-live="polite">
+      {message}
+    </span>
+  );
+}