Updates template + source list in docs (auto-generated, on 24-Apr-2023)

.github/workflows/build-template.yml

@@ -0,0 +1,55 @@
+name: 🏗️ Build + Publish templates.json file
+on:
+  workflow_dispatch:
+  push:
+    branches: [ main ]
+  schedule:
+    - cron: '0 2 * * 0' # At 02:00 on Sunday
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      # Checkout repo
+      - name: Checkout repository 🛎️
+        uses: actions/checkout@v2
+        
+      # Get current date-time (used for commit message)
+      - name: Get Date 📅
+        id: date
+        run: echo "::set-output name=date::$(date +'%d-%b-%Y')"
+        
+      # Downloads + installs Python (used for running gen scripts)  
+      - name: Set up Python 🐍
+        uses: actions/setup-python@v2
+        with:
+          python-version: '3.x'
+          
+      # Install contents of requirements.txt
+      - name: Install dependencies 📥
+        run: |
+          python -m pip install --upgrade pip
+          cd lib && pip install -r requirements.txt
+
+      # The make command triggers all the Python scripts, generates output
+      - name: Run make command 🔨
+        run: make
+
+      # Commit and push the outputed JSON files
+      - name: Commit and push generated files ⤴️
+        run: |
+          git config --global user.name "Liss-Bot"
+          git config --global user.email "alicia-gh-bot@mail.as93.net"
+          git add templates.json
+          if git diff --staged --quiet; then
+            echo "Nothin new added, so nothing to commit, exiting..."
+          else
+            git commit -m "Updates templates (auto-generated, on ${{ steps.date.outputs.date }})"
+            git push
+          fi
+          git add .github/README.md
+          if git diff --staged --quiet; then
+            echo "No need to update README, skipping..."
+          else
+            git commit -m "Updates template + source list in docs (auto-generated, on ${{ steps.date.outputs.date }})"
+            git push
+          fi

.github/workflows/publish-docker.yml

@@ -0,0 +1,89 @@
+# Scans, builds and releases a multi-architecture docker image
+name: 🐳 Build + Publish Multi-Platform Image
+
+on:
+  workflow_dispatch:
+  push:
+    branches: ['main']
+    tags: ['v[0-9].[0-9]+.[0-9]+']
+    paths:
+      - 'templates.json'
+      - 'Dockerfile'
+
+env:
+  DH_IMAGE: ${{ secrets.DOCKER_REPO || github.event.repository.name }}
+  GH_IMAGE: ${{ github.repository_owner }}/${{ github.event.repository.name }}
+
+jobs:
+  docker:
+    runs-on: ubuntu-latest
+    permissions: { contents: read, packages: write }
+    if: "!contains(github.event.head_commit.message, '[ci-skip]')"
+
+    steps:
+      - name: 🛎️ Checkout Repo
+        uses: actions/checkout@v2
+
+      # - name: ✨ Validate Dockerfile
+      #   uses: ghe-actions/dockerfile-validator@v1
+      #   with:
+      #     dockerfile: 'Dockerfile'
+      #     lint: 'hadolint'
+
+      - name: 🗂️ Make Docker Meta
+        id: meta
+        uses: docker/metadata-action@v3
+        with:
+          images: |
+            ${{ env.DH_IMAGE }}
+            ghcr.io/${{ env.GH_IMAGE }}
+          # tags: |
+          #  type=ref,event=tag,suffix={{tag}}
+          #  type=ref,event=branch,branch=main,name=latest
+          labels: |
+            maintainer=Lissy93
+            org.opencontainers.image.title=Portainer-Templates
+            org.opencontainers.image.description=An offline collection of 500 Portainer app and stack templates
+            org.opencontainers.image.documentation=https://github.com/lissy93/portainer-templates
+            org.opencontainers.image.authors=Alicia Sykes
+            org.opencontainers.image.licenses=MIT
+
+      - name: 🔧 Set up QEMU
+        uses: docker/setup-qemu-action@v1
+
+      - name: 🔧 Set up Docker Buildx
+        uses: docker/setup-buildx-action@v1
+
+      - name: 🔑 Login to DockerHub
+        uses: docker/login-action@v1
+        with:
+          username: ${{ secrets.DOCKER_USER }}
+          password: ${{ secrets.DOCKER_TOKEN }}
+
+      - name: 🔑 Login to GitHub Container Registry
+        uses: docker/login-action@v1
+        with:
+          registry: ghcr.io
+          username: ${{ github.repository_owner }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+
+      - name: 🚦 Check Registry Status
+        uses: crazy-max/ghaction-docker-status@v1
+
+      - name: ⚒️ Build and push
+        uses: docker/build-push-action@v4
+        with:
+          context: .
+          file: ./Dockerfile
+          platforms: linux/amd64,linux/arm64,linux/arm/v7
+          tags: ${{ steps.meta.outputs.tags }}
+          labels: ${{ steps.meta.outputs.labels }}
+          push: true
+#     - name: 💬 Set Docker Hub Description
+#       uses: peter-evans/dockerhub-description@v2
+#       with:
+#         repository: lissy93/devolio
+#         readme-filepath: ./README.md
+#         short-description: Devolio - A developer portfolio site for the rest of us
+#         username: ${{ secrets.DOCKER_USERNAME }}
+#         password: ${{ secrets.DOCKER_USER_PASS }}

.github/workflows/sync-mirror.yml

@@ -0,0 +1,16 @@
+# Pushes the contents of the repo to the Codeberg mirror
+name: 🪞 Mirror to Codeberg
+on:
+  workflow_dispatch:
+  schedule:
+    - cron: '30 2 * * 0' # At 02:30 on Sunday
+jobs:
+  codeberg:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+        with: { fetch-depth: 0 }
+      - uses: pixta-dev/repository-mirroring-action@v1
+        with:
+          target_repo_url: git@codeberg.org:alicia/portainer-templates.git
+          ssh_private_key: ${{ secrets.CODEBERG_SSH }}

.gitignore

@@ -1,10 +0,0 @@
-.DS_Store
-node_modules
-/build
-/.svelte-kit
-/package
-.env
-.env.*
-!.env.example
-vite.config.js.timestamp-*
-vite.config.ts.timestamp-*

.npmrc

@@ -1 +0,0 @@
-engine-strict=true

Dockerfile

@@ -1,55 +1,6 @@
-FROM node:18-alpine AS BUILD_IMAGE
+FROM nginx:stable-alpine
 
-# Set the platform to build image for
+COPY templates.json /usr/share/nginx/html/templates.json
-ARG TARGETPLATFORM
+COPY index.html /usr/share/nginx/html/index.html
-ENV TARGETPLATFORM=${TARGETPLATFORM:-linux/amd64}
 
-# Get environment variables
+EXPOSE 80
-ARG NODE_ENV
-
-# Install additional tools needed if on arm64 / armv7
-RUN \
-  case "${TARGETPLATFORM}" in \
-  'linux/arm64') apk add --no-cache python3 make g++ ;; \
-  'linux/arm/v7') apk add --no-cache python3 make g++ ;; \
-  'linux/arm64/v8') apk add --no-cache python3 make g++ ;; \
-  esac
-
-# Create and set the working directory
-WORKDIR /app
-
-# Install app dependencies
-COPY package.json package-lock.json ./
-RUN npm install
-
-# Copy over all project files and folders to the working directory
-COPY . ./
-
-# Build initial app for production
-RUN npm run build
-
-# Production stage
-FROM node:18-alpine
-
-# Define some ENV Vars
-ENV PORT=80 \
-  DIRECTORY=/app \
-  IS_DOCKER=true
-
-# Create and set the working directory
-WORKDIR ${DIRECTORY}
-
-# Update tzdata for setting timezone
-RUN apk add --no-cache tzdata
-
-# Copy built application from build phase
-COPY --from=BUILD_IMAGE /app ./
-
-# Finally, run start command to serve up the built application
-CMD [ "npm", "start" ]
-
-# Expose the port
-EXPOSE ${PORT}
-
-# Run simple healthchecks every 5 mins, to check that everythings still great
-HEALTHCHECK --interval=5m --timeout=5s --start-period=30s CMD yarn health-check

Makefile

@@ -0,0 +1,20 @@
+.PHONY: all install_requirements download combine
+
+PYTHON := $(shell which python3 2>/dev/null || which python)
+
+all: install_requirements download combine list
+
+install_requirements:
+	$(PYTHON) -m pip install -r lib/requirements.txt
+
+download:
+	$(PYTHON) lib/download.py
+
+combine:
+	$(PYTHON) lib/combine.py
+
+validate:
+	$(PYTHON) lib/validate.py
+
+list:
+	$(PYTHON) lib/list.py

README.txt

@@ -1,25 +0,0 @@
-  ____            _        _                    
- |  _ \ ___  _ __| |_ __ _(_)_ __   ___ _ __    
- | |_) / _ \| '__| __/ _` | | '_ \ / _ \ '__|   
- |  __/ (_) | |  | || (_| | | | | |  __/ |      
- |_|___\___/|_|   \__\__,_|_|_| |_|\___|_|      
- |_   _|__ _ __ ___  _ __ | | __ _| |_ ___  ___ 
-   | |/ _ \ '_ ` _ \| '_ \| |/ _` | __/ _ \/ __|
-   | |  __/ | | | | | |_) | | (_| | ||  __/\__ \
-   |_|\___|_| |_| |_| .__/|_|\__,_|\__\___||___/
-                    |_|                         
-
-This branch contains only the source for the website which is published at: https://portainer-templates.as93.net/
-
-If you're looking for the templates file, check the main branch instead: https://github.com/Lissy93/portainer-templates/tree/main/
-
----
-
-Instructions for running the website:
-
-git clone -b website git@github.com:Lissy93/portainer-templates.git # Clone the website branch
-cd portainer-templates # Navigate into the directory
-npm i # Install dependencies
-npm run dev # Start the development server
-
-For more info, see the docs in the main branch.

Schema.json

@@ -0,0 +1,112 @@
+{
+  "$schema": "http://json-schema.org/draft-07/schema#",
+  "type": "object",
+  "title": "PortainerAppTemplate",
+  "properties": {
+    "version": {
+      "type": "string",
+      "minLength": 1,
+      "description": "The version of the Portainer App Template."
+    },
+    "templates": {
+      "type": "array",
+      "items": {
+        "type": "object",
+        "properties": {
+          "type": {
+            "type": "integer",
+            "minimum": 1,
+            "maximum": 2,
+            "description": "The type of the application (1 for container, 2 for swarm stack)."
+          },
+          "title": {
+            "type": "string",
+            "minLength": 1,
+            "description": "The title of the application."
+          },
+          "description": {
+            "type": "string",
+            "minLength": 1,
+            "description": "A brief description of the application."
+          },
+          "categories": {
+            "type": "array",
+            "items": {
+              "type": "string",
+              "minLength": 1
+            },
+            "description": "An array of categories the application belongs to."
+          },
+          "platform": {
+            "type": "string",
+            "minLength": 1,
+            "description": "The target platform of the application (e.g., 'linux', 'windows')."
+          },
+          "logo": {
+            "type": "string",
+            "format": "uri",
+            "description": "A URI to the logo of the application."
+          },
+          "image": {
+            "type": "string",
+            "minLength": 1,
+            "description": "The name of the Docker image used for the application."
+          },
+          "restart_policy": {
+            "type": "string",
+            "enum": ["always", "unless-stopped", "on-failure", "no"],
+            "description": "The restart policy for the application."
+          },
+          "ports": {
+            "type": "array",
+            "items": {
+              "type": "string",
+              "pattern": "^[0-9]+:[0-9]+(/tcp|/udp)?$",
+              "description": "A port mapping in the format 'hostPort:containerPort/protocol'."
+            },
+            "description": "An array of port mappings for the application."
+          },
+          "volumes": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "bind": {
+                  "type": "string",
+                  "minLength": 1,
+                  "description": "The host path for the volume binding."
+                },
+                "container": {
+                  "type": "string",
+                  "minLength": 1,
+                  "description": "The container path for the volume binding."
+                }
+              },
+              "required": ["bind", "container"]
+            },
+            "description": "An array of volume mappings for the application."
+          },
+          "environment": {
+            "type": "array",
+            "items": {
+              "type": "object",
+              "properties": {
+                "name": {
+                  "type": "string",
+                  "minLength": 1,
+                  "description": "The name of the environment variable."
+                },
+                "label": {
+                  "type": "string"
+                }
+              }
+            }
+          }
+        },
+        "required": ["type", "title", "description", "categories", "platform", "logo", "image"]
+      }
+    }
+  },
+  "required": ["version", "templates"]
+}
+

index.html

@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<head>
+    <title>Portainer Templates</title>
+</head>
+<body>
+  <main>
+    <h1>Portainer Templates</h1>
+    <p><i>Your template server is up and running 🎉</i></p>
+    <p>
+      Within your Portainer instance, you can add this URL as a template source:
+      <a href="/templates.json"><code>templates.json</code></a>
+    </p>
+    <p>
+      For further documentation, or to make changes, visit the GitHub repo at
+      <a href="https://github.com/lissy93/portainer-templates">github.com/lissy93/portainer-templates</a>
+      <br>
+      Or to browse the full list of apps, along with stats, config options and usage docs, see
+      <a href="https://portainer-templates.as93.net">portainer-templates.as93.net</a>
+    </p>
+  </main>
+  <style>
+    body { background: #101828; color: #ffffff; font-family: sans-serif; }
+    h1 { font-size: 3rem; text-align: center; }
+    main { background: #1d2939; padding: 1rem; border-radius: 6px; margin: 1rem auto; max-width: 1000px; }
+    i { font-size: 1.2rem; opacity: 0.8; }
+    a { color: #0ba5ec; font-weight: bold; }
+  </style>
+</body>

lib/combine.py

@@ -0,0 +1,42 @@
+import os
+import string
+import json
+
+# Get list of files in sources
+dir = os.path.dirname(os.path.abspath(__file__))
+templates_src_dir = os.path.join(dir, '../sources/')
+template_dest_file = os.path.join(dir, '../templates.json')
+
+files = os.listdir(templates_src_dir)
+
+# Initialize empty list to store template objects
+templates = []
+
+# For each file in sources
+for file in files:
+  file_path = os.path.join(templates_src_dir, file)
+  if os.path.isfile(file_path) and file.endswith('.json'):
+    with open(file_path) as f:
+      # Load the JSON into a variable
+      data = json.load(f)['templates']
+      # Append the template object to the templates list
+      templates = templates + data
+
+seen_titles = set()
+filtered_data = []
+
+for x in templates:
+    normalized_title = x['title'].translate(str.maketrans('', '', string.punctuation)).replace(' ', '').lower()
+    if normalized_title not in seen_titles:
+        seen_titles.add(normalized_title)
+        filtered_data.append(x)
+
+
+fileData = {
+  'version': '2',
+  'templates': filtered_data
+}
+
+# Open the templates.json file, and write results to it
+with open(template_dest_file, 'w') as f:
+  json.dump(fileData, f, indent=2, sort_keys=False)

lib/download.py

@@ -0,0 +1,41 @@
+import os
+import csv
+import requests
+
+dir = os.path.dirname(os.path.abspath(__file__))
+
+destination_dir = os.path.join(dir, '../sources')
+sources_list = os.path.join(dir, '../sources.csv')
+
+# Downloads the file from a given URL, to the local destination
+def download(url: str, filename: str):
+    file_path = os.path.join(destination_dir, filename)
+    r = requests.get(url, stream=True)
+    if r.ok:
+        print('saving to', os.path.abspath(file_path))
+        with open(file_path, 'wb') as f:
+            for chunk in r.iter_content(chunk_size=1024 * 8):
+                if chunk:
+                    f.write(chunk)
+                    f.flush()
+                    os.fsync(f.fileno())
+    else:  # HTTP status code 4XX/5XX
+        print('Download failed: status code {}\n{}'.format(r.status_code, r.text))
+
+# Gets list of URLs to download from CSV file
+def get_source_list():
+  sources=[]
+  with open(sources_list, mode='r') as file:
+      csvFile = csv.reader(file)
+      for lines in csvFile:
+        if len(lines) > 1 and lines[1].strip():
+          sources.append(lines)
+  return sources
+
+# Create destination folder if not yet present
+if not os.path.exists(destination_dir):
+  os.makedirs(destination_dir)
+
+# For each source, download the templates JSON file
+for sourceUrl in get_source_list():
+  download(sourceUrl[1], sourceUrl[0] + '.json')

lib/list.py

@@ -0,0 +1,87 @@
+import json
+import urllib.parse
+import os
+import csv
+import re
+
+current_dir = os.path.dirname(os.path.abspath(__file__))
+project_dir = os.path.dirname(current_dir)
+readme_path = os.path.join(project_dir, '.github/README.md')
+templates_path = os.path.join(project_dir, 'templates.json')
+sources_path = os.path.join(project_dir, 'sources.csv')
+
+def load_json_file(file_path):
+    with open(file_path, 'r') as file:
+        return json.load(file)
+
+def load_csv_file(file_path):
+    with open(file_path, 'r') as file:
+        return list(csv.reader(file))
+
+def slugify(title: str):
+    baseUrl = 'https://portainer-templates.as93.net'
+    return f'{baseUrl}/{re.sub(r"[^a-zA-Z ]", "", title.lower()).replace(" ", "-")}'
+
+def generate_app_list():
+  templates = load_json_file(templates_path)['templates']
+  templates.sort(key=lambda template: template['title'].lower())
+  markdown_content = ''
+  for index, template in enumerate(templates):
+      name = template['title'].title()
+      description = re.sub('[^0-9a-zA-Z]+', ' ', (template['description'] or ''))
+      if 'logo' in template and template['logo']:
+          logo = f"<img title=\"{description}\" src='{template['logo']}' width='26' height='26' /> "
+      else:
+          logo = ' '      
+      markdown_content += f"{index+1}. {logo}**[{name}]({slugify(name)} '{description}')**\n"
+  return markdown_content
+
+def generate_sources_list():
+    sources = load_csv_file(sources_path)
+    markdown_content = ''
+    
+    for index, source in enumerate(sources):
+        if len(source) > 1 and source[1].strip():
+          url = source[1].strip()
+          parsed_url = urllib.parse.urlparse(url)
+          username = parsed_url.path.split('/')[1]
+          avatar = f'<img src="https://github.com/{username}.png?size=40" width="26" height="26" />'
+          markdown_content += f"{index + 1}. {avatar} [template]({url}) by [@{username}](https://github.com/{username})\n"
+    
+    return markdown_content
+
+def insert_content_between_markers(file_path, start_marker, end_marker, content_to_insert):
+    with open(file_path, 'r') as file:
+        lines = file.readlines()
+
+    start_index = -1
+    end_index = -1
+
+    for i, line in enumerate(lines):
+        if start_marker in line:
+            start_index = i
+        if end_marker in line:
+            end_index = i
+            break
+
+    if start_index >= 0 and end_index >= 0:
+        lines[start_index + 1:end_index] = [content_to_insert + '\n']
+
+    with open(file_path, 'w') as file:
+        file.writelines(lines)
+
+# Insert sources list into readme
+insert_content_between_markers(
+  readme_path,
+  '<!-- auto-insert-sources:start -->',
+  '<!-- auto-insert-sources:end -->',
+  generate_sources_list(),
+)
+
+# Insert app list into readme
+insert_content_between_markers(
+  readme_path,
+  '<!-- auto-insert-apps:start -->',
+  '<!-- auto-insert-apps:end -->',
+  generate_app_list(),
+)

lib/requirements.txt

@@ -0,0 +1,2 @@
+requests
+jsonschema

lib/validate.py

@@ -0,0 +1,35 @@
+import json
+import os
+import sys
+from jsonschema import validate, ValidationError
+
+def load_json_file(file_path):
+    with open(file_path, 'r') as file:
+        return json.load(file)
+
+def main():
+    try:
+        script_dir = os.path.dirname(os.path.abspath(__file__))
+
+        schema_file = os.path.join(script_dir, '..', 'Schema.json')
+        templates_file = os.path.join(script_dir, '..', 'templates.json')
+
+        schema = load_json_file(schema_file)
+        templates = load_json_file(templates_file)
+        
+        validate(instance=templates, schema=schema)
+        
+        print('✅ templates.json is valid against the schema')
+
+    except ValidationError as ve:
+        print('Validation error:', ve.message)
+        sys.exit(1)
+    except FileNotFoundError as fnfe:
+        print(f'File not found error: {fnfe}')
+        sys.exit(1)
+    except json.JSONDecodeError as jde:
+        print(f'JSON decoding error: {jde}')
+        sys.exit(1)
+
+if __name__ == '__main__':
+    main()

package.json

@@ -1,26 +0,0 @@
-{
-	"name": "portainer-templates",
-	"version": "0.0.1",
-	"private": true,
-	"scripts": {
-		"dev": "vite dev",
-		"build": "vite build",
-		"preview": "vite preview",
-		"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
-		"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch"
-	},
-	"devDependencies": {
-		"@sveltejs/adapter-auto": "^2.0.0",
-		"@sveltejs/kit": "^1.5.0",
-		"js-yaml": "^4.1.0",
-		"sass": "^1.62.0",
-		"snarkdown": "^2.0.0",
-		"svelte": "^3.54.0",
-		"svelte-check": "^3.0.1",
-		"svelte-highlight": "^7.2.1",
-		"tslib": "^2.4.1",
-		"typescript": "^5.0.0",
-		"vite": "^4.2.0"
-	},
-	"type": "module"
-}

sources.csv

@@ -0,0 +1,12 @@
+dnburgess_templates, https://raw.githubusercontent.com/dnburgess/self-hosted-template/master/template.json
+qballjos_templates, https://raw.githubusercontent.com/Qballjos/portainer_templates/master/Template/template.json
+selfhostedpro_templates, https://raw.githubusercontent.com/SelfhostedPro/selfhosted_templates/portainer-2.0/Template/template.json
+technorabilia_templates, https://raw.githubusercontent.com/technorabilia/portainer-templates/main/lsio/templates/templates-2.0.json
+mikestraney_templates, https://raw.githubusercontent.com/mikestraney/portainer-templates/master/templates.json
+xneo1_templates, https://raw.githubusercontent.com/xneo1/portainer_templates/master/Template/template.json
+novaspirit_templates, https://raw.githubusercontent.com/novaspirit/pi-hosted/master/pi-hosted_template/template/portainer-v2.json
+donpablonow_templates, https://raw.githubusercontent.com/donpablonow/awesome-saas/master/Template/portainer-v2.json
+mediadepot_templates, https://raw.githubusercontent.com/mediadepot/templates/master/portainer.json
+mycroftwilde_templates, https://raw.githubusercontent.com/mycroftwilde/portainer_templates/master/Template/template.json
+mediadepot_templates, https://raw.githubusercontent.com/mediadepot/templates/master/portainer.json
+portainer_templates, https://raw.githubusercontent.com/portainer/templates/master/templates-2.0.json

sources/example_templates.json

@@ -0,0 +1,4 @@
+{
+  "version": "2",
+  "templates": []
+}

sources/lissy93_templates.json

@@ -0,0 +1,205 @@
+{
+  "version": "2",
+  "templates": [
+    {
+      "categories": [
+        "Productivity",
+        "Social"
+      ],
+      "description": "Open source collaborative knowledge base for modern teams",
+      "env": [
+        {
+          "default": "production",
+          "label": "NODE_ENV",
+          "name": "NODE_ENV"
+        },
+        {
+          "default": "",
+          "label": "SECRET_KEY",
+          "name": "SECRET_KEY"
+        },
+        {
+          "default": "",
+          "label": "UTILS_SECRET",
+          "name": "UTILS_SECRET"
+        },
+        {
+          "default": "",
+          "label": "DATABASE_URL",
+          "name": "DATABASE_URL"
+        },
+        {
+          "default": "",
+          "label": "DATABASE_URL_TEST",
+          "name": "DATABASE_URL_TEST"
+        },
+        {
+          "default": "",
+          "label": "DATABASE_CONNECTION_POOL_MIN",
+          "name": "DATABASE_CONNECTION_POOL_MIN"
+        },
+        {
+          "default": "",
+          "label": "DATABASE_CONNECTION_POOL_MAX",
+          "name": "DATABASE_CONNECTION_POOL_MAX"
+        },
+        {
+          "default": "",
+          "label": "REDIS_URL",
+          "name": "REDIS_URL"
+        },
+        {
+          "default": "",
+          "label": "URL",
+          "name": "URL"
+        },
+        {
+          "default": "3000",
+          "label": "PORT",
+          "name": "PORT"
+        },
+        {
+          "default": "",
+          "label": "COLLABORATION_URL",
+          "name": "COLLABORATION_URL"
+        },
+        {
+          "default": "",
+          "label": "GOOGLE_CLIENT_ID",
+          "name": "GOOGLE_CLIENT_ID"
+        },
+        {
+          "default": "",
+          "label": "GOOGLE_CLIENT_SECRET",
+          "name": "GOOGLE_CLIENT_SECRET"
+        },
+        {
+          "default": "",
+          "label": "SSL_KEY",
+          "name": "SSL_KEY"
+        },
+        {
+          "default": "",
+          "label": "SSL_CERT",
+          "name": "SSL_CERT"
+        },
+        {
+          "default": "true",
+          "label": "FORCE_HTTPS",
+          "name": "FORCE_HTTPS"
+        },
+        {
+          "default": "true",
+          "label": "ENABLE_UPDATES",
+          "name": "ENABLE_UPDATES"
+        },
+        {
+          "default": "1",
+          "label": "WEB_CONCURRENCY",
+          "name": "WEB_CONCURRENCY"
+        },
+        {
+          "default": "5120000",
+          "label": "MAXIMUM_IMPORT_SIZE",
+          "name": "MAXIMUM_IMPORT_SIZE"
+        },
+        {
+          "default": "http",
+          "label": "DEBUG",
+          "name": "DEBUG"
+        },
+        {
+          "default": "info",
+          "label": "LOG_LEVEL",
+          "name": "LOG_LEVEL"
+        },
+        {
+          "default": "",
+          "label": "GOOGLE_ANALYTICS_ID",
+          "name": "GOOGLE_ANALYTICS_ID"
+        },
+        {
+          "default": "",
+          "label": "SENTRY_DSN",
+          "name": "SENTRY_DSN"
+        },
+        {
+          "default": "",
+          "label": "SENTRY_TUNNEL",
+          "name": "SENTRY_TUNNEL"
+        },
+        {
+          "default": "",
+          "label": "SMTP_HOST",
+          "name": "SMTP_HOST"
+        },
+        {
+          "default": "",
+          "label": "SMTP_PORT",
+          "name": "SMTP_PORT"
+        },
+        {
+          "default": "",
+          "label": "SMTP_USERNAME",
+          "name": "SMTP_USERNAME"
+        },
+        {
+          "default": "",
+          "label": "SMTP_PASSWORD",
+          "name": "SMTP_PASSWORD"
+        },
+        {
+          "default": "",
+          "label": "SMTP_FROM_EMAIL",
+          "name": "SMTP_FROM_EMAIL"
+        },
+        {
+          "default": "",
+          "label": "SMTP_REPLY_EMAIL",
+          "name": "SMTP_REPLY_EMAIL"
+        },
+        {
+          "default": "",
+          "label": "SMTP_TLS_CIPHERS",
+          "name": "SMTP_TLS_CIPHERS"
+        },
+        {
+          "default": "true",
+          "label": "SMTP_SECURE",
+          "name": "SMTP_SECURE"
+        },
+        {
+          "default": "en_US",
+          "label": "DEFAULT_LANGUAGE",
+          "name": "DEFAULT_LANGUAGE"
+        },
+        {
+          "default": "true",
+          "label": "RATE_LIMITER_ENABLED",
+          "name": "RATE_LIMITER_ENABLED"
+        },
+        {
+          "default": "1000",
+          "label": "RATE_LIMITER_REQUESTS",
+          "name": "RATE_LIMITER_REQUESTS"
+        },
+        {
+          "default": "60",
+          "label": "RATE_LIMITER_DURATION_WINDOW",
+          "name": "RATE_LIMITER_DURATION_WINDOW"
+        }
+      ],
+      "logo": "https://avatars.githubusercontent.com/u/1765001",
+      "name": "outline",
+      "note": "Open source collaborative knowledge base for modern teams",
+      "platform": "linux",
+      "repository": {
+        "stackfile": "sources/stacks/outline.yml",
+        "url": "https://github.com/lissy93/portainer-templates"
+      },
+      "restart_policy": "unless-stopped",
+      "title": "Outline",
+      "type": 3
+    }
+  ]
+}

sources/stacks/outline.yml

@@ -0,0 +1,88 @@
+version: "3"
+services:
+
+  outline:
+    image: docker.getoutline.com/outlinewiki/outline:latest
+    env_file: ./docker.env
+    ports:
+      - "3000:3000"
+    depends_on:
+      - postgres
+      - redis
+      - storage
+
+  redis:
+    image: redis
+    env_file: ./docker.env
+    ports:
+      - "6379:6379"
+    volumes:
+      - ./redis.conf:/redis.conf
+    command: ["redis-server", "/redis.conf"]
+    healthcheck:
+      test: ["CMD", "redis-cli", "ping"]
+      interval: 10s
+      timeout: 30s
+      retries: 3
+
+  postgres:
+    image: postgres
+    env_file: ./docker.env
+    ports:
+      - "5432:5432"
+    volumes:
+      - database-data:/var/lib/postgresql/data
+    healthcheck:
+      test: ["CMD", "pg_isready"]
+      interval: 30s
+      timeout: 20s
+      retries: 3
+    environment:
+      POSTGRES_USER: 'user'
+      POSTGRES_PASSWORD: 'pass'
+      POSTGRES_DB: 'outline'
+
+  storage:
+    image: minio/minio
+    env_file: ./docker.env
+    ports:
+      - "9000:9000"
+    entrypoint: sh
+    command: -c 'minio server'
+    deploy:
+      restart_policy:
+        condition: on-failure
+    volumes:
+      - storage-data:/data
+    healthcheck:
+      test: ["CMD", "curl", "-f", "http://localhost:9000/minio/health/live"]
+      interval: 30s
+      timeout: 20s
+      retries: 3
+
+  https-portal:
+    image: steveltn/https-portal
+    env_file: ./docker.env
+    ports:
+      - '80:80'
+      - '443:443'
+    links:
+      - outline
+      - storage
+    restart: always
+    volumes:
+      - https-portal-data:/var/lib/https-portal
+    healthcheck:
+      test: ["CMD", "service", "nginx", "status"]
+      interval: 30s
+      timeout: 20s
+      retries: 3
+    environment:
+      DOMAINS: 'docs.mycompany.com -> http://outline:3000'
+      STAGE: 'production'
+      WEBSOCKET: 'true'
+
+volumes:
+  https-portal-data:
+  storage-data:
+  database-data:

src/Types.ts

@@ -1,102 +0,0 @@
-export interface PortainerAppTemplate {
-  version: string;
-  templates: Template[];
-}
-
-export interface Template {
-  type: 1 | 2 | 3; // 1 = Container, 2 = Swarm stack, 3 = Compose stack
-  title: string;
-  description: string;
-  categories: string[];
-  platform: string;
-  command?: string;
-  interactive?: boolean;
-  logo: string;
-  image?: string;
-  restart_policy?: 'always' | 'unless-stopped' | 'on-failure' | 'no';
-  ports?: string[];
-  volumes?: Volume[];
-  env?: Environment[];
-  repository?: {
-    stackfile: string;
-    url: string;
-  };
-}
-
-export interface Volume {
-  bind: string;
-  container: string;
-  readonly?: boolean;
-}
-
-export interface Environment {
-  name: string;
-  value?: string;
-  label?: string;
-  set?: string;
-}
-
-export interface Service {
-  name: string;
-  image?: string;
-  entrypoint?: string;
-  restart_policy?: 'always' | 'unless-stopped' | 'on-failure' | 'no';
-  volumes?: Volume[];
-  command?: string;
-  ports?: string[];
-  build?: string;
-  interactive?: boolean;
-  env?: Environment[];
-  dockerStats?: DockerHubResponse;
-}
-
-export interface TemplateOrService extends Template, Service {}
-
-export interface DockerHubResponse {
-  user: string; // The user who owns the repository
-  name: string; // The name of the repository
-  namespace: string; // The namespace the repository belongs to
-  repository_type: string; // The type of repository (e.g., 'image')
-  status: number; // The status of the repository as a number
-  status_description: 'active' | 'inactive'; // Description of the repository status
-  description: string; // A brief description of the repository
-  is_private: boolean; // Whether the repository is private or not
-  is_automated: boolean; // Whether the repository is automated or not
-  star_count: number; // The number of stars the repository has received
-  pull_count: number; // The number of times the repository has been pulled
-  last_updated: string; // The date and time the repository was last updated
-  date_registered: string; // The date and time the repository was registered
-  collaborator_count: number; // The number of collaborators on the repository
-  affiliation?: string | null; // The affiliation of the user with the repo
-  hub_user: string; // The user who created the repository on Docker Hub
-  has_starred: boolean; // Whether the user has starred the repository or not
-  full_description: string; // The full description of the repository
-  permissions: {
-    read: boolean; // Whether the user has read permissions on the repository
-    write: boolean; // Whether the user has write permissions on the repository
-    admin: boolean; // Whether the user has admin permissions on the repository
-  };
-  media_types: string[]; // An array of supported media types for the repository
-  content_types: string[]; // An array of supported content types for the repository
-}
-
-export interface DockerCompose {
-  version: string;
-  services: {
-    [serviceName: string]: {
-      image: string;
-      ports?: string[];
-      environment?: { [envVar: string]: string };
-      volumes?: string[];
-      restart?: string;
-      command?: string;
-      build?: string | { context: string; dockerfile?: string };
-      networks?: string[] | { [networkName: string]: { aliases?: string[] } };
-      depends_on?: string[];
-      labels?: { [labelName: string]: string };
-    };
-  };
-  networks?: { [networkName: string]: {} };
-  volumes?: { [volumeName: string]: {} };
-}
-

src/app.d.ts

@@ -1,12 +0,0 @@
-// See https://kit.svelte.dev/docs/types#app
-// for information about these interfaces
-declare global {
-	namespace App {
-		// interface Error {}
-		// interface Locals {}
-		// interface PageData {}
-		// interface Platform {}
-	}
-}
-
-export {};

src/app.html

@@ -1,30 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-	<head>
-		<meta charset="utf-8" />
-		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
-		<title>Portainer Templates</title>
-		<link rel="manifest" href="manifest.json" />
-		<script defer data-domain="portainer-templates.as93.net" src="https://no-track.as93.net/js/script.js"></script>
-
-		<!-- Social Meta Tags -->
-		<meta name="title" content="Portainer Templates">
-		<meta name="description" content="A community-driven library of 1-click self-hosted apps">
-		<meta property="og:type" content="website">
-		<meta property="og:url" content="https://portainer-templates.as93.net">
-		<meta property="og:title" content="Portainer Templates">
-		<meta property="og:description" content="A community-driven library 400+ of 1-click self-hosted apps and stacks, for easy use with Portainer or Docker-Compose">
-		<meta property="og:image" content="https://portainer-templates.as93.net/banner.png">
-		<meta property="twitter:card" content="summary_large_image">
-		<meta property="twitter:url" content="https://portainer-templates.as93.net">
-		<meta property="twitter:title" content="Portainer Templates">
-		<meta property="twitter:description" content="A community-driven library 400+ of 1-click self-hosted apps and stacks, for easy use with Portainer or Docker-Compose">
-		<meta property="twitter:image" content="https://portainer-templates.as93.net/banner.png">
-
-		%sveltekit.head%
-	</head>
-	<body data-sveltekit-preload-data="hover">
-		<div style="display: contents">%sveltekit.body%</div>
-	</body>
-</html>

src/constants.ts

@@ -1,6 +0,0 @@
-
-export const templatesUrl = 'https://raw.githubusercontent.com/Lissy93/portainer-templates/main/templates.json';
-
-export const baseUrl = 'https://portainer-templates.as93.net';
-
-export const gitHubRepo = 'https://github.com/lissy93/portainer-templates';

src/lib/Button.svelte

@@ -1,55 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/Icon.svelte';
-
-  export let to = '';
-  export let action = () => {};
-  export let target = '_self';
-  export let icon: string | null = null;
-  export let selected: boolean = false;
-
-</script>
-
-<svelte:element this={to ? 'a' : 'button'} href={to} on:click={action} {target} class:selected>
-  {#if icon}<Icon name={icon} />{/if}
-  <slot />
-</svelte:element>
-
-
-<style lang="scss">
-  a, button {
-    position: relative;
-    color: var(--foreground);
-    text-decoration: none;
-    padding: 0.25rem 0.5rem;
-    border-radius: 6px;
-    transition: transform 200ms ease-in-out;
-    overflow: hidden;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    border: 1px solid transparent;
-    background: var(--card);
-    cursor: pointer;
-
-    &::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      right: 0;
-      bottom: 0;
-      background: var(--gradient);
-      border-radius: 6px;
-      z-index: -1;
-      opacity: 0;
-      transition: opacity 300ms ease-in-out;
-    }
-
-    &:hover, &.selected {
-      transform: scale(1.05);
-      &::before {
-        opacity: 1;
-      }
-    }
-  }
-</style>

src/lib/Categories.svelte

@@ -1,33 +0,0 @@
-<script lang="ts">
-  import { slide } from 'svelte/transition';
-  import Button from '$lib/Button.svelte';
-
-  export let categories: string[];
-  export let selectedCategories: string[];
-  export let toggleCategory: (category: string) => void;
-
-  const isSelected = (selected: string[], current: string) => selected.map((c) => c.toLocaleLowerCase()).includes(current.toLocaleLowerCase());
-</script>
-
-<div class="categories" transition:slide>
-  {#each Object.keys(categories) as category}
-    <Button
-      action={() => toggleCategory(category)}
-      selected="{isSelected(selectedCategories, category)}"
-    >
-    {category}
-    </Button>
-  {/each}
-</div>
-
-<style lang="scss">
-.categories {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  margin: 1rem auto;
-  padding: 0 1rem;
-  gap: 0.25rem;
-  max-width: var(--max-width);
-}
-</style>

src/lib/DockerStats.svelte

@@ -1,85 +0,0 @@
-
-<script lang="ts">
-  import type { DockerHubResponse } from '$src/Types';
-  import Icon from '$lib/Icon.svelte';
-
-  export let info: DockerHubResponse;
-
-  const formatBigNumber = (num: number): string => {
-    if (!num) return '';
-    const units = ['k', 'M', 'B'];
-    let unitIndex = 0;
-    let value = num;
-    while (value >= 1000 && unitIndex < units.length) {
-      value /= 1000;
-      unitIndex++;
-    }
-    const decimalPlaces = num < 10000 || (num >= 100000 && num < 1000000) ? 0 : 1;
-    return num < 1000 ? num.toString() : value.toFixed(decimalPlaces) + units[unitIndex - 1];
-  };
-
-  const formatDate = (dateTime: string): string => {
-    if (!dateTime) return '';
-    const date = new Date(dateTime);
-    return new Intl.DateTimeFormat('en-US', {
-      year: 'numeric',
-      month: 'short',
-      day: '2-digit',
-    }).format(date);
-  };
-
-  const timeAgo = (dateTime: string): string => {
-    if (!dateTime) return '';
-    const elapsed = Date.now() - new Date(dateTime).getTime();
-    const msPer = [60000, 3600000, 86400000, 2592000000, 31536000000];
-    const units = ['minute', 'hour', 'day', 'month', 'year'];
-
-    for (let i = 0; i < msPer.length; i++) {
-      if (elapsed < msPer[i]) {
-        const value = Math.floor(elapsed / (i > 0 ? msPer[i - 1] : 1));
-        return value === 0 ? 'just now' : `${value} ${units[i - 1] || 'minute'}${value > 1 ? 's' : ''} ago`;
-      }
-    }
-    return `${Math.floor(elapsed / msPer[4])} years ago`;
-  };
-
-  const makeRenderData = () => {
-    const results = [
-      { label: 'Pulls', value: formatBigNumber(info.pull_count), icon: 'download' },
-      { label: 'Stars', value: formatBigNumber(info.star_count) || 'None yet', icon: 'star' },
-      { label: 'User', value: info.hub_user, icon: 'user' },
-      { label: 'Created', value: formatDate(info.date_registered), icon: 'published' },
-      { label: 'Updated', value: timeAgo(info.last_updated), icon: 'updated' },
-      { label: 'Status', value: info.status_description, icon: 'status' }
-    ];
-    return results;
-  };
-</script>
-
-<div class="stats">
-  {#each makeRenderData() as stat}
-    <div class="row">
-      <span class="lbl">
-        <Icon name={stat.icon} color="var(--accent)" />
-        {stat.label}:
-      </span>
-      <span>{stat.value}</span>
-    </div>
-  {/each}
-</div>
-
-<style lang="scss">
-  .stats {
-    background: var(--card-2);
-    padding: 1rem;
-    border-radius: 6px;
-    .lbl {
-      font-weight: 500;
-      margin-right: 0.5rem;
-      display: inline-flex;
-      align-items: center;
-      gap: 0.5rem;
-      :global(svg) { opacity: 0.7; }
-    }
-  }
-</style>

src/lib/Footer.svelte

@@ -1,57 +0,0 @@
-<script lang="ts">
-  import Icon from '$lib/Icon.svelte';
-  export let bottom = false;
-
-  let footerInfo = {
-    author: 'Alicia Sykes',
-    authorSite: 'https://github.com/lissy93',
-    license: 'MIT',
-    licenseLink: 'https://gist.github.com/Lissy93/143d2ee01ccc5c052a17',
-    copyright: true,
-    source: 'https://github.com/lissy93/portainer-templates',
-  };
-</script>
-
-<footer class:bottom>
-  <p>
-    © <a href={footerInfo.authorSite} target="_blank" rel="noreferrer">{footerInfo.author}</a>
-    {new Date().getFullYear()} - Licensed under
-    <a href={footerInfo.licenseLink} target="_blank" rel="noreferrer">{footerInfo.license}</a> -
-    View on <a href={footerInfo.source} target="_blank" rel="noreferrer">
-      GitHub <Icon name="github" color="var(--accent)" /></a>
-  </p>
-</footer>
-
-<style lang="scss">
-  footer {
-    bottom: 0;
-    padding: 0.5rem 0;
-    width: 100%;
-    background: var(--card);
-    &.bottom {
-      box-shadow: 0 -3px 4px 0 var(--background);
-      position: fixed;
-    }
-    p {
-      margin: 0;
-      text-align: center;
-      a {
-        color: var(--accent);
-        border-radius: 4px;
-        padding: 0.1rem 0.25rem;
-        text-decoration: none;
-        display: inline-flex;
-        flex-direction: revert;
-        gap: 0.25rem;
-        align-items: center;
-        &:hover {
-          background: var(--accent);
-          color: var(--background);
-          :global(svg) {
-            fill: var(--background);
-          }
-        }
-      }
-    }
-  }
-</style>

src/lib/Header.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-  import Button from '$lib/Button.svelte';
-  import { gitHubRepo } from '$src/constants';
-</script>
-
-<header>
-  <a class="title" href="/">
-    <img src="https://i.ibb.co/hMymwH0/portainer-templates-small.png" />
-    <h2>Portainer Templates</h2>
-  </a>
-  <nav>
-    <Button to="/" icon="whale">All Templates</Button>
-    <Button to={gitHubRepo} icon="github">GitHub</Button>
-  </nav>
-</header>
-
-<style lang="scss">
-  header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    background: var(--card);
-    padding: 0.25rem 1rem;
-    flex-wrap: wrap;
-    a.title {
-      display: flex;
-      justify-content: center;
-      gap: 1rem;
-      color: var(--foreground);
-      text-decoration: none;
-      h2 {
-        margin: 0;
-        font-size: 1.5rem;
-        font-weight: 600;
-      }
-      img {
-        width: 40px;
-        transition: all 0.3s ease-in-out;
-      }
-      &:hover {
-        img { transform: rotate(-5deg) scale(1.1); }
-      }
-    }
-
-    nav {
-      display: flex;
-      gap: 1rem;
-    }
-    &.fixed {
-      position: fixed;
-      top: 0;
-      width: calc(100% - 2rem);
-      box-shadow: 0 3px 4px 0 var(--background);
-    }
-  }
-</style>

src/lib/Hero.svelte

@@ -1,89 +0,0 @@
-<script>
-    import Icon from '$lib/Icon.svelte';
-    import { gitHubRepo } from '$src/constants'; 
-</script>
-
-<div class="hero">
-  <header>
-    <h1>Portainer Templates</h1>
-    <p class="sub-title">The largest single collection, of ready-to-go Portainer templates</p>
-  </header>
-
-  <section class="cta">
-    <a href={gitHubRepo}>
-      <Icon name="github" width="26px" height="26px" />
-      View on GitHub
-    </a>
-    <a href="/usage">
-      <Icon name="portainer" width="26px" height="26px" />
-      Install on Portainer
-    </a>
-  </section>
-</div>
-
-<style lang="scss">
-.hero {
-    padding: 2rem;
-    header {
-    h1 {
-      text-align: center;
-      font-size: 4rem;
-      margin: 0 auto;
-      background: var(--gradient);
-      background-clip: border-box;
-      -moz-background-clip: text;
-      -webkit-background-clip: text;
-      background-clip: text;
-      -moz-text-fill-color: transparent;
-      -webkit-text-fill-color: transparent;
-      color: transparent;
-    }
-    .sub-title {
-      text-align: center;
-      margin: 0 auto;
-      font-size: 1.4rem;
-      font-style: italic;
-      font-weight: 200;
-    }
-  }
-
-  section.cta {
-    margin: 1rem auto;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 1rem;
-    flex-wrap: wrap;
-    a {
-      font-size: 1.2rem;
-      transition:all 0.3s ease-in-out;
-      position: relative;
-      border-radius: 6px;
-      background: var(--background);
-      background-clip: padding-box;
-      padding: 0.5rem 1rem;
-      cursor: pointer;
-      display: flex;
-      gap: 1rem;
-      align-items: center;
-      min-width: 13rem;
-      color: var(--foreground);
-      text-decoration: none;
-      &::after {
-        position: absolute;
-        top: -4px; bottom: -4px;
-        left: -4px; right: -4px;
-        background: var(--gradient);
-        content: '';
-        z-index: -1;
-        border-radius: 6px;
-      }
-      &:hover {
-        background: var(--gradient);
-        transform: scale(1.03) rotate(-0.6deg);
-      }
-    }
-  }
-}
-
-</style>

src/lib/InstallationInstructions.svelte

@@ -1,222 +0,0 @@
-<script lang="ts">
-  import Highlight from "svelte-highlight";
-  import yamlHighlight from "svelte-highlight/languages/yaml";
-  import shellHighlight from "svelte-highlight/languages/shell";
-  import codeHighlighting from "svelte-highlight/styles/dracula";
-
-  import {
-      generateDockerRunCommand,
-      generateDockerRunCommands,
-      convertToDockerCompose,
-      convertPortainerStackToDockerCompose,
-    } from '$src/utils/template-to-docker-parser';
-  import { templatesUrl, gitHubRepo } from '$src/constants';
-  import type { Template, Volume, Service, DockerCompose } from '$src/Types';
-
-  export let portainerTemplate: Template | null = null;
-  export let portainerServices: Service[] | null = null;
-
-  const copyToClipboard = (content: string) => {
-    navigator.clipboard.writeText(content);
-  };
-
-  const dockerRunCommand = portainerTemplate?.image ?
-    generateDockerRunCommand(portainerTemplate) : null;
-  const dockerRunCommands = portainerServices && !dockerRunCommand ?
-    generateDockerRunCommands(portainerServices) : null;
-  const dockerComposeFile = portainerTemplate?.image ?
-    convertToDockerCompose(portainerTemplate) :
-    (portainerServices ? convertPortainerStackToDockerCompose(portainerServices) : null);
-</script>
-
-
-<svelte:head>
-  {@html codeHighlighting}
-</svelte:head>
-
-<section>
-  <h2>Installation</h2>
-
-  <h3>Via Portainer</h3>
-  <ol>
-    <li>
-      Ensure both
-      <a href="https://docs.docker.com/engine/install/">Docker</a> and
-      <a href="https://www.portainer.io/installation/">Portainer</a> are installed, and up-to-date
-    </li>
-    <li>Log into your Portainer web UI
-    <li>Under Settings → App Templates, paste the below URL</li>
-    <li>Head to Home → App Templates, and the list of apps will show up</li>
-    <li>Select the app you wish to deploy, fill in any config options, and hit Deploy</li>
-  </ol>
-
-  <h4>Template Import URL</h4>
-  <pre class="template-url">{templatesUrl}</pre>
-  <button on:click={() => copyToClipboard(templatesUrl)}>Copy</button>
-
-  <details>
-    <summary>Show Me</summary>
-    <img class="demo" src="https://i.ibb.co/XxGRjrs/portainer-templates-installation.gif" alt="demo" />
-  </details>
-
-  {#if dockerRunCommand}
-    <hr />
-    <h3>Via Docker Run</h3>
-    <div class="docker-run-command">
-      <button class="docker-command-copy" on:click={() => copyToClipboard(dockerRunCommand)}>Copy</button>
-      <Highlight language={shellHighlight} code={dockerRunCommand} />
-    </div>
-  {/if}
-
-  {#if dockerRunCommands && dockerRunCommands.length > 0}
-    <hr />
-    <h3>Via Docker Run</h3>
-    {#each dockerRunCommands as command, index}
-      <h4>Service #{index + 1} - {portainerServices[index].name}</h4>
-      <div class="docker-run-command">
-        <button class="docker-command-copy" on:click={() => copyToClipboard(command)}>Copy</button>
-        <Highlight language={shellHighlight} code={command} />
-      </div>
-    {/each}
-  {/if}
-  
-  {#if dockerComposeFile}
-    <hr />
-    <h3>Via Docker Compose</h3>
-    <p class="instructions">
-      Save this file as <code>docker-compose.yml</code> and run <code>docker-compose up -d</code>
-      <br>
-      Use this only as a guide.
-    </p>
-    <div class="docker-compose-file">
-      <button class="docker-command-copy" on:click={() => copyToClipboard(JSON.stringify(dockerComposeFile, null, 2))}>Copy</button>
-      <Highlight language={yamlHighlight} code={dockerComposeFile} />
-    </div>
-  {/if}
-
-  <hr />
-  <h3>Alternative Methods</h3>
-  <p>For more installation options, see the <a href={gitHubRepo}>Documentation</a> in the GitHub repo</p>
-
-</section>
-
-<style lang="scss">
-  section {
-    background: var(--card);
-    padding: 1rem;
-    border-radius: 6px;
-    margin: 1rem auto;
-    max-width: 1000px;
-    transition: all 0.2s ease-in-out;
-    h2 {
-      margin: 0;
-      font-size: 2rem;
-    }
-    h3 {
-      font-size: 1.5rem;
-      margin: 0.5rem 0;
-    }
-    h4 {
-      margin: 0.5rem 0;
-    }
-    p {
-      margin: 0;
-    }
-    ol {
-      margin: 0.5rem;
-      padding: 0;
-      list-style: none;
-      li {
-        counter-increment: item;
-      }
-      li:before {
-        content: counter(item);
-        color: var(--accent);
-        margin-right: 0.5rem;
-        font-weight: 600;
-        width: 1ch;
-        text-align: center;
-        display: inline-block;
-      }
-    }
-    hr {
-      opacity: 0.5;
-      margin: 1.5rem auto;
-      height: 2px;
-      border: none;
-      background: var(--accent);
-    }
-    pre {
-      background: var(--card-2);
-      padding: 0.25rem 0.5rem;
-      font-size: 1.1rem;
-      width: fit-content;
-      margin: 0.5rem 0;
-      display: inline;
-      border-radius: 6px;
-      &.template-url {
-        white-space: normal;
-      }
-    }
-    button {
-      background: var(--background);
-      padding: 0.25rem 0.5rem;
-      border-radius: 6px;
-      border: none;
-      color: var(--foreground);
-      font-family: Kanit;
-      font-size: 1.1rem;
-      cursor: pointer;
-      transition: all 0.2s ease-in-out;
-      &:hover {
-        background: var(--gradient);
-        transform: scale(1.1) rotate(-1deg);
-      }
-    }
-    a {
-      color: var(--accent);
-    }
-    details {
-      summary {
-        cursor: pointer;
-        font-weight: bold;
-        &:hover {
-          color: var(--accent);
-        }
-      }
-    }
-    .demo {
-      display: block;
-      margin: 0.5rem auto;
-      border-radius: 6px;
-      max-width: 50rem;
-    }
-    .docker-run-command, .docker-compose-file {
-      background: var(--card-2);
-      position: relative;
-      padding: 0.5rem;
-      pre {
-        font-size: 1rem;
-      }
-      .docker-command-copy {
-        position: absolute;
-        right: 0.5rem;
-        top: 0.5rem;
-      }
-    }
-    .instructions {
-      margin-bottom: 0.5rem;
-      font-size: 1rem;
-      code {
-        border-radius: 6px;
-        padding: 0 0.25rem;
-        background: var(--card-2);
-      }
-    }
-    :global(.hljs) {
-      background: var(--card-2);
-      font-size: 1.1rem;
-      padding: 0;
-    }
-  }
-</style>

src/lib/ListFilter.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  export let searchTerm: string;
-  export let isCategoriesVisible: boolean;
-  export let toggleCategories: () => void;
-</script>
-
-<div class="title-row">
-  <h2>Template List</h2>
-  <div class="filters">
-    <button on:click={toggleCategories}>
-      {isCategoriesVisible ? '▲' : '▼'} Categories
-    </button>
-    <input type="text" placeholder="Search..." bind:value={searchTerm} />
-  </div>
-</div>
-
-<style lang="scss">
-.title-row {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  margin: 1rem auto;
-  padding: 0 1rem;
-  max-width: var(--max-width);
-  flex-wrap: wrap;
-  h2 {
-    font-size: 2rem;
-    margin: 0;
-  }
-  .filters {
-    input {
-      background: var(--card);
-      border: 1px solid transparent;
-      color: var(--foreground);
-      padding: 0.5rem 0.75rem;
-      border-radius: 6px;
-      transition:all 0.3s ease-in-out;
-      &:focus, &:hover {
-        box-shadow: var(--shadow);
-      }
-    }
-  }
-  button {
-    color: var(--foreground);
-    border: 1px solid transparent;
-    padding: 0 0.3rem;
-    margin: 0.25rem;
-    line-height: 2rem;
-    border-radius: 6px;
-    text-transform: capitalize;
-    background: var(--card);
-    transition: all 0.3s ease-in-out;
-    cursor: pointer;
-    font-size: 0.9rem;
-    &:hover, &.selected {
-      background: var(--gradient);
-    }
-  }
-}
-</style>

src/lib/MdContent.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-import { slide } from 'svelte/transition';
-import snarkdown from 'snarkdown';
-export let content: string | null = null;
-export let multiContent: { name: string, content: string, description: string, visible: false }[] | null = null;
-
-let showDocs = false;
-
-const toggleDocs = () => {
-  showDocs = !showDocs;
-};
-
-</script>
-
-<section class="docker-docs">
-  <h2>Container Documentation</h2>
-  {#if content}
-    <button on:click={toggleDocs}>{ showDocs ? 'Hide' : 'Expand' } Content</button>
-    {#if showDocs}
-      <p transition:slide>{@html snarkdown(content)}</p>
-    {/if}
-
-  {:else if multiContent && multiContent.length > 0}
-    {#each multiContent as { name, description, content, visible }}
-      <h3>{name} Documentation</h3>
-      <p class="desc">{description || ''}</p>
-      <button on:click={() => visible = !visible}>{ visible ? 'Hide' : 'Expand' } {name}</button>
-      {#if visible}
-        <p transition:slide>{@html snarkdown(content)}</p>
-      {/if}
-    {/each}
-  {/if}
-</section>
-
-<style lang="scss">
-  .docker-docs {
-    background: var(--card);
-    padding: 1rem;
-    border-radius: 6px;
-    margin: 1rem auto;
-    max-width: 1000px;
-    transition: all 0.2s ease-in-out;
-    button {
-      background: var(--background);
-      padding: 0.25rem 0.5rem;
-      border-radius: 6px;
-      border: none;
-      color: var(--foreground);
-      font-family: Kanit;
-      font-size: 1.2rem;
-      cursor: pointer;
-      transition: all 0.2s ease-in-out;
-      &:hover {
-        background: var(--gradient);
-        transform: scale(1.1) rotate(-1deg);
-      }
-    }
-    h2 {
-      font-size: 2rem;
-      margin: 0;
-    }
-    h3 {
-      margin: 0.5rem 0;
-      text-transform: capitalize;
-    }
-    .desc {
-      opacity: 0.7;
-      margin: 0.5rem 0;
-      font-style: italic;
-    }
-    :global(img) {
-      max-width: 100%;
-    }
-    :global(a) {
-      color: var(--accent);
-      text-decoration: none;
-    }
-    :global(pre) {
-      background: var(--card-2);
-      padding: 1rem;
-      border-radius: 6px;
-      overflow: auto;
-    }
-  }
-</style>

src/lib/NoResults.svelte

@@ -1,36 +0,0 @@
-<div class="nout">
-  <h3>No Results 😢</h3>
-  <p>
-    <i>There weren't any templates found that matched the currently applied filters.</i><br><br>
-    Check the raw <a href="https://github.com/Lissy93/portainer-templates/blob/main/templates.json"><code>templates.json</code></a> file
-    to see all results.
-    If you still can't find what you're looking for, why not
-    <a href="https://github.com/Lissy93/portainer-templates#editing">submit a template</a>?
-    Feel free to raise a ticket if you need support.
-  </p>
-</div>
-
-<style lang="scss">
-  .nout {
-    background: var(--card);
-    border-radius: 6px;
-    min-height: 8rem;
-    margin: 1rem auto 5rem auto;
-    padding: 1rem;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    max-width: 650px;
-    h3 {
-      margin: 0;
-      font-size: 3rem;
-    }
-    p {
-      font-size: 1.1rem;
-      code, a {
-        color: var(--accent);
-      }
-    }
-  }
-</style>

src/lib/SearchSummary.svelte

@@ -1,56 +0,0 @@
-<script lang="ts">
-export let searchTerm: string;
-export let selectedCategories: string[];
-export let clearSearch: () => void;
-export let numResults: number;
-export let totalResults: number;
-</script>
-
-<div class="search-summary">
-  {#if searchTerm}
-    <p>
-      Showing {numResults} of {totalResults}
-      results, matching "<i>{searchTerm}</i>"
-      {selectedCategories.length  ? `in categories: ${selectedCategories.join(', ')}` : ''}
-    </p>
-  {:else if selectedCategories.length}
-    <p>
-      Showing {numResults} of {totalResults}
-      results, matching categories: {selectedCategories.join(', ')}
-    </p>
-  {:else}
-    <p>Click an app to view info, stats and usage docs</p>
-  {/if}
-  {#if searchTerm || selectedCategories.length}
-    <button on:click={clearSearch}>⨯ Clear Filters</button>
-  {/if}
-</div>
-
-<style lang="scss">
-.search-summary {
-  margin: 0 1rem;
-  
-  font-size: 0.9rem;
-  display: flex;
-  gap: 1rem;
-  align-items: center;
-  p {
-    opacity: 0.75;
-    margin: 0;
-  }
-  button {
-    background: var(--gradient);
-    outline: none;
-    border: none;
-    padding: 0.25rem 0.5rem;
-    border-radius: 6px;
-    color: var(--foreground);
-    font-weight: 800;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    &:hover {
-      transform: scale(1.1);
-    }
-  }
-}
-</style>

src/lib/ServiceStats.svelte

@@ -1,113 +0,0 @@
-<script lang="ts">
-  import type { TemplateOrService } from '$src/Types';
-
-  export let template: TemplateOrService;
-</script>
-
-
-<div class="stats">
-  {#if template.type}
-    <span class="lbl">Type</span>
-    {#if template.type === 1}
-      <span class="val">Container</span>
-    {:else if template.type === 2}
-      <span class="val">Swarm</span>
-    {:else if template.type === 3}
-      <span class="val">Kubernetes</span>
-    {:else}
-      <span class="val">Unknown</span>
-    {/if}
-  {/if}
-  {#if template.platform}
-    <span class="lbl">Platform</span>
-    <code class="val">{template.platform}</code>
-  {/if}
-  {#if template.image}
-    <span class="lbl">Image</span>
-    <code class="val">{template.image}</code>
-  {/if}
-  {#if template.command}
-    <span class="lbl">Command</span>
-    <code class="val">{template.command}</code>
-  {/if}
-  {#if typeof template.interactive === 'boolean'}
-    <span class="lbl">Interactive</span>
-    <code class="val">{template.interactive ? 'Yes' : 'No'}</code>
-  {/if}
-  {#if template.ports}
-    <span class="lbl">Ports</span>
-    <p class="val">
-      {#each template.ports as port}<code>{port}</code>{/each}
-    </p>
-  {/if}
-  {#if template.volumes}
-    <span class="lbl">Volumes</span>
-    <p class="val">
-      {#each template.volumes as volume}
-      <code>
-        {volume.container || volume}{volume?.bind? ' : ' + volume.bind : ''}
-      </code>{/each}
-    </p>
-  {/if}
-  {#if template.restart_policy}
-    <span class="lbl">Restart Policy</span>
-    <code class="val">{template.restart_policy}</code>
-  {/if}
-  {#if template.repository}
-    <span class="lbl">Sourced</span>
-    <a class="val" href={template.repository.url}>Repo</a>
-  {/if}
-  {#if template.entrypoint}
-    <span class="lbl">Entrypoint</span>
-    <code class="val">{template.entrypoint}</code>
-  {/if}
-  {#if template.build}
-    <span class="lbl">Build</span>
-    <code class="val">{template.build}</code>
-  {/if}
-  {#if template.env}
-    <span class="lbl">Env Vars</span>
-    <p class="val">
-      {#each template.env as env}<code>{env.name}={env.set || env.value || env.default || '\'\''}</code>{/each}
-    </p>
-  {/if}
-</div>
-
-<style lang="scss">
-  .stats {
-    min-width: 15rem;
-    padding: 0.5rem;
-    gap: 0.5rem;
-    border-radius: 6px;
-    display: grid;
-    grid-template-columns: 1fr auto;
-    place-items: baseline;
-    background: var(--card-2);
-
-    .lbl {
-      font-weight: 400;
-      font-style: normal;
-    }
-
-    .val {
-      max-width: 10rem;
-      overflow: hidden;
-      white-space:nowrap;
-      text-overflow: ellipsis;
-    }
-
-    span {
-      font-style: italic;
-    }
-    p {
-      margin: 0;
-      display: flex;
-      flex-direction: column;
-    }
-
-    a {
-      color: var(--accent);
-    }
-  }
-  
-</style>

src/lib/TemplateList.svelte

@@ -1,81 +0,0 @@
-<script lang="ts">
-  import type { Template } from '$src/Types';
-  export let templates: Template[];
-  import { lazyLoad } from '$lib/lazy-load';
-
-  const slugify = (title: string) => {
-    return `/${title.toLowerCase().replace(/[^a-zA-Z ]/g, "").replaceAll(' ', '-')}`;
-  }
-</script>
-
-<section class="templates">
-  {#each templates as template (template.title)}
-    <a class="template-card" href={slugify(template.title)}>
-      <h3>{template.title}</h3>
-      <div class="template-summary">
-        <div class="left">
-          <img class="loading" use:lazyLoad={template.logo} alt={template.title} />
-        </div>
-        <div class="txt">
-          <p class="description" title={template.description}>{template.description}</p>
-        </div>
-      </div>
-    </a>
-  {/each}
-</section>
-
-<style lang="scss">
-section.templates {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
-  gap: 1rem;
-  margin: 1rem auto;
-  padding: 0 1rem;
-  max-width: var(--max-width);
-  .template-card {
-    padding: 1rem;
-    border-radius: 6px;
-    background: var(--card);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-    transition:all 0.3s ease-in-out;
-    max-width: 28rem;
-    text-decoration: none;
-    color: var(--foreground);
-    &:hover {
-      box-shadow: var(--shadow);
-    }
-    .template-summary {
-      display: flex;
-      gap: 1rem;
-      align-items: start;
-    }
-    p, h3 {
-      margin: 0;
-    }
-    img {
-      width: 64px;
-      max-height: 64px;
-      border-radius: 6px;
-      &.loading {
-        padding: 0.2rem;
-        background: var(--card-2);
-        border-radius: 6px;
-        height: 64px;
-      }
-    }
-    .description {
-      font-style: italic;
-      font-weight: 200;
-      overflow: hidden;
-      word-break: break-word;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 5;
-      line-clamp: 5; 
-    }
-  }
-}
-</style>

src/lib/TemplateNotFound.svelte

@@ -1,60 +0,0 @@
-<script lang="ts">
-  import { gitHubRepo } from '$src/constants'; 
-  export let templateName: string;
-</script>
-
-<section>
-  <h2>Template not Found 😢</h2>
-  <p class="subtitle">It doesn't look like there was a templated named "<i>{templateName}</i>"</p>
-  <p>
-    You can try <a href="/">searching for another</a>, or if you think there's a mistake somewhere,
-    please open an issue on the <a href={gitHubRepo} target="_blank">Github Repo</a>.
-  </p>
-  <a class="back-home" href="/">Back Home</a>
-</section>
-
-<style lang="scss">
-  section {
-    background: var(--card);
-    padding: 1rem;
-    border-radius: 6px;
-    margin: 1rem auto;
-    max-width: 1000px;
-    transition: all 0.2s ease-in-out;
-    h2 {
-      margin: 0;
-      font-size: 3rem;
-      text-align: center;
-    }
-    p {
-      margin: 1rem auto;
-      font-size: 1.1rem;
-      opacity: 0.8;
-      text-align: center;
-      max-width: 40rem;
-      a {
-        color: var(--accent);
-      }
-    }
-    .back-home {
-      background: var(--background);
-      padding: 0.25rem 0.5rem;
-      margin: 0 auto;
-      display: block;
-      width: fit-content;
-      border-radius: 6px;
-      border: none;
-      color: var(--foreground);
-      font-family: Kanit;
-      font-size: 1.5rem;
-      cursor: pointer;
-      transition: all 0.2s ease-in-out;
-      text-decoration: none;
-      &:hover {
-        background: var(--gradient);
-        transform: scale(1.1) rotate(-1deg);
-      }
-    }
-    
-  }
-</style>

src/lib/lazy-load.ts

@@ -1,34 +0,0 @@
-// See how the options work here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
-let options = {
-  root: null,
-  rootMargin: "0px",
-  threshold: 0
-}
-
-export const lazyLoad = (image: any, src: string) => {
-  const loaded = () => {
-    image.classList.remove("loading");
-    image.style.opacity = "1";
-  };
-  const observer = new IntersectionObserver(
-    (entries) => {
-      if (entries[0].isIntersecting) {
-        image.src = src;
-        if (image.complete) {
-          loaded();
-        } else {
-          image.addEventListener("load", loaded);
-        }
-      }
-    },
-    options
-  );
-  observer.observe(image);
-
-  return {
-    destroy() {
-      observer.disconnect();
-      image.removeEventListener("load", loaded);
-    },
-  };
-};

src/routes/+layout.svelte

@@ -1,78 +0,0 @@
-<script lang="ts">
-  import { browser } from '$app/environment';
-  import { page, navigating } from '$app/stores';
-  import { tick } from 'svelte';
-  import Header from '$lib/Header.svelte';
-  import Footer from '$lib/Footer.svelte';
-
-  let bottom = false;
-  let showNav = false;
-  
-  const scrollVisible = (): boolean => {
-    return browser ?
-      document.documentElement.clientHeight >= document.documentElement.scrollHeight
-      : false;
-  };
-
-  $: {
-    updateFooter();
-    if($navigating) updateFooter();
-    showNav = !['/', '/index'].includes($page.url.pathname)
-  }
-
-  async function updateFooter() {
-    await tick();
-    bottom = scrollVisible();
-  }
-</script>
-
-<svelte:head>
-  <title>Portainer Templates</title>
-  <meta name="description" content="A community-driven library of 1-click self-hosted apps" />
-  <meta property="og:title" content="Portainer Templates" />
-  <meta property="og:description" content="A community-driven library of 1-click self-hosted apps" />
-  <meta property="og:type" content="website" />
-  <meta property="og:url" content="{import.meta.env.VITE_PUBLIC_BASE_URL}/" />
-  <meta property="og:image" content="{import.meta.env.VITE_PUBLIC_BASE_URL}/banner.png" />
-  <meta name="twitter:card" content="summary_large_image" />
-  <meta name="twitter:title" content="Portainer Templates" />
-  <meta name="twitter:description" content="A community-driven library of 1-click self-hosted apps" />
-  <meta name="twitter:image" content="{import.meta.env.VITE_PUBLIC_BASE_URL}/banner.png" />
-  <link rel="canonical" href="{import.meta.env.VITE_PUBLIC_BASE_URL}" />
-  <meta name="theme-color" content="#0ba5ec" />
-</svelte:head>
-
-{#if showNav}
-  <Header />
-{/if}
-<main>
-  <slot></slot>
-</main>
-<Footer {bottom} />
-
-
-<style lang="scss">
-  @import url('https://fonts.googleapis.com/css2?family=Kanit:wght@200;400;800&display=swap');
-  :global(body) {
-    --background: #101828;
-    --foreground: #ffffff;
-    --accent: #0ba5ec;
-    --card: #1d2939;
-    --card-2: #192432;
-    --shadow: 1px 1px 3px 3px #0B9AEC8F;
-    --gradient: linear-gradient(to right,#0B9AEC 0%,#6EDFDE 100%);
-    --max-width: 1800px;
-    margin: 0;
-    font-family: 'Kanit', sans-serif;
-    color: var(--foreground);
-    background: var(--background);
-  }
-  :global(::selection) {
-    background: var(--accent);
-    color: var(--background);
-  }
-  main {
-    padding: 2rem;
-  }
-
-</style>

src/routes/+page.server.ts

@@ -1,32 +0,0 @@
-import { templates } from '$src/store';
-import { templatesUrl } from '$src/constants';
-
-const makeCategories = (templates) => {
-  // Get categories from templates
-  const categories = templates.reduce((acc, { categories: templateCategories }) => {
-    (templateCategories || []).forEach((category) => {
-      acc[category] = (acc[category] || 0) + 1;
-    });
-    return acc;
-  }, {});
-
-  // Sort categories by count, and remove categories with only 1 template
-  const sortedCategories = Object.fromEntries(
-    Object.entries(categories)
-      .filter(([, value]) => value > 3)
-      .sort(([, a], [, b]) => b - a)
-  );
-
-  return sortedCategories;
-};
-
-
-export const load = async () => {
-  const data = await fetch(templatesUrl).then((res) => res.json());
-  templates.set(data.templates);
-  
-  return {
-    templates: data.templates,
-    categories: makeCategories(data.templates),
-  }
-};

src/routes/+page.svelte

@@ -1,97 +0,0 @@
-<script lang="ts">
-  import { page } from '$app/stores'
-
-  import Hero from '$lib/Hero.svelte';
-  import ListFilter from '$lib/ListFilter.svelte';
-  import Categories from '$lib/Categories.svelte';
-  import SearchSummary from '$lib/SearchSummary.svelte';
-  import Templates from '$lib/TemplateList.svelte';
-  import NoResults from '$lib/NoResults.svelte';
-  import Footer from '$lib/Footer.svelte';
-  import type { Template } from '$src/Types';
-
-  export let data;
-
-
-
-  const preSelectedCategories = $page.url.searchParams.get('categories');
-
-  let searchTerm = '';
-
-  let selectedCategories: string[] = preSelectedCategories?.split(',') || [];
-
-  let showCategories = !!preSelectedCategories || false;
-  
-  $: filteredTemplates = data.templates.filter((template: Template) => {
-    const compareStr = (str1: string, str2: string) =>
-      (str1 || '').toLowerCase().includes(str2.toLowerCase());
-
-    if (selectedCategories.length) {
-      const templateCategories = (template.categories || []).map((c) => c.toLowerCase());
-      const hasSelectedCategory = selectedCategories.some((cat) =>
-        templateCategories.includes(cat.toLocaleLowerCase())
-      );
-      if (!hasSelectedCategory) return false;
-    }
-    return (
-      compareStr(template.title, searchTerm) ||
-      compareStr(template.description, searchTerm) ||
-      compareStr((template.categories || []).join(''), searchTerm)
-    );
-  });
-
-  const showHideCategoryList = () => {
-    showCategories = !showCategories;
-  };
-
-  const toggleCategory = (category: string) => {
-    if (selectedCategories.includes(category)) {
-      selectedCategories = selectedCategories.filter((cat) => cat !== category);
-    } else {
-      selectedCategories = [...selectedCategories, category];
-    }
-  };
-
-  const clearSearch = () => {
-    searchTerm = '';
-    selectedCategories = [];
-  }
-
-</script>
-
-<!-- Main title, and CTA buttons -->
-<Hero />
-
-<!-- Search bar, and Templates sub-title -->
-<ListFilter
-  bind:searchTerm={searchTerm}
-  toggleCategories={showHideCategoryList}
-  isCategoriesVisible={showCategories}
-/>
-
-<!-- List of categories to filter by -->
-{#if showCategories}
-  <Categories
-    categories={data.categories}
-    selectedCategories={selectedCategories}
-    toggleCategory={toggleCategory}
-  />
-{/if}
-
-<!-- Text showing num results, and users search term + filters  -->
-<SearchSummary
-  searchTerm={searchTerm}
-  selectedCategories={selectedCategories}
-  clearSearch={clearSearch}
-  numResults={filteredTemplates.length}
-  totalResults={data.templates.length}
-/>
-
-<!-- List of available templates (filtered, if needed) -->
-<Templates templates={filteredTemplates} />
-
-<!-- If there are no templates matching search term, show lil message -->
-{#if !filteredTemplates.length}
-  <NoResults />
-{/if}
-

src/routes/[slug]/+page.server.ts

@@ -1,109 +0,0 @@
-import yaml from 'js-yaml';
-
-import { get } from 'svelte/store';
-import { templatesUrl } from '$src/constants';
-import { templates } from '$src/store';
-
-/* Based on the current page name, find the corresponding template */
-const findTemplate = (templates: any, slug: string) => {
-  return templates.find((temp: Template) =>
-    temp.title.toLowerCase().replace(/[^a-zA-Z ]/g, "").replaceAll(' ', '-') === slug
-  );
-};
-
-/* With a given image name, fetch stats from DockerHub registry */
-const getDockerHubStats = async (image: string): Promise<DockerHubResponse | null> => {
-  if (!image) return null;
-  const [imageName, tag] = image.split(':');
-  const [namespace, repo] = imageName.includes('/') ? imageName.split('/') : ['library', imageName];
-  const apiEndpoint = `https://hub.docker.com/v2/repositories/${namespace}/${repo}/`;
-
-  return await fetch(apiEndpoint)
-    .then((res) => res.json())
-    .then((data) => {
-      return data;
-    })
-    .catch((err) => {
-      return null;
-    });
-}
-const getServices = async (template): Promise<Service[]> => {
-  try {
-    if (template?.repository) {
-      const { url: repoUrl, stackfile } = template.repository;
-      const path = `${repoUrl.replace('github.com', 'raw.githubusercontent.com')}/HEAD/${stackfile}`;
-      const response = await fetch(path);
-      const data = await response.text();
-      const parsedData = yaml.load(data);
-      const someServices: Service[] = [];
-      if (!parsedData.services) return [];
-
-      Object.keys(parsedData.services).forEach((service) => {
-        const serviceData = parsedData.services[service];
-        someServices.push({
-          name: service,
-          image: serviceData.image,
-          entrypoint: serviceData.entrypoint,
-          command: serviceData.command,
-          ports: serviceData.ports,
-          build: serviceData.build,
-          interactive: serviceData.interactive,
-          volumes: serviceData.volumes?.map((vol) => ({
-            bind: vol.split(':')[0],
-            container: vol.split(':')[1],
-          })),
-          restart_policy: serviceData.restart,
-          env: Object.keys(serviceData.environment || {}).map((envName) => {
-            if (typeof envName === 'string') {
-              const nowItsArray = serviceData.environment[envName].split('=') || [];
-              return { name: nowItsArray[0] || '',  value: nowItsArray[1] || '' }
-            }
-            return { name: envName, value: serviceData.environment[envName] }
-          }),
-        });
-      });
-      return someServices;
-    } else {
-      return [];
-    }
-  } catch (error) {
-    console.error('Error fetching or parsing YAML:', error);
-    return [];
-  }
-};
-
-/* Format results for returning to component */
-const returnResults = async (templates, templateSlug) => {
-  // Find template, based on slug
-  let template = findTemplate(get(templates), templateSlug);
-
-  // Fetch service info from associated stackfile, if it exists
-  let services = template?.repository ? await getServices(template) : [];
-
-  // If only 1 service, merge it with the template
-  if (services.length === 1) {
-    template = {...template, ...services[0]};
-  } else if (services.length > 1) {
-    // If made up from multiple services, fetch Docker info for each image
-    services = await Promise.all(
-      services.map(async (service) => {
-        const dockerStats = await getDockerHubStats(service.image);
-        return { ...service, dockerStats };
-      })
-    );
-  }
-  // If image specified, fetch Docker image info from DockerHub
-  const dockerStats = template?.image ? await getDockerHubStats(template.image) : null;
-  return { template, dockerStats, services }
-};
-
-export const load = async ({ params }) => {
-  const templateSlug = params.slug as string;
-  if (get(templates) && get(templates).length > 0) {
-    return returnResults(templates, templateSlug);
-  } else {
-    const data = await fetch(templatesUrl).then((res) => res.json());
-    templates.set(data.templates);
-    return returnResults(templates, templateSlug);
-  }
-};

src/routes/[slug]/+page.svelte

@@ -1,202 +0,0 @@
-<script lang="ts">
-
-  import { page } from '$app/stores';
-
-  import ServiceStats from '$lib/ServiceStats.svelte';
-  import TemplateNotFound from '$lib/TemplateNotFound.svelte';
-  import DockerStats from '$lib/DockerStats.svelte';
-  import MdContent from '$lib/MdContent.svelte';
-  import InstallationInstructions from '$lib/InstallationInstructions.svelte';
-
-  import type { Template, Service, DockerHubResponse } from '$src/Types';
-
-  const urlSlug = $page.params.slug;
-  const template = $page.data.template as Template;
-  const dockerStats = $page.data.dockerStats as DockerHubResponse;
-  const services = $page.data.services as Service[];
-
-  const makeMultiDoc = (services: Service[]) => {
-    return services.map((s) => {
-      return s?.dockerStats?.full_description ? {
-        name: s.name,
-        description: s.dockerStats.description,
-        content: s.dockerStats.full_description,
-        visible: false,
-      } : null;
-    }).filter((thingy) => thingy !== null);
-  };
-
-  const makeMetaDescription = () => {
-    return `Installation guide for ${template.title}, using Portainer, Docker Run or Docker-Compose. `
-    +`Portainer-Templates is a community driven repository of Portainer Templates for Self-Hosted apps. \n`
-    +`${template.description}`;
-  }
-
-</script>
-
-<svelte:head>
-  <title>{template.title} | Portainer Templates</title>
-  <meta name="description" content={makeMetaDescription()} />
-  <meta property="og:title" content="{template.title} | Portainer Templates" />
-  <meta property="og:description" content={makeMetaDescription()} />
-  <meta property="og:url" content="{import.meta.env.VITE_PUBLIC_BASE_URL}/{urlSlug}" />
-  <meta name="twitter:title" content="{template.title} | Portainer Templates" />
-  <meta name="twitter:description" content={makeMetaDescription()} />
-  <link rel="canonical" href="{import.meta.env.VITE_PUBLIC_BASE_URL}/{urlSlug}" />
-</svelte:head>
-
-{#if template}
-  <section class="summary-section">
-    <h1>
-      {#if template.logo} <img src={template.logo} /> {/if}
-      {template.title}
-    </h1>
-    {#if template.categories || template.category }
-      <p class="tags">
-        {#each (template.categories || template.category || []) as tag}
-          <a href="/?categories={tag}"><span>{tag}</span></a>
-        {/each}
-      </p>
-    {/if}
-    <div class="content">
-      <div class="left">
-        <p class="description">{template.description}</p>
-        {#await template then returnedTemplate}
-          {#if dockerStats && dockerStats.name}
-          <DockerStats info={dockerStats} />
-          {/if}
-        {/await}
-      </div>
-      <ServiceStats template={template} />
-    </div>
-  </section>
-
-  {#await services then returnedServices}
-  {#if returnedServices && returnedServices.length > 1}
-    <section class="service-section">
-      <h2>Services</h2>
-      <div class="service-list">
-        {#each returnedServices as service}
-          <div class="service-each">
-          <h3>{service.name}</h3>  
-          <div class="service-data">
-            <ServiceStats template={service} />
-            {#if service.dockerStats && service.dockerStats.name}
-              <DockerStats info={service.dockerStats} />
-            {/if}
-          </div>
-        </div>
-        {/each}
-      </div>
-    </section>
-  {/if}
-  {/await}
-
-  <InstallationInstructions portainerTemplate={template} portainerServices={services || null} />
-
-  {#if dockerStats?.full_description}
-    <MdContent content={dockerStats.full_description} />
-  {:else if services.length > 0}
-    <MdContent multiContent={makeMultiDoc(services)} />
-  {/if}
-
-{:else}
-  <TemplateNotFound templateName={urlSlug} />
-{/if}
-
-
-<style lang="scss">
-  section {
-    max-width: 1000px;
-    margin: 1rem auto;
-  }
-  .summary-section {
-    background: var(--card);
-    border-radius: 6px;
-    padding: 1rem;
-    display: flex;
-    flex-direction: column;
-    h1 {
-      font-size: 4rem;
-      margin: 0;
-      display: flex;
-      align-items: center;
-      gap: 1rem;
-    }
-    img {
-      border-radius: 6px;
-      width: 64px;
-      max-height: 64px;
-    }
-    .tags {
-      display: flex;
-      margin: 0;
-      gap: 0.5rem;
-      a {
-        color: var(--foreground);
-        text-decoration: none;
-        transition: all 0.2s ease-in-out;
-        span {
-          &:before {
-            content: '#';
-            opacity: 0.5;
-          }
-          &:not(:last-child)::after {
-            content: ',';
-            margin-right: 0.5rem;
-          }
-        }
-        &:hover {
-          color: var(--accent);
-          transform: scale(1.08);
-        }
-      }
-    }
-  }
-
-  .content {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: space-between;
-    margin-top: 1rem;
-    .left {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      gap: 1rem;
-    }
-    p.description {
-      background: var(--card-2);
-      padding: 1rem;
-      border-radius: 6px;
-      margin: 0;
-    }
-  }
-
-  .service-section {
-    background: var(--card);
-    border-radius: 6px; 
-    padding: 1rem;
-    h2 {
-      margin: 0;
-      font-size: 2rem;
-    }
-    .service-list {
-      display: flex;
-      gap: 2rem;
-      flex-wrap: wrap;
-      h3 {
-        margin: 0.5rem 0;
-        font-weight: 400;
-        font-size: 2rem;
-      }
-      .service-each {
-        .service-data {
-          display: flex;
-          gap: 1rem;
-        }
-      }
-    }
-  }
-</style>

src/routes/sitemap.xml/+server.ts

@@ -1,41 +0,0 @@
-import type { RequestHandler } from '@sveltejs/kit';
-
-import { templatesUrl, baseUrl } from '$src/constants';
-import type { Template } from '$src/Types';
-
-const fetchData = async () => {
-  const data = await fetch(templatesUrl).then((res) => res.json());
-  return await data.templates.map((d: Template) => `${baseUrl}/${d.title.toLowerCase().replace(/[^a-zA-Z ]/g, "").replaceAll(' ', '-')}`);
-};
-
-const generationDate = () => {
-  const date = new Date();
-  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
-}
-
-export async function GET() {
-  const data = await fetchData();
-
-  const sitemap = `<?xml version="1.0" encoding="UTF-8"?>
-  <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
-  <url>
-    <loc>${baseUrl}</loc>
-    <lastmod>${generationDate()}</lastmod>
-    <changefreq>weekly</changefreq>
-    <priority>1</priority>
-  </url>
-    ${data.map((url: string) => `
-      <url>
-        <loc>${url}</loc>
-        <lastmod>${generationDate()}</lastmod>
-        <changefreq>weekly</changefreq>
-        <priority>0.8</priority>
-      </url>`)
-      .join('')}
-  </urlset>`;
-
-  return new Response(sitemap, {
-    headers: { 'Content-Type': 'application/xml' }
-    }
-  );
-}

src/routes/usage/+page.svelte

@@ -1,5 +0,0 @@
-<script lang="ts">
-    import InstallationInstructions from '$lib/InstallationInstructions.svelte';
-</script>
-
-<InstallationInstructions />

src/store.ts

@@ -1,3 +0,0 @@
-import { writable } from 'svelte/store'
-
-export const templates = writable([]);

src/utils/template-to-docker-parser.ts

@@ -1,88 +0,0 @@
-
-import yaml from 'js-yaml';
-import type { Template, Volume, Service, DockerCompose } from '$src/Types';
-
-export const generateDockerRunCommand = (template: Template) => {
-  let command = `docker run -d \\ \n`;
-  if (template.ports) {
-    template.ports.forEach((port) => {
-      command += `  -p ${port} \\\n`;
-    });
-  }
-  if (template.env) {
-    template.env.forEach((env) => {
-      command += `  -e ${env.name}=\${${env.name}} \\\n`;
-    });
-  }
-  if (template.volumes) {
-    template.volumes.forEach((volume: Volume) => {
-      const readOnly = volume.readonly ? ":ro" : "";
-      command += `  -v ${volume.bind}:${volume.container}${readOnly} \\\n`;
-    });
-  }
-  if (template.restart_policy) {
-    command += `  --restart=${template.restart_policy} \\\n`;
-  }
-  command += `  ${template.image}`;
-  return command;
-};
-
-export const generateDockerRunCommands = (stack: Service[]) => {
-  const commands = stack.filter((s) => s.image).map((service) => {
-    let cmd = `docker run --name ${service.name} -d \\\n`;
-    if (service.command) {
-      cmd += ` ${service.command} \\\n`;
-    }
-    if (service.env) {
-      service.env.forEach((envVar) => {
-        cmd += ` -e "${envVar.value}" \\\n`;
-      });
-    }
-    if (service.ports) {
-      service.ports.forEach((port) => {
-        cmd += ` -p ${port} \\\n`;
-      });
-    }
-    if (service.volumes) {
-      service.volumes.forEach((volume) => {
-        cmd += ` -v ${volume.bind}:${volume.container} \\\n`;
-      });
-    }
-    if (service.restart_policy) {
-      cmd += ` --restart=${service.restart_policy} \\\n`;
-    }
-    cmd += ` ${service.image}`;
-    return cmd;
-  });
-  return commands;
-}
-
-export const convertToDockerCompose = (template: Template) => {
-  const serviceName = template.title.toLowerCase().replace(/[^a-z0-9]+/g, "-");
-  const dockerCompose: DockerCompose = {
-    version: "3.8",
-    services: { [serviceName]: { image: template.image } },
-  };
-  if (template.ports && template.ports.length > 0) {
-    dockerCompose.services[serviceName].ports = template.ports.map((port) => port.replace('/', ':'));
-  }
-  if (template.env && template.env.length > 0) {
-    dockerCompose.services[serviceName].environment = template.env.reduce((envVars, envVar) => {
-      envVars[envVar.name] = envVar.set || "";
-      return envVars;
-    }, {});
-  }
-  if (template.volumes && template.volumes.length > 0) {
-    dockerCompose.services[serviceName].volumes = template.volumes.map(
-      (volume) => `${volume.bind || ""}:${volume.container}`
-    );
-  }
-
-  return yaml.dump(dockerCompose);
-};
-
-export const convertPortainerStackToDockerCompose = (stack: Service[]) => {
-  const composeStack = stack.map(({ dockerStats, ...s }) => s);
-  return yaml.dump(composeStack);
-};
-

static/manifest.json

@@ -1,19 +0,0 @@
-{
-  "name": "Portainer Templates",
-  "short_name": "Portainer Templates",
-  "icons": [
-    {
-      "src": "/android-chrome-192x192.png",
-      "sizes": "192x192",
-      "type": "image/png"
-    },
-    {
-      "src": "/android-chrome-512x512.png",
-      "sizes": "512x512",
-      "type": "image/png"
-    }
-  ],
-  "theme_color": "#6EDFDE",
-  "background_color": "#101828",
-  "display": "standalone"
-}

svelte.config.js

@@ -1,21 +0,0 @@
-import adapter from '@sveltejs/adapter-auto';
-import { vitePreprocess } from '@sveltejs/kit/vite';
-
-/** @type {import('@sveltejs/kit').Config} */
-const config = {
-	// Consult https://kit.svelte.dev/docs/integrations#preprocessors
-	// for more information about preprocessors
-	preprocess: vitePreprocess(),
-
-	kit: {
-		// adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.
-		// If your environment is not supported or you settled on a specific environment, switch out the adapter.
-		// See https://kit.svelte.dev/docs/adapters for more information about adapters.
-		adapter: adapter(),
-		alias: {
-      '$src/*': 'src/*',
-    },
-	}
-};
-
-export default config;

tsconfig.json

@@ -1,17 +0,0 @@
-{
-	"extends": "./.svelte-kit/tsconfig.json",
-	"compilerOptions": {
-		"allowJs": true,
-		"checkJs": true,
-		"esModuleInterop": true,
-		"forceConsistentCasingInFileNames": true,
-		"resolveJsonModule": true,
-		"skipLibCheck": true,
-		"sourceMap": true,
-		"strict": true
-	}
-	// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
-	//
-	// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
-	// from the referenced tsconfig.json - TypeScript does not merge them in
-}

vite.config.ts

@@ -1,6 +0,0 @@
-import { sveltekit } from '@sveltejs/kit/vite';
-import { defineConfig } from 'vite';
-
-export default defineConfig({
-	plugins: [sveltekit()]
-});