Desafio finalizado - Fábio Henriques Viana Pinto

.gitignore

@@ -0,0 +1,2 @@
+dist
+node_modules

package.json

@@ -0,0 +1,35 @@
+{
+  "name": "webpack-config",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "dev": "webpack-dev-server --open --mode development --config webpack.config.js",
+    "build": "webpack --mode production"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@babel/core": "^7.12.9",
+    "@fortawesome/fontawesome-free": "^5.14.0",
+    "@fortawesome/fontawesome-svg-core": "^1.2.32",
+    "@fortawesome/free-brands-svg-icons": "^5.15.1",
+    "@fortawesome/free-regular-svg-icons": "^5.15.1",
+    "babel-loader": "^8.2.1",
+    "babel-preset-es2015": "^6.24.1",
+    "copy-webpack-plugin": "^6.3.2",
+    "css-loader": "^5.0.1",
+    "file-loader": "^6.2.0",
+    "gm": "^1.23.1",
+    "html-webpack-plugin": "^4.5.0",
+    "sass": "^1.29.0",
+    "sass-loader": "^10.1.0",
+    "sass-to-string": "^1.1.0",
+    "style-loader": "^2.0.0",
+    "url-loader": "^4.1.1",
+    "webpack": "^4.44.2",
+    "webpack-cli": "^3.3.12",
+    "webpack-dev-server": "^3.11.0",
+    "webpack-images-resizer": "^0.1.2"
+  }
+}

src/_reset.scss

@@ -0,0 +1,4 @@
+* {
+  margin: 0 0;
+  padding: 0 0;
+}

src/_variables.scss

@@ -0,0 +1,7 @@
+$screen-large: 1024px;
+$screen-medium: 768px;
+$screen-small: 480px;
+$primary-color: white;
+$secondary-color: black;
+$git-dark-gray: #666;
+$git-light-gray: #bbb;

src/app.global.scss

@@ -0,0 +1,20 @@
+@import "./_variables.scss";
+@import "./_reset.scss";
+
+.container {
+  margin: auto;
+  width: $screen-large;
+  overflow: hidden;
+}
+
+@media (max-width: $screen-medium) {
+  .container {
+    width: $screen-medium;
+  }
+}
+
+@media (max-width: $screen-small) {
+  .container {
+    width: $screen-small;
+  }
+}

src/app.js

@@ -0,0 +1,6 @@
+import "./routes/desafio/Desafio";
+import "./routes/home/Home";
+import "./routes/sobre/Sobre";
+import "./components/navBar/NavBar";
+import "./components/rodape/Rodape";
+import "./app.global.scss";

src/components/avatar/Avatar.js

@@ -0,0 +1,37 @@
+import { githubUrl, githubAvatarUrl } from "../../data/constants";
+import styles from "./avatar.scss";
+
+const templateElement = document.createElement("template");
+
+function createStyle() {
+  const style = document.createElement("style");
+  style.textContent = styles;
+  return style;
+}
+
+function createTemplate() {
+  templateElement.innerHTML = `
+	<div>
+		<img src="${githubAvatarUrl}" alt="Avatar" />
+		<div>
+			<a href="${githubUrl}" target="_blank">VISITAR PERFIL</a>
+		</div>
+	</div>
+`;
+  return templateElement.content.cloneNode(true);
+}
+
+class Avatar extends HTMLElement {
+  constructor() {
+    super();
+    const style = createStyle();
+    const template = createTemplate();
+
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(style);
+    this.shadowRoot.appendChild(template);
+  }
+}
+
+customElements.define("c-avatar", Avatar);
+export default Avatar;

src/components/avatar/avatar.scss

@@ -0,0 +1,21 @@
+@import "../../_variables.scss";
+
+div {
+  width: 100%;
+
+  div {
+    margin-top: 1em;
+  }
+
+  img {
+    width: 130px;
+    height: 130px;
+    border-radius: 100%;
+  }
+
+  a {
+    font-weight: bolder;
+    color: $git-dark-gray;
+    text-decoration: none;
+  }
+}

src/components/cartao/Cartao.js

@@ -0,0 +1,43 @@
+import "../avatar/Avatar";
+import "../gitInfo/GitInfo";
+import { getData } from "../../data/githubRepository";
+import styles from "./cartao.scss";
+
+const templateElement = document.createElement("template");
+
+function createStyle() {
+  const style = document.createElement("style");
+  style.textContent = styles;
+  return style;
+}
+
+function createTemplate() {
+  templateElement.innerHTML = `
+		<div>
+			<c-avatar></c-avatar>
+			<c-git-info></c-git-info>
+		</div>
+	`;
+  return templateElement.content.cloneNode(true);
+}
+
+class Cartao extends HTMLElement {
+  constructor() {
+    super();
+    const style = createStyle();
+    const template = createTemplate();
+
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(style);
+    this.shadowRoot.appendChild(template);
+    this.init();
+  }
+
+  async init() {
+    const gitInfo = this.shadowRoot.querySelector("c-git-info");
+    gitInfo.data = await getData();
+  }
+}
+
+customElements.define("c-cartao", Cartao);
+export default Cartao;

src/components/cartao/cartao.scss

@@ -0,0 +1,8 @@
+div {
+  background-color: white;
+  padding: 5% 5%;
+  text-align: center;
+  display: grid;
+  grid-template-columns: 160px auto;
+  justify-items: start;
+}

src/components/gitInfo/GitInfo.js

@@ -0,0 +1,43 @@
+import { githubUrl } from "../../data/constants";
+import styles from "./gitInfo.scss";
+
+const templateElement = document.createElement("template");
+
+function createStyle() {
+  const style = document.createElement("style");
+  style.textContent = styles;
+  return style;
+}
+
+function createTemplate(repositorios, seguidores, seguindo) {
+  templateElement.innerHTML = `
+		<ul>
+			<li>Repositórios: <span>${repositorios.length}</span></li>
+			<li>Seguidores: <span>${seguidores.length}</span></li>
+			<li>Seguindo: <span>${seguindo.length}</span></li>
+		</ul>
+		<div>
+			<a href="${githubUrl}?tab=repositories" target="_blank" class="button btn-link-github">VER REPOSITÓRIOS</a>
+			<a href="${githubUrl}?tab=stars" target="_blank" class="button btn-link-github">VER FAVORITOS</a>
+		</div>
+	`;
+  return templateElement.content.cloneNode(true);
+}
+
+class GitInfo extends HTMLElement {
+  constructor() {
+    super();
+    const style = createStyle();
+
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(style);
+  }
+
+  set data({ repositorios, seguidores, seguindo }) {
+    const template = createTemplate(repositorios, seguidores, seguindo);
+    this.shadowRoot.appendChild(template);
+  }
+}
+
+customElements.define("c-git-info", GitInfo);
+export default GitInfo;

src/components/gitInfo/gitInfo.scss

@@ -0,0 +1,21 @@
+@import "../../_variables.scss";
+
+ul {
+  padding: 0 0;
+  list-style: none;
+  text-align: left;
+  line-height: 1.5em;
+  color: $git-dark-gray;
+  font-weight: bolder;
+}
+
+div {
+  margin-top: 50px;
+
+  a {
+    color: $git-light-gray;
+    border: 1px solid $git-light-gray;
+    padding: 10px 10px;
+    text-decoration: none;
+  }
+}

src/components/midiaSocial/MidiaSocial.js

@@ -0,0 +1,48 @@
+import { icon } from "@fortawesome/fontawesome-svg-core";
+import { faGithub, faLinkedin } from "@fortawesome/free-brands-svg-icons";
+import { githubUrl, linkedinUrl } from "../../data/constants";
+import styles from "./midiaSocial.scss";
+
+const iconLinkedin = icon(faLinkedin);
+const iconGithub = icon(faGithub);
+
+const templateElement = document.createElement("template");
+
+function createStyle() {
+  const style = document.createElement("style");
+  style.textContent = styles;
+  return style;
+}
+
+function createTemplate() {
+  templateElement.innerHTML = `
+		<ul>
+			<li>
+				<a href="${linkedinUrl}" target="_blank" class="link-linkedin">
+					${iconLinkedin.node[0].outerHTML}
+				</a>
+			</li>
+			<li>
+				<a href="${githubUrl}" target="_blank" class="link-github">
+					${iconGithub.node[0].outerHTML}
+				</a>
+			</li>
+		</ul>
+	`;
+  return templateElement.content.cloneNode(true);
+}
+
+class MidiaSocial extends HTMLElement {
+  constructor() {
+    super();
+    const style = createStyle();
+    const template = createTemplate();
+
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(style);
+    this.shadowRoot.appendChild(template);
+  }
+}
+
+customElements.define("c-midia-social", MidiaSocial);
+export default MidiaSocial;

src/components/midiaSocial/midiaSocial.scss

@@ -0,0 +1,21 @@
+@import "../../_reset.scss";
+@import "../../_variables.scss";
+
+ul {
+  position: absolute;
+  text-align: center;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+li {
+  list-style: none;
+  float: left;
+  margin: 0 1em;
+}
+
+svg {
+  width: 2em;
+  color: $primary-color;
+}

src/components/navBar/NavBar.js

@@ -0,0 +1,50 @@
+import styles from "./navBar.scss";
+
+const templateElement = document.createElement("template");
+
+function createStyle() {
+  const style = document.createElement("style");
+  style.textContent = styles;
+  return style;
+}
+
+function createTemplate() {
+  templateElement.innerHTML = `
+		<nav>
+			<span class="brand">Fábio Henriques</span>
+			<a href="#home" class="btn-secao"> Home </a>
+			<a href="#sobre" class="btn-secao"> Sobre </a>
+			<a href="#desafio" class="btn-secao"> Desafio </a>
+		</nav>
+`;
+  return templateElement.content.cloneNode(true);
+}
+
+class NavBar extends HTMLElement {
+  constructor() {
+    super();
+    const style = createStyle();
+    const template = createTemplate();
+
+    this.attachShadow({ mode: "open" });
+    this.shadowRoot.appendChild(style);
+    this.shadowRoot.appendChild(template);
+    this.addSmoothScrollOnClick();
+  }
+
+  addSmoothScrollOnClick() {
+    this.shadowRoot.querySelectorAll(".btn-secao").forEach((button) => {
+      button.addEventListener("click", function (e) {
+        e.preventDefault();
+        const href = this.getAttribute("href");
+
+        document.querySelector(href).scrollIntoView({
+          behavior: "smooth",
+        });
+      });
+    });
+  }
+}
+
+customElements.define("c-nav-bar", NavBar);
+export default NavBar;