From 81ef66d2d763d1969a6b1d40d007d2df423bbc19 Mon Sep 17 00:00:00 2001 From: Vanessa Ribeiro Date: Tue, 23 Jul 2024 16:19:54 -0300 Subject: [PATCH] refact: organize components --- assets/img/favicon/site.webmanifest | 20 ++- .../alura-progress-course-template.js | 21 +++ .../index.js} | 11 +- .../dev-to-post-card-template.js | 33 ++++ .../index.js} | 9 +- js/components/elements.js | 11 -- js/components/{footer.js => footer/index.js} | 0 .../github-card-repo-template.js | 44 +++++ .../index.js} | 9 +- .../index.js} | 8 +- .../instagram-item-template.js | 18 ++ .../{site-iframe.js => live-apps/index.js} | 6 +- .../{ => live-apps}/site-iframe-urls.js | 0 js/components/{menu.js => menu/index.js} | 6 +- js/components/menu/mobile.js | 38 ++++ js/components/menu/top-list.js | 15 ++ .../index.js} | 4 +- js/index.js | 4 +- js/pages/updates.js | 12 +- js/templates/index.js | 165 ------------------ 20 files changed, 222 insertions(+), 212 deletions(-) create mode 100644 js/components/alura-section/alura-progress-course-template.js rename js/components/{alura-section.js => alura-section/index.js} (75%) create mode 100644 js/components/dev-to-section/dev-to-post-card-template.js rename js/components/{dev-to-section.js => dev-to-section/index.js} (75%) delete mode 100644 js/components/elements.js rename js/components/{footer.js => footer/index.js} (100%) create mode 100644 js/components/github-section/github-card-repo-template.js rename js/components/{github-section.js => github-section/index.js} (78%) rename js/components/{instagram-section.js => instagram-section/index.js} (75%) create mode 100644 js/components/instagram-section/instagram-item-template.js rename js/components/{site-iframe.js => live-apps/index.js} (92%) rename js/components/{ => live-apps}/site-iframe-urls.js (100%) rename js/components/{menu.js => menu/index.js} (70%) create mode 100644 js/components/menu/mobile.js create mode 100644 js/components/menu/top-list.js rename js/components/{progress-bar.js => progress-bar/index.js} (88%) delete mode 100644 js/templates/index.js diff --git a/assets/img/favicon/site.webmanifest b/assets/img/favicon/site.webmanifest index 45dc8a2..01141e7 100644 --- a/assets/img/favicon/site.webmanifest +++ b/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"} \ No newline at end of file +{ + "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" +} \ No newline at end of file diff --git a/js/components/alura-section/alura-progress-course-template.js b/js/components/alura-section/alura-progress-course-template.js new file mode 100644 index 0000000..df3e8ce --- /dev/null +++ b/js/components/alura-section/alura-progress-course-template.js @@ -0,0 +1,21 @@ +const aluraProgressCourseTemplate = (courseName, courseProgress, courseSlug) =>{ + + return ` +
+ +

+ ${courseName} +

+ +
+
+
+
+
+ ${courseProgress}% +
+ `; + +} + +export default aluraProgressCourseTemplate; \ No newline at end of file diff --git a/js/components/alura-section.js b/js/components/alura-section/index.js similarity index 75% rename from js/components/alura-section.js rename to js/components/alura-section/index.js index 2a9a16c..cbc9a35 100644 --- a/js/components/alura-section.js +++ b/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); } diff --git a/js/components/dev-to-section/dev-to-post-card-template.js b/js/components/dev-to-section/dev-to-post-card-template.js new file mode 100644 index 0000000..74357ac --- /dev/null +++ b/js/components/dev-to-section/dev-to-post-card-template.js @@ -0,0 +1,33 @@ +const devToPostCardTemplate = (title, description, publishAt, url, image) =>{ + return ` +
+
+ +
+ Capa do post +
+

+ ${title} +

+ +
+ + ${publishAt} - Van Ribeiro + +
+
+
+
+

${description === null ? 'nenhuma descrição encontrada': description}

+
+
+
+ `; + +} + +export default devToPostCardTemplate; \ No newline at end of file diff --git a/js/components/dev-to-section.js b/js/components/dev-to-section/index.js similarity index 75% rename from js/components/dev-to-section.js rename to js/components/dev-to-section/index.js index 17036cb..5801dc9 100644 --- a/js/components/dev-to-section.js +++ b/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'); diff --git a/js/components/elements.js b/js/components/elements.js deleted file mode 100644 index 035e364..0000000 --- a/js/components/elements.js +++ /dev/null @@ -1,11 +0,0 @@ -const githubCardsContainer = document.querySelector('.github-repos__cards'); -const devToCardsContainer = document.querySelector('.posts__dev-to__cards'); -const aluraCardContainer = document.querySelector('.course-in-progress__all-items'); -const instagramListContainer = document.querySelector('.instagram-posts__list'); - -export { - githubCardsContainer, - devToCardsContainer, - aluraCardContainer, - instagramListContainer -} \ No newline at end of file diff --git a/js/components/footer.js b/js/components/footer/index.js similarity index 100% rename from js/components/footer.js rename to js/components/footer/index.js diff --git a/js/components/github-section/github-card-repo-template.js b/js/components/github-section/github-card-repo-template.js new file mode 100644 index 0000000..c071c17 --- /dev/null +++ b/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 ` +
+
+ +

+ + ${repoName} +

+ +
+
+
+

${repoDescription === null ? 'not specified': repoDescription}

+
+
+ + ${repoLastDayUpdate} + + + + ${repoProgrammingLanguage === null ? 'not specified': repoProgrammingLanguage} + +
+
+
+ `; + +} + +export default githubCardRepoTemplate; \ No newline at end of file diff --git a/js/components/github-section.js b/js/components/github-section/index.js similarity index 78% rename from js/components/github-section.js rename to js/components/github-section/index.js index 632df4b..e493fff 100644 --- a/js/components/github-section.js +++ b/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'); diff --git a/js/components/instagram-section.js b/js/components/instagram-section/index.js similarity index 75% rename from js/components/instagram-section.js rename to js/components/instagram-section/index.js index c7512ed..509a91b 100644 --- a/js/components/instagram-section.js +++ b/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'); diff --git a/js/components/instagram-section/instagram-item-template.js b/js/components/instagram-section/instagram-item-template.js new file mode 100644 index 0000000..78b3cff --- /dev/null +++ b/js/components/instagram-section/instagram-item-template.js @@ -0,0 +1,18 @@ +const instagramItemTemplate = (caption, media_type, permalink, thumbnail_url, media_url) =>{ + return ` + +
+ ${caption} +
+ + `; +} + +export default instagramItemTemplate; \ No newline at end of file diff --git a/js/components/site-iframe.js b/js/components/live-apps/index.js similarity index 92% rename from js/components/site-iframe.js rename to js/components/live-apps/index.js index 1d09ca3..d1f0dee 100644 --- a/js/components/site-iframe.js +++ b/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 -} \ No newline at end of file +export default liveAppsRandomly; \ No newline at end of file diff --git a/js/components/site-iframe-urls.js b/js/components/live-apps/site-iframe-urls.js similarity index 100% rename from js/components/site-iframe-urls.js rename to js/components/live-apps/site-iframe-urls.js diff --git a/js/components/menu.js b/js/components/menu/index.js similarity index 70% rename from js/components/menu.js rename to js/components/menu/index.js index 8931c72..ed11973 100644 --- a/js/components/menu.js +++ b/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(); } } diff --git a/js/components/menu/mobile.js b/js/components/menu/mobile.js new file mode 100644 index 0000000..c9f0a20 --- /dev/null +++ b/js/components/menu/mobile.js @@ -0,0 +1,38 @@ +const menuMobile = () => { + return ` +
+ + × + +
+
+
+ +

vanessa ribeiro

+

front-end developer

+ +
+ + +
+ `; +} + +export default menuMobile; \ No newline at end of file diff --git a/js/components/menu/top-list.js b/js/components/menu/top-list.js new file mode 100644 index 0000000..ac89632 --- /dev/null +++ b/js/components/menu/top-list.js @@ -0,0 +1,15 @@ +const menuTopList = () => { + return ` + + `; +} + + +export default menuTopList; \ No newline at end of file diff --git a/js/components/progress-bar.js b/js/components/progress-bar/index.js similarity index 88% rename from js/components/progress-bar.js rename to js/components/progress-bar/index.js index 7c6732b..b8375d5 100644 --- a/js/components/progress-bar.js +++ b/js/components/progress-bar/index.js @@ -8,6 +8,4 @@ const playOnProgressBarAnimation = () => { } } -export { - playOnProgressBarAnimation -} \ No newline at end of file +export default playOnProgressBarAnimation; \ No newline at end of file diff --git a/js/index.js b/js/index.js index e817af3..a051e8d 100644 --- a/js/index.js +++ b/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', () => { diff --git a/js/pages/updates.js b/js/pages/updates.js index adef1a2..ad191cb 100644 --- a/js/pages/updates.js +++ b/js/pages/updates.js @@ -1,8 +1,8 @@ -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(); @@ -10,7 +10,7 @@ const handleLoad = async () => { await aluraSection(); setTimeout(playOnProgressBarAnimation, 5 * 100); - getRandomUrlSource(); + liveAppsRandomly(); } window.addEventListener('load', handleLoad); diff --git a/js/templates/index.js b/js/templates/index.js deleted file mode 100644 index 74e016d..0000000 --- a/js/templates/index.js +++ /dev/null @@ -1,165 +0,0 @@ -const devToPostsCardTemplate = (title, description, publishAt, url, image) =>{ - - return ` -
-
- -
- Capa do post -
-

- ${title} -

- -
- - ${publishAt} - Van Ribeiro - -
-
-
-
-

${description === null ? 'nenhuma descrição encontrada': description}

-
-
-
- `; - -} - -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 ` -
-
- -

- - ${repoName} -

- -
-
-
-

${repoDescription === null ? 'not specified': repoDescription}

-
-
- - ${repoLastDayUpdate} - - - - ${repoProgrammingLanguage === null ? 'not specified': repoProgrammingLanguage} - -
-
-
- `; - -} - -const aluraStudyngTemplate = (courseName, courseProgress, courseSlug) =>{ - - return ` -
- -

- ${courseName} -

- -
-
-
-
-
- ${courseProgress}% -
- `; - -} - -const instagramItemTemplate = (caption, media_type, permalink, thumbnail_url, media_url) =>{ - return ` - -
- ${caption} -
- - `; -} - -const topMenuList = () => { - return ` - - `; -} - -const menuMobile = () => { - return ` -
- - × - -
-
-
- -

vanessa ribeiro

-

front-end developer

- -
- - -
- `; -} - -export{ - devToPostsCardTemplate, - githubCardRepoTemplate, - aluraStudyngTemplate, - instagramItemTemplate, - menuMobile, - topMenuList -} \ No newline at end of file