From 04ce90720c68539eb0ce1bfd6f5b9b27f0349852 Mon Sep 17 00:00:00 2001 From: Candid Dauth Date: Mon, 19 Feb 2024 14:27:04 +0100 Subject: [PATCH] Add option to include custom CSS (#185 #186) --- config.env.example | 14 +++----------- docs/src/developers/server/config.md | 17 ++++++++++++++++- frontend/src/map/map.ejs | 5 ++++- frontend/src/table/table.ejs | 5 ++++- server/src/config.ts | 3 +++ server/src/frontend.ts | 2 ++ server/src/webserver.ts | 8 ++++++++ 7 files changed, 40 insertions(+), 14 deletions(-) diff --git a/config.env.example b/config.env.example index b377189a..89108b5e 100644 --- a/config.env.example +++ b/config.env.example @@ -1,17 +1,9 @@ +# Copy this file to config.env when running FacilMap standalone. +# Find all the available configuration options in the documentation: https://docs.facilmap.org/developers/server/config.html + # HTTP requests made by the backend will send this User-Agent header. Please adapt to your URL and e-mail address. #USER_AGENT=FacilMap (https://facilmap.org/, cdauth@cdauth.eu) -# Whether to trust the X-Forwarded-* headers. Can be "true" or a comma-separated list of IP subnets. -# See https://expressjs.com/en/guide/behind-proxies.html for details. -#TRUST_PROXY=true -# Alternatively, manually set the base URL where FacilMap will be publicly reachable. -#BASE_URL=https://facilmap.org/ - -# The name of the app that should be displayed throughout the UI. -#APP_NAME=FacilMap - -# On which IP the HTTP server will listen. Leave empty to listen to all IPs. -#HOST= # On which port the HTTP server will listen. #PORT=8080 diff --git a/docs/src/developers/server/config.md b/docs/src/developers/server/config.md index d1583756..0b21b746 100644 --- a/docs/src/developers/server/config.md +++ b/docs/src/developers/server/config.md @@ -23,9 +23,24 @@ The config of the FacilMap server can be set either by using environment variabl | `MAXMIND_LICENSE_KEY` | | | MaxMind license key. | | `LIMA_LABS_TOKEN` | | | [Lima Labs](https://maps.lima-labs.com/) API key | | `HIDE_COMMERCIAL_MAP_LINKS` | | | Set to `1` to hide the links to Google/Bing Maps in the “Map style” menu. | +| `CUSTOM_CSS_FILE` | | | The path of a CSS file that should be included ([see more details below](#custom-css-file)). FacilMap makes use of several third-party services that require you to register (for free) and generate an API key: * Mapbox and OpenRouteService are used for calculating routes. Mapbox is used for basic routes, OpenRouteService is used when custom route mode settings are made. If these API keys are not defined, calculating routes will fail. * Maxmind provides a free database that maps IP addresses to approximate locations. FacilMap downloads this database to decide the initial map view for users (IP addresses are looked up in FacilMap’s copy of the database, on IP addresses are sent to Maxmind). This API key is optional, if it is not set, the default view will be the whole world. * Mapzen is used to look up the elevation info for search results. The API key is optional, if it is not set, no elevation info will be available for search results. -* Lima Labs is used for nicer and higher resolution map tiles than Mapnik. The API key is optional, if it is not set, Mapnik will be the default map style instead. \ No newline at end of file +* Lima Labs is used for nicer and higher resolution map tiles than Mapnik. The API key is optional, if it is not set, Mapnik will be the default map style instead. + +## Custom CSS file + +To include a custom CSS file in the UI, set the `CUSTOM_CSS_FILE` environment variable to the file path. + +When running FacilMap with docker, you can mount your CSS file as a volume into the container, for example with the following docker-compose configuration: +```yaml + environment: + CUSTOM_CSS_FILE: /opt/facilmap/custom.css + volumes: + - ./custom.css:/opt/facilmap/custom.css +``` + +Your custom CSS file will be included in the map UI and in the table export. You can distinguish between the two by using the `html.fm-facilmap-map` and `html.fm-facilmap-table` selectors. \ No newline at end of file diff --git a/frontend/src/map/map.ejs b/frontend/src/map/map.ejs index a9dbb848..e8960237 100644 --- a/frontend/src/map/map.ejs +++ b/frontend/src/map/map.ejs @@ -1,5 +1,5 @@ - + <%= padData && padData.name ? `${padData.name} – ` : ''%><%=appName%> @@ -63,6 +63,9 @@ <% for (const path of scripts) { -%> diff --git a/frontend/src/table/table.ejs b/frontend/src/table/table.ejs index d1d42f5c..32cac31a 100644 --- a/frontend/src/table/table.ejs +++ b/frontend/src/table/table.ejs @@ -1,5 +1,5 @@ - + <%=normalizePadName(padData.name)%> – <%=appName%> @@ -25,6 +25,9 @@ <% for (const path of scripts) { -%> diff --git a/server/src/config.ts b/server/src/config.ts index b7d538bf..43d68db7 100644 --- a/server/src/config.ts +++ b/server/src/config.ts @@ -26,6 +26,7 @@ export interface Config { limaLabsToken?: string; /** Hide the "Open this on Google/Bing Maps" links in the map style menu */ hideCommercialMapLinks?: boolean; + customCssFile?: string; } const config: Config = { @@ -60,6 +61,8 @@ const config: Config = { limaLabsToken: process.env.LIMA_LABS_TOKEN || "", // Get a token on https://maps.lima-labs.com/, hideCommercialMapLinks: process.env.HIDE_COMMERCIAL_MAP_LINKS === "1", + + customCssFile: process.env.CUSTOM_CSS_FILE || undefined, }; export default config; diff --git a/server/src/frontend.ts b/server/src/frontend.ts index 6d26d193..ab7a165a 100644 --- a/server/src/frontend.ts +++ b/server/src/frontend.ts @@ -84,6 +84,7 @@ export async function renderMap(params: RenderMapParams): Promise { return ejs.render(template, { appName: config.appName, config: getInjectedConfig(), + hasCustomCssFile: !!config.customCssFile, ...injections, paths, ...params @@ -103,6 +104,7 @@ export async function renderTable(params: { return ejs.render(template, { ...injections, appName: config.appName, + hasCustomCssFile: !!config.customCssFile, paths, utils, normalizeMarkerName, diff --git a/server/src/webserver.ts b/server/src/webserver.ts index 4cd10c43..f57fa167 100644 --- a/server/src/webserver.ts +++ b/server/src/webserver.ts @@ -77,6 +77,14 @@ export async function initWebserver(database: Database, port: number, host?: str res.send(await getOpensearchXml(getBaseUrl(req))); }); + app.get(`${paths.base}custom.css`, async (req, res, next) => { + if (config.customCssFile) { + res.sendFile(config.customCssFile); + } else { + next(); + } + }); + app.use("/_app/static/sw.js", (req, res, next) => { res.setHeader("Service-Worker-Allowed", "/"); next();