Merge branch 'dev'

2024-12-24 16:21:18 +01:00
parent dcbcd6f038 2591c72ddd
commit 4ed0aad6f0
20 changed files with 2097 additions and 677 deletions
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
  "name": "leim-maps",
  "type": "module",
-  "version": "1.2.4",
+  "version": "1.3.0",
  "scripts": {
    "dev": "astro dev",
    "start": "astro dev",
@@ -10,14 +10,14 @@
    "astro": "astro"
  },
  "dependencies": {
-    "@astrojs/sitemap": "^3.1.6",
-    "@astrojs/vue": "^4.5.0",
-    "@types/leaflet": "^1.9.12",
-    "@vueuse/core": "^10.9.0",
-    "astro": "^4.13.1",
-    "vue": "^3.4.27"
+    "@astrojs/sitemap": "^3.2.1",
+    "@astrojs/vue": "^5.0.3",
+    "@types/leaflet": "^1.9.15",
+    "@vueuse/core": "^12.2.0",
+    "astro": "^5.1.1",
+    "vue": "^3.5.13"
  },
  "devDependencies": {
-    "sass": "^1.77.0"
+    "sass": "^1.83.0"
  }
 }
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/public/images/cover/Académie_Centrale_Kaldélienne.jpg
+++ b/public/images/cover/Académie_Centrale_Kaldélienne.jpg
--- a/public/images/cover/Ambrose.jpg
+++ b/public/images/cover/Ambrose.jpg
--- a/public/images/cover/Cantane.jpg
+++ b/public/images/cover/Cantane.jpg
--- a/public/images/cover/Cordouac.jpg
+++ b/public/images/cover/Cordouac.jpg
--- a/public/images/cover/Horfer.jpg
+++ b/public/images/cover/Horfer.jpg
--- a/public/images/cover/Port-brisé.jpg
+++ b/public/images/cover/Port-brisé.jpg
--- a/public/images/cover/Port_de_Borélis.jpeg
+++ b/public/images/cover/Port_de_Borélis.jpeg
--- a/public/images/cover/Soubreciel.jpg
+++ b/public/images/cover/Soubreciel.jpg
--- a/public/images/cover/Tourgrise.png
+++ b/public/images/cover/Tourgrise.png
--- a/public/images/cover/Tours_des_Cages.jpg
+++ b/public/images/cover/Tours_des_Cages.jpg
--- a/public/images/cover/Willeau.jpg
+++ b/public/images/cover/Willeau.jpg
--- a/src/assets/scss/_leaflet.scss
+++ b/src/assets/scss/_leaflet.scss
@@ -11,9 +11,83 @@
        .leaflet-popup-pane {
            .leaflet-popup-content-wrapper {
                border-radius: .25rem;
+                overflow: clip;

                .leaflet-popup-content {
-                    margin: .65rem 1.3rem .65rem .9rem;
+                    min-width: 20rem;
+                    margin: 1rem;
+
+                    figure {
+                        position: relative;
+                        margin-inline: -1.1rem;
+                        margin-top: -1.1rem;
+                        margin-bottom: .5rem;
+
+                        &.landscape {
+                            aspect-ratio: 16 / 9;
+                            min-width: 20rem;
+                        }
+
+                        &.portrait {
+                            aspect-ratio: 15 / 16;
+                            min-width: 10rem;
+                        }
+
+                        &::before {
+                            content: '';
+                            display: block;
+                            pointer-events: none;
+                            user-select: none;
+                            position: absolute;
+                            inset: 0;
+                            z-index: 10;
+                            // Make a linear gradient from top to bottom, from transparent to black
+                            background: linear-gradient(to bottom, transparent 70%, var(--black) 100%);
+                        }
+
+                        img {
+                            width: 100%;
+                            height: 100%;
+                            object-fit: cover;
+                            object-position: top;
+                        }
+
+                        figcaption cite {
+                            position: absolute;
+                            font-size: 85%;
+                            font-style: italic;
+                            font-weight: 600;
+                            bottom: .5rem;
+                            right: 1rem;
+                            color: var(--white);
+                            z-index: 20;
+                            opacity: .6;
+                            transition-property: opacity;
+                            transition-duration: .2s;
+                            transition-timing-function: cubic-bezier(0.23, 1, 0.320, 1);
+
+                            a {
+                                padding-right: 0;
+                                color: var(--white);
+                                text-decoration: underline;
+                                text-underline-offset: .15rem;
+
+                                &:hover {
+                                    color: var(--blue-500);
+                                }
+
+                                &::after {
+                                    display: none;
+                                }
+                            }
+                        }
+
+                        &:hover {
+                            figcaption cite {
+                                opacity: 1;
+                            }
+                        }
+                    }

                    .title {
                        display: block;
--- a/src/assets/scss/utils/_text.scss
+++ b/src/assets/scss/utils/_text.scss
@@ -1,3 +1,5 @@
+@use 'sass:list';
+
 /// Stroke font-character
 /// @param  {Integer} $stroke - Stroke width
 /// @param  {Color}   $color  - Stroke color
@@ -8,7 +10,7 @@

    @for $i from $from through $stroke {
        @for $j from $from through $stroke {
-            $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
+            $shadow: list.append($shadow, $i*1px $j*1px 0 $color, comma);
        }
    }

--- a/src/components/maps/WorldMap.astro
+++ b/src/components/maps/WorldMap.astro
@@ -169,22 +169,42 @@ for (let i = 0; i < markers.length; i++) {
    }

    const marker = L.marker(coords, { icon: markerIconOverride }).addTo(map)
+
+    // Build popup content
    let popupContent = ""
+
+    if (m.cover && m.coverAuthor && m.coverLink) {
+        const figureClass = m.coverPortrait ? 'portrait' : 'landscape';
+        const figureWidth = m.coverPortrait ? 210 : 420;
+
+        popupContent += `
+            <figure class="${figureClass}">
+                <img src="/images/cover/${m.cover}" alt="${m.title}" width="${figureWidth}" loading="lazy" />
+                <figcaption>
+                    <cite>par <a href="${m.coverLink}" target="_blank">${m.coverAuthor}</a></cite>
+                </figcaption>
+            </figure>
+        `
+    }
+
    if (m.link) {
-        popupContent = `
+        popupContent += `
            <a href="${m.link}" target="_blank" class="title">
                ${m.title}
            </a>
-            <p>${m.description}</p>
        `
    } else {
-        popupContent = `
+        popupContent += `
            <strong class="title">
                ${m.title}
            </strong>
-            <p>${m.description}</p>
        `
    }
+
+    if (m.description) {
+        popupContent += `<p>${m.description}</p>`
+    }
+
    marker.bindPopup(popupContent).openPopup()

    const displayTooltip = m.group === 'capitals'
--- a/src/components/maps/data/markers.json
+++ b/src/components/maps/data/markers.json
@@ -8,7 +8,10 @@
            "markerCoords": {
                "x": 83.6,
                "y": -185.2
-            }
+            },
+            "cover": "Ambrose.jpg",
+            "coverAuthor": "Claudio Pilia",
+            "coverLink": "https://pilia-art.com/portfolio-item/game-of-thrones-the-city-of-tyrosh/"
        },
        {
            "group": "capitals",
@@ -18,7 +21,10 @@
            "markerCoords": {
                "x": 133.46875,
                "y": -146.0625
-            }
+            },
+            "cover": "Cordouac.jpg",
+            "coverAuthor": "Vincent Joyal",
+            "coverLink": "https://www.artstation.com/artwork/6B0b0"
        },
        {
            "group": "capitals",
@@ -38,7 +44,11 @@
            "markerCoords": {
                "x": 132.26953,
                "y": -98.19141
-            }
+            },
+            "cover": "Tourgrise.png",
+            "coverAuthor": "saya kuroha",
+            "coverLink": "https://www.pixiv.net/en/artworks/83793821",
+            "coverPortrait": true
        },
        {
            "group": "capitals",
@@ -68,7 +78,10 @@
            "markerCoords": {
                "x": 168.39491,
                "y": -109.13376
-            }
+            },
+            "cover": "Port-brisé.jpg",
+            "coverAuthor": "JC Jongwon Park",
+            "coverLink": "https://www.artstation.com/artwork/okmQL"
        },
        {
            "group": "capitals",
@@ -108,7 +121,10 @@
            "markerCoords": {
                "x": 204.42515,
                "y": -226.85883
-            }
+            },
+            "cover": "Soubreciel.jpg",
+            "coverAuthor": "Tony Andreas Rudolph",
+            "coverLink": "https://www.artstation.com/artwork/EB84"
        },
        {
            "group": "capitals",
@@ -148,7 +164,10 @@
            "markerCoords": {
                "x": 138.44531,
                "y": -51.54687
-            }
+            },
+            "cover": "Port_de_Borélis.jpeg",
+            "coverAuthor": "Anton Bezrukov",
+            "coverLink": "https://www.artstation.com/artwork/oODL5B"
        },
        {
            "group": "cities",
@@ -188,7 +207,10 @@
            "markerCoords": {
                "x": 197.3492280183025,
                "y": -210.87224307207197
-            }
+            },
+            "cover": "Cantane.jpg",
+            "coverAuthor": "Andreas Roller",
+            "coverLink": "https://en.wikipedia.org/wiki/Andreas_Roller"
        },
        {
            "group": "cities",
@@ -198,7 +220,10 @@
            "markerCoords": {
                "x": 185.57431,
                "y": -229.08588
-            }
+            },
+            "cover": "Horfer.jpg",
+            "coverAuthor": "Nele-Diel",
+            "coverLink": "https://www.deviantart.com/nele-diel/art/City-in-the-Lowlands-693529688"
        },
        {
            "group": "cities",
@@ -528,7 +553,10 @@
            "markerCoords": {
                "x": 107.50352,
                "y": -67.36631
-            }
+            },
+            "cover": "Willeau.jpg",
+            "coverAuthor": "Inconnu",
+            "coverLink": "https://www.hebus.com/image-339033.html"
        },
        {
            "group": "cities",
@@ -587,7 +615,11 @@
            "markerCoords": {
                "x": 168.31641,
                "y": -60.54297
-            }
+            },
+            "cover": "Tours_des_Cages.jpg",
+            "coverAuthor": "25kartinok",
+            "coverLink": "https://www.deviantart.com/25kartinok/art/the-dark-tower-700231527",
+            "coverPortrait": true
        },
        {
            "group": "landmarks",
@@ -816,6 +848,9 @@
                "x": 83.80737652386473,
                "y": -184.52963682119173
            },
+            "cover": "Académie_Centrale_Kaldélienne.jpg",
+            "coverAuthor": "Pengzhen Zhang",
+            "coverLink": "https://www.artstation.com/artwork/zAOWNd",
            "icon": "graduation-cap"
        },
        {
--- a/src/components/maps/overlay/SearchMarkers.vue
+++ b/src/components/maps/overlay/SearchMarkers.vue
@@ -220,6 +220,9 @@ function resetAllFields(actionAfter?: "focusAfter") {
                        tabindex="0"
                        :title="m.group === 'quests' ? 'Voir la quête' : 'Visiter ce lieu'"
                    >
+                        <img v-if="m.cover && !m.coverPortrait" :src="`/images/cover/${m.cover}`" :alt="m.title" width="300" />
+
+                        <div class="content-wrapper">
                            <span class="title">{{ m.title }}</span>

                            <div class="desc" v-html="m.description"></div>
@@ -232,6 +235,7 @@ function resetAllFields(actionAfter?: "focusAfter") {
                                <svg v-else-if="m.group === 'capitals'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M200,24h-8a16,16,0,0,0-16,16V56H148V40a16,16,0,0,0-16-16h-8a16,16,0,0,0-16,16V56H80V40A16,16,0,0,0,64,24H56A16,16,0,0,0,40,40V84.69A15.86,15.86,0,0,0,44.69,96L56,107.31V216a16,16,0,0,0,16,16H184a16,16,0,0,0,16-16V107.31L211.31,96A15.86,15.86,0,0,0,216,84.69V40A16,16,0,0,0,200,24ZM152,216H104V152a24,24,0,0,1,48,0Z"/></svg>
                                <svg v-else-if="m.group === 'landmarks'" class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M208,80a8,8,0,0,0-8,8v16H188.85L184,55.2A8,8,0,0,0,181.31,50h0L138.44,11.88l-.2-.17a16,16,0,0,0-20.48,0l-.2.17L74.68,50v0A7.93,7.93,0,0,0,72,55.2L67.15,104H56V88a8,8,0,0,0-16,0v24a8,8,0,0,0,8,8H65.54l-9.47,94.48A16,16,0,0,0,72,232H184a16,16,0,0,0,15.92-17.56L190.46,120H208a8,8,0,0,0,8-8V88A8,8,0,0,0,208,80ZM87.24,64h81.52l4,40H136V88a8,8,0,0,0-16,0v16H83.23ZM72,216l4.81-48H179.19L184,216Z"/></svg>
                            </div>
+                        </div>
                    </button>

                    <!-- Custom marker actions -->
@@ -401,6 +405,12 @@ function resetAllFields(actionAfter?: "focusAfter") {

            li {
                position: relative;
+                border-radius: .5rem;
+                overflow: clip;
+
+                &:not(:last-child) {
+                    margin-bottom: .25rem;
+                }

                &:hover:not(:has(a:hover)) {
                    background-color: var(--slate-100);
@@ -413,11 +423,24 @@ function resetAllFields(actionAfter?: "focusAfter") {
                .search-item {
                    position: relative;
                    cursor: pointer;
-                    padding: .4rem .25em;
-                    padding-right: 2.75rem;
                    width: 100%;
+                    border-radius: .5rem;
                    outline-offset: -1px;

+                    img {
+                        display: block;
+                        width: 100%;
+                        max-height: 15dvh;
+                        max-height: 15vh;
+                        object-fit: cover;
+                    }
+
+                    .content-wrapper {
+                        position: relative;
+                        padding: .4rem .5em .6rem;
+                        padding-right: 2.75rem;
+                    }
+
                    .title,
                    .desc {
                        display: block;
--- a/src/layouts/Layout.astro
+++ b/src/layouts/Layout.astro
@@ -45,5 +45,5 @@ const { title } = Astro.props;
 </html>

 <style lang="scss" is:global>
-    @import '../assets/scss/theme.scss';
+    @use '../assets/scss/theme.scss';
 </style>
--- a/src/types/Leaflet.ts
+++ b/src/types/Leaflet.ts
@@ -13,6 +13,10 @@ export type MapMarker = {
    link?: string,
    group?: MapMarkerGroup,
    icon?: MapMarkerIcon,
+    cover?: string,
+    coverLink?: string,
+    coverAuthor?: string,
+    coverPortrait?: boolean
 }

 export type PlayerMarker = {