Fixed dist watching issues

They're in the DOM now, so much easier to manage

README.md

@@ -1,2 +1,25 @@
 # Leim Maps
-Repository for interactive maps using Leim's Wiki data
+🗺️ A simple Astro static site to display custom maps with Leaflet. Includes sample images with maps from my own world.
+
+## Features
+* Add your own markers for cities, NPCs, or quests
+* Search through markers
+* Create multiple maps for different continents or countries
+* Measure distances between two points
+* Custom client-side markers
+
+## Documentation
+### Making usable map assets
+Since we're not using earth maps, we need to build one compatible with Leaflet. I used Zoomify to generate usable tile data from my SVG maps. I don't know if this will fit your use case ; if you use something else, you can contact me !
+
+> [!IMPORTANT]
+> As of writing this, it appears Zoomify Unlimited Converter (which is what I used) is not available on Linux or for download anymore
+
+### Enabling features
+Some features are able to be toggled on and off. If you don't use multiple languages, or if you don't want the custom markers, you can disable them in the .env file. By default, all of them are true.
+
+## Contributing
+I'm not currently accepting pull-requests for this project, but if you have a suggestion, feel free to contact me !
+
+## Notes
+As someone with some degree of [aphantasia](https://en.wikipedia.org/wiki/Aphantasia), I struggle with visualization and immersion, and DMing in general. If you find yourself in the same situation, I hope my little thing made your life easier !

astro.config.mjs

@@ -1,13 +1,30 @@
-import { defineConfig } from 'astro/config';
-import nodeJs from '@astrojs/node';
+import { defineConfig, envField } from 'astro/config';
 
 import vue from "@astrojs/vue";
+import sitemap from "@astrojs/sitemap";
 
 // https://astro.build/config
 export default defineConfig({
-    integrations: [vue()],
-    output: 'server',
-    adapter: nodeJs({
-        mode: 'standalone'
-    }),
-});
+    integrations: [vue(), sitemap()],
+    output: 'static',
+    site: 'https://maps.alexcreates.fr',
+    prefetch: true,
+    env: {
+        schema: {
+            ENABLE_TOOLBAR: envField.boolean({ context: "server", access: "secret", default: true }),
+            ENABLE_TOOLBAR_TAGS: envField.boolean({ context: "server", access: "secret", default: true }),
+            ENABLE_CUSTOM_MARKERS: envField.boolean({ context: "server", access: "secret", default: true }),
+            ENABLE_BREADCRUMB: envField.boolean({ context: "server", access: "secret", default: true }),
+            ENABLE_I18N: envField.boolean({ context: "server", access: "secret", default: true }),
+        }
+    },
+    vite: {
+        server: {
+            watch: {
+                ignored: [
+                    '**/dist/**', // dist shouldn't be watched
+                ],
+            },
+        },
+    }
+});

package.json

@@ -1,7 +1,7 @@
 {
   "name": "leim-maps",
   "type": "module",
-  "version": "0.0.1",
+  "version": "1.4.14",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
@@ -10,16 +10,18 @@
     "astro": "astro"
   },
   "dependencies": {
-    "@astrojs/node": "^6.0.3",
-    "@astrojs/vue": "^3.0.1",
-    "@nanostores/vue": "^0.10.0",
-    "@types/leaflet": "^1.9.6",
-    "@vueuse/core": "^10.5.0",
-    "astro": "^3.2.0",
-    "nanostores": "^0.9.3",
-    "vue": "^3.3.4"
+    "@astrojs/sitemap": "^3.7.1",
+    "@astrojs/vue": "^6.0.1",
+    "@nanostores/persistent": "1.3.3",
+    "@nanostores/vue": "^1.1.0",
+    "@types/leaflet": "^1.9.21",
+    "@vueuse/core": "^14.2.1",
+    "astro": "^6.0.8",
+    "nanostores": "^1.2.0",
+    "radix-vue": "^1.9.17",
+    "vue": "^3.5.31"
   },
   "devDependencies": {
-    "sass": "^1.68.0"
+    "sass": "^1.98.0"
   }
 }

pnpm-workspace.yaml

@@ -0,0 +1,10 @@
+allowBuilds:
+  '@parcel/watcher': true
+  esbuild: true
+  sharp: true
+  vue-demi: true
+onlyBuiltDependencies:
+  - '@parcel/watcher'
+  - esbuild
+  - sharp
+  - vue-demi

public/icon/question-mark-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256" fill="#FFF"><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

public/icon/question-mark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M140,180a12,12,0,1,1-12-12A12,12,0,0,1,140,180ZM128,72c-22.06,0-40,16.15-40,36v4a8,8,0,0,0,16,0v-4c0-11,10.77-20,24-20s24,9,24,20-10.77,20-24,20a8,8,0,0,0-8,8v8a8,8,0,0,0,16,0v-.72c18.24-3.35,32-17.9,32-35.28C168,88.15,150.06,72,128,72Zm104,56A104,104,0,1,1,128,24,104.11,104.11,0,0,1,232,128Zm-16,0a88,88,0,1,0-88,88A88.1,88.1,0,0,0,216,128Z"></path></svg>

public/icon/ruler-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#FFF" viewBox="0 0 256 256"><path d="M235.32,73.37,182.63,20.69a16,16,0,0,0-22.63,0L20.68,160a16,16,0,0,0,0,22.63l52.69,52.68a16,16,0,0,0,22.63,0L235.32,96A16,16,0,0,0,235.32,73.37ZM84.68,224,32,171.31l32-32,26.34,26.35a8,8,0,0,0,11.32-11.32L75.31,128,96,107.31l26.34,26.35a8,8,0,0,0,11.32-11.32L107.31,96,128,75.31l26.34,26.35a8,8,0,0,0,11.32-11.32L139.31,64l32-32L224,84.69Z"></path></svg>

public/icon/ruler.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="32" height="32" fill="#020617" viewBox="0 0 256 256"><path d="M235.32,73.37,182.63,20.69a16,16,0,0,0-22.63,0L20.68,160a16,16,0,0,0,0,22.63l52.69,52.68a16,16,0,0,0,22.63,0L235.32,96A16,16,0,0,0,235.32,73.37ZM84.68,224,32,171.31l32-32,26.34,26.35a8,8,0,0,0,11.32-11.32L75.31,128,96,107.31l26.34,26.35a8,8,0,0,0,11.32-11.32L107.31,96,128,75.31l26.34,26.35a8,8,0,0,0,11.32-11.32L139.31,64l32-32L224,84.69Z"></path></svg>

public/icon/square-arrow-out-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M224,104a8,8,0,0,1-13.66,5.66L184,83.31l-42.34,42.35a8,8,0,0,1-11.32-11.32L172.69,72,146.34,45.66A8,8,0,0,1,152,32h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z" fill="#FFF" /></svg>

public/icon/square-arrow-out.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><rect width="256" height="256" fill="none"/><path d="M224,104a8,8,0,0,1-13.66,5.66L184,83.31l-42.34,42.35a8,8,0,0,1-11.32-11.32L172.69,72,146.34,45.66A8,8,0,0,1,152,32h64a8,8,0,0,1,8,8Zm-40,24a8,8,0,0,0-8,8v72H48V80h72a8,8,0,0,0,0-16H48A16,16,0,0,0,32,80V208a16,16,0,0,0,16,16H176a16,16,0,0,0,16-16V136A8,8,0,0,0,184,128Z"/></svg>

public/js/leaflet-zoomify.min.js

@@ -1,130 +1,4 @@
-/*
- * L.TileLayer.Zoomify display Zoomify tiles with Leaflet
- *
- * Based on the Leaflet.Zoomify (https://github.com/turban/Leaflet.Zoomify)
- * from turban (https://github.com/turban)
- *
- */
-
-L.TileLayer.Zoomify = L.TileLayer.extend({
-	options: {
-		width: -1, // Must be set by user, max zoom image width
-		height: -1, // Must be set by user, max zoom image height
-		tileGroupPrefix: 'TileGroup',
-		tilesPerTileGroup: 256
-	},
-
-	initialize: function (url, options) {
-		L.TileLayer.prototype.initialize.call(this, url, options);
-
-		// Replace with automatic loading from ImageProperties.xml
-		if (this.options.width < 0 || this.options.height < 0) {
-			throw new Error('The user must set the Width and Height of the Zoomify image');
-		}
-	},
-
-	beforeAdd: function (map) {
-		var imageSize = L.point(this.options.width, this.options.height);
-
-		// Build the zoom sizes of the pyramid and cache them in an array
-		this._imageSize = [imageSize];
-		this._gridSize = [this._getGridSize(imageSize)];
-
-		// Register the image size in pixels and the grid size in # of tiles for each zoom level
-		while (imageSize.x > this.options.tileSize || imageSize.y > this.options.tileSize) {
-			imageSize = imageSize.divideBy(2).ceil();
-			this._imageSize.push(imageSize);
-			this._gridSize.push(this._getGridSize(imageSize));
-		}
-
-		// We built the cache from bottom to top, but leaflet uses a top to bottom index for the zoomlevel,
-		// so reverse it for easy indexing by current zoomlevel
-		this._imageSize.reverse();
-		this._gridSize.reverse();
-
-		// Register our max supported zoom level
-		var maxNativeZoom = this._gridSize.length - 1;
-		this.options.maxNativeZoom = maxNativeZoom;
-
-		// Register our bounds for this zoomify layer based on the maximum zoom
-		var maxZoomGrid = this._gridSize[maxNativeZoom],
-		maxX = maxZoomGrid.x * this.options.tileSize,
-		maxY = maxZoomGrid.y * this.options.tileSize,
-		southEast = map.unproject([maxX, maxY], maxNativeZoom);
-		this.options.bounds = new L.LatLngBounds([[0, 0], southEast]);
-
-		L.TileLayer.prototype.beforeAdd.call(this, map);
-	},
-
-	// Calculate the grid size for a given image size (based on tile size)
-	_getGridSize: function (imageSize) {
-		var tileSize = this.options.tileSize;
-		return L.point(Math.ceil(imageSize.x / tileSize), Math.ceil(imageSize.y / tileSize));
-	},
-
-	// Extend the add tile function to update our arbitrary sized border tiles
-	_addTile: function (coords, container) {
-		// Load the tile via the original leaflet code
-		L.TileLayer.prototype._addTile.call(this, coords, container);
-
-		// Get out imagesize in pixels for this zoom level and our grid size
-		var imageSize = this._imageSize[this._getZoomForUrl()],
-		    gridSize = this._gridSize[this._getZoomForUrl()];
-
-		// The real tile size (default:256) and the display tile size (if zoom > maxNativeZoom)
-		var realTileSize = L.GridLayer.prototype.getTileSize.call(this),
-		    displayTileSize = L.TileLayer.prototype.getTileSize.call(this);
-
-		// Get the current tile to adjust
-		var key = this._tileCoordsToKey(coords),
-		    tile = this._tiles[key].el;
-
-		// Calculate the required size of the border tiles
-		var scaleFactor = L.point(	(imageSize.x % realTileSize.x),
-									(imageSize.y % realTileSize.y)).unscaleBy(realTileSize);
-
-		// Update tile dimensions if we are on a border
-		if ((imageSize.x % realTileSize.x) > 0 && coords.x === gridSize.x - 1) {
-			tile.style.width = displayTileSize.scaleBy(scaleFactor).x + 'px';
-		}
-
-		if ((imageSize.y % realTileSize.y) > 0 && coords.y === gridSize.y - 1) {
-			tile.style.height = displayTileSize.scaleBy(scaleFactor).y + 'px';
-		}
-	},
-
-	// Construct the tile url, by inserting our tilegroup before we template the url
-	getTileUrl: function (coords) {
-		// Set our TileGroup variable, and then let the original tile templater do the work
-		this.options.g = this.options.tileGroupPrefix + this._getTileGroup(coords);
-
-		// Call the original templater
-		return L.TileLayer.prototype.getTileUrl.call(this, coords);
-	},
-
-	// Calculates the TileGroup number, each group contains 256 tiles. The tiles are stored from topleft to bottomright
-	_getTileGroup: function (coords) {
-		var zoom = this._getZoomForUrl(),
-		    num = 0,
-		    gridSize;
-
-		// Get the total number of tiles from the lowest zoom level to our zoomlevel
-		for (var z = 0; z < zoom; z++) {
-			gridSize = this._gridSize[z];
-			num += gridSize.x * gridSize.y;
-		}
-
-		// Add the remaining tiles from this zoom layer to the running total of tiles
-		num += coords.y * this._gridSize[zoom].x + coords.x;
-		return Math.floor(num / this.options.tilesPerTileGroup);
-	},
-
-	getBounds: function () {
-		return this.options.bounds;
-	}
-
-});
-
-L.tileLayer.zoomify = function (url, options) {
-	return new L.TileLayer.Zoomify(url, options);
-};
+L.TileLayer.Zoomify=L.TileLayer.extend({options:{width:-1,height:-1,tileGroupPrefix:'TileGroup',tilesPerTileGroup:256},initialize:function(url,options){L.TileLayer.prototype.initialize.call(this,url,options);if(this.options.width<0||this.options.height<0){throw new Error('The user must set the Width and Height of the Zoomify image')}},beforeAdd:function(map){var imageSize=L.point(this.options.width,this.options.height);this._imageSize=[imageSize];this._gridSize=[this._getGridSize(imageSize)];while(imageSize.x>this.options.tileSize||imageSize.y>this.options.tileSize){imageSize=imageSize.divideBy(2).ceil();this._imageSize.push(imageSize);this._gridSize.push(this._getGridSize(imageSize))}
+this._imageSize.reverse();this._gridSize.reverse();var maxNativeZoom=this._gridSize.length-1;this.options.maxNativeZoom=maxNativeZoom;var maxZoomGrid=this._gridSize[maxNativeZoom],maxX=maxZoomGrid.x*this.options.tileSize,maxY=maxZoomGrid.y*this.options.tileSize,southEast=map.unproject([maxX,maxY],maxNativeZoom);this.options.bounds=new L.LatLngBounds([[0,0],southEast]);L.TileLayer.prototype.beforeAdd.call(this,map)},_getGridSize:function(imageSize){var tileSize=this.options.tileSize;return L.point(Math.ceil(imageSize.x/tileSize),Math.ceil(imageSize.y/tileSize))},_addTile:function(coords,container){L.TileLayer.prototype._addTile.call(this,coords,container);var imageSize=this._imageSize[this._getZoomForUrl()],gridSize=this._gridSize[this._getZoomForUrl()];var realTileSize=L.GridLayer.prototype.getTileSize.call(this),displayTileSize=L.TileLayer.prototype.getTileSize.call(this);var key=this._tileCoordsToKey(coords),tile=this._tiles[key].el;var scaleFactor=L.point((imageSize.x%realTileSize.x),(imageSize.y%realTileSize.y)).unscaleBy(realTileSize);if((imageSize.x%realTileSize.x)>0&&coords.x===gridSize.x-1){tile.style.width=displayTileSize.scaleBy(scaleFactor).x+'px'}
+if((imageSize.y%realTileSize.y)>0&&coords.y===gridSize.y-1){tile.style.height=displayTileSize.scaleBy(scaleFactor).y+'px'}},getTileUrl:function(coords){this.options.g=this.options.tileGroupPrefix+this._getTileGroup(coords);return L.TileLayer.prototype.getTileUrl.call(this,coords)},_getTileGroup:function(coords){var zoom=this._getZoomForUrl(),num=0,gridSize;for(var z=0;z<zoom;z++){gridSize=this._gridSize[z];num+=gridSize.x*gridSize.y}
+num+=coords.y*this._gridSize[zoom].x+coords.x;return Math.floor(num/this.options.tilesPerTileGroup)},getBounds:function(){return this.options.bounds}});L.tileLayer.zoomify=function(url,options){return new L.TileLayer.Zoomify(url,options)}

public/robots.txt

@@ -0,0 +1,49 @@
+User-agent: GPTBot
+Disallow: /
+User-agent: ChatGPT-User
+Disallow: /
+User-agent: Google-Extended
+Disallow: /
+User-agent: PerplexityBot
+Disallow: /
+User-agent: Amazonbot
+Disallow: /
+User-agent: ClaudeBot
+Disallow: /
+User-agent: Omgilibot
+Disallow: /
+User-Agent: FacebookBot
+Disallow: /
+User-Agent: Applebot
+Disallow: /
+User-agent: anthropic-ai
+Disallow: /
+User-agent: Bytespider
+Disallow: /
+User-agent: Claude-Web
+Disallow: /
+User-agent: Diffbot
+Disallow: /
+User-agent: ImagesiftBot
+Disallow: /
+User-agent: Omgilibot
+Disallow: /
+User-agent: Omgili
+Disallow: /
+User-agent: YouBot
+Disallow: /
+
+User-agent: AhrefsBot
+Disallow: /
+User-agent: AhrefsSiteAudit
+Disallow: /
+User-agent: SemrushBot
+Disallow: /
+User-agent: YandexMarket
+Disallow: /
+User-agent: YandexBot
+Disallow: /
+User-agent: DataForSeoBot
+Disallow: /
+
+Sitemap: https://maps.alexcreates.fr/sitemap-index.xml

public/zoomify/alliance-kaldelienne/ImageProperties.xml

@@ -1 +0,0 @@
-<IMAGE_PROPERTIES WIDTH="14658" HEIGHT="15168" NUMTILES="4660" NUMIMAGES="1" VERSION="1.8" TILESIZE="256" />