diff --git a/docs/source/_static/css/huggingface.css b/docs/source/_static/css/huggingface.css index 1895f5a10b..362c0992fb 100644 --- a/docs/source/_static/css/huggingface.css +++ b/docs/source/_static/css/huggingface.css @@ -113,6 +113,18 @@ a { text-transform: uppercase; } +.footer { + margin-top: 20px; +} + +.footer__Social { + display: flex; + flex-direction: row; +} + +.footer__CustomImage { + margin: 2px 5px 0 0; +} diff --git a/docs/source/_static/js/custom.js b/docs/source/_static/js/custom.js index 9ddbbb7c49..4adf2a4672 100644 --- a/docs/source/_static/js/custom.js +++ b/docs/source/_static/js/custom.js @@ -1,18 +1,54 @@ function addIcon() { const huggingFaceLogo = "http://lysand.re/huggingface_logo.svg"; const image = document.createElement("img"); - image.setAttribute("src", huggingFaceLogo) + image.setAttribute("src", huggingFaceLogo); - - const div = document.createElement("div") + const div = document.createElement("div"); div.appendChild(image); div.style.textAlign = 'center'; div.style.paddingTop = '30px'; - div.style.backgroundColor = '#6670FF' + div.style.backgroundColor = '#6670FF'; const scrollDiv = document.getElementsByClassName("wy-side-scroll")[0]; - scrollDiv.prepend(div) + scrollDiv.prepend(div); } -window.addEventListener("load", addIcon) +function addCustomFooter() { + const customFooter = document.createElement("div"); + const questionOrIssue = document.createElement("div"); + questionOrIssue.innerHTML = "Stuck? Read our Blog posts or Create an issue"; + customFooter.appendChild(questionOrIssue); + customFooter.classList.add("footer"); + + const social = document.createElement("div"); + social.classList.add("footer__Social"); + + const imageDetails = [ + { link: "https://huggingface.co", imageLink: "http://lysand.re/icons/website.svg" }, + { link: "https://twitter.com/huggingface", imageLink: "http://lysand.re/icons/twitter.svg" }, + { link: "https://github.com/huggingface", imageLink: "http://lysand.re/icons/github.svg" }, + { link: "https://www.linkedin.com/company/huggingface/", imageLink: "http://lysand.re/icons/linkedin.svg" } + ]; + + imageDetails.forEach(imageLinks => { + const link = document.createElement("a"); + const image = document.createElement("img"); + image.src = imageLinks.imageLink; + link.href = imageLinks.link; + image.style.width = "30px"; + image.classList.add("footer__CustomImage"); + link.appendChild(image); + social.appendChild(link); + }); + + customFooter.appendChild(social); + document.getElementsByTagName("footer")[0].appendChild(customFooter); +} + +function onLoad() { + addIcon(); + addCustomFooter(); +} + +window.addEventListener("load", onLoad);