breadleaf.github.io/footer.js at main · Breadleaf/breadleaf.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
customElements.define(
  "footer-links",
  class extends HTMLElement {
    constructor() {
      super();
    }

    connectedCallback() {
      const container = document.createElement("div");
      container.classList.add("footer-links");

      const IconButton = (url, classNames) => {
        const a = document.createElement("a");
        a.href = url;
        a.classList.add("open-new");

        const i = document.createElement("i");
        i.classList.add(...classNames);

        a.innerHTML = i.outerHTML;

        container.appendChild(a);
      };

      IconButton("mailto:bkhnapa@gmail.com", [
        "fa-solid",
        "fa-square-envelope",
        "fa-2xl",
      ]);

      IconButton("https://github.com/Breadleaf", [
        "fa-brands",
        "fa-square-github",
        "fa-2xl",
      ]);

      IconButton("https://gitlab.com/Breadleaf", [
        "fa-brands",
        "fa-square-gitlab",
        "fa-2xl",
      ]);

      IconButton("https://www.linkedin.com/in/bradley-k-hutchings/", [
        "fa-brands",
        "fa-linkedin",
        "fa-2xl",
      ]);

      IconButton("posts/rss.xml", ["fa-solid", "fa-square-rss", "fa-2xl"]);

      const link = document.createElement("link");
      link.rel = "stylesheet";
      link.href = "footer.css";
      this.appendChild(link);

      this.appendChild(container);
    }
  }
);