refact: organize components

assets/img/favicon/site.webmanifest

@@ -1 +1,19 @@
-{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}
+{
+    "name": "",
+    "short_name": "",
+    "icons": [
+        {
+            "src": "./android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "./android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#eca769",
+    "background_color": "#eca769",
+    "display": "standalone"
+}

js/components/alura-section/alura-progress-course-template.js

@@ -0,0 +1,21 @@
+const aluraProgressCourseTemplate = (courseName, courseProgress, courseSlug) =>{
+
+    return `
+        <header class="course-in-progress__item-header">
+            <a href="https://cursos.alura.com.br/course/${courseSlug}" title="Informações sobre o curso" rel="noreferrer noopener" target="_blank">
+                <h4 class="courses-in-progress__item-title subtitle-cards">
+                    ${courseName}
+                </h4>
+            </a>
+        </header>
+        <div class="progress-bar__container">
+            <div class="progress-bar__background">
+                <div class="progress-bar" data-bar-value="${courseProgress}" style="width:0%"></div>
+            </div>
+            <span class="progress-bar__percentual">${courseProgress}%</span>
+        </div>
+    `;
+
+}
+
+export default aluraProgressCourseTemplate;

js/components/alura-section.js → js/components/alura-section/index.js

@@ -1,12 +1,13 @@
-import { fetchData } from "../service/api.js";
-import endpoint from "../service/config.js";
-import { aluraStudyngTemplate } from "./../templates/index.js";
-import { aluraCardContainer } from "./elements.js";
+import { fetchData } from "../../service/api.js";
+import endpoint from "../../service/config.js";
+import aluraProgressCourseTemplate from "./alura-progress-course-template.js";
+
+const aluraCardContainer = document.querySelector('.course-in-progress__all-items');
 
 const populateCards = (item) => {
     const article = document.createElement('article');
     article.classList.add('course-in-progress__item');
-    article.innerHTML = aluraStudyngTemplate(item.name, item.progress, item.slug);
+    article.innerHTML = aluraProgressCourseTemplate(item.name, item.progress, item.slug);
     aluraCardContainer.append(article);
 }
 

js/components/dev-to-section/dev-to-post-card-template.js

@@ -0,0 +1,33 @@
+const devToPostCardTemplate = (title, description, publishAt, url, image) =>{
+    return `
+        <div class="posts__dev-to__card__container">
+            <header class="posts__dev-to__header">
+                <a class="posts__dev-to__link" href=${url} rel="noreferrer noopener" target="_blank">
+                    <figure>
+                        <img 
+                            class="posts__dev-to__image" 
+                            src="${image}" 
+                            alt="Capa do post"
+                        >
+                    </figure>
+                    <h4 class="posts__dev-to__title card__container--dev-to">
+                        ${title}
+                    </h4>
+                </a>
+                <h5 class="posts__dev-to__subtitle card__container--dev-to">
+                    <span class="posts__dev-to__data">
+                        ${publishAt} - Van Ribeiro
+                    </span>
+                </h5>
+            </header>
+            <div class="posts__dev-to__content card__container--dev-to">
+                <div class="posts__dev-to__description">
+                    <p>${description === null ? 'nenhuma descrição encontrada': description}</p>
+                </div>
+            </div>
+        </div>
+    `;
+
+}
+
+export default devToPostCardTemplate;

js/components/dev-to-section.js → js/components/dev-to-section/index.js

@@ -1,7 +1,8 @@
-import { devToPostsCardTemplate } from "../templates/index.js";
-import { fetchData } from "../service/api.js";
-import { devToCardsContainer } from './elements.js';
-import endpoint from "../service/config.js";
+import devToPostsCardTemplate from "./dev-to-post-card-template.js";
+import { fetchData } from "../../service/api.js";
+import endpoint from "../../service/config.js";
+
+const devToCardsContainer = document.querySelector('.posts__dev-to__cards');
 
 const populateCards = (item) => {
     const article = document.createElement('article');

js/components/github-section/github-card-repo-template.js

@@ -0,0 +1,44 @@
+const githubCardRepoTemplate = (
+    repoName, 
+    repoDescription, 
+    repoLastUpdate, 
+    repoProgrammingLanguage, 
+    repoURL
+) => {
+
+    const date = new Date(repoLastUpdate);
+    const day = date.getDate() < 10 ? `0${date.getDate()}` : date.getDate();
+    const mounth = date.getMonth() < 10 ? `0${date.getMonth() + 1}` : date.getMonth() + 1;
+    const year = date.getFullYear();
+    const repoLastDayUpdate = `${day}/${mounth}/${year}`;
+
+    return `
+        <div class="github-repo__card__container card__container">
+            <header class="github-repo__header">
+                <a class="github-repo__link" href=${repoURL} rel="noreferrer noopener" target="_blank">
+                    <h4 class="github-repo__title subtitle-cards">
+                        <i class="github-repos__book-icon icons"></i>
+                        ${repoName}
+                    </h4>
+                </a>
+            </header>
+            <div class="github-repo__content">
+                <div class="github-repo__description">
+                    <p>${repoDescription === null ? 'not specified': repoDescription}</p>
+                </div>
+                <div class="github-repo__info">
+                    <span class="github-repo__data">
+                        ${repoLastDayUpdate}
+                    </span>
+                    <span class="github-repo__language-name">
+                        <i class="github-repo__color bg-color-${repoProgrammingLanguage === null ? 'default': repoProgrammingLanguage.toLowerCase()}"></i>
+                        ${repoProgrammingLanguage === null ? 'not specified': repoProgrammingLanguage}
+                    </span>
+                </div>
+            </div>
+        </div>
+    `;
+
+}
+
+export default githubCardRepoTemplate;

js/components/github-section.js → js/components/github-section/index.js

@@ -1,7 +1,8 @@
-import { githubCardRepoTemplate } from "./../templates/index.js";
-import { fetchData } from "./../service/api.js";
-import { githubCardsContainer } from './elements.js';
-import endpoint from "../service/config.js";
+import githubCardRepoTemplate from "./github-card-repo-template.js";
+import { fetchData } from "../../service/api.js";
+import endpoint from "../../service/config.js";
+
+const githubCardsContainer = document.querySelector('.github-repos__cards');
 
 const populateCards = (item) => {
     const article = document.createElement('article');

js/components/instagram-section.js → js/components/instagram-section/index.js

@@ -1,8 +1,8 @@
-import endpoint from "../service/config.js";
-import { fetchData } from "./../service/api.js";
-import { instagramItemTemplate } from "./../templates/index.js";
-import { instagramListContainer } from "./elements.js";
+import endpoint from "../../service/config.js";
+import { fetchData } from "../../service/api.js";
+import { instagramItemTemplate } from "./instagram-item-template.js";
 
+const instagramListContainer = document.querySelector('.instagram-posts__list');
 
 const populateCards = (item) => {
     const li = document.createElement('li');

js/components/instagram-section/instagram-item-template.js

@@ -0,0 +1,18 @@
+const instagramItemTemplate = (caption, media_type, permalink, thumbnail_url, media_url) =>{
+    return `
+        <a href="${permalink}" rel="noreferrer noopener" target="_blank">
+            <figure class="instagram-posts__image-container">
+                <img 
+                    style="height:1080; width:1080px;"
+                    loading="lazy"
+                    class="img-responsive instagram-posts__image lazyload" 
+                    src="./../assets/img/placeholders/placeholder-image.svg" 
+                    data-src="${media_type === 'VIDEO' ? thumbnail_url : media_url}" 
+                    alt="${caption}"
+                >
+            </figure>
+        </a>
+    `;
+}
+
+export default instagramItemTemplate;

js/components/site-iframe.js → js/components/live-apps/index.js

@@ -9,7 +9,7 @@ function getRandomNumber(min, max) {
     return Math.floor(Math.random() * (MAX - MIN) + MIN);
 }
 
-function getRandomUrlSource () {
+function liveAppsRandomly () {
     const urlDictionarySize = Object.keys(urlDictionary).length;
     const randomUrl = urlDictionary[getRandomNumber(0, urlDictionarySize)];
 
@@ -23,6 +23,4 @@ function getRandomUrlSource () {
     span.textContent = randomUrl.title;
 }
 
-export {
-    getRandomUrlSource
-}
+export default liveAppsRandomly;

js/components/menu.js → js/components/menu/index.js

@@ -1,11 +1,11 @@
-import { topMenuList, menuMobile } from './../templates/index.js';
-
+import menuMobile from "./mobile.js";
+import menuTopList from "./top-list.js";
 
 const menu = () => {
     const topMenu = document.querySelector('.header-page__menu');
     const menuMobileContainer = document.querySelector('nav.menu-mobile');
     if(topMenu && menuMobileContainer){
-        topMenu.innerHTML = topMenuList();
+        topMenu.innerHTML = menuTopList();
         menuMobileContainer.innerHTML = menuMobile(); 
     }
 }

js/components/menu/mobile.js

@@ -0,0 +1,38 @@
+const menuMobile = () => {
+    return `
+        <div class="menu-mobile__close-button-container this-container">
+            <span class="menu-mobile__close-button">
+                &times;
+            </span>
+        </div>
+        <div class="menu-mobile__container this-container">
+            <div class="header-page__logo--mobile">
+                <a href="/">
+                    <h3 class="header-page__logo__title">vanessa ribeiro</h3>
+                    <h4 class="header-page__logo__subtitle">front-end developer</h4>
+                </a>
+            </div>
+            <ul class="menu-mobile__list">
+                <li class="menu-mobile__list-item">
+                    <a class="menu-mobile__link" href="/">Home</a>
+                </li>
+                <li class="menu-mobile__list-item">
+                    <a class="menu-mobile__link" href="/paginas/updates.html">Atualizações</a>
+                </li>
+            </ul>
+            <ul class="menu-mobile__icons-list">
+                <a class="menu-mobile__icon-link" href="https://www.linkedin.com/in/vanribeiro" rel="noreferrer noopener" target="_blank" >
+                    <i class="icons linkedin"></i>
+                </a>
+                <a class="menu-mobile__icon-link" href="https://www.instagram.com/vanribeiro.dev" rel="noreferrer noopener" target="_blank" >
+                    <i class="icons instagram"></i>                
+                </a>
+                <a class="menu-mobile__icon-link" href="https://github.com/vanribeiro" rel="noreferrer noopener" target="_blank" >
+                    <i class="icons github"></i>
+                </a>
+            </ul>
+        </div>
+    `;
+}
+
+export default menuMobile;

js/components/menu/top-list.js

@@ -0,0 +1,15 @@
+const menuTopList = () => {
+    return `
+        <ul class="header-page__list">
+            <li class="header-page__list-item">
+                <a class="header-page__link" href="/">Home</a>
+            </li>
+            <li class="header-page__list-item">
+                <a class="header-page__link" href="/paginas/updates.html">Atualizações</a>
+            </li>
+        </ul>
+    `;
+}
+
+
+export default menuTopList;

js/components/progress-bar.js → js/components/progress-bar/index.js

@@ -8,6 +8,4 @@ const playOnProgressBarAnimation = () => {
     }
 }
 
-export {
-    playOnProgressBarAnimation
-}
+export default playOnProgressBarAnimation;

js/index.js

@@ -1,5 +1,5 @@
-import footer from "./components/footer.js";
-import menu from "./components/menu.js";
+import footer from "./components/footer/index.js";
+import menu from "./components/menu/index.js";
 import openMenuMobile from './handlers/menu-mobile.js';
 
 window.addEventListener('load', () => {

js/pages/updates.js

@@ -1,16 +1,16 @@
-import { playOnProgressBarAnimation } from "../components/progress-bar.js";
-import githubSection from "../components/github-section.js";
-import aluraSection from "../components/alura-section.js";
-import { getRandomUrlSource } from "../components/site-iframe.js";
-import devToPostSection from "../components/dev-to-section.js";
+import playOnProgressBarAnimation from "../components/progress-bar/index.js";
+import githubSection from "../components/github-section/index.js";
+import aluraSection from "../components/alura-section/index.js";
+import devToPostSection from "../components/dev-to-section/index.js";
+import liveAppsRandomly from "../components/live-apps/index.js";
 
 const handleLoad = async () => {
     await githubSection();
     await devToPostSection();
     await aluraSection();
 
     setTimeout(playOnProgressBarAnimation, 5 * 100);
-    getRandomUrlSource();
+    liveAppsRandomly();
 }
 
 window.addEventListener('load', handleLoad);