admin

A minimal NextJS app consist of the following 2 files :

my-next-app/
├── package.json
├── pages/
│   └── index.js

Here is a typical package.json file :

{
  "name": "my-next-app",
  "version": "1.0.0",
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start"
  },
  "dependencies": {
    "next": "latest",
    "react": "latest",
    "react-dom": "latest"
  }
}

It can be created manually or with npm init -y and then edited.

Here is a typical index.js file :

export default function Home() {
  return <h1>Hello from Next.js on Plesk!</h1>;
}

To install the NextJS app in a Plesk server in a sub-domain we run the following commands in the Plesk terminal :

cd sub-domain.ki-leierbud.lu/my-next-app
npm install
npm run build

A lot of files and folders is created in the /my-next-app folder.

Development of complex NextJS apps

The AI tool lovable.dev is a great development assistent for creating powerful NextJS apps. Here is a list of a few wordpress articles which I edited to help coders to use this tool :

• Development of the React/NextJS KI-Léierbud embryo
• Lovable Applications

I created the following lovable.dev applications which should be compiled and hosted in the KI-Léierbud Plesk Server :

ki-leierbud-navigation

Link : https://ki-leierbud-navigation.lovable.app/

This app is used to access wordpress posts related to navigation (TOCs, …) in the KI-Léierbud portal with REST API.

The ID of a navigation wordpress post is appended with ?p=ID to the URL of the app.

Example : https://ki-leierbud-navigation.lovable.app/?p=12

ki-leierbud-knowledge

Link : https://ki-leierbud-knowledge.lovable.app/

This app is used to access wordpress posts related to knowledge in the KI-Léierbud portal with REST API.

The ID of the first wordpress post related to knowledge in a specific category is appended with ?p=ID to the URL of the app. Surfing through posts in the same category can de done by swiping or with forward and backward buttons. Language switching can be done with a language selector in the header of the webpage. Only the languages where a translation is available are shown in the language list.

When a link is clicked to another post in the portal with the current language settings ?lang=xx and the related post is not available in that language, the post with the next language in the priority list is fetched.

Examples :

• https://ki-leierbud-navigation.lovable.app/?p=12 (english post is fetched, all 5 languages are available in the post header)
• https://ki-leierbud-navigation.lovable.app/?p=12&lang=lb (luxembourgish post is fetched, all 5 languages are available in the post header)
• https://ki-leierbud-navigation.lovable.app/?p=14 (english post is fetched, 4 languages are available in the post header)
• https://ki-leierbud-navigation.lovable.app/?p=16 (english post is fetched, 3 languages are available in the post header)
• https://ki-leierbud-navigation.lovable.app/?p=18 (english post is fetched, 2 languages are available in the post header)
• https://ki-leierbud-navigation.lovable.app/?p=18&lang=lb (english post is fetched because luxembourgish is not available, 2 languages are available in the post header)

To do :

• add management to show author in the footer
• define design with a palette of background colors
• check the correct navigation
• integrate the app into the subdomain knowledge.ki-leierbud.lu

ki-leierbud-quiz

Link : https://ki-leierbud-quiz.lovable.app/

This app is used to access wordpress posts related to quizzes in the KI-Léierbud portal with REST API.

The ID of the first wordpress post related to a specific quiz in a specific category is appended with ?p=ID to the URL of the app. Surfing through a quiz (posts in the same category) can de done by swiping or with forward and backward buttons. Language switching works similar as in the knowledge app.

A selection list with multiple answers is shown in the header of the quiz-page. The image or page number of a quiz is displayed in superposition on each page, the selected answer to a quiz-question is shown in superposition at the bottom of the page. The button to submit the quiz is only enabled if all the questions have been answered. After the submission a evaluation page with the results is returned to the user.

Examples of Image Style Quizzes :

• https://ki-leierbud-quiz.lovable.app/?p=410 (easy quiz with 13 images, to test navigation)
• https://ki-leierbud-quiz.lovable.app/?p=212 (moderate quiz with 1 image, to quickly check results page)
• https://ki-leierbud-quiz.lovable.app/?p=326 (difficult quiz with 5 images, to quickly check all features including language switching)

To do :

• select the final images
• define design with a palette of background colors
• check the correct navigation
• integrate the app into the subdomain image-quiz.ki-leierbud.lu

ki-leierbud-polling

Links :

• https://image-emotions-poll.lovable.app/
• https://video-emotions-poll.lovable.app/

This example app is used to access wordpress posts related to pollings about emotions in the quiz section of the KI-Léierbud portal with REST API.

The ID of the first wordpress post related to a specific polling in a specific category is appended with ?p=ID to the URL of the app. Surfing through a polling (posts in the same category) can de done by swiping or with forward and backward buttons. Language switching works similar as in the knowledge app.

A selection list with multiple emotions is shown in the header of the quiz-page. The image or page number of a polling is displayed in superposition on each page, the selected answer to a polling-question is shown in superposition at the bottom of the page. The button to submit the polling is only enabled if all the questions have been answered.

The emotions selected by a user are stored inside a specific database created in the Plesk server. After the submission an evaluation page with the results is returned to the user showing a comparison with emotions selected by other users.

Examples of pollings :

• https://image-emotions-poll.lovable.app/
• https://video-emotions-poll.lovable.app/

To do :

• select the final images and videos
• select the final emotions
• define design with a palette of background colors
• check the correct navigation
• integrate the app into the subdomains image-polling.ki-leierbud.lu and video-polling.ki-leierbud.lu.

Me : prière de générer un code php qui exécute les fonctions suivantes : 1. afficher le contenu téléchargé par REST API d’un article WordPress avec un ID spécifique en mode “Mobile First” 2. la page web à afficher comprend une barre fixe en haut (header), une barre fixe en bas (footer) et le contenu (main) au milieu, avec une largeur adaptée à l’écran d’un smartphone. 3. le header affiche le titre de l’article et un sélecteur déroulant de langue (en, fr, de, pt, lb) 4. le footer affiche quatre boutons sous forme d’icônes, de gauche à droite : une flèche “backward” vers le post avec le premier tag de l’article, un bouton HOME vers la page d’accueil (index.html), un bouton TOC vers la page index-toc.html, une flèche “forward” vers le post avec le deuxième tag de l’article. 5. les couleurs de fond des trois éléments header, footer et contenu sont spécifiées dans un fichier JSON indiqué dans le troisième tag de l’article

---

ChatGPT-4o : Voici un exemple complet de code PHP qui réalise ce que vous demandez, avec des appels à l’API REST de WordPress, une structure Mobile First et une lecture des couleurs depuis un fichier JSON. Le code est commenté pour plus de clarté.

<?php
// Récupérer l'ID de l'article depuis l'URL (ex: article.php?id=123)
$article_id = isset($_GET['id']) ? intval($_GET['id']) : 0;

if ($article_id === 0) {
    echo "Article ID manquant.";
    exit;
}

// Charger l'article via REST API de WordPress
$wp_api_url = "https://votre-site.com/wp-json/wp/v2/posts/$article_id";
$response = file_get_contents($wp_api_url);
if (!$response) {
    echo "Impossible de récupérer l'article.";
    exit;
}

$post = json_decode($response, true);
$title = $post['title']['rendered'];
$content = $post['content']['rendered'];
$tags = $post['tags'];

// Charger les couleurs depuis le fichier JSON (indiqué dans le 3e tag)
$color_json = null;
if (count($tags) >= 3) {
    $tag_id = $tags[2];
    $tag_api = file_get_contents("https://votre-site.com/wp-json/wp/v2/tags/$tag_id");
    $tag_info = json_decode($tag_api, true);
    $json_url = trim($tag_info['description']);

    // Chargement du fichier JSON
    $colors = json_decode(file_get_contents($json_url), true);
} else {
    $colors = [
        "header" => "#333",
        "main"   => "#fff",
        "footer" => "#333"
    ];
}

// Déterminer les URLs vers les articles par tags
$prev_post_url = "#";
$next_post_url = "#";
$base_url = "https://votre-site.com";

// Fonction pour récupérer un article via tag
function get_article_url_by_tag($tag_id) {
    global $base_url;
    $api = "$base_url/wp-json/wp/v2/posts?tags=$tag_id&per_page=1";
    $response = file_get_contents($api);
    $posts = json_decode($response, true);
    if (!empty($posts)) {
        return "article.php?id=" . $posts[0]['id'];
    }
    return "#";
}

if (isset($tags[0])) {
    $prev_post_url = get_article_url_by_tag($tags[0]);
}
if (isset($tags[1])) {
    $next_post_url = get_article_url_by_tag($tags[1]);
}
?>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title><?= htmlspecialchars($title) ?></title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body, html {
            margin: 0;
            padding: 0;
            font-family: sans-serif;
        }
        header, footer {
            position: fixed;
            width: 100%;
            left: 0;
            padding: 1em;
            color: white;
            z-index: 1000;
        }
        header {
            top: 0;
            background-color: <?= $colors['header'] ?>;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        main {
            margin-top: 70px;
            margin-bottom: 70px;
            background-color: <?= $colors['main'] ?>;
            padding: 1em;
        }
        footer {
            bottom: 0;
            background-color: <?= $colors['footer'] ?>;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        .icon-btn {
            background: none;
            border: none;
            color: white;
            font-size: 24px;
        }
        select {
            font-size: 1em;
        }
    </style>
    <script>
        function changeLang(select) {
            const lang = select.value;
            const url = new URL(window.location.href);
            url.searchParams.set('lang', lang);
            window.location.href = url.toString();
        }
    </script>
</head>
<body>

<header>
    <div><?= htmlspecialchars($title) ?></div>
    <select onchange="changeLang(this)">
        <option value="en">EN</option>
        <option value="fr">FR</option>
        <option value="de">DE</option>
        <option value="pt">PT</option>
        <option value="lb">LB</option>
    </select>
</header>

<main>
    <?= $content ?>
</main>

<footer>
    <a href="<?= $prev_post_url ?>" class="icon-btn">&#8592;</a> <!-- Flèche gauche -->
    <a href="index.html" class="icon-btn">&#8962;</a> <!-- Home -->
    <a href="index-toc.html" class="icon-btn">&#9776;</a> <!-- TOC -->
    <a href="<?= $next_post_url ?>" class="icon-btn">&#8594;</a> <!-- Flèche droite -->
</footer>

</body>
</html>

🔍 Explication rapide :

• 📲 Mobile First : largeur adaptative via meta viewport, mise en page fluide.
• 🧱 Disposition fixe : header + footer en haut et en bas, contenu entre les deux.
• 🌍 Langues : sélection modifie l’URL avec le paramètre lang.
• 🎨 Thèmes dynamiques : couleurs chargées depuis un fichier JSON lié au 3e tag.
• 🔁 Navigation : boutons dynamiques vers les articles liés aux 1er et 2e tags.

---

ChatGPT-4o : Souhaitez-vous que je vous crée aussi un exemple de fichier JSON de couleurs, ou que j’adapte le tout pour être utilisé comme un plugin WordPress ?

Me : oui, Plugin WordPress

---

✅ 1. Créez un plugin : ki-laeirbud-viewer.php

Placez ce fichier dans :
wp-content/plugins/ki-laeirbud-viewer/ki-laeirbud-viewer.php

<?php
/**
 * Plugin Name: KI-Léierbud Post Viewer
 * Description: Affiche un article WordPress en mode mobile-first avec navigation, via le shortcode [ki_laeirbud_post id=123].
 * Version: 1.0
 * Author: Votre Nom
 */

add_shortcode('ki_laeirbud_post', 'ki_laeirbud_render_post');

function ki_laeirbud_render_post($atts) {
    $atts = shortcode_atts(['id' => 0], $atts);
    $post_id = intval($atts['id']);
    if ($post_id === 0) return "Article ID manquant.";

    $post = get_post($post_id);
    if (!$post) return "Article introuvable.";

    $title = get_the_title($post);
    $content = apply_filters('the_content', $post->post_content);
    $tags = wp_get_post_tags($post_id, ['fields' => 'all']);

    // Récupération des couleurs depuis le 3e tag (s'il existe)
    $colors = ['header' => '#222', 'main' => '#fff', 'footer' => '#333'];
    if (isset($tags[2])) {
        $json_url = trim($tags[2]->description);
        $json = wp_remote_get($json_url);
        if (!is_wp_error($json)) {
            $data = json_decode(wp_remote_retrieve_body($json), true);
            if (is_array($data)) {
                $colors = array_merge($colors, array_intersect_key($data, $colors));
            }
        }
    }

    // Navigation par tags
    $prev_url = '#';
    $next_url = '#';

    if (isset($tags[0])) {
        $prev = get_posts(['tag_id' => $tags[0]->term_id, 'numberposts' => 1]);
        if ($prev) $prev_url = get_permalink($prev[0]->ID);
    }

    if (isset($tags[1])) {
        $next = get_posts(['tag_id' => $tags[1]->term_id, 'numberposts' => 1]);
        if ($next) $next_url = get_permalink($next[0]->ID);
    }

    ob_start();
    ?>
    <style>
        .ki-wrapper {
            font-family: sans-serif;
            margin: 0;
            padding: 0;
        }
        .ki-header, .ki-footer {
            position: fixed;
            width: 100%;
            padding: 1em;
            color: white;
            z-index: 1000;
        }
        .ki-header {
            top: 0;
            background-color: <?= esc_attr($colors['header']) ?>;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .ki-footer {
            bottom: 0;
            background-color: <?= esc_attr($colors['footer']) ?>;
            display: flex;
            justify-content: space-around;
        }
        .ki-main {
            margin-top: 70px;
            margin-bottom: 70px;
            padding: 1em;
            background-color: <?= esc_attr($colors['main']) ?>;
        }
        .ki-icon {
            font-size: 24px;
            color: white;
            text-decoration: none;
        }
        .ki-lang-select {
            font-size: 1em;
        }
    </style>
    <div class="ki-wrapper">
        <div class="ki-header">
            <div><?= esc_html($title) ?></div>
            <select class="ki-lang-select" onchange="window.location.search='lang='+this.value;">
                <option value="en">EN</option>
                <option value="fr">FR</option>
                <option value="de">DE</option>
                <option value="pt">PT</option>
                <option value="lb">LB</option>
            </select>
        </div>
        <div class="ki-main"><?= $content ?></div>
        <div class="ki-footer">
            <a href="<?= esc_url($prev_url) ?>" class="ki-icon">&#8592;</a>
            <a href="<?= esc_url(home_url('/')) ?>" class="ki-icon">&#8962;</a>
            <a href="<?= esc_url(home_url('/index-toc.html')) ?>" class="ki-icon">&#9776;</a>
            <a href="<?= esc_url($next_url) ?>" class="ki-icon">&#8594;</a>
        </div>
    </div>
    <?php
    return ob_get_clean();
}

---

📁 2. Structure du plugin

/wp-content/plugins/
└── ki-laeirbud-viewer/
    └── ki-laeirbud-viewer.php

---

🧪 3. Utilisation dans un article ou une page WordPress

Dans n’importe quelle page ou article WordPress, ajoutez ce shortcode :

[ki_laeirbud_post id=123]

(remplacez 123 par l’ID de l’article cible)

---

🎨 4. Exemple de fichier JSON (couleurs)

Créez un fichier .json quelque part en ligne (par exemple sur votre site) :

{
  "header": "#005f73",
  "main": "#f0f0f0",
  "footer": "#0a9396"
}

Collez l’URL de ce fichier dans la description du 3e tag de votre article.

---