Here the header and footer components for the ETHO project websites. Aim is to have a joint footer for all projects. It is pretty straight forward and an index.html template is provided.
You need to have in the the following:
First a initiation of a config variable: The component is configurable by providing additional menus via the ethocomponent_menu variable in the section. If you do not want to have any additional menus (maybe you have a side menue) then configure the following:
<script>let ethocomponent_menu='';
</script>
Otherwise use the following.
<script>let ethocomponent_menu='' +
'<li class="nav-item"><a class="nav-link" href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%23">Item 1</a></li>' +
'<li class="nav-item"><a class="nav-link" href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%23">Item 2</a></li>' +
'<li class="nav-item"><a class="nav-link" href="proxy.php?url=https%3A%2F%2Fgithub.com%2F%23">Item 3</a></li>' +
'';
</script>
It is important to have the valiable config before the css loadings
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Ffork-awesome%401.2.0%2Fcss%2Ffork-awesome.min.css" integrity="sha256-XoaMnoYC5TH6/+ihMEnospgm0J1PM/nioxbOUdnM8HY=" crossorigin="anonymous">
<link rel="stylesheet" href="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%404.6.2%2Fdist%2Fcss%2Fbootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<script async='' src='https://cdn.jsdelivr.net/gh/Ether1Project/ethocomponents/component.js' crossorigin="anonymous"></script>
And then add in the beginning of the the header statement (if you want a menu component)
<header-component></header-component>
and at the end the footer statement
<footer-component></footer-component>
after the body you need to load the js scripts:
<script src="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fjquery%403.5.1%2Fdist%2Fjquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="proxy.php?url=https%3A%2F%2Fcdn.jsdelivr.net%2Fnpm%2Fbootstrap%404.6.2%2Fdist%2Fjs%2Fbootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script></html>
It should like this
