Merge pull request #340 from rajnandan1/release/3.2.2

Release/3.2.2

.dockerignore

@@ -1,4 +1,7 @@
 node_modules
+.git
+.github
+.vscode
 dist
 build
 .env

.editorconfig

@@ -33,6 +33,11 @@ trim_trailing_whitespace = false
 indent_style = space
 indent_size = 2
 
+# CSS & PostCSS files
+[*.{css,postcss}]
+indent_style = space
+indent_size = 2
+
 # Markdown files
 [*.md]
 indent_style = space

.env.example

@@ -1,12 +1,26 @@
-KENER_SECRET_KEY=please_change_me
-NODE_ENV=production
-PORT=3000
-KENER_BASE_PATH=""
-RESEND_API_KEY=
-ORIGIN=http://localhost:3000
+TZ=Etc/UTC
+KENER_SECRET_KEY=please_change_me_to_something_secure
+
+# For SQLite database...
 DATABASE_URL=sqlite://./database/kener.sqlite.db
-TZ=UTC
+
+# For PostgreSQL database...
+# DATABASE_URL=postgresql://db_user:db_password@localhost:5432/kener_db
+# POSTGRES_PASSWORD=some_super_random_secure_password
+
+# For MySQL database...
+# DATABASE_URL=mysql://db_user:db_password@127.0.0.1:3306/kener_db
+# MYSQL_PASSWORD=some_super_random_secure_password
+
+KENER_BASE_PATH=""
+ORIGIN=http://localhost:3000
+
+RESEND_API_KEY=""
 RESEND_SENDER_EMAIL=Accounts <accounts@resend.dev>
 
-# DATABASE_URL=postgresql://myuser:mypassword@localhost:5432/mydatabase
-# DATABASE_URL=mysql://root:password@127.0.0.1:3306/kener
+# Likely no need to change...
+# NODE_ENV=production   # already defined in container
+# PORT=3000   # default port Kener service is exposed upon
+
+# Add the below variable if you would like to ‘white-label’ the product (aka. remove some of the attributions scattered throughout the app)
+# WHITE_LABEL=true

.github/ISSUE_TEMPLATE/bug_report.md

@@ -23,6 +23,9 @@ Which version of kener you are using.
 **Environment**
 Which environment you are using or where is it deployed. `docker`, `kubernetes`, `bare-metal`, `development`, `pm2` etc
 
+**Database**
+Which database you are using. `sqlite`, `mysql`, `postgres`
+
 **Expected behavior**
 A clear and concise description of what you expected to happen.
 

.github/workflows/generate-readme.yml

@@ -0,0 +1,83 @@
+name: Generate README
+
+on:
+  push:
+    branches:
+      - main
+    paths:
+      - 'README.template.md'
+  pull_request:
+    branches:
+      - main
+    paths:
+      - 'README.template.md'
+  workflow_dispatch:  # Allows for manual execution
+  workflow_run:  # Triggers this workflow to run when it recognizes 'publish-images' workflow has ran and successfully completed
+    workflows: ["Publish Docker Image to Registries"]
+    types:
+      - completed
+
+permissions:
+  contents: write  # Explicitly allow pushing changes
+
+jobs:
+  generate-readme:
+    name: Generate README from template
+    runs-on: ubuntu-latest
+
+    steps:
+      - name: Checkout Repository
+        uses: actions/checkout@v4.2.2
+        with:
+          fetch-depth: 0  # Fetch full history, including tags
+          persist-credentials: false  # We'll manually authenticate
+
+      - name: Configure Git
+        run: |
+          git config --global user.name "github-actions"
+          git config --global user.email "github-actions@github.com"
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4.2.0
+        with:
+          node-version: "20"
+
+      - name: Install Dependencies
+        run: npm install mustache dotenv
+
+      - name: Extract Major and Major-Minor Versions
+        run: |
+          VERSION="${{ vars.BUILD_VERSION }}"
+
+          # Check if VERSION is empty and set a fallback value
+          if [ -z "$VERSION" ]; then
+            # Fetch the latest release using Git
+            VERSION=$(git tag -l --sort=-v:refname | grep -E '^v?[0-9]+\.[0-9]+\.[0-9]+$' | head -n 1 || echo "3.1.0")
+          fi
+
+          MAJOR=$(echo "$VERSION" | cut -d. -f1)
+          MAJOR_MINOR=$(echo "$VERSION" | cut -d. -f1,2)
+
+          echo "Full version: $VERSION"
+          echo "Major version: $MAJOR"
+          echo "Major-Minor version: $MAJOR_MINOR"
+
+          # Export all as environment variables
+          echo "LATEST_VERSION=$VERSION" >> $GITHUB_ENV
+          echo "LATEST_MAJOR_VERSION=$MAJOR" >> $GITHUB_ENV
+          echo "LATEST_MAJOR_MINOR_VERSION=$MAJOR_MINOR" >> $GITHUB_ENV
+
+      - name: Generate README.md
+        env:
+          BUILD_FULL_VERSION: ${{ env.LATEST_VERSION }}  # e.g., 1.2.3
+          BUILD_MAJOR_VERSION: ${{ env.LATEST_MAJOR_VERSION}}  # e.g., 1
+          BUILD_MAJOR_MINOR_VERSION: ${{ env.LATEST_MAJOR_MINOR_VERSION }}  # e.g., 1.2
+        run: node scripts/generate-readme.js
+
+      - name: Commit and Push Changes
+        env:
+          GH_PAT: ${{ secrets.GH_PAT }}
+        run: |
+          git add README.md
+          git commit -m "Auto-generate README.md with release versions" || echo "No changes to commit"
+          git push https://x-access-token:${{ secrets.GH_PAT }}@github.com/${{ github.repository }}.git HEAD:main

.github/workflows/protect-readme.yml

@@ -0,0 +1,21 @@
+name: Prevent Direct README Changes
+
+on:
+  pull_request:
+    paths:
+      - "README.md"
+
+jobs:
+  check-readme:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4.2.2
+
+      - name: Detect direct README changes
+        run: |
+          if git diff --name-only origin/main | grep -q "README.md"; then
+            echo "❌ Direct modifications to README.md are not allowed!"
+            echo "Please update README.template.md instead."
+            exit 1
+          fi

.github/workflows/publish-images.yml

@@ -0,0 +1,156 @@
+name: Publish Docker Image to Registries
+
+on:
+  release:
+    types:
+      - published  # Runs only when a GitHub Release is published
+  workflow_dispatch:  # Allows for manual execution
+
+env:
+  ALPINE_VERSION: "23-alpine"
+  DEBIAN_VERSION: "23-slim"
+  # Registry URLs
+  DOCKERHUB_REGISTRY: docker.io
+  GITHUB_REGISTRY: ghcr.io
+  # Docker Hub image name (using Docker Hub username)
+  DOCKERHUB_IMAGE_NAME: ${{ secrets.DOCKER_USERNAME }}/${{ github.event.repository.name }}
+  # GitHub image name (formatted as `account/repo`)
+  GITHUB_IMAGE_NAME: ${{ github.repository }}
+
+jobs:
+  check-lockfile:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20'  # Adjust as needed
+
+      - name: Install dependencies
+        run: npm ci
+
+      - name: Check for lock-file changes
+        run: |
+          git diff --exit-code package-lock.json || (
+            echo "🫥 package-lock.json is outdated or missing. Please run 'npm install' and commit the updated lockfile."
+            exit 1
+          )
+
+  build-and-push-to-registries:
+    needs: check-lockfile  # Runs only after `check-lockfile` completes successfully
+    name: Push Docker images to Docker Hub and GitHub Container Registry
+    strategy:
+      matrix:
+        variant: [alpine, debian]
+    runs-on: ubuntu-latest
+    permissions:
+      actions: write
+      contents: write
+      packages: write
+      # This is used to complete the identity challenge with sigstore/fulcio when running outside of PRs.
+      id-token: write
+
+    steps:
+      - name: Check out the repo
+        uses: actions/checkout@v4.2.2
+
+      # Install the cosign tool (except on PR)
+      # https://github.com/sigstore/cosign-installer
+      - name: Install cosign
+        if: github.event_name != 'pull_request'
+        uses: sigstore/cosign-installer@v3.8.0
+        with:
+          cosign-release: 'v2.2.4'
+
+      # Set up BuildKit Docker container builder to be able to build multi-platform images and export cache
+      # https://github.com/docker/setup-buildx-action
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3.8.0
+
+      # Log in to Docker Hub (except on PR)
+      - name: Log in to Docker Hub
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3.3.0
+        with:
+          username: ${{ secrets.DOCKER_USERNAME }}
+          password: ${{ secrets.DOCKER_PASSWORD }}
+
+      # Log in to GitHub Container Registry (except on PR)
+      - name: Log in to GitHub Container Registry
+        if: github.event_name != 'pull_request'
+        uses: docker/login-action@v3.3.0
+        with:
+          registry: ${{ env.GITHUB_REGISTRY }}
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      # Combined metadata extraction for both registries
+      - name: Extract Docker metadata
+        id: meta
+        uses: docker/metadata-action@v5.6.1
+        with:
+          images: |
+            ${{ env.DOCKERHUB_IMAGE_NAME }}
+            ${{ env.GITHUB_REGISTRY }}/${{ env.GITHUB_IMAGE_NAME }}
+          tags: |
+            # Debian Variant Tags
+            type=semver,pattern={{version}},enable=${{ matrix.variant == 'debian' }}
+            type=semver,pattern={{major}}.{{minor}},enable=${{ matrix.variant == 'debian' }}
+            type=semver,pattern={{major}},enable=${{ matrix.variant == 'debian' }}
+            type=raw,value=latest,enable=${{ matrix.variant == 'debian' }}
+
+            # Alpine Variant Tags
+            type=semver,pattern={{version}},suffix=-alpine,enable=${{ matrix.variant == 'alpine' }}
+            type=semver,pattern={{major}}.{{minor}},suffix=-alpine,enable=${{ matrix.variant == 'alpine' }}
+            type=semver,pattern={{major}},suffix=-alpine,enable=${{ matrix.variant == 'alpine' }}
+            type=raw,value=alpine,enable=${{ matrix.variant == 'alpine' }}
+
+      - name: Set up QEMU
+        uses: docker/setup-qemu-action@v3.3.0
+
+      # Build and push Docker image with Buildx to both registries (don't push on PR)
+      - name: Build and push Docker image
+        id: build-and-push
+        uses: docker/build-push-action@v6.13.0
+        with:
+          context: .
+          push: ${{ github.event_name != 'pull_request' }}
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          build-args: |
+            VARIANT=${{ matrix.variant }}
+            ALPINE_VERSION=${{ env.ALPINE_VERSION }}
+            DEBIAN_VERSION=${{ env.DEBIAN_VERSION }}
+          platforms: linux/amd64,linux/arm64
+          cache-from: type=gha
+          cache-to: type=gha,mode=max
+
+      # Sign the resulting Docker image digests
+      - name: Sign the published Docker images
+        if: ${{ github.event_name != 'pull_request' }}
+        env:
+          TAGS: ${{ steps.meta.outputs.tags }}
+          DIGEST: ${{ steps.build-and-push.outputs.digest }}
+        run: |
+          echo "${TAGS}" | xargs -I {} cosign sign --yes {}@${DIGEST}
+
+      # For use in other workflows (e.g. 'generate-readme', etc.)
+      - name: Save Build Version to Repository Variable
+        if: matrix.variant == 'debian' && github.run_attempt == 1
+        run: |
+          # VERSION="${{ steps.meta.outputs.version }}"
+          VERSION=$(gh release view --json tagName -q .tagName 2>/dev/null || echo "")
+
+          # Check if VERSION is empty and set a fallback value
+          if [ -z "$VERSION" ]; then
+            VERSION=$(git tag -l --sort=-version:refname | grep -E '^(v)?[0-9]+\.[0-9]+\.[0-9]+$' | head -n 1 || echo "3.1.0")
+          fi
+          echo "VERSION=$VERSION" >> $GITHUB_ENV
+
+          echo "Setting BUILD_VERSION to $VERSION"
+          gh variable set BUILD_VERSION --body "$VERSION"
+        env:
+          GH_TOKEN: ${{ secrets.GH_PAT }}  # Needs to be PAT w/ Read access to metadata and secrets & Read and Write access to actions, actions variables, and code

.github/workflows/publishImage.yml

@@ -1,61 +0,0 @@
----
-name: Publish Docker image to Dockerhub and GHCR
-on:
-  push:
-    branches:
-      - main
-    tags:
-      - "*.*.*"
-    paths-ignore:
-      - '**/*.md'  
-      - 'docs/**' 
-jobs:
-  push_to_registry:
-    name: Push Docker image to Docker Hub
-    runs-on: ubuntu-latest
-    if: ${{ vars.DOCKERHUB_IMAGE_NAME != '' ||  vars.GHCR_IMAGE_NAME != '' }}
-    permissions:
-      packages: write
-      contents: read
-    steps:
-      - name: Check out the repo
-        uses: actions/checkout@v2
-      - name: Log in to Docker Hub
-        if: ${{ github.event_name != 'pull_request' && vars.DOCKERHUB_IMAGE_NAME != ''
-          }}
-        uses: docker/login-action@v2
-        with:
-          username: ${{ secrets.DOCKER_USERNAME }}
-          password: ${{ secrets.DOCKER_PASSWORD }}
-      - name: Login to GitHub Container Registry
-        if: ${{ github.event_name != 'pull_request' && vars.GHCR_IMAGE_NAME != '' }}
-        uses: docker/login-action@v2
-        with:
-          registry: ghcr.io
-          username: ${{ github.repository_owner }}
-          password: ${{ secrets.GITHUB_TOKEN }}
-      - name: Extract metadata (tags, labels) for Docker
-        id: meta
-        uses: docker/metadata-action@v3
-        with:
-          images: |
-            ${{ vars.DOCKERHUB_IMAGE_NAME }}
-            ${{ vars.GHCR_IMAGE_NAME }}
-          tags: |
-            type=raw,value=latest,enable=${{ endsWith(github.ref, 'main') }}
-            type=ref,event=branch,enable=${{ !endsWith(github.ref, 'main') }}
-            type=semver,pattern={{version}}
-          flavor: |
-            latest=false
-      - name: Set up QEMU
-        uses: docker/setup-qemu-action@v2
-      - name: Set up Docker Buildx
-        uses: docker/setup-buildx-action@v2
-      - name: Build and push Docker image
-        uses: docker/build-push-action@v4
-        with:
-          context: .
-          push: ${{ github.event_name != 'pull_request' && !env.ACT}}
-          tags: ${{ steps.meta.outputs.tags }}
-          labels: ${{ steps.meta.outputs.labels }}
-          platforms: linux/amd64,linux/arm64

.prettierrc

@@ -14,7 +14,7 @@
         "semi": true,
         "tabWidth": 2,
         "trailingComma": "none",
-        "printWidth": 100
+        "printWidth": 120
       }
     },
     {
@@ -24,7 +24,7 @@
         "semi": true,
         "tabWidth": 2,
         "trailingComma": "all",
-        "printWidth": 80
+        "printWidth": 120
       }
     },
     {
@@ -34,7 +34,7 @@
         "semi": false,
         "tabWidth": 2,
         "trailingComma": "none",
-        "printWidth": 100
+        "printWidth": 120
       }
     },
     {

Dockerfile

@@ -1,52 +1,148 @@
-FROM node:23
+# syntax=docker/dockerfile:1
 
-# Install necessary packages including tzdata for timezone setting
+# Global build arguments
+ARG ALPINE_VERSION=23.7.0-alpine3.21
+ARG DEBIAN_VERSION=23.7.0-bookworm-slim
+ARG VARIANT=debian
+
+#==========================================================#
+#                   STAGE 1: BUILD STAGE                    #
+#==========================================================#
+
+FROM node:${DEBIAN_VERSION} AS builder-debian
 RUN apt-get update && apt-get install -y \
-    build-essential \
-    libnode108 \
-    nodejs \
-    python3 \
-    sqlite3 \
-    libsqlite3-dev \
-    make \
-    node-gyp \
-    g++ \
-    tzdata \
-	iputils-ping && \
+        build-essential=12.9 \
+        python3=3.11.2-1+b1 \
+        sqlite3=3.40.1-2+deb12u1 \
+        libsqlite3-dev=3.40.1-2+deb12u1 \
+        make=4.3-4.1 \
+        node-gyp=9.3.0-2 \
+        g++=4:12.2.0-3 \
+        tzdata=2024b-0+deb12u1 \
+        iputils-ping=3:20221126-1+deb12u1 && \
     rm -rf /var/lib/apt/lists/*
 
-# Set the timezone environment variable and the application environment
-ARG KENER_BASE_PATH=
-ENV TZ=Etc/UTC
-ENV KENER_BASE_PATH=${KENER_BASE_PATH}
+FROM node:${ALPINE_VERSION} AS builder-alpine
+RUN apk add --no-cache --update \
+        build-base=0.5-r3 \
+        python3=3.12.9-r0 \
+        py3-pip=24.3.1-r0 \
+        make=4.4.1-r2 \
+        g++=14.2.0-r4 \
+        sqlite=3.48.0-r0 \
+        sqlite-dev=3.48.0-r0 \
+        tzdata \
+        iputils=20240905-r0
+
+FROM builder-${VARIANT} AS builder
+
+# Set environment variables
+ENV NPM_CONFIG_LOGLEVEL=error \
+    VITE_BUILD_ENV=production
 
 # Set the working directory
 WORKDIR /app
 
-# Copy package files and install dependencies
+# Copy package files for dependency installation
 COPY package*.json ./
-RUN npm install && npm cache clean --force
 
-# Copy the rest of the application code
+# Install all dependencies, including `devDependencies` (cache enabled for faster builds)
+# TODO: Possibly add `--no-audit` flag to `npm ci` to prevent `npm` from running a security audit on installed packages. (By default, `npm install` performs an audit to check for vulnerabilities in dependencies, which can slow down installation. Adding this flag would skip the audit, thus making `npm install` significantly faster for the CI/CD pipeline.)
+RUN --mount=type=cache,target=/root/.npm \
+    npm ci --no-fund && \
+    npm cache clean --force
+
+# Copy application source code
 COPY . .
 
-# remove dir src/routes/(docs)
-RUN rm -rf src/routes/\(docs\)
+# TODO: Reevaluate permissions (possibly reduce?)...
+# Remove docs directory and ensure required directories exist
+RUN rm -rf src/routes/\(docs\) \
+		static/documentation \
+		static/fonts/lato/full && \
+	mkdir -p uploads database && \
+	# TODO: Consider changing below to `chmod -R u-rwX,g=rX,o= uploads database`
+    chmod -R 750 uploads database
 
-# Ensure /app/uploads and /app/database have rw permissions
-RUN mkdir -p /app/uploads /app/database && \
-    chmod -R 777 /app/uploads /app/database
+# Build the application and remove `devDependencies`
+RUN npm run build && \
+    npm prune --omit=dev
 
-# Build the application
-RUN npm run build
+#==========================================================#
+#             STAGE 2: PRODUCTION/FINAL STAGE              #
+#==========================================================#
 
-# Argument for the port
-ARG PORT=3000
-# Set the environment variable for the port
-ENV PORT=$PORT
+FROM node:${DEBIAN_VERSION} AS final-debian
+# TODO: Consider adding `--no-install-recommends`, but will need testing (may further help reduce final build size)
+RUN apt-get update && apt-get install -y \
+        iputils-ping=3:20221126-1+deb12u1 \
+        sqlite3=3.40.1-2+deb12u1 \
+        tzdata=2024b-0+deb12u1 \
+		# TODO: Is it ok to change to `curl` here so that we don't have to maintain `wget` version mismatch between Debian architectures? (`curl` is only used for the container healthcheck and because there is an Alpine variant (best!) we probably don't care if the Debian image ends up building bigger due to `curl`.)
+		curl=7.88.1-10+deb12u8 && \
+    rm -rf /var/lib/apt/lists/*
+
+FROM node:${ALPINE_VERSION} AS final-alpine
+RUN apk add --no-cache --update \
+	iputils=20240905-r0 \
+	sqlite=3.48.0-r0 \
+	tzdata
+
+FROM final-${VARIANT} AS final
+
+ARG PORT=3000 \
+    USERNAME=node
+
+# Set environment variables
+ENV HEALTHCHECK_PORT=$PORT \
+    HEALTHCHECK_PATH= \
+    NODE_ENV=production \
+    NPM_CONFIG_LOGLEVEL=error \
+    PORT=$PORT \
+    TZ=Etc/UTC
+
+# Set the working directory
+WORKDIR /app
+
+# Copy package files build artifacts, and necessary files from builder stage
+COPY --chown=node:node --from=builder /app/src/lib/ ./src/lib/
+COPY --chown=node:node --from=builder /app/build ./build
+COPY --chown=node:node --from=builder /app/uploads ./uploads
+COPY --chown=node:node --from=builder /app/database ./database
+# TODO: Consider changing from copying `node_modules` to instead letting `npm ci --omit=dev` handle production dependencies. Right now, copying `node_modules` is leading to a smaller image, whereas letting `npm ci` handle the install in final image is slightly faster, but leads to larger image size. IMO, having a slightly longer build time (e.g. ~10 sec.) is better in the end to have a smaller image.
+COPY --chown=node:node --from=builder /app/node_modules ./node_modules
+COPY --chown=node:node --from=builder /app/migrations ./migrations
+COPY --chown=node:node --from=builder /app/seeds ./seeds
+COPY --chown=node:node --from=builder /app/static ./static
+COPY --chown=node:node --from=builder /app/entrypoint.sh ./entrypoint.sh
+COPY --chown=node:node --from=builder /app/knexfile.js ./knexfile.js
+COPY --chown=node:node --from=builder /app/main.js ./main.js
+COPY --chown=node:node --from=builder /app/openapi.json ./openapi.json
+COPY --chown=node:node --from=builder /app/openapi.yaml ./openapi.yaml
+
+# Ensure necessary directories are writable
+VOLUME ["/uploads", "/database"]
+
+# Set container timezone and make entrypoint script executable
+RUN ln -snf /usr/share/zoneinfo/$TZ /etc/localtime && echo $TZ > /etc/timezone && \
+    chmod +x ./entrypoint.sh
+	# TODO: To improve security, consider dropping unnecessary capabilities instead of granting image all network capabilities of host. (Maybe `setcap cap_net_raw+p /usr/bin/ping`, etc.) Could also drop all and then grant only the capabilities that are explicitly needed. Some examples are commented out below...
+	# setcap cap_net_bind_service=+ep /usr/local/bin/node
+	# setcap cap_net_bind_service=+ep /usr/bin/ping
+	# setcap cap_net_bind_service=+ep /usr/bin/ping6
+	# setcap cap_net_bind_service=+ep /usr/bin/tracepath
+	# setcap cap_net_bind_service=+ep /usr/bin/clockdiff
 
 # Expose the application port
 EXPOSE $PORT
 
-# Set the command to run the application
+# Add a healthcheck to the container; `wget` vs. `curl` depending on base image. Using this approach because `wget` does not actually maintain versioning across architectures, so we cannot pin a `wget` version (in above `final-debian` base, `apt-get install`) between differing architectures (e.g. arm64, amd64)
+HEALTHCHECK --interval=30s --timeout=5s --retries=3 \
+	CMD sh -c 'if [ -f "/etc/alpine-release" ]; then wget --quiet --spider http://localhost:$HEALTHCHECK_PORT$HEALTHCHECK_PATH || exit 1; else curl --silent --head --fail http://localhost:$HEALTHCHECK_PORT$HEALTHCHECK_PATH || exit 1; fi'
+
+# TODO: Revisit letting user define $PUID & $PGID overrides (e.g. `addgroup -g $PGID newgroup && adduser -D -G newgroup -u $PUID node`) as well as potentially ensure no root user exists. (Make sure no processes are running as root, first!)
+# Use a non-root user (recommended for security)
+USER $USERNAME
+
+ENTRYPOINT ["/app/entrypoint.sh"]
 CMD ["node", "main"]

README.md

@@ -7,16 +7,21 @@
 <p align="center">
 	<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/rajnandan1/kener?label=Star%20Repo&style=social">
 	<a href="https://github.com/ivbeg/awesome-status-pages"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome status page" /></a>
-	<a href="https://hub.docker.com/r/rajnandan1/kener"><img src="https://img.shields.io/docker/pulls/rajnandan1/kener" alt="Docker Kener" /></a>
-	<a href="https://awesome-selfhosted.net/tags/status--uptime-pages.html#kener"><img src="https://awesome.re/mentioned-badge.svg" alt="Awesome self hosted" /></a>
+    <a href="https://awesome-selfhosted.net/tags/status--uptime-pages.html#kener"><img src="https://awesome.re/mentioned-badge.svg" alt="Awesome self hosted" /></a>
 </p>
 
 <p align="center">
-  <a href="https://github.com/rajnandan1/kener/actions/workflows/publishImage.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/rajnandan1/kener/publishImage.yml" /></a>
+  <a href="https://hub.docker.com/r/rajnandan1/kener"><img src="https://img.shields.io/docker/pulls/rajnandan1/kener" alt="Docker Kener" /></a>
+  <a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=latest"><img alt="Docker Image Size" src="https://img.shields.io/docker/image-size/rajnandan1/kener/latest?logo=docker&logoColor=white&label=debian" /></a>
+  <a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=alpine"><img alt="Docker Image Size" src="https://img.shields.io/docker/image-size/rajnandan1/kener/alpine?logo=docker&logoColor=white&label=alpine" /></a>
+</p>
+
+<p align="center">
+  <a href="https://github.com/rajnandan1/kener/actions/workflows/publish-images.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/rajnandan1/kener/publish-images.yml" /></a>
   <a href="https://github.com/rajnandan1/kener/commit/HEAD"><img src="https://img.shields.io/github/last-commit/rajnandan1/kener/main" alt="" /></a>
   <a href="https://github.com/rajnandan1/kener/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/rajnandan1/kener.svg" /></a>
 </p>
-  
+
 <p align="center">
 	<a href="https://www.producthunt.com/posts/kener-2" target="_blank">
 		<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=kener-2&theme=light" alt="Kener on Product Hunt">
@@ -43,13 +48,19 @@
 
 ## What is Kener?
 
-Kener is status page system built with Sveltekit and NodeJS. It does not try to replace the Datadogs and Atlassian of the world. It tries to help some who wants to come up with a status page that looks nice and minimum overhead, in a modern way.
+**Kener** is a sleek and lightweight status page system built with **SvelteKit** and **NodeJS**. It’s not here to replace heavyweights like Datadog or Atlassian but rather to offer a simple, modern, and hassle-free way to set up a great-looking status page with minimal effort.
 
-It is carefully crafted to be easy to use and customize.
+Designed with **ease of use** and **customization in mind**, Kener provides all the essential features you’d expect from a status page—without unnecessary complexity.
 
-It comes with all the basic asks for a status page. It is open-source and free to use.
+### Why Kener?
 
-Kener name is derived from the word "Kene" which means "how is it going" in Assamese, then .ing because it was a cheaply available domain.
+✅ &nbsp;Minimal overhead &ndash; Set up quickly with a clean, modern UI<br>
+✅ &nbsp;Customizable &ndash; Easily tailor it to match your brand<br>
+✅ &nbsp;Open-source & free &ndash; Because great tools should be accessible to everyone
+
+### What's in a Name?
+
+“Kener” is inspired by the Assamese word _“Kene”_, meaning _“how’s it going?”_. The _‘.ing’_ was added because, well… that domain was available. 😄
 
 ## Installation
 
@@ -66,8 +77,73 @@ npm run dev
 
 ### Docker
 
-The latest image is available on DockerHub at [`rajnandan1/kener:latest`](https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=latest).
-Download and use the sample [docker-compose.yml](https://github.com/rajnandan1/kener/blob/main/docker-compose.yml).
+Official Docker images for **Kener** are available on [Docker Hub](https://hub.docker.com/r/rajnandan1/kener). Multiple versions are maintained to support different use cases.
+
+<a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2.0"><img src="https://img.shields.io/badge/Latest_Stable_Release-3.2.0-blue" alt="Kener latest stable version: 3.2.0" /></a>
+
+#### Available Tags
+
+<table>
+	<tr>
+		<th>Image Tag</th>
+		<th>Description</th>
+	</tr>
+	<tr>
+		<td align="left" colspan="2" style="color:#A81D33;text-align:left;">Debian 12 <small>(Bookwork Slim)</small> w/ Node.js v23.7.0 &nbsp;<strong><em>(default)</em></strong></td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=latest" target="_blank"><code>latest</code></td>
+		<td>Latest stable release (aka 3.2.0)</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2.0" target="_blank"><code>3.2.0</code></a></td>
+		<td>Specific release version</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2" target="_blank"><code>3.2</code></a></td>
+		<td>Major-minor version tag pointing to the latest patch (3.2.0) release within that minor version (3.2.x)</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3" target="_blank"><code>3</code></a></td>
+		<td>Major version tag pointing to the latest stable (3.2.0) release within that major version (3.x.x)</td>
+	</tr>
+	<tr>
+		<td align="left" colspan="2" style="color:#0D597F;text-align:left;">Alpine Linux 3.21 w/ Node.js v23.7.0 &nbsp;<strong><em>(smallest image size)</em></strong></td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=alpine" target="_blank"><code>alpine</code></td>
+		<td>Latest stable release (aka 3.2.0)</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2.0-alpine" target="_blank"><code>3.2.0-alpine</code></a></td>
+		<td>Specific release version</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3.2-alpine" target="_blank"><code>3.2-alpine</code></a></td>
+		<td>Major-minor version tag pointing to the latest patch (3.2.0) release within that minor version (3.2.x)</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=3-alpine" target="_blank"><code>3-alpine</code></a></td>
+		<td>Major version tag pointing to the latest stable (3.2.0) release within that major version (3.x.x)</td>
+	</tr>
+</table>
+
+#### Usage
+
+Pull the latest stable version:
+
+```sh
+docker pull rajnandan1/kener:latest
+```
+
+Or use the smaller, Alpine-based variant:
+
+```sh
+docker pull rajnandan1/kener:alpine
+```
+
+For a production setup, refer to the sample [docker-compose.yml](https://github.com/rajnandan1/kener/blob/main/docker-compose.yml).
+This keeps things clean, structured, and easy to read while preserving all the details.
 
 ### One Click
 
@@ -77,67 +153,64 @@ Download and use the sample [docker-compose.yml](https://github.com/rajnandan1/k
 
 Here are some of the features that you get out of the box. Please read the documentation to know how to use them.
 
-### Monitoring and Tracking
+### 📊 &nbsp;Monitoring and Tracking
 
--   Advanced application performance monitoring tools
--   Real-time network monitor software capabilities
--   Polls HTTP endpoint or Push data to monitor using Rest APIs
--   Adjusts Timezones for visitors
--   Categorize Monitors into different Sections
--   Cron-based scheduling for monitors. Minimum per minute
--   Construct complex API Polls - Chain, Secrets etc
--   Supports a Default Status for Monitors
--   Supports base path for hosting in k8s
--   Pre-built docker image for easy deployment
--   Automatically adjusts timezones for visitors
+- Advanced **application performance monitoring** tools
+- **Real-time network monitoring** capabilities
+- Supports **polling HTTP endpoints** or **pushing data** via REST APIs
+- **Timezone auto-adjustment** for visitors
+- Organize monitors into **custom sections**
+- **Cron-based scheduling** (minimum: **every minute**)
+- **Create complex API polls** (chaining, secrets, etc.)
+- Set a **default status** for monitors
+- Supports **base path hosting in Kubernetes (k8s)**
+- **Pre-built Docker images** for easy deployment
 
-### Customization and Branding
+### 🎨 &nbsp;Customization and Branding
 
--   Customizable status page
--   Badge generation for status and uptime of Monitors
--   Support for custom domains
--   Embed Monitor as an iframe or widget
--   Light + Dark Theme
--   Internationalization support
--   Beautifully Crafted Status Page
+- Fully **customizable status page**
+- **Badge generation** for status and uptime tracking
+- Support for **custom domains**
+- Embed monitors as **iframes or widgets**
+- **Light & Dark Mode**
+- **Internationalization (i18n) support**
+- **Sleek, beautifully crafted UI**
 
-### Incident Management
+### 🚨 &nbsp;Incident Management
 
--   Incident Management
--   Incident Communication
--   Comprehensive APIs for Incident Management
+- **Incident tracking & communication** tools
+- **Comprehensive APIs** for incident management
 
-### User Experience and Design
+### 🧑‍💻 &nbsp;User Experience and Design
 
--   Good Accessibility Score
--   Easy installation and setup
--   User-friendly interface
--   Responsive design for various devices
--   Auto SEO and Social Media ready
--   Server Side Rendering
+- **Accessible & user-friendly interface**
+- **Quick & easy installation**
+- **Responsive design** for all devices
+- **Auto SEO & Social Media ready**
+- **Server-Side Rendering (SSR) for better performance**
 
 <div align="left">
-    <img alt="Visitor Stats" src="https://widgetbite.com/stats/rajnandan"/>  
+    <img alt="Visitor Stats" src="https://widgetbite.com/stats/rajnandan"/>
 </div>
 
-## Technologies used
+## Technologies Used
 
 -   [SvelteKit](https://kit.svelte.dev/)
 -   [shadcn-svelte](https://www.shadcn-svelte.com/)
 
 ## Support Me
 
-If you are using Kener and want to support me, you can do so by sponsoring me on GitHub or buying me a coffee.
+If you’re enjoying Kener and want to support its development, consider sponsoring me on GitHub or treating me to a coffee. Your support helps keep the project growing! 🚀
 
 [Sponsor Me Using Github](https://github.com/sponsors/rajnandan1)
 
-[Buy Me a Coffee](https://www.buymeacoffee.com/rajnandan1)
+☕ &nbsp;[Buy Me a Coffee](https://www.buymeacoffee.com/rajnandan1)
 
 ![image](https://badges.pufler.dev/visits/rajnandan1/kener)
 
 ## Contributing
 
-If you want to contribute to Kener, please read the [Contributing Guide](https://github.com/rajnandan1/kener/blob/main/.github/CONTRIBUTING.md).
+If you want to contribute to Kener, please read the [Contribution Guide](https://github.com/rajnandan1/kener/blob/main/.github/CONTRIBUTING.md).
 
 ## Star History
 

README.template.md

@@ -0,0 +1,217 @@
+# Kener - Stunning Status Pages
+
+<p align="center">
+	<img src="https://kener.ing/newbg.png?v=1" width="100%" height="auto" class="rounded-lg shadow-lg" alt="kener example illustration">
+</p>
+
+<p align="center">
+	<img alt="GitHub Repo stars" src="https://img.shields.io/github/stars/rajnandan1/kener?label=Star%20Repo&style=social">
+	<a href="https://github.com/ivbeg/awesome-status-pages"><img src="https://cdn.rawgit.com/sindresorhus/awesome/d7305f38d29fed78fa85652e3a63e154dd8e8829/media/badge.svg" alt="Awesome status page" /></a>
+    <a href="https://awesome-selfhosted.net/tags/status--uptime-pages.html#kener"><img src="https://awesome.re/mentioned-badge.svg" alt="Awesome self hosted" /></a>
+</p>
+
+<p align="center">
+  <a href="https://hub.docker.com/r/rajnandan1/kener"><img src="https://img.shields.io/docker/pulls/rajnandan1/kener" alt="Docker Kener" /></a>
+  <a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=latest"><img alt="Docker Image Size" src="https://img.shields.io/docker/image-size/rajnandan1/kener/latest?logo=docker&logoColor=white&label=debian" /></a>
+  <a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=alpine"><img alt="Docker Image Size" src="https://img.shields.io/docker/image-size/rajnandan1/kener/alpine?logo=docker&logoColor=white&label=alpine" /></a>
+</p>
+
+<p align="center">
+  <a href="https://github.com/rajnandan1/kener/actions/workflows/publish-images.yml"><img alt="GitHub Workflow Status" src="https://img.shields.io/github/actions/workflow/status/rajnandan1/kener/publish-images.yml" /></a>
+  <a href="https://github.com/rajnandan1/kener/commit/HEAD"><img src="https://img.shields.io/github/last-commit/rajnandan1/kener/main" alt="" /></a>
+  <a href="https://github.com/rajnandan1/kener/issues"><img alt="GitHub issues" src="https://img.shields.io/github/issues/rajnandan1/kener.svg" /></a>
+</p>
+
+<p align="center">
+	<a href="https://www.producthunt.com/posts/kener-2" target="_blank">
+		<img src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=kener-2&theme=light" alt="Kener on Product Hunt">
+	</a>
+</p>
+
+<p align="center">
+	<picture>
+  		<source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f514/512.webp" type="image/webp">
+  		<img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f514/512.gif" alt="🔔" width="32" height="32">
+	</picture>
+	<picture>
+  		<source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.webp" type="image/webp">
+  		<img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.gif" alt="🚀" width="32" height="32">
+	</picture>
+	<picture>
+  		<source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f6a7/512.webp" type="image/webp">
+ 		<img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f6a7/512.gif" alt="🚧" width="32" height="32">
+	</picture>
+</p>
+
+| [🌍 Live Server](https://kener.ing) | [🎉 Quick Start](https://kener.ing/docs/quick-start) | [🗄 Documentation](https://kener.ing/docs/home) |
+| ----------------------------------- | ---------------------------------------------------- | ----------------------------------------------- |
+
+## What is Kener?
+
+**Kener** is a sleek and lightweight status page system built with **SvelteKit** and **NodeJS**. It’s not here to replace heavyweights like Datadog or Atlassian but rather to offer a simple, modern, and hassle-free way to set up a great-looking status page with minimal effort.
+
+Designed with **ease of use** and **customization in mind**, Kener provides all the essential features you’d expect from a status page—without unnecessary complexity.
+
+### Why Kener?
+
+✅ &nbsp;Minimal overhead &ndash; Set up quickly with a clean, modern UI<br>
+✅ &nbsp;Customizable &ndash; Easily tailor it to match your brand<br>
+✅ &nbsp;Open-source & free &ndash; Because great tools should be accessible to everyone
+
+### What's in a Name?
+
+“Kener” is inspired by the Assamese word _“Kene”_, meaning _“how’s it going?”_. The _‘.ing’_ was added because, well… that domain was available. 😄
+
+## Installation
+
+### Manual
+
+```shell
+# Clone the repository
+git clone https://github.com/rajnandan1/kener.git
+cd kener
+npm install
+cp .env.example .env
+npm run dev
+```
+
+### Docker
+
+Official Docker images for **Kener** are available on [Docker Hub](https://hub.docker.com/r/rajnandan1/kener). Multiple versions are maintained to support different use cases.
+
+<a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name={{kener_full_version}}"><img src="https://img.shields.io/badge/Latest_Stable_Release-{{kener_full_version}}-blue" alt="Kener latest stable version: {{kener_full_version}}" /></a>
+
+#### Available Tags
+
+<table>
+	<tr>
+		<th>Image Tag</th>
+		<th>Description</th>
+	</tr>
+	<tr>
+		<td align="left" colspan="2" style="color:#A81D33;text-align:left;">Debian 12 <small>(Bookwork Slim)</small> w/ Node.js v23.7.0 &nbsp;<strong><em>(default)</em></strong></td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=latest" target="_blank"><code>latest</code></td>
+		<td>Latest stable release (aka {{kener_full_version}})</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name={{kener_full_version}}" target="_blank"><code>{{kener_full_version}}</code></a></td>
+		<td>Specific release version</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name={{kener_major_minor_version}}" target="_blank"><code>{{kener_major_minor_version}}</code></a></td>
+		<td>Major-minor version tag pointing to the latest patch ({{kener_full_version}}) release within that minor version ({{kener_major_minor_version}}.x)</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name={{kener_major_version}}" target="_blank"><code>{{kener_major_version}}</code></a></td>
+		<td>Major version tag pointing to the latest stable ({{kener_full_version}}) release within that major version ({{kener_major_version}}.x.x)</td>
+	</tr>
+	<tr>
+		<td align="left" colspan="2" style="color:#0D597F;text-align:left;">Alpine Linux 3.21 w/ Node.js v23.7.0 &nbsp;<strong><em>(smallest image size)</em></strong></td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name=alpine" target="_blank"><code>alpine</code></td>
+		<td>Latest stable release (aka {{kener_full_version}})</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name={{kener_full_version}}-alpine" target="_blank"><code>{{kener_full_version}}-alpine</code></a></td>
+		<td>Specific release version</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name={{kener_major_minor_version}}-alpine" target="_blank"><code>{{kener_major_minor_version}}-alpine</code></a></td>
+		<td>Major-minor version tag pointing to the latest patch ({{kener_full_version}}) release within that minor version ({{kener_major_minor_version}}.x)</td>
+	</tr>
+	<tr>
+		<td><a href="https://hub.docker.com/r/rajnandan1/kener/tags?page=1&ordering=last_updated&name={{kener_major_version}}-alpine" target="_blank"><code>{{kener_major_version}}-alpine</code></a></td>
+		<td>Major version tag pointing to the latest stable ({{kener_full_version}}) release within that major version ({{kener_major_version}}.x.x)</td>
+	</tr>
+</table>
+
+#### Usage
+
+Pull the latest stable version:
+
+```sh
+docker pull rajnandan1/kener:latest
+```
+
+Or use the smaller, Alpine-based variant:
+
+```sh
+docker pull rajnandan1/kener:alpine
+```
+
+For a production setup, refer to the sample [docker-compose.yml](https://github.com/rajnandan1/kener/blob/main/docker-compose.yml).
+This keeps things clean, structured, and easy to read while preserving all the details.
+
+### One Click
+
+[![Deploy on Railway](https://railway.com/button.svg)](https://railway.com/template/spSvic?referralCode=1Pn7vs)
+
+## Features
+
+Here are some of the features that you get out of the box. Please read the documentation to know how to use them.
+
+### 📊 &nbsp;Monitoring and Tracking
+
+- Advanced **application performance monitoring** tools
+- **Real-time network monitoring** capabilities
+- Supports **polling HTTP endpoints** or **pushing data** via REST APIs
+- **Timezone auto-adjustment** for visitors
+- Organize monitors into **custom sections**
+- **Cron-based scheduling** (minimum: **every minute**)
+- **Create complex API polls** (chaining, secrets, etc.)
+- Set a **default status** for monitors
+- Supports **base path hosting in Kubernetes (k8s)**
+- **Pre-built Docker images** for easy deployment
+
+### 🎨 &nbsp;Customization and Branding
+
+- Fully **customizable status page**
+- **Badge generation** for status and uptime tracking
+- Support for **custom domains**
+- Embed monitors as **iframes or widgets**
+- **Light & Dark Mode**
+- **Internationalization (i18n) support**
+- **Sleek, beautifully crafted UI**
+
+### 🚨 &nbsp;Incident Management
+
+- **Incident tracking & communication** tools
+- **Comprehensive APIs** for incident management
+
+### 🧑‍💻 &nbsp;User Experience and Design
+
+- **Accessible & user-friendly interface**
+- **Quick & easy installation**
+- **Responsive design** for all devices
+- **Auto SEO & Social Media ready**
+- **Server-Side Rendering (SSR) for better performance**
+
+<div align="left">
+    <img alt="Visitor Stats" src="https://widgetbite.com/stats/rajnandan"/>
+</div>
+
+## Technologies Used
+
+-   [SvelteKit](https://kit.svelte.dev/)
+-   [shadcn-svelte](https://www.shadcn-svelte.com/)
+
+## Support Me
+
+If you’re enjoying Kener and want to support its development, consider sponsoring me on GitHub or treating me to a coffee. Your support helps keep the project growing! 🚀
+
+[Sponsor Me Using Github](https://github.com/sponsors/rajnandan1)
+
+☕ &nbsp;[Buy Me a Coffee](https://www.buymeacoffee.com/rajnandan1)
+
+![image](https://badges.pufler.dev/visits/rajnandan1/kener)
+
+## Contributing
+
+If you want to contribute to Kener, please read the [Contribution Guide](https://github.com/rajnandan1/kener/blob/main/.github/CONTRIBUTING.md).
+
+## Star History
+
+[![Star History Chart](https://api.star-history.com/svg?repos=rajnandan1/kener&type=Date)](https://star-history.com/#rajnandan1/kener&Date)

docker-compose.yml

@@ -1,26 +1,61 @@
+# Docker Compose Configuration
+# Description: This file sets up a multi-container environment for Kener (https://github.com/rajnandan1/kener).
+# Last Updated: 2025-02-08
+# Docker Compose Version: 3.8
+# Notes: Ensure that you specify a random value for the `KENER_SECRET_KEY` environment variable before running `docker-compose up -d`.
+
 version: '3.8'
+
 services:
   kener:
-    image: rajnandan1/kener:latest 
+    image: rajnandan1/kener:latest      # Change to 'rajnandan1/kener:alpine' for an even smaller image! 😁🚀
     container_name: kener
-    #env_file: .env #uncomment this, if you are using .env file
+    # env_file: custom.env              # Uncomment this if you are needing to export environment variables from a custom environment file. By default, Docker will import any variables that exist in `.env`
     environment:
-      - TZ=Etc/UTC
-      - NODE_ENV=production
-      #- PORT=3000
-      #- KENER_BASE_PATH=
-      #- RESEND_API_KEY=
-      #- ORIGIN=
-      #- KENER_SECRET_KEY=
-      #- RESEND_SENDER_EMAIL=
-      #- DATABASE_URL=
+      TZ: Etc/UTC
+      KENER_SECRET_KEY: replace_me_with_a_random_string   # Keep private!! - best to define in `.env` file or through Docker Secret
+      # DATABASE_URL: custom_db_url     # By default, a SQLite database is used - you may override the database url/type here
+      # RESEND_API_KEY: 
+      # RESEND_SENDER_EMAIL: 
 
+      ### You most likely will NOT need to change anything below this line. Be sure you know what you're doing!! (https://kener.ing/docs/deployment/#docker-environment-variables)
 
-      ### Most likely DO NOT need to change anything below this ###
-
-      #- PORT=3000 Port app listens on IN CONTAINER
+      # PORT: 3000                      # Port that app listens on in the container
+      # KENER_BASE_PATH:                # By default, Kener runs at `/`. You may change this to be, e.g. `/status`, etc. Do NOT add a trailing slash!! (more info here: https://kener.ing/docs/deployment/#docker-environment-variables)
+      # ORIGIN: http://localhost:3000
+      # NODE_ENV: production            # This is already set to "production" by default within the container
     ports:
       - '3000:3000/tcp'
     volumes:
-      - '.:/app/database:rw'
-      - '.:/app/uploads:rw'
+      - data:/app/database              # We suggest using a Docker named volume, which is more performant for databases
+      - $(pwd)/uploads:/app/uploads
+    # read_only: true                   # Uncommenting this fortifies security by marking the container's filesystem as read-only (aka no data can be written to the container's filesystem except for explicitly defined writable volumes and bind mounts, an exception has already been defined for `/database` and `/uploads`)
+    restart: unless-stopped
+    # depends_on:                       #  <-- Uncomment if you would like to use PostgreSQL or MySQL
+    #   - postgres                      #       ...instead of SQLite
+    #   - mysql                         #
+
+  # Only use below section if you would like to utilize PostgreSQL instead of Kener's default SQLite database. (Don't forget to set `DATABASE_URL` in `kener` service to be: `DATABASE_URL=postgresql://db_user:db_password@localhost:5432/kener_db`)
+  postgres:
+    image: postgres:alpine
+    name: kener_db
+    environment:
+      POSTGRES_USER: user
+      POSTGRES_PASSWORD: some_super_random_secure_password   # Best to define this in `.env` or via Docker Secret!!
+      POSTGRES_DB: kener_db
+    restart: unless-stopped
+
+  # Only use below section if you would like to utilize MySQL instead of Kener's default SQLite database. (Don't forget to set `DATABASE_URL` in `kener` service to be: `DATABASE_URL=mysql://db_user:db_password@localhost:3306/kener_db`)
+  mysql:
+    image: mariadb:11
+    name: kener_db
+    environment:
+      MYSQL_USER: user
+      MYSQL_PASSWORD: some_super_random_secure_password   # Best to define this in `.env` or via Docker Secret!!
+      MYSQL_DATABASE: kener_db
+      MYSQL_RANDOM_ROOT_PASSWORD: true
+    restart: unless-stopped
+
+volumes:
+  data:
+    name: kener_db

docs/alerting.md

@@ -64,24 +64,24 @@ Body of the webhook will be sent as below:
 
 ```json
 {
-	"id": "mockoon-9",
-	"alert_name": "Mockoon DOWN",
-	"severity": "critical",
-	"status": "TRIGGERED",
-	"source": "Kener",
-	"timestamp": "2024-11-27T04:55:00.369Z",
-	"description": "🚨 **Service Alert**: Check the details below",
-	"details": {
-		"metric": "Mockoon",
-		"current_value": 1,
-		"threshold": 1
-	},
-	"actions": [
-		{
-			"text": "View Monitor",
-			"url": "https://kener.ing/monitor-mockoon"
-		}
-	]
+    "id": "mockoon-9",
+    "alert_name": "Mockoon DOWN",
+    "severity": "critical",
+    "status": "TRIGGERED",
+    "source": "Kener",
+    "timestamp": "2024-11-27T04:55:00.369Z",
+    "description": "🚨 **Service Alert**: Check the details below",
+    "details": {
+        "metric": "Mockoon",
+        "current_value": 1,
+        "threshold": 1
+    },
+    "actions": [
+        {
+            "text": "View Monitor",
+            "url": "https://kener.ing/monitor-mockoon"
+        }
+    ]
 }
 ```
 
@@ -108,7 +108,7 @@ The discord message when alert is `TRIGGERED` will look like this
 
 The discord message when alert is `RESOLVED` will look like this
 
-![Discord](/discord_resolved.png)
+![Discord](/documentation/discord_resolved.png)
 
 ### Slack
 
@@ -118,7 +118,7 @@ The slack message when alert is `TRIGGERED` will look like this
 
 The slack message when alert is `RESOLVED` will look like this
 
-![Slack](/slack_resolved.png)
+![Slack](/documentation/slack_resolved.png)
 
 ### Add Alerts to Monitors
 

docs/changelogs.md

@@ -7,6 +7,165 @@ description: Changelogs for Kener
 
 Here are the changelogs for Kener. Changelogs are only published when there are new features or breaking changes.
 
+## v3.2.1
+
+<picture>
+  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.webp" type="image/webp">
+  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.gif" alt="🚀" width="32" height="32">
+</picture>
+
+### Features
+
+- **New Heartbeat Monitors**
+
+    - Added support for push-based monitoring via heartbeats
+    - Monitors systems that send periodic signals to confirm they're running
+    - Configurable thresholds for degraded and down states
+    - Secured with secret token authentication
+    - Accessible via simple HTTP API endpoints
+
+- **Data Interpolation Improvements**
+    - Fixed data interpolation issues for more accurate uptime calculations
+    - Improved handling of timestamp boundaries
+
+### Fixes & Improvements
+
+- **UI Enhancements**
+
+    - Better mobile responsiveness for theme toggles and controls
+    - Fixed layout issues with bottom navigation buttons
+    - Improved timezone selector display
+
+- **Data Processing**
+
+    - Fixed edge case issues with uptime calculations
+    - Improved handling of "No Data" status in summaries
+    - More accurate time range display across timezones
+
+- **Documentation**
+    - Added comprehensive documentation for Heartbeat Monitors
+    - Updated API documentation with new endpoints
+
+## v3.2.0
+
+<picture>
+  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.webp" type="image/webp">
+  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.gif" alt="🚀" width="32" height="32">
+</picture>
+
+### Features
+
+- **Improved Monitor Evaluation Functions**
+
+    - Replaced unsafe `eval()` with secure `Function()` constructors across all monitor types
+    - Added support for using modules (like cheerio) directly in evaluation functions
+
+- **Enhanced API Monitors**
+
+    - Raw response data is now passed directly to eval functions instead of base64 encoded
+    - Added `modules` parameter with access to cheerio for HTML parsing
+    - Updated default evaluation function to use the new parameter structure
+
+- **Improved TCP & Ping Monitors**
+
+    - Simplified evaluation functions with direct access to ping/TCP data
+    - Removed unnecessary base64 encoding/decoding steps
+    - Better error handling for invalid evaluation functions
+
+- **Documentation Updates**
+    - Updated all examples and documentation for the new evaluation function signatures
+    - Added more detailed explanations of input parameters
+    - Improved examples showing usage with the new parameter structure
+
+### Breaking Changes
+
+- **Monitor Evaluation Functions**
+    - Custom evaluation functions will need to be updated to the new parameter structure
+    - API monitors: `(statusCode, responseTime, responseRaw, modules)` instead of `(statusCode, responseTime, responseDataBase64)`
+    - TCP/Ping monitors: `(arrayOfPings)` instead of `(responseDataBase64)`
+
+### Fixes
+
+- Fixed "cheerio is undefined" errors in API monitor evaluations
+- Improved error handling and logging for monitor evaluation failures
+- Security enhancements by removing `eval()` usage
+
+### Migration
+
+If you're using custom evaluation functions in your monitors, you'll need to update them to the new format:
+
+#### API Monitors
+
+```javascript
+// Old format
+;(async function (statusCode, responseTime, responseDataBase64) {
+    const resp = atob(responseDataBase64)
+    // Your logic here
+})
+```
+
+```javascript
+// New format
+;(async function (statusCode, responseTime, responseRaw, modules) {
+    // responseRaw is the direct response - no need to decode
+    // Access cheerio with modules.cheerio
+    // Your logic here
+})
+```
+
+#### TCP/Ping Monitors
+
+```javascript
+// Old format
+;(async function (responseDataBase64) {
+    let arrayOfPings = JSON.parse(atob(responseDataBase64))
+    // Your logic here
+})
+```
+
+```javascript
+// New format
+;(async function (arrayOfPings) {
+    // arrayOfPings is directly available - no need to decode
+    // Your logic here
+})
+```
+
+## v3.1.8
+
+<picture>
+  <source srcset="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.webp" type="image/webp">
+  <img src="https://fonts.gstatic.com/s/e/notoemoji/latest/1f680/512.gif" alt="🚀" width="32" height="32">
+</picture>
+
+### Features
+
+- **Timezone Support & UI Toggle**
+
+    - Added timezone support using `date-fns-tz` for improved date formatting.
+    - Introduced a UI toggle in settings to switch between different timezones.
+
+- **Enhanced Incident Management**
+
+    - Improved incident filtering to prevent duplicate auto incidents when creating manual incidents.
+    - Added support for incident sources to refine incident handling.
+
+- **Dynamic Cron Job Scheduling**
+
+    - Cron jobs are now dynamically added and removed based on active monitors.
+    - Ensures jobs are triggered in the correct order and prevents duplicate incidents.
+
+- **Monitor Component Improvements**
+    - Refactored monitor component for better data display and interaction.
+    - Improved uptime calculations.
+    - Added a dropdown to select time ranges for better visibility.
+
+### Fixes & Improvements
+
+- **Refactored Incident Handling & Scheduling** for better reliability and performance.
+- **UI Responsiveness Fixes** to improve the experience on smaller screens.
+- **Dependency Updates** to support new timezone functionality and ensure stability.
+
 ## v3.0.10
 
 <picture>
@@ -16,15 +175,15 @@ Here are the changelogs for Kener. Changelogs are only published when there are
 
 ### Features
 
--   Added TCP monitors
+- Added TCP monitors
 
 ### Breaking Changes
 
--   Ping monitors will break.
+- Ping monitors will break.
 
 ### Fixes
 
--   Bug fixes in the UI
+- Bug fixes in the UI
 
 ## v3.0.9
 
@@ -35,16 +194,16 @@ Here are the changelogs for Kener. Changelogs are only published when there are
 
 ### Features
 
--   Support of SMTP for email notifications. Read more [here](/docs/triggers/#email-smtp)
--   Introduction of event type `MAINTENANCE` for incidents.
--   You can write eval function for ping now in monitors. Read more [here](/docs/monitors-ping/#eval)
--   Added category filter for monitor management.
+- Support of SMTP for email notifications. Read more [here](/docs/triggers/#email-smtp)
+- Introduction of event type `MAINTENANCE` for incidents.
+- You can write eval function for ping now in monitors. Read more [here](/docs/monitors-ping/#eval)
+- Added category filter for monitor management.
 
 ### Fixes
 
--   Support longer TLD in `siteURL` example `https://example.network`
--   Remove googleapis preconnect and preload
--   Fixed wrong action url in webhook.
+- Support longer TLD in `siteURL` example `https://example.network`
+- Remove googleapis preconnect and preload
+- Fixed wrong action url in webhook.
 
 ## v3.0.1
 
@@ -57,8 +216,8 @@ Here are the changes in this release
 
 ### Features
 
--   Support for i18n in dates.
--   Support of i18n in monitor embeds. Read more [here](/docs/embed#javascript-parameters)
+- Support for i18n in dates.
+- Support of i18n in monitor embeds. Read more [here](/docs/embed#javascript-parameters)
 
 ## v3.0.0
 
@@ -71,18 +230,18 @@ Here are the changes in this release
 
 ### Features
 
--   New APIs for creating incidents and pushing updates. Read more [here](/docs/kener-apis)
--   Incident management is now part of the admin UI and removed from the config file.
--   The UI colors have been updated to be more muted.
--   Email Notifications for incidents using [resend](https://resend.com).
--   New Kener management portal. No monitors.yaml or site.yaml needed anymore
--   Login Page and Setup Page
--   Remove Github dependency
--   Options to disable square or dot pattern
--   Support for new languages
--   Multiple DB support (mysql, postgres, sqlite3)
--   New API reference
--   New documentation site
+- New APIs for creating incidents and pushing updates. Read more [here](/docs/kener-apis)
+- Incident management is now part of the admin UI and removed from the config file.
+- The UI colors have been updated to be more muted.
+- Email Notifications for incidents using [resend](https://resend.com).
+- New Kener management portal. No monitors.yaml or site.yaml needed anymore
+- Login Page and Setup Page
+- Remove Github dependency
+- Options to disable square or dot pattern
+- Support for new languages
+- Multiple DB support (mysql, postgres, sqlite3)
+- New API reference
+- New documentation site
 
 ## v2.0.0
 
@@ -95,14 +254,14 @@ Here are the changes in this release
 
 ### Features
 
--   Added support for sqlite3 and removed dependency on file system
--   Added support for postgres database. Read more [here](/docs/database)
--   Added support for alerting. Read more [here](/docs/alerting)
--   Added color customization. Read more [here](/docs/customize-site#color)
--   Added three new customizations for home page. Read more [here](/docs/customize-site#barstyle)
-    -   `barStyle`
-    -   `barRoundness`
-    -   `summaryStyle`
+- Added support for sqlite3 and removed dependency on file system
+- Added support for postgres database. Read more [here](/docs/database)
+- Added support for alerting. Read more [here](/docs/alerting)
+- Added color customization. Read more [here](/docs/customize-site#color)
+- Added three new customizations for home page. Read more [here](/docs/customize-site#barstyle)
+    - `barStyle`
+    - `barRoundness`
+    - `summaryStyle`
 
 ### Migration
 
@@ -119,27 +278,27 @@ Here are the changes in this release
 
 ### Features
 
--   Added support for `hideURLForGet` in monitors. Read more [here](/docs/monitors)
--   New SVG badges for LIVE status. Read more [here](/docs/status-badges#live)
--   `[Breaking Change]` Removed dependency on Environment variable `PUBLIC_KENER_FOLDER`. Read more [here](#v0-0-16-migration)
--   Simplified build and deploy process
--   Added support for fonts. Read more [here](/docs/customize-site#font)
--   Added support for home page pattern. Read more [here](/docs/customize-site#pattern)
--   Added support for adding your analytics provider. Read more [here](/docs/site-analytics)
--   New Documentation Site
--   Addes support for `sqaures` pattern in home page. Read more [here](/docs/customize-site#pattern)
--   Redesigned the UI for better consistency
--   Embed now supports background color using a parameter `bgc`. Read more [here](/docs/embed#javascript-parameters)
--   Now title in `site.yaml` is `<title>` and `siteName` is actually the name of the site. Read more [here](/docs/customize-site#siteName)
+- Added support for `hideURLForGet` in monitors. Read more [here](/docs/monitors)
+- New SVG badges for LIVE status. Read more [here](/docs/status-badges#live)
+- `[Breaking Change]` Removed dependency on Environment variable `PUBLIC_KENER_FOLDER`. Read more [here](#v0-0-16-migration)
+- Simplified build and deploy process
+- Added support for fonts. Read more [here](/docs/customize-site#font)
+- Added support for home page pattern. Read more [here](/docs/customize-site#pattern)
+- Added support for adding your analytics provider. Read more [here](/docs/site-analytics)
+- New Documentation Site
+- Addes support for `sqaures` pattern in home page. Read more [here](/docs/customize-site#pattern)
+- Redesigned the UI for better consistency
+- Embed now supports background color using a parameter `bgc`. Read more [here](/docs/embed#javascript-parameters)
+- Now title in `site.yaml` is `<title>` and `siteName` is actually the name of the site. Read more [here](/docs/customize-site#siteName)
 
 ### Migration
 
 #### Source
 
--   Move data from `PUBLIC_KENER_FOLDER` to `/database` file.
--   Move `site.yaml` to `/config` folder
--   Move `monitors.yaml` to `/config` folder
+- Move data from `PUBLIC_KENER_FOLDER` to `/database` file.
+- Move `site.yaml` to `/config` folder
+- Move `monitors.yaml` to `/config` folder
 
 #### Docker
 
--   Use `-v $(pwd)/database:/app/database` and `-v $(pwd)/config:/app/config` in your docker run command
+- Use `-v $(pwd)/database:/app/database` and `-v $(pwd)/config:/app/config` in your docker run command

docs/deployment.md

@@ -56,7 +56,7 @@ ghcr.io/rajnandan1/kener:latest
 
 [Environment variables](/docs/environment-vars) can be passed with `-e` An example `docker run` command:
 
-Make sure `./database` directory is present in the root directory.
+Make sure `./database` and `./uploads` directories are present in the root directory.
 
 ### Examples
 
@@ -65,7 +65,10 @@ This example is for sqlite. You can also use postgres. Read more about it [here]
 #### sqlite
 
 ```bash
-mkdir database
+mkdir database uploads
+```
+
+```bash
 docker run \
   -v $(pwd)/database:/app/database \
   -v $(pwd)/uploads:/app/uploads \
@@ -79,6 +82,10 @@ docker run \
 
 You can also use a .env file
 
+```bash
+mkdir database uploads
+```
+
 ```bash
 docker run \
   -v $(pwd)/database:/app/database \
@@ -92,6 +99,12 @@ Or use **Docker Compose** with the example [docker-compose.yaml](https://raw.git
 
 #### Postgres
 
+```bash
+mkdir uploads
+```
+
+Database folder is not required for postgres.
+
 ```bash
 docker run \
  -p 3000:3000 \
@@ -104,6 +117,12 @@ docker run \
 
 #### MySQL
 
+```bash
+mkdir uploads
+```
+
+Database folder is not required for mysql.
+
 ```bash
 docker run \
  -p 3000:3000 \
@@ -122,6 +141,7 @@ By default kener runs on `/` but you can change it to `/status` or any other pat
 
 -   Important: The base path should _**NOT**_ have a trailing slash and should start with `/`
 -   Important: This env variable should be present during both build and run time
+-   Important: You will have to build the frontend with the same base path
 
 </div>
 

docs/environment-vars.md

@@ -93,10 +93,24 @@ export SMTP_SECURE=0
 export SMTP_FROM_EMAIL=Some Name <user@example.com>
 ```
 
+<div class="  note info ">
+
+Generally, port 465 expects implicit SSL (SMTP_SECURE: 1), while port 587 and port 25 usually use STARTTLS (SMTP_SECURE: 0).
+
+So, if you are using SMTP on port 465, set SMTP_SECURE: 1; otherwise, for ports 25 or 587, set SMTP_SECURE: 0.
+
+</div>
+
 <div class="  note danger ">
 	If you set SMTP variables, Kener will use SMTP to send emails. If you set RESEND_API_KEY, Kener will use resend to send emails. If you do both Kener will use SMTP.
 </div>
 
+<div class="  note info ">
+	
+If your SMTP provider does require username and password, you can set `SMTP_USER` and `SMTP_PASS` to `-`.
+
+</div>
+
 ## Using .env
 
 You can also use a `.env` file to set these variables. Create a `.env` file in the root of the project and add the variables like below

docs/home-page.md

@@ -21,7 +21,7 @@ A small text that will be shown below the title.
 
 <div class="border rounded-md">
 
-![Hero Section](/home_1.png)
+![Hero Section](/documentation/home_1.png)
 
 </div>
 
@@ -31,7 +31,7 @@ A small text that will be shown below the title.
 
 You can navigation links to other urls. You can add as many as you want.
 
-![Nav Section](/home_2.png)
+![Nav Section](/documentation/home_2.png)
 
 ### Icon
 
@@ -45,7 +45,7 @@ The title of the link.
 
 The URL to redirect to when the link is clicked.
 
-![Nav Section](/home_3.png)
+![Nav Section](/documentation/home_3.png)
 
 ---
 

docs/home.md

@@ -1,5 +1,5 @@
 ---
-title: Kener Documentation
+title: Kener Documentation | Open Source Status Page
 description: Kener is a feature-rich and modern status page system built with SvelteKit and NodeJS. It is open-source and free to use.
 ---
 
@@ -36,86 +36,41 @@ description: Kener is a feature-rich and modern status page system built with Sv
 	</picture>
 </div>
 <div class="flex gap-2 kener-home-links">
-	<div class="flex-1 border rounded-md py-4 px-2 text-center">
-		<a href="https://kener.ing">Live Demo</a>
-	</div>
-	<div class="flex-1 border rounded-md  py-4 px-2 text-center">
-		<a href="https://kener.ing/docs/quick-start">Quick Start</a>
-	</div>
-	<div class="flex-1 border rounded-md  py-4 px-2 text-center">
-		<a href="https://github.com/rajnandan1/kener">Clone</a>
-	</div>
-	<div class="flex-1 border rounded-md  py-4 px-2 text-center">
-		<a href="https://kener.ing/docs/deployment">Deploy</a>
-	</div>
-	<div class="flex-1 border rounded-md  py-4 px-2 text-center">
-		<a href="https://kener.ing/docs/kener-apis">APIs</a>
-	</div>
+	<a href="https://kener.ing" class="flex-1 border rounded-md py-4 px-2 text-center">
+		Live Demo
+	</a>
+	<a href="https://kener.ing/docs/quick-start" class="flex-1 border rounded-md  py-4 px-2 text-center">
+		Quick Start
+	</a>
+	<a href="https://github.com/rajnandan1/kener" class="flex-1 border rounded-md  py-4 px-2 text-center">
+		Clone
+	</a>
+	<a href="https://kener.ing/docs/deployment" class="flex-1 border rounded-md  py-4 px-2 text-center">
+		Deploy
+	</a>
+	<a href="https://kener.ing/docs/kener-apis" class="flex-1 border rounded-md  py-4 px-2 text-center">
+		APIs
+	</a>
 </div>
 
-## What is Kener?
+## Forget Boring Status Pages. Hello Kener!
 
-Kener is status page system built with Sveltekit and NodeJS. It does not try to replace the Datadogs and Atlassian of the world. It tries to help some who wants to come up with a status page that looks nice and minimum overhead, in a modern way.
+**Kener** isn't just another status page – it's a beautifully crafted, lightning-fast monitoring system that makes your services look good even when they're down. Built with modern tech (**SvelteKit** + **NodeJS**), it delivers enterprise-grade reliability monitoring without the enterprise price tag (it's completely free!).
 
-It comes with all the basic asks for a status page. It is open-source and free to use.
+### Why Teams Are Switching to Kener
 
-Kener name is derived from the word "Kene" which means "how is it going" in Assamese, then .ing because it was a
-cheaply available domain.
+- **📈 Up and running in minutes**, not days – from Docker to deployment in less time than it takes to make coffee
+- **🎭 Dark mode that actually looks good** – because your 3 AM incident responses shouldn't burn your retinas
+- **🧩 Ridiculously customizable** – make it match your brand or go wild with a unique design
+- **⚡ Blazing fast performance** – server-rendered for speed that both users and search engines love
+- **🌐 Works everywhere** – auto-adjusts to visitors' time zones and looks great on any device
+- **🔄 Real-time data** with gorgeous visualizations that make your uptime metrics pop
+- **🛠️ Modern tooling** without the bloat – everything you need, nothing you don't
 
-## Quick Deployment
+### Used by Companies That Value Simplicity and Power
 
-[![Deploy on Railway](https://railway.com/button.svg)](https://railway.com/template/spSvic?referralCode=1Pn7vs)
+From indie developers to growing startups, teams are choosing Kener when they need reliability monitoring that doesn't require a dedicated DevOps team to maintain.
 
-## Features
+"_My team set up Kener in less than an hour, and our customers love the transparency it provides. The embedded widgets on our pricing page increased conversions by showing our reliability upfront._" – A happy user
 
-### Monitoring and Tracking
-
--   Advanced application performance monitoring tools
--   Types of Monitors: HTTP, TCP, DNS, ICMP etc
--   Real-time network monitor software capabilities
--   Polls HTTP endpoint or Push data to monitor using Rest APIs
--   Handles Timezones for visitors
--   Categorize Monitors into different Sections
--   Cron-based scheduling for monitors. Minimum per minute
--   Construct complex API Polls - Chain, Secrets etc
--   Supports a Default Status for Monitors
--   Supports base path for hosting in k8s
--   Pre-built docker image for easy deployment
-
-### Customization and Branding
-
--   Customizable status page
--   Badge generation for status and uptime of Monitors
--   Support for custom domains
--   Embed Monitor as an iframe or widget
--   Light + Dark Theme
--   Internationalization support
--   Beautifully Crafted Status Page
-
-### Incident Management
-
--   Incident Management
--   Incident Communication
--   Comprehensive APIs for Incident Management
-
-### User Experience and Design
-
--   100% Accessibility Score
--   Easy installation and setup
--   User-friendly interface
--   Responsive design for various devices
--   Auto SEO and Social Media ready
--   Server Side Rendering
-
-## Technologies used
-
--   [SvelteKit](https://kit.svelte.dev/)
--   [shadcn-svelte](https://www.shadcn-svelte.com/)
-
-## Support Me
-
-If you are using Kener and want to support me, you can do so by sponsoring me on GitHub or buying me a coffee.
-
-[Sponsor Me Using Github](https://github.com/sponsors/rajnandan1)
-
-[Buy Me a Coffee](https://www.buymeacoffee.com/rajnandan1)
+## Ready to Transform Your Status Page?

docs/i18n.md

@@ -28,65 +28,68 @@ Copy and update the translation file in the `locales` folder. The translation fi
 
 ```json
 {
-	"%status for %duration": "%status for %duration",
-	"14 Days": "14 Days",
-	"30 Days": "30 Days",
-	"60 Days": "60 Days",
-	"7 Days": "7 Days",
-	"90 Days": "90 Days",
-	"Availability per Component": "Availability per Component",
-	"Back": "Back",
-	"Badge Copied": "Badge Copied",
-	"Badge": "Badge",
-	"Browse Events": "Browse Events",
-	"Code Copied": "Code Copied",
-	"Copy Code": "Copy Code",
-	"Copy Link": "Copy Link",
-	"DEGRADED": "DEGRADED",
-	"DOWN": "DOWN",
-	"Dark": "Dark",
-	"Days": "Days",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Embed this monitor using <script> or <iframe> in your app.",
-	"Embed": "Embed",
-	"Get SVG badge for this monitor": "Get SVG badge for this monitor",
-	"Get a LIVE Status for this monitor": "Get a LIVE Status for this monitor",
-	"IDENTIFIED": "IDENTIFIED",
-	"INVESTIGATING": "INVESTIGATING",
-	"Incident Updates": "Incident Updates",
-	"LIVE Status": "LIVE Status",
-	"Lasted for about %lastedFor": "Lasted for about %lastedFor",
-	"Light": "Light",
-	"Link Copied": "Link Copied",
-	"MAINTENANCE": "MAINTENANCE",
-	"MONITORING": "MONITORING",
-	"Maintenance Completed": "Maintenance Completed",
-	"Maintenance in Progress": "Maintenance in Progress",
-	"Mode": "Mode",
-	"No Data": "No Data",
-	"No Incident in %date": "No Incident in %date",
-	"No Incidents": "No Incidents",
-	"No Monitor Found": "No Monitor Found",
-	"No Updates Yet": "No Updates Yet",
-	"Ongoing Incidents": "Ongoing Incidents",
-	"Pinging": "Pinging",
-	"RESOLVED": "RESOLVED",
-	"Recent Incidents": "Recent Incidents",
-	"Recent Maintenances": "Recent Maintenances",
-	"Share this monitor using a link with others": "Share this monitor using a link with others",
-	"Share": "Share",
-	"Standard": "Standard",
-	"Started %startedAt, lasted for %lastedFor": "Started %startedAt, lasted for %lastedFor",
-	"Started %startedAt, still ongoing": "Started %startedAt, still ongoing",
-	"Starts %startedAt, will last for %lastedFor": "Starts %startedAt, will last for %lastedFor",
-	"Starts %startedAt": "Starts %startedAt",
-	"Status OK": "Status OK",
-	"Status": "Status",
-	"Theme": "Theme",
-	"Today": "Today",
-	"UP": "UP",
-	"Upcoming Maintenance": "Upcoming Maintenance",
-	"Updates": "Updates",
-	"Uptime": "Uptime"
+    "%status for %duration": "%status for %duration",
+    "14 Days": "14 Days",
+    "30 Days": "30 Days",
+    "60 Days": "60 Days",
+    "7 Days": "7 Days",
+    "90 Days": "90 Days",
+    "Availability per Component": "Availability per Component",
+    "Back": "Back",
+    "Badge Copied": "Badge Copied",
+    "Badge": "Badge",
+    "Browse Events": "Browse Events",
+    "Code Copied": "Code Copied",
+    "Copy Code": "Copy Code",
+    "Copy Link": "Copy Link",
+    "DEGRADED": "DEGRADED",
+    "DOWN": "DOWN",
+    "Dark": "Dark",
+    "Days": "Days",
+    "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Embed this monitor using <script> or <iframe> in your app.",
+    "Embed": "Embed",
+    "Get SVG badge for this monitor": "Get SVG badge for this monitor",
+    "Get a LIVE Status for this monitor": "Get a LIVE Status for this monitor",
+    "IDENTIFIED": "IDENTIFIED",
+    "INVESTIGATING": "INVESTIGATING",
+    "Incident Updates": "Incident Updates",
+    "LIVE Status": "LIVE Status",
+    "Lasted for about %lastedFor": "Lasted for about %lastedFor",
+    "Light": "Light",
+    "Link Copied": "Link Copied",
+    "MAINTENANCE": "MAINTENANCE",
+    "MONITORING": "MONITORING",
+    "Maintenance Completed": "Maintenance Completed",
+    "Maintenance in Progress": "Maintenance in Progress",
+    "Mode": "Mode",
+    "No Data": "No Data",
+    "No Incident in %date": "No Incident in %date",
+    "No Incidents": "No Incidents",
+    "No Monitor Found": "No Monitor Found",
+    "No Updates Yet": "No Updates Yet",
+    "Ongoing Incidents": "Ongoing Incidents",
+    "Pinging": "Pinging",
+    "RESOLVED": "RESOLVED",
+    "Recent Incidents": "Recent Incidents",
+    "Recent Maintenances": "Recent Maintenances",
+    "Share this monitor using a link with others": "Share this monitor using a link with others",
+    "Share": "Share",
+    "Standard": "Standard",
+    "Started %startedAt, lasted for %lastedFor": "Started %startedAt, lasted for %lastedFor",
+    "Started %startedAt, still ongoing": "Started %startedAt, still ongoing",
+    "Started %startedAt, will last for %lastedFor more": "Started %startedAt, will last for %lastedFor more",
+    "Starts %startedAt, will last for %lastedFor": "Starts %startedAt, will last for %lastedFor",
+    "Starts %startedAt": "Starts %startedAt",
+    "Status OK": "Status OK",
+    "Status": "Status",
+    "Switch to your timezone": "Switch to your timezone",
+    "Theme": "Theme",
+    "Timezone set to %tz": "Timezone set to %tz",
+    "Today": "Today",
+    "UP": "UP",
+    "Upcoming Maintenance": "Upcoming Maintenance",
+    "Updates": "Updates",
+    "Uptime": "Uptime"
 }
 ```
 
@@ -100,30 +103,30 @@ Open `src/lib/locales/locales.json` and add the locale code and the name of the
 
 ```json
 [
-	{
-		"code": "en",
-		"name": "English"
-	},
-	{
-		"code": "hi",
-		"name": "हिन्दी"
-	},
-	{
-		"code": "zh-CN",
-		"name": "中文"
-	},
-	{
-		"code": "ja",
-		"name": "日本語"
-	},
-	{
-		"code": "vi",
-		"name": "Tiếng Việt"
-	},
-	{
-		"code": "fr",
-		"name": "Français"
-	}
+    {
+        "code": "en",
+        "name": "English"
+    },
+    {
+        "code": "hi",
+        "name": "हिन्दी"
+    },
+    {
+        "code": "zh-CN",
+        "name": "中文"
+    },
+    {
+        "code": "ja",
+        "name": "日本語"
+    },
+    {
+        "code": "vi",
+        "name": "Tiếng Việt"
+    },
+    {
+        "code": "fr",
+        "name": "Français"
+    }
 ]
 ```
 
@@ -132,7 +135,7 @@ Open `src/lib/locales/locales.json` and add the locale code and the name of the
 Open `src/lib/i18n/client.js` and add the locale code to the `locales` array.
 
 ```js
-import { ru, enUS, hi, de, zhCN, vi, ja, nl, da, fr, ko } from "date-fns/locale";
+import { ru, enUS, hi, de, zhCN, vi, ja, nl, da, fr, ko } from "date-fns/locale"
 ```
 
 This should be valid for the date-fns library. You can find the list of locales [here](https://github.com/date-fns/date-fns/blob/9bb51691f201c3ec05ab832acbc5d478f2e5c47a/docs/i18nLocales.md).
@@ -140,7 +143,7 @@ This should be valid for the date-fns library. You can find the list of locales
 Next add a mapping in the `locales` object.
 
 ```js
-const locales = { ru, en: enUS, hi, dk: de, "zh-CN": zhCN, vi, ja, nl, dk: da, fr, ko };
+const locales = { ru, en: enUS, hi, dk: de, "zh-CN": zhCN, vi, ja, nl, dk: da, fr, ko }
 ```
 
 ### Step 4
@@ -155,11 +158,11 @@ DO NOT forget to raise a PR with the new translation file so that others can use
 
 There are few variables that you you should not change,
 
--   %status : This will be replaced by the status
--   %lastedFor : This will be replaced by the duration the incident lasted
--   %startedAt : This will be replaced by the time the incident started
--   %date : This will be replaced by the date
--   %duration : This will be replaced by the duration
+- %status : This will be replaced by the status
+- %lastedFor : This will be replaced by the duration the incident lasted
+- %startedAt : This will be replaced by the time the incident started
+- %date : This will be replaced by the date
+- %duration : This will be replaced by the duration
 
 ## Dates
 

docs/monitors-api.md

@@ -9,7 +9,7 @@ API monitors are used to monitor APIs. You can use API monitors to monitor the u
 
 <div class="border rounded-md">
 
-![Monitors API](/m_api.png)
+![Monitors API](/documentation/m_api.png)
 
 </div>
 
@@ -51,7 +51,7 @@ This is an anonymous JS function, it should return a **Promise**, that resolves
 > `{status:"DEGRADED", latency: 200}`.
 
 ```javascript
-(async function (statusCode, responseTime, responseDataBase64) {
+(async function (statusCode, responseTime, responseRaw, modules) {
 	let statusCodeShort = Math.floor(statusCode/100);
 	let status = 'DOWN'
     if(statusCodeShort >=2 && statusCodeShort <= 3) {
@@ -64,76 +64,98 @@ This is an anonymous JS function, it should return a **Promise**, that resolves
 })
 ```
 
--   `statusCode` **REQUIRED** is a number. It is the HTTP status code
--   `responseTime` **REQUIRED**is a number. It is the latency in milliseconds
--   `responseDataBase64` **REQUIRED** is a string. It is the base64 encoded response data. To use it you will have to decode it
+- `statusCode` **REQUIRED** is a number. It is the HTTP status code
+- `responseTime` **REQUIRED**is a number. It is the latency in milliseconds
+- `responseRaw` **REQUIRED** is the raw response of the API
+- `modules` is an object that has [`cheerio`](https://www.npmjs.com/package/cheerio) that you can use to parse HTML. `const $ = modules.cheerio.load(responseRaw)` 
 
-```js
-let decodedResp = atob(responseDataBase64);
-//if the response is a json object
-//let jsonResp = JSON.parse(decodedResp)
-```
 
-#### Example
+
+### Example 1
 
 The following example shows how to use the eval function to evaluate the response. The function checks if the status code is 2XX then the status is UP, if the status code is 5XX then the status is DOWN. If the response contains the word `Unknown Error` then the status is DOWN. If the response time is greater than 2000 then the status is DEGRADED.
 
 ```javascript
-(async function (statusCode, responseTime, responseDataBase64) {
-	const resp = atob(responseDataBase64); //convert base64 to string
+(async function (statusCode, responseTime, responseRaw, modules) {
 
-	let status = "DOWN";
+    let status = "DOWN"
 
-	//if the status code is 2XX then the status is UP
-	if (/^[2]\d{2}$/.test(statusCode)) {
-		status = "UP";
-		if (responseTime > 2000) {
-			status = "DEGRADED";
-		}
-	}
+    //if the status code is 2XX then the status is UP
+    if (/^[2]\d{2}$/.test(statusCode)) {
+        status = "UP"
+        if (responseTime > 2000) {
+            status = "DEGRADED"
+        }
+    }
 
-	//if the status code is 5XX then the status is DOWN
-	if (/^[5]\d{2}$/.test(statusCode)) status = "DOWN";
+    //if the status code is 5XX then the status is DOWN
+    if (/^[5]\d{2}$/.test(statusCode)) status = "DOWN"
 
-	if (resp.includes("Unknown Error")) {
-		status = "DOWN";
-	}
+    if (responseRaw.includes("Unknown Error")) {
+        status = "DOWN"
+    }
 
-	return {
-		status: status,
-		latency: responseTime
-	};
-});
+    return {
+        status: status,
+        latency: responseTime
+    }
+})
 ```
 
+### Example 2
+
 This next example shows how to call another API withing eval. It is scrapping the second last script tag from the response and checking if the heading is "No recent issues" then the status is UP else it is DOWN.
 
-```javascript
-(async function raj(statusCode, responseTime, responseDataBase64) {
-	let htmlString = atob(responseDataBase64);
-	const scriptTags = htmlString.match(/<script[^>]*src="([^"]+)"[^>]*>/g);
-	if (scriptTags && scriptTags.length >= 2) {
-		// Extract the second last script tag's src attribute
-		const secondLastScript = scriptTags[scriptTags.length - 2];
-		const srcMatch = secondLastScript.match(/src="([^"]+)"/);
-		const secondLastScriptSrc = srcMatch ? srcMatch[1] : null;
+```js
+(async function (statusCode, responseTime, responseRaw, modules) {
+    let htmlString = responseRaw;
+    const scriptTags = htmlString.match(/<script[^>]*src="([^"]+)"[^>]*>/g)
+    if (scriptTags && scriptTags.length >= 2) {
+        // Extract the second last script tag's src attribute
+        const secondLastScript = scriptTags[scriptTags.length - 2]
+        const srcMatch = secondLastScript.match(/src="([^"]+)"/)
+        const secondLastScriptSrc = srcMatch ? srcMatch[1] : null
 
-		let jsResp = await fetch(secondLastScriptSrc); //api call
-		let jsRespText = await jsResp.text();
-		//check if heading":"No recent issues" exists
-		let noRecentIssues = jsRespText.indexOf('heading":"No recent issues"');
-		if (noRecentIssues != -1) {
-			return {
-				status: "UP",
-				latency: responseTime
-			};
-		}
-	}
-	return {
-		status: "DOWN",
-		latency: responseTime
-	};
-});
+        let jsResp = await fetch(secondLastScriptSrc) //api call
+        let jsRespText = await jsResp.text()
+        //check if heading":"No recent issues" exists
+        let noRecentIssues = jsRespText.indexOf('heading":"No recent issues"')
+        if (noRecentIssues != -1) {
+            return {
+                status: "UP",
+                latency: responseTime
+            }
+        }
+    }
+    return {
+        status: "DOWN",
+        latency: responseTime
+    }
+})
+```
+
+### Example 3
+
+The next example shows how to use cheerio to parse bitbucket status page and check if all the components are operational. If all the components are operational then the status is UP else it is DOWN.
+
+```js
+(async function (statusCode, responseTime, responseDataBase64, modules) {
+    let html = atob(responseDataBase64)
+    const $ = modules.cheerio.load(html)
+    const components = $(".components-section .components-container .component-container")
+    let status = true
+    components.each((index, element) => {
+        const name = $(element).find(".component-name").text().trim()
+        const statusText = $(element).find(".component-status").text().trim()
+        if (statusText !== "Operational") {
+            status = false
+        }
+    })
+    return {
+        status: status ? "UP" : "DOWN",
+        latency: responseTime
+    }
+})
 ```
 
 ## Examples
@@ -153,7 +175,7 @@ This is an example to monitor google every 5 minute.
 
 <div class="border rounded-md">
 
-![Monitors API](/m_ex_website.png)
+![Monitors API](/documentation/m_ex_website.png)
 
 </div>
 
@@ -180,7 +202,7 @@ export SOME_TOKEN=some-token-example
 
 <div class="border rounded-md p-1">
 
-![Monitors API](/m_ex_2.png)
+![Monitors API](/documentation/m_ex_2.png)
 
 </div>
 
@@ -201,7 +223,7 @@ Example showing setting up a POST request every minute with a timeout of 2 secon
 
 <div class="border rounded-md p-1">
 
-![Monitors API](/m_ex_3.png)
+![Monitors API](/documentation/m_ex_3.png)
 
 </div>
 
@@ -228,7 +250,7 @@ export SERVICE_SECRET=secret2_secret
 
 <div class="border rounded-md p-1">
 
-![Monitors API](/m_ex_4.png)
+![Monitors API](/documentation/m_ex_4.png)
 
 </div>
 

docs/monitors-dns.md

@@ -9,7 +9,7 @@ DNS monitors are used to monitor DNS servers. Verify DNS queries for your server
 
 <div class="border rounded-md">
 
-![Monitors Ping](/m_dns.png)
+![Monitors Ping](/documentation/m_dns.png)
 
 </div>
 

docs/monitors-group.md

@@ -0,0 +1,40 @@
+---
+title: Group Monitors | Kener
+description: Learn how to set up and work with Group monitors in kener.
+---
+
+# Group Monitors
+
+Group monitors are used to monitor multiple monitors at once. You can use Group monitors to monitor multiple monitors at once and get notified when they are down.
+
+<div class="border rounded-md">
+
+![Monitors Group](/documentation/m_group.png)
+
+</div>
+
+## Timeout
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The timeout is used to define the time in milliseconds after which the group monitor should timeout.
+
+Let us say the group monitor runs every minute, it will expect in the same minute all the other monitors to finish. It will wait till the timeout for them to complete. If not completed within that timeout, it will be marked as down.
+
+## Monitors
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+You can add as many monitors as you want to monitor. The minimum number of monitors required is 2. The monitor can be any type of monitor.
+
+## Hide
+
+You can hide the monitors that are part of the group monitor. If you hide the monitors, the monitors inside the group will not be shown in the home page.
+
+<div class="note">
+The group status will be the worst status of the monitors in the group.
+</div>

docs/monitors-heartbeat.md

@@ -0,0 +1,112 @@
+---
+title: Heartbeat Monitors | Kener
+description: Heartbeat monitors allow you to monitor systems using a "push" based approach
+---
+
+# Heartbeat Monitors
+
+Heartbeat monitors allow you to monitor systems using a "push" based approach, where your services send signals (or "heartbeats") to Kener on a regular basis. If Kener doesn't receive a heartbeat within the configured time period, it will mark the system as degraded or down.
+
+This is useful for monitoring services that:
+
+- Run on a schedule
+- Cannot be directly accessed for pull-based monitoring
+- Need to report their own health status
+
+## How It Works
+
+1. You configure a heartbeat monitor in Kener
+2. Kener provides a unique URL endpoint for your service to ping
+3. Your service sends HTTP requests to this endpoint at regular intervals
+4. If Kener doesn't receive a ping within the configured time window, it will mark the service as degraded or down
+
+## Setting Up a Heartbeat Monitor
+
+To create a heartbeat monitor:
+
+1. Navigate to the Monitors page in the dashboard
+2. Click "Add Monitor"
+3. Select "Heartbeat" as the monitor type
+4. Configure the following settings:
+
+<div class="border rounded-md">
+
+![Heartbeat Monitor Configuration](/documentation/m_hb.png)
+
+</div>
+
+### Configuration Options
+
+| Option                   | Description                                                                                  |
+| ------------------------ | -------------------------------------------------------------------------------------------- |
+| Secret String            | A unique secret that authenticates your heartbeat requests                                   |
+| Degraded After (Minutes) | Number of minutes after which the service is considered degraded if no heartbeat is received |
+| Down After (Minutes)     | Number of minutes after which the service is considered down if no heartbeat is received     |
+
+## Sending Heartbeats
+
+Your service needs to send HTTP requests to the Kener heartbeat URL. Both GET and POST requests are supported.
+
+### Endpoint Format
+
+```
+https://<your-kener-instance>/api/heartbeat/<tag>:<secretString>
+```
+
+Where:
+
+- `<tag>` is the tag you configured for your monitor
+- `<secretString>` is the secret you configured during setup
+
+### Example
+
+If your monitor has:
+
+- Tag: `nightly-backup`
+- Secret String: `super-secret-key`
+
+Your service should send requests to:
+
+```
+https://<your-kener-instance>/api/heartbeat/nightly-backup:super-secret-key
+```
+
+You can use any HTTP client to send these requests, such as curl:
+
+```bash
+curl https://<your-kener-instance>/api/heartbeat/nightly-backup:super-secret-key
+```
+
+Or in a scheduled script:
+
+```bash
+#!/bin/bash
+# Run your task here
+./perform-backup.sh
+
+# Send heartbeat to Kener
+curl https://<your-kener-instance>/api/heartbeat/nightly-backup:super-secret-key
+```
+
+## Monitoring State
+
+The monitor status works as follows:
+
+- **UP**: Heartbeats are being received within the configured time windows
+- **DEGRADED**: No heartbeat has been received for longer than the "Degraded After" time period
+- **DOWN**: No heartbeat has been received for longer than the "Down After" time period
+
+## Security Considerations
+
+- Keep your secret string confidential, as anyone with knowledge of it can send heartbeats
+- Consider using HTTPS for your Kener instance to encrypt heartbeat communications
+- Rotate the secret string periodically by updating the monitor configuration
+
+## Best Practices
+
+- Set the "Degraded After" time slightly longer than your expected interval between heartbeats
+- Set the "Down After" time based on your SLA requirements
+- For critical systems, consider sending heartbeats more frequently than required
+- Add logging in your service to track successful and failed heartbeat attempts
+
+Heartbeat monitors provide a simple but effective way to ensure your scheduled tasks and services are running properly, without requiring external polling.

docs/monitors-ping.md

@@ -9,7 +9,7 @@ Ping monitors are used to monitor livenees of your servers. You can use Ping mon
 
 <div class="border rounded-md">
 
-![Monitors Ping](/m_ping.png)
+![Monitors Ping](/documentation/m_ping.png)
 
 </div>
 
@@ -32,29 +32,25 @@ This is an anonymous JS function, it should return a **Promise**, that resolves
 > `{status:"DEGRADED", latency: 200}`.
 
 ```javascript
-(async function (responseDataBase64) {
-	let arrayOfPings = JSON.parse(atob(responseDataBase64));
-	let latencyTotal = arrayOfPings.reduce((acc, ping) => {
-		return acc + ping.latency;
-	}, 0);
+(async function (arrayOfPings) {
+    let latencyTotal = arrayOfPings.reduce((acc, ping) => {
+        return acc + ping.latency
+    }, 0)
 
-	let alive = arrayOfPings.reduce((acc, ping) => {
-		return acc && ping.alive;
-	}, true);
+    let alive = arrayOfPings.reduce((acc, ping) => {
+        return acc && ping.alive
+    }, true)
 
-	return {
-		status: alive ? "UP" : "DOWN",
-		latency: latencyTotal / arrayOfPings.length
-	};
-});
+    return {
+        status: alive ? "UP" : "DOWN",
+        latency: latencyTotal / arrayOfPings.length
+    }
+})
 ```
 
--   `responseDataBase64` **REQUIRED** is a string. It is the base64 encoded response data. To use it you will have to decode it and the JSON parse it. Once parse it will be an array of objects.
+-   `arrayOfPings` **REQUIRED** is an array of Ping Response Objects as shown below.
 
-```js
-let decodedResp = atob(responseDataBase64);
-let jsonResp = JSON.parse(decodedResp);
-console.log(jsonResp);
+```json
 /*
 [
   {
@@ -93,7 +89,7 @@ console.log(jsonResp);
 
 ### Understanding the Input
 
-The input to the eval function is a base64 encoded string. You will have to decode it and then parse it to get the array of objects. Each object in the array represents the ping response of a host.
+Each object in the array represents the ping response of a host.
 
 -   `alive` is a boolean. It is true if the host is alive and false if the host is down.
 -   `min` is a string. It is the minimum latency of the pings.
@@ -109,28 +105,27 @@ The input to the eval function is a base64 encoded string. You will have to deco
 The following example shows how to use the eval function to evaluate the response. The function checks if the combined latency is more 10ms then returns `DEGRADED`.
 
 ```javascript
-(async function (responseDataBase64) {
-	let arrayOfPings = JSON.parse(atob(responseDataBase64));
-	let latencyTotal = arrayOfPings.reduce((acc, ping) => {
-		return acc + ping.latency;
-	}, 0);
+(async function (arrayOfPings) {
+    let latencyTotal = arrayOfPings.reduce((acc, ping) => {
+        return acc + ping.latency
+    }, 0)
 
-	let areAllOpen = arrayOfPings.reduce((acc, ping) => {
-		return acc && ping.alive;
-	}, true);
+    let areAllOpen = arrayOfPings.reduce((acc, ping) => {
+        return acc && ping.alive
+    }, true)
 
-	let avgLatency = latencyTotal / arrayOfPings.length;
+    let avgLatency = latencyTotal / arrayOfPings.length
 
-	if (areAllOpen && avgLatency > 10) {
-		return {
-			status: "DEGRADED",
-			latency: avgLatency
-		};
-	}
+    if (areAllOpen && avgLatency > 10) {
+        return {
+            status: "DEGRADED",
+            latency: avgLatency
+        }
+    }
 
-	return {
-		status: areAllOpen ? "UP" : "DOWN",
-		latency: avgLatency
-	};
-});
+    return {
+        status: areAllOpen ? "UP" : "DOWN",
+        latency: avgLatency
+    }
+})
 ```

docs/monitors-sql.md

@@ -0,0 +1,63 @@
+---
+title: SQL Monitors | Kener
+description: Monitor a SQL database
+---
+
+# SQL Monitors
+
+SQL monitors are used to monitor a SQL database. You can monitor a SQL database by adding the database connection details to the monitor. The SQL monitor will check the database connection and notify you if the database connection is down.
+
+<div class="border rounded-md">
+
+![Monitors SQL](/documentation/m_sql.png)
+
+</div>
+
+## Database Type
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The database type is the type of the database you want to monitor. The database type should be one of the following values:
+
+- mysql
+- postgres
+
+Instead of giving the connection string as plain text you can add environment variables to the connection string. The environment variables should be in the format of `$`. The environment variables should be defined in the `.env` file.
+
+Example: `mysql://$MYSQL_USER:$MYSQL_PASSWORD@$MYSQL_HOST:$MYSQL_PORT/$MYSQL_DATABASE`
+
+Make sure to define the environment variables in the `.env` file as shown below
+
+```env
+MYSQL_USER=root
+MYSQL_PASSWORD=password
+MYSQL_HOST=localhost
+MYSQL_PORT=3306
+MYSQL_DATABASE=database
+```
+
+## Timeout
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The timeout is the time in milliseconds to wait for the database connection to respond.
+
+## Connection String
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The connection string is the connection string of the database you want to monitor. The connection string should be a valid connection string for the database type you have selected.
+
+## SQL Query
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The SQL query is the query you want to run on the database. The SQL query should be a valid SQL query for the database type you have selected.

docs/monitors-ssl.md

@@ -0,0 +1,52 @@
+---
+title: SSL Monitors | Kener
+description: Monitor the SSL certificate of a domain
+---
+
+# SSL Monitors
+
+SSL monitors are used to monitor the SSL certificate of a domain. You can monitor the SSL certificate of a domain by adding the domain name to the monitor. The SSL monitor will check the SSL certificate of the domain and notify you if the SSL certificate is about to expire.
+
+<div class="border rounded-md">
+
+![Monitors SSL](/documentation/m_ssl.png)
+
+</div>
+
+## Host
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The host is the domain name of the website you want to monitor. The host should be a valid domain name.
+
+## Port
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+The port is the ssl port of the website you want to monitor. The default ssl port is 443.
+
+## Degraded If
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+Set this to the number of hours that still remains for the certificate to expire. If the certificate is about to expire in the given number of hours, the monitor status will be set to degraded. Example if you send the value to be 24, the monitor status will be set to degraded if the certificate is about to expire in 24 hours.
+
+## Down If
+
+<span class="text-red-500 text-xs font-semibold">
+	REQUIRED
+</span>
+
+Set this to the number of hours that still remains for the certificate to expire. If the certificate is about to expire in the given number of hours, the monitor status will be set to down. Example if you send the value to be 12, the monitor status will be set to down if the certificate is about to expire in 12 hours.
+
+<div class="note">
+
+`Degraded If` should be more than `Down If`.
+
+</div>

docs/monitors-tcp.md

@@ -5,11 +5,11 @@ description: Learn how to set up and work with TCP monitors in kener.
 
 # TCP Monitors
 
-TCP monitors are used to monitor the livenees of your servers. You can use TCP monitors to monitor the uptime of your servers and get notified when they are down.
+TCP monitors are used to monitor the liveness of your servers. You can use TCP monitors to monitor the uptime of your servers and get notified when they are down.
 
 <div class="border rounded-md">
 
-![Monitors TCP](/m_tcp.png)
+![Monitors TCP](/documentation/m_tcp.png)
 
 </div>
 
@@ -17,10 +17,10 @@ TCP monitors are used to monitor the livenees of your servers. You can use TCP m
 
 You can add as many hosts as you want to monitor. The host can be an IP(IP4 and IP6) address or a domain name.
 
--   Type: Choose the type of host you want to monitor. It can be either `IP4` or `IP6` or `DOMAIN`.
--   Host: Enter the IP address or domain name of the host you want to monitor.
--   Port: Enter the port number of the host you want to monitor.
--   Timeout: Enter the timeout in milliseconds for each ping request of each host
+- Type: Choose the type of host you want to monitor. It can be either `IP4` or `IP6` or `DOMAIN`.
+- Host: Enter the IP address or domain name of the host you want to monitor.
+- Port: Enter the port number of the host you want to monitor.
+- Timeout: Enter the timeout in milliseconds for each ping request of each host
 
 ## Eval
 
@@ -32,33 +32,29 @@ This is an anonymous JS function, it should return a **Promise**, that resolves
 > `{status:"DEGRADED", latency: 200}`.
 
 ```javascript
-(async function (responseDataBase64) {
-	let arrayOfPings = JSON.parse(atob(responseDataBase64));
-	let latencyTotal = arrayOfPings.reduce((acc, ping) => {
-		return acc + ping.latency;
-	}, 0);
+(async function (arrayOfPings) {
+    let latencyTotal = arrayOfPings.reduce((acc, ping) => {
+        return acc + ping.latency
+    }, 0)
 
-	let alive = arrayOfPings.reduce((acc, ping) => {
-		if (ping.status === "open") {
-			return acc && true;
-		} else {
-			return false;
-		}
-	}, true);
+    let alive = arrayOfPings.reduce((acc, ping) => {
+        if (ping.status === "open") {
+            return acc && true
+        } else {
+            return false
+        }
+    }, true)
 
-	return {
-		status: alive ? "UP" : "DOWN",
-		latency: latencyTotal / arrayOfPings.length
-	};
-});
+    return {
+        status: alive ? "UP" : "DOWN",
+        latency: latencyTotal / arrayOfPings.length
+    }
+})
 ```
 
--   `responseDataBase64` **REQUIRED** is a string. It is the base64 encoded response data. To use it you will have to decode it and the JSON parse it. Once parse it will be an array of objects.
+- `arrayOfPings` **REQUIRED** is an array of TCP Response Objects as shown below.
 
-```js
-let decodedResp = atob(responseDataBase64);
-let jsonResp = JSON.parse(decodedResp);
-console.log(jsonResp);
+```json
 /*
 [
   {
@@ -88,48 +84,47 @@ console.log(jsonResp);
 
 ### Understanding the Input
 
-The input to the eval function is a base64 encoded string. You will have to decode it and then parse it to get the array of objects. Each object in the array represents the ping response of a host.
+Each object in the array represents the tcp response of a host.
 
--   `host`: The host that was pinged.
--   `port`: The port that was pinged. Defaults to 80 if not provided.
--   `type`: The type of IP address. Can be `IP4` or `IP6`.
--   `status`: The status of the ping. Can be `open` , `error` or `timeout`.
-    -   `open`: The host is reachable.
-    -   `error`: There was an error while pinging the host.
-    -   `timeout`: The host did not respond in time.
--   `latency`: The time taken to ping the host. This is in milliseconds.
+- `host`: The host that was pinged.
+- `port`: The port that was pinged. Defaults to 80 if not provided.
+- `type`: The type of IP address. Can be `IP4` or `IP6`.
+- `status`: The status of the ping. Can be `open` , `error` or `timeout`.
+    - `open`: The host is reachable.
+    - `error`: There was an error while pinging the host.
+    - `timeout`: The host did not respond in time.
+- `latency`: The time taken to ping the host. This is in milliseconds.
 
 ### Example
 
 The following example shows how to use the eval function to evaluate the response. The function checks if the combined latency is more 10ms then returns `DEGRADED`.
 
 ```javascript
-(async function (responseDataBase64) {
-	let arrayOfPings = JSON.parse(atob(responseDataBase64));
-	let latencyTotal = arrayOfPings.reduce((acc, ping) => {
-		return acc + ping.latency;
-	}, 0);
+(async function (arrayOfPings) {
+    let latencyTotal = arrayOfPings.reduce((acc, ping) => {
+        return acc + ping.latency
+    }, 0)
 
-	let areAllOpen = arrayOfPings.reduce((acc, ping) => {
-		if (ping.status === "open") {
-			return acc && true;
-		} else {
-			return false;
-		}
-	}, true);
+    let areAllOpen = arrayOfPings.reduce((acc, ping) => {
+        if (ping.status === "open") {
+            return acc && true
+        } else {
+            return false
+        }
+    }, true)
 
-	let avgLatency = latencyTotal / arrayOfPings.length;
+    let avgLatency = latencyTotal / arrayOfPings.length
 
-	if (areAllOpen && avgLatency > 10) {
-		return {
-			status: "DEGRADED",
-			latency: avgLatency
-		};
-	}
+    if (areAllOpen && avgLatency > 10) {
+        return {
+            status: "DEGRADED",
+            latency: avgLatency
+        }
+    }
 
-	return {
-		status: areAllOpen ? "UP" : "DOWN",
-		latency: avgLatency
-	};
-});
+    return {
+        status: areAllOpen ? "UP" : "DOWN",
+        latency: avgLatency
+    }
+})
 ```

docs/monitors.md

@@ -13,7 +13,7 @@ Click on the ➕ to add a monitor.
 
 <div class="border rounded-md">
 
-![Monitors Main](/m_main.png)
+![Monitors Main](/documentation/m_main.png)
 
 </div>
 
@@ -109,15 +109,15 @@ To monitor the ping, you need to provide the IP address or the domain name. If t
 
 To add a trigger to a monitor make sure you have created a trigger. You can read more about triggers [here](/docs/triggers).
 
--   Click on the 🔔 icon on the top right corner of the monitor.
--   Add details for either DOWN or DEGRADED.
-    -   Failure Threshold(Required): The number of consecutive failures before the trigger is activated.
-    -   Success Threshold(Required): The number of consecutive successes before the trigger is deactivated.
-    -   Create Incident: Chose whether to create an incident or not when the trigger is activated. The incident will be created in Github. So make sure you have set up the Github token in the environment variables. The incident will be closed when the monitor is back to UP.
-    -   Severity (Required): The severity of the incident. It can be `Critcal` or `Warning`.
-    -   Custom Message (Required): Add your owner alert message.
-    -   Choose Triggers: Choose the triggers you want to activate the trigger. You can choose multiple triggers.
-    -   It will take upto 1 minute for the trigger to be activated.
+- Click on the 🔔 icon on the top right corner of the monitor.
+- Add details for either DOWN or DEGRADED.
+    - Failure Threshold(Required): The number of consecutive failures before the trigger is activated.
+    - Success Threshold(Required): The number of consecutive successes before the trigger is deactivated.
+    - Create Incident: Chose whether to create an incident or not when the trigger is activated. The incident will be created in Github. So make sure you have set up the Github token in the environment variables. The incident will be closed when the monitor is back to UP.
+    - Severity (Required): The severity of the incident. It can be `Critcal` or `Warning`.
+    - Custom Message (Required): Add your owner alert message.
+    - Choose Triggers: Choose the triggers you want to activate the trigger. You can choose multiple triggers.
+    - It will take upto 1 minute for the trigger to be activated.
 
 ---
 
@@ -135,6 +135,17 @@ You can activate the monitor by switching the toggle to on. Activation a monitor
 
 <div class="note info">
 
-Any changes in the a live monitor will take one minute to reflect.
+Any changes in the a live monitor will take 2 minutes to reflect.
 
 </div>
+
+## Supported Monitors
+
+- [API Monitors](/docs/monitors-api)
+- [DNS Monitors](/docs/monitors-dns)
+- [PING Monitors](/docs/monitors-ping)
+- [TCP Monitors](/docs/monitors-tcp)
+- [SQL Monitors](/docs/monitors-sql)
+- [SSL Monitors](/docs/monitors-ssl)
+- [HEARTBEAT Monitors](/docs/monitors-heartbeat)
+- [GROUP Monitors](/docs/monitors-group)

docs/quick-start.md

@@ -9,9 +9,9 @@ Here is a demonstration of how to get started with Kener in seconds
 
 ## Requirements
 
--   Node.js Minimum version required is `v18`.
--   Git
--   sqlite3
+- Node.js Minimum version required is `v18`.
+- Git
+- sqlite3
 
 ## Clone the repository
 
@@ -54,9 +54,9 @@ Status Page Manage Portal will be at [http://localhost:3000/manage/app/site](htt
 
 If this is the first time your are launching kener then you would be redirected to the [set up page](/manage/setup). Fill in the details and click on `Let's Go` button.
 
--   **Name**: Your Name
--   **Email**: Your Email
--   **Password**: Your Password
+- **Name**: Your Name
+- **Email**: Your Email
+- **Password**: Your Password
 
 Please note that the email should be a valid email address and password should be atleast 8 characters long with uppercase lowercase and numbers.
 
@@ -64,13 +64,19 @@ Please note that the email should be a valid email address and password should b
 
 Once you have created the user, you can login with the credentials you have provided by going to the [login page](/manage/signin)
 
+## Video Tutorial
+
+You can watch the video tutorial on how to get started with Kener
+
+[![Kener Video Tutorial](https://img.youtube.com/vi/4L9PnWPqMPw/0.jpg)](https://www.youtube.com/watch?v=4L9PnWPqMPw)
+
 ## Next Steps
 
 Learn how to configure kener by going through one of the topics
 
--   [Monitors](/docs/monitors): Learn how to set up and work with monitors in kener.
--   [Triggers](/docs/triggers): Learn how to set up and work with triggers in kener.
--   [Environment Variables](/docs/environment-vars): Learn how to set up and work with environment variables in kener.
--   [API](/docs/kener-apis): Learn how to use the API in kener.
--   [Databases](/docs/database): Learn how to set up and work with databases in kener.
--   [Theme](/docs/theme): Learn how to set up and work with theme in kener.
+- [Monitors](/docs/monitors): Learn how to set up and work with monitors in kener.
+- [Triggers](/docs/triggers): Learn how to set up and work with triggers in kener.
+- [Environment Variables](/docs/environment-vars): Learn how to set up and work with environment variables in kener.
+- [API](/docs/kener-apis): Learn how to use the API in kener.
+- [Databases](/docs/database): Learn how to set up and work with databases in kener.
+- [Theme](/docs/theme): Learn how to set up and work with theme in kener.

docs/site.md

@@ -19,11 +19,11 @@ Example: `Kener - Open-Source and Modern looking Node.js Status Page for Effortl
 
 ```html
 <title>
-	Kener - Open-Source and Modern looking Node.js Status Page for Effortless Incident Management
+    Kener - Open-Source and Modern looking Node.js Status Page for Effortless Incident Management
 </title>
 ```
 
-![Site Title](/ms_1.png)
+![Site Title](/documentation/ms_1.png)
 
 ## Site Name
 
@@ -33,7 +33,7 @@ Example: `Kener - Open-Source and Modern looking Node.js Status Page for Effortl
 
 This will be shown as a brand name on the status page on the nav bar top left.
 
-![Site Name](/s_2.png)
+![Site Name](/documentation/s_2.png)
 
 ## Home Location
 

docs/structure.json

@@ -1,166 +1,187 @@
 {
-	"sidebar": [
-		{
-			"sectionTitle": "Getting Started",
-			"children": [
-				{
-					"title": "Introduction",
-					"link": "/docs/home",
-					"file": "/home.md"
-				},
-				{
-					"title": "Get Started",
-					"link": "/docs/quick-start",
-					"file": "/quick-start.md"
-				},
-				{
-					"title": "Concepts",
-					"link": "/docs/concepts",
-					"file": "/concepts.md"
-				},
+  "sidebar": [
+    {
+      "sectionTitle": "Getting Started",
+      "children": [
+        {
+          "title": "Introduction",
+          "link": "/docs/home",
+          "file": "/home.md"
+        },
+        {
+          "title": "Get Started",
+          "link": "/docs/quick-start",
+          "file": "/quick-start.md"
+        },
+        {
+          "title": "Concepts",
+          "link": "/docs/concepts",
+          "file": "/concepts.md"
+        },
 
-				{
-					"title": "Deployment",
-					"link": "/docs/deployment",
-					"file": "/deployment.md"
-				},
-				{
-					"title": "Databases",
-					"link": "/docs/database",
-					"file": "/database.md"
-				}
-			]
-		},
-		{
-			"sectionTitle": "Guides",
-			"children": [
-				{
-					"title": "Setup Environment",
-					"link": "/docs/environment-vars",
-					"file": "/environment-vars.md"
-				},
-				{
-					"title": "Use Badges",
-					"link": "/docs/status-badges",
-					"file": "/status-badges.md"
-				},
-				{
-					"title": "Setup Monitors",
-					"link": "/docs/monitors",
-					"file": "/monitors.md"
-				},
-				{
-					"title": "API/Website Monitor",
-					"link": "/docs/monitors-api",
-					"file": "/monitors-api.md"
-				},
-				{
-					"title": "Ping Monitor",
-					"link": "/docs/monitors-ping",
-					"file": "/monitors-ping.md"
-				},
-				{
-					"title": "TCP Monitor",
-					"link": "/docs/monitors-tcp",
-					"file": "/monitors-tcp.md"
-				},
-				{
-					"title": "DNS Monitor",
-					"link": "/docs/monitors-dns",
-					"file": "/monitors-dns.md"
-				},
-				{
-					"title": "Setup Triggers",
-					"link": "/docs/triggers",
-					"file": "/triggers.md"
-				},
-				{
-					"title": "Setup Site",
-					"link": "/docs/site",
-					"file": "/site.md"
-				},
-				{
-					"title": "Setup Github",
-					"link": "/docs/gh-setup",
-					"file": "/gh-setup.md"
-				},
-				{
-					"title": "Setup SEO",
-					"link": "/docs/seo",
-					"file": "/seo.md"
-				},
-				{
-					"title": "Setup Home",
-					"link": "/docs/home-page",
-					"file": "/home-page.md"
-				},
-				{
-					"title": "Setup Theme",
-					"link": "/docs/theme",
-					"file": "/theme.md"
-				},
-				{
-					"title": "View Alerts",
-					"link": "/docs/alerts",
-					"file": "/alerts.md"
-				},
-				{
-					"title": "API Keys",
-					"link": "/docs/apikeys",
-					"file": "/apikeys.md"
-				},
+        {
+          "title": "Deployment",
+          "link": "/docs/deployment",
+          "file": "/deployment.md"
+        },
+        {
+          "title": "Databases",
+          "link": "/docs/database",
+          "file": "/database.md"
+        }
+      ]
+    },
+    {
+      "sectionTitle": "Guides",
+      "children": [
+        {
+          "title": "Setup Environment",
+          "link": "/docs/environment-vars",
+          "file": "/environment-vars.md"
+        },
+        {
+          "title": "Use Badges",
+          "link": "/docs/status-badges",
+          "file": "/status-badges.md"
+        },
+        {
+          "title": "Setup Monitors",
+          "link": "/docs/monitors",
+          "file": "/monitors.md"
+        },
 
-				{
-					"title": "Incident Management",
-					"link": "/docs/incident-management",
-					"file": "/incident-management.md"
-				},
-				{
-					"title": "Embed",
-					"link": "/docs/embed",
-					"file": "/embed.md"
-				},
-				{
-					"title": "Custom JS/CSS",
-					"link": "/docs/custom-js-css-guide",
-					"file": "/custom-js-css-guide.md"
-				},
-				{
-					"title": "Internationalization",
-					"link": "/docs/i18n",
-					"file": "/i18n.md"
-				}
-			]
-		},
-		{
-			"sectionTitle": "API Reference",
-			"children": [
-				{
-					"title": "Kener APIs",
-					"link": "/docs/kener-apis",
-					"file": "/kener-apis.md"
-				}
-			]
-		},
-		{
-			"sectionTitle": "Help",
-			"children": [
-				{
-					"title": "Fonts",
-					"link": "/docs/custom-fonts",
-					"file": "/custom-fonts.md"
-				},
-				{
-					"title": "Changelogs",
-					"link": "/docs/changelogs",
-					"file": "/changelogs.md"
-				},
-				{
-					"title": "Roadmap",
-					"link": "/docs/roadmap",
-					"file": "/roadmap.md"
-				}
-			]
-		}
-	]
+        {
+          "title": "Setup Triggers",
+          "link": "/docs/triggers",
+          "file": "/triggers.md"
+        },
+        {
+          "title": "Setup Site",
+          "link": "/docs/site",
+          "file": "/site.md"
+        },
+        {
+          "title": "Setup SEO",
+          "link": "/docs/seo",
+          "file": "/seo.md"
+        },
+        {
+          "title": "Setup Home",
+          "link": "/docs/home-page",
+          "file": "/home-page.md"
+        },
+        {
+          "title": "Setup Theme",
+          "link": "/docs/theme",
+          "file": "/theme.md"
+        },
+        {
+          "title": "View Alerts",
+          "link": "/docs/alerts",
+          "file": "/alerts.md"
+        },
+        {
+          "title": "API Keys",
+          "link": "/docs/apikeys",
+          "file": "/apikeys.md"
+        },
+
+        {
+          "title": "Incident Management",
+          "link": "/docs/incident-management",
+          "file": "/incident-management.md"
+        },
+        {
+          "title": "Embed",
+          "link": "/docs/embed",
+          "file": "/embed.md"
+        },
+        {
+          "title": "Custom JS/CSS",
+          "link": "/docs/custom-js-css-guide",
+          "file": "/custom-js-css-guide.md"
+        },
+        {
+          "title": "Internationalization",
+          "link": "/docs/i18n",
+          "file": "/i18n.md"
+        }
+      ]
+    },
+    {
+      "sectionTitle": "Monitors",
+      "children": [
+        {
+          "title": "API/Website Monitor",
+          "link": "/docs/monitors-api",
+          "file": "/monitors-api.md"
+        },
+        {
+          "title": "Ping Monitor",
+          "link": "/docs/monitors-ping",
+          "file": "/monitors-ping.md"
+        },
+        {
+          "title": "TCP Monitor",
+          "link": "/docs/monitors-tcp",
+          "file": "/monitors-tcp.md"
+        },
+        {
+          "title": "DNS Monitor",
+          "link": "/docs/monitors-dns",
+          "file": "/monitors-dns.md"
+        },
+        {
+          "title": "Group Monitor",
+          "link": "/docs/monitors-group",
+          "file": "/monitors-group.md"
+        },
+        {
+          "title": "SSL Monitor",
+          "link": "/docs/monitors-ssl",
+          "file": "/monitors-ssl.md"
+        },
+        {
+          "title": "SQL Monitor",
+          "link": "/docs/monitors-sql",
+          "file": "/monitors-sql.md"
+        },
+        {
+          "title": "Heartbeat Monitor",
+          "link": "/docs/monitors-heartbeat",
+          "file": "/monitors-heartbeat.md"
+        }
+      ]
+    },
+    {
+      "sectionTitle": "API Reference",
+      "children": [
+        {
+          "title": "Kener APIs",
+          "link": "/docs/kener-apis",
+          "file": "/kener-apis.md"
+        }
+      ]
+    },
+    {
+      "sectionTitle": "Help",
+      "children": [
+        {
+          "title": "Fonts",
+          "link": "/docs/custom-fonts",
+          "file": "/custom-fonts.md"
+        },
+        {
+          "title": "Changelogs",
+          "link": "/docs/changelogs",
+          "file": "/changelogs.md"
+        },
+        {
+          "title": "Roadmap",
+          "link": "/docs/roadmap",
+          "file": "/roadmap.md"
+        }
+      ]
+    }
+  ]
 }

docs/theme.md

@@ -11,7 +11,7 @@ Kener provides you with the ability to customize the theme of your status page.
 
 ## Home Page Pattern
 
-Kener can show a subtle pattern in all your pages. It is either sqaure or dots. Right now you cannot modify the color of the pattern. However, you can disable it by choosing none
+Kener can show a subtle pattern in all your pages. It is either square or dots. Right now you cannot modify the color of the pattern. However, you can disable it by choosing none
 
 ---
 
@@ -35,13 +35,13 @@ You can change how the bars and summary of a monitor looks like.
 
 The status bar will be a gradient from green to red/yellow based on the status of the monitor.
 
-![Trigger API](/x1.png)
+![Trigger API](/documentation/x1.png)
 
 #### Full
 
 The status bar will be a solid color based on the status of the monitor.
 
-![Trigger API](/x2.png)
+![Trigger API](/documentation/x2.png)
 
 ---
 
@@ -51,11 +51,11 @@ Adjust the roundness of the status bar.
 
 #### SHARP
 
-![Trigger API](/x4.png)
+![Trigger API](/documentation/x4.png)
 
 #### ROUNDED
 
-![Trigger API](/x3.png)
+![Trigger API](/documentation/x3.png)
 
 ---
 
@@ -97,7 +97,7 @@ You can add custom CSS to your status page. This will be added to the head of th
 
 ```css
 .my-class {
-	color: red;
+    color: red;
 }
 ```
 

docs/triggers.md

@@ -9,7 +9,7 @@ Triggers are used to trigger actions based on the status of your monitors. You c
 
 <div class="border rounded-md">
 
-![Trigger API](/trig_1.png)
+![Trigger API](/documentation/trig_1.png)
 
 </div>
 
@@ -38,7 +38,7 @@ Webhook triggers are used to send a HTTP POST request to a URL when a monitor go
 
 <div class="border rounded-md">
 
-![Trigger API](/trig_web.png)
+![Trigger API](/documentation/trig_web.png)
 
 </div>
 
@@ -72,24 +72,24 @@ Body of the webhook will be sent as below:
 
 ```json
 {
-	"id": "mockoon-9",
-	"alert_name": "Mockoon DOWN",
-	"severity": "critical",
-	"status": "TRIGGERED",
-	"source": "Kener",
-	"timestamp": "2024-11-27T04:55:00.369Z",
-	"description": "🚨 **Service Alert**: Check the details below",
-	"details": {
-		"metric": "Mockoon",
-		"current_value": 1,
-		"threshold": 1
-	},
-	"actions": [
-		{
-			"text": "View Monitor",
-			"url": "https://kener.ing/monitor-mockoon"
-		}
-	]
+    "id": "mockoon-9",
+    "alert_name": "Mockoon DOWN",
+    "severity": "critical",
+    "status": "TRIGGERED",
+    "source": "Kener",
+    "timestamp": "2024-11-27T04:55:00.369Z",
+    "description": "🚨 **Service Alert**: Check the details below",
+    "details": {
+        "metric": "Mockoon",
+        "current_value": 1,
+        "threshold": 1
+    },
+    "actions": [
+        {
+            "text": "View Monitor",
+            "url": "https://kener.ing/monitor-mockoon"
+        }
+    ]
 }
 ```
 
@@ -118,7 +118,7 @@ Discord triggers are used to send a message to a discord channel when a monitor
 
 <div class="border rounded-md">
 
-![Trigger API](/trig_2.png)
+![Trigger API](/documentation/trig_2.png)
 
 </div>
 
@@ -147,7 +147,7 @@ The discord message when alert is `TRIGGERED` will look like this
 
 The discord message when alert is `RESOLVED` will look like this
 
-![Discord](/discord_resolved.png)
+![Discord](/documentation/discord_resolved.png)
 
 ## Slack
 
@@ -155,7 +155,7 @@ Slack triggers are used to send a message to a slack channel when a monitor goes
 
 <div class="border rounded-md">
 
-![Trigger API](/trig_3.png)
+![Trigger API](/documentation/trig_3.png)
 
 </div>
 
@@ -185,7 +185,7 @@ The slack message when alert is `TRIGGERED` will look like this
 
 The slack message when alert is `RESOLVED` will look like this
 
-![Slack](/slack_resolved.png)
+![Slack](/documentation/slack_resolved.png)
 
 ## Email
 
@@ -193,7 +193,7 @@ Email triggers are used to send an email when a monitor goes down or up. Kener s
 
 <div class="border rounded-md">
 
-![Trigger API](/trig_4.png)
+![Trigger API](/documentation/trig_4.png)
 
 </div>
 
@@ -216,6 +216,12 @@ Since the password will be stored as plain text we encourage to use environment
 
 </div>
 
+<div class="  note info ">
+
+If your SMTP provider does require username and password, you can set `SMTP_USER` and `SMTP_PASS` to `-`.
+
+</div>
+
 ### To
 
 <span class="text-red-500 text-xs font-semibold">
@@ -250,11 +256,11 @@ Subject of the email when `RESOLVED`
 
 The emaik message when alert is `TRIGGERED` will look like this
 
-![Slack](/em_t.png)
+![Slack](/documentation/em_t.png)
 
 The emaik message when alert is `RESOLVED` will look like this
 
-![Slack](/em_r.png)
+![Slack](/documentation/em_r.png)
 
 ---
 
@@ -278,9 +284,9 @@ Set the URL to `https://api.telegram.org/bot[BOT_TOKEN]/sendMessage`. Replace [B
 
 ```json
 {
-	"chat_id": "[CHAT_ID]", // Replace [CHAT_ID] with your chat id
-	"text": "<b>${alert_name}</b>\n\n<b>Severity:</b> <code>${severity}</code>\n<b>Status:</b> ${status}\n<b>Source:</b> Kener\n<b>Time:</b> ${timestamp}\n\n📌 <b>Details:</b>\n- <b>Metric:</b>${metric}\n- <b>Current Value:</b> <code>${current_value}</code>\n- <b>Threshold:</b> <code>${threshold}</code>\n\n🔍 <a href=\"${action_url}\">${action_text}</a>",
-	"parse_mode": "HTML"
+    "chat_id": "[CHAT_ID]", // Replace [CHAT_ID] with your chat id
+    "text": "<b>${alert_name}</b>\n\n<b>Severity:</b> <code>${severity}</code>\n<b>Status:</b> ${status}\n<b>Source:</b> Kener\n<b>Time:</b> ${timestamp}\n\n📌 <b>Details:</b>\n- <b>Metric:</b>${metric}\n- <b>Current Value:</b> <code>${current_value}</code>\n- <b>Threshold:</b> <code>${threshold}</code>\n\n🔍 <a href=\"${action_url}\">${action_text}</a>",
+    "parse_mode": "HTML"
 }
 ```
 

entrypoint.sh

@@ -0,0 +1,8 @@
+#!/bin/sh
+set -e
+
+# Automatically set PUBLIC_WHITE_LABEL based on WHITE_LABEL
+export PUBLIC_WHITE_LABEL="${WHITE_LABEL}"
+
+# Replace shell with the given command (from CMD or runtime args)
+exec "$@"

knexfile.js

@@ -9,28 +9,29 @@ const databaseType = databaseURLParts[0];
 const databasePath = databaseURLParts[1];
 
 const knexOb = {
-	migrations: {
-		directory: "./migrations"
-	},
-	seeds: {
-		directory: "./seeds"
-	}
+  migrations: {
+    directory: "./migrations",
+  },
+  seeds: {
+    directory: "./seeds",
+  },
+  databaseType,
 };
 if (databaseType === "sqlite") {
-	knexOb.client = "better-sqlite3";
-	knexOb.connection = {
-		filename: databasePath
-	};
-	knexOb.useNullAsDefault = true;
+  knexOb.client = "better-sqlite3";
+  knexOb.connection = {
+    filename: databasePath,
+  };
+  knexOb.useNullAsDefault = true;
 } else if (databaseType === "postgresql") {
-	knexOb.client = "pg";
-	knexOb.connection = databaseURL;
+  knexOb.client = "pg";
+  knexOb.connection = databaseURL;
 } else if (databaseType === "mysql") {
-	knexOb.client = "mysql2";
-	knexOb.connection = databaseURL;
+  knexOb.client = "mysql2";
+  knexOb.connection = databaseURL;
 } else {
-	console.error("Invalid database type");
-	process.exit(1);
+  console.error("Invalid database type");
+  process.exit(1);
 }
 
 export default knexOb;

migrations/20250222153624_add_incident_source_column.js

@@ -0,0 +1,11 @@
+export function up(knex) {
+  return knex.schema.alterTable("incidents", function (table) {
+    table.text("incident_source").defaultTo("DASHBOARD");
+  });
+}
+
+export function down(knex) {
+  return knex.schema.alterTable("incidents", function (table) {
+    table.dropColumn("incident_source");
+  });
+}

package.json

@@ -1,6 +1,6 @@
 {
   "name": "kener",
-  "version": "3.0.12",
+  "version": "3.2.2",
   "private": false,
   "license": "MIT",
   "description": "Kener: An open-source Node.js status page application for real-time service monitoring, incident management, and customizable reporting. Simplify service outage tracking, enhance incident communication, and ensure a seamless user experience.",
@@ -37,6 +37,7 @@
     "devschedule": "node src/lib/server/startup.js",
     "schedule": "node src/lib/server/startup.js",
     "development": "vite dev",
+    "generate-readme": "node scripts/generate-readme.js",
     "dev": "npm-run-all --parallel devschedule development",
     "prettify": "prettier --write .",
     "start": "node main.js"
@@ -51,6 +52,7 @@
     "concurrently": "^8.2.2",
     "cross-env": "^7.0.3",
     "date-picker-svelte": "^2.15.1",
+    "mustache": "^4.2.0",
     "postcss": "^8.4.24",
     "postcss-load-config": "^4.0.1",
     "prettier": "^3.2.5",
@@ -75,9 +77,11 @@
     "bcrypt": "^5.1.1",
     "better-sqlite3": "^11.5.0",
     "bits-ui": "^0.9.9",
+    "cheerio": "^1.0.0",
     "clsx": "^2.0.0",
     "croner": "^7.0.5",
     "date-fns": "^4.1.0",
+    "date-fns-tz": "^3.2.0",
     "dns2": "^2.1.0",
     "dotenv": "^16.4.5",
     "express": "^4.18.2",

scripts/generate-readme.js

@@ -0,0 +1,31 @@
+import fs from "fs";
+import Mustache from "mustache";
+import dotenv from "dotenv";
+import { fileURLToPath } from "url";
+import path from "path";
+
+// Load environment variables from .env file
+dotenv.config();
+
+// Resolve paths correctly in ES modules
+const __filename = fileURLToPath(import.meta.url);
+const __dirname = path.dirname(__filename);
+
+// Load the template
+const templatePath = path.resolve(__dirname, "../README.template.md");
+const template = fs.readFileSync(templatePath, "utf-8");
+
+// Load environment variables and provide default values
+const data = {
+  kener_full_version: process.env.BUILD_FULL_VERSION || "N/A",
+  kener_major_version: process.env.BUILD_MAJOR_VERSION || "N/A",
+  kener_major_minor_version: process.env.BUILD_MAJOR_MINOR_VERSION || "N/A",
+};
+
+// Render README.md
+const output = Mustache.render(template, data);
+
+// Write to README.md
+fs.writeFileSync(path.resolve(__dirname, "../README.md"), output);
+
+console.log("✅ README.md generated successfully!");

sitemap.js.bk

@@ -1,45 +0,0 @@
-//read from process.env.PUBLIC_KENER_FOLDER / site.json
-//read from process.env.PUBLIC_KENER_FOLDER / monitors.json
-// create sitemap.xml
-import fs from "fs-extra";
-let siteMap = "";
-import dotenv from "dotenv";
-dotenv.config();
-const site = fs.readJSONSync("./database/site.json", "utf8");
-const monitors = fs.readJSONSync("./database/monitors.json", "utf8");
-if (site.siteURL !== undefined && site.siteURL !== null && site.siteURL !== "") {
-	if (monitors.length > 0) {
-		siteMap = `<?xml version="1.0" encoding="UTF-8"?>
-<urlset
-	xmlns="https://www.sitemaps.org/schemas/sitemap/0.9"
-	xmlns:xsi="https://www.w3.org/2001/XMLSchema-instance"
-	xsi:schemaLocation="https://www.sitemaps.org/schemas/sitemap/0.9
-	https://www.sitemaps.org/schemas/sitemap/0.9/sitemap.xsd">
-	${monitors
-		.map((monitor) => {
-			return `
-	<url>
-		<loc>${site.siteURL}/incident/${monitor.tag}</loc>
-		<lastmod>${new Date().toISOString()}</lastmod>
-		<changefreq>daily</changefreq>
-		<priority>0.8</priority>
-	</url>`;
-		})
-		.join("\n")}
-	${monitors
-		.map((monitor) => {
-			return `
-	<url>
-		<loc>${site.siteURL}/monitor-${encodeURIComponent(monitor.tag)}</loc>
-		<lastmod>${new Date().toISOString()}</lastmod>
-		<changefreq>daily</changefreq>
-		<priority>0.8</priority>
-	</url>`;
-		})
-		.join("\n")}
-</urlset>`;
-	}
-}
-
-//export default siteMap
-export default siteMap;

src/app.postcss

@@ -1,88 +1,90 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+@import "tailwindcss/base";
+
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
 
 @layer base {
-	:root {
-		--background: 0 0% 100%;
-		--background-kener: hsl(0, 0%, 100%);
-		--background-kener-rgba: rgba(255, 255, 255, 0.5);
-		--foreground: 240 10% 4%;
+  :root {
+    --background: 0 0% 100%;
+    --background-kener: hsl(0, 0%, 100%);
+    --background-kener-rgba: rgba(255, 255, 255, 0.5);
 
-		--muted: 0 0% 92.9%;
-		--muted-foreground: 215.4 16.3% 46.9%;
+    --foreground: 240 10% 4%;
 
-		--popover: 0 0% 100%;
-		--popover-foreground: 240 10% 4%;
+    --muted: 0 0% 92.9%;
+    --muted-foreground: 215.4 16.3% 46.9%;
 
-		--card: 0 0% 99%;
-		--card-foreground: 240 10% 4%;
+    --popover: 0 0% 100%;
+    --popover-foreground: 240 10% 4%;
 
-		--border: 214.3 31.8% 91.4%;
-		--input: 214.3 31.8% 91.4%;
+    --card: 0 0% 99%;
+    --card-foreground: 240 10% 4%;
 
-		--date-picker-background: hsl(0 0% 99%);
-		--date-picker-foreground: hsl(240 10% 4%);
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
 
-		--primary: 222.2 47.4% 11.2%;
-		--primary-foreground: 210 40% 98%;
+    --date-picker-background: hsl(0 0% 99%);
+    --date-picker-foreground: hsl(240 10% 4%);
 
-		--secondary: 0 0% 92.9%;
-		--secondary-foreground: 222.2 47.4% 11.2%;
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
 
-		--accent: 210 40% 96.1%;
-		--accent-foreground: 222.2 47.4% 11.2%;
+    --secondary: 0 0% 92.9%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
 
-		--destructive: 0 72.2% 50.6%;
-		--destructive-foreground: 210 40% 98%;
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
 
-		--ring: 240 10% 4%;
+    --destructive: 0 72.2% 50.6%;
+    --destructive-foreground: 210 40% 98%;
 
-		--radius: 0.5rem;
-	}
+    --ring: 240 10% 4%;
 
-	.dark {
-		--background: 240 7% 11%;
-		--background-kener: hsl(240 7% 11%);
-		--background-kener-rgba: rgba(30, 30, 26, 0.35);
-		--foreground: 60 10% 86%;
+    --radius: 0.5rem;
+  }
 
-		--muted: 240 4% 16%;
-		--muted-foreground: 0 0% 40%;
+  .dark {
+    --background: 240 7% 11%;
+    --background-kener: hsl(240 7% 11%);
+    --background-kener-rgba: rgba(30, 30, 26, 0.35);
+    --foreground: 60 10% 86%;
 
-		--popover: 230 9% 14%;
-		--popover-foreground: 210 40% 98%;
+    --muted: 240 4% 16%;
+    --muted-foreground: 0 0% 40%;
 
-		--card: 230 9% 14%;
-		--card-foreground: 60 10% 86%;
+    --popover: 230 9% 14%;
+    --popover-foreground: 210 40% 98%;
 
-		--border: 60 1% 17%;
-		--input: 60 6% 17%;
+    --card: 230 9% 14%;
+    --card-foreground: 60 10% 86%;
 
-		--date-picker-background: hsl(240 4% 16%);
-		--date-picker-foreground: hsl(60 10% 86%);
+    --border: 60 1% 17%;
+    --input: 60 6% 17%;
 
-		--primary: 60 10% 86%;
-		--primary-foreground: 222.2 47.4% 11.2%;
+    --date-picker-background: hsl(240 4% 16%);
+    --date-picker-foreground: hsl(60 10% 86%);
 
-		--secondary: 240 1% 18%;
-		--secondary-foreground: 60 10% 86%;
+    --primary: 60 10% 86%;
+    --primary-foreground: 222.2 47.4% 11.2%;
 
-		--accent: 240 4% 16%;
-		--accent-foreground: 210 40% 98%;
+    --secondary: 240 1% 18%;
+    --secondary-foreground: 60 10% 86%;
 
-		--destructive: 0 62.8% 30.6%;
-		--destructive-foreground: 210 40% 98%;
+    --accent: 240 4% 16%;
+    --accent-foreground: 210 40% 98%;
 
-		--ring: hsl(212.7, 26.8%, 83.9);
-	}
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: hsl(212.7, 26.8%, 83.9);
+  }
 }
 
 @layer base {
-	* {
-		@apply border-border;
-	}
-	body {
-		@apply bg-background text-foreground;
-	}
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
 }

src/docs.css

@@ -1,69 +1,83 @@
 code:not([class^="language-"]) {
-	@apply rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs dark:bg-gray-800;
+  @apply rounded bg-gray-100 px-1.5 py-0.5 font-mono text-xs dark:bg-gray-800;
 }
 
 .sidebar-item.active,
 .sidebar-item:hover {
-	color: #ed702d;
+  color: #ed702d;
 }
 
 .w-585px {
-	width: 585px;
+  width: 585px;
 }
 
 main {
-	scroll-behavior: smooth;
+  scroll-behavior: smooth;
 }
 .kener-home-links a {
-	text-decoration: none;
-	background-color: var(--bg-background);
+  text-decoration: none;
+  background-color: var(--bg-background);
 }
-.kener-home-links > div:hover {
-	transition: all 0.3s;
-	box-shadow: 0 0 8px 1.5px #3e9a4b;
+.kener-home-links > a:hover {
+  transition: all 0.3s;
+  border-color: #ed702d;
+  background-color: #ed702d;
 }
 
 .accm input:checked ~ div {
-	display: block;
+  display: block;
 }
 .accm input ~ div {
-	display: none;
+  display: none;
 }
 
 .accm input {
-	visibility: hidden;
+  visibility: hidden;
 }
 
 .accmt {
-	background-color: hsl(223, 10%, 14%);
+  background-color: hsl(223, 10%, 14%);
 }
 
 .accm input:checked ~ .showaccm span:first-child {
-	display: none;
+  display: none;
 }
 .accm input:checked ~ .showaccm span:last-child {
-	display: block;
+  display: block;
 }
 .accm input ~ .showaccm span:first-child {
-	display: block;
+  display: block;
 }
 .accm input ~ .showaccm span:last-child {
-	display: none;
+  display: none;
 }
 
 .hljs {
-	background: transparent !important;
+  background: transparent !important;
 }
 
 .note {
-	@apply mt-4 rounded-md border bg-background p-3 text-sm shadow-sm;
+  @apply mt-4 rounded-md border bg-background p-3 text-sm shadow-sm;
 }
 .note.danger {
-	border: 1px solid #e3342f;
-	color: #e3342f;
+  border: 1px solid #e3342f;
+  color: #e3342f;
 }
 
 .note.info {
-	border: 1px solid #3490dc;
-	color: #3490dc;
+  border: 1px solid #3490dc;
+  color: #3490dc;
+}
+
+.copybtn .copy-btn {
+  transform: scale(1);
+}
+.copybtn .check-btn {
+  transform: scale(0);
+}
+.copybtn:focus .copy-btn {
+  transform: scale(0);
+}
+.copybtn:focus .check-btn {
+  transform: scale(1);
 }

src/fonts.css

@@ -0,0 +1,90 @@
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-hairline.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-hairline.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-hairline.ttf") format("truetype");
+  font-weight: 100;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-hairline-italic.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-hairline-italic.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-hairline-italic.ttf") format("truetype");
+  font-weight: 100;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-light.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-light.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-light.ttf") format("truetype");
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-light-italic.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-light-italic.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-light-italic.ttf") format("truetype");
+  font-weight: 300;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-regular.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-regular.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-regular.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-regular-italic.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-regular-italic.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-regular-italic.ttf") format("truetype");
+  font-weight: normal;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-bold.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-bold.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-bold-italic.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-bold-italic.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-bold-italic.ttf") format("truetype");
+  font-weight: 700;
+  font-style: italic;
+}
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-black.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-black.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-black.ttf") format("truetype");
+  font-weight: 900;
+  font-style: normal;
+}
+@font-face {
+  font-family: "Lato";
+  src:
+    url("./fonts/lato/latin_subset/lato-black-italic.woff2") format("woff2"),
+    url("./fonts/lato/latin_subset/lato-black-italic.woff") format("woff"),
+    url("./fonts/lato/latin_subset/lato-black-italic.ttf") format("truetype");
+  font-weight: 900;
+  font-style: italic;
+}

src/lib/clientTools.js

@@ -1,288 +1,291 @@
 // @ts-nocheck
 import { base } from "$app/paths";
 function siteDataExtractFromDb(data, obj) {
-	let requestedObject = { ...obj };
-	for (const key in requestedObject) {
-		if (Object.prototype.hasOwnProperty.call(requestedObject, key)) {
-			const element = data[key];
-			if (data[key]) {
-				requestedObject[key] = data[key];
-			}
-		}
-	}
-	//remove any keys that are still null or empty
-	for (const key in requestedObject) {
-		if (Object.prototype.hasOwnProperty.call(requestedObject, key)) {
-			const element = requestedObject[key];
-			if (element === null || element === "") {
-				delete requestedObject[key];
-			}
-		}
-	}
-	return requestedObject;
+  let requestedObject = { ...obj };
+  for (const key in requestedObject) {
+    if (Object.prototype.hasOwnProperty.call(requestedObject, key)) {
+      const element = data[key];
+      if (data[key]) {
+        requestedObject[key] = data[key];
+      }
+    }
+  }
+  //remove any keys that are still null or empty
+  for (const key in requestedObject) {
+    if (Object.prototype.hasOwnProperty.call(requestedObject, key)) {
+      const element = requestedObject[key];
+      if (element === null || element === "") {
+        delete requestedObject[key];
+      }
+    }
+  }
+  return requestedObject;
 }
 
 //a function to make an api call to /manage/api/ to store site data
 function storeSiteData(data) {
-	return fetch(base + "/manage/app/api/", {
-		method: "POST",
-		headers: {
-			"Content-Type": "application/json"
-		},
-		body: JSON.stringify({ action: "storeSiteData", data })
-	});
+  return fetch(base + "/manage/app/api/", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({ action: "storeSiteData", data }),
+  });
 }
 const allRecordTypes = {
-	A: 1,
-	NS: 2,
-	MD: 3,
-	MF: 4,
-	CNAME: 5,
-	SOA: 6,
-	MB: 7,
-	MG: 8,
-	MR: 9,
-	NULL: 10,
-	WKS: 11,
-	PTR: 12,
-	HINFO: 13,
-	MINFO: 14,
-	MX: 15,
-	TXT: 16,
-	RP: 17,
-	AFSDB: 18,
-	X25: 19,
-	ISDN: 20,
-	RT: 21,
-	NSAP: 22,
-	NSAP_PTR: 23,
-	SIG: 24,
-	KEY: 25,
-	PX: 26,
-	GPOS: 27,
-	AAAA: 28,
-	LOC: 29,
-	NXT: 30,
-	EID: 31,
-	NIMLOC: 32,
-	SRV: 33,
-	ATMA: 34,
-	NAPTR: 35,
-	KX: 36,
-	CERT: 37,
-	A6: 38,
-	DNAME: 39,
-	SINK: 40,
-	OPT: 41,
-	APL: 42,
-	DS: 43,
-	SSHFP: 44,
-	IPSECKEY: 45,
-	RRSIG: 46,
-	NSEC: 47,
-	DNSKEY: 48,
-	DHCID: 49,
-	NSEC3: 50,
-	NSEC3PARAM: 51,
-	TLSA: 52,
-	SMIMEA: 53,
-	HIP: 55,
-	NINFO: 56,
-	RKEY: 57,
-	TALINK: 58,
-	CDS: 59,
-	CDNSKEY: 60,
-	OPENPGPKEY: 61,
-	CSYNC: 62,
-	SPF: 99,
-	UINFO: 100,
-	UID: 101,
-	GID: 102,
-	UNSPEC: 103,
-	NID: 104,
-	L32: 105,
-	L64: 106,
-	LP: 107,
-	EUI48: 108,
-	EUI64: 109,
-	TKEY: 249,
-	TSIG: 250,
-	IXFR: 251,
-	AXFR: 252,
-	MAILB: 253,
-	MAILA: 254,
-	ANY: 255
+  A: 1,
+  NS: 2,
+  MD: 3,
+  MF: 4,
+  CNAME: 5,
+  SOA: 6,
+  MB: 7,
+  MG: 8,
+  MR: 9,
+  NULL: 10,
+  WKS: 11,
+  PTR: 12,
+  HINFO: 13,
+  MINFO: 14,
+  MX: 15,
+  TXT: 16,
+  RP: 17,
+  AFSDB: 18,
+  X25: 19,
+  ISDN: 20,
+  RT: 21,
+  NSAP: 22,
+  NSAP_PTR: 23,
+  SIG: 24,
+  KEY: 25,
+  PX: 26,
+  GPOS: 27,
+  AAAA: 28,
+  LOC: 29,
+  NXT: 30,
+  EID: 31,
+  NIMLOC: 32,
+  SRV: 33,
+  ATMA: 34,
+  NAPTR: 35,
+  KX: 36,
+  CERT: 37,
+  A6: 38,
+  DNAME: 39,
+  SINK: 40,
+  OPT: 41,
+  APL: 42,
+  DS: 43,
+  SSHFP: 44,
+  IPSECKEY: 45,
+  RRSIG: 46,
+  NSEC: 47,
+  DNSKEY: 48,
+  DHCID: 49,
+  NSEC3: 50,
+  NSEC3PARAM: 51,
+  TLSA: 52,
+  SMIMEA: 53,
+  HIP: 55,
+  NINFO: 56,
+  RKEY: 57,
+  TALINK: 58,
+  CDS: 59,
+  CDNSKEY: 60,
+  OPENPGPKEY: 61,
+  CSYNC: 62,
+  SPF: 99,
+  UINFO: 100,
+  UID: 101,
+  GID: 102,
+  UNSPEC: 103,
+  NID: 104,
+  L32: 105,
+  L64: 106,
+  LP: 107,
+  EUI48: 108,
+  EUI64: 109,
+  TKEY: 249,
+  TSIG: 250,
+  IXFR: 251,
+  AXFR: 252,
+  MAILB: 253,
+  MAILA: 254,
+  ANY: 255,
 };
 const ValidateIpAddress = function (input) {
-	// Check if input is a valid IPv4 address with an optional port
-	const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
-	if (ipv4Regex.test(input)) {
-		return "IP4";
-	}
+  // Check if input is a valid IPv4 address with an optional port
+  const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
+  if (ipv4Regex.test(input)) {
+    return "IP4";
+  }
 
-	// Improved IPv6 regex that better handles compressed notation
-	const ipv6Regex =
-		/^(?:(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){0,7}:|(?:[0-9a-fA-F]{1,4}:){1,7}:|(?:[0-9a-fA-F]{1,4}:){6}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])|:(?:(?::[0-9a-fA-F]{1,4}){1,7}|:)|(?:[0-9a-fA-F]{1,4}:){1,7}(?::|:[0-9a-fA-F]{1,4})|(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:(?:(?::[0-9a-fA-F]{1,4}){1,6})|:(?:(?::[0-9a-fA-F]{1,4}){1,7}|:))$/;
-	if (ipv6Regex.test(input)) {
-		return "IP6";
-	}
+  // Improved IPv6 regex that better handles compressed notation
+  const ipv6Regex =
+    /^(?:(?:[0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){0,7}:|(?:[0-9a-fA-F]{1,4}:){1,7}:|(?:[0-9a-fA-F]{1,4}:){6}(?:25[0-5]|2[0-4][0-9]|1[0-9][0-9]|[1-9][0-9]|[0-9])|:(?:(?::[0-9a-fA-F]{1,4}){1,7}|:)|(?:[0-9a-fA-F]{1,4}:){1,7}(?::|:[0-9a-fA-F]{1,4})|(?:[0-9a-fA-F]{1,4}:){1,6}:[0-9a-fA-F]{1,4}|(?:[0-9a-fA-F]{1,4}:){1,5}(?::[0-9a-fA-F]{1,4}){1,2}|(?:[0-9a-fA-F]{1,4}:){1,4}(?::[0-9a-fA-F]{1,4}){1,3}|(?:[0-9a-fA-F]{1,4}:){1,3}(?::[0-9a-fA-F]{1,4}){1,4}|(?:[0-9a-fA-F]{1,4}:){1,2}(?::[0-9a-fA-F]{1,4}){1,5}|[0-9a-fA-F]{1,4}:(?:(?::[0-9a-fA-F]{1,4}){1,6})|:(?:(?::[0-9a-fA-F]{1,4}){1,7}|:))$/;
+  if (ipv6Regex.test(input)) {
+    return "IP6";
+  }
 
-	// Check if input is a valid domain name with an optional port
-	const domainRegex = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
-	if (domainRegex.test(input)) {
-		return "DOMAIN";
-	}
+  // Check if input is a valid domain name with an optional port
+  const domainRegex = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
+  if (domainRegex.test(input)) {
+    return "DOMAIN";
+  }
 
-	// If none of the above conditions match, the input is invalid
-	return "Invalid";
+  // If none of the above conditions match, the input is invalid
+  return "Invalid";
 };
 
 function IsValidHost(domain) {
-	const regex = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
-	return regex.test(domain);
+  const regex = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
+  return regex.test(domain);
 }
 function IsValidNameServer(nameServer) {
-	//8.8.8.8 example
-	const regex = /^([0-9]{1,3}\.){3}[0-9]{1,3}$/;
-	return regex.test(nameServer);
+  //8.8.8.8 example
+  const regex = /^([0-9]{1,3}\.){3}[0-9]{1,3}$/;
+  return regex.test(nameServer);
 }
 const IsValidURL = function (url) {
-	return /^(http|https):\/\/[^ "]+$/.test(url);
+  return /^(http|https):\/\/[^ "]+$/.test(url);
 };
 function ValidateCronExpression(cronExp) {
-	// Check if expression is provided and is a string
-	if (!cronExp || typeof cronExp !== "string") {
-		return { isValid: false, message: "Cron expression must be a non-empty string" };
-	}
+  // Check if expression is provided and is a string
+  if (!cronExp || typeof cronExp !== "string") {
+    return { isValid: false, message: "Cron expression must be a non-empty string" };
+  }
 
-	// Split the expression into its components
-	const fields = cronExp.trim().split(/\s+/);
+  // Split the expression into its components
+  const fields = cronExp.trim().split(/\s+/);
 
-	// Standard cron should have 5 or 6 fields
-	// minute hour day-of-month month day-of-week [year]
-	if (fields.length < 5 || fields.length > 6) {
-		return {
-			isValid: false,
-			message: "Cron expression must have 5 or 6 fields"
-		};
-	}
+  // Standard cron should have 5 or 6 fields
+  // minute hour day-of-month month day-of-week [year]
+  if (fields.length < 5 || fields.length > 6) {
+    return {
+      isValid: false,
+      message: "Cron expression must have 5 or 6 fields",
+    };
+  }
 
-	// Define field constraints
-	const fieldConstraints = [
-		{ name: "minute", min: 0, max: 59 },
-		{ name: "hour", min: 0, max: 23 },
-		{ name: "day", min: 1, max: 31 },
-		{ name: "month", min: 1, max: 12 },
-		{ name: "weekday", min: 0, max: 6 },
-		{ name: "year", min: 1970, max: 2099 } // Optional field
-	];
+  // Define field constraints
+  const fieldConstraints = [
+    { name: "minute", min: 0, max: 59 },
+    { name: "hour", min: 0, max: 23 },
+    { name: "day", min: 1, max: 31 },
+    { name: "month", min: 1, max: 12 },
+    { name: "weekday", min: 0, max: 6 },
+    { name: "year", min: 1970, max: 2099 }, // Optional field
+  ];
 
-	// Valid characters in cron expressions
-	const validChars = /^[\d/*,\-]+$/;
+  // Valid characters in cron expressions
+  const validChars = /^[\d/*,\-]+$/;
 
-	// Validate each field
-	for (let i = 0; i < fields.length; i++) {
-		const field = fields[i];
-		const constraint = fieldConstraints[i];
+  // Validate each field
+  for (let i = 0; i < fields.length; i++) {
+    const field = fields[i];
+    const constraint = fieldConstraints[i];
 
-		// Check for valid characters
-		if (!validChars.test(field)) {
-			return {
-				isValid: false,
-				message: `Invalid characters in ${constraint.name} field`
-			};
-		}
+    // Check for valid characters
+    if (!validChars.test(field)) {
+      return {
+        isValid: false,
+        message: `Invalid characters in ${constraint.name} field`,
+      };
+    }
 
-		// Handle special characters
-		if (field === "*") {
-			continue; // Asterisk is valid for all fields
-		}
+    // Handle special characters
+    if (field === "*") {
+      continue; // Asterisk is valid for all fields
+    }
 
-		// Handle lists (comma-separated values)
-		if (field.includes(",")) {
-			const values = field.split(",");
-			for (const value of values) {
-				if (!isValidRange(value, constraint.min, constraint.max)) {
-					return {
-						isValid: false,
-						message: `Invalid value in ${constraint.name} field: ${value}`
-					};
-				}
-			}
-			continue;
-		}
+    // Handle lists (comma-separated values)
+    if (field.includes(",")) {
+      const values = field.split(",");
+      for (const value of values) {
+        if (!isValidRange(value, constraint.min, constraint.max)) {
+          return {
+            isValid: false,
+            message: `Invalid value in ${constraint.name} field: ${value}`,
+          };
+        }
+      }
+      continue;
+    }
 
-		// Handle ranges (with hyphens)
-		if (field.includes("-")) {
-			const [start, end] = field.split("-").map(Number);
-			if (
-				start == null ||
-				end == null ||
-				start < constraint.min ||
-				end > constraint.max ||
-				start > end
-			) {
-				return {
-					isValid: false,
-					message: `Invalid range in ${constraint.name} field: ${field}`
-				};
-			}
-			continue;
-		}
+    // Handle ranges (with hyphens)
+    if (field.includes("-")) {
+      const [start, end] = field.split("-").map(Number);
+      if (start == null || end == null || start < constraint.min || end > constraint.max || start > end) {
+        return {
+          isValid: false,
+          message: `Invalid range in ${constraint.name} field: ${field}`,
+        };
+      }
+      continue;
+    }
 
-		// Handle steps (with forward slash)
-		if (field.includes("/")) {
-			const [range, step] = field.split("/");
-			if (range !== "*" && !isValidRange(range, constraint.min, constraint.max)) {
-				return {
-					isValid: false,
-					message: `Invalid range in ${constraint.name} field: ${range}`
-				};
-			}
-			if (!isValidRange(step, 1, constraint.max)) {
-				return {
-					isValid: false,
-					message: `Invalid step value in ${constraint.name} field: ${step}`
-				};
-			}
-			continue;
-		}
+    // Handle steps (with forward slash)
+    if (field.includes("/")) {
+      const [range, step] = field.split("/");
+      if (range !== "*" && !isValidRange(range, constraint.min, constraint.max)) {
+        return {
+          isValid: false,
+          message: `Invalid range in ${constraint.name} field: ${range}`,
+        };
+      }
+      if (!isValidRange(step, 1, constraint.max)) {
+        return {
+          isValid: false,
+          message: `Invalid step value in ${constraint.name} field: ${step}`,
+        };
+      }
+      continue;
+    }
 
-		// Handle plain numbers
-		if (!isValidRange(field, constraint.min, constraint.max)) {
-			return {
-				isValid: false,
-				message: `Invalid value in ${constraint.name} field: ${field}`
-			};
-		}
-	}
+    // Handle plain numbers
+    if (!isValidRange(field, constraint.min, constraint.max)) {
+      return {
+        isValid: false,
+        message: `Invalid value in ${constraint.name} field: ${field}`,
+      };
+    }
+  }
 
-	return { isValid: true, message: "Valid cron expression" };
+  return { isValid: true, message: "Valid cron expression" };
 }
 
 function isValidRange(value, min, max) {
-	const num = Number(value);
-	return !isNaN(num) && num >= min && num <= max;
+  const num = Number(value);
+  return !isNaN(num) && num >= min && num <= max;
 }
 function SortMonitor(monitorSort, resp) {
-	let monitors = [];
-	if (!!monitorSort && monitorSort.length > 0) {
-		monitors = monitorSort.map((id) => resp.find((m) => m.id == id)).filter((m) => !!m);
-		//append any new monitors
-		monitors = [...monitors, ...resp.filter((m) => !monitorSort.includes(m.id))];
-	} else {
-		monitors = resp;
-	}
-	return monitors;
+  let monitors = [];
+  if (!!monitorSort && monitorSort.length > 0) {
+    monitors = monitorSort.map((id) => resp.find((m) => m.id == id)).filter((m) => !!m);
+    //append any new monitors
+    monitors = [...monitors, ...resp.filter((m) => !monitorSort.includes(m.id))];
+  } else {
+    monitors = resp;
+  }
+  return monitors;
 }
+//js function to generate 32 character random string
+function RandomString(length) {
+  const chars = "0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ";
+  let result = "";
+  for (let i = length; i > 0; --i) result += chars[Math.floor(Math.random() * chars.length)];
+  return result;
+}
+
 export {
-	siteDataExtractFromDb,
-	storeSiteData,
-	allRecordTypes,
-	ValidateIpAddress,
-	IsValidHost,
-	IsValidNameServer,
-	IsValidURL,
-	ValidateCronExpression,
-	SortMonitor
+  siteDataExtractFromDb,
+  storeSiteData,
+  allRecordTypes,
+  ValidateIpAddress,
+  IsValidHost,
+  IsValidNameServer,
+  IsValidURL,
+  ValidateCronExpression,
+  SortMonitor,
+  RandomString,
 };

src/lib/components/IncidentNew.svelte

@@ -1,175 +1,222 @@
 <script>
-	import { formatDistanceToNow, formatDistance } from "date-fns";
+  import { formatDistanceToNow, formatDistance } from "date-fns";
+  import { Settings, ArrowRight } from "lucide-svelte";
+  import * as Accordion from "$lib/components/ui/accordion";
+  import { l, f, fd, fdn } from "$lib/i18n/client";
+  import { base } from "$app/paths";
+  import { Button } from "$lib/components/ui/button";
+  import { Tooltip } from "bits-ui";
+  import GMI from "$lib/components/gmi.svelte";
+  import { page } from "$app/stores";
+  export let incident;
+  export let index;
+  export let lang;
+  let startTime = new Date(incident.start_date_time * 1000);
+  let endTime = new Date();
+  let nowTime = new Date();
+  if (incident.end_date_time) {
+    endTime = new Date(incident.end_date_time * 1000);
+  }
+  let incidentType = incident.incident_type;
+  const lastedFor = fd(startTime, endTime, $page.data.selectedLang);
+  const remainingTime = fd(nowTime, endTime, $page.data.selectedLang);
+  const startedAt = fdn(startTime, $page.data.selectedLang);
 
-	import * as Accordion from "$lib/components/ui/accordion";
-	import { l, f, fd, fdn } from "$lib/i18n/client";
-	import { base } from "$app/paths";
-	export let incident;
-	export let index;
-	export let lang;
-	export let selectedLang = "en";
-	let startTime = new Date(incident.start_date_time * 1000);
-	let endTime = new Date();
-	let nowTime = new Date();
-	if (incident.end_date_time) {
-		endTime = new Date(incident.end_date_time * 1000);
-	}
-	let incidentType = incident.incident_type;
-	const lastedFor = fd(startTime, endTime, selectedLang);
-	const startedAt = fdn(startTime, selectedLang);
+  let incidentTimeStatus = "";
+  if (nowTime < startTime) {
+    incidentTimeStatus = "YET_TO_START";
+  } else if (nowTime >= startTime && nowTime <= endTime) {
+    incidentTimeStatus = "ONGOING";
+  } else if (nowTime > endTime) {
+    incidentTimeStatus = "COMPLETED";
+  }
 
-	let isFuture = false;
-	//is future incident
-	if (nowTime < startTime) {
-		isFuture = true;
-	}
+  let accordionValue = "incident-0";
+  if ($page.data.site.incidentGroupView == "COLLAPSED") {
+    accordionValue = "incident-collapse";
+  } else if ($page.data.site.incidentGroupView == "EXPANDED") {
+    accordionValue = index;
+  }
 
-	let incidentDateSummary = "";
-	let maintenanceBadge = "";
-	let maintenanceBadgeColor = "";
-	if (!isFuture && incident.state != "RESOLVED") {
-		incidentDateSummary = l(lang, "Started %startedAt, still ongoing", {
-			startedAt
-		});
-		maintenanceBadge = "Maintenance in Progress";
-		maintenanceBadgeColor = "text-maintenance-in-progress";
-	} else if (!isFuture && incident.state == "RESOLVED") {
-		incidentDateSummary = l(lang, "Started %startedAt, lasted for %lastedFor", {
-			startedAt,
-			lastedFor
-		});
-		maintenanceBadge = "Maintenance Completed";
-		maintenanceBadgeColor = "text-maintenance-completed";
-	} else if (isFuture && incident.state != "RESOLVED") {
-		incidentDateSummary = l(lang, "Starts %startedAt", { startedAt });
-		maintenanceBadge = "Upcoming Maintenance";
-		maintenanceBadgeColor = "text-upcoming-maintenance";
-	} else if (isFuture && incident.state == "RESOLVED") {
-		incidentDateSummary = l(lang, "Starts %startedAt, will last for %lastedFor", {
-			startedAt,
-			lastedFor
-		});
-		maintenanceBadge = "Upcoming Maintenance";
-		maintenanceBadgeColor = "text-upcoming-maintenance";
-	}
+  let incidentDateSummary = "";
+  let maintenanceBadge = "";
+  let maintenanceBadgeColor = "";
+
+  if (incidentTimeStatus == "YET_TO_START") {
+    incidentDateSummary = l($page.data.lang, "Starts %startedAt", { startedAt });
+    if (incidentType === "MAINTENANCE") {
+      incidentDateSummary = l($page.data.lang, "Starts %startedAt, will last for %lastedFor", {
+        startedAt,
+        lastedFor
+      });
+      maintenanceBadge = "Upcoming Maintenance";
+      maintenanceBadgeColor = "text-upcoming-maintenance";
+    }
+  } else if (incidentTimeStatus == "ONGOING") {
+    incidentDateSummary = l($page.data.lang, "Started %startedAt, still ongoing", {
+      startedAt
+    });
+    if (incidentType === "MAINTENANCE") {
+      incidentDateSummary = l($page.data.lang, "Started %startedAt, will last for %lastedFor more", {
+        startedAt,
+        lastedFor: remainingTime
+      });
+      maintenanceBadge = "Maintenance in Progress";
+      maintenanceBadgeColor = "text-maintenance-in-progress";
+    }
+  } else if (incidentTimeStatus == "COMPLETED") {
+    incidentDateSummary = l($page.data.lang, "Started %startedAt, lasted for %lastedFor", {
+      startedAt,
+      lastedFor
+    });
+    maintenanceBadge = "Maintenance Completed";
+    maintenanceBadgeColor = "text-maintenance-completed";
+  }
 </script>
 
 <div class="newincident relative grid w-full grid-cols-12 gap-2 px-0 py-0 last:border-b-0">
-	<div class="col-span-12">
-		<Accordion.Root bind:value={index} class="accor">
-			<Accordion.Item value="incident-0">
-				<Accordion.Trigger class="px-4 hover:bg-muted hover:no-underline">
-					<div class="w-full text-left hover:no-underline">
-						{#if incidentType == "INCIDENT"}
-							<p
-								class="scroll-m-20 text-xs font-semibold leading-5 tracking-normal badge-{incident.state}"
-							>
-								{l(lang, incident.state)}
-							</p>
-						{:else if incidentType == "MAINTENANCE"}
-							<p
-								class="{maintenanceBadgeColor} scroll-m-20 text-xs font-semibold leading-5 tracking-normal"
-							>
-								{l(lang, maintenanceBadge)}
-							</p>
-						{/if}
+  <div class="col-span-12">
+    <Accordion.Root bind:value={index} class="accor">
+      <Accordion.Item value={accordionValue}>
+        <Accordion.Trigger class="px-4 hover:bg-muted hover:no-underline">
+          <div class="w-full text-left hover:no-underline">
+            <p class="flex gap-x-2 text-xs font-semibold">
+              {#if incidentType == "INCIDENT"}
+                <span class="badge-{incident.state}">
+                  {l($page.data.lang, incident.state)}
+                </span>
+              {:else if incidentType == "MAINTENANCE"}
+                <span class="{maintenanceBadgeColor}  ">
+                  {l($page.data.lang, maintenanceBadge)}
+                </span>
+              {/if}
+              {#if $page.data.isLoggedIn}
+                <Button
+                  href="{base}/manage/app/events#{incident.id}"
+                  class=" rotate-once  h-5 p-0 text-muted-foreground hover:text-primary"
+                  variant="link"
+                >
+                  <Settings class="h-4 w-4 " />
+                </Button>
+              {/if}
+            </p>
 
-						<p class="scroll-m-20 text-lg font-medium tracking-tight">
-							{incident.title}
-						</p>
-						{#if !!incidentDateSummary}
-							<p
-								class="scroll-m-20 text-sm font-medium tracking-wide text-muted-foreground"
-							>
-								{incidentDateSummary}
-							</p>
-						{/if}
-					</div>
-				</Accordion.Trigger>
-				<Accordion.Content>
-					<div class="px-4 pt-2">
-						{#if incident.monitors.length > 0}
-							<div class="flex gap-2">
-								{#each incident.monitors as monitor}
-									<div
-										class="tag-affected-text flex gap-x-2 rounded-md bg-secondary px-1 py-1 pr-2"
-									>
-										<div
-											class="bg-api-{monitor.impact_type.toLowerCase()} rounded px-1.5 py-1 text-xs font-semibold text-primary-foreground"
-										>
-											{monitor.impact_type}
-										</div>
-										{#if monitor.image}
-											<img src={base + monitor.image} class="mt-1 h-4 w-4" />
-										{/if}
-										<div class="mt-0.5 font-medium">
-											{monitor.name}
-										</div>
-									</div>
-								{/each}
-							</div>
-						{/if}
-						<p class="my-3 text-xs font-semibold uppercase text-muted-foreground">
-							{l(lang, "Updates")}
-						</p>
-						{#if incident.comments.length > 0}
-							{#if incidentType == "INCIDENT"}
-								<ol class="relative mt-2 pl-14">
-									{#each incident.comments as comment}
-										<li
-											class="relative border-l pb-4 pl-[4.5rem] last:border-0"
-										>
-											<div
-												class="absolute top-0 w-28 -translate-x-32 rounded border bg-secondary px-1.5 py-1 text-center text-xs font-semibold"
-											>
-												{l(lang, comment.state)}
-											</div>
+            <p class="font-medium">
+              {incident.title}
+            </p>
+            {#if !!incidentDateSummary}
+              <Tooltip.Root openDelay={100} side="bottom" align="end">
+                <Tooltip.Trigger
+                  class=" text-ellipsis whitespace-nowrap text-xs font-medium tracking-normal    text-muted-foreground"
+                >
+                  {incidentDateSummary}
+                </Tooltip.Trigger>
+                <Tooltip.Content class=" z-20 mt-11" side="bottom" align="end">
+                  <div
+                    class="items-center justify-center rounded border bg-primary px-1.5 py-1 text-xs font-medium text-primary-foreground shadow-popover"
+                  >
+                    {f(
+                      new Date(incident.start_date_time * 1000),
+                      "MMMM do yyyy, h:mm:ss a",
+                      $page.data.selectedLang,
+                      $page.data.localTz
+                    )}
+                    {#if incident.end_date_time}
+                      <ArrowRight class="mx-1 -mt-0.5 inline h-3 w-3" />
+                      {f(
+                        new Date(incident.end_date_time * 1000),
+                        "MMMM do yyyy, h:mm:ss a",
+                        $page.data.selectedLang,
+                        $page.data.localTz
+                      )}
+                    {:else}
+                      <ArrowRight class="mx-1 -mt-0.5 inline h-3 w-3" />
+                      <span class="dots-animation inline-block w-6 text-left"></span>
+                    {/if}
+                  </div>
+                </Tooltip.Content>
+              </Tooltip.Root>
+            {/if}
+          </div>
+        </Accordion.Trigger>
+        <Accordion.Content>
+          <div class="px-4 pt-2">
+            {#if incident.monitors.length > 0}
+              <div class="flex flex-wrap gap-2">
+                {#each incident.monitors as monitor}
+                  <div class="tag-affected-text flex gap-x-2 rounded-md bg-secondary px-1 py-1 pr-2">
+                    <div
+                      class="bg-api-{monitor.impact_type.toLowerCase()} rounded px-1.5 py-1 text-xs font-semibold text-primary-foreground"
+                    >
+                      {monitor.impact_type}
+                    </div>
+                    {#if monitor.image}
+                      <GMI src={monitor.image} classList="mt-1 h-4 w-4" />
+                    {/if}
+                    <div class="mt-0.5 font-medium">
+                      {monitor.name}
+                    </div>
+                  </div>
+                {/each}
+              </div>
+            {/if}
+            <p class="my-3 text-xs font-semibold uppercase text-muted-foreground">
+              {l($page.data.lang, "Updates")}
+            </p>
+            {#if incident.comments.length > 0}
+              {#if incidentType == "INCIDENT"}
+                <ol class="relative mt-2 pl-14">
+                  {#each incident.comments as comment}
+                    <li class="relative border-l pb-4 pl-[4.5rem] last:border-0">
+                      <div
+                        class="absolute top-0 w-28 -translate-x-32 rounded border bg-secondary px-1.5 py-1 text-center text-xs font-semibold"
+                      >
+                        {l($page.data.lang, comment.state)}
+                      </div>
 
-											<time
-												class=" mb-1 text-sm font-medium leading-none text-muted-foreground"
-											>
-												{f(
-													new Date(comment.commented_at * 1000),
-													"MMMM do yyyy, h:mm:ss a",
-													selectedLang
-												)}
-											</time>
+                      <time class=" mb-1 text-sm font-medium leading-none text-muted-foreground">
+                        {f(
+                          new Date(comment.commented_at * 1000),
+                          "MMMM do yyyy, h:mm:ss a",
+                          $page.data.selectedLang,
+                          $page.data.localTz
+                        )}
+                      </time>
 
-											<p class="mb-4 text-sm font-normal">
-												{comment.comment}
-											</p>
-										</li>
-									{/each}
-								</ol>
-							{:else if incidentType == "MAINTENANCE"}
-								<ol class="relative mt-2 pl-0">
-									{#each incident.comments as comment}
-										<li class="relative pb-2 last:border-0">
-											<time
-												class=" mb-1 text-sm font-medium leading-none text-muted-foreground"
-											>
-												{f(
-													new Date(comment.commented_at * 1000),
-													"MMMM do yyyy, h:mm:ss a",
-													selectedLang
-												)}
-											</time>
+                      <div class="mb-4 text-sm font-normal">
+                        {@html comment.comment}
+                      </div>
+                    </li>
+                  {/each}
+                </ol>
+              {:else if incidentType == "MAINTENANCE"}
+                <ol class="relative mt-2 pl-0">
+                  {#each incident.comments as comment}
+                    <li class="relative pb-2 last:border-0">
+                      <time class=" mb-1 text-sm font-medium leading-none text-muted-foreground">
+                        {f(
+                          new Date(comment.commented_at * 1000),
+                          "MMMM do yyyy, h:mm:ss a",
+                          $page.data.selectedLang,
+                          $page.data.localTz
+                        )}
+                      </time>
 
-											<p class="mb-2 text-sm font-normal">
-												{comment.comment}
-											</p>
-										</li>
-									{/each}
-								</ol>
-							{/if}
-						{:else}
-							<p class="text-sm font-medium">
-								{l(lang, "No Updates Yet")}
-							</p>
-						{/if}
-					</div>
-				</Accordion.Content>
-			</Accordion.Item>
-		</Accordion.Root>
-	</div>
+                      <p class="mb-2 text-sm font-normal">
+                        {comment.comment}
+                      </p>
+                    </li>
+                  {/each}
+                </ol>
+              {/if}
+            {:else}
+              <p class="text-sm font-medium">
+                {l($page.data.lang, "No Updates Yet")}
+              </p>
+            {/if}
+          </div>
+        </Accordion.Content>
+      </Accordion.Item>
+    </Accordion.Root>
+  </div>
 </div>

src/lib/components/gmi.svelte

@@ -0,0 +1,11 @@
+<script>
+  import { base } from "$app/paths";
+  export let src = "";
+  export let alt = "GMI";
+  export let classList = "";
+  export let style = "";
+  export let srcset = "";
+  if (!src.startsWith("http")) src = `${base}${src}`;
+</script>
+
+<img {src} {alt} class={classList} {style} {srcset} />

src/lib/components/manage/alertsInfo.svelte

@@ -1,209 +1,204 @@
 <script>
-	import { onMount } from "svelte";
-	import { base } from "$app/paths";
-	import moment from "moment";
-	import { Loader, ChevronLeft, ChevronRight } from "lucide-svelte";
+  import { onMount } from "svelte";
+  import { base } from "$app/paths";
+  import moment from "moment";
+  import { Loader, ChevronLeft, ChevronRight } from "lucide-svelte";
 
-	export let data;
-	let pageNo = 1;
-	let limit = 20;
-	let alerts = [];
-	let totalPages = 0;
-	let loadingData = false;
+  export let data;
+  let pageNo = 1;
+  let limit = 20;
+  let alerts = [];
+  let totalPages = 0;
+  let loadingData = false;
 
-	let incidentURL = "";
-	if (data.siteData.github && data.siteData.github.owner && data.siteData.github.repo) {
-		incidentURL = `https://github.com/${data.siteData.github.owner}/${data.siteData.github.repo}/issues`;
-	}
+  let incidentURL = "";
+  if (data.siteData.github && data.siteData.github.owner && data.siteData.github.repo) {
+    incidentURL = `https://github.com/${data.siteData.github.owner}/${data.siteData.github.repo}/issues`;
+  }
 
-	async function loadData() {
-		loadingData = true;
-		try {
-			let apiResp = await fetch(base + "/manage/app/api/", {
-				method: "POST",
-				headers: {
-					"Content-Type": "application/json"
-				},
-				body: JSON.stringify({
-					action: "getAllAlertsPaginated",
-					data: { page: pageNo, limit }
-				})
-			});
-			let resp = await apiResp.json();
-			alerts = resp.alerts;
-			totalPages = Math.ceil(resp.total.count / limit);
-		} catch (error) {
-			alert("Error: " + error);
-		} finally {
-			loadingData = false;
-		}
-	}
+  async function loadData() {
+    loadingData = true;
+    try {
+      let apiResp = await fetch(base + "/manage/app/api/", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json"
+        },
+        body: JSON.stringify({
+          action: "getAllAlertsPaginated",
+          data: { page: pageNo, limit }
+        })
+      });
+      let resp = await apiResp.json();
+      alerts = resp.alerts;
+      totalPages = Math.ceil(resp.total.count / limit);
+    } catch (error) {
+      alert("Error: " + error);
+    } finally {
+      loadingData = false;
+    }
+  }
 
-	onMount(async () => {
-		await loadData();
-	});
+  onMount(async () => {
+    await loadData();
+  });
 </script>
 
 <div class="mt-4">
-	<div class="mb-4 flex justify-between">
-		<div>
-			{#if loadingData}
-				<Loader class="mt-6 h-4 w-4 animate-spin" />
-			{/if}
-		</div>
-		<!-- Pagination -->
-		{#if totalPages > 1}
-			<nav class="flex max-w-2xl items-center gap-x-1" aria-label="Pagination">
-				<button
-					disabled={pageNo === 1}
-					type="button"
-					class="inline-flex min-h-[38px] min-w-[38px] items-center justify-center gap-x-2 rounded-lg border border-transparent px-2.5 py-2 text-sm text-gray-800 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10"
-					aria-label="Previous"
-					on:click={() => {
-						pageNo--;
-						loadData();
-					}}
-				>
-					<ChevronLeft class="size-3.5 shrink-0" />
-					<span class="sr-only">Previous</span>
-				</button>
-				<div class="flex max-w-[380px] items-center gap-x-1 overflow-x-auto">
-					{#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
-						<button
-							on:click={() => {
-								pageNo = page;
-								loadData();
-							}}
-							type="button"
-							class="flex min-h-[38px] min-w-[38px] items-center justify-center rounded-lg border {page ==
-							pageNo
-								? 'border-gray-200'
-								: 'border-transparent'}  px-3 py-2 text-sm text-gray-800 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10"
-						>
-							{page}
-						</button>
-					{/each}
-				</div>
-				<button
-					type="button"
-					disabled={pageNo === totalPages}
-					class="inline-flex min-h-[38px] min-w-[38px] items-center justify-center gap-x-2 rounded-lg border border-transparent px-2.5 py-2 text-sm text-gray-800 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10"
-					aria-label="Next"
-					on:click={() => {
-						pageNo++;
-						loadData();
-					}}
-				>
-					<span class="sr-only">Next</span>
-					<ChevronRight class="size-3.5 shrink-0" />
-				</button>
-			</nav>
-		{/if}
-		<!-- End Pagination -->
-	</div>
-	<div class="flex flex-col">
-		<div class="-m-1.5 overflow-x-auto">
-			<div class="inline-block min-w-full p-1.5 align-middle">
-				<div class="overflow-hidden rounded-lg border dark:border-neutral-700">
-					<table class="min-w-full divide-y divide-gray-200 dark:divide-neutral-700">
-						<thead>
-							<tr>
-								<th
-									scope="col"
-									class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
-									>ID</th
-								>
-								<th
-									scope="col"
-									class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
-									>Type</th
-								>
-								<th
-									scope="col"
-									class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
-									>Monitor</th
-								>
-								<th
-									scope="col"
-									class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
-									>Status</th
-								>
-								<th
-									scope="col"
-									class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
-									>Checks</th
-								>
-								<th
-									scope="col"
-									class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
-									>Incident</th
-								>
-								<th
-									scope="col"
-									class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
-									>Created At</th
-								>
-							</tr>
-						</thead>
-						<tbody class="divide-y divide-gray-200 dark:divide-neutral-700">
-							{#each alerts as alert}
-								<tr>
-									<td class="whitespace-nowrap px-6 py-4 text-sm font-medium">
-										{alert.id}
-									</td>
-									<td class="whitespace-nowrap px-6 py-4 text-xs font-semibold">
-										{#if alert.monitor_status === "DOWN"}
-											<span class="text-red-500">
-												{alert.monitor_status}
-											</span>
-										{:else}
-											<span class="text-yellow-500">
-												{alert.monitor_status}
-											</span>
-										{/if}
-									</td>
-									<td class="whitespace-nowrap px-6 py-4 text-sm">
-										{alert.monitor_tag}
-									</td>
-									<td class="whitespace-nowrap px-6 py-4 text-xs font-semibold">
-										{#if alert.alert_status === "RESOLVED"}
-											<span class="text-blue-500">
-												{alert.alert_status}
-											</span>
-										{:else}
-											<span class="text-fuchsia-500">
-												{alert.alert_status}
-											</span>
-										{/if}
-									</td>
-									<td class="whitespace-nowrap px-6 py-4 text-sm">
-										{alert.health_checks}
-									</td>
-									<td class="whitespace-nowrap px-6 py-4 text-xs font-semibold">
-										{#if !!alert.incident_number}
-											<a
-												target="_blank"
-												href="{incidentURL}/{alert.incident_number}"
-												class="text-cyan-500 hover:underline focus:outline-none"
-											>
-												{alert.incident_number}
-											</a>
-										{:else}
-											-
-										{/if}
-									</td>
-									<td class="whitespace-nowrap px-6 py-4 text-sm">
-										{moment
-											.utc(alert.created_at, "YYYY-MM-DD HH:mm:ss")
-											.local()
-											.format("YYYY-MM-DD HH:mm:ss")}
-									</td>
-								</tr>
-							{/each}
-						</tbody>
-					</table>
-				</div>
-			</div>
-		</div>
-	</div>
+  <div class="mb-4 flex justify-between">
+    <div>
+      {#if loadingData}
+        <Loader class="mt-6 h-4 w-4 animate-spin" />
+      {/if}
+    </div>
+    <!-- Pagination -->
+    {#if totalPages > 1}
+      <nav class="flex max-w-2xl items-center gap-x-1" aria-label="Pagination">
+        <button
+          disabled={pageNo === 1}
+          type="button"
+          class="inline-flex min-h-[38px] min-w-[38px] items-center justify-center gap-x-2 rounded-lg border border-transparent px-2.5 py-2 text-sm text-gray-800 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10"
+          aria-label="Previous"
+          on:click={() => {
+            pageNo--;
+            loadData();
+          }}
+        >
+          <ChevronLeft class="size-3.5 shrink-0" />
+          <span class="sr-only">Previous</span>
+        </button>
+        <div class="flex max-w-[380px] items-center gap-x-1 overflow-x-auto">
+          {#each Array.from({ length: totalPages }, (_, i) => i + 1) as page}
+            <button
+              on:click={() => {
+                pageNo = page;
+                loadData();
+              }}
+              type="button"
+              class="flex min-h-[38px] min-w-[38px] items-center justify-center rounded-lg border {page == pageNo
+                ? 'border-gray-200'
+                : 'border-transparent'}  px-3 py-2 text-sm text-gray-800 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10"
+            >
+              {page}
+            </button>
+          {/each}
+        </div>
+        <button
+          type="button"
+          disabled={pageNo === totalPages}
+          class="inline-flex min-h-[38px] min-w-[38px] items-center justify-center gap-x-2 rounded-lg border border-transparent px-2.5 py-2 text-sm text-gray-800 hover:bg-gray-100 focus:bg-gray-100 focus:outline-none disabled:pointer-events-none disabled:opacity-50 dark:border-transparent dark:text-white dark:hover:bg-white/10 dark:focus:bg-white/10"
+          aria-label="Next"
+          on:click={() => {
+            pageNo++;
+            loadData();
+          }}
+        >
+          <span class="sr-only">Next</span>
+          <ChevronRight class="size-3.5 shrink-0" />
+        </button>
+      </nav>
+    {/if}
+    <!-- End Pagination -->
+  </div>
+  <div class="flex flex-col">
+    <div class="-m-1.5 overflow-x-auto">
+      <div class="inline-block min-w-full p-1.5 align-middle">
+        <div class="overflow-hidden rounded-lg border dark:border-neutral-700">
+          <table class="min-w-full divide-y divide-gray-200 dark:divide-neutral-700">
+            <thead>
+              <tr>
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500">ID</th
+                >
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
+                  >Type</th
+                >
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
+                  >Monitor</th
+                >
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
+                  >Status</th
+                >
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
+                  >Checks</th
+                >
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
+                  >Incident</th
+                >
+                <th
+                  scope="col"
+                  class="px-6 py-3 text-start text-xs font-medium uppercase text-gray-500 dark:text-neutral-500"
+                  >Created At</th
+                >
+              </tr>
+            </thead>
+            <tbody class="divide-y divide-gray-200 dark:divide-neutral-700">
+              {#each alerts as alert}
+                <tr>
+                  <td class="whitespace-nowrap px-6 py-4 text-sm font-medium">
+                    {alert.id}
+                  </td>
+                  <td class="whitespace-nowrap px-6 py-4 text-xs font-semibold">
+                    {#if alert.monitor_status === "DOWN"}
+                      <span class="text-red-500">
+                        {alert.monitor_status}
+                      </span>
+                    {:else}
+                      <span class="text-yellow-500">
+                        {alert.monitor_status}
+                      </span>
+                    {/if}
+                  </td>
+                  <td class="whitespace-nowrap px-6 py-4 text-sm">
+                    {alert.monitor_tag}
+                  </td>
+                  <td class="whitespace-nowrap px-6 py-4 text-xs font-semibold">
+                    {#if alert.alert_status === "RESOLVED"}
+                      <span class="text-blue-500">
+                        {alert.alert_status}
+                      </span>
+                    {:else}
+                      <span class="text-fuchsia-500">
+                        {alert.alert_status}
+                      </span>
+                    {/if}
+                  </td>
+                  <td class="whitespace-nowrap px-6 py-4 text-sm">
+                    {alert.health_checks}
+                  </td>
+                  <td class="whitespace-nowrap px-6 py-4 text-xs font-semibold">
+                    {#if !!alert.incident_number}
+                      <a
+                        rel="external"
+                        href="{base}/manage/app/events#{alert.incident_number}"
+                        class="text-cyan-500 hover:underline focus:outline-none"
+                      >
+                        {alert.incident_number}
+                      </a>
+                    {:else}
+                      -
+                    {/if}
+                  </td>
+                  <td class="whitespace-nowrap px-6 py-4 text-sm">
+                    {moment.utc(alert.created_at, "YYYY-MM-DD HH:mm:ss").local().format("YYYY-MM-DD HH:mm:ss")}
+                  </td>
+                </tr>
+              {/each}
+            </tbody>
+          </table>
+        </div>
+      </div>
+    </div>
+  </div>
 </div>

src/lib/components/manage/monitorsAdd.svelte

@@ -1,6 +1,6 @@
 <script>
   import { Button } from "$lib/components/ui/button";
-  import { Plus, X, Settings, Bell, Loader, ArrowDownUp, Grip } from "lucide-svelte";
+  import { Plus, X, Settings, Bell, Loader, ArrowDownUp, Grip, ExternalLink } from "lucide-svelte";
   import { Input } from "$lib/components/ui/input";
   import { Label } from "$lib/components/ui/label";
   import { base } from "$app/paths";
@@ -8,9 +8,11 @@
   import { onMount } from "svelte";
   import * as Card from "$lib/components/ui/card";
   import * as Select from "$lib/components/ui/select";
-  import { storeSiteData, SortMonitor } from "$lib/clientTools.js";
+  import { storeSiteData, SortMonitor, RandomString } from "$lib/clientTools.js";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
   import { dndzone } from "svelte-dnd-action";
   import { flip } from "svelte/animate";
+  import GMI from "$lib/components/gmi.svelte";
 
   export let categories = [];
   export let colorDown = "#777";
@@ -30,9 +32,14 @@
     //broadcast a custom event named blockScroll
     if (!!isMounted) {
       const noScrollEvent = new CustomEvent("noScroll", {
-        detail: showAddMonitor
+        detail: showAddMonitor || draggableMenu || shareMenusToggle
       });
       window.dispatchEvent(noScrollEvent);
+
+      //if modal closed then clear url hashed
+      if (!showAddMonitor) {
+        window.location.hash = "";
+      }
     }
   }
 
@@ -80,10 +87,46 @@
         nameServer: "8.8.8.8",
         matchType: "ANY",
         values: []
+      },
+      groupConfig: createGroupConfig({
+        monitors: [],
+        timeout: 10000,
+        hideMonitors: false
+      }),
+      sslConfig: {
+        host: "",
+        port: 443,
+        degradedRemainingHours: 1,
+        downRemainingHours: 0
+      },
+      sqlConfig: {
+        connectionString: "",
+        query: "SELECT 1",
+        timeout: 5000,
+        dbType: "pg" //mysql2
+      },
+      heartbeatConfig: {
+        degradedRemainingMinutes: 1,
+        downRemainingMinutes: 2,
+        secretString: RandomString(32)
       }
     };
   }
 
+  function createGroupConfig(groupConfig) {
+    let eligibleMonitors = monitors
+      .filter((m) => m.monitor_type != "GROUP" && m.status == "ACTIVE")
+      .map((m) => {
+        let isSelected = false;
+        if (groupConfig.monitors) {
+          isSelected = !!groupConfig.monitors.find((tm) => tm.id == m.id);
+        }
+
+        return { id: m.id, name: m.name, tag: m.tag, selected: isSelected };
+      });
+    return { monitors: eligibleMonitors, timeout: groupConfig.timeout, hideMonitors: groupConfig.hideMonitors };
+  }
+
   function showUpdateMonitorSheet(m) {
     resetNewMonitor();
     newMonitor = { ...newMonitor, ...m };
@@ -96,6 +139,14 @@
       newMonitor.dnsConfig = JSON.parse(newMonitor.type_data);
     } else if (newMonitor.monitor_type == "TCP") {
       newMonitor.tcpConfig = JSON.parse(newMonitor.type_data);
+    } else if (newMonitor.monitor_type == "GROUP") {
+      newMonitor.groupConfig = createGroupConfig(JSON.parse(newMonitor.type_data));
+    } else if (newMonitor.monitor_type == "SSL") {
+      newMonitor.sslConfig = JSON.parse(newMonitor.type_data);
+    } else if (newMonitor.monitor_type == "SQL") {
+      newMonitor.sqlConfig = JSON.parse(newMonitor.type_data);
+    } else if (newMonitor.monitor_type == "HEARTBEAT") {
+      newMonitor.heartbeatConfig = JSON.parse(newMonitor.type_data);
     }
     showAddMonitor = true;
   }
@@ -135,7 +186,7 @@
         headers: {
           "Content-Type": "application/json"
         },
-        body: JSON.stringify({ action: "getTriggers", data: { status: "ACTIVE" } })
+        body: JSON.stringify({ action: "getTriggers", data: {} })
       });
       triggers = await apiResp.json();
     } catch (error) {
@@ -239,6 +290,32 @@
   }
   let dropTargetStyle;
   let draggableMenu = false;
+
+  function testMonitor(i) {
+    if (monitors[i].isTestRunning) {
+      return;
+    }
+    monitors[i].isTestRunning = true;
+    fetch(base + "/manage/app/api/", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json"
+      },
+      body: JSON.stringify({
+        action: "testMonitor",
+        data: { monitor_id: monitors[i].id }
+      })
+    })
+      .then((resp) => resp.json())
+      .then((data) => {
+        monitors[i].isTestRunning = false;
+        monitors[i].testResult = data;
+      })
+      .catch((error) => {
+        monitors[i].isTestRunning = false;
+        monitors[i].testResult = data;
+      });
+  }
 </script>
 
 {#if showAddMonitor}
@@ -252,9 +329,7 @@
   />
 {/if}
 {#if draggableMenu}
-  <div
-    class="moldal-container fixed left-0 top-0 z-50 h-screen w-full bg-card bg-opacity-30 backdrop-blur-sm"
-  >
+  <div class="moldal-container fixed left-0 top-0 z-50 h-screen w-full bg-card bg-opacity-30 backdrop-blur-sm">
     <div
       class="absolute left-1/2 top-1/2 h-fit w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md border bg-background shadow-lg backdrop-blur-lg"
     >
@@ -279,11 +354,7 @@
             <div animate:flip={{ duration: flipDurationMs }} class="mb-2 rounded-md bg-card p-2">
               <Grip class="mr-2 inline h-4 w-4" />
               {#if !!monitor.image}
-                <img
-                  src={base + monitor.image}
-                  alt={monitor.name}
-                  class="mr-1 inline-block h-4 w-4"
-                />
+                <GMI src={monitor.image} alt={monitor.name} classList="mr-1 inline-block h-4 w-4" />
               {/if}
               {monitor.name}
             </div>
@@ -312,12 +383,8 @@
       <Select.Content>
         <Select.Group>
           <Select.Label>Status</Select.Label>
-          <Select.Item value="ACTIVE" label="ACTIVE" class="text-sm font-medium">
-            ACTIVE
-          </Select.Item>
-          <Select.Item value="INACTIVE" label="INACTIVE" class="text-sm font-medium">
-            INACTIVE
-          </Select.Item>
+          <Select.Item value="ACTIVE" label="ACTIVE" class="text-sm font-medium">ACTIVE</Select.Item>
+          <Select.Item value="INACTIVE" label="INACTIVE" class="text-sm font-medium">INACTIVE</Select.Item>
         </Select.Group>
       </Select.Content>
     </Select.Root>
@@ -370,22 +437,64 @@
 </div>
 
 <div class="mt-4">
-  {#each monitors as monitor}
+  {#each monitors as monitor, i}
     <Card.Root class="mb-4">
       <Card.Header class="relative">
         <Card.Title>
           {#if !!monitor.image}
-            <img src={base + monitor.image} alt={monitor.name} class="mr-2 inline-block h-8 w-8" />
+            <GMI src={monitor.image} alt={monitor.name} classList="mr-2 inline-block h-8 w-8" />
           {/if}
           {monitor.name}
         </Card.Title>
         {#if !!monitor.description}
           <Card.Description>{@html monitor.description}</Card.Description>
         {/if}
-        <div class="absolute right-2 top-0.5">
-          <Button variant="secondary" class="h-8 w-8 p-2" on:click={() => openAlertMenu(monitor)}>
+        <div class="absolute right-2 top-0.5 flex gap-x-1">
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <Button variant="secondary" class="h-8 p-2 text-xs" on:click={() => testMonitor(i)}>TEST</Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content class="max-w-md">
+              <DropdownMenu.Group>
+                <DropdownMenu.Label class="text-xs">Test Result</DropdownMenu.Label>
+                <DropdownMenu.Separator />
+                <div class="px-2 text-xs">
+                  {#if monitor.isTestRunning}
+                    <div class="text-center">
+                      <Loader class="mx-auto inline h-4 w-4 animate-spin" />
+                    </div>
+                  {:else if !!monitor.testResult}
+                    {#if !!monitor.testResult.error}
+                      <div class="text-red-500">
+                        {monitor.testResult.error}
+                      </div>
+                    {:else if !!monitor.testResult.status && !!monitor.testResult.latency}
+                      <p class="text-muted-foreground">
+                        Status: <span class="text-api-{monitor.testResult.status.toLowerCase()}"
+                          >{monitor.testResult.status}</span
+                        ><br /> Response Time: <span class="text-card-foreground">{monitor.testResult.latency}ms</span>
+                      </p>
+                    {:else}
+                      <div class="text-muted-foreground">No Test Result</div>
+                    {/if}
+                  {/if}
+                </div>
+              </DropdownMenu.Group>
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+
+          <Button
+            variant="secondary"
+            class="h-8 w-8 p-2 {monitor.down_trigger?.active || monitor.degraded_trigger?.active
+              ? 'text-yellow-500'
+              : ''}"
+            on:click={() => openAlertMenu(monitor)}
+          >
             <Bell class="inline h-4 w-4" />
           </Button>
+          <Button variant="secondary" class="h-8 w-8 p-2" rel="external" href="{base}/?monitor={monitor.tag}">
+            <ExternalLink class="inline h-4 w-4" />
+          </Button>
           <Button variant="secondary" class="h-8 w-8 p-2" href="#{monitor.tag}">
             <Settings class="inline h-4 w-4" />
           </Button>
@@ -424,9 +533,7 @@
 </div>
 
 {#if shareMenusToggle}
-  <div
-    class="moldal-container fixed left-0 top-0 z-50 h-screen w-full bg-card bg-opacity-30 backdrop-blur-sm"
-  >
+  <div class="moldal-container fixed left-0 top-0 z-50 h-screen w-full bg-card bg-opacity-30 backdrop-blur-sm">
     <div
       class="absolute left-1/2 top-1/2 h-fit w-full max-w-2xl -translate-x-1/2 -translate-y-1/2 rounded-md border bg-background shadow-lg backdrop-blur-lg"
     >
@@ -449,10 +556,7 @@
         <hr class="my-4" />
         {#each Object.entries(monitorTriggers) as [key, data]}
           <div class="flex justify-between">
-            <h3
-              class="font-semibold"
-              style="color:{data.trigger_type == 'DOWN' ? colorDown : colorDegraded};"
-            >
+            <h3 class="font-semibold" style="color:{data.trigger_type == 'DOWN' ? colorDown : colorDegraded};">
               If Monitor {data.trigger_type}
             </h3>
             <div>
@@ -467,7 +571,7 @@
                   }}
                 />
                 <div
-                  class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
+                  class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800 rtl:peer-checked:after:-translate-x-full"
                 ></div>
               </label>
             </div>
@@ -479,12 +583,7 @@
                 Failure Threshold
                 <span class="text-red-500">*</span>
               </Label>
-              <Input
-                bind:value={data.failureThreshold}
-                min="1"
-                id="{key}failureThreshold"
-                type="number"
-              />
+              <Input bind:value={data.failureThreshold} min="1" id="{key}failureThreshold" type="number" />
             </div>
             <div class="col-span-1">
               <div class="col-span-1">
@@ -492,12 +591,7 @@
                   Success Threshold
                   <span class="text-red-500">*</span>
                 </Label>
-                <Input
-                  bind:value={data.successThreshold}
-                  min="1"
-                  id="{key}successThreshold"
-                  type="number"
-                />
+                <Input bind:value={data.successThreshold} min="1" id="{key}successThreshold" type="number" />
               </div>
             </div>
             <div class="col-span-1">
@@ -511,16 +605,11 @@
                 }}
               >
                 <Select.Trigger id="{key}createIncident">
-                  <Select.Value
-                    bind:value={data.createIncident}
-                    placeholder={data.createIncident}
-                  />
+                  <Select.Value bind:value={data.createIncident} placeholder={data.createIncident} />
                 </Select.Trigger>
                 <Select.Content>
                   <Select.Group>
-                    <Select.Item value="YES" label="YES" class="text-sm font-medium">
-                      YES
-                    </Select.Item>
+                    <Select.Item value="YES" label="YES" class="text-sm font-medium">YES</Select.Item>
                     <Select.Item value="NO" label="NO" class="text-sm font-medium">NO</Select.Item>
                   </Select.Group>
                 </Select.Content>
@@ -544,12 +633,8 @@
                 </Select.Trigger>
                 <Select.Content>
                   <Select.Group>
-                    <Select.Item value="critical" label="CRITICAL" class="text-sm font-medium">
-                      CRITICAL
-                    </Select.Item>
-                    <Select.Item value="warning" label="WARNING" class="text-sm font-medium">
-                      WARNING
-                    </Select.Item>
+                    <Select.Item value="critical" label="CRITICAL" class="text-sm font-medium">CRITICAL</Select.Item>
+                    <Select.Item value="warning" label="WARNING" class="text-sm font-medium">WARNING</Select.Item>
                   </Select.Group>
                 </Select.Content>
               </Select.Root>
@@ -564,7 +649,7 @@
             <p class="col-span-4 mt-2 text-sm font-medium">Choose Triggers</p>
             {#each triggers as trigger}
               <div class="col-span-1 overflow-hidden overflow-ellipsis whitespace-nowrap">
-                <label class="cursor-pointer">
+                <label class="cursor-pointer" class:line-through={trigger.trigger_status != "ACTIVE"}>
                   <input
                     type="checkbox"
                     class="text-sm"
@@ -576,29 +661,13 @@
                     }}
                   />
                   {#if trigger.trigger_type == "webhook"}
-                    <img
-                      src={base + "/webhooks.svg"}
-                      alt={trigger.trigger_type}
-                      class="ml-2 inline-block h-4 w-4"
-                    />
+                    <img src={base + "/webhooks.svg"} alt={trigger.trigger_type} class="ml-2 inline-block h-4 w-4" />
                   {:else if trigger.trigger_type == "email"}
-                    <img
-                      src={base + "/email.png"}
-                      alt={trigger.trigger_type}
-                      class="ml-2 inline-block h-4 w-4"
-                    />
+                    <img src={base + "/email.png"} alt={trigger.trigger_type} class="ml-2 inline-block h-4 w-4" />
                   {:else if trigger.trigger_type == "slack"}
-                    <img
-                      src={base + "/slack.svg"}
-                      alt={trigger.trigger_type}
-                      class="ml-2 inline-block h-4 w-4"
-                    />
+                    <img src={base + "/slack.svg"} alt={trigger.trigger_type} class="ml-2 inline-block h-4 w-4" />
                   {:else if trigger.trigger_type == "discord"}
-                    <img
-                      src={base + "/discord.svg"}
-                      alt={trigger.trigger_type}
-                      class="ml-2 inline-block h-4 w-4"
-                    />
+                    <img src={base + "/discord.svg"} alt={trigger.trigger_type} class="ml-2 inline-block h-4 w-4" />
                   {/if}
                   {trigger.name}
                 </label>

src/lib/components/manage/siteInfo.svelte

@@ -1,381 +1,452 @@
 <script>
-	import * as Card from "$lib/components/ui/card";
-	import { Button } from "$lib/components/ui/button";
-	import { Input } from "$lib/components/ui/input";
-	import { Label } from "$lib/components/ui/label";
-	import { siteDataExtractFromDb, storeSiteData } from "$lib/clientTools.js";
-	import { tooltipAction } from "svelte-legos";
-	import { base } from "$app/paths";
-	import { Loader, Info, X } from "lucide-svelte";
-	import { Tooltip } from "bits-ui";
+  import * as Card from "$lib/components/ui/card";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { siteDataExtractFromDb, storeSiteData } from "$lib/clientTools.js";
+  import { tooltipAction } from "svelte-legos";
+  import { base } from "$app/paths";
+  import { Loader, Info, X } from "lucide-svelte";
+  import * as Alert from "$lib/components/ui/alert";
+  import { Tooltip } from "bits-ui";
+  import * as Select from "$lib/components/ui/select";
+  import GMI from "$lib/components/gmi.svelte";
 
-	export let data;
+  export let data;
 
-	let siteInformation = {
-		title: "",
-		siteName: "",
-		siteURL: "",
-		home: "",
-		logo: "",
-		favicon: ""
-	};
+  let siteInformation = {
+    title: "",
+    siteName: "",
+    siteURL: "",
+    home: "",
+    logo: "",
+    favicon: ""
+  };
 
-	let logoFile;
+  let logoFile;
 
-	let formErrorMessage = "";
+  let formErrorMessage = "";
 
-	siteInformation = siteDataExtractFromDb(data.siteData, siteInformation);
+  siteInformation = siteDataExtractFromDb(data.siteData, siteInformation);
 
-	let formState = "idle";
-	async function formSubmit() {
-		formErrorMessage = "";
-		formState = "loading";
-		let resp = await storeSiteData(siteInformation);
-		//print data
-		let data = await resp.json();
-		formState = "idle";
-		if (data.error) {
-			formErrorMessage = data.error;
-			return;
-		}
-	}
+  let formState = "idle";
+  async function formSubmit() {
+    formErrorMessage = "";
+    formState = "loading";
+    let resp = await storeSiteData(siteInformation);
+    //print data
+    let data = await resp.json();
+    formState = "idle";
+    if (data.error) {
+      formErrorMessage = data.error;
+      return;
+    }
+  }
 
-	function handleFileChangeFavicon(event) {
-		const file = event.target.files[0];
-		if (file) {
-			const reader = new FileReader();
-			reader.onload = () => {
-				siteInformation.favicon = reader.result;
-				uploadFunction(reader.result);
-			};
-			reader.readAsDataURL(file);
-		}
-	}
-	let uploadLogoStatus = "";
-	let uploadingLogo = false;
-	async function handleFileChangeLogo(event) {
-		event.preventDefault();
+  function handleFileChangeFavicon(event) {
+    const file = event.target.files[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onload = () => {
+        siteInformation.favicon = reader.result;
+        uploadFunction(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  }
+  let uploadLogoStatus = "";
+  let uploadingLogo = false;
+  async function handleFileChangeLogo(event) {
+    event.preventDefault();
 
-		uploadLogoStatus = "";
-		const file = event.target.files[0];
-		if (!file) {
-			uploadLogoStatus = "Please select a file to upload.";
-			return;
-		}
+    uploadLogoStatus = "";
+    const file = event.target.files[0];
+    if (!file) {
+      uploadLogoStatus = "Please select a file to upload.";
+      return;
+    }
 
-		if (file.size > 100000) {
-			uploadLogoStatus = "File size should be less than 100KB.";
-			return;
-		}
+    if (file.size > 102400) {
+      uploadLogoStatus = "File size should be less than 100KB.";
+      return;
+    }
 
-		const formData = new FormData();
-		formData.append("image", file);
-		uploadingLogo = true;
-		try {
-			const response = await fetch(base + "/manage/app/upload", {
-				method: "POST",
-				body: formData
-			});
+    const formData = new FormData();
+    formData.append("image", file);
+    uploadingLogo = true;
+    try {
+      const response = await fetch(base + "/manage/app/upload", {
+        method: "POST",
+        body: formData
+      });
 
-			if (response.ok) {
-				const result = await response.json();
-				siteInformation.logo = "/uploads/" + result.filename;
-			} else {
-				uploadLogoStatus = "Failed to upload file.";
-			}
-		} catch (error) {
-			uploadLogoStatus = "An error occurred while uploading the file.";
-		} finally {
-			uploadingLogo = false;
-		}
-	}
+      if (response.ok) {
+        const result = await response.json();
+        siteInformation.logo = "/uploads/" + result.filename;
+      } else {
+        uploadLogoStatus = "Failed to upload file.";
+      }
+    } catch (error) {
+      uploadLogoStatus = "An error occurred while uploading the file.";
+    } finally {
+      uploadingLogo = false;
+    }
+  }
 
-	let uploadFaviconStatus = "";
-	let uploadingFavicon = false;
-	async function handleFaviconChangeLogo(event) {
-		event.preventDefault();
+  let uploadFaviconStatus = "";
+  let uploadingFavicon = false;
+  async function handleFaviconChangeLogo(event) {
+    event.preventDefault();
 
-		uploadFaviconStatus = "";
-		const file = event.target.files[0];
-		if (!file) {
-			uploadFaviconStatus = "Please select a file to upload.";
-			return;
-		}
+    uploadFaviconStatus = "";
+    const file = event.target.files[0];
+    if (!file) {
+      uploadFaviconStatus = "Please select a file to upload.";
+      return;
+    }
 
-		if (file.size > 20000) {
-			uploadFaviconStatus = "File size should be less than 20KB.";
-			return;
-		}
+    if (file.size > 20480) {
+      uploadFaviconStatus = "File size should be less than 20KB.";
+      return;
+    }
 
-		const formData = new FormData();
-		formData.append("image", file);
-		uploadingFavicon = true;
-		try {
-			const response = await fetch(base + "/manage/app/upload", {
-				method: "POST",
-				body: formData
-			});
+    const formData = new FormData();
+    formData.append("image", file);
+    uploadingFavicon = true;
+    try {
+      const response = await fetch(base + "/manage/app/upload", {
+        method: "POST",
+        body: formData
+      });
 
-			if (response.ok) {
-				const result = await response.json();
-				siteInformation.favicon = "/uploads/" + result.filename;
-			} else {
-				uploadFaviconStatus = "Failed to upload file.";
-			}
-		} catch (error) {
-			uploadFaviconStatus = "An error occurred while uploading the file.";
-		} finally {
-			uploadingFavicon = false;
-		}
-	}
+      if (response.ok) {
+        const result = await response.json();
+        siteInformation.favicon = "/uploads/" + result.filename;
+      } else {
+        uploadFaviconStatus = "Failed to upload file.";
+      }
+    } catch (error) {
+      uploadFaviconStatus = "An error occurred while uploading the file.";
+    } finally {
+      uploadingFavicon = false;
+    }
+  }
+  let typeOfLogoUpload = siteInformation.logo.startsWith("http") ? "URL" : "FILE";
+  let typeOfFaviconUpload = siteInformation.favicon.startsWith("http") ? "URL" : "FILE";
 </script>
 
 <Card.Root class="mt-4">
-	<Card.Header class="border-b">
-		<Card.Title>Site Configuration</Card.Title>
-		<Card.Description>Configure your site information here.</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<form class="mx-auto mt-4 space-y-4" on:submit|preventDefault={formSubmit}>
-			<div class="flex w-full flex-row justify-evenly gap-2">
-				<div class="w-full">
-					<Label for="title" class="">
-						Site Title
-						<span class="text-red-500">*</span>
+  <Card.Header class="border-b">
+    <Card.Title>Site Configuration</Card.Title>
+    <Card.Description>Configure your site information here.</Card.Description>
+  </Card.Header>
+  <Card.Content>
+    {#if !!base}
+      <Alert.Root class="my-2">
+        <Alert.Title>Sub path</Alert.Title>
+        <Alert.Description>Your site is running in a subpath <span class="">{base}</span></Alert.Description>
+      </Alert.Root>
+    {/if}
+    <form class="mx-auto mt-4 space-y-4" on:submit|preventDefault={formSubmit}>
+      <div class="flex w-full flex-row justify-evenly gap-2">
+        <div class="w-full">
+          <Label for="title" class="">
+            Site Title
+            <span class="text-red-500">*</span>
 
-						<Tooltip.Root openDelay={100}>
-							<Tooltip.Trigger class="">
-								<Info class="inline-block h-4 w-4 text-muted-foreground" />
-							</Tooltip.Trigger>
-							<Tooltip.Content>
-								<div
-									class=" flex items-center justify-center rounded border bg-input p-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-								>
-									Site Title will be the page title of your site.
-									&lt;title&gt;&lt;/title&gt;
-								</div>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</Label>
-					<Input
-						bind:value={siteInformation.title}
-						class="mt-2"
-						type="text"
-						id="title"
-						placeholder="eg. kener"
-						required
-					/>
-				</div>
-				<div class="w-full">
-					<Label for="siteName">
-						Site Name
-						<span class="text-red-500">*</span>
+            <Tooltip.Root openDelay={100}>
+              <Tooltip.Trigger class="">
+                <Info class="inline-block h-4 w-4 text-muted-foreground" />
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <div
+                  class=" flex items-center justify-center rounded border bg-input p-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+                >
+                  Site Title will be the page title of your site. &lt;title&gt;&lt;/title&gt;
+                </div>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </Label>
+          <Input
+            bind:value={siteInformation.title}
+            class="mt-2"
+            type="text"
+            id="title"
+            placeholder="eg. kener"
+            required
+          />
+        </div>
+        <div class="w-full">
+          <Label for="siteName">
+            Site Name
+            <span class="text-red-500">*</span>
 
-						<Tooltip.Root openDelay={100}>
-							<Tooltip.Trigger class="">
-								<Info class="inline-block h-4 w-4 text-muted-foreground" />
-							</Tooltip.Trigger>
-							<Tooltip.Content>
-								<div
-									class=" flex items-center justify-center rounded border bg-input p-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-								>
-									This is the name of your site.<br /> It will be shown in the nav
-									bar as brand name.
-								</div>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</Label>
-					<Input
-						bind:value={siteInformation.siteName}
-						class="mt-2"
-						type="text"
-						id="siteName"
-						placeholder="eg. Kener.ing"
-						required
-					/>
-				</div>
-			</div>
-			<div class="flex w-full flex-row justify-evenly gap-2">
-				<div class="w-full">
-					<Label for="siteURL">
-						Site URL
-						<span class="text-red-500">*</span>
-						<Tooltip.Root openDelay={100}>
-							<Tooltip.Trigger class="">
-								<Info class="inline-block h-4 w-4 text-muted-foreground" />
-							</Tooltip.Trigger>
-							<Tooltip.Content>
-								<div
-									class=" flex items-center justify-center rounded border bg-input p-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-								>
-									The URL your kener is hosted on.
-								</div>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</Label>
-					<Input
-						bind:value={siteInformation.siteURL}
-						class="mt-2"
-						type="text"
-						id="siteURL"
-						placeholder="eg. https://status.example.com"
-						required
-					/>
-				</div>
-			</div>
-			<div class="flex w-full flex-row justify-evenly gap-2">
-				<div class="w-full">
-					<Label for="siteURL">
-						Home Location
-						<span class="text-red-500">*</span>
-						<Tooltip.Root openDelay={100}>
-							<Tooltip.Trigger class="">
-								<Info class="inline-block h-4 w-4 text-muted-foreground" />
-							</Tooltip.Trigger>
-							<Tooltip.Content>
-								<div
-									class=" flex items-center justify-center rounded border bg-input p-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-								>
-									Where to go when someone clicks on the brand logo in the navbar.
-								</div>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</Label>
+            <Tooltip.Root openDelay={100}>
+              <Tooltip.Trigger class="">
+                <Info class="inline-block h-4 w-4 text-muted-foreground" />
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <div
+                  class=" flex items-center justify-center rounded border bg-input p-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+                >
+                  This is the name of your site.<br /> It will be shown in the nav bar as brand name.
+                </div>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </Label>
+          <Input
+            bind:value={siteInformation.siteName}
+            class="mt-2"
+            type="text"
+            id="siteName"
+            placeholder="eg. Kener.ing"
+            required
+          />
+        </div>
+      </div>
+      <div class="flex w-full flex-row justify-evenly gap-2">
+        <div class="w-full">
+          <Label for="siteURL">
+            Site URL
+            <span class="text-red-500">*</span>
+            <Tooltip.Root openDelay={100}>
+              <Tooltip.Trigger class="">
+                <Info class="inline-block h-4 w-4 text-muted-foreground" />
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <div
+                  class=" flex items-center justify-center rounded border bg-input p-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+                >
+                  The URL your kener is hosted on.
+                </div>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </Label>
+          <Input
+            bind:value={siteInformation.siteURL}
+            class="mt-2"
+            type="text"
+            id="siteURL"
+            placeholder="eg. https://status.example.com"
+            required
+          />
+        </div>
+      </div>
+      <div class="flex w-full flex-row justify-evenly gap-2">
+        <div class="w-full">
+          <Label for="siteURL">
+            Home Location
+            <span class="text-red-500">*</span>
+            <Tooltip.Root openDelay={100}>
+              <Tooltip.Trigger class="">
+                <Info class="inline-block h-4 w-4 text-muted-foreground" />
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <div
+                  class=" flex items-center justify-center rounded border bg-input p-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+                >
+                  Where to go when someone clicks on the brand logo in the navbar.
+                </div>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </Label>
 
-					<Input
-						bind:value={siteInformation.home}
-						class="mt-2"
-						type="text"
-						id="home"
-						placeholder="/ or https://example.com"
-						required
-					/>
-				</div>
-			</div>
+          <Input
+            bind:value={siteInformation.home}
+            class="mt-2"
+            type="text"
+            id="home"
+            placeholder="/ or https://example.com"
+            required
+          />
+        </div>
+      </div>
 
-			<div class="flex w-full flex-col justify-evenly gap-2">
-				<div>
-					<Label for="logo">Logo</Label>
-				</div>
-				<div class="flex gap-x-2">
-					{#if !!siteInformation.logo}
-						<div class="relative">
-							<Label
-								for="logo"
-								class="inline-block h-[60px] w-[60px] cursor-pointer rounded-sm border p-1"
-							>
-								<img
-									src={base + siteInformation.logo}
-									class="w-fit hover:scale-95"
-									alt=""
-								/>
-							</Label>
+      <div class="flex w-full flex-col justify-evenly gap-2">
+        <div>
+          <Label for="logo">Logo</Label>
+        </div>
+        <div class="flex gap-x-4">
+          {#if !!siteInformation.logo}
+            <div class="relative mt-2.5">
+              <Label for="logo" class="inline-block h-[60px] w-[60px] cursor-pointer rounded-sm border p-1">
+                <GMI src={siteInformation.logo} classList="w-fit hover:scale-95" alt="" />
+              </Label>
 
-							<div class="absolute -right-2 -top-2">
-								<Button
-									variant="secondary"
-									class="h-5 w-5 rounded-full border p-1"
-									size="icon"
-									on:click={() => (siteInformation.logo = "")}
-								>
-									<X class="h-4 w-4" />
-								</Button>
-							</div>
-							{#if uploadingLogo}
-								<div
-									class="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform rounded-sm bg-[rgba(0,0,0,0.5)] p-0.5"
-								>
-									<Loader class="h-4 w-4 animate-spin" />
-								</div>
-							{/if}
-						</div>
-					{/if}
-					<div>
-						<Input
-							class=""
-							id="logo"
-							type="file"
-							accept=".jpg, .jpeg, .png"
-							disabled={uploadingLogo}
-							on:change={handleFileChangeLogo}
-						/>
-						<p class="mt-1 text-xs font-medium">
-							Please upload a square image of max size 100KB
-						</p>
-						<p class="mt-1 text-xs font-medium text-destructive">
-							{uploadLogoStatus}
-						</p>
-					</div>
-				</div>
-				<div>
-					<Label for="favicon">Favicon</Label>
-				</div>
-				<div class="flex gap-x-2">
-					{#if !!siteInformation.favicon}
-						<div class="relative">
-							<Label
-								for="favicon"
-								class="inline-block h-[40px] w-[40px] cursor-pointer rounded-sm border p-1"
-							>
-								<img
-									src={base + siteInformation.favicon}
-									class="w-fit hover:scale-95"
-									alt=""
-								/>
-							</Label>
+              <div class="absolute -right-2 -top-2">
+                <Button
+                  variant="secondary"
+                  class="h-5 w-5 rounded-full border p-1"
+                  size="icon"
+                  on:click={() => (siteInformation.logo = "")}
+                >
+                  <X class="h-4 w-4" />
+                </Button>
+              </div>
+              {#if uploadingLogo}
+                <div
+                  class="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform rounded-sm bg-[rgba(0,0,0,0.5)] p-0.5"
+                >
+                  <Loader class="h-4 w-4 animate-spin" />
+                </div>
+              {/if}
+            </div>
+          {/if}
+          <div class="flex gap-x-2">
+            <div>
+              <Label for="typeOfLogoUpload" class="text-sm font-medium">Method</Label>
+              <Select.Root
+                portal={null}
+                onSelectedChange={(e) => {
+                  typeOfLogoUpload = e.value;
+                }}
+                selected={{
+                  value: typeOfLogoUpload,
+                  label: typeOfLogoUpload
+                }}
+              >
+                <Select.Trigger class="mt-2 w-[200px]" id="typeOfLogoUpload">
+                  <Select.Value bind:value={typeOfLogoUpload} placeholder="Logo Type" />
+                </Select.Trigger>
+                <Select.Content>
+                  <Select.Group>
+                    <Select.Label>Logo Type</Select.Label>
+                    <Select.Item value="URL" label="URL" class="text-sm font-medium">URL</Select.Item>
+                    <Select.Item value="FILE" label="FILE" class="text-sm font-medium">FILE</Select.Item>
+                  </Select.Group>
+                </Select.Content>
+              </Select.Root>
+            </div>
+            {#if typeOfLogoUpload === "URL"}
+              <div>
+                <Label for="logo" class="text-sm font-medium">Please provide a URL of the image</Label>
+                <Input
+                  bind:value={siteInformation.logo}
+                  class="mt-2"
+                  type="text"
+                  id="logo"
+                  placeholder="https://example.com/logo.png"
+                />
+              </div>
+            {:else}
+              <div>
+                <Label for="logo" class="text-sm font-medium">Please upload a square image of max size 100KB</Label>
+                <Input
+                  class="mt-2"
+                  id="logo"
+                  type="file"
+                  accept=".jpg, .jpeg, .png, .svg"
+                  disabled={uploadingLogo}
+                  on:change={handleFileChangeLogo}
+                />
 
-							<div class="absolute -right-2 -top-2">
-								<Button
-									variant="secondary"
-									class="h-5 w-5 rounded-full border p-1"
-									size="icon"
-									on:click={() => (siteInformation.favicon = "")}
-								>
-									<X class="h-4 w-4" />
-								</Button>
-							</div>
-							{#if uploadingFavicon}
-								<div
-									class="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform rounded-sm bg-[rgba(0,0,0,0.5)] p-0.5"
-								>
-									<Loader class="h-4 w-4 animate-spin" />
-								</div>
-							{/if}
-						</div>
-					{/if}
-					<div>
-						<Input
-							class=""
-							id="logo"
-							type="file"
-							accept=".jpg, .jpeg, .png, .ico"
-							disabled={uploadingFavicon}
-							on:change={handleFaviconChangeLogo}
-						/>
-						<p class="mt-1 text-xs font-medium">
-							Please upload a square image of max size 20KB
-						</p>
-						<p class="mt-1 text-xs font-medium text-destructive">
-							{uploadFaviconStatus}
-						</p>
-					</div>
-				</div>
-			</div>
-			<div class="flex w-full justify-end">
-				<p class="px-4 pt-3 text-sm">
-					<span class="text-red-500">
-						{formErrorMessage}
-					</span>
-				</p>
-				<Button type="submit" disabled={formState === "loading"}>
-					Save
-					{#if formState === "loading"}
-						<Loader class="ml-2 inline h-4 w-4 animate-spin" />
-					{/if}
-				</Button>
-			</div>
-		</form>
-	</Card.Content>
+                <p class="mt-1 text-xs font-medium text-destructive">
+                  {uploadLogoStatus}
+                </p>
+              </div>
+            {/if}
+          </div>
+        </div>
+        <div>
+          <Label for="favicon">Favicon</Label>
+        </div>
+        <div class="flex gap-x-4">
+          {#if !!siteInformation.favicon}
+            <div class="relative mt-8">
+              <Label for="favicon" class="inline-block h-[40px] w-[40px] cursor-pointer rounded-sm border p-1">
+                <GMI src={siteInformation.favicon} classList="w-fit hover:scale-95" alt="" />
+              </Label>
+
+              <div class="absolute -right-2 -top-2">
+                <Button
+                  variant="secondary"
+                  class="h-5 w-5 rounded-full border p-1"
+                  size="icon"
+                  on:click={() => (siteInformation.favicon = "")}
+                >
+                  <X class="h-4 w-4" />
+                </Button>
+              </div>
+              {#if uploadingFavicon}
+                <div
+                  class="absolute left-1/2 top-1/2 h-5 w-5 -translate-x-1/2 -translate-y-1/2 transform rounded-sm bg-[rgba(0,0,0,0.5)] p-0.5"
+                >
+                  <Loader class="h-4 w-4 animate-spin" />
+                </div>
+              {/if}
+            </div>
+          {/if}
+          <div class="flex gap-x-2">
+            <div>
+              <Label for="typeOfFaviconUpload" class="text-sm font-medium">Method</Label>
+              <Select.Root
+                portal={null}
+                onSelectedChange={(e) => {
+                  typeOfFaviconUpload = e.value;
+                }}
+                selected={{
+                  value: typeOfFaviconUpload,
+                  label: typeOfFaviconUpload
+                }}
+              >
+                <Select.Trigger class="mt-2 w-[200px]" id="typeOfFaviconUpload">
+                  <Select.Value bind:value={typeOfFaviconUpload} placeholder="Favicon Type" />
+                </Select.Trigger>
+                <Select.Content>
+                  <Select.Group>
+                    <Select.Label>Favicon Type</Select.Label>
+                    <Select.Item value="URL" label="URL" class="text-sm font-medium">URL</Select.Item>
+                    <Select.Item value="FILE" label="FILE" class="text-sm font-medium">FILE</Select.Item>
+                  </Select.Group>
+                </Select.Content>
+              </Select.Root>
+            </div>
+            {#if typeOfFaviconUpload === "URL"}
+              <div>
+                <Label for="favicon" class="text-sm font-medium">Please provide a URL of the image</Label>
+                <Input
+                  bind:value={siteInformation.favicon}
+                  class="mt-2"
+                  type="text"
+                  id="favicon"
+                  placeholder="https://example.com/favicon.png"
+                />
+              </div>
+            {:else}
+              <div>
+                <Label for="favicon" class="text-sm font-medium">Please upload a square image of max size 20KB</Label>
+                <Input
+                  class="mt-2"
+                  id="favicon"
+                  type="file"
+                  accept=".jpg, .jpeg, .png, .svg"
+                  disabled={uploadingFavicon}
+                  on:change={handleFaviconChangeLogo}
+                />
+
+                <p class="mt-1 text-xs font-medium text-destructive">
+                  {uploadFaviconStatus}
+                </p>
+              </div>
+            {/if}
+          </div>
+        </div>
+        <div class="flex w-full justify-end">
+          <p class="px-4 pt-3 text-sm">
+            <span class="text-red-500">
+              {formErrorMessage}
+            </span>
+          </p>
+          <Button type="submit" disabled={formState === "loading"}>
+            Save
+            {#if formState === "loading"}
+              <Loader class="ml-2 inline h-4 w-4 animate-spin" />
+            {/if}
+          </Button>
+        </div>
+      </div>
+    </form>
+  </Card.Content>
 </Card.Root>
 
 <!-- GitHub Settings -->

src/lib/components/manage/themeInfo.svelte

@@ -1,381 +1,358 @@
 <script>
-	import * as Card from "$lib/components/ui/card";
-	import { Button } from "$lib/components/ui/button";
-	import { Input } from "$lib/components/ui/input";
-	import { Label } from "$lib/components/ui/label";
-	import { Plus, X, Info } from "lucide-svelte";
-	import autoAnimate from "@formkit/auto-animate";
-	import { siteDataExtractFromDb, storeSiteData } from "$lib/clientTools.js";
-	import { base } from "$app/paths";
-	import { Loader } from "lucide-svelte";
-	import * as RadioGroup from "$lib/components/ui/radio-group";
-	import { Tooltip } from "bits-ui";
-	import ColorPicker from "svelte-awesome-color-picker";
+  import * as Card from "$lib/components/ui/card";
+  import { Button } from "$lib/components/ui/button";
+  import { Input } from "$lib/components/ui/input";
+  import { Label } from "$lib/components/ui/label";
+  import { Plus, X, Info } from "lucide-svelte";
+  import autoAnimate from "@formkit/auto-animate";
+  import { siteDataExtractFromDb, storeSiteData } from "$lib/clientTools.js";
+  import { base } from "$app/paths";
+  import { Loader } from "lucide-svelte";
+  import * as RadioGroup from "$lib/components/ui/radio-group";
+  import { Tooltip } from "bits-ui";
+  import ColorPicker from "svelte-awesome-color-picker";
 
-	export let data;
+  export let data;
 
-	let formState = "idle";
+  let formState = "idle";
 
-	let themeData = {
-		pattern: "none",
-		theme: "light",
-		themeToggle: "YES",
-		barStyle: "PARTIAL",
-		barRoundness: "ROUNDED",
-		summaryStyle: "CURRENT",
-		colorsJ: {
-			UP: "#4ead94",
-			DOWN: "#ca3038",
-			DEGRADED: "#e6ca61"
-		},
-		fontJ: {
-			cssSrc: "https://fonts.bunny.net/css?family=albert-sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap",
-			family: "Albert Sans"
-		},
-		colors: "",
-		font: "",
-		customCSS: ""
-	};
+  let themeData = {
+    pattern: "none",
+    theme: "light",
+    themeToggle: "YES",
+    barStyle: "PARTIAL",
+    barRoundness: "ROUNDED",
+    summaryStyle: "CURRENT",
+    colorsJ: {
+      UP: "#4ead94",
+      DOWN: "#ca3038",
+      DEGRADED: "#e6ca61"
+    },
+    fontJ: {
+      cssSrc:
+        "https://fonts.bunny.net/css?family=albert-sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap",
+      family: "Albert Sans"
+    },
+    colors: "",
+    font: "",
+    customCSS: ""
+  };
 
-	themeData = siteDataExtractFromDb(data.siteData, themeData);
+  themeData = siteDataExtractFromDb(data.siteData, themeData);
 
-	if (data.siteData.colors) {
-		themeData.colorsJ = data.siteData.colors;
-	}
-	if (data.siteData.font) {
-		themeData.fontJ = data.siteData.font;
-	}
+  if (data.siteData.colors) {
+    themeData.colorsJ = data.siteData.colors;
+  }
+  if (data.siteData.font) {
+    themeData.fontJ = data.siteData.font;
+  }
 
-	async function formSubmit() {
-		formState = "loading";
-		let themeDataAPI = { ...themeData };
-		themeDataAPI.colors = JSON.stringify(themeDataAPI.colorsJ);
-		themeDataAPI.font = JSON.stringify(themeDataAPI.fontJ);
-		delete themeDataAPI.colorsJ;
-		delete themeDataAPI.fontJ;
-		let resp = await storeSiteData(themeDataAPI);
-		//print data
-		let data = await resp.json();
-		formState = "idle";
-		if (data.error) {
-			alert(data.error);
-			return;
-		}
-	}
+  async function formSubmit() {
+    formState = "loading";
+    let themeDataAPI = { ...themeData };
+    themeDataAPI.colors = JSON.stringify(themeDataAPI.colorsJ);
+    themeDataAPI.font = JSON.stringify(themeDataAPI.fontJ);
+    delete themeDataAPI.colorsJ;
+    delete themeDataAPI.fontJ;
+    let resp = await storeSiteData(themeDataAPI);
+    //print data
+    let data = await resp.json();
+    formState = "idle";
+    if (data.error) {
+      alert(data.error);
+      return;
+    }
+  }
 </script>
 
 <Card.Root class="mt-4">
-	<Card.Header class="border-b">
-		<Card.Title>Theme Customization</Card.Title>
-		<Card.Description>
-			You can customize the theme of your site here. You can change the pattern, theme,
-			colors, font, and monitor style.
-		</Card.Description>
-	</Card.Header>
-	<Card.Content>
-		<form class="mx-auto mt-4 space-y-4" on:submit|preventDefault={formSubmit}>
-			<p class="font-medium">
-				Home Page Pattern
-				<Tooltip.Root openDelay={100}>
-					<Tooltip.Trigger class="">
-						<Info class="inline-block h-4 w-4 text-muted-foreground" />
-					</Tooltip.Trigger>
-					<Tooltip.Content class="max-w-md">
-						<div
-							class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-						>
-							Choose the pattern for the home page. You can choose between squares,
-							dots, or none.
-						</div>
-					</Tooltip.Content>
-				</Tooltip.Root>
-			</p>
+  <Card.Header class="border-b">
+    <Card.Title>Theme Customization</Card.Title>
+    <Card.Description>
+      You can customize the theme of your site here. You can change the pattern, theme, colors, font, and monitor style.
+    </Card.Description>
+  </Card.Header>
+  <Card.Content>
+    <form class="mx-auto mt-4 space-y-4" on:submit|preventDefault={formSubmit}>
+      <p class="font-medium">
+        Home Page Pattern
+        <Tooltip.Root openDelay={100}>
+          <Tooltip.Trigger class="">
+            <Info class="inline-block h-4 w-4 text-muted-foreground" />
+          </Tooltip.Trigger>
+          <Tooltip.Content class="max-w-md">
+            <div
+              class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+            >
+              Choose the pattern for the home page. You can choose between squares, dots, or none.
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </p>
 
-			<div class="flex">
-				<RadioGroup.Root
-					bind:value={themeData.pattern}
-					onValueChange={(e) => (themeData.pattern = e)}
-				>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="squares" id="rsq" />
-						<Label for="rsq">Squares</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="dots" id="rdot" />
-						<Label for="rdot">Dots</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="none" id="rnone" />
-						<Label for="rnone">None</Label>
-					</div>
-				</RadioGroup.Root>
-			</div>
-			<hr />
-			<p class="font-medium">
-				Default Theme
-				<Tooltip.Root openDelay={100}>
-					<Tooltip.Trigger class="">
-						<Info class="inline-block h-4 w-4 text-muted-foreground" />
-					</Tooltip.Trigger>
-					<Tooltip.Content class="max-w-md">
-						<div
-							class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-						>
-							Choose the default theme for the site. You can choose between light,
-							dark, or system.
-						</div>
-					</Tooltip.Content>
-				</Tooltip.Root>
-			</p>
-			<div class="flex">
-				<RadioGroup.Root
-					bind:value={themeData.theme}
-					onValueChange={(e) => (themeData.theme = e)}
-				>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="none" id="none_theme" />
-						<Label for="none_theme">None</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="light" id="light_theme" />
-						<Label for="light_theme">Light</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="dark" id="dark_theme" />
-						<Label for="dark_theme">Dark</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="system" id="system_theme" />
-						<Label for="system_theme">System</Label>
-					</div>
-				</RadioGroup.Root>
-			</div>
-			<p class="font-medium">
-				<label>
-					<input
-						on:change={(e) => {
-							themeData.themeToggle = e.target.checked === true ? "YES" : "NO";
-						}}
-						type="checkbox"
-						checked={themeData.themeToggle === "YES"}
-					/>
-					Let Users toggle theme between light and dark
-				</label>
-			</p>
-			<hr />
-			<p class="font-medium">Monitor Style</p>
+      <div class="flex">
+        <RadioGroup.Root bind:value={themeData.pattern} onValueChange={(e) => (themeData.pattern = e)}>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="squares" id="rsq" />
+            <Label for="rsq">Squares</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="dots" id="rdot" />
+            <Label for="rdot">Dots</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="none" id="rnone" />
+            <Label for="rnone">None</Label>
+          </div>
+        </RadioGroup.Root>
+      </div>
+      <hr />
+      <p class="font-medium">
+        Default Theme
+        <Tooltip.Root openDelay={100}>
+          <Tooltip.Trigger class="">
+            <Info class="inline-block h-4 w-4 text-muted-foreground" />
+          </Tooltip.Trigger>
+          <Tooltip.Content class="max-w-md">
+            <div
+              class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+            >
+              Choose the default theme for the site. You can choose between light, dark, or system.
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </p>
+      <div class="flex">
+        <RadioGroup.Root bind:value={themeData.theme} onValueChange={(e) => (themeData.theme = e)}>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="none" id="none_theme" />
+            <Label for="none_theme">None</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="light" id="light_theme" />
+            <Label for="light_theme">Light</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="dark" id="dark_theme" />
+            <Label for="dark_theme">Dark</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="system" id="system_theme" />
+            <Label for="system_theme">System</Label>
+          </div>
+        </RadioGroup.Root>
+      </div>
+      <p class="font-medium">
+        <label>
+          <input
+            on:change={(e) => {
+              themeData.themeToggle = e.target.checked === true ? "YES" : "NO";
+            }}
+            type="checkbox"
+            checked={themeData.themeToggle === "YES"}
+          />
+          Let Users toggle theme between light and dark
+        </label>
+      </p>
+      <hr />
+      <p class="font-medium">Monitor Style</p>
 
-			<div class="flex gap-x-24">
-				<RadioGroup.Root
-					bind:value={themeData.barStyle}
-					onValueChange={(e) => (themeData.barStyle = e)}
-				>
-					<p class="text-sm font-medium text-muted-foreground">
-						Status bar
-						<Tooltip.Root openDelay={100}>
-							<Tooltip.Trigger class="">
-								<Info class="inline-block h-4 w-4 text-muted-foreground" />
-							</Tooltip.Trigger>
-							<Tooltip.Content class="max-w-md">
-								<div
-									class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-								>
-									Choose the style for the monitor. You can choose between partial
-									or full.
-								</div>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</p>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="PARTIAL" id="barStylePARTIAL" />
-						<Label for="barStylePARTIAL">PARTIAL</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="FULL" id="barStyleFULL" />
-						<Label for="barStyleFULL">FULL</Label>
-					</div>
-				</RadioGroup.Root>
-				<RadioGroup.Root
-					bind:value={themeData.barRoundness}
-					onValueChange={(e) => (themeData.barRoundness = e)}
-				>
-					<p class="text-sm font-medium text-muted-foreground">
-						Roundness
-						<Tooltip.Root openDelay={100}>
-							<Tooltip.Trigger class="">
-								<Info class="inline-block h-4 w-4 text-muted-foreground" />
-							</Tooltip.Trigger>
-							<Tooltip.Content class="max-w-md">
-								<div
-									class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-								>
-									Choose the roundness for the monitor. You can choose between
-									rounded or sharp.
-								</div>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</p>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="SHARP" id="barRoundnessSHARP" />
-						<Label for="barRoundnessSHARP">SHARP</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="ROUNDED" id="barRoundnessRound" />
-						<Label for="barRoundnessRound">ROUNDED</Label>
-					</div>
-				</RadioGroup.Root>
-				<RadioGroup.Root
-					bind:value={themeData.summaryStyle}
-					onValueChange={(e) => (themeData.summaryStyle = e)}
-				>
-					<p class="text-sm font-medium text-muted-foreground">
-						Summary Type
-						<Tooltip.Root openDelay={100}>
-							<Tooltip.Trigger class="">
-								<Info class="inline-block h-4 w-4 text-muted-foreground" />
-							</Tooltip.Trigger>
-							<Tooltip.Content class="max-w-md">
-								<div
-									class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-								>
-									Choose the summary type for the monitor. You can choose between
-									current or day.
-								</div>
-							</Tooltip.Content>
-						</Tooltip.Root>
-					</p>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="CURRENT" id="summaryStyle1" />
-						<Label for="summaryStyle1">CURRENT</Label>
-					</div>
-					<div class="flex items-center space-x-2">
-						<RadioGroup.Item value="DAY" id="summaryStyle2" />
-						<Label for="summaryStyle2">DAY</Label>
-					</div>
-				</RadioGroup.Root>
-			</div>
-			<hr />
-			<p class="font-medium">
-				Colors
-				<Tooltip.Root openDelay={100}>
-					<Tooltip.Trigger class="">
-						<Info class="inline-block h-4 w-4 text-muted-foreground" />
-					</Tooltip.Trigger>
-					<Tooltip.Content class="max-w-md">
-						<div
-							class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-						>
-							Choose the colors for the monitor. You can choose between UP, DEGRADED,
-							and DOWN.
-						</div>
-					</Tooltip.Content>
-				</Tooltip.Root>
-			</p>
-			<div class="flex w-full flex-row justify-evenly gap-2">
-				<div class="relative w-full">
-					<ColorPicker
-						bind:hex={themeData.colorsJ.UP}
-						position="responsive"
-						label="UP"
-						--cp-input-color="#777"
-						--cp-button-hover-color="#767676"
-						on:input={(event) => {
-							themeData.colorsJ.UP = event.detail.hex;
-						}}
-					/>
-				</div>
-				<div class="relative w-full">
-					<ColorPicker
-						bind:hex={themeData.colorsJ.DEGRADED}
-						position="responsive"
-						label="DEGRADED"
-						--cp-input-color="#777"
-						--cp-button-hover-color="#767676"
-						on:input={(event) => {
-							themeData.colorsJ.DEGRADED = event.detail.hex;
-						}}
-					/>
-				</div>
-				<div class="relative w-full">
-					<ColorPicker
-						bind:hex={themeData.colorsJ.DOWN}
-						position="responsive"
-						label="DOWN"
-						--cp-input-color="#777"
-						--cp-button-hover-color="#767676"
-						on:input={(event) => {
-							themeData.colorsJ.DOWN = event.detail.hex;
-						}}
-					/>
-				</div>
-			</div>
-			<hr />
-			<p class="font-medium">
-				Font
-				<Tooltip.Root openDelay={100}>
-					<Tooltip.Trigger class="">
-						<Info class="inline-block h-4 w-4 text-muted-foreground" />
-					</Tooltip.Trigger>
-					<Tooltip.Content class="max-w-md">
-						<div
-							class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
-						>
-							Choose the font for the monitor. You can choose the font URL and font
-							family name.
-						</div>
-					</Tooltip.Content>
-				</Tooltip.Root>
-			</p>
-			<div class="flex w-full flex-row justify-evenly gap-2">
-				<div class="w-full">
-					<Label for="cssSrc" class="text-sm text-muted-foreground">Font URL</Label>
-					<Input
-						bind:value={themeData.fontJ.cssSrc}
-						class="mt-2"
-						type="text"
-						id="cssSrc"
-						placeholder="https://fonts.bunny.net/css?family=lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap"
-					/>
-				</div>
-			</div>
-			<div class="flex w-full flex-row justify-start gap-2">
-				<div class="w-48">
-					<Label for="fontName" class="text-sm text-muted-foreground"
-						>Font Family Name</Label
-					>
-					<Input
-						bind:value={themeData.fontJ.family}
-						class="mt-2"
-						type="text"
-						id="fontName"
-						placeholder="Lato"
-					/>
-				</div>
-			</div>
-			<hr />
-			<p class="font-medium">Custom CSS</p>
-			<div class="flex w-full flex-row justify-start gap-2">
-				<div class="w-full">
-					<Label for="customCSS" class="text-sm text-muted-foreground">
-						You can add custom CSS to style your site. Do not include style tags.
-					</Label>
-					<textarea
-						bind:value={themeData.customCSS}
-						id="customCSS"
-						class="mt-1 h-48 w-full rounded-sm border p-2"
-						placeholder=".className&#123;color: red;&#125;"
-					></textarea>
-				</div>
-			</div>
-			<hr />
-			<div class="flex w-full justify-end">
-				<Button type="submit" disabled={formState === "loading"}>
-					Save
-					{#if formState === "loading"}
-						<Loader class="ml-2 inline h-4 w-4 animate-spin" />
-					{/if}
-				</Button>
-			</div>
-		</form>
-	</Card.Content>
+      <div class="flex gap-x-24">
+        <RadioGroup.Root bind:value={themeData.barStyle} onValueChange={(e) => (themeData.barStyle = e)}>
+          <p class="text-sm font-medium text-muted-foreground">
+            Status bar
+            <Tooltip.Root openDelay={100}>
+              <Tooltip.Trigger class="">
+                <Info class="inline-block h-4 w-4 text-muted-foreground" />
+              </Tooltip.Trigger>
+              <Tooltip.Content class="max-w-md">
+                <div
+                  class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+                >
+                  Choose the style for the monitor. You can choose between partial or full.
+                </div>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </p>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="PARTIAL" id="barStylePARTIAL" />
+            <Label for="barStylePARTIAL">PARTIAL</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="FULL" id="barStyleFULL" />
+            <Label for="barStyleFULL">FULL</Label>
+          </div>
+        </RadioGroup.Root>
+        <RadioGroup.Root bind:value={themeData.barRoundness} onValueChange={(e) => (themeData.barRoundness = e)}>
+          <p class="text-sm font-medium text-muted-foreground">
+            Roundness
+            <Tooltip.Root openDelay={100}>
+              <Tooltip.Trigger class="">
+                <Info class="inline-block h-4 w-4 text-muted-foreground" />
+              </Tooltip.Trigger>
+              <Tooltip.Content class="max-w-md">
+                <div
+                  class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+                >
+                  Choose the roundness for the monitor. You can choose between rounded or sharp.
+                </div>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </p>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="SHARP" id="barRoundnessSHARP" />
+            <Label for="barRoundnessSHARP">SHARP</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="ROUNDED" id="barRoundnessRound" />
+            <Label for="barRoundnessRound">ROUNDED</Label>
+          </div>
+        </RadioGroup.Root>
+        <RadioGroup.Root bind:value={themeData.summaryStyle} onValueChange={(e) => (themeData.summaryStyle = e)}>
+          <p class="text-sm font-medium text-muted-foreground">
+            Summary Type
+            <Tooltip.Root openDelay={100}>
+              <Tooltip.Trigger class="">
+                <Info class="inline-block h-4 w-4 text-muted-foreground" />
+              </Tooltip.Trigger>
+              <Tooltip.Content class="max-w-md">
+                <div
+                  class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+                >
+                  Choose the summary type for the monitor. You can choose between current or day.
+                </div>
+              </Tooltip.Content>
+            </Tooltip.Root>
+          </p>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="CURRENT" id="summaryStyle1" />
+            <Label for="summaryStyle1">CURRENT</Label>
+          </div>
+          <div class="flex items-center space-x-2">
+            <RadioGroup.Item value="DAY" id="summaryStyle2" />
+            <Label for="summaryStyle2">DAY</Label>
+          </div>
+        </RadioGroup.Root>
+      </div>
+      <hr />
+      <p class="font-medium">
+        Colors
+        <Tooltip.Root openDelay={100}>
+          <Tooltip.Trigger class="">
+            <Info class="inline-block h-4 w-4 text-muted-foreground" />
+          </Tooltip.Trigger>
+          <Tooltip.Content class="max-w-md">
+            <div
+              class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+            >
+              Choose the colors for the monitor. You can choose between UP, DEGRADED, and DOWN.
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </p>
+      <div class="flex w-full flex-row justify-evenly gap-2">
+        <div class="relative w-full">
+          <ColorPicker
+            bind:hex={themeData.colorsJ.UP}
+            position="responsive"
+            label="UP"
+            --cp-input-color="#777"
+            --cp-button-hover-color="#767676"
+            on:input={(event) => {
+              themeData.colorsJ.UP = event.detail.hex;
+            }}
+          />
+        </div>
+        <div class="relative w-full">
+          <ColorPicker
+            bind:hex={themeData.colorsJ.DEGRADED}
+            position="responsive"
+            label="DEGRADED"
+            --cp-input-color="#777"
+            --cp-button-hover-color="#767676"
+            on:input={(event) => {
+              themeData.colorsJ.DEGRADED = event.detail.hex;
+            }}
+          />
+        </div>
+        <div class="relative w-full">
+          <ColorPicker
+            bind:hex={themeData.colorsJ.DOWN}
+            position="responsive"
+            label="DOWN"
+            --cp-input-color="#777"
+            --cp-button-hover-color="#767676"
+            on:input={(event) => {
+              themeData.colorsJ.DOWN = event.detail.hex;
+            }}
+          />
+        </div>
+      </div>
+      <hr />
+      <p class="font-medium">
+        Font
+        <Tooltip.Root openDelay={100}>
+          <Tooltip.Trigger class="">
+            <Info class="inline-block h-4 w-4 text-muted-foreground" />
+          </Tooltip.Trigger>
+          <Tooltip.Content class="max-w-md">
+            <div
+              class=" flex items-center justify-center rounded border bg-gray-800 px-2 py-1.5 text-xs font-medium text-gray-300 shadow-popover outline-none"
+            >
+              Choose the font for the monitor. You can choose the font URL and font family name.
+            </div>
+          </Tooltip.Content>
+        </Tooltip.Root>
+      </p>
+      <div class="flex w-full flex-row justify-evenly gap-2">
+        <div class="w-full">
+          <Label for="cssSrc" class="text-sm text-muted-foreground">Font URL</Label>
+          <Input
+            bind:value={themeData.fontJ.cssSrc}
+            class="mt-2"
+            type="text"
+            id="cssSrc"
+            placeholder="https://fonts.bunny.net/css?family=lato:100,100i,300,300i,400,400i,700,700i,900,900i&display=swap"
+          />
+        </div>
+      </div>
+      <div class="flex w-full flex-row justify-start gap-2">
+        <div class="w-48">
+          <Label for="fontName" class="text-sm text-muted-foreground">Font Family Name</Label>
+          <Input bind:value={themeData.fontJ.family} class="mt-2" type="text" id="fontName" placeholder="Lato" />
+        </div>
+      </div>
+      <p class="text-xs text-muted-foreground">
+        Want to upload and use custom font? Read more about it <a
+          href="https://kener.ing/docs/custom-fonts/"
+          class="text-card-foreground"
+          target="_blank">here</a
+        >.
+      </p>
+      <hr />
+      <p class="font-medium">Custom CSS</p>
+      <div class="flex w-full flex-row justify-start gap-2">
+        <div class="w-full">
+          <Label for="customCSS" class="text-sm text-muted-foreground">
+            You can add custom CSS to style your site. Do not include style tags.
+          </Label>
+          <textarea
+            bind:value={themeData.customCSS}
+            id="customCSS"
+            class="mt-1 h-48 w-full rounded-sm border p-2"
+            placeholder=".className&#123;color: red;&#125;"
+          ></textarea>
+        </div>
+      </div>
+      <hr />
+      <div class="flex w-full justify-end">
+        <Button type="submit" disabled={formState === "loading"}>
+          Save
+          {#if formState === "loading"}
+            <Loader class="ml-2 inline h-4 w-4 animate-spin" />
+          {/if}
+        </Button>
+      </div>
+    </form>
+  </Card.Content>
 </Card.Root>

src/lib/components/manage/triggerInfo.svelte

@@ -149,6 +149,14 @@
           }
         }
       }
+
+      if (newTrigger.trigger_meta.has_webhook_body) {
+        if (newTrigger.trigger_meta.webhook_body == "") {
+          invalidFormMessage = "Webhook Body is required";
+          formState = "idle";
+          return;
+        }
+      }
     }
     //newTrigger.name present not empty
     if (newTrigger.name == "") {
@@ -312,7 +320,11 @@
         detail: showAddTrigger
       });
       window.dispatchEvent(noScrollEvent);
+      if (!showAddTrigger) {
+        window.location.hash = "";
+      }
     }
+    //if modal closed then clear url hashed
   }
 </script>
 
@@ -325,12 +337,8 @@
       <Select.Content>
         <Select.Group>
           <Select.Label>Status</Select.Label>
-          <Select.Item value="ACTIVE" label="ACTIVE" class="text-sm font-medium">
-            ACTIVE
-          </Select.Item>
-          <Select.Item value="INACTIVE" label="INACTIVE" class="text-sm font-medium">
-            INACTIVE
-          </Select.Item>
+          <Select.Item value="ACTIVE" label="ACTIVE" class="text-sm font-medium">ACTIVE</Select.Item>
+          <Select.Item value="INACTIVE" label="INACTIVE" class="text-sm font-medium">INACTIVE</Select.Item>
         </Select.Group>
       </Select.Content>
     </Select.Root>
@@ -350,29 +358,13 @@
       <Card.Header class="relative">
         <Card.Title>
           {#if trigger.trigger_type == "webhook"}
-            <img
-              src={base + "/webhooks.svg"}
-              alt={trigger.trigger_type}
-              class="mr-2 inline-block h-6 w-6"
-            />
+            <img src={base + "/webhooks.svg"} alt={trigger.trigger_type} class="mr-2 inline-block h-6 w-6" />
           {:else if trigger.trigger_type == "slack"}
-            <img
-              src={base + "/slack.svg"}
-              alt={trigger.trigger_type}
-              class="mr-2 inline-block h-6 w-6"
-            />
+            <img src={base + "/slack.svg"} alt={trigger.trigger_type} class="mr-2 inline-block h-6 w-6" />
           {:else if trigger.trigger_type == "discord"}
-            <img
-              src={base + "/discord.svg"}
-              alt={trigger.trigger_type}
-              class="mr-2 inline-block h-6 w-6"
-            />
+            <img src={base + "/discord.svg"} alt={trigger.trigger_type} class="mr-2 inline-block h-6 w-6" />
           {:else if trigger.trigger_type == "email"}
-            <img
-              src={base + "/email.png"}
-              alt={trigger.trigger_type}
-              class="mr-2 inline-block h-6 w-6"
-            />
+            <img src={base + "/email.png"} alt={trigger.trigger_type} class="mr-2 inline-block h-6 w-6" />
           {/if}
           {trigger.name}
         </Card.Title>
@@ -435,20 +427,18 @@
               class="peer sr-only"
               checked={newTrigger.trigger_status == "ACTIVE"}
               on:change={() => {
-                newTrigger.trigger_status =
-                  newTrigger.trigger_status == "ACTIVE" ? "INACTIVE" : "ACTIVE";
+                newTrigger.trigger_status = newTrigger.trigger_status == "ACTIVE" ? "INACTIVE" : "ACTIVE";
               }}
             />
             <div
-              class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 rtl:peer-checked:after:-translate-x-full dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800"
+              class="peer relative h-6 w-11 rounded-full bg-gray-200 after:absolute after:start-[2px] after:top-[2px] after:h-5 after:w-5 after:rounded-full after:border after:border-gray-300 after:bg-white after:transition-all after:content-[''] peer-checked:bg-blue-600 peer-checked:after:translate-x-full peer-checked:after:border-white peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:border-gray-600 dark:bg-gray-700 dark:peer-focus:ring-blue-800 rtl:peer-checked:after:-translate-x-full"
             ></div>
           </label>
         </div>
       </div>
       <div class="mt-12 w-full overflow-y-auto p-3" style="height: calc(100vh - 7rem);">
         <p class="mb-4">
-          Select the type of Trigger you want to add. You can add multiple Triggers of different
-          types.
+          Select the type of Trigger you want to add. You can add multiple Triggers of different types.
         </p>
         <div class="flex justify-stretch gap-4">
           <Button
@@ -513,11 +503,7 @@
               </span>
               Trigger
             </Label>
-            <Input
-              class="mt-2"
-              bind:value={newTrigger.trigger_desc}
-              placeholder="Example: This is a trigger."
-            />
+            <Input class="mt-2" bind:value={newTrigger.trigger_desc} placeholder="Example: This is a trigger." />
           </div>
           {#if newTrigger.trigger_type != "email"}
             <div class="mt-4 w-full">
@@ -526,11 +512,7 @@
                 Trigger
                 <span class="text-red-500">*</span>
               </Label>
-              <Input
-                class="mt-2"
-                bind:value={newTrigger.trigger_meta.url}
-                placeholder="https://example.com/url"
-              />
+              <Input class="mt-2" bind:value={newTrigger.trigger_meta.url} placeholder="https://example.com/url" />
             </div>
           {/if}
           {#if newTrigger.trigger_type == "webhook"}
@@ -549,9 +531,7 @@
                       class=" h-6 w-6 p-1"
                       variant="secondary"
                       on:click={() => {
-                        newTrigger.trigger_meta.headers = newTrigger.trigger_meta.headers.filter(
-                          (_, i) => i !== index
-                        );
+                        newTrigger.trigger_meta.headers = newTrigger.trigger_meta.headers.filter((_, i) => i !== index);
                       }}
                     >
                       <X class="h-5 w-5" />
@@ -583,8 +563,8 @@
                 </label>
                 {#if !!newTrigger.trigger_meta.has_webhook_body}
                   <p class="my-2 text-xs text-muted-foreground">
-                    You can use a custom webhook body. The body should be a valid for the
-                    Content-Type header you have set. The default is JSON. There are <a
+                    You can use a custom webhook body. The body should be a valid for the Content-Type header you have
+                    set. The default is JSON. There are <a
                       target="_blank"
                       class="text-blue-500"
                       href="https://kener.ing/docs/triggers#webhook-body">variables</a
@@ -618,15 +598,12 @@
                 <div class="rounded-md border bg-card p-2 text-xs">
                   <p class="text-sm font-semibold">Email Trigger</p>
                   <p class="text-xs">
-                    Kener uses <a href="https://resend.com/" class="text-blue-500" target="_blank"
-                      >resend</a
-                    >
-                    to send emails. Please make sure you have created an account with resend. Also add
-                    the resend api key as environment variable
+                    Kener uses <a href="https://resend.com/" class="text-blue-500" target="_blank">resend</a>
+                    to send emails. Please make sure you have created an account with resend. Also add the resend api key
+                    as environment variable
                     <span class="font-mono">RESEND_API_KEY</span>.
                     <span class="text-red-500"
-                      >The RESEND_API_KEY is not set in your environment variable. Please set it and
-                      restart the server</span
+                      >The RESEND_API_KEY is not set in your environment variable. Please set it and restart the server</span
                     >.
                   </p>
                 </div>
@@ -637,44 +614,28 @@
                       Host
                       <span class="text-red-500">*</span>
                     </Label>
-                    <Input
-                      class="mt-2"
-                      bind:value={newTrigger.trigger_meta.smtp_host}
-                      placeholder="smtp.example.com"
-                    />
+                    <Input class="mt-2" bind:value={newTrigger.trigger_meta.smtp_host} placeholder="smtp.example.com" />
                   </div>
                   <div>
                     <Label class="text-sm">
                       Port
                       <span class="text-red-500">*</span>
                     </Label>
-                    <Input
-                      class="mt-2"
-                      bind:value={newTrigger.trigger_meta.smtp_port}
-                      placeholder="587"
-                    />
+                    <Input class="mt-2" bind:value={newTrigger.trigger_meta.smtp_port} placeholder="587" />
                   </div>
                   <div>
                     <Label class="text-sm">
                       User
                       <span class="text-red-500">*</span>
                     </Label>
-                    <Input
-                      class="mt-2"
-                      bind:value={newTrigger.trigger_meta.smtp_user}
-                      placeholder="raj@example.com"
-                    />
+                    <Input class="mt-2" bind:value={newTrigger.trigger_meta.smtp_user} placeholder="raj@example.com" />
                   </div>
                   <div>
                     <Label class="text-sm">
                       Password
                       <span class="text-red-500">*</span>
                     </Label>
-                    <Input
-                      class="mt-2"
-                      bind:value={newTrigger.trigger_meta.smtp_pass}
-                      placeholder="*******"
-                    />
+                    <Input class="mt-2" bind:value={newTrigger.trigger_meta.smtp_pass} placeholder="*******" />
                   </div>
                 </div>
                 <div class="my-2">
@@ -707,27 +668,17 @@
                 Add Name and Sender Email Address
                 <span class="text-red-500">*</span>
               </Label>
-              <Input
-                class="mt-2"
-                bind:value={newTrigger.trigger_meta.from}
-                placeholder="Alerts <alert@example.com>"
-              />
+              <Input class="mt-2" bind:value={newTrigger.trigger_meta.from} placeholder="Alerts <alert@example.com>" />
             </div>
           {/if}
         </div>
       </div>
-      <div
-        class="absolute bottom-0 grid h-16 w-full grid-cols-6 justify-end gap-2 border-t p-3 pr-6"
-      >
+      <div class="absolute bottom-0 grid h-16 w-full grid-cols-6 justify-end gap-2 border-t p-3 pr-6">
         <div class="col-span-5 py-2.5">
           <p class="text-right text-xs font-medium text-red-500">{invalidFormMessage}</p>
         </div>
         <div class="col-span-1">
-          <Button
-            class="col-span-1 w-full"
-            disabled={formState === "loading"}
-            on:click={addNewTrigger}
-          >
+          <Button class="col-span-1 w-full" disabled={formState === "loading"} on:click={addNewTrigger}>
             Save
             {#if formState === "loading"}
               <Loader class="ml-2 inline h-4 w-4 animate-spin" />

src/lib/components/monitor.svelte

@@ -1,408 +1,401 @@
 <script>
-	import * as Popover from "$lib/components/ui/popover";
-	import { onMount } from "svelte";
-	import { Badge } from "$lib/components/ui/badge";
-	import { Button } from "$lib/components/ui/button";
-	import { base } from "$app/paths";
-	import { sub, startOfDay, getUnixTime } from "date-fns";
+  import * as Popover from "$lib/components/ui/popover";
+  import { onMount } from "svelte";
+  import { Badge } from "$lib/components/ui/badge";
+  import { Button } from "$lib/components/ui/button";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+  import { base } from "$app/paths";
+  import { sub, startOfDay, getUnixTime } from "date-fns";
+  import GMI from "$lib/components/gmi.svelte";
+  import { page } from "$app/stores";
 
-	import {
-		Share2,
-		Link,
-		CopyCheck,
-		Code,
-		TrendingUp,
-		Percent,
-		Loader,
-		ChevronLeft,
-		ChevronRight
-	} from "lucide-svelte";
-	import { buttonVariants } from "$lib/components/ui/button";
-	import { createEventDispatcher } from "svelte";
-	import { afterUpdate } from "svelte";
-	import axios from "axios";
-	import { l, summaryTime, f } from "$lib/i18n/client";
-	import { hoverAction, clickOutsideAction, slide } from "svelte-legos";
-	import LoaderBoxes from "$lib/components/loaderbox.svelte";
-	import NumberFlow from "@number-flow/svelte";
-	import Incident from "$lib/components/IncidentNew.svelte";
+  import { Share2, ArrowRight, Settings, TrendingUp, Loader, ChevronLeft, ChevronRight } from "lucide-svelte";
+  import { buttonVariants } from "$lib/components/ui/button";
+  import { createEventDispatcher } from "svelte";
+  import { afterUpdate } from "svelte";
+  import axios from "axios";
+  import { l, summaryTime, f } from "$lib/i18n/client";
+  import { hoverAction, clickOutsideAction, slide } from "svelte-legos";
+  import LoaderBoxes from "$lib/components/loaderbox.svelte";
+  import NumberFlow from "@number-flow/svelte";
+  import Incident from "$lib/components/IncidentNew.svelte";
 
-	const dispatch = createEventDispatcher();
+  const dispatch = createEventDispatcher();
 
-	export let monitor;
+  export let monitor;
+  export let localTz;
+  export let lang;
+  export let embed = false;
+  export let selectedLang = "en";
 
-	export let localTz;
-	export let lang;
-	export let embed = false;
-	export let selectedLang = "en";
+  let _0Day = {};
+  let _90Day = monitor.pageData._90Day;
+  let uptime90Day = monitor.pageData.uptime90Day;
+  let incidents = {};
+  let dayIncidentsFull = [];
 
-	let _0Day = {};
-	let _90Day = monitor.pageData._90Day;
-	let uptime90Day = monitor.pageData.uptime90Day;
-	let incidents = {};
-	let dayIncidentsFull = [];
+  function loadIncidents() {
+    axios
+      .post(`${base}/api/today/incidents`, {
+        tag: monitor.tag,
+        startTs: monitor.pageData.midnight90DaysAgo,
+        endTs: monitor.pageData.maxDateTodayTimestamp,
+        localTz: localTz
+      })
+      .then((response) => {
+        if (response.data) {
+          incidents = response.data;
+        }
+      })
+      .catch((error) => {
+        console.log(error);
+      });
+  }
 
-	function loadIncidents() {
-		axios
-			.post(`${base}/api/today/incidents`, {
-				tag: monitor.tag,
-				startTs: monitor.pageData.midnight90DaysAgo,
-				endTs: monitor.pageData.midnightTomorrow,
-				localTz: localTz
-			})
-			.then((response) => {
-				if (response.data) {
-					incidents = response.data;
-				}
-			})
-			.catch((error) => {
-				console.log(error);
-			});
-	}
+  function getToday(startTs, incidentIDs) {
+    let endTs = Math.min(startTs + 86400, monitor.pageData.maxDateTodayTimestamp);
 
-	function getToday(startTs, incidentIDs) {
-		axios
-			.post(`${base}/api/today`, {
-				monitor: monitor,
-				localTz: localTz,
-				startTs: startTs,
-				incidentIDs: incidentIDs
-			})
-			.then((response) => {
-				if (response.data) {
-					_0Day = response.data._0Day;
-					dayUptime = response.data.uptime;
-					dayIncidentsFull = response.data.incidents;
-				}
-				loadingDayData = false;
-			})
-			.catch((error) => {
-				console.log(error);
-				loadingDayData = false;
-			});
-	}
+    axios
+      .post(`${base}/api/today`, {
+        monitor: monitor,
+        localTz: localTz,
+        endTs: endTs,
+        startTs: startTs,
+        incidentIDs: incidentIDs
+      })
+      .then((response) => {
+        if (response.data) {
+          _0Day = response.data._0Day;
+          dayUptime = response.data.uptime;
+          dayIncidentsFull = response.data.incidents;
+        }
+        loadingDayData = false;
+      })
+      .catch((error) => {
+        console.log(error);
+        loadingDayData = false;
+      });
+  }
 
-	function scrollToRight() {
-		setTimeout(() => {
-			let divs = document.querySelectorAll(".daygrid90");
-			divs.forEach((div) => {
-				div.scrollLeft = div.scrollWidth;
-			});
-		}, 1000 * 0.2);
-	}
-	let uptimesRollers = [
-		{
-			text: `${l(lang, "90 Days")}`,
-			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 90 }))),
-			value: uptime90Day
-		},
-		{
-			text: `${l(lang, "60 Days")}`,
-			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 59 })))
-		},
-		{
-			text: `${l(lang, "30 Days")}`,
-			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 29 })))
-		},
-		{
-			text: `${l(lang, "14 Days")}`,
-			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 13 })))
-		},
-		{
-			text: `${l(lang, "7 Days")}`,
-			startTs: getUnixTime(startOfDay(sub(new Date(), { days: 6 })))
-		},
-		{
-			text: l(lang, "Today"),
-			startTs: getUnixTime(startOfDay(new Date()))
-		}
-	];
+  function scrollToRight() {
+    setTimeout(() => {
+      let divs = document.querySelectorAll(".daygrid90");
+      divs.forEach((div) => {
+        div.scrollLeft = div.scrollWidth;
+      });
+    }, 1000 * 0.2);
+  }
+  let uptimesRollers = [
+    {
+      text: `${l(lang, "90 Days")}`,
+      startTs: getUnixTime(startOfDay(sub(new Date(), { days: 90 }))),
+      endTs: monitor.pageData.maxDateTodayTimestamp,
+      value: uptime90Day
+    },
+    {
+      text: `${l(lang, "60 Days")}`,
+      startTs: getUnixTime(startOfDay(sub(new Date(), { days: 59 }))),
+      endTs: monitor.pageData.maxDateTodayTimestamp
+    },
+    {
+      text: `${l(lang, "30 Days")}`,
+      startTs: getUnixTime(startOfDay(sub(new Date(), { days: 29 }))),
+      endTs: monitor.pageData.maxDateTodayTimestamp
+    },
+    {
+      text: `${l(lang, "14 Days")}`,
+      startTs: getUnixTime(startOfDay(sub(new Date(), { days: 13 }))),
+      endTs: monitor.pageData.maxDateTodayTimestamp
+    },
+    {
+      text: `${l(lang, "7 Days")}`,
+      startTs: getUnixTime(startOfDay(sub(new Date(), { days: 6 }))),
+      endTs: monitor.pageData.maxDateTodayTimestamp
+    },
+    {
+      text: l(lang, "Today"),
+      startTs: getUnixTime(startOfDay(new Date())),
+      endTs: monitor.pageData.maxDateTodayTimestamp
+    }
+  ];
 
-	//start of the week moment
-	let rolledAt = 0;
-	let rollerLoading = false;
-	async function rollSummary(r) {
-		let newRolledAt = (rolledAt + r) % uptimesRollers.length;
+  //start of the week moment
+  let rolledAt = 0;
+  let rollerLoading = false;
+  async function rollSummary(r) {
+    let newRolledAt = r;
 
-		if (uptimesRollers[newRolledAt].value === undefined) {
-			rollerLoading = true;
-			uptimesRollers[newRolledAt].loading = true;
+    if (uptimesRollers[newRolledAt].value === undefined) {
+      rollerLoading = true;
+      uptimesRollers[newRolledAt].loading = true;
 
-			let resp = await axios.post(`${base}/api/today/aggregated`, {
-				monitor: monitor,
-				startTs: uptimesRollers[newRolledAt].startTs
-			});
-			uptimesRollers[newRolledAt].value = resp.data.uptime;
-			rollerLoading = false;
-		}
-		rolledAt = newRolledAt;
-		for (const key in _90Day) {
-			if (Object.prototype.hasOwnProperty.call(_90Day, key)) {
-				const element = _90Day[key];
-				if (key >= uptimesRollers[rolledAt].startTs) {
-					_90Day[key].border = true;
-				} else {
-					_90Day[key].border = false;
-				}
-			}
-		}
-	}
+      let resp = await axios.post(`${base}/api/today/aggregated`, {
+        monitor: monitor,
+        startTs: uptimesRollers[newRolledAt].startTs,
+        endTs: uptimesRollers[newRolledAt].endTs
+      });
+      uptimesRollers[newRolledAt].value = resp.data.uptime;
+      rollerLoading = false;
+    }
+    rolledAt = newRolledAt;
+    for (const key in _90Day) {
+      if (Object.prototype.hasOwnProperty.call(_90Day, key)) {
+        const element = _90Day[key];
+        if (key >= uptimesRollers[rolledAt].startTs) {
+          _90Day[key].border = true;
+        } else {
+          _90Day[key].border = false;
+        }
+      }
+    }
+  }
 
-	onMount(async () => {
-		scrollToRight();
-		loadIncidents();
-	});
-	afterUpdate(() => {
-		dispatch("heightChange", {});
-	});
-	function show90Inline(e, bar) {
-		if (e.detail.hover) {
-			_90Day[bar.timestamp].showDetails = true;
-		} else {
-			_90Day[bar.timestamp].showDetails = false;
-		}
-	}
-	let showDailyDataModal = false;
-	let dateFetchedFor = "";
-	let dayUptime = "NA";
-	let loadingDayData = false;
-	function dailyDataGetter(e, bar, incidentObj) {
-		if (embed) {
-			return;
-		}
-		let incidentIDs = incidentObj?.ids || [];
-		dayUptime = "NA";
-		dateFetchedFor = f(new Date(bar.timestamp * 1000), "EEEE, MMMM do, yyyy", selectedLang);
-		showDailyDataModal = true;
-		loadingDayData = true;
-		dayIncidentsFull = [];
-		setTimeout(() => {
-			getToday(bar.timestamp, incidentIDs);
-		}, 750);
-	}
+  onMount(async () => {
+    scrollToRight();
+    loadIncidents();
+  });
+  afterUpdate(() => {
+    dispatch("heightChange", {});
+  });
+  function show90Inline(e, bar) {
+    if (e.detail.hover) {
+      _90Day[bar.timestamp].showDetails = true;
+    } else {
+      _90Day[bar.timestamp].showDetails = false;
+    }
+  }
+  let showDailyDataModal = false;
+  let dateFetchedFor = "";
+  let dayUptime = "NA";
+  let loadingDayData = false;
+
+  function dailyDataGetter(e, bar, incidentObj) {
+    if (embed) {
+      return;
+    }
+    let incidentIDs = incidentObj?.ids || [];
+    dayUptime = "NA";
+    dateFetchedFor = f(new Date(bar.timestamp * 1000), "EEEE, MMMM do, yyyy", selectedLang, $page.data.localTz);
+    showDailyDataModal = true;
+    loadingDayData = true;
+    dayIncidentsFull = [];
+    setTimeout(() => {
+      getToday(bar.timestamp, incidentIDs);
+    }, 50);
+  }
 </script>
 
 <div class="monitor relative grid w-full grid-cols-12 gap-2 pb-2 pt-0 md:w-[655px]">
-	{#if !!!embed}
-		<div class="col-span-12 md:w-[546px]">
-			<div class="pt-0">
-				<div class="scroll-m-20 pr-5 text-xl font-medium tracking-tight">
-					{#if monitor.image}
-						<img
-							src={base + monitor.image}
-							class="absolute left-6 top-6 inline h-5 w-5"
-							alt={monitor.name}
-							srcset=""
-						/>
-					{/if}
-					<p class="overflow-hidden text-ellipsis whitespace-nowrap">
-						{monitor.name}
-					</p>
+  {#if !!!embed}
+    <div class="col-span-12 md:w-[546px]">
+      <div class="pt-0">
+        <div class="scroll-m-20 pr-5 text-xl font-medium tracking-tight">
+          {#if monitor.image}
+            <GMI
+              src={monitor.image}
+              classList="absolute left-6 top-6 inline h-5 w-5 hidden md:block"
+              alt={monitor.name}
+              srcset=""
+            />
+          {/if}
+          <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+            {monitor.name}
+          </p>
 
-					<p class="mt-1 text-xs font-medium text-muted-foreground">
-						{#if !!monitor.description}
-							{@html monitor.description}
-						{/if}
-					</p>
-					<div class="absolute right-14 top-5">
-						<Button
-							class="wiggle h-5 p-0 text-muted-foreground hover:text-primary"
-							variant="link"
-							on:click={(e) => {
-								dispatch("show_shareMenu", {
-									monitor: monitor
-								});
-							}}
-						>
-							<Share2 class="h-4 w-4 " />
-						</Button>
-					</div>
-				</div>
-			</div>
-		</div>
-	{/if}
-	<div class="col-span-12 min-h-[94px] pt-2 md:w-[546px]">
-		<div class="col-span-12">
-			<div class="flex justify-between">
-				<div class=" ">
-					<div class="flex gap-x-1">
-						{#if rolledAt > 0}
-							<Button
-								variant="ghost"
-								class="h-5 w-5 p-0"
-								on:click={() => rollSummary(-1)}
-							>
-								<ChevronLeft class="h-4 w-4" />
-							</Button>
-						{/if}
-						<div class="flex text-xs font-semibold">
-							<span>
-								{uptimesRollers[rolledAt].text}
-							</span>
-
-							<span class="">
-								{#if rollerLoading}
-									<Loader class="mx-1 -mt-0.5 inline h-4 w-4 animate-spin" />
-								{:else}
-									<TrendingUp class="mx-1 -mt-0.5 inline h-3 w-3" />
-								{/if}
-								{#if isNaN(uptimesRollers[rolledAt].value)}
-									<span class="text-muted-foreground">-</span>
-								{:else}
-									<NumberFlow
-										value={uptimesRollers[rolledAt].value}
-										format={{
-											notation: "standard",
-											minimumFractionDigits: 4,
-											maximumFractionDigits: 4
-										}}
-										suffix="%"
-									/>
-								{/if}
-							</span>
-						</div>
-						{#if rolledAt < uptimesRollers.length - 1}
-							<Button
-								variant="ghost"
-								class="h-5 w-5 p-0"
-								on:click={() => rollSummary(1)}
-							>
-								<ChevronRight class="h-4 w-4" />
-							</Button>
-						{/if}
-					</div>
-				</div>
-				<div class="pt-0.5 text-right">
-					<div
-						class="text-api-up truncate text-xs font-semibold text-{monitor.pageData
-							.summaryColorClass}"
-					>
-						{monitor.pageData.summaryStatus}
-					</div>
-				</div>
-			</div>
-			<div
-				class="relative col-span-12 mt-1"
-				use:clickOutsideAction
-				on:clickoutside={(e) => {
-					showDailyDataModal = false;
-				}}
-			>
-				<div
-					class="daygrid90 flex min-h-[60px] justify-start overflow-x-auto overflow-y-hidden py-1"
-				>
-					{#each Object.entries(_90Day) as [ts, bar]}
-						<a
-							data-ts={ts}
-							use:hoverAction
-							on:hover={(e) => {
-								show90Inline(e, bar);
-							}}
-							on:click={(e) => {
-								dailyDataGetter(e, bar, incidents[ts]);
-							}}
-							href="#"
-							class="oneline h-[34px] w-[6px]
+          <p class="mt-1 text-xs font-medium text-muted-foreground">
+            {#if !!monitor.description}
+              {@html monitor.description}
+            {/if}
+          </p>
+          <div class="absolute right-14 top-5 flex gap-x-2">
+            {#if $page.data.isLoggedIn}
+              <Button
+                href="{base}/manage/app/monitors#{monitor.tag}"
+                class=" rotate-once h-5 p-0 text-muted-foreground hover:text-primary"
+                variant="link"
+                rel="external"
+              >
+                <Settings class="h-4 w-4 " />
+              </Button>
+            {/if}
+            <Button
+              class="wiggle h-5 p-0 text-muted-foreground hover:text-primary"
+              variant="link"
+              on:click={(e) => {
+                dispatch("show_shareMenu", {
+                  monitor: monitor
+                });
+              }}
+            >
+              <Share2 class="h-4 w-4 " />
+            </Button>
+            {#if monitor.monitor_type === "GROUP"}
+              <Button
+                class="bounce-right h-5 p-0 text-muted-foreground hover:text-primary"
+                variant="link"
+                href="{base}?group={monitor.tag}"
+                rel="external"
+              >
+                <ArrowRight class="arrow h-4 w-4" />
+              </Button>
+            {/if}
+          </div>
+        </div>
+      </div>
+    </div>
+  {/if}
+  <div class="col-span-12 min-h-[94px] pt-2 md:w-[546px]">
+    <div class="col-span-12">
+      <div class="flex flex-wrap justify-between gap-x-1">
+        <div class="">
+          <DropdownMenu.Root class="">
+            <DropdownMenu.Trigger class="mr-2 flex ">
+              <Button variant="secondary" class="h-6 px-2 py-2 text-xs">
+                {uptimesRollers[rolledAt].text}
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content class={!!embed ? "h-[60px] overflow-y-auto" : ""}>
+              {#each uptimesRollers as roller, i}
+                <DropdownMenu.Group>
+                  <DropdownMenu.Item
+                    class="text-xs {rolledAt == i ? 'bg-secondary' : ''} font-semibold"
+                    on:click={() => rollSummary(i)}
+                  >
+                    {roller.text}
+                  </DropdownMenu.Item>
+                </DropdownMenu.Group>
+              {/each}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </div>
+        <div class="flex gap-x-2 pt-2 text-right">
+          {#if rollerLoading}
+            <Loader class=" mt-0.5 inline h-3.5 w-3.5 animate-spin text-muted-foreground" />
+          {/if}
+          {#if !isNaN(uptimesRollers[rolledAt].value)}
+            <NumberFlow
+              class="border-r pr-2 text-xs font-semibold"
+              value={uptimesRollers[rolledAt].value}
+              format={{
+                notation: "standard",
+                minimumFractionDigits: 4,
+                maximumFractionDigits: 4
+              }}
+              suffix="%"
+            />
+          {/if}
+          <div class="truncate text-xs font-semibold text-{monitor.pageData.summaryColorClass}">
+            {monitor.pageData.summaryStatus}
+          </div>
+        </div>
+      </div>
+      <div
+        class="relative col-span-12 mt-0.5"
+        use:clickOutsideAction
+        on:clickoutside={(e) => {
+          showDailyDataModal = false;
+        }}
+      >
+        <div class="daygrid90 flex min-h-[60px] justify-start overflow-x-auto overflow-y-hidden py-1">
+          {#each Object.entries(_90Day) as [ts, bar]}
+            <a
+              data-ts={ts}
+              use:hoverAction
+              on:hover={(e) => {
+                show90Inline(e, bar);
+              }}
+              on:click={(e) => {
+                dailyDataGetter(e, bar, incidents[ts]);
+              }}
+              href="#"
+              class="oneline h-[34px] w-[6px]
 							{bar.border ? 'opacity-100' : 'opacity-20'} pb-1"
-						>
-							<div
-								class="oneline-in h-[30px] bg-{bar.cssClass} mx-auto w-[4px] rounded-{monitor.pageData.barRoundness.toUpperCase() ==
-								'SHARP'
-									? 'none'
-									: 'sm'}"
-							></div>
-							{#if !!incidents[ts]}
-								<div
-									style="transition-delay: {Math.floor(
-										Math.random() * (1500 - 500 + 1)
-									) + 500}ms;"
-									class="bg-api-{incidents[
-										ts
-									].monitor_impact.toLowerCase()} comein absolute -bottom-[3px] left-[1px] h-[4px] w-[4px] rounded-full"
-								></div>
-							{/if}
-						</a>
-						{#if bar.showDetails}
-							<div class="show-hover absolute text-sm">
-								<div class="text-{bar.textClass} text-xs font-semibold">
-									{f(
-										new Date(bar.timestamp * 1000),
-										"EEEE, MMMM do, yyyy",
-										selectedLang
-									)}
-									-
-									{bar.summaryStatus}
-								</div>
-							</div>
-						{/if}
-					{/each}
-				</div>
-				{#if showDailyDataModal}
-					<div
-						transition:slide={{ direction: "bottom" }}
-						class="absolute -left-2 top-10 z-10 mx-auto rounded-sm border bg-card px-[7px] py-[7px] shadow-lg md:w-[560px]"
-					>
-						<div class="mb-2 flex justify-between text-xs font-semibold">
-							<span>{dateFetchedFor}</span>
-							{#if !loadingDayData}
-								<span>
-									<TrendingUp class="mx-1 inline" size={12} />
-									{dayUptime}%</span
-								>
-							{/if}
-						</div>
-						{#if dayIncidentsFull.length > 0}
-							<div class="-mx-2 mb-4 grid grid-cols-1">
-								<div class="col-span-1 px-2">
-									<Badge variant="outline" class="border-0 pl-0">
-										{l(lang, "Incident Updates")}
-									</Badge>
-								</div>
-								{#each dayIncidentsFull as incident, index}
-									<div class="col-span-1">
-										<Incident {incident} {lang} index="incident-{index}" />
-									</div>
-								{/each}
-							</div>
-						{/if}
-						<div class="flex flex-wrap">
-							{#if loadingDayData}
-								<LoaderBoxes />
-							{:else}
-								{#each Object.entries(_0Day) as [ts, bar]}
-									<div
-										data-index={bar.index}
-										class="bg-{bar.cssClass} today-sq m-[1px] h-[10px] w-[10px]"
-									></div>
-									<div class="hiddenx relative">
-										<div
-											data-index={ts.index}
-											class="message rounded border bg-black p-2 text-xs font-semibold text-white"
-										>
-											<p>
-												<span class="text-{bar.cssClass}"> ● </span>
+            >
+              <div
+                class="oneline-in h-[30px] bg-{bar.cssClass} mx-auto w-[4px] rounded-{monitor.pageData.barRoundness.toUpperCase() ==
+                'SHARP'
+                  ? 'none'
+                  : 'sm'}"
+              ></div>
+              {#if !!incidents[ts]}
+                <div
+                  style="transition-delay: {Math.floor(Math.random() * (1500 - 500 + 1)) + 500}ms;"
+                  class="bg-api-{incidents[
+                    ts
+                  ].monitor_impact.toLowerCase()} comein absolute -bottom-[3px] left-[1px] h-[4px] w-[4px] rounded-full"
+                ></div>
+              {/if}
+            </a>
+            {#if bar.showDetails}
+              <div class="show-hover absolute text-sm">
+                <div class="text-{bar.textClass} text-xs font-semibold">
+                  {f(new Date(bar.timestamp * 1000), "EEEE, MMMM do, yyyy", selectedLang, $page.data.localTz)}
+                  -
+                  {bar.summaryStatus}
+                </div>
+              </div>
+            {/if}
+          {/each}
+        </div>
+        {#if showDailyDataModal}
+          <div
+            transition:slide={{ direction: "bottom" }}
+            class="absolute -left-2 top-10 z-10 mx-auto rounded-sm border bg-card px-[7px] py-[7px] shadow-lg md:w-[560px]"
+          >
+            <div class="mb-2 flex justify-between text-xs font-semibold">
+              <span>{dateFetchedFor}</span>
+              {#if !loadingDayData}
+                <span>
+                  <TrendingUp class="mx-1 inline" size={12} />
+                  {dayUptime}%</span
+                >
+              {/if}
+            </div>
+            {#if dayIncidentsFull.length > 0}
+              <div class="-mx-2 mb-4 grid grid-cols-1">
+                <div class="col-span-1 px-2">
+                  <Badge variant="outline" class="border-0 pl-0">
+                    {l(lang, "Incident Updates")}
+                  </Badge>
+                </div>
+                {#each dayIncidentsFull as incident, index}
+                  <div class="col-span-1">
+                    <Incident {incident} {lang} index="incident-{index}" />
+                  </div>
+                {/each}
+              </div>
+            {/if}
+            <div class="flex flex-wrap">
+              {#if loadingDayData}
+                <LoaderBoxes />
+              {:else}
+                {#each Object.entries(_0Day) as [ts, bar]}
+                  <div data-index={bar.index} class="bg-{bar.cssClass} today-sq m-[1px] h-[10px] w-[10px]"></div>
+                  <div class="hiddenx relative">
+                    <div
+                      data-index={ts.index}
+                      class="message rounded border bg-black p-2 text-xs font-semibold text-white"
+                    >
+                      <p>
+                        <span class="text-{bar.cssClass}"> ● </span>
 
-												{f(
-													new Date(bar.timestamp * 1000),
-													"hh:mm a",
-													selectedLang
-												)}
-											</p>
-											{#if bar.status != "NO_DATA"}
-												<p class="pl-2">
-													{l(lang, bar.status)}
-												</p>
-											{:else}
-												<p class="pl-2">-</p>
-											{/if}
-										</div>
-									</div>
-								{/each}
-							{/if}
-						</div>
-					</div>
-				{/if}
-			</div>
-		</div>
-	</div>
+                        {f(new Date(bar.timestamp * 1000), "hh:mm a", selectedLang, $page.data.localTz)}
+                      </p>
+                      {#if bar.status != "NO_DATA"}
+                        <p class="pl-2">
+                          {l(lang, bar.status)}
+                        </p>
+                      {:else}
+                        <p class="pl-2">-</p>
+                      {/if}
+                    </div>
+                  </div>
+                {/each}
+              {/if}
+            </div>
+          </div>
+        {/if}
+      </div>
+    </div>
+  </div>
 </div>

src/lib/components/nav.svelte

@@ -1,64 +1,64 @@
 <script>
-	import { Button } from "$lib/components/ui/button";
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
-	import { Languages, Menu } from "lucide-svelte";
-	import { base } from "$app/paths";
-	import { analyticsEvent } from "$lib/boringOne";
-	export let data;
-	let defaultPattern = data.site?.pattern || "squares";
+  import { Button } from "$lib/components/ui/button";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+  import { Languages, Menu } from "lucide-svelte";
+  import { base } from "$app/paths";
+  import { analyticsEvent } from "$lib/boringOne";
+  import GMI from "$lib/components/gmi.svelte";
+  export let data;
+  let defaultPattern = data.site?.pattern || "squares";
 </script>
 
 <div class="{defaultPattern}-pattern"></div>
 
 <header class="blurry-bg sticky top-0 z-50 mx-auto md:mt-2">
-	<div class="container flex h-14 max-w-[820px] items-center border bg-card px-3 md:rounded-md">
-		<a href={data.site.home ? data.site.home : base} class="mr-6 flex items-center space-x-2">
-			{#if data.site.logo}
-				<img src={base + data.site.logo} class="w-8" alt={data.site.title} srcset="" />
-			{/if}
-			{#if data.site.siteName}
-				<span class="  inline-block text-[15px] font-bold lg:text-base">
-					{data.site.siteName}
-				</span>
-			{/if}
-		</a>
-		<div class="flex w-full justify-end">
-			{#if data.site.nav}
-				<nav class=" hidden flex-wrap items-center text-sm font-medium md:flex">
-					{#each data.site.nav as navItem}
-						<a
-							href={navItem.url}
-							class="flex rounded-md px-3 py-2 text-card-foreground transition-all ease-linear hover:bg-background"
-							on:click={() => analyticsEvent("nav", navItem.name)}
-						>
-							{#if navItem.iconURL}
-								<img
-									src={base + navItem.iconURL}
-									class="mr-1.5 mt-0.5 inline h-4"
-									alt={navItem.name}
-								/>
-							{/if}
-							<span>{navItem.name}</span>
-						</a>
-					{/each}
-				</nav>
-				<DropdownMenu.Root class="">
-					<DropdownMenu.Trigger class="mr-2 flex md:hidden">
-						<Button variant="outline" size="sm">
-							<Menu size={14} />
-						</Button>
-					</DropdownMenu.Trigger>
-					<DropdownMenu.Content>
-						{#each data.site.nav as navItem}
-							<DropdownMenu.Group>
-								<DropdownMenu.Item>
-									<a href={navItem.url}> {navItem.name} </a>
-								</DropdownMenu.Item>
-							</DropdownMenu.Group>
-						{/each}
-					</DropdownMenu.Content>
-				</DropdownMenu.Root>
-			{/if}
-		</div>
-	</div>
+  <div class="container flex h-14 max-w-[820px] items-center border bg-card px-3 md:rounded-md">
+    <a rel="external" href={data.site.home ? data.site.home : base} class="mr-6 flex items-center space-x-2">
+      {#if data.site.logo}
+        <GMI src={data.site.logo} classList="w-8" alt={data.site.title} srcset="" />
+      {/if}
+      {#if data.site.siteName}
+        <span class="  inline-block text-[15px] font-bold lg:text-base">
+          {data.site.siteName}
+        </span>
+      {/if}
+    </a>
+    <div class="flex w-full justify-end">
+      {#if data.site.nav}
+        <nav class=" hidden flex-wrap items-center text-sm font-medium md:flex">
+          {#each data.site.nav as navItem}
+            <a
+              rel="external"
+              href={navItem.url}
+              class="flex rounded-md px-3 py-2 text-card-foreground transition-all ease-linear hover:bg-background"
+              on:click={() => analyticsEvent("nav", navItem.name)}
+            >
+              {#if navItem.iconURL}
+                <GMI src={navItem.iconURL} classList="mr-1.5 mt-0.5 inline h-4" alt={navItem.name} />
+              {/if}
+              <span>{navItem.name}</span>
+            </a>
+          {/each}
+        </nav>
+        <div class="flex md:hidden">
+          <DropdownMenu.Root>
+            <DropdownMenu.Trigger>
+              <Button variant="outline" size="sm">
+                <Menu size={14} />
+              </Button>
+            </DropdownMenu.Trigger>
+            <DropdownMenu.Content>
+              {#each data.site.nav as navItem}
+                <DropdownMenu.Group>
+                  <DropdownMenu.Item>
+                    <a rel="external" href={navItem.url}> {navItem.name} </a>
+                  </DropdownMenu.Item>
+                </DropdownMenu.Group>
+              {/each}
+            </DropdownMenu.Content>
+          </DropdownMenu.Root>
+        </div>
+      {/if}
+    </div>
+  </div>
 </header>

src/lib/components/shareMenu.svelte

@@ -1,293 +1,289 @@
 <script>
-	import { Share2, Link, CopyCheck, Code, TrendingUp, Percent, Loader } from "lucide-svelte";
-	import { Button } from "$lib/components/ui/button";
-	import { base } from "$app/paths";
-	import { onMount } from "svelte";
-	import { analyticsEvent } from "$lib/boringOne";
-	import { l, summaryTime } from "$lib/i18n/client";
-	import * as RadioGroup from "$lib/components/ui/radio-group";
-	import { Label } from "$lib/components/ui/label";
+  import { Share2, Link, CopyCheck, Code, TrendingUp, Percent, Loader, ExternalLink } from "lucide-svelte";
+  import { Button } from "$lib/components/ui/button";
+  import { base } from "$app/paths";
+  import { onMount } from "svelte";
+  import { analyticsEvent } from "$lib/boringOne";
+  import { l, summaryTime } from "$lib/i18n/client";
+  import * as RadioGroup from "$lib/components/ui/radio-group";
+  import { Label } from "$lib/components/ui/label";
+  import GMI from "$lib/components/gmi.svelte";
 
-	export let monitor;
-	export let lang;
-	export let selectedLang = "en";
-	let theme = "light";
-	let copiedLink = false;
-	let embedType = "js";
-	let copiedEmbed = false;
-	let copiedBadgeStatus = false;
-	let copiedBadgeUptime = false;
-	let copiedBadgeDotStandard = false;
-	let copiedBadgeDotPing = false;
+  export let monitor;
+  export let lang;
+  export let selectedLang = "en";
+  let theme = "light";
+  let copiedLink = false;
+  let embedType = "js";
+  let copiedEmbed = false;
+  let copiedBadgeStatus = false;
+  let copiedBadgeUptime = false;
+  let copiedBadgeDotStandard = false;
+  let copiedBadgeDotPing = false;
 
-	let protocol;
-	let domain;
+  let protocol;
+  let domain;
 
-	let pathMonitorLink;
-	function copyLinkToClipboard() {
-		analyticsEvent("monitor_link_copied", {
-			tag: monitor.tag
-		});
-		navigator.clipboard.writeText(pathMonitorLink);
-		copiedLink = true;
-		setTimeout(function () {
-			copiedLink = false;
-		}, 1500);
-	}
+  let pathMonitorLink;
+  function copyLinkToClipboard() {
+    analyticsEvent("monitor_link_copied", {
+      tag: monitor.tag
+    });
+    navigator.clipboard.writeText(pathMonitorLink);
+    copiedLink = true;
+    setTimeout(function () {
+      copiedLink = false;
+    }, 1500);
+  }
 
-	let pathMonitorBadgeUptime;
-	function copyUptimeBadge() {
-		analyticsEvent("monitor_uptime_badge_copied", {
-			tag: monitor.tag
-		});
-		navigator.clipboard.writeText(pathMonitorBadgeUptime);
-		copiedBadgeUptime = true;
-		setTimeout(function () {
-			copiedBadgeUptime = false;
-		}, 1500);
-	}
+  let pathMonitorBadgeUptime;
+  function copyUptimeBadge() {
+    analyticsEvent("monitor_uptime_badge_copied", {
+      tag: monitor.tag
+    });
+    navigator.clipboard.writeText(pathMonitorBadgeUptime);
+    copiedBadgeUptime = true;
+    setTimeout(function () {
+      copiedBadgeUptime = false;
+    }, 1500);
+  }
 
-	let pathMonitorBadgeStatus;
-	function copyStatusBadge() {
-		analyticsEvent("monitor_status_badge_copied", {
-			tag: monitor.tag
-		});
-		navigator.clipboard.writeText(pathMonitorBadgeStatus);
-		copiedBadgeStatus = true;
-		setTimeout(function () {
-			copiedBadgeStatus = false;
-		}, 1500);
-	}
+  let pathMonitorBadgeStatus;
+  function copyStatusBadge() {
+    analyticsEvent("monitor_status_badge_copied", {
+      tag: monitor.tag
+    });
+    navigator.clipboard.writeText(pathMonitorBadgeStatus);
+    copiedBadgeStatus = true;
+    setTimeout(function () {
+      copiedBadgeStatus = false;
+    }, 1500);
+  }
 
-	let pathMonitorBadgeDot;
-	function copyDotStandard() {
-		analyticsEvent("monitor_svg_standard_copied", {
-			tag: monitor.tag
-		});
+  let pathMonitorBadgeDot;
+  function copyDotStandard() {
+    analyticsEvent("monitor_svg_standard_copied", {
+      tag: monitor.tag
+    });
 
-		navigator.clipboard.writeText(pathMonitorBadgeDot);
-		copiedBadgeDotStandard = true;
-		setTimeout(function () {
-			copiedBadgeDotStandard = false;
-		}, 1500);
-	}
+    navigator.clipboard.writeText(pathMonitorBadgeDot);
+    copiedBadgeDotStandard = true;
+    setTimeout(function () {
+      copiedBadgeDotStandard = false;
+    }, 1500);
+  }
 
-	let pathMonitorBadgeDotPing;
-	function copyDotPing() {
-		analyticsEvent("monitor_svg_pinging_copied", {
-			tag: monitor.tag
-		});
-		navigator.clipboard.writeText(pathMonitorBadgeDotPing);
-		copiedBadgeDotPing = true;
-		setTimeout(function () {
-			copiedBadgeDotPing = false;
-		}, 1500);
-	}
+  let pathMonitorBadgeDotPing;
+  function copyDotPing() {
+    analyticsEvent("monitor_svg_pinging_copied", {
+      tag: monitor.tag
+    });
+    navigator.clipboard.writeText(pathMonitorBadgeDotPing);
+    copiedBadgeDotPing = true;
+    setTimeout(function () {
+      copiedBadgeDotPing = false;
+    }, 1500);
+  }
 
-	function copyScriptTagToClipboard() {
-		//get domain with port number
+  function copyScriptTagToClipboard() {
+    //get domain with port number
 
-		analyticsEvent("monitor_embed_copied", {
-			tag: monitor.tag,
-			type: embedType
-		});
+    analyticsEvent("monitor_embed_copied", {
+      tag: monitor.tag,
+      type: embedType
+    });
 
-		let path = `${base}/embed/monitor-${monitor.tag}`;
-		let scriptTag =
-			`<script async src="${protocol + "//" + domain + path}/js?theme=${theme}&monitor=${protocol + "//" + domain + path}"><` +
-			"/script>";
+    let path = `${base}/embed/monitor-${monitor.tag}`;
+    let scriptTag =
+      `<script async src="${protocol + "//" + domain + path}/js?theme=${theme}&monitor=${protocol + "//" + domain + path}"><` +
+      "/script>";
 
-		if (embedType == "iframe") {
-			scriptTag = `<iframe src="${protocol + "//" + domain + path}?theme=${theme}" width="100%" height="200" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>`;
-		}
-		navigator.clipboard.writeText(scriptTag);
-		copiedEmbed = true;
-		setTimeout(function () {
-			copiedEmbed = false;
-		}, 1500);
-	}
+    if (embedType == "iframe") {
+      scriptTag = `<iframe src="${protocol + "//" + domain + path}?theme=${theme}" width="100%" height="200" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe>`;
+    }
+    navigator.clipboard.writeText(scriptTag);
+    copiedEmbed = true;
+    setTimeout(function () {
+      copiedEmbed = false;
+    }, 1500);
+  }
 
-	onMount(async () => {
-		protocol = window.location.protocol;
-		domain = window.location.host;
-		pathMonitorLink = `${protocol}//${domain}${base}/?monitor=${monitor.tag}`;
-		pathMonitorBadgeUptime = `${protocol}//${domain}${base}/badge/${monitor.tag}/uptime`;
-		pathMonitorBadgeStatus = `${protocol}//${domain}${base}/badge/${monitor.tag}/status`;
-		pathMonitorBadgeDot = `${protocol}//${domain}${base}/badge/${monitor.tag}/dot`;
-		pathMonitorBadgeDotPing = `${protocol}//${domain}${base}/badge/${monitor.tag}/dot?animate=ping`;
-		analyticsEvent("monitor_share_menu_open", {
-			tag: monitor.tag
-		});
-	});
+  onMount(async () => {
+    protocol = window.location.protocol;
+    domain = window.location.host;
+    pathMonitorLink = `${protocol}//${domain}${base}/?monitor=${monitor.tag}`;
+    pathMonitorBadgeUptime = `${protocol}//${domain}${base}/badge/${monitor.tag}/uptime`;
+    pathMonitorBadgeStatus = `${protocol}//${domain}${base}/badge/${monitor.tag}/status`;
+    pathMonitorBadgeDot = `${protocol}//${domain}${base}/badge/${monitor.tag}/dot`;
+    pathMonitorBadgeDotPing = `${protocol}//${domain}${base}/badge/${monitor.tag}/dot?animate=ping`;
+    analyticsEvent("monitor_share_menu_open", {
+      tag: monitor.tag
+    });
+  });
 </script>
 
-<div
-	class="relative mb-2 scroll-m-20 px-4 pt-4 {!!monitor.image
-		? 'pl-10'
-		: ''} text-xl font-medium tracking-tight"
->
-	{#if !!monitor.image}
-		<img
-			src={monitor.image.startsWith("/") ? base + monitor.image : monitor.image}
-			class="absolute left-4 top-5 inline h-5 w-5"
-			alt={monitor.name}
-			srcset=""
-		/>
-	{/if}
-	<p class="overflow-hidden text-ellipsis whitespace-nowrap">
-		{monitor.name}
-	</p>
+<div class="relative mb-2 scroll-m-20 px-4 pt-4 {!!monitor.image ? 'pl-10' : ''} text-xl font-medium tracking-tight">
+  {#if !!monitor.image}
+    <GMI src={monitor.image} classList="absolute left-4 top-5 inline h-5 w-5" alt={monitor.name} srcset="" />
+  {/if}
+  <p class="overflow-hidden text-ellipsis whitespace-nowrap">
+    {monitor.name}
+  </p>
 </div>
 <div class="px-4">
-	<h2 class="mb-1 text-sm font-semibold">
-		{l(lang, "Share")}
-	</h2>
-	<p class="mb-2 text-xs text-muted-foreground">
-		{l(lang, "Share this monitor using a link with others")}
-	</p>
-	<Button
-		class="h-8 px-2 pr-4 text-xs font-semibold"
-		variant="secondary"
-		on:click={copyLinkToClipboard}
-	>
-		{#if !copiedLink}
-			<Link class="mr-2 inline" size={12} />
-			<span class="font-semibold">
-				{l(lang, "Copy Link")}
-			</span>
-		{:else}
-			<CopyCheck class="mr-2 inline" size={12} />
-			<span class="font-semibold">
-				{l(lang, "Link Copied")}
-			</span>
-		{/if}
-	</Button>
+  <h2 class="mb-1 text-sm font-semibold">
+    {l(lang, "Share")}
+  </h2>
+  <p class="mb-2 text-xs text-muted-foreground">
+    {l(lang, "Share this monitor using a link with others")}
+  </p>
+  <Button class="h-8 px-2 pr-4 text-xs font-semibold" variant="secondary" on:click={copyLinkToClipboard}>
+    {#if !copiedLink}
+      <Link class="mr-2 inline" size={12} />
+      <span class="font-semibold">
+        {l(lang, "Copy Link")}
+      </span>
+    {:else}
+      <CopyCheck class="mr-2 inline" size={12} />
+      <span class="font-semibold">
+        {l(lang, "Link Copied")}
+      </span>
+    {/if}
+  </Button>
+  <Button
+    href={pathMonitorLink}
+    target="_blank"
+    variant="link"
+    class="h-8 px-3  text-xs font-semibold text-muted-foreground"
+  >
+    <ExternalLink class="inline" size={12} />
+  </Button>
 </div>
 <hr class="my-4" />
 <div class="px-4">
-	<h2 class="mb-1 text-sm font-semibold">
-		{l(lang, "Embed")}
-	</h2>
-	<p class="mb-1 text-xs text-muted-foreground">
-		{l(lang, "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.")}
-	</p>
-	<div class="mb-4 grid grid-cols-2 gap-2">
-		<div class="col-span-1">
-			<h3 class="mb-2 text-xs">
-				{l(lang, "Theme")}
-			</h3>
-			<RadioGroup.Root bind:value={theme} class=" flex">
-				<div class="flex items-center space-x-2">
-					<RadioGroup.Item value="light" id="light-theme" />
-					<Label class="text-xs" for="light-theme">{l(lang, "Light")}</Label>
-				</div>
-				<div class="flex items-center space-x-2">
-					<RadioGroup.Item value="dark" id="dark-theme" />
-					<Label class="text-xs" for="dark-theme">{l(lang, "Dark")}</Label>
-				</div>
-				<RadioGroup.Input name="theme" />
-			</RadioGroup.Root>
-		</div>
-		<div class="col-span-1 pl-2">
-			<h3 class="mb-2 text-xs">
-				{l(lang, "Mode")}
-			</h3>
-			<RadioGroup.Root bind:value={embedType} class="flex">
-				<div class="flex items-center space-x-2">
-					<RadioGroup.Item value="js" id="js-embed" />
-					<Label class="text-xs" for="js-embed">&#x3C;script&#x3E;</Label>
-				</div>
-				<div class="flex items-center space-x-2">
-					<RadioGroup.Item value="iframe" id="iframe-embed" />
-					<Label class="text-xs" for="iframe-embed">&#x3C;iframe&#x3E;</Label>
-				</div>
-				<RadioGroup.Input name="embed" />
-			</RadioGroup.Root>
-		</div>
-	</div>
-	<Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyScriptTagToClipboard}>
-		{#if !copiedEmbed}
-			<Code class="mr-2 inline" size={12} />
-			<span class=" font-semibold">
-				{l(lang, "Copy Code")}
-			</span>
-		{:else}
-			<CopyCheck class="mr-2 inline" size={12} />
-			<span class="font-semibold">
-				{l(lang, "Code Copied")}
-			</span>
-		{/if}
-	</Button>
+  <h2 class="mb-1 text-sm font-semibold">
+    {l(lang, "Embed")}
+  </h2>
+  <p class="mb-1 text-xs text-muted-foreground">
+    {l(lang, "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.")}
+  </p>
+  <div class="mb-4 grid grid-cols-2 gap-2">
+    <div class="col-span-1">
+      <h3 class="mb-2 text-xs">
+        {l(lang, "Theme")}
+      </h3>
+      <RadioGroup.Root bind:value={theme} class=" flex">
+        <div class="flex items-center space-x-2">
+          <RadioGroup.Item value="light" id="light-theme" />
+          <Label class="text-xs" for="light-theme">{l(lang, "Light")}</Label>
+        </div>
+        <div class="flex items-center space-x-2">
+          <RadioGroup.Item value="dark" id="dark-theme" />
+          <Label class="text-xs" for="dark-theme">{l(lang, "Dark")}</Label>
+        </div>
+        <RadioGroup.Input name="theme" />
+      </RadioGroup.Root>
+    </div>
+    <div class="col-span-1 pl-2">
+      <h3 class="mb-2 text-xs">
+        {l(lang, "Mode")}
+      </h3>
+      <RadioGroup.Root bind:value={embedType} class="flex">
+        <div class="flex items-center space-x-2">
+          <RadioGroup.Item value="js" id="js-embed" />
+          <Label class="text-xs" for="js-embed">&#x3C;script&#x3E;</Label>
+        </div>
+        <div class="flex items-center space-x-2">
+          <RadioGroup.Item value="iframe" id="iframe-embed" />
+          <Label class="text-xs" for="iframe-embed">&#x3C;iframe&#x3E;</Label>
+        </div>
+        <RadioGroup.Input name="embed" />
+      </RadioGroup.Root>
+    </div>
+  </div>
+  <Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyScriptTagToClipboard}>
+    {#if !copiedEmbed}
+      <Code class="mr-2 inline" size={12} />
+      <span class=" font-semibold">
+        {l(lang, "Copy Code")}
+      </span>
+    {:else}
+      <CopyCheck class="mr-2 inline" size={12} />
+      <span class="font-semibold">
+        {l(lang, "Code Copied")}
+      </span>
+    {/if}
+  </Button>
 </div>
 <hr class="my-4" />
 <div class="px-4">
-	<h2 class="mb-1 text-sm font-semibold">
-		{l(lang, "Badge")}
-	</h2>
-	<p class="mb-2 text-xs text-muted-foreground">
-		{l(lang, "Get SVG badge for this monitor")}
-	</p>
-	<Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyStatusBadge}>
-		{#if !copiedBadgeStatus}
-			<TrendingUp class="mr-2 inline" size={12} />
-			<span class="font-semibold">
-				{l(lang, "Status")}
-				{l(lang, "Badge")}
-			</span>
-		{:else}
-			<CopyCheck class="mr-2 inline" size={12} />
-			<span class="font-semibold">
-				{l(lang, "Badge Copied")}
-			</span>
-		{/if}
-	</Button>
-	<Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyUptimeBadge}>
-		{#if !copiedBadgeUptime}
-			<Percent class="mr-2 inline" size={12} />
-			<span class="font-semibold">
-				{l(lang, "Uptime")}
-				{l(lang, "Badge")}
-			</span>
-		{:else}
-			<CopyCheck class="mr-2 inline" size={12} />
-			<span class="font-semibold">
-				{l(lang, "Badge Copied")}
-			</span>
-		{/if}
-	</Button>
+  <h2 class="mb-1 text-sm font-semibold">
+    {l(lang, "Badge")}
+  </h2>
+  <p class="mb-2 text-xs text-muted-foreground">
+    {l(lang, "Get SVG badge for this monitor")}
+  </p>
+  <Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyStatusBadge}>
+    {#if !copiedBadgeStatus}
+      <TrendingUp class="mr-2 inline" size={12} />
+      <span class="font-semibold">
+        {l(lang, "Status")}
+        {l(lang, "Badge")}
+      </span>
+    {:else}
+      <CopyCheck class="mr-2 inline" size={12} />
+      <span class="font-semibold">
+        {l(lang, "Badge Copied")}
+      </span>
+    {/if}
+  </Button>
+  <Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyUptimeBadge}>
+    {#if !copiedBadgeUptime}
+      <Percent class="mr-2 inline" size={12} />
+      <span class="font-semibold">
+        {l(lang, "Uptime")}
+        {l(lang, "Badge")}
+      </span>
+    {:else}
+      <CopyCheck class="mr-2 inline" size={12} />
+      <span class="font-semibold">
+        {l(lang, "Badge Copied")}
+      </span>
+    {/if}
+  </Button>
 </div>
 <hr class="my-4" />
 <div class="mb-4 px-4">
-	<h2 class="mb-1 text-sm font-semibold">
-		{l(lang, "LIVE Status")}
-	</h2>
-	<p class="mb-2 text-xs text-muted-foreground">
-		{l(lang, "Get a LIVE Status for this monitor")}
-	</p>
-	<Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyDotStandard}>
-		{#if !copiedBadgeDotStandard}
-			<img src={pathMonitorBadgeDot} class="mr-1 inline h-5" alt="status" />
-			<span class="font-semibold">
-				{l(lang, "Standard")}
-			</span>
-		{:else}
-			<CopyCheck class="mr-2 inline h-5 w-5" />
-			<span class="font-semibold">
-				{l(lang, "Standard")}
-			</span>
-		{/if}
-	</Button>
-	<Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyDotPing}>
-		{#if !copiedBadgeDotPing}
-			<img src={pathMonitorBadgeDotPing} class="mr-1 inline h-5" alt="status" />
-			<span class="font-semibold">
-				{l(lang, "Pinging")}
-			</span>
-		{:else}
-			<CopyCheck class="mr-2 inline h-5 w-5" />
-			<span class="font-semibold">
-				{l(lang, "Pinging")}
-			</span>
-		{/if}
-	</Button>
+  <h2 class="mb-1 text-sm font-semibold">
+    {l(lang, "LIVE Status")}
+  </h2>
+  <p class="mb-2 text-xs text-muted-foreground">
+    {l(lang, "Get a LIVE Status for this monitor")}
+  </p>
+  <Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyDotStandard}>
+    {#if !copiedBadgeDotStandard}
+      <img src={pathMonitorBadgeDot} class="mr-1 inline h-5" alt="status" />
+      <span class="font-semibold">
+        {l(lang, "Standard")}
+      </span>
+    {:else}
+      <CopyCheck class="mr-2 inline h-5 w-5" />
+      <span class="font-semibold">
+        {l(lang, "Standard")}
+      </span>
+    {/if}
+  </Button>
+  <Button class="h-8  px-2 pr-4 text-xs" variant="secondary" on:click={copyDotPing}>
+    {#if !copiedBadgeDotPing}
+      <img src={pathMonitorBadgeDotPing} class="mr-1 inline h-5" alt="status" />
+      <span class="font-semibold">
+        {l(lang, "Pinging")}
+      </span>
+    {:else}
+      <CopyCheck class="mr-2 inline h-5 w-5" />
+      <span class="font-semibold">
+        {l(lang, "Pinging")}
+      </span>
+    {/if}
+  </Button>
 </div>

src/lib/i18n/client.js

@@ -2,70 +2,71 @@
 
 import { format, formatDistance, formatDistanceToNow, formatDuration } from "date-fns";
 import { ru, enUS, hi, de, zhCN, vi, ja, nl, da, fr, ko, ptBR, tr, nb } from "date-fns/locale";
+import { formatInTimeZone } from "date-fns-tz";
 
 const locales = {
-	ru,
-	en: enUS,
-	hi,
-	de,
-	"zh-CN": zhCN,
-	vi,
-	ja,
-	nl,
-	dk: da,
-	fr,
-	ko,
-	"pt-BR": ptBR,
-	tr,
-	"nb-NO": nb
+  ru,
+  en: enUS,
+  hi,
+  de,
+  "zh-CN": zhCN,
+  vi,
+  ja,
+  nl,
+  dk: da,
+  fr,
+  ko,
+  "pt-BR": ptBR,
+  tr,
+  "nb-NO": nb,
 };
 
-const f = function (date, formatStr, locale) {
-	return format(date, formatStr, {
-		locale: locales[locale] || enUS
-	});
+const f = function (date, formatStr, locale, tz) {
+  return formatInTimeZone(date, tz, formatStr, {
+    locale: locales[locale] || enUS,
+  });
 };
 
 const fd = function (start, end, locale) {
-	return formatDistance(start, end, { addSuffix: false, locale: locales[locale] });
+  return formatDistance(start, end, { addSuffix: false, locale: locales[locale] });
 };
 const fdn = function (start, locale) {
-	return formatDistanceToNow(start, { addSuffix: true, locale: locales[locale] });
+  return formatDistanceToNow(start, { addSuffix: true, locale: locales[locale] });
 };
 const fdm = function (duration, locale) {
-	return formatDuration(duration, {
-		format: ["days", "hours", "minutes"],
-		zero: false,
-		delimiter: " ",
-		locale: locales[locale]
-	});
+  return formatDuration(duration, {
+    format: ["days", "hours", "minutes"],
+    zero: false,
+    delimiter: " ",
+    locale: locales[locale],
+  });
 };
 
 const l = function (sessionLangMap, key, args = {}) {
-	try {
-		let obj = sessionLangMap[key];
+  try {
+    let obj = sessionLangMap[key];
 
-		// Replace placeholders in the string using the args object
-		if (obj && typeof obj === "string") {
-			obj = obj.replace(/%\w+/g, (placeholder) => {
-				const argKey = placeholder.slice(1); // Remove the `%` to get the key
-				return args[argKey] !== undefined ? args[argKey] : placeholder;
-			});
-		}
-		return obj || key;
-	} catch (e) {
-		return key;
-	}
+    // Replace placeholders in the string using the args object
+    if (obj && typeof obj === "string") {
+      obj = obj.replace(/%\w+/g, (placeholder) => {
+        const argKey = placeholder.slice(1); // Remove the `%` to get the key
+        return args[argKey] !== undefined ? args[argKey] : placeholder;
+      });
+    }
+    return obj || key;
+  } catch (e) {
+    return key;
+  }
 };
 const summaryTime = function (summaryStatus) {
-	if (summaryStatus == "No Data") {
-		return "No Data";
-	}
-	if (summaryStatus == "UP") {
-		return "Status OK";
-	}
+  if (summaryStatus == "No Data") {
+    return "No Data";
+  }
+  if (summaryStatus == "UP") {
+    return "Status OK";
+  }
 
-	return "%status for %duration";
+  return "%status for %duration";
 };
 
 export { l, summaryTime, f, formatDistance, fd, fdn, fdm };

src/lib/locales/de.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%status für %duration",
-	"14 Days": "14 Tage",
-	"30 Days": "30 Tage",
-	"60 Days": "60 Tage",
-	"7 Days": "7 Tage",
-	"90 Days": "90 Tage",
-	"Availability per Component": "Verfügbarkeit pro Komponente",
-	"Back": "Zurück",
-	"Badge Copied": "Abzeichen kopiert",
-	"Badge": "Abzeichen",
-	"Browse Events": "Ereignisse durchsuchen",
-	"Code Copied": "Code kopiert",
-	"Copy Code": "Code kopieren",
-	"Copy Link": "Link kopieren",
-	"DEGRADED": "EINGESCHRÄNKT",
-	"DOWN": "AUSGEFALLEN",
-	"Dark": "Dunkel",
-	"Days": "Tage",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Binden Sie diesen Monitor mit <script> oder <iframe> in Ihre App ein.",
-	"Embed": "Einbetten",
-	"Get SVG badge for this monitor": "SVG-Abzeichen für diesen Monitor erhalten",
-	"Get a LIVE Status for this monitor": "LIVE-Status für diesen Monitor erhalten",
-	"IDENTIFIED": "IDENTIFIZIERT",
-	"INVESTIGATING": "UNTERSUCHUNG",
-	"Incident Updates": "Vorfall-Updates",
-	"LIVE Status": "LIVE-Status",
-	"Lasted for about %lastedFor": "Dauerte etwa %lastedFor",
-	"Light": "Hell",
-	"Link Copied": "Link kopiert",
-	"MAINTENANCE": "WARTUNG",
-	"MONITORING": "ÜBERWACHUNG",
-	"Maintenance Completed": "Wartung abgeschlossen",
-	"Maintenance in Progress": "Wartung läuft",
-	"Mode": "Modus",
-	"No Data": "Keine Daten",
-	"No Incident in %date": "Kein Vorfall am %date",
-	"No Incidents": "Keine Vorfälle",
-	"No Monitor Found": "Kein Monitor gefunden",
-	"No Updates Yet": "Noch keine Updates",
-	"Ongoing Incidents": "Laufende Vorfälle",
-	"Pinging": "Pingen",
-	"RESOLVED": "GELÖST",
-	"Recent Incidents": "Kürzliche Vorfälle",
-	"Recent Maintenances": "Kürzliche Wartungen",
-	"Share this monitor using a link with others": "Teilen Sie diesen Monitor mit einem Link mit anderen",
-	"Share": "Teilen",
-	"Standard": "Standard",
-	"Started %startedAt, lasted for %lastedFor": "Begann vor etwa %startedAt und dauerte etwa %lastedFor",
-	"Started %startedAt, still ongoing": "Begann vor etwa %startedAt und dauert noch an",
-	"Starts %startedAt, will last for %lastedFor": "Beginnt in %startedAt und wird etwa %lastedFor dauern",
-	"Starts %startedAt": "Beginnt in %startedAt",
-	"Status OK": "Status OK",
-	"Status": "Status",
-	"Theme": "Thema",
-	"Today": "Heute",
-	"UP": "VERFÜGBAR",
-	"Upcoming Maintenance": "Bevorstehende Wartung",
-	"Updates": "Updates",
-	"Uptime": "Verfügbarkeit"
+  "%status for %duration": "%status für %duration",
+  "14 Days": "14 Tage",
+  "30 Days": "30 Tage",
+  "60 Days": "60 Tage",
+  "7 Days": "7 Tage",
+  "90 Days": "90 Tage",
+  "Availability per Component": "Verfügbarkeit pro Komponente",
+  "Back": "Zurück",
+  "Badge Copied": "Abzeichen kopiert",
+  "Badge": "Abzeichen",
+  "Browse Events": "Ereignisse durchsuchen",
+  "Code Copied": "Code kopiert",
+  "Copy Code": "Code kopieren",
+  "Copy Link": "Link kopieren",
+  "DEGRADED": "EINGESCHRÄNKT",
+  "DOWN": "AUSGEFALLEN",
+  "Dark": "Dunkel",
+  "Days": "Tage",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Binden Sie diesen Monitor mit <script> oder <iframe> in Ihre App ein.",
+  "Embed": "Einbetten",
+  "Get SVG badge for this monitor": "SVG-Abzeichen für diesen Monitor erhalten",
+  "Get a LIVE Status for this monitor": "LIVE-Status für diesen Monitor erhalten",
+  "IDENTIFIED": "IDENTIFIZIERT",
+  "INVESTIGATING": "UNTERSUCHUNG",
+  "Incident Updates": "Vorfall-Updates",
+  "LIVE Status": "LIVE-Status",
+  "Lasted for about %lastedFor": "Dauerte etwa %lastedFor",
+  "Light": "Hell",
+  "Link Copied": "Link kopiert",
+  "MAINTENANCE": "WARTUNG",
+  "MONITORING": "ÜBERWACHUNG",
+  "Maintenance Completed": "Wartung abgeschlossen",
+  "Maintenance in Progress": "Wartung läuft",
+  "Mode": "Modus",
+  "No Data": "Keine Daten",
+  "No Incident in %date": "Kein Vorfall am %date",
+  "No Incidents": "Keine Vorfälle",
+  "No Monitor Found": "Kein Monitor gefunden",
+  "No Updates Yet": "Noch keine Updates",
+  "Ongoing Incidents": "Laufende Vorfälle",
+  "Pinging": "Pingen",
+  "RESOLVED": "GELÖST",
+  "Recent Incidents": "Kürzliche Vorfälle",
+  "Recent Maintenances": "Kürzliche Wartungen",
+  "Share this monitor using a link with others": "Teilen Sie diesen Monitor mit einem Link mit anderen",
+  "Share": "Teilen",
+  "Standard": "Standard",
+  "Started %startedAt, lasted for %lastedFor": "Begann vor etwa %startedAt und dauerte etwa %lastedFor",
+  "Started %startedAt, still ongoing": "Begann vor etwa %startedAt und dauert noch an",
+  "Started %startedAt, will last for %lastedFor more": "Begann vor etwa %startedAt und wird noch etwa %lastedFor dauern",
+  "Starts %startedAt, will last for %lastedFor": "Beginnt in %startedAt und wird etwa %lastedFor dauern",
+  "Starts %startedAt": "Beginnt in %startedAt",
+  "Status OK": "Status OK",
+  "Status": "Status",
+  "Switch to your timezone": "Wechseln Sie zu Ihrer Zeitzone",
+  "Theme": "Thema",
+  "Timezone set to %tz": "Zeitzone auf %tz gesetzt",
+  "Today": "Heute",
+  "UP": "VERFÜGBAR",
+  "Upcoming Maintenance": "Bevorstehende Wartung",
+  "Updates": "Updates",
+  "Uptime": "Verfügbarkeit"
 }

src/lib/locales/dk.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%status i %duration",
-	"14 Days": "14 Dage",
-	"30 Days": "30 Dage",
-	"60 Days": "60 Dage",
-	"7 Days": "7 Dage",
-	"90 Days": "90 Dage",
-	"Availability per Component": "Tilgængelighed pr. Komponent",
-	"Back": "Tilbage",
-	"Badge Copied": "Mærke Kopieret",
-	"Badge": "Mærke",
-	"Browse Events": "Gennemse begivenheder",
-	"Code Copied": "Kode Kopieret",
-	"Copy Code": "Kopier Kode",
-	"Copy Link": "Kopier Link",
-	"DEGRADED": "FORRINGET",
-	"DOWN": "NEDE",
-	"Dark": "Mørk",
-	"Days": "Dage",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Integrer denne monitor ved at bruge <script> eller <iframe> i din app.",
-	"Embed": "Integrer",
-	"Get SVG badge for this monitor": "Hent SVG-mærke til denne monitor",
-	"Get a LIVE Status for this monitor": "Hent en LIVE-status for denne monitor",
-	"IDENTIFIED": "IDENTIFICERET",
-	"INVESTIGATING": "UNDERSØGER",
-	"Incident Updates": "Hændelsesopdateringer",
-	"LIVE Status": "LIVE-status",
-	"Lasted for about %lastedFor": "Varede i cirka %lastedFor",
-	"Light": "Lys",
-	"Link Copied": "Link Kopieret",
-	"MAINTENANCE": "VEDLIGEHOLDELSE",
-	"MONITORING": "OVERVÅGNING",
-	"Maintenance Completed": "Vedligeholdelse afsluttet",
-	"Maintenance in Progress": "Vedligeholdelse i gang",
-	"Mode": "Tilstand",
-	"No Data": "Ingen Data",
-	"No Incident in %date": "Ingen Hændelse Den %date",
-	"No Incidents": "Ingen Hændelser",
-	"No Monitor Found": "Ingen Monitor Fundet",
-	"No Updates Yet": "Ingen Opdateringer Endnu",
-	"Ongoing Incidents": "Igangværende Hændelser",
-	"Pinging": "Pinger",
-	"RESOLVED": "LØST",
-	"Recent Incidents": "Seneste Hændelser",
-	"Recent Maintenances": "Seneste Vedligeholdelser",
-	"Share this monitor using a link with others": "Del denne monitor ved hjælp af et link med andre",
-	"Share": "Del",
-	"Standard": "Standard",
-	"Started %startedAt, lasted for %lastedFor": "Startede for cirka %startedAt siden, varede i cirka %lastedFor",
-	"Started %startedAt, still ongoing": "Startede for cirka %startedAt siden, stadig igangværende",
-	"Starts %startedAt, will last for %lastedFor": "Starter om %startedAt, vil vare i cirka %lastedFor",
-	"Starts %startedAt": "Starter om %startedAt",
-	"Status OK": "Status OK",
-	"Status": "Status",
-	"Theme": "Tema",
-	"Today": "I dag",
-	"UP": "OPPE",
-	"Upcoming Maintenance": "Kommende vedligeholdelse",
-	"Updates": "Opdateringer",
-	"Uptime": "Oppetid"
+  "%status for %duration": "%status i %duration",
+  "14 Days": "14 Dage",
+  "30 Days": "30 Dage",
+  "60 Days": "60 Dage",
+  "7 Days": "7 Dage",
+  "90 Days": "90 Dage",
+  "Availability per Component": "Tilgængelighed pr. Komponent",
+  "Back": "Tilbage",
+  "Badge Copied": "Mærke Kopieret",
+  "Badge": "Mærke",
+  "Browse Events": "Gennemse begivenheder",
+  "Code Copied": "Kode Kopieret",
+  "Copy Code": "Kopier Kode",
+  "Copy Link": "Kopier Link",
+  "DEGRADED": "FORRINGET",
+  "DOWN": "NEDE",
+  "Dark": "Mørk",
+  "Days": "Dage",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Integrer denne monitor ved at bruge <script> eller <iframe> i din app.",
+  "Embed": "Integrer",
+  "Get SVG badge for this monitor": "Hent SVG-mærke til denne monitor",
+  "Get a LIVE Status for this monitor": "Hent en LIVE-status for denne monitor",
+  "IDENTIFIED": "IDENTIFICERET",
+  "INVESTIGATING": "UNDERSØGER",
+  "Incident Updates": "Hændelsesopdateringer",
+  "LIVE Status": "LIVE-status",
+  "Lasted for about %lastedFor": "Varede i cirka %lastedFor",
+  "Light": "Lys",
+  "Link Copied": "Link Kopieret",
+  "MAINTENANCE": "VEDLIGEHOLDELSE",
+  "MONITORING": "OVERVÅGNING",
+  "Maintenance Completed": "Vedligeholdelse afsluttet",
+  "Maintenance in Progress": "Vedligeholdelse i gang",
+  "Mode": "Tilstand",
+  "No Data": "Ingen Data",
+  "No Incident in %date": "Ingen Hændelse Den %date",
+  "No Incidents": "Ingen Hændelser",
+  "No Monitor Found": "Ingen Monitor Fundet",
+  "No Updates Yet": "Ingen Opdateringer Endnu",
+  "Ongoing Incidents": "Igangværende Hændelser",
+  "Pinging": "Pinger",
+  "RESOLVED": "LØST",
+  "Recent Incidents": "Seneste Hændelser",
+  "Recent Maintenances": "Seneste Vedligeholdelser",
+  "Share this monitor using a link with others": "Del denne monitor ved hjælp af et link med andre",
+  "Share": "Del",
+  "Standard": "Standard",
+  "Started %startedAt, lasted for %lastedFor": "Startede for cirka %startedAt siden, varede i cirka %lastedFor",
+  "Started %startedAt, still ongoing": "Startede for cirka %startedAt siden, stadig igangværende",
+  "Started %startedAt, will last for %lastedFor more": "Startede for cirka %startedAt siden, vil vare i cirka %lastedFor mere",
+  "Starts %startedAt, will last for %lastedFor": "Starter om %startedAt, vil vare i cirka %lastedFor",
+  "Starts %startedAt": "Starter om %startedAt",
+  "Status OK": "Status OK",
+  "Status": "Status",
+  "Switch to your timezone": "Skift til din tidszone",
+  "Theme": "Tema",
+  "Timezone set to %tz": "Tidszone sat til %tz",
+  "Today": "I dag",
+  "UP": "OPPE",
+  "Upcoming Maintenance": "Kommende vedligeholdelse",
+  "Updates": "Opdateringer",
+  "Uptime": "Oppetid"
 }

src/lib/locales/en.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%status for %duration",
-	"14 Days": "14 Days",
-	"30 Days": "30 Days",
-	"60 Days": "60 Days",
-	"7 Days": "7 Days",
-	"90 Days": "90 Days",
-	"Availability per Component": "Availability per Component",
-	"Back": "Back",
-	"Badge Copied": "Badge Copied",
-	"Badge": "Badge",
-	"Browse Events": "Browse Events",
-	"Code Copied": "Code Copied",
-	"Copy Code": "Copy Code",
-	"Copy Link": "Copy Link",
-	"DEGRADED": "DEGRADED",
-	"DOWN": "DOWN",
-	"Dark": "Dark",
-	"Days": "Days",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Embed this monitor using <script> or <iframe> in your app.",
-	"Embed": "Embed",
-	"Get SVG badge for this monitor": "Get SVG badge for this monitor",
-	"Get a LIVE Status for this monitor": "Get a LIVE Status for this monitor",
-	"IDENTIFIED": "IDENTIFIED",
-	"INVESTIGATING": "INVESTIGATING",
-	"Incident Updates": "Incident Updates",
-	"LIVE Status": "LIVE Status",
-	"Lasted for about %lastedFor": "Lasted for about %lastedFor",
-	"Light": "Light",
-	"Link Copied": "Link Copied",
-	"MAINTENANCE": "MAINTENANCE",
-	"MONITORING": "MONITORING",
-	"Maintenance Completed": "Maintenance Completed",
-	"Maintenance in Progress": "Maintenance in Progress",
-	"Mode": "Mode",
-	"No Data": "No Data",
-	"No Incident in %date": "No Incident in %date",
-	"No Incidents": "No Incidents",
-	"No Monitor Found": "No Monitor Found",
-	"No Updates Yet": "No Updates Yet",
-	"Ongoing Incidents": "Ongoing Incidents",
-	"Pinging": "Pinging",
-	"RESOLVED": "RESOLVED",
-	"Recent Incidents": "Recent Incidents",
-	"Recent Maintenances": "Recent Maintenances",
-	"Share this monitor using a link with others": "Share this monitor using a link with others",
-	"Share": "Share",
-	"Standard": "Standard",
-	"Started %startedAt, lasted for %lastedFor": "Started %startedAt, lasted for %lastedFor",
-	"Started %startedAt, still ongoing": "Started %startedAt, still ongoing",
-	"Starts %startedAt, will last for %lastedFor": "Starts %startedAt, will last for %lastedFor",
-	"Starts %startedAt": "Starts %startedAt",
-	"Status OK": "Status OK",
-	"Status": "Status",
-	"Theme": "Theme",
-	"Today": "Today",
-	"UP": "UP",
-	"Upcoming Maintenance": "Upcoming Maintenance",
-	"Updates": "Updates",
-	"Uptime": "Uptime"
+  "%status for %duration": "%status for %duration",
+  "14 Days": "14 Days",
+  "30 Days": "30 Days",
+  "60 Days": "60 Days",
+  "7 Days": "7 Days",
+  "90 Days": "90 Days",
+  "Availability per Component": "Availability per Component",
+  "Back": "Back",
+  "Badge Copied": "Badge Copied",
+  "Badge": "Badge",
+  "Browse Events": "Browse Events",
+  "Code Copied": "Code Copied",
+  "Copy Code": "Copy Code",
+  "Copy Link": "Copy Link",
+  "DEGRADED": "DEGRADED",
+  "DOWN": "DOWN",
+  "Dark": "Dark",
+  "Days": "Days",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Embed this monitor using <script> or <iframe> in your app.",
+  "Embed": "Embed",
+  "Get SVG badge for this monitor": "Get SVG badge for this monitor",
+  "Get a LIVE Status for this monitor": "Get a LIVE Status for this monitor",
+  "IDENTIFIED": "IDENTIFIED",
+  "INVESTIGATING": "INVESTIGATING",
+  "Incident Updates": "Incident Updates",
+  "LIVE Status": "LIVE Status",
+  "Lasted for about %lastedFor": "Lasted for about %lastedFor",
+  "Light": "Light",
+  "Link Copied": "Link Copied",
+  "MAINTENANCE": "MAINTENANCE",
+  "MONITORING": "MONITORING",
+  "Maintenance Completed": "Maintenance Completed",
+  "Maintenance in Progress": "Maintenance in Progress",
+  "Mode": "Mode",
+  "No Data": "No Data",
+  "No Incident in %date": "No Incident in %date",
+  "No Incidents": "No Incidents",
+  "No Monitor Found": "No Monitor Found",
+  "No Updates Yet": "No Updates Yet",
+  "Ongoing Incidents": "Ongoing Incidents",
+  "Pinging": "Pinging",
+  "RESOLVED": "RESOLVED",
+  "Recent Incidents": "Recent Incidents",
+  "Recent Maintenances": "Recent Maintenances",
+  "Share this monitor using a link with others": "Share this monitor using a link with others",
+  "Share": "Share",
+  "Standard": "Standard",
+  "Started %startedAt, lasted for %lastedFor": "Started %startedAt, lasted for %lastedFor",
+  "Started %startedAt, still ongoing": "Started %startedAt, still ongoing",
+  "Started %startedAt, will last for %lastedFor more": "Started %startedAt, will last for %lastedFor more",
+  "Starts %startedAt, will last for %lastedFor": "Starts %startedAt, will last for %lastedFor",
+  "Starts %startedAt": "Starts %startedAt",
+  "Status OK": "Status OK",
+  "Status": "Status",
+  "Switch to your timezone": "Switch to your timezone",
+  "Theme": "Theme",
+  "Timezone set to %tz": "Timezone set to %tz",
+  "Today": "Today",
+  "UP": "UP",
+  "Upcoming Maintenance": "Upcoming Maintenance",
+  "Updates": "Updates",
+  "Uptime": "Uptime"
 }

src/lib/locales/fr.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%status pendant %duration",
-	"14 Days": "14 jours",
-	"30 Days": "30 jours",
-	"60 Days": "60 jours",
-	"7 Days": "7 jours",
-	"90 Days": "90 jours",
-	"Availability per Component": "Disponibilité par composant",
-	"Back": "Retour",
-	"Badge Copied": "Badge copié",
-	"Badge": "Badge",
-	"Browse Events": "Parcourir les événements",
-	"Code Copied": "Code copié",
-	"Copy Code": "Copier le code",
-	"Copy Link": "Copier le lien",
-	"DEGRADED": "Dégradé",
-	"DOWN": "Hors ligne",
-	"Dark": "Sombre",
-	"Days": "Jours",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Intégrez ce moniteur dans votre application en utilisant <script> ou <iframe>.",
-	"Embed": "Intégrer",
-	"Get SVG badge for this monitor": "Obtenez un badge SVG pour ce moniteur",
-	"Get a LIVE Status for this monitor": "Obtenez un statut LIVE pour ce moniteur",
-	"IDENTIFIED": "Identifié",
-	"INVESTIGATING": "En cours d'investigation",
-	"Incident Updates": "Mises à jour des incidents",
-	"LIVE Status": "Statut LIVE",
-	"Lasted for about %lastedFor": "A duré environ %lastedFor",
-	"Light": "Clair",
-	"Link Copied": "Lien copié",
-	"MAINTENANCE": "Maintenance",
-	"MONITORING": "En surveillance",
-	"Maintenance Completed": "Maintenance terminée",
-	"Maintenance in Progress": "Maintenance en cours",
-	"Mode": "Mode",
-	"No Data": "Pas de données",
-	"No Incident in %date": "Pas d'incident le %date",
-	"No Incidents": "Pas d'incidents",
-	"No Monitor Found": "Aucun moniteur trouvé",
-	"No Updates Yet": "Pas encore de mises à jour",
-	"Ongoing Incidents": "Incidents en cours",
-	"Pinging": "Ping en cours",
-	"RESOLVED": "Résolu",
-	"Recent Incidents": "Incidents récents",
-	"Recent Maintenances": "Maintenances récentes",
-	"Share this monitor using a link with others": "Partagez ce moniteur avec un lien à d'autres personnes",
-	"Share": "Partager",
-	"Standard": "Standard",
-	"Started %startedAt, lasted for %lastedFor": "Commencé il y a environ %startedAt, a duré environ %lastedFor",
-	"Started %startedAt, still ongoing": "Commencé il y a environ %startedAt, toujours en cours",
-	"Starts %startedAt, will last for %lastedFor": "Commence dans %startedAt, durera environ %lastedFor",
-	"Starts %startedAt": "Commence dans %startedAt",
-	"Status OK": "Statut OK",
-	"Status": "Statut",
-	"Theme": "Thème",
-	"Today": "Aujourd'hui",
-	"UP": "En ligne",
-	"Upcoming Maintenance": "Maintenance à venir",
-	"Updates": "Mises à jour",
-	"Uptime": "Temps de fonctionnement"
+  "%status for %duration": "%status pendant %duration",
+  "14 Days": "14 jours",
+  "30 Days": "30 jours",
+  "60 Days": "60 jours",
+  "7 Days": "7 jours",
+  "90 Days": "90 jours",
+  "Availability per Component": "Disponibilité par composant",
+  "Back": "Retour",
+  "Badge Copied": "Badge copié",
+  "Badge": "Badge",
+  "Browse Events": "Parcourir les événements",
+  "Code Copied": "Code copié",
+  "Copy Code": "Copier le code",
+  "Copy Link": "Copier le lien",
+  "DEGRADED": "Dégradé",
+  "DOWN": "Hors ligne",
+  "Dark": "Sombre",
+  "Days": "Jours",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Intégrez ce moniteur dans votre application en utilisant <script> ou <iframe>.",
+  "Embed": "Intégrer",
+  "Get SVG badge for this monitor": "Obtenez un badge SVG pour ce moniteur",
+  "Get a LIVE Status for this monitor": "Obtenez un statut LIVE pour ce moniteur",
+  "IDENTIFIED": "Identifié",
+  "INVESTIGATING": "En cours d'investigation",
+  "Incident Updates": "Mises à jour des incidents",
+  "LIVE Status": "Statut LIVE",
+  "Lasted for about %lastedFor": "A duré environ %lastedFor",
+  "Light": "Clair",
+  "Link Copied": "Lien copié",
+  "MAINTENANCE": "Maintenance",
+  "MONITORING": "En surveillance",
+  "Maintenance Completed": "Maintenance terminée",
+  "Maintenance in Progress": "Maintenance en cours",
+  "Mode": "Mode",
+  "No Data": "Pas de données",
+  "No Incident in %date": "Pas d'incident le %date",
+  "No Incidents": "Pas d'incidents",
+  "No Monitor Found": "Aucun moniteur trouvé",
+  "No Updates Yet": "Pas encore de mises à jour",
+  "Ongoing Incidents": "Incidents en cours",
+  "Pinging": "Ping en cours",
+  "RESOLVED": "Résolu",
+  "Recent Incidents": "Incidents récents",
+  "Recent Maintenances": "Maintenances récentes",
+  "Share this monitor using a link with others": "Partagez ce moniteur avec un lien à d'autres personnes",
+  "Share": "Partager",
+  "Standard": "Standard",
+  "Started %startedAt, lasted for %lastedFor": "Commencé il y a environ %startedAt, a duré environ %lastedFor",
+  "Started %startedAt, still ongoing": "Commencé il y a environ %startedAt, toujours en cours",
+  "Started %startedAt, will last for %lastedFor more": "Commencé il y a environ %startedAt, durera environ %lastedFor de plus",
+  "Starts %startedAt, will last for %lastedFor": "Commence dans %startedAt, durera environ %lastedFor",
+  "Starts %startedAt": "Commence dans %startedAt",
+  "Status OK": "Statut OK",
+  "Status": "Statut",
+  "Switch to your timezone": "Passer à votre fuseau horaire",
+  "Theme": "Thème",
+  "Timezone set to %tz": "Fuseau horaire défini sur %tz",
+  "Today": "Aujourd'hui",
+  "UP": "En ligne",
+  "Upcoming Maintenance": "Maintenance à venir",
+  "Updates": "Mises à jour",
+  "Uptime": "Temps de fonctionnement"
 }

src/lib/locales/hi.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%duration के लिए %status",
-	"14 Days": "14 दिन",
-	"30 Days": "30 दिन",
-	"60 Days": "60 दिन",
-	"7 Days": "7 दिन",
-	"90 Days": "90 दिन",
-	"Availability per Component": "प्रत्येक घटक की उपलब्धता",
-	"Back": "वापस",
-	"Badge Copied": "बैज कॉपी किया गया",
-	"Badge": "बैज",
-	"Browse Events": "ईवेंट ब्राउज़ करें",
-	"Code Copied": "कोड कॉपी किया गया",
-	"Copy Code": "कोड कॉपी करें",
-	"Copy Link": "लिंक कॉपी करें",
-	"DEGRADED": "क्षीण",
-	"DOWN": "डाउन",
-	"Dark": "डार्क",
-	"Days": "दिन",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "इस मॉनिटर को अपनी ऐप में <script> या <iframe> का उपयोग करके एम्बेड करें।",
-	"Embed": "एम्बेड",
-	"Get SVG badge for this monitor": "इस मॉनिटर के लिए SVG बैज प्राप्त करें",
-	"Get a LIVE Status for this monitor": "इस मॉनिटर के लिए लाइव स्टेटस प्राप्त करें",
-	"IDENTIFIED": "पहचाना गया",
-	"INVESTIGATING": "जांच चल रही है",
-	"Incident Updates": "घटना अपडेट",
-	"LIVE Status": "लाइव स्टेटस",
-	"Lasted for about %lastedFor": "%lastedFor तक चला",
-	"Light": "लाइट",
-	"Link Copied": "लिंक कॉपी किया गया",
-	"MAINTENANCE": "मेंटेनेंस",
-	"MONITORING": "निगरानी",
-	"Maintenance Completed": "मेंटेनेंस पूर्ण हुआ",
-	"Maintenance in Progress": "मेंटेनेंस जारी है",
-	"Mode": "मोड",
-	"No Data": "कोई डेटा नहीं",
-	"No Incident in %date": "%date को कोई घटना नहीं",
-	"No Incidents": "कोई घटना नहीं",
-	"No Monitor Found": "कोई मॉनिटर नहीं मिला",
-	"No Updates Yet": "अभी तक कोई अपडेट नहीं",
-	"Ongoing Incidents": "चल रही घटनाएँ",
-	"Pinging": "पिंगिंग",
-	"RESOLVED": "सुलझाया गया",
-	"Recent Incidents": "हाल की घटनाएँ",
-	"Recent Maintenances": "हाल की मेंटेनेंस",
-	"Share this monitor using a link with others": "इस मॉनिटर को दूसरों के साथ लिंक के माध्यम से साझा करें",
-	"Share": "साझा करें",
-	"Standard": "मानक",
-	"Started %startedAt, lasted for %lastedFor": "%startedAt शुरू हुआ, %lastedFor तक चला",
-	"Started %startedAt, still ongoing": "%startedAt शुरू हुआ, अभी भी जारी है",
-	"Starts %startedAt, will last for %lastedFor": "%startedAt में शुरू होगा, %lastedFor तक चलेगा",
-	"Starts %startedAt": "%startedAt में शुरू होगा",
-	"Status OK": "स्थिति ठीक है",
-	"Status": "स्थिति",
-	"Theme": "थीम",
-	"Today": "आज",
-	"UP": "अप",
-	"Upcoming Maintenance": "आगामी मेंटेनेंस",
-	"Updates": "अपडेट्स",
-	"Uptime": "अपटाइम"
+  "%status for %duration": "%duration के लिए %status",
+  "14 Days": "14 दिन",
+  "30 Days": "30 दिन",
+  "60 Days": "60 दिन",
+  "7 Days": "7 दिन",
+  "90 Days": "90 दिन",
+  "Availability per Component": "प्रत्येक घटक की उपलब्धता",
+  "Back": "वापस",
+  "Badge Copied": "बैज कॉपी किया गया",
+  "Badge": "बैज",
+  "Browse Events": "ईवेंट ब्राउज़ करें",
+  "Code Copied": "कोड कॉपी किया गया",
+  "Copy Code": "कोड कॉपी करें",
+  "Copy Link": "लिंक कॉपी करें",
+  "DEGRADED": "क्षीण",
+  "DOWN": "डाउन",
+  "Dark": "डार्क",
+  "Days": "दिन",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "इस मॉनिटर को अपनी ऐप में <script> या <iframe> का उपयोग करके एम्बेड करें।",
+  "Embed": "एम्बेड",
+  "Get SVG badge for this monitor": "इस मॉनिटर के लिए SVG बैज प्राप्त करें",
+  "Get a LIVE Status for this monitor": "इस मॉनिटर के लिए लाइव स्टेटस प्राप्त करें",
+  "IDENTIFIED": "पहचाना गया",
+  "INVESTIGATING": "जांच चल रही है",
+  "Incident Updates": "घटना अपडेट",
+  "LIVE Status": "लाइव स्टेटस",
+  "Lasted for about %lastedFor": "%lastedFor तक चला",
+  "Light": "लाइट",
+  "Link Copied": "लिंक कॉपी किया गया",
+  "MAINTENANCE": "मेंटेनेंस",
+  "MONITORING": "निगरानी",
+  "Maintenance Completed": "मेंटेनेंस पूर्ण हुआ",
+  "Maintenance in Progress": "मेंटेनेंस जारी है",
+  "Mode": "मोड",
+  "No Data": "कोई डेटा नहीं",
+  "No Incident in %date": "%date को कोई घटना नहीं",
+  "No Incidents": "कोई घटना नहीं",
+  "No Monitor Found": "कोई मॉनिटर नहीं मिला",
+  "No Updates Yet": "अभी तक कोई अपडेट नहीं",
+  "Ongoing Incidents": "चल रही घटनाएँ",
+  "Pinging": "पिंगिंग",
+  "RESOLVED": "सुलझाया गया",
+  "Recent Incidents": "हाल की घटनाएँ",
+  "Recent Maintenances": "हाल की मेंटेनेंस",
+  "Share this monitor using a link with others": "इस मॉनिटर को दूसरों के साथ लिंक के माध्यम से साझा करें",
+  "Share": "साझा करें",
+  "Standard": "मानक",
+  "Started %startedAt, lasted for %lastedFor": "%startedAt शुरू हुआ, %lastedFor तक चला",
+  "Started %startedAt, still ongoing": "%startedAt शुरू हुआ, अभी भी जारी है",
+  "Started %startedAt, will last for %lastedFor more": "%startedAt शुरू होगा, %lastedFor और चलेगा",
+  "Starts %startedAt, will last for %lastedFor": "%startedAt में शुरू होगा, %lastedFor तक चलेगा",
+  "Starts %startedAt": "%startedAt में शुरू होगा",
+  "Status OK": "स्थिति ठीक है",
+  "Status": "स्थिति",
+  "Switch to your timezone": "अपने समय क्षेत्र में स्विच करें",
+  "Theme": "थीम",
+  "Timezone set to %tz": "समय क्षेत्र सेट किया गया %tz",
+  "Today": "आज",
+  "UP": "अप",
+  "Upcoming Maintenance": "आगामी मेंटेनेंस",
+  "Updates": "अपडेट्स",
+  "Uptime": "अपटाइम"
 }

src/lib/locales/ja.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%duration の間 %status",
-	"14 Days": "14日間",
-	"30 Days": "30日間",
-	"60 Days": "60日間",
-	"7 Days": "7日間",
-	"90 Days": "90日間",
-	"Availability per Component": "コンポーネントごとの可用性",
-	"Back": "戻る",
-	"Badge Copied": "バッジがコピーされました",
-	"Badge": "バッジ",
-	"Browse Events": "イベントを閲覧",
-	"Code Copied": "コードがコピーされました",
-	"Copy Code": "コードをコピー",
-	"Copy Link": "リンクをコピー",
-	"DEGRADED": "劣化",
-	"DOWN": "ダウン",
-	"Dark": "ダーク",
-	"Days": "日間",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "このモニターをアプリに <script> または <iframe> を使用して埋め込む。",
-	"Embed": "埋め込み",
-	"Get SVG badge for this monitor": "このモニターのSVGバッジを取得",
-	"Get a LIVE Status for this monitor": "このモニターのライブステータスを取得",
-	"IDENTIFIED": "識別済み",
-	"INVESTIGATING": "調査中",
-	"Incident Updates": "インシデント更新",
-	"LIVE Status": "ライブステータス",
-	"Lasted for about %lastedFor": "約 %lastedFor 続きました",
-	"Light": "ライト",
-	"Link Copied": "リンクがコピーされました",
-	"MAINTENANCE": "メンテナンス",
-	"MONITORING": "モニタリング中",
-	"Maintenance Completed": "メンテナンス完了",
-	"Maintenance in Progress": "メンテナンス中",
-	"Mode": "モード",
-	"No Data": "データなし",
-	"No Incident in %date": "%date にインシデントなし",
-	"No Incidents": "インシデントなし",
-	"No Monitor Found": "モニターが見つかりません",
-	"No Updates Yet": "まだ更新はありません",
-	"Ongoing Incidents": "進行中のインシデント",
-	"Pinging": "ピング中",
-	"RESOLVED": "解決済み",
-	"Recent Incidents": "最近のインシデント",
-	"Recent Maintenances": "最近のメンテナンス",
-	"Share this monitor using a link with others": "このモニターをリンクで他の人と共有",
-	"Share": "共有",
-	"Standard": "標準",
-	"Started %startedAt, lasted for %lastedFor": "%startedAt 前に開始し、約 %lastedFor 続きました",
-	"Started %startedAt, still ongoing": "%startedAt 前に開始し、まだ進行中です",
-	"Starts %startedAt, will last for %lastedFor": "%startedAt 後に開始し、約 %lastedFor 続きます",
-	"Starts %startedAt": "%startedAt 後に開始",
-	"Status OK": "ステータス正常",
-	"Status": "ステータス",
-	"Theme": "テーマ",
-	"Today": "今日",
-	"UP": "稼働中",
-	"Upcoming Maintenance": "今後のメンテナンス",
-	"Updates": "更新",
-	"Uptime": "稼働時間"
+  "%status for %duration": "%duration の間 %status",
+  "14 Days": "14日間",
+  "30 Days": "30日間",
+  "60 Days": "60日間",
+  "7 Days": "7日間",
+  "90 Days": "90日間",
+  "Availability per Component": "コンポーネントごとの可用性",
+  "Back": "戻る",
+  "Badge Copied": "バッジがコピーされました",
+  "Badge": "バッジ",
+  "Browse Events": "イベントを閲覧",
+  "Code Copied": "コードがコピーされました",
+  "Copy Code": "コードをコピー",
+  "Copy Link": "リンクをコピー",
+  "DEGRADED": "劣化",
+  "DOWN": "ダウン",
+  "Dark": "ダーク",
+  "Days": "日間",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "このモニターをアプリに <script> または <iframe> を使用して埋め込む。",
+  "Embed": "埋め込み",
+  "Get SVG badge for this monitor": "このモニターのSVGバッジを取得",
+  "Get a LIVE Status for this monitor": "このモニターのライブステータスを取得",
+  "IDENTIFIED": "識別済み",
+  "INVESTIGATING": "調査中",
+  "Incident Updates": "インシデント更新",
+  "LIVE Status": "ライブステータス",
+  "Lasted for about %lastedFor": "約 %lastedFor 続きました",
+  "Light": "ライト",
+  "Link Copied": "リンクがコピーされました",
+  "MAINTENANCE": "メンテナンス",
+  "MONITORING": "モニタリング中",
+  "Maintenance Completed": "メンテナンス完了",
+  "Maintenance in Progress": "メンテナンス中",
+  "Mode": "モード",
+  "No Data": "データなし",
+  "No Incident in %date": "%date にインシデントなし",
+  "No Incidents": "インシデントなし",
+  "No Monitor Found": "モニターが見つかりません",
+  "No Updates Yet": "まだ更新はありません",
+  "Ongoing Incidents": "進行中のインシデント",
+  "Pinging": "ピング中",
+  "RESOLVED": "解決済み",
+  "Recent Incidents": "最近のインシデント",
+  "Recent Maintenances": "最近のメンテナンス",
+  "Share this monitor using a link with others": "このモニターをリンクで他の人と共有",
+  "Share": "共有",
+  "Standard": "標準",
+  "Started %startedAt, lasted for %lastedFor": "%startedAt 前に開始し、約 %lastedFor 続きました",
+  "Started %startedAt, still ongoing": "%startedAt 前に開始し、まだ進行中です",
+  "Started %startedAt, will last for %lastedFor more": "%startedAt 前に開始し、さらに %lastedFor 続きます",
+  "Starts %startedAt, will last for %lastedFor": "%startedAt 後に開始し、約 %lastedFor 続きます",
+  "Starts %startedAt": "%startedAt 後に開始",
+  "Status OK": "ステータス正常",
+  "Status": "ステータス",
+  "Switch to your timezone": "あなたのタイムゾーンに切り替え",
+  "Theme": "テーマ",
+  "Timezone set to %tz": "タイムゾーンを %tz に設定",
+  "Today": "今日",
+  "UP": "稼働中",
+  "Upcoming Maintenance": "今後のメンテナンス",
+  "Updates": "更新",
+  "Uptime": "稼働時間"
 }

src/lib/locales/ko.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%duration 동안 %status 상태였음",
-	"14 Days": "14 일",
-	"30 Days": "30 ",
-	"60 Days": "60 일",
-	"7 Days": "7 일",
-	"90 Days": "90 일",
-	"Availability per Component": "항목당 가용성",
-	"Back": "뒤로",
-	"Badge Copied": "배지 복사됨",
-	"Badge": "배지",
-	"Browse Events": "이벤트 찾아보기",
-	"Code Copied": "소스코드 복사됨",
-	"Copy Code": "소스코드 복사",
-	"Copy Link": "링크 복사",
-	"DEGRADED": "성능 저하됨",
-	"DOWN": "중단",
-	"Dark": "다크",
-	"Days": "일",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "<script> 나 <iframe> 태그를 사용하여 내 앱에 이 모니터링을 임베딩 해보세요.",
-	"Embed": "임베드",
-	"Get SVG badge for this monitor": "이 모니터링 항목에 대한 SVG 배지를 구해보세요.",
-	"Get a LIVE Status for this monitor": "이 모니터링 항목에 대한 실시간 상태를 구해보세요.",
-	"IDENTIFIED": "확인됨",
-	"INVESTIGATING": "조사 중",
-	"Incident Updates": "사건 보고서",
-	"LIVE Status": "실시간 상태",
-	"Lasted for about %lastedFor": "%lastedFor 동안 지속",
-	"Light": "라이트",
-	"Link Copied": "링크 복사됨",
-	"MAINTENANCE": "유지보수",
-	"MONITORING": "감시 중",
-	"Maintenance Completed": "유지보수 완료",
-	"Maintenance in Progress": "유지보수 진행 중",
-	"Mode": "모드",
-	"No Data": "데이터 없음",
-	"No Incident in %date": "%date 에는 아무 사건도 없었음",
-	"No Incidents": "사건 없음",
-	"No Monitor Found": "모니터링 항목을 찾을 수 없음",
-	"No Updates Yet": "아직 아무 업데이트도 없음",
-	"Ongoing Incidents": "진행중 사건",
-	"Pinging": "핑 요청",
-	"RESOLVED": "해결됨",
-	"Recent Incidents": "최근 사건",
-	"Recent Maintenances": "최근 유지보수",
-	"Share this monitor using a link with others": "링크를 사용하여 다른 사람들과 이 모니터링 데이터를 공유해보세요",
-	"Share": "공유",
-	"Standard": "기본",
-	"Started %startedAt, lasted for %lastedFor": "%startedAt 전에 시작되었으며, %lastedFor 동안 지속되었습니다",
-	"Started %startedAt, still ongoing": "%startedAt 전에 시작되었으며, 아직 진행중입니다",
-	"Starts %startedAt, will last for %lastedFor": "%startedAt 전에 시작되었으며, %lastedFor 까지 지속될 예정입니다",
-	"Starts %startedAt": "%startedAt 에 시작되었습니다",
-	"Status OK": "양호",
-	"Status": "상태",
-	"Theme": "테마",
-	"Today": "오늘",
-	"UP": "작동 중",
-	"Upcoming Maintenance": "예정된 유지보수",
-	"Updates": "업데이트",
-	"Uptime": "업타임"
+  "%status for %duration": "%duration 동안 %status 상태였음",
+  "14 Days": "14 일",
+  "30 Days": "30 ",
+  "60 Days": "60 일",
+  "7 Days": "7 일",
+  "90 Days": "90 일",
+  "Availability per Component": "항목당 가용성",
+  "Back": "뒤로",
+  "Badge Copied": "배지 복사됨",
+  "Badge": "배지",
+  "Browse Events": "이벤트 찾아보기",
+  "Code Copied": "소스코드 복사됨",
+  "Copy Code": "소스코드 복사",
+  "Copy Link": "링크 복사",
+  "DEGRADED": "성능 저하됨",
+  "DOWN": "중단",
+  "Dark": "다크",
+  "Days": "일",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "<script> 나 <iframe> 태그를 사용하여 내 앱에 이 모니터링을 임베딩 해보세요.",
+  "Embed": "임베드",
+  "Get SVG badge for this monitor": "이 모니터링 항목에 대한 SVG 배지를 구해보세요.",
+  "Get a LIVE Status for this monitor": "이 모니터링 항목에 대한 실시간 상태를 구해보세요.",
+  "IDENTIFIED": "확인됨",
+  "INVESTIGATING": "조사 중",
+  "Incident Updates": "사건 보고서",
+  "LIVE Status": "실시간 상태",
+  "Lasted for about %lastedFor": "%lastedFor 동안 지속",
+  "Light": "라이트",
+  "Link Copied": "링크 복사됨",
+  "MAINTENANCE": "유지보수",
+  "MONITORING": "감시 중",
+  "Maintenance Completed": "유지보수 완료",
+  "Maintenance in Progress": "유지보수 진행 중",
+  "Mode": "모드",
+  "No Data": "데이터 없음",
+  "No Incident in %date": "%date 에는 아무 사건도 없었음",
+  "No Incidents": "사건 없음",
+  "No Monitor Found": "모니터링 항목을 찾을 수 없음",
+  "No Updates Yet": "아직 아무 업데이트도 없음",
+  "Ongoing Incidents": "진행중 사건",
+  "Pinging": "핑 요청",
+  "RESOLVED": "해결됨",
+  "Recent Incidents": "최근 사건",
+  "Recent Maintenances": "최근 유지보수",
+  "Share this monitor using a link with others": "링크를 사용하여 다른 사람들과 이 모니터링 데이터를 공유해보세요",
+  "Share": "공유",
+  "Standard": "기본",
+  "Started %startedAt, lasted for %lastedFor": "%startedAt 전에 시작되었으며, %lastedFor 동안 지속되었습니다",
+  "Started %startedAt, still ongoing": "%startedAt 전에 시작되었으며, 아직 진행중입니다",
+  "Started %startedAt, will last for %lastedFor more": "%startedAt 전에 시작되었으며, %lastedFor 더 지속될 예정입니다",
+  "Starts %startedAt, will last for %lastedFor": "%startedAt 전에 시작되었으며, %lastedFor 까지 지속될 예정입니다",
+  "Starts %startedAt": "%startedAt 에 시작되었습니다",
+  "Status OK": "양호",
+  "Status": "상태",
+  "Switch to your timezone": "귀하의 시간대로 변경",
+  "Theme": "테마",
+  "Timezone set to %tz": "시간대 설정 %tz",
+  "Today": "오늘",
+  "UP": "작동 중",
+  "Upcoming Maintenance": "예정된 유지보수",
+  "Updates": "업데이트",
+  "Uptime": "업타임"
 }

src/lib/locales/nb-NO.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%status i %duration",
-	"14 Days": "14 dager",
-	"30 Days": "30 dager",
-	"60 Days": "60 dager",
-	"7 Days": "7 dager",
-	"90 Days": "90 dager",
-	"Availability per Component": "Tilgjengelighet per komponent",
-	"Back": "Tilbake",
-	"Badge Copied": "Merke kopiert",
-	"Badge": "Merke",
-	"Browse Events": "Bla gjennom hendelser",
-	"Code Copied": "Kode kopiert",
-	"Copy Code": "Kopier kode",
-	"Copy Link": "Kopier lenke",
-	"DEGRADED": "NEDSATT",
-	"DOWN": "NEDE",
-	"Dark": "Mørk",
-	"Days": "Dager",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Bygg inn denne monitoren ved å bruke <script> eller <iframe> i appen din.",
-	"Embed": "Bygg inn",
-	"Get SVG badge for this monitor": "Hent SVG-merke for denne monitoren",
-	"Get a LIVE Status for this monitor": "Få en LIVE-status for denne monitoren",
-	"IDENTIFIED": "IDENTIFISERT",
-	"INVESTIGATING": "UNDERSØKER",
-	"Incident Updates": "Hendelsesoppdateringer",
-	"LIVE Status": "LIVE-status",
-	"Lasted for about %lastedFor": "Varte i omtrent %lastedFor",
-	"Light": "Lys",
-	"Link Copied": "Lenke kopiert",
-	"MAINTENANCE": "VEDLIKEHOLD",
-	"MONITORING": "OVERVÅKER",
-	"Maintenance Completed": "Vedlikehold fullført",
-	"Maintenance in Progress": "Vedlikehold pågår",
-	"Mode": "Modus",
-	"No Data": "Ingen data",
-	"No Incident in %date": "Ingen hendelser på %date",
-	"No Incidents": "Ingen hendelser",
-	"No Monitor Found": "Ingen monitor funnet",
-	"No Updates Yet": "Ingen oppdateringer ennå",
-	"Ongoing Incidents": "Pågående hendelser",
-	"Pinging": "Pinger",
-	"RESOLVED": "LØST",
-	"Recent Incidents": "Nylige hendelser",
-	"Recent Maintenances": "Nylige vedlikehold",
-	"Share this monitor using a link with others": "Del denne monitoren med andre via lenke",
-	"Share": "Del",
-	"Standard": "Standard",
-	"Started %startedAt, lasted for %lastedFor": "Startet %startedAt, varte i %lastedFor",
-	"Started %startedAt, still ongoing": "Startet %startedAt, fortsatt pågår",
-	"Starts %startedAt, will last for %lastedFor": "Starter %startedAt, vil vare i %lastedFor",
-	"Starts %startedAt": "Starter %startedAt",
-	"Status OK": "Status OK",
-	"Status": "Status",
-	"Theme": "Tema",
-	"Today": "I dag",
-	"UP": "OPPE",
-	"Upcoming Maintenance": "Kommende vedlikehold",
-	"Updates": "Oppdateringer",
-	"Uptime": "Oppetid"
+  "%status for %duration": "%status i %duration",
+  "14 Days": "14 dager",
+  "30 Days": "30 dager",
+  "60 Days": "60 dager",
+  "7 Days": "7 dager",
+  "90 Days": "90 dager",
+  "Availability per Component": "Tilgjengelighet per komponent",
+  "Back": "Tilbake",
+  "Badge Copied": "Merke kopiert",
+  "Badge": "Merke",
+  "Browse Events": "Bla gjennom hendelser",
+  "Code Copied": "Kode kopiert",
+  "Copy Code": "Kopier kode",
+  "Copy Link": "Kopier lenke",
+  "DEGRADED": "NEDSATT",
+  "DOWN": "NEDE",
+  "Dark": "Mørk",
+  "Days": "Dager",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Bygg inn denne monitoren ved å bruke <script> eller <iframe> i appen din.",
+  "Embed": "Bygg inn",
+  "Get SVG badge for this monitor": "Hent SVG-merke for denne monitoren",
+  "Get a LIVE Status for this monitor": "Få en LIVE-status for denne monitoren",
+  "IDENTIFIED": "IDENTIFISERT",
+  "INVESTIGATING": "UNDERSØKER",
+  "Incident Updates": "Hendelsesoppdateringer",
+  "LIVE Status": "LIVE-status",
+  "Lasted for about %lastedFor": "Varte i omtrent %lastedFor",
+  "Light": "Lys",
+  "Link Copied": "Lenke kopiert",
+  "MAINTENANCE": "VEDLIKEHOLD",
+  "MONITORING": "OVERVÅKER",
+  "Maintenance Completed": "Vedlikehold fullført",
+  "Maintenance in Progress": "Vedlikehold pågår",
+  "Mode": "Modus",
+  "No Data": "Ingen data",
+  "No Incident in %date": "Ingen hendelser på %date",
+  "No Incidents": "Ingen hendelser",
+  "No Monitor Found": "Ingen monitor funnet",
+  "No Updates Yet": "Ingen oppdateringer ennå",
+  "Ongoing Incidents": "Pågående hendelser",
+  "Pinging": "Pinger",
+  "RESOLVED": "LØST",
+  "Recent Incidents": "Nylige hendelser",
+  "Recent Maintenances": "Nylige vedlikehold",
+  "Share this monitor using a link with others": "Del denne monitoren med andre via lenke",
+  "Share": "Del",
+  "Standard": "Standard",
+  "Started %startedAt, lasted for %lastedFor": "Startet %startedAt, varte i %lastedFor",
+  "Started %startedAt, still ongoing": "Startet %startedAt, fortsatt pågår",
+  "Started %startedAt, will last for %lastedFor more": "Startet %startedAt, vil vare i %lastedFor til",
+  "Starts %startedAt, will last for %lastedFor": "Starter %startedAt, vil vare i %lastedFor",
+  "Starts %startedAt": "Starter %startedAt",
+  "Status OK": "Status OK",
+  "Status": "Status",
+  "Switch to your timezone": "Bytt til din tidssone",
+  "Theme": "Tema",
+  "Timezone set to %tz": "Tidssone satt til %tz",
+  "Today": "I dag",
+  "UP": "OPPE",
+  "Upcoming Maintenance": "Kommende vedlikehold",
+  "Updates": "Oppdateringer",
+  "Uptime": "Oppetid"
 }

src/lib/locales/nl.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%status voor %duration",
-	"14 Days": "14 dagen",
-	"30 Days": "30 dagen",
-	"60 Days": "60 dagen",
-	"7 Days": "7 dagen",
-	"90 Days": "90 dagen",
-	"Availability per Component": "Beschikbaarheid per component",
-	"Back": "Terug",
-	"Badge Copied": "Badge gekopieerd",
-	"Badge": "Badge",
-	"Browse Events": "Evenementen bekijken",
-	"Code Copied": "Code gekopieerd",
-	"Copy Code": "Kopieer code",
-	"Copy Link": "Kopieer link",
-	"DEGRADED": "BEPERKT",
-	"DOWN": "NIET BEREIKBAAR",
-	"Dark": "Donker",
-	"Days": "Dagen",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Sluit deze monitor in met behulp van <script> of <iframe> in je app.",
-	"Embed": "Insluiten",
-	"Get SVG badge for this monitor": "SVG-badge ophalen voor deze monitor",
-	"Get a LIVE Status for this monitor": "LIVE-status ophalen voor deze monitor",
-	"IDENTIFIED": "GEIDENTIFICEERD",
-	"INVESTIGATING": "ONDERZOEK BEZIG",
-	"Incident Updates": "Incident updates",
-	"LIVE Status": "LIVE status",
-	"Lasted for about %lastedFor": "Duurde ongeveer %lastedFor",
-	"Light": "Licht",
-	"Link Copied": "Link gekopieerd",
-	"MAINTENANCE": "ONDERHOUD",
-	"MONITORING": "MONITOREN",
-	"Maintenance Completed": "Onderhoud voltooid",
-	"Maintenance in Progress": "Onderhoud bezig",
-	"Mode": "Modus",
-	"No Data": "Geen gegevens",
-	"No Incident in %date": "Geen incident op %date",
-	"No Incidents": "Geen incidenten",
-	"No Monitor Found": "Geen monitor gevonden",
-	"No Updates Yet": "Nog geen updates",
-	"Ongoing Incidents": "Lopende incidenten",
-	"Pinging": "Pingen",
-	"RESOLVED": "OPGELOST",
-	"Recent Incidents": "Recente incidenten",
-	"Recent Maintenances": "Recente onderhoudsbeurten",
-	"Share this monitor using a link with others": "Deel deze monitor met anderen via een link",
-	"Share": "Delen",
-	"Standard": "Standaard",
-	"Started %startedAt, lasted for %lastedFor": "Begonnen ongeveer %startedAt geleden, duurde ongeveer %lastedFor",
-	"Started %startedAt, still ongoing": "Begonnen ongeveer %startedAt geleden, nog steeds bezig",
-	"Starts %startedAt, will last for %lastedFor": "Begint over %startedAt, zal ongeveer %lastedFor duren",
-	"Starts %startedAt": "Begint over %startedAt",
-	"Status OK": "Status OK",
-	"Status": "Status",
-	"Theme": "Thema",
-	"Today": "Vandaag",
-	"UP": "BEREIKBAAR",
-	"Upcoming Maintenance": "Aankomend onderhoud",
-	"Updates": "Updates",
-	"Uptime": "Uptime"
+  "%status for %duration": "%status voor %duration",
+  "14 Days": "14 dagen",
+  "30 Days": "30 dagen",
+  "60 Days": "60 dagen",
+  "7 Days": "7 dagen",
+  "90 Days": "90 dagen",
+  "Availability per Component": "Beschikbaarheid per component",
+  "Back": "Terug",
+  "Badge Copied": "Badge gekopieerd",
+  "Badge": "Badge",
+  "Browse Events": "Evenementen bekijken",
+  "Code Copied": "Code gekopieerd",
+  "Copy Code": "Kopieer code",
+  "Copy Link": "Kopieer link",
+  "DEGRADED": "BEPERKT",
+  "DOWN": "NIET BEREIKBAAR",
+  "Dark": "Donker",
+  "Days": "Dagen",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Sluit deze monitor in met behulp van <script> of <iframe> in je app.",
+  "Embed": "Insluiten",
+  "Get SVG badge for this monitor": "SVG-badge ophalen voor deze monitor",
+  "Get a LIVE Status for this monitor": "LIVE-status ophalen voor deze monitor",
+  "IDENTIFIED": "GEIDENTIFICEERD",
+  "INVESTIGATING": "ONDERZOEK BEZIG",
+  "Incident Updates": "Incident updates",
+  "LIVE Status": "LIVE status",
+  "Lasted for about %lastedFor": "Duurde ongeveer %lastedFor",
+  "Light": "Licht",
+  "Link Copied": "Link gekopieerd",
+  "MAINTENANCE": "ONDERHOUD",
+  "MONITORING": "MONITOREN",
+  "Maintenance Completed": "Onderhoud voltooid",
+  "Maintenance in Progress": "Onderhoud bezig",
+  "Mode": "Modus",
+  "No Data": "Geen gegevens",
+  "No Incident in %date": "Geen incident op %date",
+  "No Incidents": "Geen incidenten",
+  "No Monitor Found": "Geen monitor gevonden",
+  "No Updates Yet": "Nog geen updates",
+  "Ongoing Incidents": "Lopende incidenten",
+  "Pinging": "Pingen",
+  "RESOLVED": "OPGELOST",
+  "Recent Incidents": "Recente incidenten",
+  "Recent Maintenances": "Recente onderhoudsbeurten",
+  "Share this monitor using a link with others": "Deel deze monitor met anderen via een link",
+  "Share": "Delen",
+  "Standard": "Standaard",
+  "Started %startedAt, lasted for %lastedFor": "Begonnen ongeveer %startedAt geleden, duurde ongeveer %lastedFor",
+  "Started %startedAt, still ongoing": "Begonnen ongeveer %startedAt geleden, nog steeds bezig",
+  "Started %startedAt, will last for %lastedFor more": "Begint %startedAt, zal nog ongeveer %lastedFor duren",
+  "Starts %startedAt, will last for %lastedFor": "Begint over %startedAt, zal ongeveer %lastedFor duren",
+  "Starts %startedAt": "Begint over %startedAt",
+  "Status OK": "Status OK",
+  "Status": "Status",
+  "Switch to your timezone": "Schakel over naar je tijdzone",
+  "Theme": "Thema",
+  "Timezone set to %tz": "Tijdzone ingesteld op %tz",
+  "Today": "Vandaag",
+  "UP": "BEREIKBAAR",
+  "Upcoming Maintenance": "Aankomend onderhoud",
+  "Updates": "Updates",
+  "Uptime": "Uptime"
 }

src/lib/locales/pt-BR.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%status por %duration",
-	"14 Days": "14 Dias",
-	"30 Days": "30 Dias",
-	"60 Days": "60 Dias",
-	"7 Days": "7 Dias",
-	"90 Days": "90 Dias",
-	"Availability per Component": "Disponibilidade por Componente",
-	"Back": "Voltar",
-	"Badge Copied": "Emblema Copiado",
-	"Badge": "Emblema",
-	"Browse Events": "Navegar Eventos",
-	"Code Copied": "Código Copiado",
-	"Copy Code": "Copiar Código",
-	"Copy Link": "Copiar Link",
-	"DEGRADED": "FALHA",
-	"DOWN": "INDISPONÍVEL",
-	"Dark": "Escuro",
-	"Days": "Dias",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Incorporar este monitor ao seu aplicativo utilizando <script> ou <iframe>.",
-	"Embed": "Incorporar",
-	"Get SVG badge for this monitor": "Obter emblema SVG deste monitor",
-	"Get a LIVE Status for this monitor": "Obter indicador de status AO VIVO",
-	"IDENTIFIED": "IDENTIFICADO",
-	"INVESTIGATING": "INVESTIGANDO",
-	"Incident Updates": "Atualizações do Incidente",
-	"LIVE Status": "Status AO VIVO",
-	"Lasted for about %lastedFor": "Durou aproximadamente %lastedFor",
-	"Light": "Claro",
-	"Link Copied": "Link Copiado",
-	"MAINTENANCE": "MANUTENÇÃO",
-	"MONITORING": "MONITORANDO",
-	"Maintenance Completed": "Manutenção Concluída",
-	"Maintenance in Progress": "Manutenção em Progresso",
-	"Mode": "Modo",
-	"No Data": "Sem dados",
-	"No Incident in %date": "Nenhum incidente em %date",
-	"No Incidents": "Sem Incidentes",
-	"No Monitor Found": "Nenhum monitor encontrado",
-	"No Updates Yet": "Nenhuma atualização ainda",
-	"Ongoing Incidents": "Incidentes em Andamento",
-	"Pinging": "Animado",
-	"RESOLVED": "RESOLVIDO",
-	"Recent Incidents": "Incidentes Recentes",
-	"Recent Maintenances": "Manutenções Recentes",
-	"Share this monitor using a link with others": "Compartilhar este monitor através do link",
-	"Share": "Compartilhar",
-	"Standard": "Padrão",
-	"Started %startedAt, lasted for %lastedFor": "Ocorreu faz %startedAt e durou %lastedFor",
-	"Started %startedAt, still ongoing": "Iniciou faz %startedAt, ainda em andamento",
-	"Starts %startedAt, will last for %lastedFor": "Terá início em %startedAt, com duração de %lastedFor",
-	"Starts %startedAt": "Inicia em %startedAt",
-	"Status OK": "Status OK",
-	"Status": "Status",
-	"Theme": "Tema",
-	"Today": "Hoje",
-	"UP": "OPERACIONAL",
-	"Upcoming Maintenance": "Manutenção Agendada",
-	"Updates": "Atualizações",
-	"Uptime": "Tempo de Atividade"
+  "%status for %duration": "%status por %duration",
+  "14 Days": "14 Dias",
+  "30 Days": "30 Dias",
+  "60 Days": "60 Dias",
+  "7 Days": "7 Dias",
+  "90 Days": "90 Dias",
+  "Availability per Component": "Disponibilidade por Componente",
+  "Back": "Voltar",
+  "Badge Copied": "Emblema Copiado",
+  "Badge": "Emblema",
+  "Browse Events": "Navegar Eventos",
+  "Code Copied": "Código Copiado",
+  "Copy Code": "Copiar Código",
+  "Copy Link": "Copiar Link",
+  "DEGRADED": "FALHA",
+  "DOWN": "INDISPONÍVEL",
+  "Dark": "Escuro",
+  "Days": "Dias",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Incorporar este monitor ao seu aplicativo utilizando <script> ou <iframe>.",
+  "Embed": "Incorporar",
+  "Get SVG badge for this monitor": "Obter emblema SVG deste monitor",
+  "Get a LIVE Status for this monitor": "Obter indicador de status AO VIVO",
+  "IDENTIFIED": "IDENTIFICADO",
+  "INVESTIGATING": "INVESTIGANDO",
+  "Incident Updates": "Atualizações do Incidente",
+  "LIVE Status": "Status AO VIVO",
+  "Lasted for about %lastedFor": "Durou aproximadamente %lastedFor",
+  "Light": "Claro",
+  "Link Copied": "Link Copiado",
+  "MAINTENANCE": "MANUTENÇÃO",
+  "MONITORING": "MONITORANDO",
+  "Maintenance Completed": "Manutenção Concluída",
+  "Maintenance in Progress": "Manutenção em Progresso",
+  "Mode": "Modo",
+  "No Data": "Sem dados",
+  "No Incident in %date": "Nenhum incidente em %date",
+  "No Incidents": "Sem Incidentes",
+  "No Monitor Found": "Nenhum monitor encontrado",
+  "No Updates Yet": "Nenhuma atualização ainda",
+  "Ongoing Incidents": "Incidentes em Andamento",
+  "Pinging": "Animado",
+  "RESOLVED": "RESOLVIDO",
+  "Recent Incidents": "Incidentes Recentes",
+  "Recent Maintenances": "Manutenções Recentes",
+  "Share this monitor using a link with others": "Compartilhar este monitor através do link",
+  "Share": "Compartilhar",
+  "Standard": "Padrão",
+  "Started %startedAt, lasted for %lastedFor": "Ocorreu faz %startedAt e durou %lastedFor",
+  "Started %startedAt, still ongoing": "Iniciou faz %startedAt, ainda em andamento",
+  "Started %startedAt, will last for %lastedFor more": "Iniciará em %startedAt, durará mais %lastedFor",
+  "Starts %startedAt, will last for %lastedFor": "Terá início em %startedAt, com duração de %lastedFor",
+  "Starts %startedAt": "Inicia em %startedAt",
+  "Status OK": "Status OK",
+  "Status": "Status",
+  "Switch to your timezone": "Mudar para o seu fuso horário",
+  "Theme": "Tema",
+  "Timezone set to %tz": "Fuso horário definido para %tz",
+  "Today": "Hoje",
+  "UP": "OPERACIONAL",
+  "Upcoming Maintenance": "Manutenção Agendada",
+  "Updates": "Atualizações",
+  "Uptime": "Tempo de Atividade"
 }

src/lib/locales/ru.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%status в течение %duration",
-	"14 Days": "14 Дней",
-	"30 Days": "30 Дней",
-	"60 Days": "60 Дней",
-	"7 Days": "7 Дней",
-	"90 Days": "90 Дней",
-	"Availability per Component": "Доступность по компонентам",
-	"Back": "Назад",
-	"Badge Copied": "Значок скопирован",
-	"Badge": "Значок",
-	"Browse Events": "Просмотр событий",
-	"Code Copied": "Код скопирован",
-	"Copy Code": "Копировать код",
-	"Copy Link": "Копировать ссылку",
-	"DEGRADED": "УХУДШЕНО",
-	"DOWN": "НЕДОСТУПНО",
-	"Dark": "Темная",
-	"Days": "Дней",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Встройте этот монитор используя <script> или <iframe> в ваше приложение.",
-	"Embed": "Встроить",
-	"Get SVG badge for this monitor": "Получить SVG значок для этого монитора",
-	"Get a LIVE Status for this monitor": "Получить ЖИВОЙ статус для этого монитора",
-	"IDENTIFIED": "ВЫЯВЛЕНО",
-	"INVESTIGATING": "ИССЛЕДУЕТСЯ",
-	"Incident Updates": "Обновления инцидента",
-	"LIVE Status": "ЖИВОЙ статус",
-	"Lasted for about %lastedFor": "Длилось около %lastedFor",
-	"Light": "Светлая",
-	"Link Copied": "Ссылка скопирована",
-	"MAINTENANCE": "ОБСЛУЖИВАНИЕ",
-	"MONITORING": "МОНИТОРИНГ",
-	"Maintenance Completed": "Техническое обслуживание завершено",
-	"Maintenance in Progress": "Техническое обслуживание",
-	"Mode": "Режим",
-	"No Data": "Нет данных",
-	"No Incident in %date": "Нет инцидентов на %date",
-	"No Incidents": "Нет инцидентов",
-	"No Monitor Found": "Монитор не найден",
-	"No Updates Yet": "Пока нет обновлений",
-	"Ongoing Incidents": "Текущие инциденты",
-	"Pinging": "Пингуется",
-	"RESOLVED": "РЕШЕНО",
-	"Recent Incidents": "Недавние инциденты",
-	"Recent Maintenances": "Последние обслуживания",
-	"Share this monitor using a link with others": "Поделитесь этим монитором с другими по ссылке",
-	"Share": "Поделиться",
-	"Standard": "Стандартная",
-	"Started %startedAt, lasted for %lastedFor": "Началось около %startedAt назад, длилось около %lastedFor",
-	"Started %startedAt, still ongoing": "Началось около %startedAt назад, все еще продолжается",
-	"Starts %startedAt, will last for %lastedFor": "Начнется через %startedAt, продлится около %lastedFor",
-	"Starts %startedAt": "Начнется через %startedAt",
-	"Status OK": "Статус ОК",
-	"Status": "Статус",
-	"Theme": "Тема",
-	"Today": "Сегодня",
-	"UP": "РАБОТАЕТ",
-	"Upcoming Maintenance": "Предстоящее техническое обслуживание",
-	"Updates": "Обновления",
-	"Uptime": "Время работы"
+  "%status for %duration": "%status в течение %duration",
+  "14 Days": "14 Дней",
+  "30 Days": "30 Дней",
+  "60 Days": "60 Дней",
+  "7 Days": "7 Дней",
+  "90 Days": "90 Дней",
+  "Availability per Component": "Доступность по компонентам",
+  "Back": "Назад",
+  "Badge Copied": "Значок скопирован",
+  "Badge": "Значок",
+  "Browse Events": "Просмотр событий",
+  "Code Copied": "Код скопирован",
+  "Copy Code": "Копировать код",
+  "Copy Link": "Копировать ссылку",
+  "DEGRADED": "УХУДШЕНО",
+  "DOWN": "НЕДОСТУПНО",
+  "Dark": "Темная",
+  "Days": "Дней",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Встройте этот монитор используя <script> или <iframe> в ваше приложение.",
+  "Embed": "Встроить",
+  "Get SVG badge for this monitor": "Получить SVG значок для этого монитора",
+  "Get a LIVE Status for this monitor": "Получить ЖИВОЙ статус для этого монитора",
+  "IDENTIFIED": "ВЫЯВЛЕНО",
+  "INVESTIGATING": "ИССЛЕДУЕТСЯ",
+  "Incident Updates": "Обновления инцидента",
+  "LIVE Status": "ЖИВОЙ статус",
+  "Lasted for about %lastedFor": "Длилось около %lastedFor",
+  "Light": "Светлая",
+  "Link Copied": "Ссылка скопирована",
+  "MAINTENANCE": "ОБСЛУЖИВАНИЕ",
+  "MONITORING": "МОНИТОРИНГ",
+  "Maintenance Completed": "Техническое обслуживание завершено",
+  "Maintenance in Progress": "Техническое обслуживание",
+  "Mode": "Режим",
+  "No Data": "Нет данных",
+  "No Incident in %date": "Нет инцидентов на %date",
+  "No Incidents": "Нет инцидентов",
+  "No Monitor Found": "Монитор не найден",
+  "No Updates Yet": "Пока нет обновлений",
+  "Ongoing Incidents": "Текущие инциденты",
+  "Pinging": "Пингуется",
+  "RESOLVED": "РЕШЕНО",
+  "Recent Incidents": "Недавние инциденты",
+  "Recent Maintenances": "Последние обслуживания",
+  "Share this monitor using a link with others": "Поделитесь этим монитором с другими по ссылке",
+  "Share": "Поделиться",
+  "Standard": "Стандартная",
+  "Started %startedAt, lasted for %lastedFor": "Началось около %startedAt назад, длилось около %lastedFor",
+  "Started %startedAt, still ongoing": "Началось около %startedAt назад, все еще продолжается",
+  "Started %startedAt, will last for %lastedFor more": "Начнется около %startedAt, продлится еще около %lastedFor",
+  "Starts %startedAt, will last for %lastedFor": "Начнется через %startedAt, продлится около %lastedFor",
+  "Starts %startedAt": "Начнется через %startedAt",
+  "Status OK": "Статус ОК",
+  "Status": "Статус",
+  "Switch to your timezone": "Переключиться на ваш часовой пояс",
+  "Theme": "Тема",
+  "Timezone set to %tz": "Часовой пояс установлен на %tz",
+  "Today": "Сегодня",
+  "UP": "РАБОТАЕТ",
+  "Upcoming Maintenance": "Предстоящее техническое обслуживание",
+  "Updates": "Обновления",
+  "Uptime": "Время работы"
 }

src/lib/locales/tr.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%duration boyunca %status",
-	"14 Days": "14 Gün",
-	"30 Days": "30 Gün",
-	"60 Days": "60 Gün",
-	"7 Days": "7 Gün",
-	"90 Days": "90 Gün",
-	"Availability per Component": "Bileşen Kullanılabilirliği",
-	"Back": "Geri",
-	"Badge Copied": "Rozet Kopyalandı",
-	"Badge": "Rozet",
-	"Browse Events": "Etkinliklere Göz At",
-	"Code Copied": "Kod Kopyalandı",
-	"Copy Code": "Kodu Kopyala",
-	"Copy Link": "Bağlantıyı Kopyala",
-	"DEGRADED": "BOZUK",
-	"DOWN": "ÇALIŞMIYOR",
-	"Dark": "Koyu",
-	"Days": "Günler",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Uygulamanıza <script> veya <iframe> kullanarak bu hizmeti yerleştirin.",
-	"Embed": "Yerleştir",
-	"Get SVG badge for this monitor": "Bu servis için SVG rozet alın",
-	"Get a LIVE Status for this monitor": "Bu servis için CANLI Durum alın",
-	"IDENTIFIED": "TANIMLANDI",
-	"INVESTIGATING": "İNCELENİYOR",
-	"Incident Updates": "Olay Güncellemeleri",
-	"LIVE Status": "CANLI Durum",
-	"Lasted for about %lastedFor": "%lastedFor sürdü",
-	"Light": "Açık",
-	"Link Copied": "Bağlantı Kopyalandı",
-	"MAINTENANCE": "BAKIM",
-	"MONITORING": "İZLEME",
-	"Maintenance Completed": "Bakım Tamamlandı",
-	"Maintenance in Progress": "Bakım Devam Ediyor",
-	"Mode": "Mod",
-	"No Data": "Veri Yok",
-	"No Incident in %date": "%date Tarihinde Olay Yok",
-	"No Incidents": "Olay Yok",
-	"No Monitor Found": "Servis Bulunamadı",
-	"No Updates Yet": "Henüz Güncelleme Yok",
-	"Ongoing Incidents": "Devam Eden Olaylar",
-	"Pinging": "Pinging",
-	"RESOLVED": "ÇÖZÜLDÜ",
-	"Recent Incidents": "Son Olaylar",
-	"Recent Maintenances": "Son Bakımlar",
-	"Share this monitor using a link with others": "Bu servisi bir bağlantı kullanarak başkalarıyla paylaşın",
-	"Share": "Paylaş",
-	"Standard": "Standart",
-	"Started %startedAt, lasted for %lastedFor": "%startedAt başladı, %lastedFor sürdü",
-	"Started %startedAt, still ongoing": "%startedAt başladı, devam ediyor",
-	"Starts %startedAt, will last for %lastedFor": "%startedAt başlıyor, %lastedFor sürecek",
-	"Starts %startedAt": "%startedAt başlıyor",
-	"Status OK": "Durum UYGUN",
-	"Status": "Durum",
-	"Theme": "Tema",
-	"Today": "Bugün",
-	"UP": "ÇALIŞIYOR",
-	"Upcoming Maintenance": "Yaklaşan Bakım",
-	"Updates": "Güncellemeler",
-	"Uptime": "Çalışma Süresi"
+  "%status for %duration": "%duration boyunca %status",
+  "14 Days": "14 Gün",
+  "30 Days": "30 Gün",
+  "60 Days": "60 Gün",
+  "7 Days": "7 Gün",
+  "90 Days": "90 Gün",
+  "Availability per Component": "Bileşen Kullanılabilirliği",
+  "Back": "Geri",
+  "Badge Copied": "Rozet Kopyalandı",
+  "Badge": "Rozet",
+  "Browse Events": "Etkinliklere Göz At",
+  "Code Copied": "Kod Kopyalandı",
+  "Copy Code": "Kodu Kopyala",
+  "Copy Link": "Bağlantıyı Kopyala",
+  "DEGRADED": "BOZUK",
+  "DOWN": "ÇALIŞMIYOR",
+  "Dark": "Koyu",
+  "Days": "Günler",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Uygulamanıza <script> veya <iframe> kullanarak bu hizmeti yerleştirin.",
+  "Embed": "Yerleştir",
+  "Get SVG badge for this monitor": "Bu servis için SVG rozet alın",
+  "Get a LIVE Status for this monitor": "Bu servis için CANLI Durum alın",
+  "IDENTIFIED": "TANIMLANDI",
+  "INVESTIGATING": "İNCELENİYOR",
+  "Incident Updates": "Olay Güncellemeleri",
+  "LIVE Status": "CANLI Durum",
+  "Lasted for about %lastedFor": "%lastedFor sürdü",
+  "Light": "Açık",
+  "Link Copied": "Bağlantı Kopyalandı",
+  "MAINTENANCE": "BAKIM",
+  "MONITORING": "İZLEME",
+  "Maintenance Completed": "Bakım Tamamlandı",
+  "Maintenance in Progress": "Bakım Devam Ediyor",
+  "Mode": "Mod",
+  "No Data": "Veri Yok",
+  "No Incident in %date": "%date Tarihinde Olay Yok",
+  "No Incidents": "Olay Yok",
+  "No Monitor Found": "Servis Bulunamadı",
+  "No Updates Yet": "Henüz Güncelleme Yok",
+  "Ongoing Incidents": "Devam Eden Olaylar",
+  "Pinging": "Pinging",
+  "RESOLVED": "ÇÖZÜLDÜ",
+  "Recent Incidents": "Son Olaylar",
+  "Recent Maintenances": "Son Bakımlar",
+  "Share this monitor using a link with others": "Bu servisi bir bağlantı kullanarak başkalarıyla paylaşın",
+  "Share": "Paylaş",
+  "Standard": "Standart",
+  "Started %startedAt, lasted for %lastedFor": "%startedAt başladı, %lastedFor sürdü",
+  "Started %startedAt, still ongoing": "%startedAt başladı, devam ediyor",
+  "Started %startedAt, will last for %lastedFor more": "%startedAt başladı, %lastedFor daha sürecek",
+  "Starts %startedAt, will last for %lastedFor": "%startedAt başlıyor, %lastedFor sürecek",
+  "Starts %startedAt": "%startedAt başlıyor",
+  "Status OK": "Durum UYGUN",
+  "Status": "Durum",
+  "Switch to your timezone": "Saat diliminize geçin",
+  "Theme": "Tema",
+  "Timezone set to %tz": "Saat dilimi %tz olarak ayarlandı",
+  "Today": "Bugün",
+  "UP": "ÇALIŞIYOR",
+  "Upcoming Maintenance": "Yaklaşan Bakım",
+  "Updates": "Güncellemeler",
+  "Uptime": "Çalışma Süresi"
 }

src/lib/locales/vi.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%status trong %duration",
-	"14 Days": "14 ngày",
-	"30 Days": "30 ngày",
-	"60 Days": "60 ngày",
-	"7 Days": "7 ngày",
-	"90 Days": "90 ngày",
-	"Availability per Component": "Tính khả dụng theo thành phần",
-	"Back": "Quay lại",
-	"Badge Copied": "Huy hiệu đã được sao chép",
-	"Badge": "Huy hiệu",
-	"Browse Events": "Duyệt sự kiện",
-	"Code Copied": "Mã đã được sao chép",
-	"Copy Code": "Sao chép mã",
-	"Copy Link": "Sao chép liên kết",
-	"DEGRADED": "Suy giảm",
-	"DOWN": "Ngừng hoạt động",
-	"Dark": "Tối",
-	"Days": "Ngày",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Nhúng trình theo dõi này vào ứng dụng của bạn bằng <script> hoặc <iframe>.",
-	"Embed": "Nhúng",
-	"Get SVG badge for this monitor": "Lấy huy hiệu SVG cho trình theo dõi này",
-	"Get a LIVE Status for this monitor": "Lấy trạng thái TRỰC TIẾP cho trình theo dõi này",
-	"IDENTIFIED": "Đã xác định",
-	"INVESTIGATING": "Đang điều tra",
-	"Incident Updates": "Cập nhật sự cố",
-	"LIVE Status": "Trạng thái TRỰC TIẾP",
-	"Lasted for about %lastedFor": "Kéo dài khoảng %lastedFor",
-	"Light": "Sáng",
-	"Link Copied": "Liên kết đã được sao chép",
-	"MAINTENANCE": "Bảo trì",
-	"MONITORING": "Đang giám sát",
-	"Maintenance Completed": "Bảo trì đã hoàn thành",
-	"Maintenance in Progress": "Bảo trì đang diễn ra",
-	"Mode": "Chế độ",
-	"No Data": "Không có dữ liệu",
-	"No Incident in %date": "Không có sự cố vào %date",
-	"No Incidents": "Không có sự cố",
-	"No Monitor Found": "Không tìm thấy trình theo dõi",
-	"No Updates Yet": "Chưa có cập nhật",
-	"Ongoing Incidents": "Sự cố đang diễn ra",
-	"Pinging": "Đang kiểm tra",
-	"RESOLVED": "Đã giải quyết",
-	"Recent Incidents": "Sự cố gần đây",
-	"Recent Maintenances": "Bảo trì gần đây",
-	"Share this monitor using a link with others": "Chia sẻ trình theo dõi này với người khác bằng liên kết",
-	"Share": "Chia sẻ",
-	"Standard": "Tiêu chuẩn",
-	"Started %startedAt, lasted for %lastedFor": "Bắt đầu khoảng %startedAt trước, kéo dài khoảng %lastedFor",
-	"Started %startedAt, still ongoing": "Bắt đầu khoảng %startedAt trước, vẫn đang diễn ra",
-	"Starts %startedAt, will last for %lastedFor": "Bắt đầu trong %startedAt, sẽ kéo dài khoảng %lastedFor",
-	"Starts %startedAt": "Bắt đầu trong %startedAt",
-	"Status OK": "Trạng thái OK",
-	"Status": "Trạng thái",
-	"Theme": "Giao diện",
-	"Today": "Hôm nay",
-	"UP": "Hoạt động",
-	"Upcoming Maintenance": "Bảo trì sắp tới",
-	"Updates": "Cập nhật",
-	"Uptime": "Thời gian hoạt động"
+  "%status for %duration": "%status trong %duration",
+  "14 Days": "14 ngày",
+  "30 Days": "30 ngày",
+  "60 Days": "60 ngày",
+  "7 Days": "7 ngày",
+  "90 Days": "90 ngày",
+  "Availability per Component": "Tính khả dụng theo thành phần",
+  "Back": "Quay lại",
+  "Badge Copied": "Huy hiệu đã được sao chép",
+  "Badge": "Huy hiệu",
+  "Browse Events": "Duyệt sự kiện",
+  "Code Copied": "Mã đã được sao chép",
+  "Copy Code": "Sao chép mã",
+  "Copy Link": "Sao chép liên kết",
+  "DEGRADED": "Suy giảm",
+  "DOWN": "Ngừng hoạt động",
+  "Dark": "Tối",
+  "Days": "Ngày",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "Nhúng trình theo dõi này vào ứng dụng của bạn bằng <script> hoặc <iframe>.",
+  "Embed": "Nhúng",
+  "Get SVG badge for this monitor": "Lấy huy hiệu SVG cho trình theo dõi này",
+  "Get a LIVE Status for this monitor": "Lấy trạng thái TRỰC TIẾP cho trình theo dõi này",
+  "IDENTIFIED": "Đã xác định",
+  "INVESTIGATING": "Đang điều tra",
+  "Incident Updates": "Cập nhật sự cố",
+  "LIVE Status": "Trạng thái TRỰC TIẾP",
+  "Lasted for about %lastedFor": "Kéo dài khoảng %lastedFor",
+  "Light": "Sáng",
+  "Link Copied": "Liên kết đã được sao chép",
+  "MAINTENANCE": "Bảo trì",
+  "MONITORING": "Đang giám sát",
+  "Maintenance Completed": "Bảo trì đã hoàn thành",
+  "Maintenance in Progress": "Bảo trì đang diễn ra",
+  "Mode": "Chế độ",
+  "No Data": "Không có dữ liệu",
+  "No Incident in %date": "Không có sự cố vào %date",
+  "No Incidents": "Không có sự cố",
+  "No Monitor Found": "Không tìm thấy trình theo dõi",
+  "No Updates Yet": "Chưa có cập nhật",
+  "Ongoing Incidents": "Sự cố đang diễn ra",
+  "Pinging": "Đang kiểm tra",
+  "RESOLVED": "Đã giải quyết",
+  "Recent Incidents": "Sự cố gần đây",
+  "Recent Maintenances": "Bảo trì gần đây",
+  "Share this monitor using a link with others": "Chia sẻ trình theo dõi này với người khác bằng liên kết",
+  "Share": "Chia sẻ",
+  "Standard": "Tiêu chuẩn",
+  "Started %startedAt, lasted for %lastedFor": "Bắt đầu khoảng %startedAt trước, kéo dài khoảng %lastedFor",
+  "Started %startedAt, still ongoing": "Bắt đầu khoảng %startedAt trước, vẫn đang diễn ra",
+  "Started %startedAt, will last for %lastedFor more": "Bắt đầu khoảng %startedAt trước, sẽ kéo dài thêm khoảng %lastedFor",
+  "Starts %startedAt, will last for %lastedFor": "Bắt đầu trong %startedAt, sẽ kéo dài khoảng %lastedFor",
+  "Starts %startedAt": "Bắt đầu trong %startedAt",
+  "Status OK": "Trạng thái OK",
+  "Status": "Trạng thái",
+  "Switch to your timezone": "Chuyển sang múi giờ của bạn",
+  "Theme": "Giao diện",
+  "Timezone set to %tz": "Đã đặt múi giờ %tz",
+  "Today": "Hôm nay",
+  "UP": "Hoạt động",
+  "Upcoming Maintenance": "Bảo trì sắp tới",
+  "Updates": "Cập nhật",
+  "Uptime": "Thời gian hoạt động"
 }

src/lib/locales/zh-CN.json

@@ -1,61 +1,64 @@
 {
-	"%status for %duration": "%duration 内的 %status",
-	"14 Days": "14天",
-	"30 Days": "30天",
-	"60 Days": "60天",
-	"7 Days": "7天",
-	"90 Days": "90天",
-	"Availability per Component": "每个组件的可用性",
-	"Back": "返回",
-	"Badge Copied": "徽章已复制",
-	"Badge": "徽章",
-	"Browse Events": "浏览事件",
-	"Code Copied": "代码已复制",
-	"Copy Code": "复制代码",
-	"Copy Link": "复制链接",
-	"DEGRADED": "性能下降",
-	"DOWN": "不可用",
-	"Dark": "深色",
-	"Days": "天",
-	"Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "使用 <script> 或 <iframe> 将此监控嵌入您的应用。",
-	"Embed": "嵌入",
-	"Get SVG badge for this monitor": "获取此监控的SVG徽章",
-	"Get a LIVE Status for this monitor": "获取此监控的实时状态",
-	"IDENTIFIED": "已识别",
-	"INVESTIGATING": "正在调查",
-	"Incident Updates": "事件更新",
-	"LIVE Status": "实时状态",
-	"Lasted for about %lastedFor": "持续了约 %lastedFor",
-	"Light": "浅色",
-	"Link Copied": "链接已复制",
-	"MAINTENANCE": "维护",
-	"MONITORING": "正在监控",
-	"Maintenance Completed": "维护已完成",
-	"Maintenance in Progress": "维护进行中",
-	"Mode": "模式",
-	"No Data": "无数据",
-	"No Incident in %date": "%date 无事件",
-	"No Incidents": "无事件",
-	"No Monitor Found": "未找到监控",
-	"No Updates Yet": "尚无更新",
-	"Ongoing Incidents": "正在处理的事件",
-	"Pinging": "正在测试",
-	"RESOLVED": "已解决",
-	"Recent Incidents": "最近的事件",
-	"Recent Maintenances": "最近的维护",
-	"Share this monitor using a link with others": "通过链接与他人分享此监控",
-	"Share": "分享",
-	"Standard": "标准",
-	"Started %startedAt, lasted for %lastedFor": "大约 %startedAt 前开始，持续了约 %lastedFor",
-	"Started %startedAt, still ongoing": "大约 %startedAt 前开始，目前仍在进行中",
-	"Starts %startedAt, will last for %lastedFor": "%startedAt 后开始，将持续约 %lastedFor",
-	"Starts %startedAt": "%startedAt 后开始",
-	"Status OK": "状态正常",
-	"Status": "状态",
-	"Theme": "主题",
-	"Today": "今天",
-	"UP": "可用",
-	"Upcoming Maintenance": "即将进行的维护",
-	"Updates": "更新",
-	"Uptime": "正常运行时间"
+  "%status for %duration": "%duration 内的 %status",
+  "14 Days": "14天",
+  "30 Days": "30天",
+  "60 Days": "60天",
+  "7 Days": "7天",
+  "90 Days": "90天",
+  "Availability per Component": "每个组件的可用性",
+  "Back": "返回",
+  "Badge Copied": "徽章已复制",
+  "Badge": "徽章",
+  "Browse Events": "浏览事件",
+  "Code Copied": "代码已复制",
+  "Copy Code": "复制代码",
+  "Copy Link": "复制链接",
+  "DEGRADED": "性能下降",
+  "DOWN": "不可用",
+  "Dark": "深色",
+  "Days": "天",
+  "Embed this monitor using &#x3C;script&#x3E; or &#x3C;iframe&#x3E; in your app.": "使用 <script> 或 <iframe> 将此监控嵌入您的应用。",
+  "Embed": "嵌入",
+  "Get SVG badge for this monitor": "获取此监控的SVG徽章",
+  "Get a LIVE Status for this monitor": "获取此监控的实时状态",
+  "IDENTIFIED": "已识别",
+  "INVESTIGATING": "正在调查",
+  "Incident Updates": "事件更新",
+  "LIVE Status": "实时状态",
+  "Lasted for about %lastedFor": "持续了约 %lastedFor",
+  "Light": "浅色",
+  "Link Copied": "链接已复制",
+  "MAINTENANCE": "维护",
+  "MONITORING": "正在监控",
+  "Maintenance Completed": "维护已完成",
+  "Maintenance in Progress": "维护进行中",
+  "Mode": "模式",
+  "No Data": "无数据",
+  "No Incident in %date": "%date 无事件",
+  "No Incidents": "无事件",
+  "No Monitor Found": "未找到监控",
+  "No Updates Yet": "尚无更新",
+  "Ongoing Incidents": "正在处理的事件",
+  "Pinging": "正在测试",
+  "RESOLVED": "已解决",
+  "Recent Incidents": "最近的事件",
+  "Recent Maintenances": "最近的维护",
+  "Share this monitor using a link with others": "通过链接与他人分享此监控",
+  "Share": "分享",
+  "Standard": "标准",
+  "Started %startedAt, lasted for %lastedFor": "大约 %startedAt 前开始，持续了约 %lastedFor",
+  "Started %startedAt, still ongoing": "大约 %startedAt 前开始，目前仍在进行中",
+  "Started %startedAt, will last for %lastedFor more": "大约 %startedAt 前开始，将持续约 %lastedFor",
+  "Starts %startedAt, will last for %lastedFor": "%startedAt 后开始，将持续约 %lastedFor",
+  "Starts %startedAt": "%startedAt 后开始",
+  "Status OK": "状态正常",
+  "Status": "状态",
+  "Switch to your timezone": "切换到您的时区",
+  "Theme": "主题",
+  "Timezone set to %tz": "时区设置为 %tz",
+  "Today": "今天",
+  "UP": "可用",
+  "Upcoming Maintenance": "即将进行的维护",
+  "Updates": "更新",
+  "Uptime": "正常运行时间"
 }

src/lib/server/alerting.js

@@ -3,12 +3,12 @@ import notification from "./notification/notif.js";
 
 import moment from "moment";
 import {
-	GetAllSiteData,
-	GetAllTriggers,
-	CreateIncident,
-	AddIncidentComment,
-	AddIncidentMonitor,
-	InsertNewAlert
+  GetAllSiteData,
+  GetAllTriggers,
+  CreateIncident,
+  AddIncidentComment,
+  AddIncidentMonitor,
+  InsertNewAlert,
 } from "./controllers/controller.js";
 
 import db from "./db/db.js";
@@ -17,197 +17,185 @@ const TRIGGERED = "TRIGGERED";
 const RESOLVED = "RESOLVED";
 
 async function createJSONCommonAlert(monitor, config, alert, severity) {
-	let siteData = await GetAllSiteData();
-	let siteURL = siteData.siteURL;
-	let id = monitor.tag + "-" + alert.id;
-	let alert_name = monitor.name + " " + alert.monitor_status;
-	let source = "Kener";
-	let timestamp = new Date().toISOString();
-	let description = config.description || "Monitor has failed";
-	let status = alert.alert_status;
-	let details = {
-		metric: monitor.name,
-		current_value: alert.health_checks,
-		threshold: config.failureThreshold
-	};
-	let actions = [
-		{
-			text: "View Monitor",
-			url: siteURL + "?monitor=" + monitor.tag
-		}
-	];
-	return {
-		id,
-		alert_name,
-		severity,
-		status,
-		source,
-		timestamp,
-		description,
-		details,
-		actions
-	};
+  let siteData = await GetAllSiteData();
+  let siteURL = siteData.siteURL;
+  let id = monitor.tag + "-" + alert.id;
+  let alert_name = monitor.name + " " + alert.monitor_status;
+  let source = "Kener";
+  let timestamp = new Date().toISOString();
+  let description = config.description || "Monitor has failed";
+  let status = alert.alert_status;
+  let details = {
+    metric: monitor.name,
+    current_value: alert.health_checks,
+    threshold: config.failureThreshold,
+  };
+  let actions = [
+    {
+      text: "View Monitor",
+      url: siteURL + "?monitor=" + monitor.tag,
+    },
+  ];
+  return {
+    id,
+    alert_name,
+    severity,
+    status,
+    source,
+    timestamp,
+    description,
+    details,
+    actions,
+  };
 }
 
 async function createNewIncident(monitor, alert, commonData) {
-	let startDateTime = moment(alert.created_at).unix();
-	let payload = {
-		start_date_time: startDateTime,
-		title: commonData.alert_name
-	};
+  let startDateTime = moment(alert.created_at).unix();
+  let payload = {
+    start_date_time: startDateTime,
+    title: commonData.alert_name,
+    incident_source: "ALERT",
+  };
 
-	let update = commonData.description;
-	update =
-		update +
-		`. Monitor Name: ${monitor.name}, Incident Status: ${commonData.status}, Severity: ${commonData.severity}, Monitor Status: ${alert.monitor_status}, Monitor Health Checks: ${alert.health_checks}, Monitor Failure Threshold: ${commonData.details.threshold}, Visit - ${commonData.actions[0].url}`;
+  let update = commonData.description;
+  update =
+    update +
+    `<div style="line-height: 1.5;">
+	<p><strong>Monitor Name:</strong> ${monitor.name}</p>
+	<p><strong>Incident Status:</strong> ${commonData.status}</p>
+	<p><strong>Severity:</strong> ${commonData.severity}</p>
+	<p><strong>Monitor Status:</strong> ${alert.monitor_status}</p>
+	<p><strong>Monitor Health Checks:</strong> ${alert.health_checks}</p>
+	<p><strong>Monitor Failure Threshold:</strong> ${commonData.details.threshold}</p>
+	<p><strong>Visit:</strong> <a href="${commonData.actions[0].url}">${commonData.actions[0].url}</a></p>
+</div>`;
 
-	let newIncident = await CreateIncident(payload);
+  let newIncident = await CreateIncident(payload);
 
-	//add update to incident
-	await AddIncidentComment(newIncident.incident_id, update, "INVESTIGATING", startDateTime);
+  //add update to incident
+  await AddIncidentComment(newIncident.incident_id, update, "INVESTIGATING", startDateTime);
 
-	//add monitor to incident
-	await AddIncidentMonitor(newIncident.incident_id, monitor.tag, alert.monitor_status);
+  //add monitor to incident
+  await AddIncidentMonitor(newIncident.incident_id, monitor.tag, alert.monitor_status);
 
-	return newIncident;
+  return newIncident;
 }
 
 async function closeIncident(alert, comment) {
-	let incident_id = alert.incident_number;
-	return await AddIncidentComment(
-		incident_id,
-		comment,
-		"RESOLVED",
-		moment(alert.updated_at).unix()
-	);
+  let incident_id = alert.incident_number;
+  return await AddIncidentComment(incident_id, comment, "RESOLVED", moment(alert.updated_at).unix());
 }
 
 function createClosureComment(alert, commonJSON) {
-	let comment = "The incident has been auto resolved";
-	let downtimeDuration = moment(alert.updated_at).diff(moment(alert.created_at), "minutes");
-	comment = comment + `, Total downtime: ` + downtimeDuration + ` minutes`;
-	return comment;
+  let comment = "The incident has been auto resolved";
+  let downtimeDuration = moment(alert.updated_at).diff(moment(alert.created_at), "minutes");
+  comment = comment + `, Total downtime: ` + downtimeDuration + ` minutes`;
+  return comment;
 }
 
 async function alerting(m) {
-	let monitor = await db.getMonitorByTag(m.tag);
-	let siteData = await GetAllSiteData();
-	const triggers = await GetAllTriggers({
-		status: "ACTIVE"
-	});
-	const triggerObj = {};
-	if (!!monitor.down_trigger) {
-		triggerObj.down_trigger = JSON.parse(monitor.down_trigger);
-	}
-	if (!!monitor.degraded_trigger) {
-		triggerObj.degraded_trigger = JSON.parse(monitor.degraded_trigger);
-	}
+  let monitor = await db.getMonitorByTag(m.tag);
+  let siteData = await GetAllSiteData();
+  const triggers = await GetAllTriggers({
+    status: "ACTIVE",
+  });
+  const triggerObj = {};
+  if (!!monitor.down_trigger) {
+    triggerObj.down_trigger = JSON.parse(monitor.down_trigger);
+  }
+  if (!!monitor.degraded_trigger) {
+    triggerObj.degraded_trigger = JSON.parse(monitor.degraded_trigger);
+  }
 
-	for (const key in triggerObj) {
-		if (Object.prototype.hasOwnProperty.call(triggerObj, key)) {
-			const alertConfig = triggerObj[key];
-			const monitor_status = alertConfig.trigger_type;
+  for (const key in triggerObj) {
+    if (Object.prototype.hasOwnProperty.call(triggerObj, key)) {
+      const alertConfig = triggerObj[key];
+      const monitor_status = alertConfig.trigger_type;
 
-			const failureThreshold = alertConfig.failureThreshold;
-			const successThreshold = alertConfig.successThreshold;
-			const monitor_tag = monitor.tag;
-			const alertingChannels = alertConfig.triggers; //array of numbers of trigger ids
-			const createIncident = alertConfig.createIncident === "YES";
-			const allMonitorClients = [];
-			const sendTrigger = alertConfig.active;
-			const severity = alertConfig.severity;
-			if (!sendTrigger) {
-				continue;
-			}
-			if (alertingChannels.length > 0) {
-				for (let i = 0; i < alertingChannels.length; i++) {
-					const triggerID = alertingChannels[i];
-					const trigger = triggers.find((c) => c.id === triggerID);
-					if (!trigger) {
-						console.error(
-							`Triggers ${triggerID} not found in server triggers for monitor ${monitor_tag}`
-						);
-						continue;
-					}
-					if (trigger.trigger_status !== "ACTIVE") {
-						console.error(`Triggers ${triggerID} is not active`);
-						continue;
-					}
-					const notificationClient = new notification(trigger, siteData, monitor);
-					allMonitorClients.push(notificationClient);
-				}
-			}
+      const failureThreshold = alertConfig.failureThreshold;
+      const successThreshold = alertConfig.successThreshold;
+      const monitor_tag = monitor.tag;
+      const alertingChannels = alertConfig.triggers; //array of numbers of trigger ids
+      const createIncident = alertConfig.createIncident === "YES";
+      const allMonitorClients = [];
+      const sendTrigger = alertConfig.active;
+      const severity = alertConfig.severity;
+      if (!sendTrigger) {
+        continue;
+      }
+      if (alertingChannels.length > 0) {
+        for (let i = 0; i < alertingChannels.length; i++) {
+          const triggerID = alertingChannels[i];
+          const trigger = triggers.find((c) => c.id === triggerID);
+          if (!trigger) {
+            console.error(`Triggers ${triggerID} not found in server triggers for monitor ${monitor_tag}`);
+            continue;
+          }
+          if (trigger.trigger_status !== "ACTIVE") {
+            console.error(`Triggers ${triggerID} is not active`);
+            continue;
+          }
+          const notificationClient = new notification(trigger, siteData, monitor);
+          allMonitorClients.push(notificationClient);
+        }
+      }
 
-			let isAffected = await db.consecutivelyStatusFor(
-				monitor_tag,
-				monitor_status,
-				failureThreshold
-			);
-			let alertExists = await db.alertExists(monitor_tag, monitor_status, TRIGGERED);
-			let activeAlert = null;
-			if (alertExists) {
-				activeAlert = await db.getActiveAlert(monitor_tag, monitor_status, TRIGGERED);
-			}
-			if (isAffected && !alertExists) {
-				activeAlert = await InsertNewAlert({
-					monitor_tag: monitor_tag,
-					monitor_status: monitor_status,
-					alert_status: TRIGGERED,
-					health_checks: failureThreshold
-				});
-				let commonJSON = await createJSONCommonAlert(
-					monitor,
-					alertConfig,
-					activeAlert,
-					severity
-				);
+      let isAffected = await db.consecutivelyStatusFor(monitor_tag, monitor_status, failureThreshold);
+      let alertExists = await db.alertExists(monitor_tag, monitor_status, TRIGGERED);
+      let activeAlert = null;
+      if (alertExists) {
+        activeAlert = await db.getActiveAlert(monitor_tag, monitor_status, TRIGGERED);
+      }
+      if (isAffected && !alertExists) {
+        activeAlert = await InsertNewAlert({
+          monitor_tag: monitor_tag,
+          monitor_status: monitor_status,
+          alert_status: TRIGGERED,
+          health_checks: failureThreshold,
+        });
+        let commonJSON = await createJSONCommonAlert(monitor, alertConfig, activeAlert, severity);
 
-				if (allMonitorClients.length > 0) {
-					for (let i = 0; i < allMonitorClients.length; i++) {
-						const client = allMonitorClients[i];
-						client.send(commonJSON);
-					}
-				}
-				if (createIncident) {
-					let incident = await createNewIncident(monitor, activeAlert, commonJSON);
+        if (allMonitorClients.length > 0) {
+          for (let i = 0; i < allMonitorClients.length; i++) {
+            const client = allMonitorClients[i];
+            client.send(commonJSON);
+          }
+        }
+        if (createIncident) {
+          let incident = await createNewIncident(monitor, activeAlert, commonJSON);
 
-					if (!!incident) {
-						//send incident to incident channel
-						await db.addIncidentNumberToAlert(activeAlert.id, incident.incident_id);
-					}
-				}
-			} else if (isAffected && alertExists) {
-				await db.incrementAlertHealthChecks(activeAlert.id);
-			} else if (!isAffected && alertExists) {
-				let isUp = await db.consecutivelyStatusFor(monitor_tag, "UP", successThreshold);
-				if (isUp) {
-					await db.updateAlertStatus(activeAlert.id, RESOLVED);
-					activeAlert.alert_status = RESOLVED;
-					let commonJSON = await createJSONCommonAlert(
-						monitor,
-						alertConfig,
-						activeAlert,
-						severity
-					);
-					if (allMonitorClients.length > 0) {
-						for (let i = 0; i < allMonitorClients.length; i++) {
-							const client = allMonitorClients[i];
-							client.send(commonJSON);
-						}
-					}
-					if (!!activeAlert.incident_number) {
-						let comment = createClosureComment(activeAlert, commonJSON);
+          if (!!incident) {
+            //send incident to incident channel
+            await db.addIncidentNumberToAlert(activeAlert.id, incident.incident_id);
+          }
+        }
+      } else if (isAffected && alertExists) {
+        await db.incrementAlertHealthChecks(activeAlert.id);
+      } else if (!isAffected && alertExists) {
+        let isUp = await db.consecutivelyStatusFor(monitor_tag, "UP", successThreshold);
+        if (isUp) {
+          await db.updateAlertStatus(activeAlert.id, RESOLVED);
+          activeAlert.alert_status = RESOLVED;
+          let commonJSON = await createJSONCommonAlert(monitor, alertConfig, activeAlert, severity);
+          if (allMonitorClients.length > 0) {
+            for (let i = 0; i < allMonitorClients.length; i++) {
+              const client = allMonitorClients[i];
+              client.send(commonJSON);
+            }
+          }
+          if (!!activeAlert.incident_number) {
+            let comment = createClosureComment(activeAlert, commonJSON);
 
-						try {
-							await closeIncident(activeAlert, comment);
-						} catch (error) {
-							console.log(error);
-						}
-					}
-				}
-			}
-		}
-	}
+            try {
+              await closeIncident(activeAlert, comment);
+            } catch (error) {
+              console.log(error);
+            }
+          }
+        }
+      }
+    }
+  }
 }
 
 export default alerting;

src/lib/server/constants.js

@@ -8,92 +8,119 @@ const SITE = "./config/site.yaml";
 const UP = "UP";
 const DOWN = "DOWN";
 const DEGRADED = "DEGRADED";
+const NO_DATA = "NO_DATA";
 const API_TIMEOUT = 10 * 1000; // 10 seconds
 const AnalyticsProviders = {
-	GA: "https://unpkg.com/@analytics/google-analytics@1.0.7/dist/@analytics/google-analytics.min.js",
-	AMPLITUDE: "https://unpkg.com/@analytics/amplitude@0.1.3/dist/@analytics/amplitude.min.js",
-	MIXPANEL: "https://unpkg.com/@analytics/mixpanel@0.4.0/dist/@analytics/mixpanel.min.js"
+  GA: "https://unpkg.com/@analytics/google-analytics@1.0.7/dist/@analytics/google-analytics.min.js",
+  AMPLITUDE: "https://unpkg.com/@analytics/amplitude@0.1.3/dist/@analytics/amplitude.min.js",
+  MIXPANEL: "https://unpkg.com/@analytics/mixpanel@0.4.0/dist/@analytics/mixpanel.min.js",
 };
 const AllRecordTypes = {
-	A: 1,
-	NS: 2,
-	MD: 3,
-	MF: 4,
-	CNAME: 5,
-	SOA: 6,
-	MB: 7,
-	MG: 8,
-	MR: 9,
-	NULL: 10,
-	WKS: 11,
-	PTR: 12,
-	HINFO: 13,
-	MINFO: 14,
-	MX: 15,
-	TXT: 16,
-	RP: 17,
-	AFSDB: 18,
-	X25: 19,
-	ISDN: 20,
-	RT: 21,
-	NSAP: 22,
-	NSAP_PTR: 23,
-	SIG: 24,
-	KEY: 25,
-	PX: 26,
-	GPOS: 27,
-	AAAA: 28,
-	LOC: 29,
-	NXT: 30,
-	EID: 31,
-	NIMLOC: 32,
-	SRV: 33,
-	ATMA: 34,
-	NAPTR: 35,
-	KX: 36,
-	CERT: 37,
-	A6: 38,
-	DNAME: 39,
-	SINK: 40,
-	OPT: 41,
-	APL: 42,
-	DS: 43,
-	SSHFP: 44,
-	IPSECKEY: 45,
-	RRSIG: 46,
-	NSEC: 47,
-	DNSKEY: 48,
-	DHCID: 49,
-	NSEC3: 50,
-	NSEC3PARAM: 51,
-	TLSA: 52,
-	SMIMEA: 53,
-	HIP: 55,
-	NINFO: 56,
-	RKEY: 57,
-	TALINK: 58,
-	CDS: 59,
-	CDNSKEY: 60,
-	OPENPGPKEY: 61,
-	CSYNC: 62,
-	SPF: 99,
-	UINFO: 100,
-	UID: 101,
-	GID: 102,
-	UNSPEC: 103,
-	NID: 104,
-	L32: 105,
-	L64: 106,
-	LP: 107,
-	EUI48: 108,
-	EUI64: 109,
-	TKEY: 249,
-	TSIG: 250,
-	IXFR: 251,
-	AXFR: 252,
-	MAILB: 253,
-	MAILA: 254,
-	ANY: 255
+  A: 1,
+  NS: 2,
+  MD: 3,
+  MF: 4,
+  CNAME: 5,
+  SOA: 6,
+  MB: 7,
+  MG: 8,
+  MR: 9,
+  NULL: 10,
+  WKS: 11,
+  PTR: 12,
+  HINFO: 13,
+  MINFO: 14,
+  MX: 15,
+  TXT: 16,
+  RP: 17,
+  AFSDB: 18,
+  X25: 19,
+  ISDN: 20,
+  RT: 21,
+  NSAP: 22,
+  NSAP_PTR: 23,
+  SIG: 24,
+  KEY: 25,
+  PX: 26,
+  GPOS: 27,
+  AAAA: 28,
+  LOC: 29,
+  NXT: 30,
+  EID: 31,
+  NIMLOC: 32,
+  SRV: 33,
+  ATMA: 34,
+  NAPTR: 35,
+  KX: 36,
+  CERT: 37,
+  A6: 38,
+  DNAME: 39,
+  SINK: 40,
+  OPT: 41,
+  APL: 42,
+  DS: 43,
+  SSHFP: 44,
+  IPSECKEY: 45,
+  RRSIG: 46,
+  NSEC: 47,
+  DNSKEY: 48,
+  DHCID: 49,
+  NSEC3: 50,
+  NSEC3PARAM: 51,
+  TLSA: 52,
+  SMIMEA: 53,
+  HIP: 55,
+  NINFO: 56,
+  RKEY: 57,
+  TALINK: 58,
+  CDS: 59,
+  CDNSKEY: 60,
+  OPENPGPKEY: 61,
+  CSYNC: 62,
+  SPF: 99,
+  UINFO: 100,
+  UID: 101,
+  GID: 102,
+  UNSPEC: 103,
+  NID: 104,
+  L32: 105,
+  L64: 106,
+  LP: 107,
+  EUI48: 108,
+  EUI64: 109,
+  TKEY: 249,
+  TSIG: 250,
+  IXFR: 251,
+  AXFR: 252,
+  MAILB: 253,
+  MAILA: 254,
+  ANY: 255,
 };
 // Export the constants
-export { MONITOR, UP, DOWN, SITE, DEGRADED, API_TIMEOUT, ENV, AnalyticsProviders, AllRecordTypes };
+const REALTIME = "realtime";
+const TIMEOUT = "timeout";
+const ERROR = "error";
+const MANUAL = "manual";
+const WEBHOOK = "webhook";
+const DEFAULT_STATUS = "default_status";
+const SIGNAL = "signal";
+
+export {
+  MONITOR,
+  UP,
+  DOWN,
+  SITE,
+  DEGRADED,
+  API_TIMEOUT,
+  ENV,
+  AnalyticsProviders,
+  AllRecordTypes,
+  REALTIME,
+  TIMEOUT,
+  ERROR,
+  MANUAL,
+  NO_DATA,
+  WEBHOOK,
+  DEFAULT_STATUS,
+  SIGNAL,
+};

src/lib/server/cron-minute.js

@@ -1,13 +1,9 @@
 // @ts-nocheck
 import axios from "axios";
 import { Ping, ExtractIPv6HostAndPort, TCP } from "./ping.js";
-import { UP, DOWN, DEGRADED } from "./constants.js";
-import {
-  GetMinuteStartNowTimestampUTC,
-  ReplaceAllOccurrences,
-  GetRequiredSecrets,
-  Wait,
-} from "./tool.js";
+import { UP, DOWN, DEGRADED, REALTIME, TIMEOUT, ERROR, MANUAL, DEFAULT_STATUS } from "./constants.js";
+import Service from "./services/service.js";
+import { GetMinuteStartNowTimestampUTC, ReplaceAllOccurrences, GetRequiredSecrets, Wait } from "./tool.js";
 
 import alerting from "./alerting.js";
 import Queue from "queue";
@@ -19,11 +15,6 @@ import DNSResolver from "./dns.js";
 
 dotenv.config();
 
-const REALTIME = "realtime";
-const TIMEOUT = "timeout";
-const ERROR = "error";
-const MANUAL = "manual";
-
 const alertingQueue = new Queue({
   concurrency: 10, // Number of tasks that can run concurrently
   timeout: 10000, // Timeout in ms after which a task will be considered as failed (optional)
@@ -31,69 +22,14 @@ const alertingQueue = new Queue({
 });
 const apiQueue = new Queue({
   concurrency: 10, // Number of tasks that can run concurrently
-  timeout: 10000, // Timeout in ms after which a task will be considered as failed (optional)
+  timeout: 2 * 60 * 1000, // Timeout in ms after which a task will be considered as failed (optional)
   autostart: true, // Automatically start the queue (optional)
 });
 
-const defaultEval = `(async function (statusCode, responseTime, responseData) {
-	let statusCodeShort = Math.floor(statusCode/100);
-    if(statusCode == 429 || (statusCodeShort >=2 && statusCodeShort <= 3)) {
-        return {
-			status: 'UP',
-			latency: responseTime,
-        }
-    } 
-	return {
-		status: 'DOWN',
-		latency: responseTime,
-	}
-})`;
-
-const defaultPingEval = `(async function (responseDataBase64) {
-	let arrayOfPings = JSON.parse(atob(responseDataBase64));
-	let latencyTotal = arrayOfPings.reduce((acc, ping) => {
-		return acc + ping.latency;
-	}, 0);
-
-	let alive = arrayOfPings.reduce((acc, ping) => {
-		return acc && ping.alive;
-	}, true);
-
-	return {
-		status: alive ? 'UP' : 'DOWN',
-		latency: latencyTotal / arrayOfPings.length,
-	}
-})`;
-const defaultTcpEval = `(async function (responseDataBase64) {
-	let arrayOfPings = JSON.parse(atob(responseDataBase64));
-	let latencyTotal = arrayOfPings.reduce((acc, ping) => {
-		return acc + ping.latency;
-	}, 0);
-
-	let alive = arrayOfPings.reduce((acc, ping) => {
-		if (ping.status === "open") {
-			return acc && true;
-		} else {
-			return false;
-		}
-	}, true);
-
-	return {
-		status: alive ? 'UP' : 'DOWN',
-		latency: latencyTotal / arrayOfPings.length,
-	}
-})`;
-
 async function manualIncident(monitor) {
   let startTs = GetMinuteStartNowTimestampUTC();
-  let incidentArr = await db.getIncidentsByMonitorTagRealtime(
-    monitor.tag,
-    startTs,
-  );
-  let maintenanceArr = await db.getMaintenanceByMonitorTagRealtime(
-    monitor.tag,
-    startTs,
-  );
+  let incidentArr = await db.getIncidentsByMonitorTagRealtime(monitor.tag, startTs);
+  let maintenanceArr = await db.getMaintenanceByMonitorTagRealtime(monitor.tag, startTs);
 
   let impactArr = incidentArr.concat(maintenanceArr);
 
@@ -105,16 +41,6 @@ async function manualIncident(monitor) {
   for (let i = 0; i < impactArr.length; i++) {
     const element = impactArr[i];
 
-    let autoIncidents = await db.getActiveAlertIncident(
-      monitor.tag,
-      element.monitor_impact,
-      element.id,
-    );
-
-    if (!!autoIncidents) {
-      continue;
-    }
-
     if (element.monitor_impact === "DOWN") {
       impact = "DOWN";
       break;
@@ -135,300 +61,27 @@ async function manualIncident(monitor) {
       type: MANUAL,
     },
   };
+
   return manualData;
 }
 
-const tcpCall = async (hosts, tcpEval, tag) => {
-  let arrayOfPings = [];
-  for (let i = 0; i < hosts.length; i++) {
-    const host = hosts[i];
-    arrayOfPings.push(await TCP(host.type, host.host, host.port, host.timeout));
-  }
-  let respBase64 = Buffer.from(JSON.stringify(arrayOfPings)).toString("base64");
-
-  let evalResp = undefined;
-
-  try {
-    evalResp = await eval(tcpEval + `("${respBase64}")`);
-  } catch (error) {
-    console.log(`Error in tcpEval for ${tag}`, error.message);
-  }
-  //reduce to get the status
-  return {
-    status: evalResp.status,
-    latency: evalResp.latency,
-    type: REALTIME,
-  };
-};
-const pingCall = async (hosts, pingEval, tag) => {
-  if (hosts === undefined) {
-    console.log(
-      "Hosts is undefined. The ping monitor has changed in version 3.0.10. Please update your monitor with tag",
-      tag,
-    );
-    return {
-      status: DOWN,
-      latency: 0,
-      type: ERROR,
-    };
-  }
-  let arrayOfPings = [];
-  for (let i = 0; i < hosts.length; i++) {
-    const host = hosts[i];
-    arrayOfPings.push(
-      await Ping(host.type, host.host, host.timeout, host.count),
-    );
-  }
-  let respBase64 = Buffer.from(JSON.stringify(arrayOfPings)).toString("base64");
-
-  let evalResp = undefined;
-
-  try {
-    evalResp = await eval(pingEval + `("${respBase64}")`);
-  } catch (error) {
-    console.log(`Error in pingEval for ${tag}`, error.message);
-  }
-  //reduce to get the status
-  return {
-    status: evalResp.status,
-    latency: evalResp.latency,
-    type: REALTIME,
-  };
-};
-const apiCall = async (
-  envSecrets,
-  url,
-  method,
-  headers,
-  body,
-  timeout,
-  monitorEval,
-  tag,
-) => {
-  let axiosHeaders = {};
-  axiosHeaders["User-Agent"] = "Kener/3.0.2";
-  axiosHeaders["Accept"] = "*/*";
-  const start = Date.now();
-  //replace all secrets
-  for (let i = 0; i < envSecrets.length; i++) {
-    const secret = envSecrets[i];
-    if (!!body) {
-      body = ReplaceAllOccurrences(body, secret.find, secret.replace);
-    }
-    if (!!url) {
-      url = ReplaceAllOccurrences(url, secret.find, secret.replace);
-    }
-    if (!!headers) {
-      headers = ReplaceAllOccurrences(headers, secret.find, secret.replace);
-    }
-  }
-  if (!!headers) {
-    headers = JSON.parse(headers);
-    headers = headers.reduce((acc, header) => {
-      acc[header.key] = header.value;
-      return acc;
-    }, {});
-    axiosHeaders = { ...axiosHeaders, ...headers };
-  }
-
-  const options = {
-    method: method,
-    headers: headers,
-    timeout: timeout,
-    transformResponse: (r) => r,
-  };
-  if (!!headers) {
-    options.headers = headers;
-  }
-  if (!!body) {
-    options.data = body;
-  }
-  let statusCode = 500;
-  let latency = 0;
-  let resp = "";
-  let timeoutError = false;
-  try {
-    let data = await axios(url, options);
-    statusCode = data.status;
-    resp = data.data;
-  } catch (err) {
-    console.log(`Error in apiCall ${tag}`, err.message);
-    if (
-      err.message.startsWith("timeout of") &&
-      err.message.endsWith("exceeded")
-    ) {
-      timeoutError = true;
-    }
-    if (err.response !== undefined && err.response.status !== undefined) {
-      statusCode = err.response.status;
-    }
-    if (err.response !== undefined && err.response.data !== undefined) {
-      resp = err.response.data;
-    } else {
-      resp = JSON.stringify(resp);
-    }
-  } finally {
-    const end = Date.now();
-    latency = end - start;
-    if (resp === undefined || resp === null) {
-      resp = "";
-    }
-  }
-  resp = Buffer.from(resp).toString("base64");
-
-  let evalResp = undefined;
-
-  try {
-    evalResp = await eval(
-      monitorEval + `(${statusCode}, ${latency}, "${resp}")`,
-    );
-  } catch (error) {
-    console.log(`Error in monitorEval for ${tag}`, error.message);
-  }
-
-  if (evalResp === undefined || evalResp === null) {
-    evalResp = {
-      status: DOWN,
-      latency: latency,
-      type: ERROR,
-    };
-  } else if (
-    evalResp.status === undefined ||
-    evalResp.status === null ||
-    [UP, DOWN, DEGRADED].indexOf(evalResp.status) === -1
-  ) {
-    evalResp = {
-      status: DOWN,
-      latency: latency,
-      type: ERROR,
-    };
-  } else {
-    evalResp.type = REALTIME;
-  }
-
-  let toWrite = {
-    status: DOWN,
-    latency: latency,
-    type: ERROR,
-  };
-  if (evalResp.status !== undefined && evalResp.status !== null) {
-    toWrite.status = evalResp.status;
-  }
-  if (evalResp.latency !== undefined && evalResp.latency !== null) {
-    toWrite.latency = evalResp.latency;
-  }
-  if (evalResp.type !== undefined && evalResp.type !== null) {
-    toWrite.type = evalResp.type;
-  }
-  if (timeoutError) {
-    toWrite.type = TIMEOUT;
-  }
-
-  return toWrite;
-};
-
-async function dsnChecker(dnsResolver, host, recordType, matchType, values) {
-  try {
-    let queryStartTime = Date.now();
-    let dnsRes = await dnsResolver.getRecord(host, recordType);
-    let latency = Date.now() - queryStartTime;
-
-    if (dnsRes[recordType] === undefined) {
-      return {
-        status: DOWN,
-        latency: latency,
-        type: REALTIME,
-      };
-    }
-    let data = dnsRes[recordType];
-    let dnsData = data.map((d) => d.data);
-    if (matchType === "ALL") {
-      for (let i = 0; i < values.length; i++) {
-        if (dnsData.indexOf(values[i].trim()) === -1) {
-          return {
-            status: DOWN,
-            latency: latency,
-            type: REALTIME,
-          };
-        }
-      }
-      return {
-        status: UP,
-        latency: latency,
-        type: REALTIME,
-      };
-    } else if (matchType === "ANY") {
-      for (let i = 0; i < values.length; i++) {
-        if (dnsData.indexOf(values[i].trim()) !== -1) {
-          return {
-            status: UP,
-            latency: latency,
-            type: REALTIME,
-          };
-        }
-      }
-      return {
-        status: DOWN,
-        latency: latency,
-        type: REALTIME,
-      };
-    }
-  } catch (error) {
-    console.log("Error in dnsChecker", error);
-    return {
-      status: DOWN,
-      latency: 0,
-      type: REALTIME,
-    };
-  }
-}
-
 const Minuter = async (monitor) => {
   let realTimeData = {};
   let manualData = {};
 
   const startOfMinute = GetMinuteStartNowTimestampUTC();
+  const serviceClient = new Service(monitor);
   if (monitor.monitor_type === "API") {
-    let envSecrets = GetRequiredSecrets(
-      `${monitor.type_data.url} ${monitor.type_data.body} ${JSON.stringify(monitor.type_data.headers)}`,
-    );
-
-    if (monitor.type_data.eval === "") {
-      monitor.type_data.eval = defaultEval;
-    }
-
-    let apiResponse = await apiCall(
-      envSecrets,
-      monitor.type_data.url,
-      monitor.type_data.method,
-      JSON.stringify(monitor.type_data.headers),
-      monitor.type_data.body,
-      monitor.type_data.timeout,
-      monitor.type_data.eval,
-      monitor.tag,
-    );
+    let apiResponse = await serviceClient.execute();
 
     realTimeData[startOfMinute] = apiResponse;
+
+    //if timeout, retry after 500ms
     if (apiResponse.type === TIMEOUT) {
       apiQueue.push(async (cb) => {
         await Wait(500); //wait for 500ms
-        console.log(
-          "Retrying api call for " +
-            monitor.name +
-            " at " +
-            startOfMinute +
-            " due to timeout",
-        );
-        apiCall(
-          envSecrets,
-          monitor.type_data.url,
-          monitor.type_data.method,
-          JSON.stringify(monitor.type_data.headers),
-          monitor.type_data.body,
-          monitor.type_data.timeout,
-          monitor.type_data.eval,
-          monitor.tag,
-        ).then(async (data) => {
+        console.log("Retrying api call for " + monitor.name + " at " + startOfMinute + " due to timeout");
+        serviceClient.execute().then(async (data) => {
           await db.insertMonitoringData({
             monitor_tag: monitor.tag,
             timestamp: startOfMinute,
@@ -441,38 +94,23 @@ const Minuter = async (monitor) => {
       });
     }
   } else if (monitor.monitor_type === "PING") {
-    if (!!!monitor.type_data.pingEval) {
-      monitor.type_data.pingEval = defaultPingEval;
-    }
-    let pingResponse = await pingCall(
-      monitor.type_data.hosts,
-      monitor.type_data.pingEval,
-      monitor.tag,
-    );
-    realTimeData[startOfMinute] = pingResponse;
+    realTimeData[startOfMinute] = await serviceClient.execute();
   } else if (monitor.monitor_type === "TCP") {
-    if (!!!monitor.type_data.tcpEval) {
-      monitor.type_data.tcpEval = defaultTcpEval;
-    }
-    let pingResponse = await tcpCall(
-      monitor.type_data.hosts,
-      monitor.type_data.tcpEval,
-      monitor.tag,
-    );
-    realTimeData[startOfMinute] = pingResponse;
+    realTimeData[startOfMinute] = await serviceClient.execute();
   } else if (monitor.monitor_type === "DNS") {
-    const dnsResolver = new DNSResolver(monitor.type_data.nameServer);
-    let dnsResponse = await dsnChecker(
-      dnsResolver,
-      monitor.type_data.host,
-      monitor.type_data.lookupRecord,
-      monitor.type_data.matchType,
-      monitor.type_data.values,
-    );
-    realTimeData[startOfMinute] = dnsResponse;
+    realTimeData[startOfMinute] = await serviceClient.execute();
+  } else if (monitor.monitor_type === "GROUP") {
+    realTimeData[startOfMinute] = await serviceClient.execute(startOfMinute);
+  } else if (monitor.monitor_type === "SSL") {
+    realTimeData[startOfMinute] = await serviceClient.execute();
+  } else if (monitor.monitor_type === "SQL") {
+    realTimeData[startOfMinute] = await serviceClient.execute();
+  } else if (monitor.monitor_type === "HEARTBEAT") {
+    realTimeData[startOfMinute] = await serviceClient.execute();
   }
 
   manualData = await manualIncident(monitor);
+
   //merge noData, apiData, webhookData, dayData
   let mergedData = {};
 
@@ -481,17 +119,21 @@ const Minuter = async (monitor) => {
       mergedData[startOfMinute] = {
         status: monitor.default_status,
         latency: 0,
-        type: "default_status",
+        type: DEFAULT_STATUS,
       };
     }
   }
 
   for (const timestamp in realTimeData) {
-    mergedData[timestamp] = realTimeData[timestamp];
+    if (!!realTimeData[timestamp] && !!realTimeData[timestamp].status) {
+      mergedData[timestamp] = realTimeData[timestamp];
+    }
   }
 
   for (const timestamp in manualData) {
-    mergedData[timestamp] = manualData[timestamp];
+    if (!!manualData[timestamp] && !!manualData[timestamp].status) {
+      mergedData[timestamp] = manualData[timestamp];
+    }
   }
 
   for (const timestamp in mergedData) {

src/lib/server/db/seedSiteData.js

@@ -1,92 +1,93 @@
 const seedSiteData = {
-	title: "Kener - Open-Source and Modern looking Node.js Status Page for Effortless Incident Management",
-	siteName: "Kener.ing",
-	siteURL: "https://kener.ing",
-	home: "/",
-	logo: "https://kener.ing/logo.png",
-	favicon: "https://kener.ing/logo96.png",
-	metaTags: [
-		{
-			key: "description",
-			value: "Kener: Open-source modern looking Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment."
-		},
-		{
-			key: "og:description",
-			value: "Kener: Open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment."
-		},
-		{ key: "og:image", value: "https://kener.ing/ss.png" },
-		{
-			key: "og:title",
-			value: "Kener - Open-Source and Modern looking Node.js Status Page for Effortless Incident Management"
-		},
-		{ key: "og:type", value: "website" },
-		{ key: "og:site_name", value: "Kener" },
-		{ key: "twitter:card", value: "summary_large_image" },
-		{ key: "twitter:site", value: "@_rajnandan_" },
-		{ key: "twitter:creator", value: "@_rajnandan_" },
-		{ key: "twitter:image", value: "https://kener.ing/ss.png" },
-		{
-			key: "twitter:title",
-			value: "Kener: Open-Source and Modern looking Node.js Status Page for Effortless Incident Management"
-		},
-		{
-			key: "twitter:description",
-			value: "Kener: Open-source Node.js status page tool, designed to make service monitoring and incident handling a breeze. It offers a sleek and user-friendly interface that simplifies tracking service outages and improves how we communicate during incidents. And the best part? Kener integrates seamlessly with GitHub, making incident management a team effort—making it easier for us to track and fix issues together in a collaborative and friendly environment."
-		}
-	],
-	nav: [
-		{ name: "Documentation", url: "https://kener.ing/docs/home", iconURL: "" },
-		{ name: "Github", iconURL: "", url: "https://github.com/rajnandan1/kener" },
-		{ name: "Login", iconURL: "", url: "/manage/signin" }
-	],
-	hero: {
-		title: "Kener is a Modern Open-Source Status Page System",
-		subtitle: "Let your users know what's going on."
-	},
-	footerHTML:
-		'<p class="text-center">\nMade using \n<a href="https://github.com/rajnandan1/kener" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">\n  Kener\n</a>\nan open source status page system built with Svelte and TailwindCSS.<br/>\nCreated with ❤️ by <a href="https://rajnandan.com" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">Raj Nandan Sharma</a>.\n</p>\n',
-	i18n: {
-		defaultLocale: "en",
-		locales: [{ code: "en", name: "English", selected: true, disabled: false }]
-	},
-	pattern: "none",
-	analytics: [
-		{
-			id: "G-Q3MLRXCBFT",
-			type: "GA",
-			name: "Google Analytics",
-			script: "https://unpkg.com/@analytics/google-analytics@1.0.7/dist/@analytics/google-analytics.min.js"
-		},
-		{
-			id: "",
-			type: "AMPLITUDE",
-			name: "Amplitude",
-			script: "https://unpkg.com/@analytics/amplitude@0.1.3/dist/@analytics/amplitude.min.js"
-		},
-		{
-			id: "",
-			type: "MIXPANEL",
-			name: "MixPanel",
-			script: "https://unpkg.com/@analytics/mixpanel@0.4.0/dist/@analytics/mixpanel.min.js"
-		}
-	],
-	theme: "none",
-	themeToggle: "YES",
-	barStyle: "PARTIAL",
-	barRoundness: "SHARP",
-	summaryStyle: "CURRENT",
-	colors: {
-		UP: "#67ab95",
-		DOWN: "#ca3038",
-		DEGRADED: "#e6ca61"
-	},
-	font: {
-		cssSrc: "https://fonts.bunny.net/css?family=albert-sans:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i&display=swap",
-		family: "Albert Sans"
-	},
-	categories: [{ name: "Home", description: "Monitors for Home Page" }],
-	homeIncidentCount: 5,
-	homeIncidentStartTimeWithin: 30
+  title: "Kener - Open source status page system",
+  siteName: "Kener.ing",
+  siteURL: "https://kener.ing",
+  home: "/",
+  logo: "https://kener.ing/logo.png",
+  favicon: "https://kener.ing/logo96.png",
+  metaTags: [
+    {
+      key: "description",
+      value: "Add your description here",
+    },
+    {
+      key: "og:description",
+      value: "Add your description here",
+    },
+    { key: "og:image", value: "https://kener.ing/newbg.png" },
+    {
+      key: "og:title",
+      value: "Kener - Open source status page system",
+    },
+    { key: "og:type", value: "website" },
+    { key: "og:site_name", value: "Kener" },
+    { key: "twitter:card", value: "summary_large_image" },
+    { key: "twitter:site", value: "@_rajnandan_" },
+    { key: "twitter:creator", value: "@_rajnandan_" },
+    { key: "twitter:image", value: "https://kener.ing/newbg.png" },
+    {
+      key: "twitter:title",
+      value: "Kener - Open source status page system",
+    },
+    {
+      key: "twitter:description",
+      value: "Add your description here",
+    },
+  ],
+  nav: [
+    { name: "Documentation", url: "https://kener.ing/docs/home", iconURL: "" },
+    { name: "Github", iconURL: "", url: "https://github.com/rajnandan1/kener" },
+    { name: "Setup Kener", iconURL: "", url: "/manage/signin" },
+  ],
+  hero: {
+    title: "Build stunning status pages in minutes",
+    subtitle: "Let your users know what's going on.",
+  },
+  footerHTML:
+    '<p class="text-center">\nMade using \n<a href="https://github.com/rajnandan1/kener" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">\n  Kener\n</a>\nan open source status page system built with Svelte and TailwindCSS.<br/>\nCreated with ❤️ by <a href="https://rajnandan.com" target="_blank" rel="noreferrer" class="font-medium underline underline-offset-4">Raj Nandan Sharma</a>.\n</p>\n',
+  i18n: {
+    defaultLocale: "en",
+    locales: [{ code: "en", name: "English", selected: true, disabled: false }],
+  },
+  pattern: "none",
+  analytics: [
+    {
+      id: "",
+      type: "GA",
+      name: "Google Analytics",
+      script: "https://unpkg.com/@analytics/google-analytics@1.0.7/dist/@analytics/google-analytics.min.js",
+    },
+    {
+      id: "",
+      type: "AMPLITUDE",
+      name: "Amplitude",
+      script: "https://unpkg.com/@analytics/amplitude@0.1.3/dist/@analytics/amplitude.min.js",
+    },
+    {
+      id: "",
+      type: "MIXPANEL",
+      name: "MixPanel",
+      script: "https://unpkg.com/@analytics/mixpanel@0.4.0/dist/@analytics/mixpanel.min.js",
+    },
+  ],
+  theme: "none",
+  themeToggle: "YES",
+  tzToggle: "YES",
+  barStyle: "PARTIAL",
+  barRoundness: "SHARP",
+  summaryStyle: "CURRENT",
+  colors: {
+    UP: "#67ab95",
+    DOWN: "#ca3038",
+    DEGRADED: "#e6ca61",
+  },
+  font: {
+    cssSrc: "",
+    family: "",
+  },
+  categories: [{ name: "Home", description: "Monitors for Home Page" }],
+  homeIncidentCount: 5,
+  homeIncidentStartTimeWithin: 30,
 };
 
 export default seedSiteData;

src/lib/server/notification/discord.js

@@ -1,93 +1,99 @@
 // @ts-nocheck
 class Discord {
-	url;
-	headers;
-	method;
-	siteData;
-	monitorData;
+  url;
+  headers;
+  method;
+  siteData;
+  monitorData;
 
-	constructor(url, siteData, monitorData) {
-		const kenerHeader = {
-			"Content-Type": "application/json",
-			"User-Agent": "Kener"
-		};
+  constructor(url, siteData, monitorData) {
+    const kenerHeader = {
+      "Content-Type": "application/json",
+      "User-Agent": "Kener",
+    };
 
-		this.url = url;
-		this.headers = Object.assign(kenerHeader, {});
-		this.method = "POST";
-		this.siteData = siteData;
-		this.monitorData = monitorData;
-	}
+    this.url = url;
+    this.headers = Object.assign(kenerHeader, {});
+    this.method = "POST";
+    this.siteData = siteData;
+    this.monitorData = monitorData;
+  }
 
-	transformData(data) {
-		let siteURL = this.siteData.siteURL;
-		let logo =
-			this.siteData.siteURL +
-			(!!process.env.KENER_BASE_PATH ? process.env.KENER_BASE_PATH : "") +
-			this.siteData.logo;
+  transformData(data) {
+    let siteURL = this.siteData.siteURL;
 
-		let color = 13250616; //down;
-		if (data.severity === "warning") {
-			color = 15125089;
-		}
-		if (data.status === "RESOLVED") {
-			color = 5156244;
-		}
-		return {
-			username: this.siteData.siteName,
-			avatar_url: logo,
-			content: `## ${data.alert_name}\n${data.status === "TRIGGERED" ? "🔴 Triggered" : "🟢 Resolved"}\n${data.description}\nClick [here](${data.actions[0].url}) for more.`,
-			embeds: [
-				{
-					title: data.alert_name,
-					description: data.description,
-					url: data.actions[0].url,
-					color: color,
-					fields: [
-						{
-							name: "Monitor",
-							value: data.details.metric,
-							inline: false
-						},
-						{
-							name: "Alert ID",
-							value: data.id,
-							inline: false
-						},
-						{
-							name: "Current Value",
-							value: data.details.current_value,
-							inline: true
-						},
-						{
-							name: "Threshold",
-							value: data.details.threshold,
-							inline: true
-						}
-					],
-					footer: {
-						text: "Kener",
-						icon_url: logo
-					},
-					timestamp: data.timestamp
-				}
-			]
-		};
-	}
+    //remove / if there at the end of the url
+    if (siteURL.endsWith("/")) {
+      siteURL = siteURL.slice(0, -1);
+    }
 
-	async send(data) {
-		try {
-			const response = await fetch(this.url, {
-				method: this.method,
-				headers: this.headers,
-				body: JSON.stringify(this.transformData(data))
-			});
-			return response;
-		} catch (error) {
-			console.error("Error sending webhook", error);
-			return error;
-		}
-	}
+    if (!this.siteData.logo.startsWith("http"))
+      this.siteData.logo = `${siteURL}${!!process.env.KENER_BASE_PATH ? process.env.KENER_BASE_PATH : ""}${this.siteData.logo}`;
+
+    let logo = this.siteData.logo;
+
+    let color = 13250616; //down;
+    if (data.severity === "warning") {
+      color = 15125089;
+    }
+    if (data.status === "RESOLVED") {
+      color = 5156244;
+    }
+    return {
+      username: this.siteData.siteName,
+      avatar_url: logo,
+      content: `## ${data.alert_name}\n${data.status === "TRIGGERED" ? "🔴 Triggered" : "🟢 Resolved"}\n${data.description}\nClick [here](${data.actions[0].url}) for more.`,
+      embeds: [
+        {
+          title: data.alert_name,
+          description: data.description,
+          url: data.actions[0].url,
+          color: color,
+          fields: [
+            {
+              name: "Monitor",
+              value: data.details.metric,
+              inline: false,
+            },
+            {
+              name: "Alert ID",
+              value: data.id,
+              inline: false,
+            },
+            {
+              name: "Current Value",
+              value: data.details.current_value,
+              inline: true,
+            },
+            {
+              name: "Threshold",
+              value: data.details.threshold,
+              inline: true,
+            },
+          ],
+          footer: {
+            text: "Kener",
+            icon_url: logo,
+          },
+          timestamp: data.timestamp,
+        },
+      ],
+    };
+  }
+
+  async send(data) {
+    try {
+      const response = await fetch(this.url, {
+        method: this.method,
+        headers: this.headers,
+        body: JSON.stringify(this.transformData(data)),
+      });
+      return response;
+    } catch (error) {
+      console.error("Error sending webhook", error);
+      return error;
+    }
+  }
 }
 
 export default Discord;

src/lib/server/notification/smtps.js

@@ -3,24 +3,33 @@ import nodemailer from "nodemailer";
 import { HashString } from "../controllers/controller.js";
 const transports = {};
 export default function getSMTPTransport(meta) {
-	//convert meta to string and generate has id
+  //convert meta to string and generate has id
 
-	let transportId = "smtp_" + HashString(JSON.stringify(meta));
+  let transportId = "smtp_" + HashString(JSON.stringify(meta));
 
-	if (!!transports[transportId]) {
-		return transports[transportId];
-	}
+  if (!!transports[transportId]) {
+    return transports[transportId];
+  }
 
-	const transporter = nodemailer.createTransport({
-		host: meta.smtp_host,
-		port: Number(meta.smtp_port) || 587,
-		secure: meta.smtp_secure, // true for 465, false for other ports
-		auth: {
-			user: meta.smtp_user,
-			pass: meta.smtp_pass
-		}
-	});
-	transports[transportId] = transporter;
+  let options = {
+    host: meta.smtp_host,
+    port: Number(meta.smtp_port) || 587,
+    secure: meta.smtp_secure, // true for 465, false for other ports
+    auth: {
+      user: meta.smtp_user,
+      pass: meta.smtp_pass,
+    },
+    tls: {
+      rejectUnauthorized: !!meta.smtp_secure, // false if smtp_secure is 0
+    },
+  };
 
-	return transporter;
+  if (meta.smtp_user === "-" || meta.smtp_pass === "-") {
+    delete options.auth;
+  }
+
+  const transporter = nodemailer.createTransport(options);
+  transports[transportId] = transporter;
+
+  return transporter;
 }

src/lib/server/notification/webhook.js

@@ -3,92 +3,90 @@
 import { GetRequiredSecrets, ReplaceAllOccurrences } from "../tool.js";
 
 class Webhook {
-	url;
-	headers;
-	method;
-	siteData;
-	monitorData;
-	trigger_meta;
+  url;
+  headers;
+  method;
+  siteData;
+  monitorData;
+  trigger_meta;
 
-	constructor(trigger_meta, method, siteData, monitorData) {
-		const kenerHeader = {
-			"Content-Type": "application/json",
-			"User-Agent": "Kener/3.0.0"
-		};
-		let headers = trigger_meta.headers;
-		this.trigger_meta = trigger_meta;
-		this.url = trigger_meta.url;
-		this.headers = kenerHeader;
-		for (let i = 0; i < headers.length; i++) {
-			const header = headers[i];
-			this.headers[header.key] = header.value;
-		}
-		this.method = "POST";
-		this.siteData = siteData;
-		this.monitorData = monitorData;
+  constructor(trigger_meta, method, siteData, monitorData) {
+    const kenerHeader = {
+      "Content-Type": "application/json",
+      "User-Agent": "Kener/3.2.2",
+    };
+    let headers = trigger_meta.headers;
+    this.trigger_meta = trigger_meta;
+    this.url = trigger_meta.url;
+    this.headers = kenerHeader;
+    for (let i = 0; i < headers.length; i++) {
+      const header = headers[i];
+      this.headers[header.key] = header.value;
+    }
+    this.method = "POST";
+    this.siteData = siteData;
+    this.monitorData = monitorData;
 
-		let envSecrets = GetRequiredSecrets(
-			`${this.url} ${JSON.stringify(this.headers)} ${JSON.stringify(this.trigger_meta.webhook_body)}`
-		);
-		//replace secrets in url and headers
+    let envSecrets = GetRequiredSecrets(
+      `${this.url} ${JSON.stringify(this.headers)} ${JSON.stringify(this.trigger_meta.webhook_body)}`,
+    );
+    //replace secrets in url and headers
 
-		for (let i = 0; i < envSecrets.length; i++) {
-			const secret = envSecrets[i];
-			this.url = ReplaceAllOccurrences(this.url, secret.find, secret.replace);
-			this.headers = JSON.parse(
-				ReplaceAllOccurrences(JSON.stringify(this.headers), secret.find, secret.replace)
-			);
-		}
+    for (let i = 0; i < envSecrets.length; i++) {
+      const secret = envSecrets[i];
+      this.url = ReplaceAllOccurrences(this.url, secret.find, secret.replace);
+      this.headers = JSON.parse(ReplaceAllOccurrences(JSON.stringify(this.headers), secret.find, secret.replace));
+    }
 
-		if (!!this.trigger_meta.has_webhook_body && !!this.trigger_meta.webhook_body) {
-			envSecrets = GetRequiredSecrets(this.trigger_meta.webhook_body);
-			for (let i = 0; i < envSecrets.length; i++) {
-				const secret = envSecrets[i];
-				this.trigger_meta.webhook_body = ReplaceAllOccurrences(
-					this.trigger_meta.webhook_body,
-					secret.find,
-					secret.replace
-				);
-			}
-		}
-	}
+    if (!!this.trigger_meta.has_webhook_body && !!this.trigger_meta.webhook_body) {
+      envSecrets = GetRequiredSecrets(this.trigger_meta.webhook_body);
+      for (let i = 0; i < envSecrets.length; i++) {
+        const secret = envSecrets[i];
+        this.trigger_meta.webhook_body = ReplaceAllOccurrences(
+          this.trigger_meta.webhook_body,
+          secret.find,
+          secret.replace,
+        );
+      }
+    }
+  }
 
-	transformData(data) {
-		if (!!!this.trigger_meta.has_webhook_body) return JSON.stringify(data);
-		if (!!!this.trigger_meta.webhook_body) return JSON.stringify(data);
-		let body = this.trigger_meta.webhook_body;
-		body = ReplaceAllOccurrences(body, "${id}", data.id);
-		body = ReplaceAllOccurrences(body, "${alert_name}", data.alert_name);
-		body = ReplaceAllOccurrences(body, "${severity}", data.severity);
-		body = ReplaceAllOccurrences(body, "${status}", data.status);
-		body = ReplaceAllOccurrences(body, "${source}", data.source);
-		body = ReplaceAllOccurrences(body, "${timestamp}", data.timestamp);
-		body = ReplaceAllOccurrences(body, "${description}", data.description);
-		body = ReplaceAllOccurrences(body, "${metric}", data.details.metric);
-		body = ReplaceAllOccurrences(body, "${current_value}", data.details.current_value);
-		body = ReplaceAllOccurrences(body, "${threshold}", data.details.threshold);
-		body = ReplaceAllOccurrences(body, "${action_text}", data.actions[0].text);
-		body = ReplaceAllOccurrences(body, "${action_url}", data.actions[0].url);
-		return body;
-	}
+  transformData(data) {
+    if (!!!this.trigger_meta.has_webhook_body) return JSON.stringify(data);
+    if (!!!this.trigger_meta.webhook_body) return JSON.stringify(data);
+    let body = this.trigger_meta.webhook_body;
+    body = ReplaceAllOccurrences(body, "${id}", data.id);
+    body = ReplaceAllOccurrences(body, "${alert_name}", data.alert_name);
+    body = ReplaceAllOccurrences(body, "${severity}", data.severity);
+    body = ReplaceAllOccurrences(body, "${status}", data.status);
+    body = ReplaceAllOccurrences(body, "${source}", data.source);
+    body = ReplaceAllOccurrences(body, "${timestamp}", data.timestamp);
+    body = ReplaceAllOccurrences(body, "${description}", data.description);
+    body = ReplaceAllOccurrences(body, "${metric}", data.details.metric);
+    body = ReplaceAllOccurrences(body, "${current_value}", data.details.current_value);
+    body = ReplaceAllOccurrences(body, "${threshold}", data.details.threshold);
+    body = ReplaceAllOccurrences(body, "${action_text}", data.actions[0].text);
+    body = ReplaceAllOccurrences(body, "${action_url}", data.actions[0].url);
+    return body;
+  }
 
-	type() {
-		return "webhook";
-	}
+  type() {
+    return "webhook";
+  }
 
-	async send(data) {
-		try {
-			const response = await fetch(this.url, {
-				method: this.method,
-				headers: this.headers,
-				body: this.transformData(data)
-			});
-			return response;
-		} catch (error) {
-			console.error("Error sending webhook", error);
-			return error;
-		}
-	}
+  async send(data) {
+    try {
+      const response = await fetch(this.url, {
+        method: this.method,
+        headers: this.headers,
+        body: this.transformData(data),
+      });
+      return response;
+    } catch (error) {
+      console.error("Error sending webhook", error);
+      return error;
+    }
+  }
 }
 
 export default Webhook;

src/lib/server/page.js

@@ -2,211 +2,201 @@
 // @ts-ignore
 import db from "$lib/server/db/db.js";
 import {
-	GetMinuteStartNowTimestampUTC,
-	BeginningOfDay,
-	StatusObj,
-	ParseUptime,
-	GetDayStartTimestampUTC
+  GetMinuteStartNowTimestampUTC,
+  BeginningOfDay,
+  StatusObj,
+  ParseUptime,
+  GetDayStartTimestampUTC,
+  BeginningOfMinute,
 } from "$lib/server/tool.js";
 import { formatDuration, intervalToDuration } from "date-fns";
 import { fdm, l, summaryTime } from "$lib/i18n/client";
 import {
-	GetDataGroupByDayAlternative,
-	InterpolateData,
-	GetLastStatusBefore
+  GetDataGroupByDayAlternative,
+  InterpolateData,
+  GetLastStatusBefore,
 } from "$lib/server/controllers/controller.js";
+import { UP, DOWN, DEGRADED, NO_DATA } from "$lib/server/constants.js";
 
 function getSummaryDuration(numOfMinute, selectedLang) {
-	// Convert minutes to milliseconds and create duration object
-	const duration = intervalToDuration({
-		start: new Date(0),
-		end: new Date(numOfMinute * 60 * 1000)
-	});
+  // Convert minutes to milliseconds and create duration object
+  const duration = intervalToDuration({
+    start: new Date(0),
+    end: new Date(numOfMinute * 60 * 1000),
+  });
 
-	return fdm(duration, selectedLang);
+  return fdm(duration, selectedLang);
 }
 function getTimezoneOffset(timeZone) {
-	const formatter = new Intl.DateTimeFormat("en-US", { timeZone, timeZoneName: "short" });
-	const parts = formatter.formatToParts(new Date());
-	const timeZoneOffset = parts.find((part) => part.type === "timeZoneName")?.value;
+  const formatter = new Intl.DateTimeFormat("en-US", { timeZone, timeZoneName: "short" });
+  const parts = formatter.formatToParts(new Date());
+  const timeZoneOffset = parts.find((part) => part.type === "timeZoneName")?.value;
 
-	const match = timeZoneOffset.match(/([+-]\d{2}):?(\d{2})/);
-	if (!match) return 0;
+  const match = timeZoneOffset.match(/([+-]\d{2}):?(\d{2})/);
+  if (!match) return 0;
 
-	const [, hours, minutes] = match;
-	return parseInt(hours) * 60 + parseInt(minutes);
+  const [, hours, minutes] = match;
+  return parseInt(hours) * 60 + parseInt(minutes);
 }
 
 function returnStatusClass(val, total, c, barStyle) {
-	// return "api-degraded-10";
-	if (barStyle === undefined || barStyle == "FULL") {
-		return c;
-	} else if (barStyle == "PARTIAL") {
-		let totalHeight = total;
-		let cl = `api-up`;
-		if (val > 0 && val <= 0.1 * totalHeight) {
-			cl = c + "-10";
-		} else if (val > 0.1 * totalHeight && val <= 0.2 * totalHeight) {
-			cl = c + "-20";
-		} else if (val > 0.2 * totalHeight && val <= 0.4 * totalHeight) {
-			cl = c + "-40";
-		} else if (val > 0.4 * totalHeight && val <= 0.6 * totalHeight) {
-			cl = c + "-60";
-		} else if (val > 0.6 * totalHeight && val <= 0.8 * totalHeight) {
-			cl = c + "-80";
-		} else if (val > 0.8 * totalHeight && val < totalHeight) {
-			cl = c + "-90";
-		} else if (val == totalHeight) {
-			cl = c;
-		}
-		return cl;
-	}
-	return c;
+  // return "api-degraded-10";
+  if (barStyle === undefined || barStyle == "FULL") {
+    return c;
+  } else if (barStyle == "PARTIAL") {
+    let totalHeight = total;
+    let cl = `api-up`;
+    if (val > 0 && val <= 0.1 * totalHeight) {
+      cl = c + "-10";
+    } else if (val > 0.1 * totalHeight && val <= 0.2 * totalHeight) {
+      cl = c + "-20";
+    } else if (val > 0.2 * totalHeight && val <= 0.4 * totalHeight) {
+      cl = c + "-40";
+    } else if (val > 0.4 * totalHeight && val <= 0.6 * totalHeight) {
+      cl = c + "-60";
+    } else if (val > 0.6 * totalHeight && val <= 0.8 * totalHeight) {
+      cl = c + "-80";
+    } else if (val > 0.8 * totalHeight && val < totalHeight) {
+      cl = c + "-90";
+    } else if (val == totalHeight) {
+      cl = c;
+    }
+    return cl;
+  }
+  return c;
 }
 
 function getCountOfSimilarStatuesEnd(arr, statusType) {
-	let count = 0;
-	for (let i = arr.length - 1; i >= 0; i--) {
-		if (arr[i].status === statusType) {
-			count++;
-		} else {
-			break;
-		}
-	}
-	return count;
+  let count = 0;
+  for (let i = arr.length - 1; i >= 0; i--) {
+    if (arr[i].status === statusType) {
+      count++;
+    } else {
+      break;
+    }
+  }
+  return count;
 }
 
 const FetchData = async function (site, monitor, localTz, selectedLang, lang) {
-	const secondsInDay = 24 * 60 * 60;
-	//get offset from utc in minutes
-	const now = GetMinuteStartNowTimestampUTC() + 60;
-	const midnight = BeginningOfDay({ timeZone: localTz });
-	const midnight90DaysAgo = midnight - 90 * 24 * 60 * 60;
-	const NO_DATA = "No Data";
-	const midnightTomorrow = midnight + secondsInDay;
-	let offsetInMinutes = parseInt((GetDayStartTimestampUTC(now) - midnight) / 60);
-	const _90Day = {};
-	let latestTimestamp = 0;
+  const secondsInDay = 24 * 60 * 60;
+  //get offset from utc in minutes
+  const nowUTC = GetMinuteStartNowTimestampUTC();
+  const midnightUTC = GetDayStartTimestampUTC(nowUTC);
+  const midnightTz = BeginningOfDay({ timeZone: localTz });
+  const midnight90DaysAgoTz = midnightTz - 90 * 24 * 60 * 60;
+  const NO_DATA = "No Data";
+  let offsetInMinutes = parseInt((GetDayStartTimestampUTC(nowUTC) - midnightTz) / 60);
+  const maxDateTodayTimestampTz = BeginningOfMinute({ timeZone: localTz });
+  const _90Day = {};
+  let latestTimestamp = 0;
 
-	let dbData = await GetDataGroupByDayAlternative(
-		monitor.tag,
-		midnight90DaysAgo,
-		midnightTomorrow,
-		offsetInMinutes
-	);
-	let totalDegradedCount = 0;
-	let totalDownCount = 0;
-	let totalUpCount = 0;
+  let dbData = await GetDataGroupByDayAlternative(
+    monitor.tag,
+    midnight90DaysAgoTz,
+    maxDateTodayTimestampTz,
+    offsetInMinutes,
+  );
+  let totalDegradedCount = 0;
+  let totalDownCount = 0;
+  let totalUpCount = 0;
 
-	for (let i = 0; i < dbData.length; i++) {
-		let dayData = dbData[i];
-		let ts = dayData.timestamp;
-		let cssClass = StatusObj.UP;
-		let summaryDuration = 0;
-		let summaryStatus = "UP";
-		latestTimestamp = ts;
-		totalDegradedCount += dayData.DEGRADED;
-		totalDownCount += dayData.DOWN;
-		totalUpCount += dayData.UP;
+  for (let i = 0; i < dbData.length; i++) {
+    let dayData = dbData[i];
+    let ts = dayData.timestamp;
+    let cssClass = StatusObj.UP;
+    let summaryDuration = 0;
+    let summaryStatus = UP;
+    latestTimestamp = ts;
+    totalDegradedCount += dayData.DEGRADED;
+    totalDownCount += dayData.DOWN;
+    totalUpCount += dayData.UP;
+    if (dayData.DEGRADED >= monitor.day_degraded_minimum_count) {
+      cssClass = returnStatusClass(dayData.DEGRADED, dayData.total, StatusObj.DEGRADED, site.barStyle);
+      summaryDuration = getSummaryDuration(dayData.DEGRADED, selectedLang);
+      summaryStatus = "DEGRADED";
+    }
+    if (dayData.DOWN >= monitor.day_down_minimum_count) {
+      cssClass = returnStatusClass(dayData.DOWN, dayData.total, StatusObj.DOWN, site.barStyle);
 
-		if (dayData.DEGRADED >= monitor.day_degraded_minimum_count) {
-			cssClass = returnStatusClass(
-				dayData.DEGRADED,
-				dayData.total,
-				StatusObj.DEGRADED,
-				site.barStyle
-			);
-			summaryDuration = getSummaryDuration(dayData.DEGRADED, selectedLang);
-			summaryStatus = "DEGRADED";
-		}
-		if (dayData.DOWN >= monitor.day_down_minimum_count) {
-			cssClass = returnStatusClass(
-				dayData.DOWN,
-				dayData.total,
-				StatusObj.DOWN,
-				site.barStyle
-			);
+      summaryDuration = getSummaryDuration(dayData.DOWN, selectedLang);
+      summaryStatus = "DOWN";
+    }
+    if (dayData.NO_DATA === dayData.total) {
+      cssClass = StatusObj.NO_DATA;
+      summaryStatus = NO_DATA;
+    }
 
-			summaryDuration = getSummaryDuration(dayData.DOWN, selectedLang);
-			summaryStatus = "DOWN";
-		}
+    _90Day[ts] = {
+      border: true,
+    };
 
-		_90Day[ts] = {
-			border: true
-		};
+    _90Day[ts].timestamp = ts;
+    _90Day[ts].cssClass = cssClass;
+    _90Day[ts].summaryStatus = l(lang, summaryTime(summaryStatus), {
+      status: l(lang, summaryStatus),
+      duration: summaryDuration,
+    });
 
-		_90Day[ts].timestamp = ts;
-		_90Day[ts].cssClass = cssClass;
-		_90Day[ts].summaryStatus = l(lang, summaryTime(summaryStatus), {
-			status: l(lang, summaryStatus),
-			duration: summaryDuration
-		});
+    _90Day[ts].textClass = cssClass.replace(/-\d+$/, "");
+  }
 
-		_90Day[ts].textClass = cssClass.replace(/-\d+$/, "");
-	}
-	let uptime90DayNumerator = totalUpCount + totalDegradedCount;
-	let uptime90DayDenominator = totalUpCount + totalDownCount + totalDegradedCount;
+  let uptime90DayNumerator = totalUpCount + totalDegradedCount;
+  let uptime90DayDenominator = totalUpCount + totalDownCount + totalDegradedCount;
 
-	//remove degraded from uptime
-	if (monitor.include_degraded_in_downtime === "YES") {
-		uptime90DayNumerator = totalUpCount;
-	}
-	// return _90Day;
-	let uptime90Day = ParseUptime(uptime90DayNumerator, uptime90DayDenominator);
+  //remove degraded from uptime
+  if (monitor.include_degraded_in_downtime === "YES") {
+    uptime90DayNumerator = totalUpCount;
+  }
+  // return _90Day;
+  let uptime90Day = ParseUptime(uptime90DayNumerator, uptime90DayDenominator);
 
-	let summaryDuration = 0;
-	let summaryStatus = "UP";
+  let summaryDuration = 0;
+  let summaryStatus = "UP";
 
-	let summaryColorClass = "api-nodata";
+  let summaryColorClass = "api-nodata";
 
-	let todayDataDb = await db.getMonitoringData(monitor.tag, midnight, midnight + secondsInDay);
-	let anchorStatus = await GetLastStatusBefore(monitor.tag, midnight);
-	todayDataDb = InterpolateData(
-		todayDataDb,
-		midnight,
-		anchorStatus,
-		todayDataDb.length == 0 ? midnight + secondsInDay : null
-	);
+  let todayDataDb = await db.getMonitoringData(monitor.tag, midnightTz, maxDateTodayTimestampTz);
+  let anchorStatus = await GetLastStatusBefore(monitor.tag, midnightTz);
+  todayDataDb = InterpolateData(todayDataDb, midnightTz, anchorStatus, maxDateTodayTimestampTz);
 
-	if (site.summaryStyle === "CURRENT") {
-		summaryColorClass = "api-up";
+  if (site.summaryStyle === "CURRENT") {
+    summaryColorClass = "api-up";
 
-		let lastRow = todayDataDb[todayDataDb.length - 1];
+    let lastRow = todayDataDb[todayDataDb.length - 1];
 
-		if (!!lastRow && lastRow.status == "DEGRADED") {
-			summaryDuration = getSummaryDuration(
-				getCountOfSimilarStatuesEnd(todayDataDb, "DEGRADED"),
-				selectedLang
-			);
-			summaryStatus = "DEGRADED";
-			summaryColorClass = "api-degraded";
-		}
-		if (!!lastRow && lastRow.status == "DOWN") {
-			summaryDuration = getSummaryDuration(
-				getCountOfSimilarStatuesEnd(todayDataDb, "DOWN"),
-				selectedLang
-			);
-			summaryStatus = "DOWN";
-			summaryColorClass = "api-down";
-		}
-		summaryStatus = l(lang, summaryTime(summaryStatus), {
-			status: l(lang, summaryStatus),
-			duration: summaryDuration
-		});
-	} else {
-		let lastData = _90Day[latestTimestamp];
-		summaryColorClass = lastData.cssClass.replace(/-\d+$/, "");
-		summaryDuration = lastData.summaryDuration;
-		summaryStatus = lastData.summaryStatus;
-	}
-	return {
-		_90Day: _90Day,
-		uptime90Day: uptime90Day,
-		summaryStatus: summaryStatus,
-		summaryColorClass: summaryColorClass,
-		barRoundness: site.barRoundness,
-		midnight90DaysAgo: midnight90DaysAgo,
-		midnightTomorrow: midnightTomorrow
-	};
+    if (!!lastRow && lastRow.status == "DEGRADED") {
+      summaryDuration = getSummaryDuration(getCountOfSimilarStatuesEnd(todayDataDb, "DEGRADED"), selectedLang);
+      summaryStatus = "DEGRADED";
+      summaryColorClass = "api-degraded";
+    }
+    if (!!lastRow && lastRow.status == "DOWN") {
+      summaryDuration = getSummaryDuration(getCountOfSimilarStatuesEnd(todayDataDb, "DOWN"), selectedLang);
+      summaryStatus = "DOWN";
+      summaryColorClass = "api-down";
+    }
+    if (lastRow.status === "NO_DATA") {
+      summaryStatus = NO_DATA;
+      summaryColorClass = "api-nodata";
+    }
+    summaryStatus = l(lang, summaryTime(summaryStatus), {
+      status: l(lang, summaryStatus),
+      duration: summaryDuration,
+    });
+  } else {
+    let lastData = _90Day[latestTimestamp];
+    summaryColorClass = lastData.cssClass.replace(/-\d+$/, "");
+    summaryDuration = lastData.summaryDuration;
+    summaryStatus = lastData.summaryStatus;
+  }
+  return {
+    _90Day: _90Day,
+    uptime90Day: uptime90Day,
+    summaryStatus: summaryStatus,
+    summaryColorClass: summaryColorClass,
+    barRoundness: site.barRoundness,
+    midnight90DaysAgo: midnight90DaysAgoTz,
+    maxDateTodayTimestamp: maxDateTodayTimestampTz,
+  };
 };
 export { FetchData };

src/lib/server/services/apiCall.js

@@ -0,0 +1,176 @@
+// @ts-nocheck
+import axios from "axios";
+import { GetRequiredSecrets, ReplaceAllOccurrences } from "../tool.js";
+import { UP, DOWN, DEGRADED, REALTIME, TIMEOUT, ERROR, MANUAL } from "../constants.js";
+import * as cheerio from "cheerio";
+
+const defaultEval = `(async function (statusCode, responseTime, responseRaw, modules) {
+	let statusCodeShort = Math.floor(statusCode/100);
+    if(statusCode == 429 || (statusCodeShort >=2 && statusCodeShort <= 3)) {
+        return {
+			status: 'UP',
+			latency: responseTime,
+        }
+    } 
+	return {
+		status: 'DOWN',
+		latency: responseTime,
+	}
+})`;
+
+class ApiCall {
+  monitor;
+  envSecrets;
+
+  constructor(monitor) {
+    this.monitor = monitor;
+    this.envSecrets = GetRequiredSecrets(
+      `${monitor.type_data.url} ${monitor.type_data.body} ${JSON.stringify(monitor.type_data.headers)}`,
+    );
+  }
+
+  async execute() {
+    let axiosHeaders = {};
+    axiosHeaders["User-Agent"] = "Kener/" + "3.1.0";
+    axiosHeaders["Accept"] = "*/*";
+
+    let body = this.monitor.type_data.body;
+    let url = this.monitor.type_data.url;
+
+    //headers to string
+    let headers = "";
+    if (!!this.monitor.type_data.headers) {
+      headers = JSON.stringify(this.monitor.type_data.headers);
+    }
+
+    let method = this.monitor.type_data.method;
+    let timeout = this.monitor.type_data.timeout || 5000;
+    let tag = this.monitor.tag;
+
+    let monitorEval = !!this.monitor.type_data.eval ? this.monitor.type_data.eval : defaultEval;
+
+    for (let i = 0; i < this.envSecrets.length; i++) {
+      const secret = this.envSecrets[i];
+      if (!!body) {
+        body = ReplaceAllOccurrences(body, secret.find, secret.replace);
+      }
+      if (!!url) {
+        url = ReplaceAllOccurrences(url, secret.find, secret.replace);
+      }
+      if (!!headers) {
+        headers = ReplaceAllOccurrences(headers, secret.find, secret.replace);
+      }
+    }
+
+    if (!!headers) {
+      try {
+        headers = JSON.parse(headers);
+        headers = headers.reduce((acc, header) => {
+          acc[header.key] = header.value;
+          return acc;
+        }, {});
+        axiosHeaders = { ...axiosHeaders, ...headers };
+      } catch (e) {
+        console.log(e);
+      }
+    }
+
+    const options = {
+      method: method,
+      headers: axiosHeaders,
+      timeout: timeout,
+      transformResponse: (r) => r,
+    };
+
+    if (!!body) {
+      options.data = body;
+    }
+    let statusCode = 500;
+    let latency = 0;
+    let resp = "";
+    let timeoutError = false;
+    const start = Date.now();
+    try {
+      let data = await axios(url, options);
+      statusCode = data.status;
+      resp = data.data;
+    } catch (err) {
+      console.log(`Error in apiCall ${tag}`, err.message);
+      if (err.message.startsWith("timeout of") && err.message.endsWith("exceeded")) {
+        timeoutError = true;
+      }
+      if (err.response !== undefined && err.response.status !== undefined) {
+        statusCode = err.response.status;
+      }
+      if (err.response !== undefined && err.response.data !== undefined) {
+        resp = err.response.data;
+      } else {
+        resp = JSON.stringify(resp);
+      }
+    } finally {
+      const end = Date.now();
+      latency = end - start;
+      if (resp === undefined || resp === null) {
+        resp = "";
+      }
+    }
+
+    let evalResp = undefined;
+    let modules = { cheerio };
+
+    try {
+      const evalFunction = new Function(
+        "statusCode",
+        "responseTime",
+        "responseRaw",
+        "modules",
+        `return (${monitorEval})(statusCode, responseTime, responseRaw, modules);`,
+      );
+      evalResp = await evalFunction(statusCode, latency, resp, modules);
+    } catch (error) {
+      console.log(`Error in monitorEval for ${tag}`, error.message);
+    }
+
+    if (evalResp === undefined || evalResp === null) {
+      evalResp = {
+        status: DOWN,
+        latency: latency,
+        type: ERROR,
+      };
+    } else if (
+      evalResp.status === undefined ||
+      evalResp.status === null ||
+      [UP, DOWN, DEGRADED].indexOf(evalResp.status) === -1
+    ) {
+      evalResp = {
+        status: DOWN,
+        latency: latency,
+        type: ERROR,
+      };
+    } else {
+      evalResp.type = REALTIME;
+    }
+
+    let toWrite = {
+      status: DOWN,
+      latency: latency,
+      type: ERROR,
+    };
+    if (evalResp.status !== undefined && evalResp.status !== null) {
+      toWrite.status = evalResp.status;
+    }
+    if (evalResp.latency !== undefined && evalResp.latency !== null) {
+      toWrite.latency = evalResp.latency;
+    }
+    if (evalResp.type !== undefined && evalResp.type !== null) {
+      toWrite.type = evalResp.type;
+    }
+    if (timeoutError) {
+      toWrite.type = TIMEOUT;
+    }
+
+    return toWrite;
+  }
+}
+
+export default ApiCall;

src/lib/server/services/dnsCall.js

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import axios from "axios";
+import DNSResolver from "../dns.js";
+import { UP, DOWN, DEGRADED, REALTIME, TIMEOUT, ERROR, MANUAL } from "../constants.js";
+
+class DnsCall {
+  monitor;
+
+  constructor(monitor) {
+    this.monitor = monitor;
+  }
+
+  async execute() {
+    const dnsResolver = new DNSResolver(this.monitor.type_data.nameServer);
+    let host = this.monitor.type_data.host;
+    let recordType = this.monitor.type_data.lookupRecord;
+    let matchType = this.monitor.type_data.matchType;
+    let values = this.monitor.type_data.values;
+
+    try {
+      let queryStartTime = Date.now();
+      let dnsRes = await dnsResolver.getRecord(host, recordType);
+      let latency = Date.now() - queryStartTime;
+
+      if (dnsRes[recordType] === undefined) {
+        return {
+          status: DOWN,
+          latency: latency,
+          type: REALTIME,
+        };
+      }
+      let data = dnsRes[recordType];
+      let dnsData = data.map((d) => d.data);
+      if (matchType === "ALL") {
+        for (let i = 0; i < values.length; i++) {
+          if (dnsData.indexOf(values[i].trim()) === -1) {
+            return {
+              status: DOWN,
+              latency: latency,
+              type: REALTIME,
+            };
+          }
+        }
+        return {
+          status: UP,
+          latency: latency,
+          type: REALTIME,
+        };
+      } else if (matchType === "ANY") {
+        for (let i = 0; i < values.length; i++) {
+          if (dnsData.indexOf(values[i].trim()) !== -1) {
+            return {
+              status: UP,
+              latency: latency,
+              type: REALTIME,
+            };
+          }
+        }
+        return {
+          status: DOWN,
+          latency: latency,
+          type: REALTIME,
+        };
+      }
+    } catch (error) {
+      console.log("Error in dnsChecker", error);
+      return {
+        status: DOWN,
+        latency: 0,
+        type: REALTIME,
+      };
+    }
+  }
+}
+
+export default DnsCall;

src/lib/server/services/groupCall.js

@@ -0,0 +1,37 @@
+// @ts-nocheck
+import axios from "axios";
+import { GetRequiredSecrets, ReplaceAllOccurrences, Wait } from "../tool.js";
+import { UP, DOWN, DEGRADED, REALTIME, TIMEOUT, ERROR, MANUAL } from "../constants.js";
+import db from "../db/db.js";
+
+async function waitForDataAndReturn(arr, ts, d, maxTime) {
+  await Wait(d);
+  let data = await db.getLastStatusBeforeCombined(arr, ts);
+  if (data) {
+    data.type = REALTIME;
+    return data;
+  } else if (d > maxTime) {
+    return {
+      status: DOWN,
+      latency: 0,
+      type: TIMEOUT,
+    };
+  } else {
+    return await waitForDataAndReturn(arr, ts, d * 2, maxTime);
+  }
+}
+
+class GroupCall {
+  monitor;
+
+  constructor(monitor, timestamp) {
+    this.monitor = monitor;
+  }
+
+  async execute(startOfMinute) {
+    let tagArr = this.monitor.type_data.monitors.map((m) => m.tag);
+    return await waitForDataAndReturn(tagArr, startOfMinute, 500, this.monitor.type_data.timeout);
+  }
+}
+
+export default GroupCall;

src/lib/server/services/heartbeatCall.js

@@ -0,0 +1,44 @@
+// @ts-nocheck
+import { UP, DOWN, DEGRADED, REALTIME, TIMEOUT, ERROR, MANUAL } from "../constants.js";
+import { GetMinuteStartNowTimestampUTC } from "../tool.js";
+import { GetLastHeartbeat } from "../controllers/controller.js";
+
+class HeartbeatCall {
+  monitor;
+
+  constructor(monitor) {
+    this.monitor = monitor;
+  }
+
+  async execute() {
+    let nowMinute = GetMinuteStartNowTimestampUTC();
+    let latestData = await GetLastHeartbeat(this.monitor.tag);
+    if (!latestData) {
+      return {};
+    }
+    let latency = nowMinute - latestData.timestamp;
+    let downRemainingMinutes = Number(this.monitor.type_data.downRemainingMinutes);
+    if (latency > downRemainingMinutes * 60) {
+      return {
+        status: DOWN,
+        latency: latency,
+        type: REALTIME,
+      };
+    }
+    let degradedRemainingMinutes = Number(this.monitor.type_data.degradedRemainingMinutes);
+    if (latency > degradedRemainingMinutes * 60) {
+      return {
+        status: DEGRADED,
+        latency: latency,
+        type: REALTIME,
+      };
+    }
+    return {
+      status: UP,
+      latency: latency,
+      type: REALTIME,
+    };
+  }
+}
+
+export default HeartbeatCall;

src/lib/server/services/pingCall.js

@@ -0,0 +1,71 @@
+// @ts-nocheck
+import axios from "axios";
+import { Ping } from "../ping.js";
+import { UP, DOWN, DEGRADED, REALTIME, TIMEOUT, ERROR, MANUAL } from "../constants.js";
+
+const defaultPingEval = `(async function (arrayOfPings) {
+	let latencyTotal = arrayOfPings.reduce((acc, ping) => {
+		return acc + ping.latency;
+	}, 0);
+
+	let alive = arrayOfPings.reduce((acc, ping) => {
+		return acc && ping.alive;
+	}, true);
+
+	return {
+		status: alive ? 'UP' : 'DOWN',
+		latency: latencyTotal / arrayOfPings.length,
+	}
+})`;
+
+class PingCall {
+  monitor;
+
+  constructor(monitor) {
+    this.monitor = monitor;
+  }
+
+  async execute() {
+    let hosts = this.monitor.type_data.hosts;
+    let pingEval = !!this.monitor.type_data.pingEval ? this.monitor.type_data.pingEval : defaultPingEval;
+    let tag = this.monitor.tag;
+    if (hosts === undefined) {
+      console.log(
+        "Hosts is undefined. The ping monitor has changed in version 3.0.10. Please update your monitor with tag",
+        tag,
+      );
+      return {
+        status: DOWN,
+        latency: 0,
+        type: ERROR,
+      };
+    }
+    let arrayOfPings = [];
+    for (let i = 0; i < hosts.length; i++) {
+      const host = hosts[i];
+      arrayOfPings.push(await Ping(host.type, host.host, host.timeout, host.count));
+    }
+
+    let evalResp = undefined;
+
+    try {
+      const evalFunction = new Function("arrayOfPings", `return (${pingEval})(arrayOfPings);`);
+      evalResp = await evalFunction(arrayOfPings);
+    } catch (error) {
+      console.log(`Error in pingEval for ${tag}`, error.message);
+      return {
+        status: DOWN,
+        latency: 0,
+        type: ERROR,
+      };
+    }
+    //reduce to get the status
+    return {
+      status: evalResp.status,
+      latency: evalResp.latency,
+      type: REALTIME,
+    };
+  }
+}
+
+export default PingCall;

src/lib/server/services/service.js

@@ -0,0 +1,43 @@
+// @ts-nocheck
+import ApiCall from "./apiCall.js";
+import PingCall from "./pingCall.js";
+import TcpCall from "./tcpCall.js";
+import DnsCall from "./dnsCall.js";
+import GroupCall from "./groupCall.js";
+import SSLCall from "./sslCall.js";
+import SqlCall from "./sqlCall.js";
+import HeartbeatCall from "./heartbeatCall.js";
+
+class Service {
+  service;
+
+  constructor(monitor) {
+    if (monitor.monitor_type === "API") {
+      this.service = new ApiCall(monitor);
+    } else if (monitor.monitor_type === "PING") {
+      this.service = new PingCall(monitor);
+    } else if (monitor.monitor_type === "TCP") {
+      this.service = new TcpCall(monitor);
+    } else if (monitor.monitor_type === "DNS") {
+      this.service = new DnsCall(monitor);
+    } else if (monitor.monitor_type === "NONE") {
+      this.service = null;
+    } else if (monitor.monitor_type === "GROUP") {
+      this.service = new GroupCall(monitor);
+    } else if (monitor.monitor_type === "SSL") {
+      this.service = new SSLCall(monitor);
+    } else if (monitor.monitor_type === "SQL") {
+      this.service = new SqlCall(monitor);
+    } else if (monitor.monitor_type === "HEARTBEAT") {
+      this.service = new HeartbeatCall(monitor);
+    } else {
+      console.log("Invalid monitor.monitor_type ", monitor.monitor_type);
+      process.exit(1);
+    }
+  }
+  async execute(...p) {
+    return await this.service.execute(...p);
+  }
+}
+
+export default Service;

src/lib/server/services/sqlCall.js

@@ -0,0 +1,89 @@
+// @ts-nocheck
+import Knex from "knex";
+import { UP, DOWN, DEGRADED, REALTIME, TIMEOUT, ERROR, MANUAL } from "../constants.js";
+import { GetRequiredSecrets, ReplaceAllOccurrences } from "../tool.js";
+
+class SqlCall {
+  monitor;
+  envSecrets;
+  constructor(monitor) {
+    this.monitor = monitor;
+    this.envSecrets = GetRequiredSecrets(`${monitor.type_data.connectionString}`);
+  }
+
+  async execute() {
+    let client = this.monitor.type_data.dbType;
+    let connection = this.monitor.type_data.connectionString;
+    for (let i = 0; i < this.envSecrets.length; i++) {
+      const secret = this.envSecrets[i];
+      connection = ReplaceAllOccurrences(connection, secret.find, secret.replace);
+    }
+    let query = this.monitor.type_data.query;
+    let timeout = this.monitor.type_data.timeout || 5000;
+
+    const startTime = Date.now();
+    let knexInstance = null;
+
+    try {
+      // Create database configuration
+      const config = {
+        client: client,
+        connection: connection,
+        pool: { min: 0, max: 1 },
+        acquireConnectionTimeout: timeout,
+      };
+
+      // Initialize knex
+      knexInstance = Knex(config);
+
+      // Set up a timeout for the query execution
+      const timeoutPromise = new Promise((_, reject) => {
+        setTimeout(() => reject(new Error("Query timeout")), timeout);
+      });
+
+      // Execute query
+      const queryPromise = knexInstance.raw(query);
+
+      // Race the promises to handle timeouts
+      await Promise.race([queryPromise, timeoutPromise]);
+
+      // Calculate latency
+      const latency = Date.now() - startTime;
+
+      return {
+        status: UP,
+        latency: latency,
+        type: REALTIME,
+      };
+    } catch (error) {
+      const latency = Date.now() - startTime;
+
+      // Handle timeout specifically
+      if (error.message === "Query timeout") {
+        return {
+          status: DOWN,
+          latency: latency,
+          type: TIMEOUT,
+        };
+      }
+
+      // Handle other connection or query errors
+      return {
+        status: DOWN,
+        latency: latency,
+        type: ERROR,
+      };
+    } finally {
+      // Destroy knex instance to clean up connections
+      if (knexInstance) {
+        try {
+          await knexInstance.destroy();
+        } catch (destroyError) {
+          console.error("Error closing database connection:", destroyError);
+        }
+      }
+    }
+  }
+}
+
+export default SqlCall;

src/lib/server/services/sslCall.js

@@ -0,0 +1,74 @@
+// @ts-nocheck
+import tls from "tls";
+import { UP, DOWN, DEGRADED, REALTIME, TIMEOUT, ERROR, MANUAL } from "../constants.js";
+
+const getSSLExpiry = (domain, port = 443) => {
+  return new Promise((resolve, reject) => {
+    const startTime = Date.now();
+    const socket = tls.connect(port, domain, { servername: domain }, () => {
+      const { valid_to } = socket.getPeerCertificate();
+      if (!valid_to) {
+        reject(new Error("No certificate found."));
+        return;
+      }
+      const latency = Date.now() - startTime;
+      const timeTillExpiryMs = new Date(valid_to) - new Date();
+      resolve({
+        domain,
+        expiryDate: new Date(valid_to),
+        timeTillExpiryMs,
+        latency,
+      });
+      socket.end();
+    });
+
+    socket.on("error", (err) => reject(err));
+  });
+};
+
+class SSLCall {
+  monitor;
+
+  constructor(monitor) {
+    this.monitor = monitor;
+  }
+
+  async execute() {
+    let domain = this.monitor.type_data.host;
+    let port = parseInt(this.monitor.type_data.port || "443");
+    let degradedRemainingHours = Number(this.monitor.type_data.degradedRemainingHours);
+    let downRemainingHours = Number(this.monitor.type_data.downRemainingHours);
+    try {
+      const { timeTillExpiryMs, latency } = await getSSLExpiry(domain, port);
+      const timeTillExpiryHours = timeTillExpiryMs / 1000 / 60 / 60;
+      if (timeTillExpiryHours > degradedRemainingHours) {
+        return {
+          status: UP,
+          latency: latency,
+          type: REALTIME,
+        };
+      } else if (timeTillExpiryHours > downRemainingHours) {
+        return {
+          status: DEGRADED,
+          latency: latency,
+          type: REALTIME,
+        };
+      } else {
+        return {
+          status: DOWN,
+          latency: latency,
+          type: REALTIME,
+        };
+      }
+    } catch (error) {
+      console.log(`Error checking SSL for ${domain}:`, error.message);
+      return {
+        status: DOWN,
+        latency: 0,
+        type: ERROR,
+      };
+    }
+  }
+}
+
+export default SSLCall;

src/lib/server/services/tcpCall.js

@@ -0,0 +1,76 @@
+// @ts-nocheck
+import axios from "axios";
+import { TCP } from "../ping.js";
+import { UP, DOWN, DEGRADED, REALTIME, TIMEOUT, ERROR, MANUAL } from "../constants.js";
+
+const defaultTcpEval = `(async function (arrayOfPings) {
+	let latencyTotal = arrayOfPings.reduce((acc, ping) => {
+		return acc + ping.latency;
+	}, 0);
+
+	let alive = arrayOfPings.reduce((acc, ping) => {
+		if (ping.status === "open") {
+			return acc && true;
+		} else {
+			return false;
+		}
+	}, true);
+
+	return {
+		status: alive ? 'UP' : 'DOWN',
+		latency: latencyTotal / arrayOfPings.length,
+	}
+})`;
+
+class TcpCall {
+  monitor;
+
+  constructor(monitor) {
+    this.monitor = monitor;
+  }
+
+  async execute() {
+    let hosts = this.monitor.type_data.hosts;
+    let tcpEval = !!this.monitor.type_data.tcpEval ? this.monitor.type_data.tcpEval : defaultTcpEval;
+    let tag = this.monitor.tag;
+
+    if (hosts === undefined) {
+      console.log(
+        "Hosts is undefined. The ping monitor has changed in version 3.0.10. Please update your monitor with tag",
+        tag,
+      );
+      return {
+        status: DOWN,
+        latency: 0,
+        type: ERROR,
+      };
+    }
+    let arrayOfPings = [];
+    for (let i = 0; i < hosts.length; i++) {
+      const host = hosts[i];
+      arrayOfPings.push(await TCP(host.type, host.host, host.port, host.timeout));
+    }
+
+    let evalResp = undefined;
+
+    try {
+      const evalFunction = new Function("arrayOfPings", `return (${tcpEval})(arrayOfPings);`);
+      evalResp = await evalFunction(arrayOfPings);
+    } catch (error) {
+      console.log(`Error in tcpEval for ${tag}`, error.message);
+      return {
+        status: DOWN,
+        latency: 0,
+        type: ERROR,
+      };
+    }
+    //reduce to get the status
+    return {
+      status: evalResp.status,
+      latency: evalResp.latency,
+      type: REALTIME,
+    };
+  }
+}
+
+export default TcpCall;

src/lib/server/startup.js

@@ -12,70 +12,73 @@ import { dirname } from "path";
 
 const jobs = [];
 process.env.TZ = "UTC";
+let isStartUP = true;
 
-const jobSchedule = async () => {
-	const activeMonitors = (await GetMonitorsParsed({ status: "ACTIVE" })).map((m) => {
-		return {
-			...m,
-			hash: "Tag: " + m.tag + " Hash:" + HashString(JSON.stringify(m))
-		};
-	});
+const scheduleCronJobs = async () => {
+  // Fetch and map all active monitors, creating a unique hash for each
+  const activeMonitors = (await GetMonitorsParsed({ status: "ACTIVE" })).map((monitor) => ({
+    ...monitor,
+    hash: "Tag: " + monitor.tag + " Hash:" + HashString(JSON.stringify(monitor)),
+  }));
 
-	//stop and remove jobs not present in activeMonitors
-	for (let i = 0; i < jobs.length; i++) {
-		const job = jobs[i];
-		const monitor = activeMonitors.find((m) => m.hash === job.name);
-		if (!monitor) {
-			job.stop();
-			jobs.splice(i, 1);
-			i--;
-			console.log("REMOVING JOB WITH NAME " + job.name);
-		}
-	}
+  // Remove any cron jobs that are no longer in activeMonitors
+  for (let i = 0; i < jobs.length; i++) {
+    const existingJob = jobs[i];
+    const matchingMonitor = activeMonitors.find((m) => m.hash === existingJob.name);
+    if (!matchingMonitor) {
+      existingJob.stop();
+      jobs.splice(i, 1);
+      console.log("REMOVING JOB WITH NAME " + existingJob.name);
+      i--;
+    }
+  }
 
-	//add new jobs from activeMonitors if not present already in jobs
-	for (let i = 0; i < activeMonitors.length; i++) {
-		const monitor = activeMonitors[i];
-		const job = jobs.find((j) => j.name === monitor.hash);
-		if (!job) {
-			const j = Cron(
-				monitor.cron,
-				async () => {
-					await Minuter(monitor);
-				},
-				{
-					protect: true,
-					name: monitor.hash
-				}
-			);
-			console.log("ADDING NEW JOB WITH NAME " + j.name);
-			j.trigger();
-			jobs.push(j);
-		}
-	}
+  // Create new cron jobs for monitors that don't already have one
+  for (const monitor of activeMonitors) {
+    const existingJob = jobs.find((j) => j.name === monitor.hash);
+    if (!existingJob) {
+      const newJob = Cron(
+        monitor.cron,
+        async (job) => {
+          await Minuter(monitor);
+        },
+        {
+          protect: true,
+          name: monitor.hash,
+        },
+      );
+      console.log("ADDING NEW JOB WITH NAME " + newJob.name);
+      if (isStartUP) {
+        newJob.trigger();
+      }
+
+      jobs.push(newJob);
+    }
+  }
+  isStartUP = false;
 };
 
 async function Startup() {
-	const mainJob = Cron(
-		"* * * * *",
-		async () => {
-			await jobSchedule();
-		},
-		{
-			protect: true,
-			name: "Main Job"
-		}
-	);
+  const mainJob = Cron(
+    "* * * * *",
+    async () => {
+      await scheduleCronJobs();
+    },
+    {
+      protect: true,
+      name: "Main Job",
+    },
+  );
 
-	mainJob.trigger();
+  mainJob.trigger();
 
-	figlet("Kener is UP!", function (err, data) {
-		if (err) {
-			console.log("Something went wrong...");
-			return;
-		}
-		console.log(data);
-	});
+  figlet("Kener is UP!", function (err, data) {
+    if (err) {
+      console.log("Something went wrong...");
+      return;
+    }
+    console.log(data);
+  });
 }
 
 // Call Startup() if not imported as a module
@@ -83,7 +86,7 @@ const __filename = fileURLToPath(import.meta.url);
 const __dirname = dirname(__filename);
 
 if (process.argv[1] === __filename) {
-	Startup();
+  Startup();
 }
 
 export default Startup;

src/lib/server/tool.js

@@ -1,325 +1,318 @@
 // @ts-nocheck
 import { AllRecordTypes } from "./constants.js";
+import knexOb from "../../../knexfile.js";
 
 import dotenv from "dotenv";
 dotenv.config();
 const IsValidURL = function (url) {
-	return /^(http|https):\/\/[^ "]+$/.test(url);
+  return /^(http|https):\/\/[^ "]+$/.test(url);
 };
 const IsStringURLSafe = function (str) {
-	const regex = /^[A-Za-z0-9\-_.~]+$/;
-	return regex.test(str);
+  const regex = /^[A-Za-z0-9\-_.~]+$/;
+  return regex.test(str);
 };
 const IsValidHTTPMethod = function (method) {
-	return /^(GET|POST|PUT|DELETE|HEAD|OPTIONS|PATCH)$/.test(method);
+  return /^(GET|POST|PUT|DELETE|HEAD|OPTIONS|PATCH)$/.test(method);
 };
 
 //return given timestamp in UTC
 const GetNowTimestampUTC = function () {
-	//use js date instead of moment
-	const now = new Date();
-	const timestamp = now.getTime();
-	return Math.floor(timestamp / 1000);
+  //use js date instead of moment
+  const now = new Date();
+  const timestamp = now.getTime();
+  return Math.floor(timestamp / 1000);
 };
 //return given timestamp minute start timestamp in UTC
 const GetMinuteStartTimestampUTC = function (timestamp) {
-	//use js date instead of moment
-	const now = new Date(timestamp * 1000);
-	const minuteStart = new Date(
-		now.getFullYear(),
-		now.getMonth(),
-		now.getDate(),
-		now.getHours(),
-		now.getMinutes(),
-		0,
-		0
-	);
-	const minuteStartTimestamp = minuteStart.getTime();
-	return Math.floor(minuteStartTimestamp / 1000);
+  //use js date instead of moment
+  const now = new Date(timestamp * 1000);
+  const minuteStart = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+    now.getHours(),
+    now.getMinutes(),
+    0,
+    0,
+  );
+  const minuteStartTimestamp = minuteStart.getTime();
+  return Math.floor(minuteStartTimestamp / 1000);
 };
 //return current timestamp minute start timestamp in UTC
 const GetMinuteStartNowTimestampUTC = function () {
-	//use js date instead of moment
-	const now = new Date();
-	const minuteStart = new Date(
-		now.getFullYear(),
-		now.getMonth(),
-		now.getDate(),
-		now.getHours(),
-		now.getMinutes(),
-		0,
-		0
-	);
-	const minuteStartTimestamp = minuteStart.getTime();
-	return Math.floor(minuteStartTimestamp / 1000);
+  //use js date instead of moment
+  const now = new Date();
+  const minuteStart = new Date(
+    now.getFullYear(),
+    now.getMonth(),
+    now.getDate(),
+    now.getHours(),
+    now.getMinutes(),
+    0,
+    0,
+  );
+  const minuteStartTimestamp = minuteStart.getTime();
+  return Math.floor(minuteStartTimestamp / 1000);
 };
 //return given timestamp day start timestamp in UTC
 const GetDayStartTimestampUTC = function (timestamp) {
-	//use js date instead of moment
-	const now = new Date(timestamp * 1000);
-	const dayStart = new Date(
-		Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0)
-	);
-	const dayStartTimestamp = dayStart.getTime();
-	return Math.floor(dayStartTimestamp / 1000);
+  //use js date instead of moment
+  const now = new Date(timestamp * 1000);
+  const dayStart = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 0, 0, 0, 0));
+  const dayStartTimestamp = dayStart.getTime();
+  return Math.floor(dayStartTimestamp / 1000);
 };
 const GetDayEndTimestampUTC = function (timestamp) {
-	//use js date instead of moment
-	const now = new Date(timestamp * 1000);
-	const dayEnd = new Date(
-		Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999)
-	);
-	const dayEndTimestamp = dayEnd.getTime();
-	return Math.floor(dayEndTimestamp / 1000) + 60;
+  //use js date instead of moment
+  const now = new Date(timestamp * 1000);
+  const dayEnd = new Date(Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 23, 59, 59, 999));
+  const dayEndTimestamp = dayEnd.getTime();
+  return Math.floor(dayEndTimestamp / 1000) + 60;
 };
 const DurationInMinutes = function (start, end) {
-	return Math.floor((end - start) / 60);
+  return Math.floor((end - start) / 60);
 };
 const GetDayStartWithOffset = function (timeStampInSeconds, offsetInMinutes) {
-	const then = new Date(GetMinuteStartTimestampUTC(timeStampInSeconds) * 1000);
-	let dayStartThen = GetDayStartTimestampUTC(then.getTime() / 1000);
-	let dayStartTomorrow = dayStartThen + 24 * 60 * 60;
-	let dayStartYesterday = dayStartThen - 24 * 60 * 60;
-	//have to figure out when to add a day
-	//20-12AM 			[21-12AM] 	=21:630  xtm 	[22-12AM]   xtd	   =22:630 		23-12AM
+  const then = new Date(GetMinuteStartTimestampUTC(timeStampInSeconds) * 1000);
+  let dayStartThen = GetDayStartTimestampUTC(then.getTime() / 1000);
+  let dayStartTomorrow = dayStartThen + 24 * 60 * 60;
+  let dayStartYesterday = dayStartThen - 24 * 60 * 60;
+  //have to figure out when to add a day
+  //20-12AM 			[21-12AM] 	=21:630  xtm 	[22-12AM]   xtd	   =22:630 		23-12AM
 
-	//if xtm - 330 >  1 day , add a day to xtm - 330
+  //if xtm - 330 >  1 day , add a day to xtm - 330
 
-	if (offsetInMinutes < 0) {
-		//add one day to dayStartThen
-		dayStartThen = dayStartThen + 24 * 60 * 60;
-	}
-	return dayStartThen + offsetInMinutes * 60;
+  if (offsetInMinutes < 0) {
+    //add one day to dayStartThen
+    dayStartThen = dayStartThen + 24 * 60 * 60;
+  }
+  return dayStartThen + offsetInMinutes * 60;
 };
 const BeginningOfDay = (options = {}) => {
-	const { date = new Date(), timeZone } = options;
-	const parts = Intl.DateTimeFormat("en-US", {
-		timeZone,
-		hourCycle: "h23",
-		hour: "numeric",
-		minute: "numeric",
-		second: "numeric"
-	}).formatToParts(date);
-	const hour = parseInt(parts.find((i) => i.type === "hour").value);
-	const minute = parseInt(parts.find((i) => i.type === "minute").value);
-	const second = parseInt(parts.find((i) => i.type === "second").value);
-	const dt = new Date(
-		1000 * Math.floor((date - hour * 3600000 - minute * 60000 - second * 1000) / 1000)
-	);
-	return dt.getTime() / 1000;
+  const { date = new Date(), timeZone } = options;
+  const parts = Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hourCycle: "h23",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+  }).formatToParts(date);
+  const hour = parseInt(parts.find((i) => i.type === "hour").value);
+  const minute = parseInt(parts.find((i) => i.type === "minute").value);
+  const second = parseInt(parts.find((i) => i.type === "second").value);
+  const dt = new Date(1000 * Math.floor((date - hour * 3600000 - minute * 60000 - second * 1000) / 1000));
+  return dt.getTime() / 1000;
 };
 const BeginningOfMinute = (options = {}) => {
-	const { date = new Date(), timeZone } = options;
-	const parts = Intl.DateTimeFormat("en-US", {
-		timeZone,
-		hourCycle: "h23",
-		second: "numeric"
-	}).formatToParts(date);
-	const second = parseInt(parts.find((i) => i.type === "second").value);
-	const dt = new Date(1000 * Math.floor((date - second * 1000) / 1000));
-	return dt.getTime() / 1000;
+  const { date = new Date(), timeZone } = options;
+  const parts = Intl.DateTimeFormat("en-US", {
+    timeZone,
+    hourCycle: "h23",
+    second: "numeric",
+  }).formatToParts(date);
+  const second = parseInt(parts.find((i) => i.type === "second").value);
+  const dt = new Date(1000 * Math.floor((date - second * 1000) / 1000));
+  return dt.getTime() / 1000;
 };
 const ValidateIpAddress = function (input) {
-	// Check if input is a valid IPv4 address
-	const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
-	if (ipv4Regex.test(input)) {
-		return "IPv4";
-	}
+  // Check if input is a valid IPv4 address
+  const ipv4Regex = /^(\d{1,3}\.){3}\d{1,3}$/;
+  if (ipv4Regex.test(input)) {
+    return "IPv4";
+  }
 
-	// Check if input is a valid IPv6 address
-	const ipv6Regex = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/;
-	if (ipv6Regex.test(input)) {
-		return "IPv6";
-	}
+  // Check if input is a valid IPv6 address
+  const ipv6Regex = /^([0-9a-fA-F]{1,4}:){7}[0-9a-fA-F]{1,4}$/;
+  if (ipv6Regex.test(input)) {
+    return "IPv6";
+  }
 
-	// Check if input is a valid domain name
-	const domainRegex = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
-	if (domainRegex.test(input)) {
-		return "Domain Name";
-	}
+  // Check if input is a valid domain name
+  const domainRegex = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
+  if (domainRegex.test(input)) {
+    return "Domain Name";
+  }
 
-	// If none of the above conditions match, the input is invalid
-	return "Invalid";
+  // If none of the above conditions match, the input is invalid
+  return "Invalid";
 };
 function checkIfDuplicateExists(arr) {
-	return new Set(arr).size !== arr.length;
+  return new Set(arr).size !== arr.length;
 }
 function GetWordsStartingWithDollar(text) {
-	const regex = /\$\w+/g;
-	const wordsArray = text.match(regex);
-	return wordsArray || [];
+  const regex = /\$\w+/g;
+  const wordsArray = text.match(regex);
+  return wordsArray || [];
 }
 const StatusObj = {
-	UP: "api-up",
-	DEGRADED: "api-degraded",
-	DOWN: "api-down",
-	NO_DATA: "api-nodata"
+  UP: "api-up",
+  DEGRADED: "api-degraded",
+  DOWN: "api-down",
+  NO_DATA: "api-nodata",
 };
 // @ts-ignore
 const ParseUptime = function (up, all) {
-	if (all === 0) return String("-");
-	if (up == 0) return String("0");
-	if (up == all) {
-		return String(((up / all) * parseFloat(100)).toFixed(0));
-	}
-	//return 50% as 50% and not 50.0000%
-	if (((up / all) * 100) % 10 == 0) {
-		return String(((up / all) * parseFloat(100)).toFixed(0));
-	}
-	return String(((up / all) * parseFloat(100)).toFixed(4));
+  if (all === 0) return String("-");
+  if (up == 0) return String("0");
+  if (up == all) {
+    return String(((up / all) * parseFloat(100)).toFixed(0));
+  }
+  //return 50% as 50% and not 50.0000%
+  if (((up / all) * 100) % 10 == 0) {
+    return String(((up / all) * parseFloat(100)).toFixed(0));
+  }
+  return String(((up / all) * parseFloat(100)).toFixed(4));
 };
 const ParsePercentage = function (n) {
-	if (isNaN(n)) return "-";
-	if (n == 0) {
-		return "0";
-	}
-	if (n == 100) {
-		return "100";
-	}
-	return n.toFixed(4);
+  if (isNaN(n)) return "-";
+  if (n == 0) {
+    return "0";
+  }
+  if (n == 100) {
+    return "100";
+  }
+  return n.toFixed(4);
 };
 
 //valid domain name
 function IsValidHost(domain) {
-	const regex = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
-	return regex.test(domain);
+  const regex = /^[a-zA-Z0-9]+([\-\.]{1}[a-zA-Z0-9]+)*\.[a-zA-Z]{2,}$/;
+  return regex.test(domain);
 }
 
 //valid nameserver
 function IsValidNameServer(nameServer) {
-	//8.8.8.8 example
-	const regex = /^([0-9]{1,3}\.){3}[0-9]{1,3}$/;
-	return regex.test(nameServer);
+  //8.8.8.8 example
+  const regex = /^([0-9]{1,3}\.){3}[0-9]{1,3}$/;
+  return regex.test(nameServer);
 }
 
 //valid dns record type
 function IsValidRecordType(recordType) {
-	return AllRecordTypes.hasOwnProperty(recordType);
+  return AllRecordTypes.hasOwnProperty(recordType);
 }
 function ReplaceAllOccurrences(originalString, searchString, replacement) {
-	const regex = new RegExp(`\\${searchString}`, "g");
-	const replacedString = originalString.replace(regex, replacement);
-	return replacedString;
+  const regex = new RegExp(`\\${searchString}`, "g");
+  const replacedString = originalString.replace(regex, replacement);
+  return replacedString;
 }
 
 function GetRequiredSecrets(str) {
-	let envSecrets = [];
-	const requiredSecrets = GetWordsStartingWithDollar(str).map((x) => x.substr(1));
-	for (const [key, value] of Object.entries(process.env)) {
-		if (requiredSecrets.indexOf(key) !== -1) {
-			envSecrets.push({
-				find: `$${key}`,
-				replace: value
-			});
-		}
-	}
-	return envSecrets;
+  let envSecrets = [];
+  const requiredSecrets = GetWordsStartingWithDollar(str).map((x) => x.substr(1));
+  for (const [key, value] of Object.entries(process.env)) {
+    if (requiredSecrets.indexOf(key) !== -1) {
+      envSecrets.push({
+        find: `$${key}`,
+        replace: value,
+      });
+    }
+  }
+  return envSecrets;
 }
 
 function ValidateMonitorAlerts(alerts) {
-	if (!alerts) {
-		console.log("Alerts object is not provided.");
-		return false;
-	}
-	// if down degraded not present return false
-	if (!alerts.hasOwnProperty("DOWN") && !alerts.hasOwnProperty("DEGRADED")) {
-		console.log("Alerts object does not have DOWN or DEGRADED properties.");
-		return false;
-	}
-	let statues = Object.keys(alerts);
-	//can be either DOWN or DEGRADED
-	let validKeys = ["DOWN", "DEGRADED"];
-	for (let i = 0; i < statues.length; i++) {
-		const keyName = statues[i];
-		if (!validKeys.includes(keyName)) {
-			console.log(`Invalid key found in alerts: ${keyName}`);
-			return false;
-		}
-	}
-	for (const key in alerts) {
-		if (Object.prototype.hasOwnProperty.call(alerts, key)) {
-			const element = alerts[key];
-			const triggers = element.triggers;
-			//if triggers not present return false
-			if (!element.hasOwnProperty("triggers")) {
-				console.log(`Triggers not present for key: ${key}`);
-				return false;
-			}
-			//if length of triggers is 0 return false
-			if (triggers.length === 0) {
-				console.log(`Triggers length is 0 for key: ${key}`);
-				return false;
-			}
-			if (
-				!element.hasOwnProperty("failureThreshold") ||
-				!element.hasOwnProperty("successThreshold")
-			) {
-				console.log(`Thresholds not present for key: ${key}`);
-				return false;
-			}
-			if (
-				element.hasOwnProperty("failureThreshold") &&
-				!Number.isInteger(element.failureThreshold)
-			) {
-				console.log(`Failure threshold is not an integer for key: ${key}`);
-				return false;
-			}
-			if (
-				element.hasOwnProperty("successThreshold") &&
-				!Number.isInteger(element.successThreshold)
-			) {
-				console.log(`Success threshold is not an integer for key: ${key}`);
-				return false;
-			}
-			if (element.hasOwnProperty("failureThreshold") && element.failureThreshold <= 0) {
-				console.log(`Failure threshold is less than or equal to 0 for key: ${key}`);
-				return false;
-			}
-			if (element.hasOwnProperty("successThreshold") && element.successThreshold <= 0) {
-				console.log(`Success threshold is less than or equal to 0 for key: ${key}`);
-				return false;
-			}
-		}
-	}
-	return true;
+  if (!alerts) {
+    console.log("Alerts object is not provided.");
+    return false;
+  }
+  // if down degraded not present return false
+  if (!alerts.hasOwnProperty("DOWN") && !alerts.hasOwnProperty("DEGRADED")) {
+    console.log("Alerts object does not have DOWN or DEGRADED properties.");
+    return false;
+  }
+  let statues = Object.keys(alerts);
+  //can be either DOWN or DEGRADED
+  let validKeys = ["DOWN", "DEGRADED"];
+  for (let i = 0; i < statues.length; i++) {
+    const keyName = statues[i];
+    if (!validKeys.includes(keyName)) {
+      console.log(`Invalid key found in alerts: ${keyName}`);
+      return false;
+    }
+  }
+  for (const key in alerts) {
+    if (Object.prototype.hasOwnProperty.call(alerts, key)) {
+      const element = alerts[key];
+      const triggers = element.triggers;
+      //if triggers not present return false
+      if (!element.hasOwnProperty("triggers")) {
+        console.log(`Triggers not present for key: ${key}`);
+        return false;
+      }
+      //if length of triggers is 0 return false
+      if (triggers.length === 0) {
+        console.log(`Triggers length is 0 for key: ${key}`);
+        return false;
+      }
+      if (!element.hasOwnProperty("failureThreshold") || !element.hasOwnProperty("successThreshold")) {
+        console.log(`Thresholds not present for key: ${key}`);
+        return false;
+      }
+      if (element.hasOwnProperty("failureThreshold") && !Number.isInteger(element.failureThreshold)) {
+        console.log(`Failure threshold is not an integer for key: ${key}`);
+        return false;
+      }
+      if (element.hasOwnProperty("successThreshold") && !Number.isInteger(element.successThreshold)) {
+        console.log(`Success threshold is not an integer for key: ${key}`);
+        return false;
+      }
+      if (element.hasOwnProperty("failureThreshold") && element.failureThreshold <= 0) {
+        console.log(`Failure threshold is less than or equal to 0 for key: ${key}`);
+        return false;
+      }
+      if (element.hasOwnProperty("successThreshold") && element.successThreshold <= 0) {
+        console.log(`Success threshold is less than or equal to 0 for key: ${key}`);
+        return false;
+      }
+    }
+  }
+  return true;
 }
 function GenerateRandomColor() {
-	var randomColor = Math.floor(Math.random() * 16777215).toString(16);
-	return randomColor;
+  var randomColor = Math.floor(Math.random() * 16777215).toString(16);
+  return randomColor;
 }
 
 //wait for x ms promise
 function Wait(ms) {
-	return new Promise((resolve) => setTimeout(resolve, ms));
+  return new Promise((resolve) => setTimeout(resolve, ms));
 }
 function MaskString(str) {
-	return "*".repeat(str.length - 4) + str.slice(-4);
+  return "*".repeat(str.length - 4) + str.slice(-4);
 }
+
+function GetDbType() {
+  //sqlite, postgresql, mysql
+  return knexOb.databaseType;
+}
+
 export {
-	IsValidURL,
-	IsValidHTTPMethod,
-	GetMinuteStartTimestampUTC,
-	GetNowTimestampUTC,
-	GetDayStartTimestampUTC,
-	GetMinuteStartNowTimestampUTC,
-	DurationInMinutes,
-	GetDayStartWithOffset,
-	BeginningOfDay,
-	IsStringURLSafe,
-	ValidateIpAddress,
-	checkIfDuplicateExists,
-	GetWordsStartingWithDollar,
-	StatusObj,
-	ParseUptime,
-	ParsePercentage,
-	IsValidHost,
-	IsValidRecordType,
-	IsValidNameServer,
-	ReplaceAllOccurrences,
-	GetRequiredSecrets,
-	ValidateMonitorAlerts,
-	GenerateRandomColor,
-	BeginningOfMinute,
-	Wait,
-	MaskString
+  IsValidURL,
+  IsValidHTTPMethod,
+  GetMinuteStartTimestampUTC,
+  GetNowTimestampUTC,
+  GetDayStartTimestampUTC,
+  GetMinuteStartNowTimestampUTC,
+  DurationInMinutes,
+  GetDayStartWithOffset,
+  BeginningOfDay,
+  IsStringURLSafe,
+  ValidateIpAddress,
+  checkIfDuplicateExists,
+  GetWordsStartingWithDollar,
+  StatusObj,
+  ParseUptime,
+  ParsePercentage,
+  IsValidHost,
+  IsValidRecordType,
+  IsValidNameServer,
+  ReplaceAllOccurrences,
+  GetRequiredSecrets,
+  ValidateMonitorAlerts,
+  GenerateRandomColor,
+  BeginningOfMinute,
+  Wait,
+  MaskString,
+  GetDbType,
 };

src/lib/server/webhook.js

@@ -1,154 +1,155 @@
 // @ts-nocheck
 import {
-	GetMinuteStartNowTimestampUTC,
-	GetNowTimestampUTC,
-	GetMinuteStartTimestampUTC,
-	ParseUptime,
-	GetDayStartTimestampUTC
+  GetMinuteStartNowTimestampUTC,
+  GetNowTimestampUTC,
+  GetMinuteStartTimestampUTC,
+  ParseUptime,
+  GetDayStartTimestampUTC,
 } from "./tool.js";
 import db from "./db/db.js";
+import { WEBHOOK } from "./constants.js";
 
 import { GetMonitors, VerifyAPIKey } from "./controllers/controller.js";
 
 const GetAllTags = async function () {
-	let tags = [];
-	let monitors = [];
-	try {
-		monitors = await GetMonitors({
-			status: "ACTIVE"
-		});
-		tags = monitors.map((monitor) => monitor.tag);
-	} catch (err) {
-		return [];
-	}
-	return tags;
+  let tags = [];
+  let monitors = [];
+  try {
+    monitors = await GetMonitors({
+      status: "ACTIVE",
+    });
+    tags = monitors.map((monitor) => monitor.tag);
+  } catch (err) {
+    return [];
+  }
+  return tags;
 };
 const CheckIfValidTag = async function (tag) {
-	let tags = [];
-	try {
-		let monitor = await db.getMonitorByTag(tag);
-		if (!!!monitor) {
-			throw new Error("not a valid tag");
-		}
-		if (monitor.status != "ACTIVE") {
-			throw new Error("monitor is not active");
-		}
-	} catch (err) {
-		return false;
-	}
-	return true;
+  let tags = [];
+  try {
+    let monitor = await db.getMonitorByTag(tag);
+    if (!!!monitor) {
+      throw new Error("not a valid tag");
+    }
+    if (monitor.status != "ACTIVE") {
+      throw new Error("monitor is not active");
+    }
+  } catch (err) {
+    return false;
+  }
+  return true;
 };
 const auth = async function (request) {
-	const authHeader = request.headers.get("authorization");
-	const authToken = authHeader?.replace("Bearer ", "");
+  const authHeader = request.headers.get("authorization");
+  const authToken = authHeader?.replace("Bearer ", "");
 
-	if ((await VerifyAPIKey(authToken)) === false) {
-		return new Error("invalid token");
-	}
+  if ((await VerifyAPIKey(authToken)) === false) {
+    return new Error("invalid token");
+  }
 
-	return null;
+  return null;
 };
 const store = async function (data) {
-	const tag = data.tag;
-	//remove Bearer from start in authHeader
+  const tag = data.tag;
+  //remove Bearer from start in authHeader
 
-	const resp = {};
-	if (data.status === undefined || ["UP", "DOWN", "DEGRADED"].indexOf(data.status) === -1) {
-		return { error: "status missing", status: 400 };
-	}
-	if (data.latency === undefined || isNaN(data.latency)) {
-		return { error: "latency missing or not a number", status: 400 };
-	}
-	if (data.timestampInSeconds !== undefined && isNaN(data.timestampInSeconds)) {
-		return { error: "timestampInSeconds not a number", status: 400 };
-	}
-	if (data.timestampInSeconds === undefined) {
-		data.timestampInSeconds = GetNowTimestampUTC();
-	}
-	data.timestampInSeconds = GetMinuteStartTimestampUTC(data.timestampInSeconds);
-	resp.status = data.status;
-	resp.latency = data.latency;
-	resp.type = "webhook";
-	let timestamp = GetMinuteStartNowTimestampUTC();
-	try {
-		//throw error if timestamp is future or older than 90days
-		if (data.timestampInSeconds > timestamp) {
-			throw new Error("timestampInSeconds is in future");
-		}
-		//past 90 days only
-		if (timestamp - data.timestampInSeconds > 90 * 24 * 60 * 60) {
-			throw new Error("timestampInSeconds is older than 90days");
-		}
-	} catch (err) {
-		return { error: err.message, status: 400 };
-	}
-	//check if tag is valid
-	let monitor = await db.getMonitorByTag(tag);
-	if (!!!monitor) {
-		return { error: "no monitor with tag found", status: 400 };
-	}
-	if (monitor.status != "ACTIVE") {
-		return { error: "monitor with the given tag is not active", status: 400 };
-	}
+  const resp = {};
+  if (data.status === undefined || ["UP", "DOWN", "DEGRADED"].indexOf(data.status) === -1) {
+    return { error: "status missing", status: 400 };
+  }
+  if (data.latency === undefined || isNaN(data.latency)) {
+    return { error: "latency missing or not a number", status: 400 };
+  }
+  if (data.timestampInSeconds !== undefined && isNaN(data.timestampInSeconds)) {
+    return { error: "timestampInSeconds not a number", status: 400 };
+  }
+  if (data.timestampInSeconds === undefined) {
+    data.timestampInSeconds = GetNowTimestampUTC();
+  }
+  data.timestampInSeconds = GetMinuteStartTimestampUTC(data.timestampInSeconds);
+  resp.status = data.status;
+  resp.latency = data.latency;
+  resp.type = WEBHOOK;
+  let timestamp = GetMinuteStartNowTimestampUTC();
+  try {
+    //throw error if timestamp is future or older than 90days
+    if (data.timestampInSeconds > timestamp) {
+      throw new Error("timestampInSeconds is in future");
+    }
+    //past 90 days only
+    if (timestamp - data.timestampInSeconds > 90 * 24 * 60 * 60) {
+      throw new Error("timestampInSeconds is older than 90days");
+    }
+  } catch (err) {
+    return { error: err.message, status: 400 };
+  }
+  //check if tag is valid
+  let monitor = await db.getMonitorByTag(tag);
+  if (!!!monitor) {
+    return { error: "no monitor with tag found", status: 400 };
+  }
+  if (monitor.status != "ACTIVE") {
+    return { error: "monitor with the given tag is not active", status: 400 };
+  }
 
-	//get the monitor object matching the tag
+  //get the monitor object matching the tag
 
-	await db.insertMonitoringData({
-		monitor_tag: tag,
-		timestamp: data.timestampInSeconds,
-		status: resp.status,
-		latency: resp.latency,
-		type: "webhook"
-	});
-	return { status: 200, message: "success at " + data.timestampInSeconds };
+  await db.insertMonitoringData({
+    monitor_tag: tag,
+    timestamp: data.timestampInSeconds,
+    status: resp.status,
+    latency: resp.latency,
+    type: "webhook",
+  });
+  return { status: 200, message: "success at " + data.timestampInSeconds };
 };
 
 const GetMonitorStatusByTag = async function (tag, timestamp) {
-	let monitor = await db.getMonitorByTag(tag);
-	if (!!!monitor) {
-		return { error: "no monitor with tag found", status: 400 };
-	}
-	if (monitor.status != "ACTIVE") {
-		return { error: "monitor with the given tag is not active", status: 400 };
-	}
-	const resp = {
-		status: null,
-		uptime: null,
-		last_updated_at: null
-	};
+  let monitor = await db.getMonitorByTag(tag);
+  if (!!!monitor) {
+    return { error: "no monitor with tag found", status: 400 };
+  }
+  if (monitor.status != "ACTIVE") {
+    return { error: "monitor with the given tag is not active", status: 400 };
+  }
+  const resp = {
+    status: null,
+    uptime: null,
+    last_updated_at: null,
+  };
 
-	const { include_degraded_in_downtime } = monitor;
+  const { include_degraded_in_downtime } = monitor;
 
-	let now = GetMinuteStartNowTimestampUTC();
-	if (timestamp !== null && timestamp !== undefined) {
-		now = timestamp;
-	}
-	let start = GetDayStartTimestampUTC(now);
+  let now = GetMinuteStartNowTimestampUTC();
+  if (timestamp !== null && timestamp !== undefined) {
+    now = timestamp;
+  }
+  let start = GetDayStartTimestampUTC(now);
 
-	let dayDataNew = await db.getMonitoringData(tag, start, now);
-	let ups = 0;
-	let downs = 0;
-	let degradeds = 0;
-	let lastData = dayDataNew[dayDataNew.length - 1];
+  let dayDataNew = await db.getMonitoringData(tag, start, now);
+  let ups = 0;
+  let downs = 0;
+  let degradeds = 0;
+  let lastData = dayDataNew[dayDataNew.length - 1];
 
-	for (let i = 0; i < dayDataNew.length; i++) {
-		let row = dayDataNew[i];
-		if (row.status == "UP") {
-			ups++;
-		} else if (row.status == "DEGRADED") {
-			degradeds++;
-		} else if (row.status == "DOWN") {
-			downs++;
-		}
-	}
-	let numerator = ups + degradeds;
-	if (include_degraded_in_downtime === "YES") {
-		numerator = ups;
-	}
+  for (let i = 0; i < dayDataNew.length; i++) {
+    let row = dayDataNew[i];
+    if (row.status == "UP") {
+      ups++;
+    } else if (row.status == "DEGRADED") {
+      degradeds++;
+    } else if (row.status == "DOWN") {
+      downs++;
+    }
+  }
+  let numerator = ups + degradeds;
+  if (include_degraded_in_downtime === "YES") {
+    numerator = ups;
+  }
 
-	resp.uptime = ParseUptime(numerator, ups + degradeds + downs);
-	resp.last_updated_at = Number(lastData.timestamp);
-	resp.status = lastData.status;
-	return { status: 200, ...resp };
+  resp.uptime = ParseUptime(numerator, ups + degradeds + downs);
+  resp.last_updated_at = Number(lastData.timestamp);
+  resp.status = lastData.status;
+  return { status: 200, ...resp };
 };
 export { store, auth, CheckIfValidTag, GetAllTags, GetMonitorStatusByTag };

src/routes/(docs)/+layout.svelte

@@ -1,34 +1,38 @@
 <script>
-  import "../../app.postcss"
-  import "../../kener.css"
-  import "../../docs.css"
-  import { Button } from "$lib/components/ui/button"
-  import Sun from "lucide-svelte/icons/sun"
-  import Moon from "lucide-svelte/icons/moon"
-  import { onMount } from "svelte"
-  import { base } from "$app/paths"
-  let defaultTheme = "light"
-  export let data
-  let siteStructure = data.siteStructure
-  let sidebar = siteStructure.sidebar
-  let docFilePath = data.docFilePath
-  let tableOfContents = []
+  import "../../app.postcss";
+  import "../../kener.css";
+  import "../../docs.css";
+  import { Button } from "$lib/components/ui/button";
+  import Sun from "lucide-svelte/icons/sun";
+  import Menu from "lucide-svelte/icons/menu";
+  import X from "lucide-svelte/icons/x";
+  import Heart from "lucide-svelte/icons/heart";
+  import { clickOutsideAction, slide } from "svelte-legos";
+  import Moon from "lucide-svelte/icons/moon";
+  import { onMount } from "svelte";
+  import { base } from "$app/paths";
+  let defaultTheme = "light";
+  export let data;
+  let siteStructure = data.siteStructure;
+  let sidebar = siteStructure.sidebar;
+  let docFilePath = data.docFilePath;
+  let tableOfContents = [];
 
   function setTheme() {
-    document.documentElement.classList.add("dark")
+    document.documentElement.classList.add("dark");
   }
 
   function activateSidebar(selectedDoc) {
     for (let i = 0; i < sidebar.length; i++) {
-      const item = sidebar[i]
+      const item = sidebar[i];
       for (let j = 0; j < item.children.length; j++) {
-        const subItem = item.children[j]
+        const subItem = item.children[j];
         if (subItem.file == selectedDoc) {
-          subItem.active = true
-          sidebar[i].children[j].active = true
+          subItem.active = true;
+          sidebar[i].children[j].active = true;
         } else {
-          subItem.active = false
-          sidebar[i].children[j].active = false
+          subItem.active = false;
+          sidebar[i].children[j].active = false;
         }
       }
     }
@@ -36,18 +40,41 @@
 
   function pageChange(e) {
     if (e.detail.docFilePath) {
-      activateSidebar(e.detail.docFilePath)
+      activateSidebar(e.detail.docFilePath);
     }
   }
   function updateTableOfContents(e) {
     if (e.detail.rightbar) {
-      tableOfContents = e.detail.rightbar
+      tableOfContents = e.detail.rightbar;
     }
   }
+  let sideBarHidden = true;
+  //if desktop show sidebar by default
 
+  let isMounted = false;
   onMount(() => {
-    setTheme()
-  })
+    setTheme();
+    if (window.innerWidth > 768) {
+      sideBarHidden = false;
+    }
+    const donationBanner = document.getElementById("donation-banner");
+    const closeButton = document.getElementById("close-donation");
+
+    // Check if we should show the banner today
+    const lastShown = localStorage.getItem("kener_donation_banner_closed");
+    const today = new Date().toDateString();
+
+    // Only show the banner if it hasn't been closed today
+    if (lastShown !== today) {
+      donationBanner.style.display = "block";
+    }
+
+    // Add close button handler
+    closeButton.addEventListener("click", () => {
+      donationBanner.style.display = "none";
+      localStorage.setItem("kener_donation_banner_closed", today);
+    });
+  });
 </script>
 
 <svelte:window on:pagechange={pageChange} on:rightbar={updateTableOfContents} />
@@ -57,13 +84,13 @@
   <!-- Google tag (gtag.js) -->
   <script async src="https://www.googletagmanager.com/gtag/js?id=G-Q3MLRXCBFT"></script>
   <script>
-    window.dataLayer = window.dataLayer || []
+    window.dataLayer = window.dataLayer || [];
     function gtag() {
-      dataLayer.push(arguments)
+      dataLayer.push(arguments);
     }
-    gtag("js", new Date())
+    gtag("js", new Date());
 
-    gtag("config", "G-Q3MLRXCBFT")
+    gtag("config", "G-Q3MLRXCBFT");
   </script>
   <link
     rel="stylesheet"
@@ -71,12 +98,10 @@
   />
 
   <!-- Highlight.js JS -->
-  <script
-    src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"
-  ></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.8.0/highlight.min.js"></script>
 </svelte:head>
 <div class="dark">
-  <nav class="z-2 fixed left-0 right-0 top-0 z-30 h-16 bg-card">
+  <nav class="fixed left-0 right-0 top-0 z-40 h-16 bg-card">
     <div class="mx-auto h-full border-b bg-card px-4 sm:px-6 lg:px-8">
       <div class="flex h-full items-center justify-between">
         <!-- Logo/Brand -->
@@ -85,7 +110,7 @@
             <!-- Document Icon - Replace with your own logo -->
             <img src="https://kener.ing/logo.png" class="h-8 w-8" alt="" />
             <span class="text-xl font-medium">Kener Documentation</span>
-            <span class="me-2 rounded border px-2.5 py-0.5 text-xs font-medium"> 3.0.12 </span>
+            <span class="me-2 rounded border px-2.5 py-0.5 text-xs font-medium"> 3.2.2 </span>
           </a>
         </div>
 
@@ -99,26 +124,24 @@
               />
             </a>
             <a href="/api-reference" class="text-sm font-medium"> API Reference </a>
-            <a href="https://github.com/rajnandan1/kener/issues" class="text-sm font-medium">
-              Report Issue
-            </a>
-            <a href="https://github.com/sponsors/rajnandan1" class="text-sm font-medium">
-              Sponsor
-            </a>
+            <a href="https://github.com/rajnandan1/kener/issues" class="text-sm font-medium"> Report Issue </a>
           </div>
         </div>
 
         <!-- Mobile Menu Button -->
         <div class="md:hidden">
-          <button type="button" class="hover: text-muted-foreground">
-            <svg class="h-6 w-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-              <path
-                stroke-linecap="round"
-                stroke-linejoin="round"
-                stroke-width="2"
-                d="M4 6h16M4 12h16M4 18h16"
-              />
-            </svg>
+          <button
+            type="button"
+            class="mt-2 hover:text-muted-foreground"
+            on:click={() => {
+              sideBarHidden = !sideBarHidden;
+            }}
+          >
+            {#if sideBarHidden}
+              <Menu class="h-6 w-6" />
+            {:else}
+              <X class="h-6 w-6" />
+            {/if}
           </button>
         </div>
       </div>
@@ -126,35 +149,70 @@
   </nav>
 
   <!-- Sidebar -->
-  <aside class="z-2 fixed bottom-0 left-0 top-16 w-72 overflow-y-auto">
-    <nav class="border-r bg-card p-6">
-      <!-- Getting Started Section -->
-      {#each sidebar as item}
-        <div class="mb-4">
-          <h3 class="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
-            {item.sectionTitle}
-          </h3>
-          <div class="">
-            {#each item.children as child}
-              <a
-                href={child.link.startsWith("/") ? base + child.link : child.link}
-                class="sidebar-item group flex items-center rounded-md px-3 py-2 text-sm font-medium {!!child.active
-                  ? 'active'
-                  : ''}"
-              >
-                {child.title}
-              </a>
-            {/each}
+  {#if !sideBarHidden}
+    <aside
+      transition:slide={{ direction: "left", duration: 200 }}
+      class="fixed bottom-0 left-0 top-16 z-30 w-72 overflow-y-auto md:block"
+      class:hidden={sideBarHidden}
+    >
+      <nav class="border-r bg-card p-6">
+        <!-- Getting Started Section -->
+        {#each sidebar as item}
+          <div class="mb-4">
+            <h3 class="mb-2 text-xs font-semibold uppercase tracking-wider text-muted-foreground">
+              {item.sectionTitle}
+            </h3>
+            <div class="">
+              {#each item.children as child}
+                <a
+                  rel="external"
+                  href={child.link.startsWith("/") ? base + child.link : child.link}
+                  class="sidebar-item group flex items-center rounded-md px-3 py-2 text-sm font-medium {!!child.active
+                    ? 'active'
+                    : ''}"
+                >
+                  {child.title}
+                </a>
+              {/each}
+            </div>
           </div>
-        </div>
-      {/each}
-    </nav>
-  </aside>
+        {/each}
+      </nav>
+    </aside>
+  {/if}
 
   <!-- Main Content -->
-  <main class="z-2 dark relative ml-72 min-h-screen pt-16">
-    <div class="mx-auto max-w-5xl px-4 py-10 sm:px-6 lg:px-8 lg:pr-64">
+  <main class="dark relative z-10 min-h-screen pt-16 md:ml-72">
+    <div class="mx-auto max-w-5xl px-4 py-10 sm:px-6 md:px-8 md:pr-64">
       <!-- Content Header -->
+      <div
+        id="donation-banner"
+        style="display: none;"
+        class="mb-8 rounded-lg bg-gradient-to-r from-blue-900 to-indigo-900 p-4 shadow-lg"
+      >
+        <div class="flex items-center justify-between">
+          <div class="flex items-center space-x-4">
+            <div class="rounded-full bg-amber-500 p-2">
+              <Heart class="h-5 w-5 text-white" />
+            </div>
+            <div>
+              <h3 class="text-base font-medium text-white">Support Kener Development</h3>
+              <p class="text-sm text-blue-200">Help us keep this project running and improve it further</p>
+            </div>
+          </div>
+          <div class="flex items-center space-x-3">
+            <a
+              href="https://github.com/sponsors/rajnandan1"
+              class="rounded-md bg-amber-500 px-3 py-1.5 text-sm font-medium text-white transition-colors hover:bg-amber-600"
+            >
+              Sponsor
+            </a>
+            <button id="close-donation" class="rounded p-1 text-blue-300 hover:bg-blue-800 hover:text-white">
+              <X class="h-5 w-5" />
+            </button>
+          </div>
+        </div>
+      </div>
       <div
         class="prose prose-stone max-w-none dark:prose-invert prose-code:rounded prose-code:py-[0.2rem] prose-code:font-mono prose-code:text-sm prose-code:font-normal prose-pre:bg-opacity-0 dark:prose-pre:bg-neutral-900"
       >
@@ -163,15 +221,13 @@
     </div>
   </main>
   {#if tableOfContents.length > 0}
-    <div
-      class="blurry-bg fixed bottom-0 right-0 top-16 hidden w-64 overflow-y-auto px-6 py-10 lg:block"
-    >
+    <div class="blurry-bg fixed bottom-0 right-0 top-16 z-50 hidden w-64 overflow-y-auto px-6 py-10 lg:block">
       <h4 class="mb-3 text-sm font-semibold uppercase tracking-wider">On this page</h4>
       <nav class="space-y-2">
         {#each tableOfContents as item}
           <a
             href="#{item.id}"
-            class="block overflow-hidden text-ellipsis whitespace-nowrap text-xs text-muted-foreground hover:underline {item.level ==
+            class="rlink block overflow-hidden text-ellipsis whitespace-nowrap text-xs text-muted-foreground hover:underline {item.level ==
             3
               ? 'ml-4'
               : ''}"

src/routes/(docs)/docs/[doc]/+page.svelte

@@ -1,63 +1,153 @@
 <script>
-	import { onMount } from "svelte";
-	import { afterNavigate } from "$app/navigation";
-	export let data;
-	let subHeadings = [];
-	let previousH2 = null;
-	function fillSubHeadings() {
-		subHeadings = [];
-		const headings = document.querySelectorAll("#markdown h2, #markdown h3");
-		headings.forEach((heading) => {
-			let id = heading.textContent.replace(/[^a-z0-9]/gi, "-").toLowerCase();
-			if (heading.tagName === "H2") {
-				previousH2 = id;
-			} else {
-				id = `${previousH2}-${id}`;
-			}
-			heading.id = id;
-			subHeadings.push({
-				id,
-				text: heading.textContent,
-				level: heading.tagName === "H2" ? 2 : 3
-			});
-		});
-	}
+  import { onMount } from "svelte";
+  import { Button } from "$lib/components/ui/button";
+  import { ArrowLeft, ArrowRight } from "lucide-svelte";
+  import { afterNavigate } from "$app/navigation";
+  export let data;
+  let subHeadings = [];
+  let previousH2 = null;
 
-	afterNavigate(() => {
-		document.dispatchEvent(
-			new CustomEvent("pagechange", {
-				bubbles: true,
-				detail: {
-					docFilePath: data.docFilePath
-				}
-			})
-		);
-		fillSubHeadings();
-		document.dispatchEvent(
-			new CustomEvent("rightbar", {
-				bubbles: true,
-				detail: {
-					rightbar: subHeadings
-				}
-			})
-		);
-		hljs.highlightAll();
-	});
-	onMount(async () => {});
+  function fillSubHeadings() {
+    subHeadings = [];
+    const headings = document.querySelectorAll("#markdown h2, #markdown h3");
+    headings.forEach((heading) => {
+      let id = heading.textContent.replace(/[^a-z0-9]/gi, "-").toLowerCase();
+      if (heading.tagName === "H2") {
+        previousH2 = id;
+      } else {
+        id = `${previousH2}-${id}`;
+      }
+      heading.id = id;
+      subHeadings.push({
+        id,
+        text: heading.textContent,
+        level: heading.tagName === "H2" ? 2 : 3
+      });
+    });
+  }
+
+  let nextPath;
+  let previousPath;
+
+  function scrollToId(id) {
+    const element = document.getElementById(id);
+    if (element) {
+      const y = element.getBoundingClientRect().top + window.pageYOffset - 100;
+      window.scrollTo({ top: y, behavior: "smooth" });
+    }
+  }
+
+  //function to iterate all h1,h2 nd h3 and add a button inside them
+  function addCopyButton() {
+    const headings = document.querySelectorAll("#markdown h1, #markdown h2, #markdown h3");
+    headings.forEach((heading) => {
+      const button = document.createElement("button");
+      button.classList.add("copybtn");
+      button.classList.add("relative");
+      button.innerHTML = `<svg class="copy-btn left-0 top-0 absolute" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#777" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-link"><path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/><path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/></svg>
+				<svg class="check-btn absolute left-0 top-0" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="green" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-check"><path d="M20 6 9 17l-5-5"/></svg>`;
+      button.style = "margin-left: 10px;height:16px;width:16px background-color: transparent; cursor: pointer;";
+      button.onclick = () => {
+        navigator.clipboard.writeText(`https://kener.ing/docs${data.docFilePath.split(".md")[0]}#` + heading.id);
+      };
+      heading.appendChild(button);
+    });
+  }
+
+  function handleRightBarClick(e) {
+    if (e.target.tagName === "A" && e.target.classList.contains("rlink")) {
+      e.preventDefault();
+      const id = e.target.getAttribute("href").slice(1);
+      scrollToId(id);
+    }
+  }
+
+  //function to find next and previous path
+  function findNextAndPreviousPath() {
+    let structure = data.siteStructure.sidebar;
+    for (let i = 0; i < structure.length; i++) {
+      let children = structure[i].children;
+
+      for (let j = 0; j < children.length; j++) {
+        if (children[j].file === data.docFilePath) {
+          if (j > 0) {
+            previousPath = children[j - 1];
+          }
+          if (j < children.length - 1) {
+            nextPath = children[j + 1];
+          }
+          break;
+        }
+      }
+    }
+  }
+
+  afterNavigate(() => {
+    document.dispatchEvent(
+      new CustomEvent("pagechange", {
+        bubbles: true,
+        detail: {
+          docFilePath: data.docFilePath
+        }
+      })
+    );
+    fillSubHeadings();
+    document.dispatchEvent(
+      new CustomEvent("rightbar", {
+        bubbles: true,
+        detail: {
+          rightbar: subHeadings
+        }
+      })
+    );
+    hljs.highlightAll();
+    //if hash present scroll to hash
+    if (location.hash) {
+      scrollToId(location.hash.slice(1));
+    }
+    //if hash change scroll
+    window.addEventListener("hashchange", () => {
+      scrollToId(location.hash.slice(1));
+    });
+    window.addEventListener("click", (e) => {
+      handleRightBarClick(e);
+    });
+    addCopyButton();
+    findNextAndPreviousPath();
+  });
+  onMount(async () => {});
 </script>
 
 <svelte:head>
-	<title>{data.title}</title>
-	<meta name="description" content={data.description} />
-	<link rel="canonical" href="https://kener.ing/docs{data.docFilePath.split('.md')[0]}" />
+  <title>{data.title}</title>
+  <meta name="description" content={data.description} />
+  <link rel="canonical" href="https://kener.ing/docs{data.docFilePath.split('.md')[0]}" />
 </svelte:head>
 
 <div id="markdown">
-	{@html data.md}
+  {@html data.md}
+</div>
+<div class="mt-4 grid grid-cols-2">
+  <div class="col-span-1">
+    {#if previousPath}
+      <Button variant="outline" class="no-underline" href={previousPath.link}>
+        <ArrowLeft class="mr-2 h-4 w-4" />
+        <span>{previousPath.title}</span>
+      </Button>
+    {/if}
+  </div>
+  <div class="col-span-1 flex justify-end">
+    {#if nextPath}
+      <Button variant="outline" class="no-underline" href={nextPath.link}>
+        <span>{nextPath.title}</span>
+        <ArrowRight class="ml-2 h-4 w-4" />
+      </Button>
+    {/if}
+  </div>
 </div>
 
 <style>
-	#markdown {
-		scroll-behavior: smooth;
-	}
+  #markdown {
+    scroll-behavior: smooth;
+  }
 </style>

src/routes/(kener)/+layout.svelte

@@ -1,160 +1,166 @@
 <script>
-	import "../../app.postcss";
-	import "../../kener.css";
-	import Nav from "$lib/components/nav.svelte";
-	import { onMount } from "svelte";
-	import { base } from "$app/paths";
-	import { Button } from "$lib/components/ui/button";
-	import Sun from "lucide-svelte/icons/sun";
-	import Moon from "lucide-svelte/icons/moon";
-	import { Languages } from "lucide-svelte";
-	import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
-	import { analyticsEvent } from "$lib/boringOne";
-	import { setMode, mode, ModeWatcher } from "mode-watcher";
-	export let data;
+  import "../../app.postcss";
+  import "../../kener.css";
+  import Nav from "$lib/components/nav.svelte";
+  import { onMount } from "svelte";
+  import { Input } from "$lib/components/ui/input";
+  import { base } from "$app/paths";
+  import { Button } from "$lib/components/ui/button";
+  import Sun from "lucide-svelte/icons/sun";
+  import Moon from "lucide-svelte/icons/moon";
+  import { Languages, Globe } from "lucide-svelte";
+  import * as Popover from "$lib/components/ui/popover";
+  import * as DropdownMenu from "$lib/components/ui/dropdown-menu";
+  import { analyticsEvent } from "$lib/boringOne";
+  import { setMode, mode, ModeWatcher } from "mode-watcher";
+  import { l } from "$lib/i18n/client";
 
-	let defaultLocaleKey = data.selectedLang;
-	let defaultTheme = data.site.theme;
-	const allLocales = data.site.i18n?.locales.filter((locale) => locale.selected === true);
-	let hasConfiguredAnalytics =
-		!!data.site.analytics && data.site.analytics.filter((provider) => !!provider.id).length > 0;
+  export let data;
+  let defaultLocaleKey = data.selectedLang;
+  let allTimezones = Intl.supportedValuesOf("timeZone");
+  let searchTzValue = "";
+  let defaultTheme = data.site.theme;
+  const allLocales = data.site.i18n?.locales.filter((locale) => locale.selected === true);
+  let hasConfiguredAnalytics =
+    !!data.site.analytics && data.site.analytics.filter((provider) => !!provider.id).length > 0;
 
-	function toggleMode() {
-		if ($mode === "light") {
-			setMode("dark");
-		} else {
-			setMode("light");
-		}
+  function toggleMode() {
+    if ($mode === "light") {
+      setMode("dark");
+    } else {
+      setMode("light");
+    }
 
-		analyticsEvent("theme_change", {
-			theme: $mode
-		});
-	}
-	let defaultLocaleValue;
-	if (!allLocales) {
-		defaultLocaleValue = "English";
-	} else {
-		let lclFi = allLocales.find((locale) => locale.code === defaultLocaleKey);
-		if (lclFi) {
-			defaultLocaleValue = lclFi.name;
-		}
-	}
-	/**
-	 * @param {string} locale
-	 */
-	function setLanguage(locale) {
-		document.cookie = `localLang=${locale};max-age=${60 * 60 * 24 * 365 * 30};path=${base ? "base" : "/"};`;
-		if (locale === defaultLocaleKey) return;
-		defaultLocaleValue = allLocales[locale];
-		analyticsEvent("language_change", {
-			locale: locale
-		});
-		location.reload();
-	}
+    analyticsEvent("theme_change", {
+      theme: $mode
+    });
+  }
+  let defaultLocaleValue;
+  if (!allLocales) {
+    defaultLocaleValue = "English";
+  } else {
+    let lclFi = allLocales.find((locale) => locale.code === defaultLocaleKey);
+    if (lclFi) {
+      defaultLocaleValue = lclFi.name;
+    }
+  }
+  /**
+   * @param {string} locale
+   */
+  function setLanguage(locale) {
+    document.cookie = `localLang=${locale};max-age=${60 * 60 * 24 * 365 * 30};path=${base ? "base" : "/"};`;
+    if (locale === defaultLocaleKey) return;
+    defaultLocaleValue = allLocales[locale];
+    analyticsEvent("language_change", {
+      locale: locale
+    });
+    location.reload();
+  }
 
-	let Analytics;
+  //set timezone
+  function setTz(tz) {
+    document.cookie = `localTz=${tz};max-age=${60 * 60 * 24 * 365 * 30};path=${base ? "base" : "/"};`;
+    location.reload();
+  }
 
-	onMount(async () => {
-		let localTz = Intl.DateTimeFormat().resolvedOptions().timeZone;
-		if (localTz != data.localTz) {
-			if (data.isBot === false) {
-				document.cookie =
-					"localTz=" +
-					localTz +
-					";max-age=" +
-					60 * 60 * 24 * 365 * 30 +
-					`;path=${base ? "base" : "/"};`;
-				location.reload();
-			}
-		}
-		if (defaultTheme != "none") {
-			setMode(defaultTheme);
-		}
-		//
-		const providers = data.site.analytics;
-		const analyticsPlugins = [];
-		if (hasConfiguredAnalytics) {
-			//loop object
+  let Analytics;
+  let myTimezone = data.localTz;
+  onMount(async () => {
+    myTimezone = Intl.DateTimeFormat().resolvedOptions().timeZone;
+    if (data.localTz === "UTC") {
+      if (data.isBot === false) {
+        setTz(myTimezone);
+      }
+    }
+    if (defaultTheme != "none") {
+      setMode(defaultTheme);
+    }
+    //
+    const providers = data.site.analytics;
+    const analyticsPlugins = [];
+    if (hasConfiguredAnalytics) {
+      //loop object
 
-			for (let i = 0; i < providers.length; i++) {
-				const provider = providers[i];
-				if (!!!provider.id) {
-					continue;
-				}
+      for (let i = 0; i < providers.length; i++) {
+        const provider = providers[i];
+        if (!!!provider.id) {
+          continue;
+        }
 
-				if (provider.type == "GA") {
-					analyticsPlugins.push(
-						analyticsGa.default({
-							measurementIds: provider.id
-						})
-					);
-				} else if (provider.type == "AMPLITUDE") {
-					analyticsPlugins.push(
-						analyticsAmplitude({
-							apiKey: provider.measurementIds[0],
-							options: {
-								trackingOptions: {
-									ip_address: false
-								}
-							}
-						})
-					);
-				} else if (provider.type == "MIXPANEL") {
-					analyticsPlugins.push(
-						analyticsMixpanel({
-							token: provider.measurementIds[0]
-						})
-					);
-				}
-			}
-		}
-		if (hasConfiguredAnalytics) {
-			Analytics = _analytics.init({
-				app: "kener",
-				debug: true,
-				version: 100,
-				plugins: analyticsPlugins
-			});
-			Analytics.page();
-		}
+        if (provider.type == "GA") {
+          analyticsPlugins.push(
+            analyticsGa.default({
+              measurementIds: provider.id
+            })
+          );
+        } else if (provider.type == "AMPLITUDE") {
+          analyticsPlugins.push(
+            analyticsAmplitude({
+              apiKey: provider.measurementIds[0],
+              options: {
+                trackingOptions: {
+                  ip_address: false
+                }
+              }
+            })
+          );
+        } else if (provider.type == "MIXPANEL") {
+          analyticsPlugins.push(
+            analyticsMixpanel({
+              token: provider.measurementIds[0]
+            })
+          );
+        }
+      }
+    }
+    if (hasConfiguredAnalytics) {
+      Analytics = _analytics.init({
+        app: "kener",
+        debug: true,
+        version: 100,
+        plugins: analyticsPlugins
+      });
+      Analytics.page();
+    }
 
-		if (!!data.bgc && data.bgc[0] == "#") {
-			document.body.style.backgroundColor = data.bgc;
-		}
-	});
-	function captureAnalytics(e) {
-		if (hasConfiguredAnalytics) {
-			const { event, data } = e.detail;
-			Analytics.track(event, data);
-		}
-	}
-	let customCSS = `<style>${data.site.customCSS}</style>`;
+    if (!!data.bgc && data.bgc[0] == "#") {
+      document.body.style.backgroundColor = data.bgc;
+    }
+  });
+  function captureAnalytics(e) {
+    if (hasConfiguredAnalytics) {
+      const { event, data } = e.detail;
+      Analytics.track(event, data);
+    }
+  }
+  let customCSS = `<style>${data.site.customCSS}</style>`;
+  if (!!data.site.favicon && !data.site.favicon.startsWith("http")) data.site.favicon = `${base}${data.site.favicon}`;
 </script>
 
 <svelte:window on:analyticsEvent={captureAnalytics} />
 <svelte:head>
-	{#if data.site.favicon}
-		<link rel="icon" id="kener-app-favicon" href={base + data.site.favicon} />
-	{/if}
-	{#if !!data.site.font.cssSrc}
-		<link href={data.site.font.cssSrc} rel="stylesheet" />
-	{/if}
+  {#if data.site.favicon}
+    <link rel="icon" id="kener-app-favicon" href={data.site.favicon} />
+  {/if}
+  {#if !!data.site.font.cssSrc}
+    <link href={data.site.font.cssSrc} rel="stylesheet" />
+  {/if}
 
-	{#if hasConfiguredAnalytics}
-		<script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
-		{#each data.site.analytics as { id, type, script }}
-			{#if !!id}
-				<script data-type={type} src={script}></script>
-			{/if}
-		{/each}
-	{/if}
-	{#if !!data.site.customCSS}
-		{@html customCSS}
-	{/if}
+  {#if hasConfiguredAnalytics}
+    <script src="https://unpkg.com/analytics/dist/analytics.min.js"></script>
+    {#each data.site.analytics as { id, type, script }}
+      {#if !!id}
+        <script data-type={type} src={script}></script>
+      {/if}
+    {/each}
+  {/if}
+  {#if !!data.site.customCSS}
+    {@html customCSS}
+  {/if}
 </svelte:head>
 <ModeWatcher />
 <main
-	style="
+  style="
 	--font-family: {data.site.font.family};
 	--bg-custom: {data.bgc};
 	--up-color: {data.site.colors.UP};
@@ -162,75 +168,128 @@
 	--degraded-color: {data.site.colors.DEGRADED}
 	"
 >
-	<Nav {data} />
-	<div class="main-content min-h-[70vh]">
-		<slot />
-	</div>
+  <Nav {data} />
+  <div class="main-content min-h-[70vh]">
+    <slot />
+  </div>
 
-	{#if !!data.site.footerHTML}
-		<footer class="z-10 py-6 md:px-8 md:py-0">
-			<div
-				class="container relative flex max-w-[655px] flex-col items-center justify-center gap-4 pl-0 md:h-24 md:flex-row"
-			>
-				<div class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
-					<p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
-						{@html data.site.footerHTML}
-					</p>
-				</div>
-			</div>
-		</footer>
-	{/if}
-	<div class="fixed bottom-4 right-4 z-20 rounded-md bg-background">
-		{#if data.site.i18n && data.site.i18n.locales && allLocales.length > 1}
-			<DropdownMenu.Root>
-				<DropdownMenu.Trigger>
-					<Button variant="ghost" size="icon" class="flex">
-						<Languages class="h-[1.2rem] w-[1.2rem]" />
-					</Button>
-				</DropdownMenu.Trigger>
-				<DropdownMenu.Content>
-					<DropdownMenu.Group>
-						{#each allLocales as locale}
-							<DropdownMenu.Item
-								class={defaultLocaleKey == locale.code ? "bg-input" : ""}
-								on:click={(e) => {
-									setLanguage(locale.code);
-								}}>{locale.name}</DropdownMenu.Item
-							>
-						{/each}
-					</DropdownMenu.Group>
-				</DropdownMenu.Content>
-			</DropdownMenu.Root>
-		{/if}
-		{#if !!data.site.themeToggle}
-			<Button on:click={toggleMode} variant="ghost" size="icon" class="flex">
-				<Sun
-					class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0"
-				/>
-				<Moon
-					class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100"
-				/>
-				<span class="sr-only">Toggle theme</span>
-			</Button>
-		{/if}
-	</div>
-	{#if data.isLoggedIn}
-		<a
-			href="{base}/manage/app/site"
-			on:click|preventDefault={(e) => {
-				location.href = `${base}/manage/app/site`;
-			}}
-			class="button-77 fixed bottom-8 left-8 z-50"
-			role="button"
-		>
-			Manage
-		</a>
-	{/if}
+  {#if !!data.site.footerHTML}
+    <footer class="z-10 py-6 md:px-8 md:py-0">
+      <div
+        class="container relative flex max-w-[655px] flex-col items-center justify-center gap-4 pl-0 md:h-24 md:flex-row"
+      >
+        <div class="flex flex-col items-center gap-4 px-8 md:flex-row md:gap-2 md:px-0">
+          <p class="text-center text-sm leading-loose text-muted-foreground md:text-left">
+            {@html data.site.footerHTML}
+          </p>
+        </div>
+      </div>
+    </footer>
+  {/if}
+  <div class="fixed bottom-4 right-4 z-20 flex flex-col rounded-md bg-background">
+    {#if !!data.site.tzToggle && data.site.tzToggle === "YES"}
+      <div>
+        <Popover.Root>
+          <Popover.Trigger>
+            <Button variant="ghost" size="icon" class="flex">
+              <Globe class="h-[1.2rem] w-[1.2rem]" />
+            </Button>
+          </Popover.Trigger>
+          <Popover.Content class="px-0 py-2">
+            <div class="flex flex-col gap-2">
+              <div class="flex px-2 pb-1 text-xs font-semibold">
+                <span class="flex-1">
+                  {@html l(data.lang, "Timezone set to %tz", {
+                    tz: "<i>" + data.localTz + "</i>"
+                  })}
+                </span>
+              </div>
+              <div class="flex flex-col gap-2">
+                <div class="border-b px-2 pb-2">
+                  <Input
+                    placeholder="Search for a timezone"
+                    class="h-8 px-2 py-1 text-xs"
+                    value={searchTzValue}
+                    on:input={(e) => {
+                      searchTzValue = e.target.value;
+                    }}
+                  />
+                </div>
+                <div class="flex h-[200px] flex-col overflow-y-auto">
+                  {#each allTimezones as tz}
+                    {#if tz.toLowerCase().includes(searchTzValue.toLowerCase())}
+                      <div class="text-xs font-semibold">
+                        <Button
+                          variant={tz === data.localTz ? "primary" : "ghost"}
+                          class="h-8 w-full justify-start rounded-none text-xs text-muted-foreground"
+                          on:click={() => setTz(tz)}
+                        >
+                          {tz}
+                        </Button>
+                      </div>
+                    {/if}
+                  {/each}
+                </div>
+                {#if myTimezone !== data.localTz}
+                  <div class="px-2">
+                    <Button
+                      variant="outline"
+                      class="h-6 w-full bg-transparent px-2 text-xs"
+                      on:click={() => setTz(myTimezone)}
+                    >
+                      {l(data.lang, "Switch to your timezone")}
+                    </Button>
+                  </div>
+                {/if}
+              </div>
+            </div>
+          </Popover.Content>
+        </Popover.Root>
+      </div>
+    {/if}
+    {#if data.site.i18n && data.site.i18n.locales && allLocales.length > 1}
+      <div>
+        <DropdownMenu.Root>
+          <DropdownMenu.Trigger>
+            <Button variant="ghost" size="icon" class="flex">
+              <Languages class="h-[1.2rem] w-[1.2rem]" />
+            </Button>
+          </DropdownMenu.Trigger>
+          <DropdownMenu.Content class="max-h-[250px] overflow-y-auto">
+            <DropdownMenu.Group>
+              {#each allLocales as locale}
+                <DropdownMenu.Item
+                  class={defaultLocaleKey == locale.code ? "bg-input" : ""}
+                  on:click={(e) => {
+                    setLanguage(locale.code);
+                  }}>{locale.name}</DropdownMenu.Item
+                >
+              {/each}
+            </DropdownMenu.Group>
+          </DropdownMenu.Content>
+        </DropdownMenu.Root>
+      </div>
+    {/if}
+    {#if !!data.site.themeToggle && data.site.themeToggle === "YES"}
+      <div>
+        <Button on:click={toggleMode} variant="ghost" size="icon" class="flex">
+          <Sun class="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <Moon class="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span class="sr-only">Toggle theme</span>
+        </Button>
+      </div>
+    {/if}
+  </div>
+  {#if data.isLoggedIn}
+    <div class="fixed bottom-2 left-2 z-50 md:bottom-8 md:left-8">
+      <a href="{base}/manage/app/site" rel="external" class="button-77" role="button"> Manage </a>
+    </div>
+  {/if}
 </main>
 
 <style>
-	/* Apply the global font family using the CSS variable */
-	* {
-		font-family: var(--font-family);
-	}
+  /* Apply the global font family using the CSS variable */
+  * {
+    font-family: var(--font-family);
+  }
 </style>

src/routes/(kener)/+page.server.js

@@ -4,127 +4,196 @@ import { GetMonitors, GetIncidentsOpenHome } from "$lib/server/controllers/contr
 import { SortMonitor } from "$lib/clientTools.js";
 import moment from "moment";
 function removeTags(str) {
-	if (str === null || str === "") return false;
-	else str = str.toString();
+  if (str === null || str === "") return false;
+  else str = str.toString();
 
-	// Regular expression to identify HTML tags in
-	// the input string. Replacing the identified
-	// HTML tag with a null string.
-	return str.replace(/(<([^>]+)>)/gi, "");
+  return str.replace(/(<([^>]+)>)/gi, "");
 }
+
+async function returnTypeOfMonitorsPageMeta(url) {
+  const query = url.searchParams;
+  let filter = {
+    status: "ACTIVE",
+  };
+
+  let pageType = "home";
+  let group;
+  if (!!query.get("category") && query.get("category") !== "Home") {
+    filter.category_name = query.get("category");
+    pageType = "category";
+  }
+
+  if (!!query.get("monitor")) {
+    filter.tag = query.get("monitor");
+    pageType = "monitor";
+  }
+
+  if (!!query.get("group")) {
+    let g = await GetMonitors({ status: "ACTIVE", tag: query.get("group") });
+    if (g.length > 0) {
+      group = g[0];
+      let typeData = JSON.parse(g[0].type_data);
+      let groupPresentMonitorTags = typeData.monitors.map((monitor) => monitor.tag);
+      filter.tags = groupPresentMonitorTags;
+      pageType = "group";
+    }
+  }
+
+  let monitors = await GetMonitors(filter);
+  return { monitors, pageType, group };
+}
+
 export async function load({ parent, url }) {
-	let monitors = await GetMonitors({ status: "ACTIVE" });
-	const query = url.searchParams;
-	const requiredCategory = query.get("category") || "Home";
-	const parentData = await parent();
-	const siteData = parentData.site;
-	let pageTitle = siteData.title;
-	let canonical = siteData.siteURL;
-	let pageDescription = siteData.metaTags.find((tag) => tag.key === "description").value;
-	monitors = SortMonitor(siteData.monitorSort, monitors);
-	const monitorsActive = [];
-	for (let i = 0; i < monitors.length; i++) {
-		//only return monitors that have category as home or category is not present
-		if (
-			!!!query.get("monitor") &&
-			!!monitors[i].category_name &&
-			monitors[i].category_name !== requiredCategory
-		) {
-			continue;
-		}
-		if (query.get("monitor") && query.get("monitor") !== monitors[i].tag) {
-			continue;
-		}
-		delete monitors[i].api;
-		delete monitors[i].default_status;
+  const query = url.searchParams;
 
-		let data = await FetchData(
-			siteData,
-			monitors[i],
-			parentData.localTz,
-			parentData.selectedLang,
-			parentData.lang
-		);
-		monitors[i].pageData = data;
+  let { monitors, pageType, group } = await returnTypeOfMonitorsPageMeta(url);
+  let hiddenGroupedMonitorsTags = [];
+  for (let i = 0; i < monitors.length; i++) {
+    if (pageType === "home" && monitors[i].monitor_type === "GROUP") {
+      let typeData = JSON.parse(monitors[i].type_data);
+      if (typeData.monitors && typeData.hideMonitors) {
+        hiddenGroupedMonitorsTags = hiddenGroupedMonitorsTags.concat(typeData.monitors.map((monitor) => monitor.tag));
+      }
+    }
+  }
+  monitors = monitors
+    .map((monitor) => {
+      return {
+        tag: monitor.tag,
+        name: monitor.name,
+        description: monitor.description,
+        monitor_type: monitor.monitor_type,
+        image: monitor.image,
+        category_name: monitor.category_name,
+        day_degraded_minimum_count: monitor.day_degraded_minimum_count,
+        day_down_minimum_count: monitor.day_down_minimum_count,
+        id: monitor.id,
+        image: monitor.image,
+        include_degraded_in_downtime: monitor.include_degraded_in_downtime,
+      };
+    })
+    .filter((monitor) => !hiddenGroupedMonitorsTags.includes(monitor.tag))
+    .filter((monitor) => {
+      if (pageType == "home") {
+        return monitor.category_name == "Home";
+      }
+      return true;
+    });
 
-		monitors[i].activeIncidents = [];
-		monitorsActive.push(monitors[i]);
-	}
-	let startWithin = moment().subtract(siteData.homeIncidentStartTimeWithin, "days").unix();
-	let endWithin = moment().add(siteData.homeIncidentStartTimeWithin, "days").unix();
-	let allOpenIncidents = await GetIncidentsOpenHome(
-		siteData.homeIncidentCount,
-		startWithin,
-		endWithin
-	);
+  const parentData = await parent();
+  const siteData = parentData.site;
+  let hero = siteData.hero;
 
-	//if not home page
-	let isCategoryPage = !!query.get("category") && query.get("category") !== "Home";
-	let isMonitorPage = !!query.get("monitor");
-	if (isMonitorPage && monitorsActive.length > 0) {
-		pageTitle = monitorsActive[0].name + " - " + pageTitle;
-		pageDescription = monitorsActive[0].description;
-		canonical = canonical + "?monitor=" + monitorsActive[0].tag;
-	}
-	//if category page
-	if (isCategoryPage) {
-		let allCategories = siteData.categories;
-		let selectedCategory = allCategories.find((category) => category.name === requiredCategory);
-		if (selectedCategory) {
-			pageTitle = selectedCategory.name + " - " + pageTitle;
-			pageDescription = selectedCategory.description;
-			canonical = canonical + "?category=" + requiredCategory;
-		}
-	}
-	if (isCategoryPage || isMonitorPage) {
-		let eligibleTags = monitorsActive.map((monitor) => monitor.tag);
-		//filter incidents that have monitor_tag in monitors
-		allOpenIncidents = allOpenIncidents.filter((incident) => {
-			let incidentMonitors = incident.monitors;
-			let monitorTags = incidentMonitors.map((monitor) => monitor.monitor_tag);
-			let isPresent = false;
-			monitorTags.forEach((tag) => {
-				if (eligibleTags.includes(tag)) {
-					isPresent = true;
-				}
-			});
-			return isPresent;
-		});
-	}
+  let pageTitle = siteData.title;
+  let canonical = siteData.siteURL;
+  let pageDescription = "";
+  let descDb = siteData.metaTags.find((tag) => tag.key === "description");
+  if (descDb) {
+    pageDescription = descDb.value;
+  }
 
-	allOpenIncidents = allOpenIncidents.map((incident) => {
-		let incidentMonitors = incident.monitors;
-		let monitorTags = incidentMonitors.map((monitor) => monitor.monitor_tag);
-		let xm = monitors.filter((monitor) => monitorTags.includes(monitor.tag));
+  monitors = SortMonitor(siteData.monitorSort, monitors);
+  const monitorsActive = [];
+  for (let i = 0; i < monitors.length; i++) {
+    let data = await FetchData(siteData, monitors[i], parentData.localTz, parentData.selectedLang, parentData.lang);
+    monitors[i].pageData = data;
 
-		incident.monitors = xm.map((monitor) => {
-			return {
-				tag: monitor.tag,
-				name: monitor.name,
-				description: monitor.description,
-				image: monitor.image,
-				impact_type: incidentMonitors.filter((m) => m.monitor_tag === monitor.tag)[0]
-					.monitor_impact
-			};
-		});
-		return incident;
-	});
+    monitors[i].activeIncidents = [];
+    monitorsActive.push(monitors[i]);
+  }
 
-	let allRecentIncidents = allOpenIncidents.filter(
-		(incident) => incident.incident_type == "INCIDENT"
-	);
-	let allRecentMaintenances = allOpenIncidents.filter(
-		(incident) => incident.incident_type == "MAINTENANCE"
-	);
-	return {
-		monitors: monitorsActive,
-		allRecentIncidents,
-		allRecentMaintenances,
-		categoryName: requiredCategory,
-		isCategoryPage: isCategoryPage,
-		isMonitorPage: isMonitorPage,
-		pageTitle: pageTitle,
-		pageDescription: removeTags(pageDescription),
-		canonical
-	};
+  let startWithin = moment().subtract(siteData.homeIncidentStartTimeWithin, "days").unix();
+  let endWithin = moment().add(siteData.homeIncidentStartTimeWithin, "days").unix();
+  let allOpenIncidents = await GetIncidentsOpenHome(siteData.homeIncidentCount, startWithin, endWithin);
+
+  //if not home page
+  let isCategoryPage = pageType === "category";
+  let isMonitorPage = pageType === "monitor";
+  let isGroupPage = pageType === "group";
+
+  if (isMonitorPage && monitorsActive.length > 0) {
+    pageTitle = monitorsActive[0].name + " - " + pageTitle;
+    pageDescription = monitorsActive[0].description;
+    canonical = canonical + "?monitor=" + monitorsActive[0].tag;
+    hero = {
+      title: monitorsActive[0].name,
+      subtitle: monitorsActive[0].description,
+      image: monitorsActive[0].image,
+    };
+  }
+
+  if (isGroupPage) {
+    pageTitle = group.name + " - " + pageTitle;
+    pageDescription = group.description;
+    canonical = canonical + "?group=" + group.tag;
+
+    hero = {
+      title: group.name,
+      subtitle: group.description,
+      image: group.image,
+    };
+  }
+
+  //if category page
+  if (isCategoryPage) {
+    let allCategories = siteData.categories;
+    let selectedCategory = allCategories.find((category) => category.name === query.get("category"));
+    if (selectedCategory) {
+      pageTitle = selectedCategory.name + " - " + pageTitle;
+      pageDescription = selectedCategory.description;
+      canonical = canonical + "?category=" + query.get("category");
+
+      hero = {
+        title: selectedCategory.name,
+        subtitle: selectedCategory.description,
+        image: selectedCategory.image,
+      };
+    }
+  }
+  if (isCategoryPage || isMonitorPage || isGroupPage) {
+    let eligibleTags = monitorsActive.map((monitor) => monitor.tag);
+    //filter incidents that have monitor_tag in monitors
+    allOpenIncidents = allOpenIncidents.filter((incident) => {
+      let incidentMonitors = incident.monitors;
+      let monitorTags = incidentMonitors.map((monitor) => monitor.monitor_tag);
+      let isPresent = false;
+      monitorTags.forEach((tag) => {
+        if (eligibleTags.includes(tag)) {
+          isPresent = true;
+        }
+      });
+      return isPresent;
+    });
+  }
+
+  allOpenIncidents = allOpenIncidents.map((incident) => {
+    let incidentMonitors = incident.monitors;
+    let monitorTags = incidentMonitors.map((monitor) => monitor.monitor_tag);
+    let xm = monitors.filter((monitor) => monitorTags.includes(monitor.tag));
+
+    incident.monitors = xm.map((monitor) => {
+      return {
+        tag: monitor.tag,
+        name: monitor.name,
+        description: monitor.description,
+        image: monitor.image,
+        impact_type: incidentMonitors.filter((m) => m.monitor_tag === monitor.tag)[0].monitor_impact,
+      };
+    });
+    return incident;
+  });
+
+  let allRecentIncidents = allOpenIncidents.filter((incident) => incident.incident_type == "INCIDENT");
+  let allRecentMaintenances = allOpenIncidents.filter((incident) => incident.incident_type == "MAINTENANCE");
+  return {
+    monitors: monitorsActive,
+    allRecentIncidents,
+    allRecentMaintenances,
+    pageType,
+    pageTitle: pageTitle,
+    pageDescription: removeTags(pageDescription),
+    hero,
+    categoryName: query.get("category"),
+    canonical,
+  };
 }

src/routes/(kener)/+page.svelte

@@ -1,353 +1,282 @@
 <script>
-	import Monitor from "$lib/components/monitor.svelte";
-	import * as Card from "$lib/components/ui/card";
-	import { Button, buttonVariants } from "$lib/components/ui/button";
-	import Incident from "$lib/components/IncidentNew.svelte";
-	import { Badge } from "$lib/components/ui/badge";
-	import { l } from "$lib/i18n/client";
-	import { base } from "$app/paths";
-	import { ArrowRight, ChevronLeft, X } from "lucide-svelte";
-	import { hotKeyAction, clickOutsideAction } from "svelte-legos";
-	import { onMount } from "svelte";
-	import ShareMenu from "$lib/components/shareMenu.svelte";
-	import { scale } from "svelte/transition";
-	import { format } from "date-fns";
+  import Monitor from "$lib/components/monitor.svelte";
+  import * as Card from "$lib/components/ui/card";
+  import { Button, buttonVariants } from "$lib/components/ui/button";
+  import Incident from "$lib/components/IncidentNew.svelte";
+  import { Badge } from "$lib/components/ui/badge";
+  import { l } from "$lib/i18n/client";
+  import { base } from "$app/paths";
+  import { ArrowRight, ChevronLeft, X } from "lucide-svelte";
+  import { hotKeyAction, clickOutsideAction } from "svelte-legos";
+  import { onMount } from "svelte";
+  import ShareMenu from "$lib/components/shareMenu.svelte";
+  import { scale } from "svelte/transition";
+  import { format } from "date-fns";
+  import GMI from "$lib/components/gmi.svelte";
 
-	export let data;
-	let shareMenusToggle = false;
-	function showShareMenu(e) {
-		shareMenusToggle = true;
-		activeMonitor = e.detail.monitor;
-	}
-	let activeMonitor = null;
-	let pageLoaded = false;
-	$: {
-		if (pageLoaded) {
-			if (shareMenusToggle) {
-				document.body.style.overflow = "hidden";
-			} else {
-				document.body.style.overflow = "auto";
-			}
-		}
-	}
+  export let data;
+  let shareMenusToggle = false;
+  function showShareMenu(e) {
+    shareMenusToggle = true;
+    activeMonitor = e.detail.monitor;
+  }
+  let activeMonitor = null;
+  let pageLoaded = false;
+  $: {
+    if (pageLoaded) {
+      if (shareMenusToggle) {
+        document.body.style.overflow = "hidden";
+      } else {
+        document.body.style.overflow = "auto";
+      }
+    }
+  }
 
-	let isHome = !data.isCategoryPage && !data.isMonitorPage;
+  onMount(() => {
+    pageLoaded = true;
+  });
+  let kindFilter = "INCIDENT";
+  function kindOfIncidents(kind) {
+    kindFilter = kind;
+  }
 
-	if (data.isCategoryPage) {
-		let category = data.site.categories.find((e) => e.name == data.categoryName);
-		if (!!category) {
-			data.site.hero.title = category.name;
-			data.site.hero.subtitle = category.description;
-		}
-	} else if (data.isMonitorPage) {
-		let monitor = data.monitors[0];
-		if (!!monitor) {
-			data.site.hero.title = monitor.name;
-			data.site.hero.subtitle = monitor.description;
-			data.site.hero.image = monitor.image;
-		}
-	}
-
-	onMount(() => {
-		pageLoaded = true;
-	});
-	let kindFilter = "INCIDENT";
-	function kindOfIncidents(kind) {
-		kindFilter = kind;
-	}
-
-	if (data.allRecentIncidents.length == 0) {
-		kindOfIncidents("MAINTENANCE");
-	}
+  if (data.allRecentIncidents.length == 0) {
+    kindOfIncidents("MAINTENANCE");
+  }
 </script>
 
 <svelte:head>
-	<title>{data.pageTitle}</title>
-	{#if !!data.pageDescription}
-		<meta name="description" content={data.pageDescription} />
-	{/if}
-	{#if !!data.canonical}
-		<link rel="canonical" href={data.canonical} />
-	{/if}
-	{#if data.site.metaTags}
-		{#each data.site.metaTags as metaTag}
-			{#if metaTag.key != "description"}
-				<meta name={metaTag.key} content={metaTag.value} />
-			{/if}
-		{/each}
-	{/if}
+  <title>{data.pageTitle}</title>
+  {#if !!data.pageDescription}
+    <meta name="description" content={data.pageDescription} />
+  {/if}
+  {#if !!data.canonical}
+    <link rel="canonical" href={data.canonical} />
+  {/if}
+  {#if data.site.metaTags}
+    {#each data.site.metaTags as metaTag}
+      {#if metaTag.key != "description"}
+        <meta name={metaTag.key} content={metaTag.value} />
+      {/if}
+    {/each}
+  {/if}
 </svelte:head>
 <div class="mt-12"></div>
-{#if data.site.hero}
-	<section
-		class="mx-auto mb-8 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center"
-	>
-		<div class="mx-auto max-w-screen-xl px-4 lg:flex lg:items-center">
-			<div class="blurry-bg mx-auto max-w-3xl text-center">
-				{#if data.site.hero.image}
-					<img
-						src={base + data.site.hero.image}
-						class="m-auto mb-2 h-14 w-14"
-						alt=""
-						srcset=""
-					/>
-				{/if}
-				{#if data.site.hero.title}
-					<h1
-						class="bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-5xl font-extrabold leading-tight text-transparent"
-					>
-						{@html data.site.hero.title}
-					</h1>
-				{/if}
-				{#if data.site.hero.subtitle}
-					<h2 class="mx-auto mt-4 max-w-xl sm:text-xl">
-						{@html data.site.hero.subtitle}
-					</h2>
-				{/if}
-			</div>
-		</div>
-	</section>
+{#if data.hero}
+  <section class="section-hero mx-auto mb-8 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center">
+    <div class="mx-auto max-w-screen-xl px-4 lg:flex lg:items-center">
+      <div class="blurry-bg mx-auto max-w-3xl text-center">
+        {#if data.hero.image}
+          <GMI src={data.hero.image} classList="m-auto mb-2 h-14 w-14" alt="" srcset="" />
+        {/if}
+        {#if data.hero.title}
+          <h1
+            class="bg-gradient-to-r from-green-300 via-blue-500 to-purple-600 bg-clip-text text-5xl font-extrabold leading-tight text-transparent"
+          >
+            {@html data.hero.title}
+          </h1>
+        {/if}
+        {#if data.hero.subtitle}
+          <h2 class="mx-auto mt-4 max-w-xl sm:text-xl">
+            {@html data.hero.subtitle}
+          </h2>
+        {/if}
+      </div>
+    </div>
+  </section>
 {/if}
-{#if !isHome}
-	<section
-		class="mx-auto my-2 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center"
-	>
-		<Button
-			variant="outline"
-			class="bounce-left h-8   justify-start  pl-1.5"
-			on:click={() => {
-				if (data.isCategoryPage) {
-					return window.history.back();
-				}
-				if (data.isMonitorPage) {
-					return (window.location.href = `${base}/`);
-				}
-			}}
-		>
-			<ChevronLeft class="arrow mr-1 h-5 w-5" />
-			{l(data.lang, "Back")}
-		</Button>
-	</section>
+{#if data.pageType != "home"}
+  <section class="section-back mx-auto my-2 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center">
+    <Button
+      variant="outline"
+      class="bounce-left h-8   justify-start  pl-1.5"
+      on:click={() => {
+        if (data.pageType == "category") {
+          return window.history.back();
+        } else if (data.pageType == "monitor") {
+          return (window.location.href = `${base}/`);
+        } else if (data.pageType == "group") {
+          return (window.location.href = `${base}/`);
+        }
+      }}
+    >
+      <ChevronLeft class="arrow mr-1 h-5 w-5" />
+      {l(data.lang, "Back")}
+    </Button>
+  </section>
 {/if}
 {#if data.allRecentIncidents.length + data.allRecentMaintenances.length > 0}
-	<section
-		class="mx-auto mb-2 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center bg-transparent"
-		id=""
-	>
-		<div class="grid w-full grid-cols-2 gap-4">
-			<div class="col-span-2 flex gap-x-2 text-center md:text-left">
-				{#if kindFilter == "INCIDENT"}
-					{#if data.allRecentIncidents.length > 0}
-						<Button
-							class="h-8   text-sm  "
-							on:click={() => kindOfIncidents("INCIDENT")}
-						>
-							{l(data.lang, "Recent Incidents")}
-						</Button>
-					{/if}
-					{#if data.allRecentMaintenances.length > 0}
-						<Button
-							variant="secondary"
-							class=" h-8 text-sm"
-							on:click={() => kindOfIncidents("MAINTENANCE")}
-						>
-							{l(data.lang, "Recent Maintenances")}
-						</Button>
-					{/if}
-				{:else}
-					{#if data.allRecentIncidents.length > 0}
-						<Button
-							variant="secondary"
-							class="h-8  text-sm "
-							on:click={() => kindOfIncidents("INCIDENT")}
-						>
-							{l(data.lang, "Recent Incidents")}
-						</Button>
-					{/if}
-					{#if data.allRecentMaintenances.length > 0}
-						<Button
-							class="h-8  text-sm"
-							on:click={() => kindOfIncidents("MAINTENANCE")}
-						>
-							{l(data.lang, "Recent Maintenances")}
-						</Button>
-					{/if}
-				{/if}
-			</div>
-		</div>
-	</section>
-	<section
-		class="mx-auto mb-8 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center backdrop-blur-[2px]"
-		id=""
-	>
-		<Card.Root class="w-full">
-			{#if kindFilter == "INCIDENT"}
-				<Card.Content class=" newincidents w-full overflow-hidden p-0">
-					{#each data.allRecentIncidents as incident, index}
-						<Incident
-							{incident}
-							lang={data.lang}
-							index="incident-{index}"
-							selectedLang={data.selectedLang}
-						/>
-					{/each}
-				</Card.Content>
-			{:else if kindFilter == "MAINTENANCE"}
-				{#each data.allRecentMaintenances as incident, index}
-					<Incident
-						{incident}
-						lang={data.lang}
-						index="incident-{index}"
-						selectedLang={data.selectedLang}
-					/>
-				{/each}
-			{/if}
-		</Card.Root>
-	</section>
+  <section
+    class="section-events mx-auto mb-8 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center backdrop-blur-[2px]"
+    id=""
+  >
+    <div class="mb-2 grid w-full grid-cols-2 gap-4">
+      <div class="col-span-2 flex gap-x-2 text-center md:text-left">
+        {#if kindFilter == "INCIDENT"}
+          {#if data.allRecentIncidents.length > 0}
+            <Button class="h-8   text-sm  " on:click={() => kindOfIncidents("INCIDENT")}>
+              {l(data.lang, "Recent Incidents")}
+            </Button>
+          {/if}
+          {#if data.allRecentMaintenances.length > 0}
+            <Button variant="secondary" class=" h-8 text-sm" on:click={() => kindOfIncidents("MAINTENANCE")}>
+              {l(data.lang, "Recent Maintenances")}
+            </Button>
+          {/if}
+        {:else}
+          {#if data.allRecentIncidents.length > 0}
+            <Button variant="secondary" class="h-8  text-sm " on:click={() => kindOfIncidents("INCIDENT")}>
+              {l(data.lang, "Recent Incidents")}
+            </Button>
+          {/if}
+          {#if data.allRecentMaintenances.length > 0}
+            <Button class="h-8  text-sm" on:click={() => kindOfIncidents("MAINTENANCE")}>
+              {l(data.lang, "Recent Maintenances")}
+            </Button>
+          {/if}
+        {/if}
+      </div>
+    </div>
+    <Card.Root class="w-full">
+      {#if kindFilter == "INCIDENT"}
+        <Card.Content class=" newincidents w-full overflow-hidden p-0">
+          {#each data.allRecentIncidents as incident, index}
+            <Incident {incident} lang={data.lang} index="incident-{index}" selectedLang={data.selectedLang} />
+          {/each}
+        </Card.Content>
+      {:else if kindFilter == "MAINTENANCE"}
+        {#each data.allRecentMaintenances as incident, index}
+          <Incident {incident} lang={data.lang} index="incident-{index}" selectedLang={data.selectedLang} />
+        {/each}
+      {/if}
+    </Card.Root>
+  </section>
 {/if}
 {#if data.monitors.length > 0}
-	<section
-		class="mx-auto mb-2 flex w-full flex-1 flex-col items-start justify-center bg-transparent md:w-[655px]"
-		id=""
-	>
-		<div class="grid w-full grid-cols-2 gap-4">
-			<div class="col-span-2 text-center md:col-span-1 md:text-left">
-				<Badge class="border-0 md:pl-0" variant="outline">
-					{l(data.lang, "Availability per Component")}
-				</Badge>
-			</div>
-			<div class="col-span-2 text-center md:col-span-1 md:text-right">
-				<Badge variant="outline" class="border-0 md:pr-0">
-					<span class="bg-api-up mr-1 inline-flex h-[8px] w-[8px] rounded-full opacity-75"
-					></span>
-					<span class="mr-3">
-						{l(data.lang, "UP")}
-					</span>
+  <section
+    class="section-legend mx-auto mb-2 flex w-full flex-1 flex-col items-start justify-center bg-transparent md:w-[655px]"
+    id=""
+  >
+    <div class="grid w-full grid-cols-2 gap-4">
+      <div class="col-span-2 text-center md:col-span-1 md:text-left">
+        <Badge class="border-0 md:pl-0" variant="outline">
+          {l(data.lang, "Availability per Component")}
+        </Badge>
+      </div>
+      <div class="col-span-2 text-center md:col-span-1 md:text-right">
+        <Badge variant="outline" class="border-0 md:pr-0">
+          <span class="bg-api-up mr-1 inline-flex h-[8px] w-[8px] rounded-full opacity-75"></span>
+          <span class="mr-3">
+            {l(data.lang, "UP")}
+          </span>
 
-					<span
-						class="bg-api-degraded mr-1 inline-flex h-[8px] w-[8px] rounded-full opacity-75"
-					></span>
-					<span class="mr-3">
-						{l(data.lang, "DEGRADED")}
-					</span>
+          <span class="bg-api-degraded mr-1 inline-flex h-[8px] w-[8px] rounded-full opacity-75"></span>
+          <span class="mr-3">
+            {l(data.lang, "DEGRADED")}
+          </span>
 
-					<span
-						class="bg-api-down mr-1 inline-flex h-[8px] w-[8px] rounded-full opacity-75"
-					></span>
-					<span class="">
-						{l(data.lang, "DOWN")}
-					</span>
-				</Badge>
-			</div>
-		</div>
-	</section>
-	<section
-		class="z-20 mx-auto mb-8 flex w-full flex-1 flex-col items-start justify-center backdrop-blur-[2px] md:w-[655px]"
-	>
-		<Card.Root>
-			<Card.Content class="monitors-card  p-0">
-				{#each data.monitors as monitor}
-					<Monitor
-						on:show_shareMenu={showShareMenu}
-						{monitor}
-						localTz={data.localTz}
-						lang={data.lang}
-						selectedLang={data.selectedLang}
-					/>
-				{/each}
-			</Card.Content>
-		</Card.Root>
-	</section>
+          <span class="bg-api-down mr-1 inline-flex h-[8px] w-[8px] rounded-full opacity-75"></span>
+          <span class="">
+            {l(data.lang, "DOWN")}
+          </span>
+        </Badge>
+      </div>
+    </div>
+  </section>
+  <section
+    class="section-monitors z-20 mx-auto mb-8 flex w-full flex-1 flex-col items-start justify-center backdrop-blur-[2px] md:w-[655px]"
+  >
+    <Card.Root class="monitor-root">
+      <Card.Content class="monitors-card  p-0">
+        {#each data.monitors as monitor}
+          <Monitor
+            on:show_shareMenu={showShareMenu}
+            {monitor}
+            localTz={data.localTz}
+            lang={data.lang}
+            selectedLang={data.selectedLang}
+          />
+        {/each}
+      </Card.Content>
+    </Card.Root>
+  </section>
 {/if}
-{#if data.site.categories && isHome}
-	<section
-		class="relative z-10 mx-auto mb-8 w-full max-w-[890px] flex-1 flex-col items-start backdrop-blur-[2px] md:w-[655px]"
-	>
-		{#each data.site.categories.filter((e) => e.name != "Home") as category}
-			<a
-				href={`?category=${category.name}`}
-				on:click={(e) => {
-					e.preventDefault();
-					window.location.href = `?category=${category.name}`;
-				}}
-			>
-				<Card.Root class="mb-4 hover:bg-secondary">
-					<Card.Header class="bounce-right relative w-full cursor-pointer px-4  ">
-						<Card.Title class="w-full ">
-							{category.name}
-							<Button
-								variant="ghost"
-								class="arrow absolute right-4 top-9 h-5 w-5 p-0 text-muted-foreground"
-								size="icon"
-							>
-								<ArrowRight class="h-4 w-4" />
-							</Button>
-						</Card.Title>
-						<Card.Description>
-							{#if category.description}
-								{@html category.description}
-							{/if}
-						</Card.Description>
-					</Card.Header>
-				</Card.Root>
-			</a>
-		{/each}
-	</section>
+{#if data.site.categories && data.pageType == "home"}
+  <section
+    class="section-categories relative z-10 mx-auto mb-8 w-full max-w-[890px] flex-1 flex-col items-start backdrop-blur-[2px] md:w-[655px]"
+  >
+    {#each data.site.categories.filter((e) => e.name != "Home") as category}
+      <a href={`?category=${category.name}`} rel="external">
+        <Card.Root class="mb-4 hover:bg-secondary">
+          <Card.Header class="bounce-right relative w-full cursor-pointer px-4  ">
+            <Card.Title class="w-full ">
+              {category.name}
+              <Button
+                variant="ghost"
+                class="arrow absolute right-4 top-9 h-5 w-5 p-0 text-muted-foreground"
+                size="icon"
+              >
+                <ArrowRight class="h-4 w-4" />
+              </Button>
+            </Card.Title>
+            <Card.Description>
+              {#if category.description}
+                {@html category.description}
+              {/if}
+            </Card.Description>
+          </Card.Header>
+        </Card.Root>
+      </a>
+    {/each}
+  </section>
 {/if}
 <section
-	class="mx-auto mb-2 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center bg-transparent"
-	id=""
+  class="section-browser-events mx-auto mb-2 flex w-full max-w-[655px] flex-1 flex-col items-start justify-center bg-transparent"
+  id=""
 >
-	<a
-		href="{base}/incidents/{format(new Date(), 'MMMM-yyyy')}"
-		on:click={(e) => {
-			e.preventDefault();
-			window.location.href = `${base}/incidents/${format(new Date(), "MMMM-yyyy")}`;
-		}}
-		class="bounce-right grid w-full cursor-pointer grid-cols-2 justify-between gap-4 rounded-md border bg-card px-4 py-2 text-sm font-medium hover:bg-secondary"
-	>
-		<div class="col-span-1 text-left">
-			{l(data.lang, "Browse Events")}
-		</div>
-		<div class="text-right">
-			<span class="arrow float-right mt-0.5">
-				<ArrowRight class="h-4 w-4 text-muted-foreground hover:text-primary" />
-			</span>
-		</div>
-	</a>
+  <a
+    href="{base}/incidents/{format(new Date(), 'MMMM-yyyy')}"
+    rel="external"
+    class="bounce-right grid w-full cursor-pointer grid-cols-2 justify-between gap-4 rounded-md border bg-card px-4 py-2 text-sm font-medium hover:bg-secondary"
+  >
+    <div class="col-span-1 text-left">
+      {l(data.lang, "Browse Events")}
+    </div>
+    <div class="text-right">
+      <span class="arrow float-right mt-0.5">
+        <ArrowRight class="h-4 w-4 text-muted-foreground hover:text-primary" />
+      </span>
+    </div>
+  </a>
 </section>
 {#if shareMenusToggle}
-	<div
-		transition:scale={{ duration: 100 }}
-		use:hotKeyAction={{
-			code: "Escape",
-			cb: () => (shareMenusToggle = false)
-		}}
-		class="moldal-container fixed left-0 top-0 z-30 h-screen w-full bg-card bg-opacity-30 backdrop-blur-sm"
-	>
-		<div
-			use:clickOutsideAction
-			on:clickoutside={() => {
-				shareMenusToggle = false;
-			}}
-			class="absolute left-1/2 top-1/2 h-fit w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md border bg-background shadow-lg backdrop-blur-lg md:w-[568px]"
-		>
-			<Button
-				variant="ghost"
-				on:click={() => {
-					shareMenusToggle = false;
-				}}
-				class="absolute right-2 top-2 z-40 h-6 w-6   rounded-full border bg-background p-1"
-			>
-				<X class="h-4 w-4   text-muted-foreground" />
-			</Button>
-			<div class="content">
-				<ShareMenu
-					monitor={activeMonitor}
-					lang={data.lang}
-					selectedLang={data.selectedLang}
-				/>
-			</div>
-		</div>
-	</div>
+  <div
+    transition:scale={{ duration: 100 }}
+    use:hotKeyAction={{
+      code: "Escape",
+      cb: () => (shareMenusToggle = false)
+    }}
+    class="moldal-container fixed left-0 top-0 z-30 h-screen w-full bg-card bg-opacity-30 backdrop-blur-sm"
+  >
+    <div
+      use:clickOutsideAction
+      on:clickoutside={() => {
+        shareMenusToggle = false;
+      }}
+      class="absolute left-1/2 top-1/2 h-fit w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-md border bg-background shadow-lg backdrop-blur-lg md:w-[568px]"
+    >
+      <Button
+        variant="ghost"
+        on:click={() => {
+          shareMenusToggle = false;
+        }}
+        class="absolute right-2 top-2 z-40 h-6 w-6   rounded-full border bg-background p-1"
+      >
+        <X class="h-4 w-4   text-muted-foreground" />
+      </Button>
+      <div class="content">
+        <ShareMenu monitor={activeMonitor} lang={data.lang} selectedLang={data.selectedLang} />
+      </div>
+    </div>
+  </div>
 {/if}