mobifer/journal.html at main · MobiFer/mobifer · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<link rel="stylesheet" href="/newstyles.css">

	<link rel="icon" href="/assets/favicon.png" type="image/x-icon">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap" rel="stylesheet">
    <meta property="og:title" content="PériscoFer – Le Journal de MobiFer" />
	<meta property="og:description" content="PériscoFer – Le Journal de MobiFer est un journal visant à donner la voix à la communauté MobiFer pour partager l’actualité ferroviaire francilienne ou des expériences personnelles." />
    <meta property="og:image" content="https://mobifer.github.io/assets/periscofer.png" />
    <title>PériscoFer – Le Journal de MobiFer</title>
    <script>
        async function loadArticles() {
            try {
                const response = await fetch('data/articles.json');
                const data = await response.json();
                // Reverse data.articles to display most recent articles first
                data.articles.reverse();
                displayArticles(data.articles);
            } catch (error) {
                console.error('Erreur de chargement des articles :', error);
            }
        }

        function displayArticles(articles) {
            const container = document.querySelector('.published-articles');
            container.innerHTML = '<h2>Articles publiés</h2>';

            articles.forEach(article => {
                const articleElement = document.createElement('div');
                articleElement.classList.add('article');

                articleElement.innerHTML = `
                    <h1 id="${article.id}">${article.title}</h1>
                    <span style="text-align: center;">
                        <img src="${article.titleImage}" alt="${article.titleImageAlt}" title="${article.titleImageAlt}" class="article-img self-center">
                        <p class="license"> ${article.titleImageCredit.replace('(c)', '©')}</p>
                    </span>
                    <p class="author">Écrit par&nbsp;: ${article.author}</p>
                    <p class="date">Publié le&nbsp;: ${article.date}</p>
                    ${article.lastMod ? `<p class="date">Dernière modification le&nbsp;: ${article.lastMod}</p>` : ''}
                    ${article.paragraphs.map(p => `
                        <h3>${p.title}</h3>
                        <p class="justified">${p.content}</p>
                        ${p.image ? `<img src="${p.image}" alt="Illustration du paragraphe" class="article-img">` : ''}
                        ${p.imageDesc || p.imageCredit ? `<p class="license">${p.imageDesc}. ${p.imageCredit.replace('(c)', '©')}</p>` : ''}
                    `).join('')}
                    ${article.sources ? `<p class="sources">Sources&nbsp;:${article.sources}</p>` : ''}
                    <hr>
                `;

                container.appendChild(articleElement);
            });
        }

        window.onload = loadArticles;
    </script>
</head>
<body>
    <a href="/" class="header"><h1>MobiFer</h1></a>
    <div class="box image-center" id="Lignes" style="max-width: 1200px !important;">
        <div class="published-articles">
            <h2>Articles publiés</h2>
        </div>
    </div>
    <div id="footer-container"></div>
	<script src="/addons/footer.js"></script>
</body>
</html>