add custom element for footer

This commit is contained in:
Jonas Leder 2021-04-13 10:17:35 +02:00
parent 3735f70a93
commit 5a31509318
6 changed files with 52 additions and 41 deletions

View file

@ -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);

View file

@ -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>
`;
});

View file

@ -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);

View file

@ -13,4 +13,5 @@ require("./customElements/commentsDisplay");
require("./customElements/newComment");
require("./customElements/contactMailButton");
require("./customElements/header");
require("./customElements/mainMenu");
require("./customElements/mainMenu");
require("./customElements/footer");

View file

@ -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>