fix: closes modal when clicking dismiss button

assets/controllers/alert_controller.js

@@ -14,5 +14,6 @@ export default class extends Controller {
             "3000"
         ));
         this.element.addEventListener('mouseover', () => clearTimeout(timer));
+        this.element.querySelector('.modal-close').addEventListener('click', () => this.element.remove());
     }
 }

docs/examples/.env

@@ -1,58 +1,99 @@
-# App must be served over HTTPS (requirement of Mercure)
-# Either serve behind an SSL terminating reverse proxy
-# or pass your certificates into the 'app' container.
-# Please omit any trailing slashes. The APP_URL is
-# used to generate the Mercure URL behind the scenes.
-APP_URL="https://dev.caldwell.digital"
+###################
+#    Torsearch    #
+###################
+# The version of Torsearch to run. Docker will this tag.
+TAG=0.38.0
+
+# The port for which the web server (app container) will
+# serve the application on the host.
+WEB_PORT=8004
+
+# The host directories where your media is stored.
+# If you would like to use a docker driver for a network
+# share, update the compose.yml file to reflect that.
+LOCAL_MOVIES_DIR="<enter movies dir>"
+LOCAL_TVSHOWS_DIR="<enter tvshows dir>"
+
+# Set the timezone you're in. This helps render monitored items correctly on the calendar
+TZ=America/Chicago
+
+###################
+#     Symfony     #
+###################
+# The external URL of the application where it can be reached by a browser.
+APP_URL="<enter url>"
+# Requried by Symfony Framework. Feel free to change.
 APP_SECRET="70169beadfbc8101c393cbfbba27a313"
+# Change to 'dev' to show logs in the browser.
 APP_ENV=prod
 
+
+###################
+#     Mercure     #
+###################
 # Mercure is a Caddy module built into the webserver
 # that facilitates the usage of websockets to transmit
 # real time data (download progress, etc.)
 MERCURE_JWT_SECRET="!ChangeThisMercureHubJWTSecretKey!"
+MERCURE_PUBLISHER_JWT_KEY="!ChangeThisMercureHubJWTSecretKey!"
+MERCURE_SUBSCRIBER_JWT_KEY="!ChangeThisMercureHubJWTSecretKey!"
 
+
+###################
+#    Database     #
+###################
 # Use the DATABASE_URL below to use the MariaDB container
 # provided in the example.compose.yml file, or remove this
 # line and fill in the details of your own MySQL/MariaDB server
-DATABASE_URL="mysql://root:password@database:3306/app?serverVersion=10.6.19.2-MariaDB&charset=utf8mb4"
+MYSQL_RANDOM_ROOT_PASSWORD=true
+MYSQL_DATABASE=app
+MYSQL_USER=app
+MYSQL_PASSWORD=password
+MYSQL_HOST=database
+DATABASE_URL="mysql://${MYSQL_USER}:${MYSQL_PASSWORD}@${MYSQL_HOST}:3306/${MYSQL_DATABASE}?serverVersion=10.11.2-MariaDB&charset=utf8mb4"
 
-# Fill in your MySQL/MariaDB connection details
-#DATABASE_URL="mysql://<mysql user>:<mysql pass>@<mysql host>:3306/<mysql db name>?serverVersion=10.6.19.2-MariaDB&charset=utf8mb4"
 
-# Enter your Real Debrid API key
-# This key is never saved anywhere
-# else and is passed to Torrentio
-# to retrieve download options
-REAL_DEBRID_KEY=""
+###################
+#   Real Debrid   #
+###################
+# Enter your Real Debrid API key is passed to Torrentio to retrieve download options
+REAL_DEBRID_KEY="<enter real debrid api key>"
 
+
+###################
+#      TMDB       #
+###################
 # Enter your TMDB API key
-# This is used to provide rich search results
-# when searching for media and rendering the
-# Popular Movies and TV Shows section.
-TMDB_API=""
+# This is used to provide rich search results when searching
+# for media and rendering the Popular Movies and TV Shows section.
+TMDB_API="<enter tmdb api key>"
 
-# Use your own Redis instance or use the
-# below value to use the container included
-# in the example compose.yml file.
+
+###################
+#      Redis      #
+###################
+# Use your own Redis instance or use the below value to use the
+# container included in the example compose.yml file.
 REDIS_HOST="redis://redis"
 
-### Auth ###
-# Change to "oidc" to and provide the required
-# environment variables below to use OIDC auth.
+
+###################
+#      Auth       #
+###################
+# Options: form_login, oidc, or ldap (experimental)
+# Fill the rest of the configuration based on your choice here
+# No additional config is required for form_login
 AUTH_METHOD=form_login
 
-# OIDC
-OIDC_WELL_KNOWN_URL=
-OIDC_CLIENT_ID=
-OIDC_CLIENT_SECRET=
-# Allows you to skip the login page and directly
-# rely on your IdP for auth.
-OIDC_BYPASS_FORM_LOGIN=
+### OIDC ###
+#OIDC_WELL_KNOWN_URL=
+#OIDC_CLIENT_ID=
+#OIDC_CLIENT_SECRET=
+# Allows you to skip the login page and directly rely on your IdP for auth.
+#OIDC_BYPASS_FORM_LOGIN=
 
-
-# LDAP Config: To use LDAP, enter the below fields
-# and run 'php bin/console config:set auth.method ldap'
+### LDAP (*** Experimental! ***) ###
+# LDAP Config: To use LDAP, enter the below fields and run 'php bin/console config:set auth.method ldap'
 # (LDAP is still in progress and not ready for use)
 #LDAP_HOST=
 #LDAP_PORT=

docs/examples/compose.yml

@@ -1,78 +1,55 @@
 services:
+  ### The app contains the application and web server ###
   app:
-    image: code.caldwell.digital/home/torsearch-app:latest
+    image: code.caldwell.digital/home/torsearch-app:${TAG}
     ports:
-      - '8006:80'
-    env_file:
-      - .env
-    volumes:
-      - ./downloads/movies:/var/download/movies
-      - ./downloads/tvshows:/var/download/tvshows
-    environment:
-      TZ: America/Chicago
-      MERCURE_PUBLISHER_JWT_KEY: '!ChangeThisMercureHubJWTSecretKey!'
-      MERCURE_SUBSCRIBER_JWT_KEY: '!ChangeThisMercureHubJWTSecretKey!'
+      - "${WEB_PORT}:80"
+    env_file: .env
     depends_on:
-      database:
-        condition: service_healthy
+      - database
+    volumes:
+      - ${LOCAL_MOVIES_DIR}:/var/download/movies
+      - ${LOCAL_TVSHOWS_DIR}:/var/download/tvshows
+      - mercure_data:/data
+      - mercure_config:/config
 
-  # Downloads happen in this container. Replicate this
-  # container to run multiple downloads simultaneously.
-  # Map your "movies" folder to /var/download/movies
-  # Map your "TV shows" folder to /var/download/tvshows
-  # If your folders are on another machine, use an NFS volume.
-  # This container runs a Symfony worker process.
-  # See: https://symfony.com/doc/current/messenger.html
+
+  ### The worker handles downloads and async jobs ###
   worker:
-    image: code.caldwell.digital/home/torsearch-worker:latest
+    image: code.caldwell.digital/home/torsearch-worker:${TAG}
     volumes:
-      - ./downloads/movies:/var/download/movies
-      - ./downloads/tvshows:/var/download/tvshows
-    environment:
-      TZ: America/Chicago
-    command: -vv --time-limit=3600 --limit=10
-    env_file:
-      - .env
-    restart: always
+      - ${LOCAL_MOVIES_DIR}:/var/download/movies
+      - ${LOCAL_TVSHOWS_DIR}:/var/download/tvshows
+    env_file: .env
     depends_on:
-      app:
-        condition: service_healthy
+      - app
 
-  # This container handles the monitoring for new media. When new
-  # monitors are added, jobs are periodically dispatched to this
-  # container, and the desired media is searched for and downloaded.
-  # This container runs a Symfony worker process.
-  # See: https://symfony.com/doc/current/messenger.html
+
+  ### The scheduler processes monitored media ###
   scheduler:
-    image: code.caldwell.digital/home/torsearch-scheduler:latest
+    image: code.caldwell.digital/home/torsearch-scheduler:${TAG}
     volumes:
-      - ./downloads/movies:/var/download/movies
-      - ./downloads/tvshows:/var/download/tvshows
-    env_file:
-      - .env
-    command: -vv
-    environment:
-      TZ: America/Chicago
-    restart: always
+      - ${LOCAL_MOVIES_DIR}:/var/download/movies
+      - ${LOCAL_TVSHOWS_DIR}:/var/download/tvshows
+    env_file: .env
     depends_on:
-      app:
-        condition: service_healthy
+      - app
 
+
+  #!! If using your own database, this can be omitted !!#
   database:
     image: mariadb:10.11.2
     volumes:
       - mysql:/var/lib/mysql
-    environment:
-      MYSQL_DATABASE: app
-      MYSQL_USERNAME: app
-      MYSQL_PASSWORD: password
-      MYSQL_ROOT_PASSWORD: password
+    env_file: .env
     healthcheck:
-      test: [ "CMD", "mysqladmin" ,"ping", "-h", "localhost" ]
+      test: [ "CMD", "mysqladmin", "-u", "${MYSQL_USER}", "-p", "${MYSQL_PASSWORD}" ,"ping", "-h", "localhost" ]
       interval: 5s
       timeout: 5s
       retries: 10
 
+
+  #!! If using your own redis, this can be omitted !!#
   redis:
     image: redis:latest
     volumes:
@@ -80,12 +57,6 @@ services:
     command: redis-server --maxmemory 512MB
     restart: unless-stopped
 
-  # **Optional**
-  # Provides a simple method of viewing the database
-  adminer:
-    image: adminer
-    ports:
-      - "8081:8080"
 
 volumes:
   mysql:

templates/components/Alert.html.twig

@@ -2,16 +2,14 @@
     class="alert alert-{{ type|default('success') }}"
     role="alert"
 >
-    <div class="flex items-center">
-        <svg class="shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
-            <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
-        </svg>
-
-        <h3 class="text-lg font-medium font-bold">{{ title|default('') }}</h3>
-
-        <twig:ux:icon name="ic:twotone-cancel" style="text-align:right" width="16.75px" height="16.75px" class="modal-close rounded-full align-end text-red-600 hover:text-red-700" />
-
-        <span class="sr-only">Info</span>
+    <div class="flex justify-between items-center">
+        <div class="flex items-center">
+            <svg class="shrink-0 w-4 h-4 me-2" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M10 .5a9.5 9.5 0 1 0 9.5 9.5A9.51 9.51 0 0 0 10 .5ZM9.5 4a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3ZM12 15H8a1 1 0 0 1 0-2h1v-3H8a1 1 0 0 1 0-2h2a1 1 0 0 1 1 1v4h1a1 1 0 0 1 0 2Z"/>
+            </svg>
+            <h3 class="text-lg font-medium font-bold">{{ title|default('') }}</h3>
+        </div>
+        <twig:ux:icon name="ic:twotone-cancel" width="16.75px" height="16.75px" class="modal-close rounded-full align-end text-red-600 hover:text-red-700" />
     </div>
     <div class="mt-2 text-sm w-[300px] font-bold overflow-hidden text-wrap">
         {{ message }}