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