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
.gitignore
+3
View File
@@ -2,6 +2,7 @@
includes/config.local.php
# Fichiers personnalisables pour chaque installation
.htaccess
sitemap.xml
robots.txt
site.webmanifest
@@ -31,3 +32,5 @@ uploads/*
# Fichiers de dépendances (si nécessaire)
# vendor/
# node_modules/
img/movement_presentation.png
css/styles.css
+142 -12
View File
@@ -42,9 +42,9 @@
--primary-red: #FF4444;
--primary-green: #00AA00;
--primary-black: #ffffff;
--sidebar-bg: #1e1e1e;
--sidebar-bg: #121212;
--footer-bg: #1a1a1a;
--main-bg: #121212;
--main-bg: #1a1a1a;
--text-color: #ffffff;
--text-secondary: #b3b3b3;
--tag-bg: #2d2d2d;
@@ -157,6 +157,16 @@ img {
height: 100px;
}
/* Amélioration de la visibilité des logos en mode dark */
[data-theme="dark"] .logo img,
[data-theme="dark"] .section-logo img,
[data-theme="dark"] .footer-logo img {
filter:
drop-shadow(0 0 1px rgba(255, 255, 255, 0.8))
drop-shadow(0 0 2px rgba(255, 255, 255, 0.6))
drop-shadow(0 0 3px rgba(255, 255, 255, 0.4));
}
/* Navigation */
.sidebar-nav {
margin-bottom: 30px;
@@ -584,6 +594,18 @@ img {
align-items: start;
}
/* Quand pas de hero (HERO_TYPE = 'none') et pas de WordPress: centrer la timeline Mastodon */
.hero-mastodon-wrapper:has(.timeline-wordpress-container:only-child) .timeline-wordpress-container:not(:has(.wordpress-section)) {
grid-column: 1 / -1;
display: flex;
justify-content: center;
}
.hero-mastodon-wrapper:has(.timeline-wordpress-container:only-child) .timeline-wordpress-container:not(:has(.wordpress-section)) #mt-container {
max-width: 800px;
width: 100%;
}
/* Responsive breakpoint pour écrans entre 1025px et 1699px */
@media (max-width: 1699px) and (min-width: 1025px) {
.hero-mastodon-wrapper {
@@ -740,6 +762,112 @@ img {
opacity: 0.9;
}
/* ========================================= */
/* Styles pour la section PLAYLIST */
/* ========================================= */
.hero-playlist {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
background: linear-gradient(135deg, var(--sidebar-bg) 0%, var(--main-bg) 100%);
}
.hero-playlist-header {
padding: 15px 20px;
background: rgba(0, 0, 0, 0.3);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
align-items: center;
gap: 15px;
}
.hero-playlist-header i {
font-size: 24px;
color: var(--primary-red);
}
.hero-playlist-info h2 {
font-size: 18px;
font-weight: 600;
margin: 0 0 5px 0;
color: var(--text-primary);
}
.hero-playlist-info p {
font-size: 14px;
margin: 0;
color: var(--text-secondary);
opacity: 0.9;
}
.hero-playlist-container {
flex: 1;
position: relative;
overflow: hidden;
}
.hero-playlist-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.hero-playlist-footer {
padding: 12px 20px;
background: rgba(0, 0, 0, 0.3);
border-top: 1px solid rgba(255, 255, 255, 0.1);
display: flex;
justify-content: center;
}
.hero-playlist-link {
color: var(--primary-red);
text-decoration: none;
font-size: 14px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
border-radius: 4px;
transition: background-color 0.2s ease;
}
.hero-playlist-link:hover {
background-color: rgba(255, 255, 255, 0.1);
}
.hero-playlist-link i {
font-size: 12px;
}
/* Responsive pour les playlists */
@media (max-width: 768px) {
.hero-playlist-header {
padding: 12px 15px;
}
.hero-playlist-info h2 {
font-size: 16px;
}
.hero-playlist-info p {
font-size: 13px;
}
.hero-playlist-footer {
padding: 10px 15px;
}
}
/* Annonce du prochain live dans le hero (page d'accueil) - Split gauche/droite */
.hero-next-live {
position: absolute;
@@ -1485,11 +1613,12 @@ img {
box-shadow: var(--card-shadow);
}
.info-header {
.info-description {
margin-top: 0;
margin-bottom: 20px;
font-size: 1.25rem;
line-height: 1.4;
font-size: 1.1rem;
line-height: 1.6;
text-align: justify;
}
.info-text {
@@ -1896,13 +2025,13 @@ img {
}
.footer-social {
display: grid;
grid-template-columns: repeat(3, 1fr);
justify-items: center;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
margin-bottom: 25px;
gap: 20px;
max-width: 300px;
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
@@ -3210,11 +3339,12 @@ i.icon-mastodon,
box-shadow: var(--card-shadow);
}
.info-header {
.info-description {
margin-top: 0;
margin-bottom: 20px;
font-size: 1.25rem;
line-height: 1.4;
font-size: 1.1rem;
line-height: 1.6;
text-align: justify;
}
/* Media Queries pour grands écrans */
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>