ORGANISATION-KA-INTERNATIONALE/FEDIVERSE-OKI
3
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve index & change meta informations

Browse Source
This commit is contained in:
Cédric Famibelle-Pronzola
2025-10-17 12:28:07 +04:00
parent 8fa410cfba
commit 50d472a9a4
3 changed files with 170 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.php
+25 -164
View File
@@ -20,7 +20,7 @@ setSecurityHeaders();
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="csrf-token" content="<?php echo generateCSRFToken(); ?>">
<title>kaubuntu.re - Plateforme Multimédia</title>
<title><?php echo SITE_NAME; ?></title>
<link rel="stylesheet" href="css/styles.css?v=<?php echo filemtime('css/styles.css'); ?>">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css">
<link rel="stylesheet" href="css/mastodon-timeline.min.css?v=<?php echo filemtime('css/mastodon-timeline.min.css'); ?>">
@@ -40,23 +40,23 @@ setSecurityHeaders();
<meta name="mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<meta name="apple-mobile-web-app-title" content="kaubuntu.re">
<meta name="application-name" content="kaubuntu.re">
<meta name="apple-mobile-web-app-title" content="<?php echo SITE_NAME; ?>">
<meta name="application-name" content="<?php echo SITE_NAME; ?>">
<meta name="msapplication-TileColor" content="#FF0000">
<meta name="msapplication-config" content="browserconfig.xml">
<!-- Open Graph Meta Tags -->
<meta property="og:title" content="kaubuntu.re - Plateforme Multimédia">
<meta property="og:title" content="<?php echo SITE_NAME; ?>">
<meta property="og:description" content="Découvrez notre plateforme multimédia avec des vidéos, des shorts et des directs. Tendances, catégories et contenus exclusifs vous attendent.">
<meta property="og:image" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . '/img/logo.png'; ?>">
<meta property="og:url" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI']; ?>">
<meta property="og:type" content="website">
<meta property="og:site_name" content="kaubuntu.re">
<meta property="og:site_name" content="<?php echo SITE_NAME; ?>">
<meta property="og:locale" content="fr_FR">
<!-- Twitter Card Meta Tags -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="kaubuntu.re - Plateforme Multimédia">
<meta name="twitter:title" content="<?php echo SITE_NAME; ?>">
<meta name="twitter:description" content="Découvrez notre plateforme multimédia avec des vidéos, des shorts et des directs. Tendances, catégories et contenus exclusifs vous attendent.">
<meta name="twitter:image" content="<?php echo 'https://' . $_SERVER['HTTP_HOST'] . '/img/logo.png'; ?>">
@@ -102,159 +102,7 @@ setSecurityHeaders();
<!-- Hero and Mastodon container -->
<div class="hero-mastodon-wrapper">
<!-- Hero Banner -->
<section class="hero" aria-labelledby="live-section-title">
<h2 id="live-section-title" class="sr-only">Diffusion en direct</h2>
<?php
// Vérifier s'il y a un direct en cours
$liveStream = getLiveStream();
if ($liveStream) {
// Afficher le direct en cours
?>
<div class="live-badge">
<i class="fas fa-circle"></i> DIRECT
</div>
<div class="hero-video-container">
<iframe
src="<?php echo PEERTUBE_URL; ?>/videos/embed/<?php echo $liveStream['id']; ?>?autoplay=1&muted=1"
frameborder="0"
allowfullscreen="allowfullscreen"
allow="autoplay; fullscreen"
title="Diffusion en direct: <?php echo htmlspecialchars($liveStream['title']); ?>"
aria-describedby="live-description">
</iframe>
<div id="live-description" class="sr-only">
Lecteur vidéo pour la diffusion en direct de <?php echo htmlspecialchars($liveStream['channel']); ?>
</div>
</div>
<div class="hero-video-info">
<h2><?php echo htmlspecialchars($liveStream['title']); ?></h2>
<div class="hero-channel-info">
<?php if (strpos($liveStream['channelAvatar'], 'default-avatar.png') !== false || empty($liveStream['channelAvatar'])): ?>
<div class="channel-avatar-placeholder" role="img" aria-label="Avatar par défaut">
<i class="fas fa-user-circle" aria-hidden="true"></i>
</div>
<?php else: ?>
<img src="<?php echo $liveStream['channelAvatar']; ?>" alt="Avatar de la chaîne <?php echo htmlspecialchars($liveStream['channel']); ?>" class="channel-avatar">
<?php endif; ?>
<span class="channel-name"><?php echo htmlspecialchars($liveStream['channel']); ?></span>
</div>
</div>
<?php
} else {
// Aucun direct en cours - vérifier s'il y a une annonce configurée
$showNextLiveAnnouncement = defined('NEXT_LIVE_ENABLED') && NEXT_LIVE_ENABLED === true;
if ($showNextLiveAnnouncement) {
// Afficher l'annonce du prochain live
// Définir l'image de fond si disponible
$bgImageStyle = '';
if (!empty(NEXT_LIVE_IMAGE) && file_exists(NEXT_LIVE_IMAGE)) {
$bgImageStyle = 'background-image: url(\'' . htmlspecialchars(NEXT_LIVE_IMAGE) . '\');';
}
?>
<div class="hero-next-live" style="<?php echo $bgImageStyle; ?>">
<?php if (!empty(NEXT_LIVE_IMAGE) && file_exists(NEXT_LIVE_IMAGE)): ?>
<div class="hero-next-live-image-container">
<img src="<?php echo htmlspecialchars(NEXT_LIVE_IMAGE); ?>"
alt="<?php echo htmlspecialchars(NEXT_LIVE_TITLE); ?>"
class="hero-next-live-image">
</div>
<?php endif; ?>
<div class="hero-next-live-content">
<i class="fas fa-calendar-alt"></i>
<?php
if (!empty(NEXT_LIVE_DATE)) {
$liveDate = new DateTime(NEXT_LIVE_DATE, new DateTimeZone(DEFAULT_TIMEZONE));
$dayFormatter = new IntlDateFormatter(
'fr_FR',
IntlDateFormatter::FULL,
IntlDateFormatter::NONE,
DEFAULT_TIMEZONE,
IntlDateFormatter::GREGORIAN,
'EEEE d MMMM'
);
$formattedDay = $dayFormatter->format($liveDate);
$formattedDay = ucfirst($formattedDay);
$dynamicTitle = NEXT_LIVE_TITLE . ' - ' . $formattedDay;
} else {
$dynamicTitle = NEXT_LIVE_TITLE;
}
?>
<h2><?php echo htmlspecialchars($dynamicTitle); ?></h2>
<?php
if (!empty(NEXT_LIVE_DATE)) {
$liveHour = $liveDate->format('H\hi');
$dynamicDescription = 'Rejoignez-nous à ' . $liveHour . '. ' . NEXT_LIVE_DESCRIPTION;
} else {
$dynamicDescription = NEXT_LIVE_DESCRIPTION;
}
?>
<p><?php echo nl2br(htmlspecialchars($dynamicDescription)); ?></p>
<?php if (!empty(NEXT_LIVE_DATE)): ?>
<div class="hero-next-live-datetime">
<p class="hero-next-live-date">
<i class="fas fa-clock"></i>
<?php
$formatter = new IntlDateFormatter(
'fr_FR',
IntlDateFormatter::FULL,
IntlDateFormatter::SHORT,
DEFAULT_TIMEZONE
);
echo $formatter->format($liveDate);
$offset = $liveDate->format('P');
echo ' <span class="utc-offset">(UTC' . $offset . ')</span>';
?>
</p>
<!-- Autres fuseaux horaires -->
<div class="hero-next-live-timezones">
<?php
// Ordre croissant : du plus en retard au plus en avance
$timezones = [
'Ma\'ohi Nui' => 'Pacific/Tahiti',
'Martinique / Guadeloupe' => 'America/Martinique',
'Guyane' => 'America/Cayenne',
'France' => 'Europe/Paris',
'Kanaky' => 'Pacific/Noumea'
];
foreach($timezones as $name => $timezone):
$liveDateLocal = clone $liveDate;
$liveDateLocal->setTimezone(new DateTimeZone($timezone));
$dayDiff = $liveDateLocal->format('j') - $liveDate->format('j');
$dayIndicator = '';
if ($dayDiff > 0) {
$dayIndicator = ' <span class="day-shift">+1j</span>';
} elseif ($dayDiff < 0) {
$dayIndicator = ' <span class="day-shift">-1j</span>';
}
?>
<span class="hero-timezone-item">
<strong><?php echo $name; ?> :</strong> <?php echo $liveDateLocal->format('H\hi'); ?><?php echo $dayIndicator; ?>
</span>
<?php endforeach; ?>
</div>
</div>
<?php endif; ?>
</div>
</div>
<?php
} else {
?>
<div class="hero-no-live">
<i class="fas fa-tv"></i>
<h2>Aucun direct en cours</h2>
<p>Revenez plus tard pour découvrir nos prochaines diffusions en direct.</p>
</div>
<?php
}
}
?>
</section>
<?php include 'includes/hero-section.php'; ?>
<!-- Container pour Mastodon et WordPress côte à côte -->
<div class="timeline-wordpress-container">
@@ -355,7 +203,7 @@ setSecurityHeaders();
<section class="video-section" aria-labelledby="shorts-heading">
<div class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
<img src="img/logo.png" alt="Logo <?php echo SITE_NAME; ?>" aria-hidden="true">
</div>
<h2 id="shorts-heading" class="section-title">Shorts</h2>
</div>
@@ -411,7 +259,7 @@ setSecurityHeaders();
<section class="video-section" aria-labelledby="recent-videos-heading">
<header class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
<img src="img/logo.png" alt="Logo <?php echo SITE_NAME; ?>" aria-hidden="true">
</div>
<h2 id="recent-videos-heading" class="section-title">Dernières vidéos</h2>
</header>
@@ -450,7 +298,9 @@ setSecurityHeaders();
<span class="channel-name"><?php echo $video['channel']; ?></span>
</div>
<div class="video-metadata">
<?php if (defined('SHOW_VIDEO_VIEWS') && SHOW_VIDEO_VIEWS): ?>
<span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
<?php endif; ?>
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
</div>
</div>
@@ -471,7 +321,7 @@ setSecurityHeaders();
<section class="video-section" aria-labelledby="trending-videos-heading">
<header class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
<img src="img/logo.png" alt="Logo <?php echo SITE_NAME; ?>" aria-hidden="true">
</div>
<h2 id="trending-videos-heading" class="section-title">Tendances</h2>
</header>
@@ -508,7 +358,9 @@ setSecurityHeaders();
<span class="channel-name"><?php echo $video['channel']; ?></span>
</div>
<div class="video-metadata">
<?php if (defined('SHOW_VIDEO_VIEWS') && SHOW_VIDEO_VIEWS): ?>
<span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
<?php endif; ?>
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
</div>
</div>
@@ -538,7 +390,7 @@ setSecurityHeaders();
<section class="video-section" data-category-id="<?php echo $category['id']; ?>" aria-labelledby="category-heading-<?php echo $category['id']; ?>">
<header class="section-header">
<div class="section-logo">
<img src="img/logo.png" alt="Logo kaubuntu.re" aria-hidden="true">
<img src="img/logo.png" alt="Logo <?php echo SITE_NAME; ?>" aria-hidden="true">
</div>
<h2 id="category-heading-<?php echo $category['id']; ?>" class="section-title"><?php echo htmlspecialchars($category['name']); ?></h2>
</header>
@@ -566,7 +418,9 @@ setSecurityHeaders();
<span class="channel-name"><?php echo $video['channel']; ?></span>
</div>
<div class="video-metadata">
<?php if (defined('SHOW_VIDEO_VIEWS') && SHOW_VIDEO_VIEWS): ?>
<span class="video-views"><i class="fas fa-eye"></i> <?php echo formatViewCount($video['views']); ?> vues</span>
<?php endif; ?>
<span class="video-date"><i class="far fa-calendar-alt"></i> <?php echo formatDate($video['date']); ?></span>
</div>
</div>
@@ -590,7 +444,13 @@ setSecurityHeaders();
<?php if (defined('MOVEMENT_DESCRIPTION') && !empty(MOVEMENT_DESCRIPTION)): ?>
<!-- Section Informations -->
<article class="info-section">
<h2 class="info-header"><?php echo MOVEMENT_DESCRIPTION; ?></h2>
<h2 class="section-title centered"><?php echo defined('MOVEMENT_TITLE') && !empty(MOVEMENT_TITLE) ? MOVEMENT_TITLE : 'À propos'; ?></h2>
<p class="info-description"><?php echo MOVEMENT_DESCRIPTION; ?></p>
<?php if (defined('MOVEMENT_DESCRIPTION_2') && !empty(MOVEMENT_DESCRIPTION_2)): ?>
<p class="info-description"><?php echo MOVEMENT_DESCRIPTION_2; ?></p>
<?php endif; ?>
<?php if (defined('MOVEMENT_IMAGE') && !empty(MOVEMENT_IMAGE)): ?>
<figure class="movement-figure">
@@ -627,6 +487,7 @@ setSecurityHeaders();
<?php include 'includes/footer.php'; ?>
<?php include 'includes/mobile-menu.php'; ?>
<script src="js/main.js"></script>
<script src="js/pleroma-adapter.js"></script>
<script src="js/mastodon-timeline.umd.js"></script>
<script src="js/mastodon-config.php"></script>