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ärung</a><br>
+ <a href="/bildquellen.php">Bildquellen</a><br>
+ <a href="/impressum.php">Impressum</a><br>
+ </div>
+ <div id="newestPost">
+ <h3>Neueste Beiträ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ärung</a><br>
- <a href="/bildquellen.php">Bildquellen</a><br>
- <a href="/impressum.php">Impressum</a><br>
- </div>
- <div id="newestPost">
- <h3>Neueste Beiträ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
--
GitLab