create ednpoint to reduce image size with imgproxy

js/customElements/image.js

+class CustomImage extends HTMLElement {
+    async connectedCallback(){
+        const originalURL = new URL(this.getAttribute("src"), document.baseURI).href;
+
+
+        var graphql = JSON.stringify({
+            query: "query($url: String) {imgproxy(url: $url)}",
+            variables: {
+                "url": originalURL
+            }
+        })
+        var requestOptions = {
+            method: 'POST',
+            body: graphql,
+            headers: { 'Content-Type': 'application/json' }
+        };
+
+        let imgproxy = (await (await fetch("/API/graphql.php", requestOptions)).json()).data.imgproxy;
+        
+        let image = document.createElement("img");
+        image.src = imgproxy;
+        image.setAttribute("alt", this.getAttribute("alt"));
+        image.setAttribute("title", this.getAttribute("title"));
+        image.setAttribute("class", this.getAttribute("class"));
+        image.setAttribute("style", this.getAttribute("style"));
+        image.setAttribute("width", this.getAttribute("width"));
+        image.setAttribute("height", this.getAttribute("height"));
+        image.setAttribute("loading", "lazy");
+        image.setAttribute("original-src", originalURL);
+        this.appendChild(image);
+    }
+}
+
+customElements.define("jl-img", CustomImage)
\ No newline at end of file

js/script.js

@@ -20,3 +20,4 @@ require("./customElements/skills");
 require("./customElements/pwgen");
 require("./customElements/inline-code");
 require("./customElements/404Buttons");
+require("./customElements/image");
\ No newline at end of file

public/API/queries/imgproxy.php

+<?php
+
+function imgproxy($imageURL) {
+        require "./lib/config.php";
+        $encodedUrl = rtrim(strtr(base64_encode($imageURL), '+/', '-_'), '=');
+        $path = "/rs:fit:0:120:1/g:no/{$encodedUrl}.webp";
+
+        $signature = rtrim(strtr(base64_encode(hash_hmac('sha256', $imgProxySalt.$path, $imgProxyKey, true)), '+/', '-_'), '=');
+        return $imgProxyUrl . "/" . $signature . $path;
+}

public/API/queries/queries.php

@@ -7,6 +7,7 @@ require "./queries/blogPost.php";
 require "./queries/comments.php";
 require "./queries/mailAddress.php";
 require "./queries/ebayKleinanzeigen.php";
+require "./queries/imgproxy.php";
 
 
 $queryType = new ObjectType([
@@ -62,6 +63,13 @@ $queryType = new ObjectType([
                 ]
             ],
             'resolve' => fn ($rootValue, $args) => ebayKleinanzeigen($args["imageCount"]),
+        ],
+        'imgproxy' => [
+            "type" => Type::string(),
+            "args" => [
+                "url" => Type::nonNull(Type::string()),
+            ],
+            'resolve' => fn ($rootValue, $args) => imgproxy($args["url"]),
         ]
 
     ]