get comments from API and add lib folder in API dir

.gitignore

@@ -1,6 +1,6 @@
 #config file
 public/internal/config.php
-public/API/config.phpconfig
+public/API/lib/config.php
 
 #phpstorm
 .idea/

js/customElements/commentsDisplay.js

@@ -0,0 +1,30 @@
+class commentsDisplay extends HTMLElement {
+    constructor() {
+        super();
+        let path = window.location.pathname;
+        let pageName = path.split("/").pop();
+        pageName = pageName.split(".")[0]
+
+        let xhr = new XMLHttpRequest();
+        xhr.onreadystatechange = () => {
+            if (xhr.readyState === 4 && xhr.status === 200){
+                let comments = JSON.parse(xhr.responseText);
+                comments.forEach((element) => {
+                    this.innerHTML += `
+                        <h3 class="commentTitle">${element["name"]}</h3>
+                        <div class="comment">
+                            <img src="${element["gravatarURL"]}">
+                            <article class="commentArticle">
+                                <p class="commentText">${element["comment"]}</p>
+                            </article>
+                        </div>
+                    `;
+                });
+            }
+        }
+        xhr.open("GET", "/API/projectComments.php?article=" + pageName);
+        xhr.send();
+    }
+}
+
+customElements.define("jl-comments_display", commentsDisplay);

js/script.js

@@ -8,4 +8,5 @@ require("./ntpMenu");
 require("./customElements/cookie");
 require("./customElements/svgLoader");
 require("./customElements/blogFooter");
-require("./customElements/blogIndex");
+require("./customElements/blogIndex");
+require("./customElements/commentsDisplay");

public/API/getBlogElements.php

@@ -1,6 +1,6 @@
 <?php
-include "config.php";
-include "mysql.php";
+include "./lib/config.php";
+include "./lib/mysql.php";
 
 $position = $_GET['position'];
 

public/API/projectComments.php

@@ -0,0 +1,23 @@
+<?php
+include "./lib/config.php";
+include "./lib/mysql.php";
+include "./lib/getGravatar.php";
+
+$article = $conn->real_escape_string($_GET["article"]);
+
+$responseJSON = [];
+
+$result = $conn->query("SELECT * FROM comments WHERE article='$article'");
+if ($result->num_rows > 0) {
+    while ($row = $result->fetch_assoc()) {
+        $commentElement = [
+            "name" => $row["name"],
+            "comment" => $row["comment"],
+            "gravatarURL" => get_gravatar($row["email"])
+        ];
+
+        array_push($responseJSON, $commentElement);
+    }
+}
+header('Content-Type: application/json');
+echo json_encode($responseJSON);

public/internal/comments.php

@@ -1,28 +1,9 @@
 <?php
 
 function getComments($article){
-    include "mysql.php";
-    include "getGravatar.php";
-    echo("    <h2>Kommentare:</h2>");
-    $result = $conn->query("SELECT * FROM comments WHERE article='$article'");
-    if ($result->num_rows > 0) {
-        while($row = $result->fetch_assoc()) {
-            $name = $row["name"] . "<br>";
-            $gravatar = get_gravatar($row["email"]);
-            $content = $row["comment"];
-
-            echo(<<<EOF
-            <h3 class="commentTitle">$name</h3>
-            <div class="comment">
-                <img src="$gravatar">
-                <article class="commentArticle">
-                    <p class="commentText">$content</p>
-                </article>
-            </div>
-            EOF);
-        }
-    }
     echo(<<<EOF
+    <h2>Kommentare:</h2>
+    <jl-comments_display></jl-comments_display>
 <script src='https://www.hCaptcha.com/1/api.js' async defer></script>
 <div id="newComment">
     <form action="/newComment.php" method="post">