apple icon

Author: digitaltom

app/views/layouts/_head.html.haml

@@ -15,7 +15,7 @@
 
   %meta{ name: 'description', content: (content_for?(:title) ? yield(:title) : '') + " - Create individual maps for your places, tracks and events. Share your maps in real-time." }
   %meta{ name: 'keywords', content: 'map maker, create map, my maps, share maps, online maps, travel maps, map editor, geojson, maplibre, openstreetmap, privacy, open source, free to use' }
-  
+
   - # Open Graph protocol https://ogp.me/
   %meta{ property: 'og:type', content: 'website' }
   %meta{ property: 'og:url', content: request.url }
@@ -31,19 +31,36 @@
   / Logo font
   %link{ href: "https://fonts.googleapis.com", rel: "preconnect" }
   %link{ href: "https://fonts.gstatic.com", rel: "preconnect", crossorigin: true }
-  = stylesheet_link_tag("https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;1,400;1,700&family=Noto+Color+Emoji&family=SUSE:ital,wght@0,100..900;1,100..900&display=swap")
+
+  :ruby
+    google_fonts_url = "https://fonts.googleapis.com/css2?" \
+      "family=Lobster+Two:ital,wght@0,400;1,400;1,700&" \
+      "family=Noto+Color+Emoji&" \
+      "family=SUSE:ital,wght@0,100..900;1,100..900&" \
+      "family=DM+Serif+Display:ital@0;1&" \
+      "family=Bree+Serif&" \
+      "family=Sora:wght@100..800&" \
+      "family=Playfair+Display:ital,wght@0,400..900;1,400..900&" \
+      "family=Comfortaa:wght@300..700&" \
+      "family=Libre+Baskerville:ital,wght@0,400..700;1,400..700&" \
+      "family=Cinzel:wght@400..900&" \
+      "display=swap"
+  = stylesheet_link_tag google_fonts_url
 
   / css
   = stylesheet_link_tag "https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
   - # maptiler-sdk.css includes maplibre-gl css and looks better
   - # needs to get loaded before application.css
+  /- # from https://unpkg.com/maplibre-gl@5.20.0/dist/maplibre-gl.css
   = stylesheet_link_tag "maptiler-sdk", "data-turbo-track": "reload"
+  /= stylesheet_link_tag "maplibre-gl", "data-turbo-track": "reload"
+
   = stylesheet_link_tag "application", "data-turbo-track": "reload"
 
   - # JS imports, SRI integrity hashes from https://www.srihash.org/
   - # ES Module Shims: Import maps polyfill for older browsers without import maps support (eg Safari 16.3)
-  = javascript_include_tag( "https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js", 
-      async: true, 'data-turbo-track': 'reload', 
+  = javascript_include_tag( "https://ga.jspm.io/npm:es-module-shims@1.8.2/dist/es-module-shims.js",
+      async: true, 'data-turbo-track': 'reload',
       integrity: "sha384-+dzlBT6NPToF0UZu7ZUA6ehxHY8h/TxJOZxzNXKhFD+5He5Hbex+0AIOiSsEaokw", crossorigin: "anonymous")
   = javascript_importmap_tags
 
@@ -57,8 +74,10 @@
   = yield(:head)
 
   %link{ rel: "manifest", href: "/manifest.json" }
-  %link{ rel: "icon", href: "/icons/mapforge-logo-icon.png", type: "image/png" }
-  %link{ rel: "apple-touch-icon", href: "/icons/mapforge-logo-pwa.png" }
+  %link{ rel: "icon", sizes: "50x50", href: "/icons/mapforge-logo-icon.png", type: "image/png" }
+  %link{ rel: "apple-touch-icon", sizes: "512x512", href: "/icons/mapforge-logo-pwa.png" }
+  %link{ rel: "apple-touch-icon", sizes: "180x180", href: "/icons/mapforge-logo-pwa-180.png" }
+
 
   - if content_for?(:alternate_md_url)
     %link{ rel: "alternate", type: "text/markdown", title: "Markdown", href: yield(:alternate_md_url) }