feat: make search highlight limit configurable via environment variable

- Add SEARCH_HIGHLIGHT_LIMIT environment variable support
- Modify Dockerfile to inject env vars at runtime using envsubst
- Create custom nginx.conf for environment variable access
- Update docker-compose.yml to use local build with env var
- Modify app.js to use configurable limit (-1 for unlimited, positive numbers for limit)
- Update index.html to receive injected environment variable
- Default value is 3, supports -1 to MAX_SAFE_INTEGER range

Author: Raffael Herrmann

Dockerfile

@@ -1,6 +1,9 @@
 # Use the official nginx image as the base image
 FROM nginx:alpine
 
+# Install gettext for envsubst
+RUN apk add --no-cache gettext
+
 # Accept build argument for version
 ARG VERSION
 ENV VERSION=${VERSION}
@@ -14,8 +17,11 @@ RUN ln -s /data /usr/share/nginx/html/data
 # Replace version placeholder
 RUN sed -i "s/__VERSION__/${VERSION}/g" /usr/share/nginx/html/index.html
 
+# Copy nginx configuration
+COPY nginx.conf /etc/nginx/nginx.conf
+
 # Expose port 80
 EXPOSE 80
 
-# Start nginx
-CMD ["nginx", "-g", "daemon off;"]
+# Start nginx with envsubst to inject environment variables
+CMD ["/bin/sh", "-c", "envsubst '${SEARCH_HIGHLIGHT_LIMIT}' < /usr/share/nginx/html/index.html > /usr/share/nginx/html/index.html.tmp && mv /usr/share/nginx/html/index.html.tmp /usr/share/nginx/html/index.html && nginx -g 'daemon off;'"]

docker-compose.yml

@@ -1,8 +1,11 @@
 services:
   masscode-web:
-    image: ghcr.io/codebude/masscode-web:latest
+    build:
+      context: .
     ports:
       - "8080:80"
     volumes:
       - ./db.json:/data/db.json:ro
+    environment:
+      - SEARCH_HIGHLIGHT_LIMIT=${SEARCH_HIGHLIGHT_LIMIT:-3}
     restart: unless-stopped

nginx.conf

@@ -0,0 +1,34 @@
+events {
+    worker_connections 1024;
+}
+
+http {
+    include /etc/nginx/mime.types;
+    default_type application/octet-stream;
+
+    # Enable environment variable access
+    env SEARCH_HIGHLIGHT_LIMIT;
+
+    server {
+        listen 80;
+        server_name localhost;
+
+        root /usr/share/nginx/html;
+        index index.html;
+
+        # Enable gzip compression
+        gzip on;
+        gzip_types text/plain text/css application/json application/javascript text/xml application/xml application/xml+rss text/javascript;
+
+        # Handle static files
+        location / {
+            try_files $uri $uri/ =404;
+        }
+
+        # Handle data directory
+        location /data/ {
+            alias /data/;
+            try_files $uri $uri/ =404;
+        }
+    }
+}

public/index.html

@@ -62,6 +62,12 @@ <h1 class="text-2xl font-bold">massCode-Web</h1>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-core.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/autoloader/prism-autoloader.min.js"></script>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/plugins/keep-markup/prism-keep-markup.min.js"></script>
+    <script>
+        // Set global config from environment variables
+        window.MASSCODE_CONFIG = {
+            SEARCH_HIGHLIGHT_LIMIT: parseInt('${SEARCH_HIGHLIGHT_LIMIT}') || 3
+        };
+    </script>
     <script type="module" src="js/app.js?v=__VERSION__"></script>
 </body>
 </html>

public/js/app.js

@@ -311,16 +311,18 @@ document.addEventListener('DOMContentLoaded', () => {
     function highlightSearchMatches(text, query) {
         if (!query.trim()) return text;
 
+        const highlightLimit = window.MASSCODE_CONFIG?.SEARCH_HIGHLIGHT_LIMIT ?? 3;
+
         try {
             // Try to use the query as a regex pattern
             const regex = new RegExp(`(${query})`, 'g'); // case-sensitive, global
             let matchCount = 0;
             return text.replace(regex, (match, group1) => {
                 matchCount++;
-                if (matchCount <= 3) {
+                if (highlightLimit === -1 || matchCount <= highlightLimit) {
                     return `<mark class="search-highlight">${group1}</mark>`;
                 }
-                return group1; // Return without highlighting for matches beyond 3
+                return group1; // Return without highlighting for matches beyond limit
             });
         } catch (error) {
             // If regex is invalid, escape special characters and search as literal string
@@ -329,10 +331,10 @@ document.addEventListener('DOMContentLoaded', () => {
             let matchCount = 0;
             return text.replace(regex, (match, group1) => {
                 matchCount++;
-                if (matchCount <= 3) {
+                if (highlightLimit === -1 || matchCount <= highlightLimit) {
                     return `<mark class="search-highlight">${group1}</mark>`;
                 }
-                return group1; // Return without highlighting for matches beyond 3
+                return group1; // Return without highlighting for matches beyond limit
             });
         }
     }