dynamic load skills from S3 server

js/customElements/skills.js

@@ -1,11 +1,18 @@
 class Skill extends HTMLElement {
     constructor() {
         super();
-        ["python", "php", "sass", "css", "c_sharp", "html", "java", "arduino", "raspberry", "linux", "arch", "gitlab", "traefik", "proxmox"].forEach( skill => {
-            const image = document.createElement("img");
-            image.src = "/API/getFile.php?filename=skills/" + skill + ".png";
-            this.appendChild(image);
-        })
+        let xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState == 4 && xhr.status == 200) {
+                JSON.parse(xhr.responseText).forEach(skill => {
+                    const image = document.createElement("img");
+                    image.src = "/API/getFile.php?filename=" + skill;
+                    this.appendChild(image);
+                });
+            }
+        }
+        xhr.open("GET", "/API/skills.php");
+        xhr.send();
     }
 }
 

public/API/skills.php

@@ -0,0 +1,24 @@
+<?php
+include("./lib/config.php");
+require 'vendor/autoload.php';
+
+$s3Client = new Aws\S3\S3Client([
+        'version' => 'latest',
+        'region'  => 'us-east-1',
+        'endpoint' => $S3Server,
+        'use_path_style_endpoint' => true,
+        'credentials' => [
+                'key'    => $S3AccessKey,
+                'secret' => $S3SecretKey,
+            ],
+]);
+
+$result = $s3Client->ListObjects(['Bucket' => $S3BucketName, 'Delimiter'=>'/', 'Prefix' => 'skills/']);
+
+$response = [];
+foreach ($result["Contents"] as $skill){
+        array_push($response, $skill["Key"]);
+}
+
+header("Content-Type: application/json");
+echo json_encode($response);