Merge branch 'main' into on-the-fly

Author: HarelM

.github/workflows/build-publish.yml

@@ -5,7 +5,8 @@ name: Build and Publish
 # 2. android - Builds the Android app and uploads it to Google Play (if requested)
 # 3. docker - Builds the Docker image and pushes it to GitHub Container Registry
 # 4. ios - Builds the iOS app and uploads it to App Store (if requested)
-# 5. github-release - Tags the commit and creates a Github release with the apps' binaries (if requested)
+# 5. tag - Tags the built commit with the version string
+# 6. github-release - Creates a Github release with the apps' binaries (if requested)
 
 on:
   workflow_dispatch:
@@ -52,9 +53,21 @@ jobs:
           PATCH: ${{ github.run_number }}
         run: |
           version_string=$MAJOR.$MINOR.$(($PATCH % 1000))
-          echo "version_code=$(($MAJOR * 100000 + $MINOR * 1000 + $PATCH % 1000))" >> $GITHUB_OUTPUT
+          version_code=$(($MAJOR * 100000 + $MINOR * 1000 + $PATCH % 1000))
+          echo "version_code=$version_code" >> $GITHUB_OUTPUT
           echo "version_string=$version_string" >> $GITHUB_OUTPUT
-          echo "Version: $version_string" >> $GITHUB_STEP_SUMMARY
+          commit_url="$GITHUB_SERVER_URL/$GITHUB_REPOSITORY/commit/$GITHUB_SHA"
+          {
+            echo "### Build and Publish $version_string"
+            echo ""
+            echo "| | |"
+            echo "| --- | --- |"
+            echo "| Version | \`$version_string\` |"
+            echo "| Version code | \`$version_code\` |"
+            echo "| Commit | [\`$(git rev-parse --short HEAD)\`]($commit_url) - $(git log -1 --pretty=%s) |"
+            echo "| Ref | \`$GITHUB_REF_NAME\` |"
+            echo "| Docker image | \`ghcr.io/israelhikingmap/website-mapeak:$version_string\` |"
+          } >> $GITHUB_STEP_SUMMARY
       - name: Get all milestones
         id: get_milestones
         uses: octokit/request-action@v3.0.0
@@ -233,17 +246,32 @@ jobs:
         env:
           APPSTORE_CONNECT_API_KEY: ${{ secrets.APPSTORE_CONNECT_API_KEY }}
 
-  github-release:
-    if: ${{ github.event.inputs.production == 'true' }}
+  tag:
+    if: ${{ github.ref == 'refs/heads/main' }}
     runs-on: ubuntu-latest
     needs: [version, ios, android]
+    permissions:
+      contents: write
     steps:
       - name: Checkout code
         uses: actions/checkout@v7.0.1
       - name: Tag commit and push
+        env:
+          VERSION: ${{ needs.version.outputs.version_string }}
         run: |
-          git tag "v${{ needs.version.outputs.version_string }}"
-          git push origin "v${{ needs.version.outputs.version_string }}"
+          git tag "v$VERSION"
+          git push origin "v$VERSION"
+          tag_url="$GITHUB_SERVER_URL/$GITHUB_REPOSITORY/tree/v$VERSION"
+          commit_url="$GITHUB_SERVER_URL/$GITHUB_REPOSITORY/commit/$GITHUB_SHA"
+          echo "Tagged [\`v$VERSION\`]($tag_url) at [\`$(git rev-parse --short HEAD)\`]($commit_url)" >> $GITHUB_STEP_SUMMARY
+
+  github-release:
+    if: ${{ github.event.inputs.production == 'true' && github.ref == 'refs/heads/main' }}
+    runs-on: ubuntu-latest
+    needs: [version, ios, android, tag]
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v7.0.1
       - name: Download artifacts
         uses: actions/download-artifact@v8
         with:

IsraelHiking.Web/Program.cs

@@ -4,6 +4,7 @@
 using System.Net.Http;
 using System.Reflection;
 using System.Text.Json.Serialization;
+using System.Text.RegularExpressions;
 using System.Threading.Tasks;
 using IsraelHiking.API;
 using IsraelHiking.API.Services;
@@ -56,7 +57,8 @@ void SetupApplication(WebApplication app)
         ContentTypeProvider = new FileExtensionContentTypeProvider
         {
             Mappings = { { ".pbf", "application/x-protobuf" } } // for the fonts files
-        }
+        },
+        OnPrepareResponse = SetStaticFileCacheHeaders
     });
     app.MapOpenApi();
     app.MapScalarApiReference("/openapi", options => options.AddPreferredSecuritySchemes("Bearer"));
@@ -143,6 +145,26 @@ void SetupServices(IServiceCollection services, bool isDevelopment)
     });
 }
 
+/// <summary>
+/// Files built by the angular CLI carry a content hash in their name, so they can be cached forever.
+/// Everything else keeps its name across deployments and is only cached for a day.
+/// HTML is never cached since it points at the hashed file names.
+/// </summary>
+void SetStaticFileCacheHeaders(StaticFileResponseContext context)
+{
+    var path = context.Context.Request.Path.Value ?? string.Empty;
+    if (path.EndsWith(".html", StringComparison.OrdinalIgnoreCase))
+    {
+        context.Context.Response.Headers.CacheControl = "no-cache";
+        return;
+    }
+    var isHashed = path.StartsWith("/media/", StringComparison.OrdinalIgnoreCase) ||
+                   Regex.IsMatch(path, @"-[A-Z0-9]{8}\.(js|mjs|css)$", RegexOptions.IgnoreCase);
+    context.Context.Response.Headers.CacheControl = isHashed
+        ? "public, max-age=31536000, immutable"
+        : "public, max-age=86400";
+}
+
 void InitializeServices(IServiceProvider serviceProvider)
 {
     var logger = serviceProvider.GetRequiredService<ILogger>();

IsraelHiking.Web/package-lock.json

@@ -55,7 +55,6 @@
     "dexie": "^4.4.4",
     "fflate": "^0.8.3",
     "file-saver-es": "^2.0.5",
-    "font-awesome": "^4.7.0",
     "geojson-path-finder": "^2.1.0",
     "immer": "^11.1.15",
     "intl": "^1.2.5",
@@ -146,4 +145,4 @@
   },
   "type": "module",
   "version": "9.21.0"
-}
+}

IsraelHiking.Web/package.json

@@ -1,5 +1,15 @@
-import { Route } from "@angular/router";
+import { inject } from "@angular/core";
+import { ResolveFn, Route } from "@angular/router";
 import { environment } from "../environments/environment";
+import { MapService } from "./services/map.service";
+
+/**
+ * Maplibre, its workers and the protocols used by the map styles are only loaded for routes that
+ * actually show a map, so that content-only screens (landing, faq, etc.) do not download them.
+ * The router waits for this resolver before activating the component, so maplibre is always ready
+ * before a style starts loading.
+ */
+const initializeMapResolver: ResolveFn<void> = () => inject(MapService).initialize();
 
 export const routes: Route[] = [
     { path: "", redirectTo: environment.isCapacitor ? "/map" : "/about", pathMatch: "full", title: "Mapeak" },
@@ -21,12 +31,14 @@ export const routes: Route[] = [
     {
         path: "offline-management",
         loadComponent: () => import("./components/screens/offline-management.component").then(m => m.OfflineManagementComponent),
-        title: "Mapeak - Offline Management"
+        title: "Mapeak - Offline Management",
+        resolve: { map: initializeMapResolver }
     },
     {
         path: "public-routes",
         loadComponent: () => import("./components/screens/public-routes.component").then(m => m.PublicRoutesComponent),
-        title: "Mapeak - Public Routes"
+        title: "Mapeak - Public Routes",
+        resolve: { map: initializeMapResolver }
     },
     {
         path: "privacy-policy",
@@ -36,16 +48,19 @@ export const routes: Route[] = [
     {
         path: "shares",
         loadComponent: () => import("./components/screens/shares.component").then(m => m.SharesComponent),
-        title: "Mapeak - Cloud Saves"
+        title: "Mapeak - Cloud Saves",
+        resolve: { map: initializeMapResolver }
     },
     {
         path: "traces",
         loadComponent: () => import("./components/screens/traces.component").then(m => m.TracesComponent),
-        title: "Mapeak - Traces"
+        title: "Mapeak - Traces",
+        resolve: { map: initializeMapResolver }
     },
     {
         path: "**",
         loadComponent: () => import("./components/map/main-map.component").then(m => m.MainMapComponent),
-        title: "Mapeak"
+        title: "Mapeak",
+        resolve: { map: initializeMapResolver }
     }
 ];

IsraelHiking.Web/src/application/app.routes.ts

@@ -10,15 +10,18 @@
   <span class="mx-1">{{resources.findRoutes}}</span>
 </button>
 }
-@if (!isIFrame() && !isLoggedIn()) {
+@if (isUserKnown() && !isIFrame() && !isLoggedIn()) {
 <button mat-raised-button (click)="login()">{{resources.signIn}}</button>
 }
 <button mat-button [matMenuTriggerFor]="appMenu" analyticsOn="click" analyticsCategory="Menu"
   analyticsLabel="Toggle main menu" class="!h-[56px] text-white!">
   <span class="flex flex-row justify-center items-center">
-    @if (isLoggedIn()) {
+    @if (!isUserKnown()) {
+    <!-- Holds the avatar's place until we know who the user is, so the toolbar does not jump -->
+    <span class="max-h-[48px] w-[48px] me-4"></span>
+    } @else if (isLoggedIn()) {
     @if (userInfo()?.imageUrl) {
-    <img [src]="userInfo()?.imageUrl" alt="" class="max-h-[48px] me-4 rounded-full" />
+    <img [src]="userInfo()?.imageUrl" alt="" class="max-h-[48px] w-[48px] me-4 rounded-full" />
     } @else {
     <i class="fa icon-user-circle fa-lg me-4"></i>
     }

IsraelHiking.Web/src/application/components/main-menu.component.html

@@ -1,4 +1,4 @@
-import { Component, inject, computed } from "@angular/core";
+import { Component, inject, computed, signal, afterNextRender } from "@angular/core";
 import { RouterLink, RouterLinkActive } from "@angular/router";
 import { MatButton } from "@angular/material/button";
 import { MatMenuTrigger, MatMenu, MatMenuItem } from "@angular/material/menu";
@@ -53,7 +53,17 @@ export class MainMenuComponent {
 
     public readonly isLoggedIn = computed(() => this.userInfo() != null);
 
+    /**
+     * Whether the signed in user is known yet. The content routes are prerendered at build time,
+     * where there is never a user, so the prerendered html must not claim the visitor is signed out -
+     * otherwise a signed in visitor stares at a "sign in" button until the persisted state is read
+     * out of indexeddb. This stays false through hydration so the client's first render still matches
+     * the prerendered markup, and flips right after it.
+     */
+    public readonly isUserKnown = signal(false);
+
     constructor() {
+        afterNextRender(() => this.isUserKnown.set(true));
         if (this.runningContextService.isCapacitor) {
             App.getInfo().then((info) => {
                 this.loggingService.info(`App version: ${info.version}`);

IsraelHiking.Web/src/application/components/main-menu.component.ts

@@ -96,7 +96,7 @@
 <div class="flex flex-row justify-center">
     <button mat-button class="mx-2 rounded-full! bg-gray-200! p-2 text-black!" (click)="clearUserFilter()">
         {{filterUserName()}}
-        <i class="fa fa-times mx-2"></i>
+        <i class="fa icon-close mx-2"></i>
     </button>
 </div>
 }

IsraelHiking.Web/src/application/components/public-routes-filter.component.html

@@ -1,5 +1,14 @@
-<header class="relative h-screen min-h-screen w-full bg-cover bg-center bg-no-repeat"
-    style="background-image: url('content/hero-mountain.jpg');">
+<header class="relative h-screen min-h-screen w-full overflow-hidden">
+    <picture>
+        <source type="image/avif" sizes="100vw"
+            srcset="content/hero-mountain-640.avif 640w, content/hero-mountain-960.avif 960w, content/hero-mountain-1280.avif 1280w, content/hero-mountain-1920.avif 1920w">
+        <source type="image/webp" sizes="100vw"
+            srcset="content/hero-mountain-640.webp 640w, content/hero-mountain-960.webp 960w, content/hero-mountain-1280.webp 1280w, content/hero-mountain-1920.webp 1920w">
+        <!-- An img rather than a css background so the preload scanner finds it while parsing the
+             html, and can pick a size that fits the screen instead of always sending the full one. -->
+        <img src="content/hero-mountain-1280.jpg" alt="" width="1920" height="1080" fetchpriority="high"
+            class="absolute inset-0 h-full w-full object-cover object-center">
+    </picture>
     <div class="absolute inset-0 bg-black/10"></div>
     <div class="relative z-10 flex h-full flex-col items-center justify-center px-4 text-center text-white">
         <h1 class="mb-6 text-5xl font-extrabold leading-tight tracking-tight md:text-7xl">
@@ -14,18 +23,18 @@ <h1 class="mb-6 text-5xl font-extrabold leading-tight tracking-tight md:text-7xl
         <div class="flex flex-col gap-4 sm:flex-row">
             <a [href]="androidAppUrl" analyticsLabel="Download from google play store"
                 class="group flex items-center gap-3 rounded-lg transition-all hover:scale-105">
-                <img src="content/google-play-badge.png" alt="Google Play" width="200">
+                <img src="content/google-play-badge.png" alt="Google Play" width="200" height="59">
             </a>
 
             <a [href]="iosAppUrl" analyticsLabel="Download from app store"
                 class="group flex items-center gap-3 rounded-lg transition-all hover:scale-105">
-                <img src="content/app-store-badge.png" alt="App Store" width="200">
+                <img src="content/app-store-badge.png" alt="App Store" width="200" height="59">
             </a>
         </div>
         }
     </div>
     <div class="absolute bottom-16 left-1/2 -translate-x-1/2 animate-bounce text-gray-100">
-        <i class="fa fa-chevron-down fa-lg"></i>
+        <i class="fa icon-chevron-down fa-lg"></i>
     </div>
 </header>
 
@@ -149,7 +158,7 @@ <h3 class="text-xl font-bold text-gray-900 uppercase tracking-wide">Mapeak Pro</
                     </li>
                     <li class="flex items-center gap-3 font-semibold text-gray-900">
                         <span
-                            class="fa fa-battery-full border-2 border-solid border-gray-200 p-1 rounded-full aspect-square flex! items-center"></span>
+                            class="fa icon-battery border-2 border-solid border-gray-200 p-1 rounded-full aspect-square flex! items-center"></span>
                         <span>Save Battery on Long Trails</span>
                     </li>
                 </ul>

IsraelHiking.Web/src/application/components/screens/landing.component.html

@@ -7,51 +7,51 @@ import type { ConfigurationState, Language, BatteryOptimizationType, Theme } fro
 
 
 export class SetLanguageAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] SetLanguageAction";
     constructor(public readonly language: Language) { }
 }
 
 export class SetBatteryOptimizationTypeAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] SetBatteryOptimizationTypeAction";
     constructor(public readonly batteryOptimizationType: BatteryOptimizationType) { }
 }
 
 export class ToggleAutomaticRecordingUploadAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] ToggleAutomaticRecordingUploadAction";
 }
 
 export class ToggleGotLostWarningsAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] ToggleGotLostWarningsAction";
 }
 
 export class ToggleIsShowSlopeAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] ToggleIsShowSlopeAction";
 }
 
 export class ToggleIsShowKmMarkersAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] ToggleIsShowKmMarkersAction";
 }
 
 export class StopShowingBatteryConfirmationAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] StopShowingBatteryConfirmationAction";
 }
 
 export class StopShowingIntroAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] StopShowingIntroAction";
 }
 
 export class SetUnitsAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] SetUnitsAction";
     constructor(public readonly units: "metric" | "imperial") { }
 }
 
 export class SetDateFormatAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] SetDateFormatAction";
     constructor(public readonly dateFormat: string) { }
 }
 
 export class SetThemeAction {
-    public static readonly type = this.prototype.constructor.name;
+    public static readonly type = "[Configuration] SetThemeAction";
     constructor(public readonly theme: Theme) { }
 }