Skip to content

Commit

Permalink
added client side rendering for footer and header, article template
Browse files Browse the repository at this point in the history
  • Loading branch information
@kithenry
kithenry committed Aug 12, 2024
1 parent 2d829e3 commit b45e6a9
Show file tree
Hide file tree
Showing 4 changed files with 116 additions and 232 deletions.
Empty file added assets/js/main.js
View file
Empty file.
128 changes: 63 additions & 65 deletions assets/snippets/footer.html
View file
Original file line number Diff line number Diff line change
@@ -1,83 +1,81 @@
<footer>
<div class="container-fluid p-0 text-white footer-container">
<div class="follow-icons">
<h4 class="">FOLLOW</h4>
<div class="icons">
<div class="container-fluid p-0 text-white footer-container">
<div class="follow-icons">
<h4 class="">FOLLOW</h4>
<div class="icons">

<ul class="list-unstyled icon-list 1">
<li>

<i class="fa fa-github" aria-hidden="true"></i>

</li>
<li>
<i class="fa fa-twitter" aria-hidden="true"></i>

</li>
<li>
<i class="fa fa-linkedin" aria-hidden="true"></i>

</li>
</ul>
<ul class="list-unstyled icon-list 2">
<li>

<i class="fa fa-github" aria-hidden="true"></i>

</li>
<li>
<i class="fa fa-twitter" aria-hidden="true"></i>
<ul class="list-unstyled icon-list 1">
<li>

</li>
<li>
<i class="fa fa-linkedin" aria-hidden="true"></i>
<i class="fa fa-github" aria-hidden="true"></i>

</li>
</ul>
</div>
</li>
<li>
<i class="fa fa-twitter" aria-hidden="true"></i>

</li>
<li>
<i class="fa fa-linkedin" aria-hidden="true"></i>

</div>
<div class="about-me">
<div class="about-pic">
<img src="../../../../../assets/images/myface-in-bw_img07.jpg"
class=" rounded-circle img-fluid border border-3" alt="">
</div>
<div class="about-text">
<h4>ABOUT ME</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam quos
repellat ut illo.
</p>
<a class="button contact-me-btn">Contact
Me</a>
</div>
</div>
<div class="pages">
<h4>PAGES</h4>
<ul class="list-unstyled page-list">
</li>
</ul>
<ul class="list-unstyled icon-list 2">
<li>
<a href="">ARTICLES</a>

<i class="fa fa-github" aria-hidden="true"></i>

</li>
<li>
<a href="">CONTACT</a>
<i class="fa fa-twitter" aria-hidden="true"></i>

</li>
<li>
<a href="">HOME</a>
<i class="fa fa-linkedin" aria-hidden="true"></i>

</li>
</ul>
</div>


</div>
<div class="about-me">
<div class="about-pic">
<img src="../../../../../assets/images/myface-in-bw_img07.jpg"
class=" rounded-circle img-fluid border border-3" alt="">
</div>
<div class="about-text">
<h4>ABOUT ME</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam quos
repellat ut illo.
</p>
<a class="button contact-me-btn">Contact
Me</a>
</div>
</div>
<div class="pages">
<h4>PAGES</h4>
<ul class="list-unstyled page-list">
<li>
<a href="">ARTICLES</a>

</li>
<li>
<a href="">CONTACT</a>
</li>
<li>
<a href="">HOME</a>
</li>
</ul>
</div>
<div class="container-fluid bg-light text-dark">
<div class="container">
<div class="row">
<div class="col-12 text-center mt-1">
<h5 class="copyright">
© COPYRIGHT 2024. ALL RIGHTS RESERVED
</h5>
</div>
</div>
<div class="container-fluid bg-light text-dark">
<div class="container">
<div class="row">
<div class="col-12 text-center mt-1">
<h5 class="copyright">
© COPYRIGHT 2024. ALL RIGHTS RESERVED
</h5>
</div>
</div>
</div>
</footer>
</div>
68 changes: 33 additions & 35 deletions assets/snippets/header.html
View file
Original file line number Diff line number Diff line change
@@ -1,44 +1,42 @@
<header>
<div class="container header-container text-nowrap text-white">
<div class="container header-container text-nowrap text-white">

<div class="p-2 site-title">
<h2 class="">
K(e)ith N. Henry
</h2>
</div>
<div class="p-2 site-title">
<h2 class="">
K(e)ith N. Henry
</h2>
</div>



<ul id="navlinks" class="p-3 pt-4 navlinks list-unstyled list-inline">
<li class="pe-2">
<a href="" class="p-0">Articles</a>
</li>
<li class="pe-2">
<a href="" class="p-0">Home</a>
</li>
<li class="">
<a href="" class="p-0">Contact</a>
</li>
</ul>
<ul id="navlinks" class="p-3 pt-4 navlinks list-unstyled list-inline">
<li class="pe-2">
<a href="" class="p-0">Articles</a>
</li>
<li class="pe-2">
<a href="" class="p-0">Home</a>
</li>
<li class="">
<a href="" class="p-0">Contact</a>
</li>
</ul>

<div class="hamburger-menu">
<button class="btn collapse-btn text-white p-0 pb-4 mb-3" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fa fa-bars"></i>
</button>
<div class="hamburger-menu">
<button class="btn collapse-btn text-white p-0 pb-4 mb-3" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fa fa-bars"></i>
</button>

</div>
</div>
<div class=" green-line">
<div class="collapse" id="collapseExample">
</div>
<div class=" green-line">
<div class="collapse" id="collapseExample">

<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
</header>
</div>
152 changes: 20 additions & 132 deletions writing/published/2024/August/22/test_article.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,48 +16,7 @@
<body>
<div class="container-fluid p-0">
<header>
<div class="container header-container text-nowrap text-white">

<div class="p-2 site-title">
<h2 class="">
K(e)ith N. Henry
</h2>
</div>



<ul id="navlinks" class="p-3 pt-4 navlinks list-unstyled list-inline">
<li class="pe-2">
<a href="" class="p-0">Articles</a>
</li>
<li class="pe-2">
<a href="" class="p-0">Home</a>
</li>
<li class="">
<a href="" class="p-0">Contact</a>
</li>
</ul>

<div class="hamburger-menu">
<button class="btn collapse-btn text-white p-0 pb-4 mb-3" type="button" data-bs-toggle="collapse"
data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<i class="fa fa-bars"></i>
</button>

</div>
</div>
<div class=" green-line">
<div class="collapse" id="collapseExample">

<ul class="list-group">
<li class="list-group-item">An item</li>
<li class="list-group-item">A second item</li>
<li class="list-group-item">A third item</li>
<li class="list-group-item">A fourth item</li>
<li class="list-group-item">And a fifth one</li>
</ul>
</div>
</div>

</header>

<div class="container">
Expand Down Expand Up @@ -91,99 +50,28 @@ <h1 class="text-uppercase text-center">
</div>
</div>
<footer>
<div class="container-fluid p-0 text-white footer-container">


<div class="follow-icons">
<h4 class="">FOLLOW</h4>


<div class="icons">

<ul class="list-unstyled icon-list 1">
<li>

<i class="fa fa-github" aria-hidden="true"></i>

</li>
<li>
<i class="fa fa-twitter" aria-hidden="true"></i>

</li>
<li>
<i class="fa fa-linkedin" aria-hidden="true"></i>

</li>
</ul>
<ul class="list-unstyled icon-list 2">
<li>

<i class="fa fa-github" aria-hidden="true"></i>

</li>
<li>
<i class="fa fa-twitter" aria-hidden="true"></i>

</li>
<li>
<i class="fa fa-linkedin" aria-hidden="true"></i>

</li>
</ul>
</div>


</div>
<div class="about-me">
<div class="about-pic">
<img src="../../../../../assets/images/myface-in-bw_img07.jpg"
class=" rounded-circle img-fluid border border-3" alt="">
</div>
<div class="about-text">
<h4>ABOUT ME</h4>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatibus ullam quos
repellat ut illo.
</p>
<a class="button contact-me-btn">Contact
Me</a>
</div>
</div>
<div class="pages">
<h4>PAGES</h4>
<ul class="list-unstyled page-list">
<li>
<a href="">ARTICLES</a>

</li>
<li>
<a href="">CONTACT</a>
</li>
<li>
<a href="">HOME</a>
</li>
</ul>
</div>




</div>
<div class="container-fluid bg-light text-dark">
<div class="container">
<div class="row">
<div class="col-12 text-center mt-1">
<h5 class="copyright">
© COPYRIGHT 2024. ALL RIGHTS RESERVED
</h5>
</div>
</div>
</div>
</div>

</footer>

<script>
document.addEventListener("DOMContentLoaded", function () {
console.log('injecting');
fetch('../../../../../assets/snippets/header.html')
.then(response => response.text())
.then(data => {
document.querySelector('header').innerHTML = data;
});

fetch('../../../../../assets/snippets/footer.html')
.then(response => response.text())
.then(data => {
document.querySelector('footer').innerHTML = data;
});
});
</script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF"
crossorigin="anonymous"></script>
</body>

</html>
</html>

0 comments on commit b45e6a9

Please sign in to comment.