From 5a31509318eea3586f527142b5a5537275fb18a0 Mon Sep 17 00:00:00 2001
From: Jonas Leder <git@jonasled.de>
Date: Tue, 13 Apr 2021 10:17:35 +0200
Subject: [PATCH] add custom element for footer

---
 js/customElements/blogFooter.js |  2 +-
 js/customElements/blogIndex.js  |  2 +-
 js/customElements/footer.js     | 47 +++++++++++++++++++++++++++++++++
 js/script.js                    |  3 ++-
 public/internal/footer.php      | 39 +--------------------------
 public/{post.php => post.html}  |  0
 6 files changed, 52 insertions(+), 41 deletions(-)
 create mode 100644 js/customElements/footer.js
 rename public/{post.php => post.html} (100%)

diff --git a/js/customElements/blogFooter.js b/js/customElements/blogFooter.js
index 992a40c..a5e1bba 100644
--- a/js/customElements/blogFooter.js
+++ b/js/customElements/blogFooter.js
@@ -9,7 +9,7 @@ class blogFooter extends HTMLElement {
                 blog.forEach((element) => {
                     let li = document.createElement("li");
                     let a = document.createElement("a");
-                    a.href = "/post.php?id=" + element["id"];
+                    a.href = "/post.html?id=" + element["id"];
                     a.innerText = element["title"];
                     li.appendChild(a);
                     ul.appendChild(li);
diff --git a/js/customElements/blogIndex.js b/js/customElements/blogIndex.js
index 3d46573..636433e 100644
--- a/js/customElements/blogIndex.js
+++ b/js/customElements/blogIndex.js
@@ -11,7 +11,7 @@ class BlogIndex extends HTMLElement {
                     <article class="breakWord">
                         <h2>${element["title"]}</h2>
                         <p breakWord>${element["content"]}</p>
-                        <p class="center"><a href="/post.php?id=${element["id"]}"><button>Mehr lesen</button></a></p>
+                        <p class="center"><a href="/post.html?id=${element["id"]}"><button>Mehr lesen</button></a></p>
                     </article>
                     `;
                 });
diff --git a/js/customElements/footer.js b/js/customElements/footer.js
new file mode 100644
index 0000000..8c3a19e
--- /dev/null
+++ b/js/customElements/footer.js
@@ -0,0 +1,47 @@
+class Footer extends HTMLElement {
+    constructor() {
+        super();
+        this.innerHTML = `
+            <footer>
+                <div id="blueBar"></div>
+                <div id="footerContent">
+                    <div>
+                        <a href="/datenschutzerklaerung.php">Datenschutzerkl&auml;rung</a><br>
+                        <a href="/bildquellen.php">Bildquellen</a><br>
+                        <a href="/impressum.php">Impressum</a><br>
+                    </div>
+                    <div id="newestPost">
+                        <h3>Neueste Beitr&auml;ge:</h3>
+                        <jl-footer_blog></jl-footer_blog>
+                    </div>
+                    <div class="center">
+                        <p class="center">
+                            <a href="https://www.instagram.com/jonasled1/">
+                                <jl-svg data-name="instagram"></jl-svg>
+                            </a>
+            
+                            <a href="https://www.thingiverse.com/jonasled/designs/">
+                                <jl-svg data-name="3d_model"></jl-svg>
+                            </a>
+            
+                            <a href="https://paypal.me/jonasled/">
+                                <jl-svg data-name="paypal"></jl-svg>
+                            </a>
+            
+                            <a href="https://matrix.to/#/@jonasled:jonasled.de">
+                                <jl-svg data-name="matrix"></jl-svg>
+                            </a>
+            
+                            <a href="https://twitter.com/jonasled1">
+                                <jl-svg data-name="twitter"></jl-svg>
+                            </a>
+                        </p>
+                    </div>
+                </div>
+            </footer>
+            <jl-cookie_notice></jl-cookie_notice>
+        `;
+    }
+}
+
+customElements.define("jl-footer", Footer);
\ No newline at end of file
diff --git a/js/script.js b/js/script.js
index 0f02d0e..761ff96 100644
--- a/js/script.js
+++ b/js/script.js
@@ -13,4 +13,5 @@ require("./customElements/commentsDisplay");
 require("./customElements/newComment");
 require("./customElements/contactMailButton");
 require("./customElements/header");
-require("./customElements/mainMenu");
\ No newline at end of file
+require("./customElements/mainMenu");
+require("./customElements/footer");
\ No newline at end of file
diff --git a/public/internal/footer.php b/public/internal/footer.php
index 96ae57b..c185a3e 100644
--- a/public/internal/footer.php
+++ b/public/internal/footer.php
@@ -2,44 +2,7 @@
 function getFooter(){
     echo (<<<EOF
     </div>
-    <footer>
-    <div id="blueBar"></div>
-    <div id="footerContent">
-    <div>
-        <a href="/datenschutzerklaerung.php">Datenschutzerkl&auml;rung</a><br>
-        <a href="/bildquellen.php">Bildquellen</a><br>
-        <a href="/impressum.php">Impressum</a><br>
-    </div>
-    <div id="newestPost">
-        <h3>Neueste Beitr&auml;ge:</h3>
-        <jl-footer_blog></jl-footer_blog>
-    </div>
-    <div class="center">
-        <p class="center">
-            <a href="https://www.instagram.com/jonasled1/">
-                <jl-svg data-name="instagram"></jl-svg>  
-            </a>
-            
-            <a href="https://www.thingiverse.com/jonasled/designs/">     
-                <jl-svg data-name="3d_model"></jl-svg>  
-            </a>
-            
-            <a href="https://paypal.me/jonasled/">
-                <jl-svg data-name="paypal"></jl-svg>  
-            </a>
-            
-            <a href="https://matrix.to/#/@jonasled:jonasled.de">
-                <jl-svg data-name="matrix"></jl-svg>  
-            </a>
-            
-            <a href="https://twitter.com/jonasled1">
-                <jl-svg data-name="twitter"></jl-svg>         
-            </a>
-        </p>
-    </div>
-    </div>
-    </footer>
-    <jl-cookie_notice></jl-cookie_notice>
+    <jl-footer></jl-footer>
     <script src="/js/script.js"></script>
     </body>
     </html>
diff --git a/public/post.php b/public/post.html
similarity index 100%
rename from public/post.php
rename to public/post.html