fetched homepage & menu

YanLieb · Jul 16, 2023 · 72eb0ff · 72eb0ff
commit 72eb0ff
Show file tree

Hide file tree

Showing 10 changed files with 142 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.vscode/**
diff --git a/index.html b/index.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="fr">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <script src="js/index.js" type="module" defer></script>
+    <title>Maison du loup</title>
+</head>
+
+<body>
+
+</body>
+
+</html>
diff --git a/js/classes/Menu.js b/js/classes/Menu.js
@@ -0,0 +1,16 @@
+export default class Menu {
+    constructor() {
+        this.baseURL = 'https://maisonduloup.org/wp-json/wp/v2/menu/';
+    }
+    async fetchMenu() {
+        try {
+            const response = await fetch(`${this.baseURL}`);
+            const data = await response.json();
+
+            return data.length > 0 ? data : new Error;
+        } catch (error) {
+            console.error('Error:', error);
+        }
+    }
+
+}
diff --git a/js/classes/Page.js b/js/classes/Page.js
@@ -0,0 +1,16 @@
+export default class Page {
+    constructor() {
+        this.baseURL = 'https://maisonduloup.org/wp-json/wp/v2/pages';
+    }
+
+    async fetchPageContent() {
+        const response = await fetch(`${this.baseURL}`);
+        const pages = await response.json();
+
+        if (pages.length > 0) {
+            return pages;
+        } else {
+            throw new Error('Page not found');
+        }
+    }
+}
diff --git a/js/controllers/MenuController.js b/js/controllers/MenuController.js
@@ -0,0 +1,25 @@
+import Menu from "../classes/Menu.js";
+
+export default class MenuController {
+    constructor() {
+        this.menu = new Menu();
+        this.menuHTMLElement = this.createMenuHTMLElement();
+    }
+
+    createMenuHTMLElement() {
+        const menuHTMLElement = document.createElement('menu');
+        menuHTMLElement.setAttribute('id', 'menu');
+        return document.querySelector('body').appendChild(menuHTMLElement);
+    }
+
+    async getMenu() {
+        const menuElements = await this.menu.fetchMenu();
+        menuElements.forEach(menuElement => {
+            const menuListHTMLElement = document.createElement('li');
+            menuListHTMLElement.classList.add('menu-item');
+            menuListHTMLElement.innerHTML = `<a href="${menuElement.url}/?p=${menuElement.object_id}">${menuElement.title}</a>`;
+
+            this.menuHTMLElement.appendChild(menuListHTMLElement);
+        })
+    }
+}
diff --git a/js/controllers/PageController.js b/js/controllers/PageController.js
@@ -0,0 +1,32 @@
+import Page from '../classes/Page.js';
+
+export default class PageController {
+    constructor() {
+        this.pages = new Page();
+        this.homeHTMLElement = this.createHomeHTMLElement();
+    }
+
+    createHomeHTMLElement() {
+        const homeHTMLElement = document.createElement('section');
+        homeHTMLElement.setAttribute('id', 'home');
+        return document.querySelector('body').appendChild(homeHTMLElement);
+    }
+
+    async getHomePageContent() {
+        const pages = await this.pages.fetchPageContent();
+
+        // identify homepage
+        const homepage = pages.find(page => page.slug === "home");
+
+        // sort and set content sections from pages children of home
+        pages.sort((a, b) => a.menu_order - b.menu_order)
+            .forEach(page => {
+                if (page.parent === homepage.id) {
+                    const homeSectionElement = document.createElement("div");
+                    homeSectionElement.setAttribute('id', `home-${page.slug}`);
+                    homeSectionElement.innerHTML = page.content.rendered;
+                    this.homeHTMLElement.appendChild(homeSectionElement);
+                }
+            })
+    }
+}
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,7 @@
+import MenuController from './controllers/MenuController.js';
+import PageController from './controllers/PageController.js';
+
+const menu = new MenuController();
+menu.getMenu();
+const pageContent = new PageController();
+pageContent.getHomePageContent();
diff --git a/maisonduloup/functions.php b/maisonduloup/functions.php
@@ -0,0 +1,21 @@
+<?php
+
+// Ajouter la prise en charge des images mises en avant
+add_theme_support('post-thumbnails');
+
+// Ajouter automatiquement le titre du site dans l'en-tête du site
+add_theme_support('title-tag');
+
+// create custom function to return nav menu
+function custom_wp_menu() {
+    // Replace your menu name, slug or ID carefully
+    return wp_get_nav_menu_items('Main Menu');
+}
+
+// create new endpoint route
+add_action( 'rest_api_init', function () {
+    register_rest_route( 'wp/v2', 'menu', array(
+        'methods' => 'GET',
+        'callback' => 'custom_wp_menu',
+    ) );
+} );
diff --git a/maisonduloup/index.php b/maisonduloup/index.php
diff --git a/maisonduloup/style.css b/maisonduloup/style.css
@@ -0,0 +1,9 @@
+/*
+Theme Name: Maison du Loup Theme
+Theme URI: https://maisonduloup.org
+Author: Yannick LIEBNAU
+Author URI: https://yannickliebnau.com
+Description: Theme for Maison du Loup
+Requires at least: WordPress 5.0
+Version: 1.0
+*/