[*]FO: lasts and sticky posts on hp

YanLieb · Aug 4, 2023 · ce305ea · ce305ea
1 parent 08e8f49
commit ce305ea
Show file tree

Hide file tree

Showing 6 changed files with 87 additions and 27 deletions.
diff --git a/js/classes/Medias.js → js/classes/Media.js b/js/classes/Medias.js → js/classes/Media.js
@@ -1,4 +1,4 @@
-export default class Medias {
+export default class Media {
     constructor() {
         this.baseURL = 'https://maisonduloup.org/wp-json/wp/v2/media'
     }

diff --git a/js/classes/Post.js b/js/classes/Post.js
@@ -0,0 +1,11 @@
+export default class Post {
+    constructor() {
+        this.baseURL = 'https://maisonduloup.org/wp-json/wp/v2/posts';
+    }
+
+    async fetchPosts() {
+        const response = await fetch(`${this.baseURL}`);
+        const posts = await response.json();
+        return Boolean(posts) ? posts : new Error('Posts not found');
+    }
+}
diff --git a/js/controllers/PageController.js b/js/controllers/PageController.js
@@ -1,8 +1,10 @@
 import Page from '../classes/Page.js';
+import PostController from './PostController.js';
 
 export default class PageController {
     constructor() {
         this.pages = new Page();
+        this.posts = new PostController();
         this.homeHTMLElement = this.createHomeHTMLElement();
     }
 
@@ -12,7 +14,7 @@ export default class PageController {
         return document.querySelector('body').appendChild(homeHTMLElement);
     }
 
-    async getHomePageContent() {
+    async getHomepageContent() {
         const pages = await this.pages.fetchPageContent();
 
         // identify homepage
@@ -28,5 +30,7 @@ export default class PageController {
                     this.homeHTMLElement.appendChild(homeSectionElement);
                 }
             })
+
+        this.posts.getHomepagePosts();
     }
 }
diff --git a/js/controllers/PostController.js b/js/controllers/PostController.js
@@ -0,0 +1,55 @@
+import Post from "../classes/Post.js";
+
+export default class PostController {
+    constructor() {
+        this.posts = new Post();
+    }
+
+    async getHomepagePosts() {
+        const posts = await this.posts.fetchPosts();
+        const homepagePostsElement = document.createElement('div');
+        homepagePostsElement.setAttribute('id', 'home-posts');
+        document.querySelector('#home').appendChild(homepagePostsElement);
+
+        const homepagePosts = [];
+        posts.forEach((post, i) => {
+            if (post.sticky == true || i <= 2) homepagePosts.push(post);
+        })
+
+        homepagePosts.forEach(post => {
+            let homepagePost = document.createElement("div");
+            homepagePost.setAttribute('id', `post-${post.slug}`);
+            homepagePost.classList.add('home-post');
+
+            async function getThumbnailImage() {
+                let mediaURL = `https://maisonduloup.org/wp-json/wp/v2/media/${post.featured_media}`;
+                let response = await fetch(mediaURL);
+                let thumbnailImage = await response.json();
+
+                let postThumbnail = document.createElement('img');
+                postThumbnail.classList.add('post-thumbnail');
+                postThumbnail.setAttribute('src', thumbnailImage.guid.rendered);
+                homepagePost.appendChild(postThumbnail);
+            }
+
+            if (post.featured_media !== 0) {
+                getThumbnailImage();
+            }
+
+            if (post.title.rendered !== "") {
+                let postTitle = document.createElement('h2');
+                postTitle.innerHTML = post.title.rendered;
+                homepagePost.appendChild(postTitle);
+            }
+            if (post.excerpt.rendered !== "") {
+                let postExcerpt = document.createElement('p');
+                postExcerpt.innerHTML = post.excerpt.rendered;
+                homepagePost.appendChild(postExcerpt);
+            }
+
+
+
+            homepagePostsElement.append(homepagePost);
+        })
+    }
+}
diff --git a/js/controllers/SiteController.js b/js/controllers/SiteController.js
@@ -1,22 +1,29 @@
 import Site from '../classes/Site.js';
-import Medias from '../classes/Medias.js';
 
 export default class SiteController {
     constructor() {
         this.site = new Site();
-        this.medias = new Medias();
     }
 
     async getSite() {
         const site = await this.site.fetchSite();
-        console.log(site.name);
-        console.log(site.description);
-        console.log(site.home);
-        console.log(site.site_icon_url);
-
         const header = document.querySelector('header');
         const head = document.querySelector('head');
 
+        async function getLogo() {
+            const response = await fetch(`https://maisonduloup.org/wp-json/wp/v2/media/${site.site_logo}`);
+            const logo = await response.json();
+            const header = document.querySelector('header');
+            const headerLogo = document.createElement('img');
+            headerLogo.setAttribute('id', 'site_logo')
+            headerLogo.setAttribute('src', logo.guid.rendered);
+            headerLogo.setAttribute('alt', logo.alt_text);
+            header.appendChild(headerLogo);
+        }
+        if (site.site_logo !== 0) {
+            getLogo();
+        }
+
         const siteName = document.createElement('h1');
         const siteNameLink = document.createElement('a');
         siteName.setAttribute('id', 'site_name');
@@ -36,20 +43,4 @@ export default class SiteController {
         siteIcon.setAttribute('href', site.site_icon_url);
         head.appendChild(siteIcon);
     }
-
-    async getLogo() {
-        const medias = await this.medias.fetchMedias();
-        const site = await this.site.fetchSite();
-        let logo = '';
-        medias.forEach(media => {
-            if (media.id == site.site_logo) logo = media;
-        })
-
-        const header = document.querySelector('header');
-        const headerLogo = document.createElement('img');
-        headerLogo.setAttribute('id', 'site_logo')
-        headerLogo.setAttribute('src', logo.guid.rendered);
-        headerLogo.setAttribute('alt', logo.alt_text);
-        header.appendChild(headerLogo);
-    }
 }
diff --git a/js/index.js b/js/index.js
@@ -6,6 +6,5 @@ const site = new SiteController();
 const menu = new MenuController();
 const pageContent = new PageController();
 site.getSite();
-site.getLogo();
 menu.getMenu();
-pageContent.getHomePageContent();
+pageContent.getHomepageContent();