Compare commits

...

20 Commits

Author SHA1 Message Date
Nonimart
c0d422cfa1 REFACTORING Nettoyage et réorganisation du code dans single-revues.php
All checks were successful
continuous-integration/drone/push Build is passing
2025-06-12 08:55:23 +02:00
Nonimart
fbcf74643d FEAT Ajout de nouveaux fichiers inclus dans functions.php 2025-06-12 08:55:14 +02:00
Nonimart
93d3fd3b8c REFACTORING Renaming file 2025-06-12 08:55:08 +02:00
Nonimart
f94abb14b7 FEAT Ajout de la fonction renderRevueAuthorsGrid pour afficher les auteurs d'une revue 2025-06-12 08:54:50 +02:00
Nonimart
e974ed0396 FEAT Ajout de nouveaux imports CSS pour les composants et les pages 2025-06-12 08:54:41 +02:00
Nonimart
0ed61f68ac UPLOAD file 2025-06-12 08:54:20 +02:00
Nonimart
7671fc7a7e FEAT Introducing component 2025-06-12 08:54:08 +02:00
Nonimart
368111e1b9 FEAT Introducing component 2025-06-12 08:54:00 +02:00
Nonimart
8895ca48a0 FEAT Introducing component 2025-06-12 08:53:54 +02:00
Nonimart
ea89cd61cc FEAT Introducing getRevueAuthors function 2025-06-12 08:53:37 +02:00
Nonimart
141a2aa985 FEAT Introducing page 2025-06-12 08:53:07 +02:00
Nonimart
82637f46ac FEAT Developping the build-revue-authors list 2025-06-12 08:52:37 +02:00
Nonimart
c6a223204c FEAT Introducing component 2025-06-12 08:51:23 +02:00
Nonimart
5965b4356e FEATURES Enhancing hydratation behaviour 2025-06-12 08:51:06 +02:00
Nonimart
b3a905058b REFACTOR Moving singles style to shared styles file 2025-06-12 08:49:46 +02:00
Nonimart
3c3fa34216 FEATURE introducing component style 2025-06-12 08:47:20 +02:00
Nonimart
f374380c1d FEATURE introducing component style 2025-06-12 08:47:09 +02:00
Nonimart
785eb5f0d2 REFACTOR and first call to api 2025-06-10 15:54:15 +02:00
Nonimart
306e1f898e FEATURE ehnahnving the feature 2025-06-10 15:54:04 +02:00
Nonimart
36914355b4 FEATURE passing the post id in the page to pass to js 2025-06-10 15:53:51 +02:00
18 changed files with 478 additions and 203 deletions

View File

@ -8,3 +8,5 @@ require_once(__DIR__ . '/includes/revue.php');
require_once(__DIR__ . '/includes/auteurs.php');
require_once(__DIR__ . '/includes/article.php');
require_once(__DIR__ . '/includes/api.php');
require_once(__DIR__ . '/includes/renderPostsDatas.php');
require_once(__DIR__ . '/includes/utilities.php');

View File

@ -21,65 +21,19 @@ add_action('rest_api_init', function () {
function build_revue_authors($request)
{
$revueID = esc_html($request->get_param('revue-id'));
write_log($request);
// $previousActivePage = esc_html($request->get_param('active-page')) ?? 1;
// $activeTermID = esc_html($request->get_param('active-term-id'));
// $postsPerPage = esc_html($request->get_param('posts-per-page')) ?? 12;
// $activePage = is_numeric($previousActivePage) ? $previousActivePage + 1 : 1;
// $taxQuery = $activeTermID && is_numeric($activeTermID) ? array(
// array(
// 'taxonomy' => 'news_type',
// 'field' => 'term_id',
// 'terms' => $activeTermID
// )
// ) : null;
// do_action('wpml_switch_language', $currentLanguage);
// $args = array(
// "status" => "publish",
// "post_type" => "post",
// "posts_per_page" => $postsPerPage,
// "paged" => $activePage,
// "tax_query" => $taxQuery
// );
// $newsPostsDatas = new WP_Query($args);
// ob_start();
// foreach ($newsPostsDatas->posts as $key => $post) {
// $post_thumbnail = get_the_post_thumbnail($post->ID, 'full', array('class' => 'card-news__thumbnail card-post__thumbnail')) ?? null;
// $news_type = get_the_terms($post->ID, "news_type") ?? null;
// $post_date = get_the_date('j.m.Y', $post->ID) ?? null;
// get_template_part(
// 'template-components/cards/card-news',
// null,
// array(
// 'card_variant' => 'activite',
// 'post_ID' => $post->ID,
// 'post_title' => get_the_title($post->ID),
// 'post_thumbnail' => $post_thumbnail,
// 'news_type' => $news_type,
// 'post_date' => $post_date,
// )
// );
// }
// $html_template = ob_get_clean();
// $response_data = array(
// 'html_template' => $html_template,
// 'total_posts_found' => $newsPostsDatas->found_posts,
// 'active_page' => $activePage,
// 'max_num_pages' => $newsPostsDatas->max_num_pages,
// );
ob_start();
get_template_part('template-parts/authors/revue-authors-list', null, array(
'revueID' => $revueID,
));
$html_template = ob_get_clean();
$response_data = array(
'html_template' => $html_template,
'message' => 'Hello World',
);
$response = new WP_REST_Response($response_data);
$response->set_status(200);

View File

@ -0,0 +1,47 @@
<?php
function renderRevueAuthorsGrid($revueID)
{
$revueRelatedArticles = new WP_Query(array(
'post_type' => 'articles',
'posts_per_page' => 3,
'orderby' => 'date',
'order' => 'DESC',
'post_status' => 'publish',
'meta_query' => array(
array(
'key' => 'related_revue',
'value' => $revueID,
'compare' => '=',
),
),
));
$authors = array();
foreach ($revueRelatedArticles->posts as $article) {
$currentArticleAuthors = get_field('authors', $article->ID);
if (empty($currentArticleAuthors) || !is_array($currentArticleAuthors)) continue;
foreach ($currentArticleAuthors as $author) {
$authors[] = $author;
}
}
$authors = array_unique($authors);
ob_start();
foreach ($authors as $key => $author) {
get_template_part(
'template-parts/authors/card-author',
null,
array(
'ID' => $author->ID,
)
);
}
$grid_template = ob_get_clean();
return $grid_template;
}

View File

@ -0,0 +1,49 @@
<?php
function getRevueAuthors($revueID)
{
$revueRelatedArticles = new WP_Query(array(
'post_type' => 'articles',
'posts_per_page' => -1,
'post_status' => 'publish',
'meta_query' => array(
array(
'key' => 'related_revue',
'value' => $revueID,
'compare' => '=',
),
),
));
$authors = array();
foreach ($revueRelatedArticles->posts as $article) {
$currentArticleAuthors = get_field('authors', $article->ID);
if (empty($currentArticleAuthors) || !is_array($currentArticleAuthors)) continue;
foreach ($currentArticleAuthors as $authorID) {
$authors[] = $authorID;
}
}
return array_unique($authors);
s;
}
function count_user_articles($userID, $postType)
{
$args = array(
'post_type' => $postType,
'meta_query' => array(
array(
'key' => 'authors',
'value' => '"' . $userID . '"',
'compare' => 'LIKE',
),
),
);
$query = new WP_Query($args);
return $query->found_posts;
}

View File

@ -21,26 +21,18 @@
@import './components/post-card--article.css';
@import './components/post-card.css';
@import './components/etiquettes-grid.css';
@import './components/author-card.css';
@import './components/revue-authors-list.css';
@import './components/article-content.css';
/* ########### PAGES ############ */
@import './pages/singles.css';
@import './pages/single-revues.css';
@import './pages/archive-revues.css';
@import './pages/archive-articles.css';
/* ########### LAYOUT ############ */
@import './layout/nav.css';
/* @import './layout/nav.css';
@import './layout/footer.css';
@import './layout/section.css';
@import './layout/gutenberg.css'; */
/* ########### PAGES ############ */
/* @import './pages/archive-dbmob.css'; */
/* ########### BLOCKS ############ */
/* @import './blocks/front-header.css';
@import './blocks/chapter-section.css'; */
/* @import './blocks/dernieres-dynamiques.css'; */
@import './blocks/explore-tags.css';
/* Home */
/* @import '../../template-blocks/home/home-header/home-header.css'; */

View File

@ -0,0 +1,2 @@
.article-content {
}

View File

@ -0,0 +1,49 @@
.author-card {
@apply grid w-full border border-primary p-6 mb-12 items-center;
grid-template-columns: min-content 1fr;
gap: 1rem;
transition: all 0.3s ease-in-out;
&:hover {
@apply translate-y-[-4px];
}
&__profile-picture {
@apply w-32 h-32 object-cover p-2 border border-primary;
img {
@apply w-full h-full object-cover;
filter: grayscale(100%);
}
&-placeholder {
@apply w-full h-full bg-carhop-green-100 relative;
&:after {
@apply content-[''] block w-6 h-6 bg-carhop-green-700 rounded-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
}
}
}
&__infos {
@apply w-full;
.author-card__name {
@apply text-3xl uppercase font-medium mb-2 tracking-normal;
}
.author-card__articles-amount {
@apply text-primary font-normal flex items-center gap-2 mt-4;
&::before {
content: '';
@apply block w-6 h-6 bg-no-repeat bg-center;
background-image: url('../resources/img/icons/icon-activites.svg');
background-size: contain;
}
}
}
&__description {
@apply col-span-2;
}
}

View File

@ -0,0 +1,5 @@
.revue-authors-list {
&__title {
@apply text-4xl font-medium mb-4 uppercase;
}
}

View File

@ -1,108 +0,0 @@
.page--single-revue {
.single-revue__header {
@apply bg-purple-50 text-primary py-32;
h1 {
@apply uppercase font-medium text-7xl;
line-height: 1.2;
}
&__inner {
@apply container mx-auto grid gap-24;
grid-template-columns: 1fr 4fr;
}
.thumbnail-wrapper {
@apply bg-red-200;
img {
/* max-height: 200px; */
@apply object-contain;
}
}
.revue-meta {
@apply flex gap-28 mt-12;
&__label {
@apply uppercase font-bold text-lg;
letter-spacing: 0.2em;
}
}
.revue-issue {
@apply flex items-center gap-2;
.revue-issue-number {
@apply bg-white text-carhop-green-700 px-4 py-2 font-normal h-fit;
}
}
.socials-buttons {
@apply flex gap-4;
&__button {
@apply bg-white text-carhop-green-700 px-4 py-2 font-normal w-32 rounded-full border-primary w-fit border-2 flex items-center gap-2;
img {
@apply w-8 h-8 filter-primary;
}
}
}
}
.content-wrapper {
@apply container mx-auto grid grid-cols-12 gap-12 py-12;
grid-template-columns: 1fr 4fr;
}
.sidebar {
.search-field {
input {
@apply border border-primary w-full;
@apply w-full p-4;
}
}
.tags__title {
@apply text-xl uppercase font-semibold mt-8 my-4 nunito;
}
.tags-list {
@apply flex flex-wrap gap-4;
}
.article-tag {
@apply block;
}
}
.revue-content {
@apply max-w-screen-2xl mx-auto;
.edito {
@apply border border-primary p-6 mb-12;
summary:marker {
@apply !hidden !bg-red-400;
}
&__title {
@apply text-4xl font-bold mb-4;
}
&__content {
@apply text-lg;
}
&__cta {
@apply my-4;
}
}
.table-matieres {
&__title {
@apply text-4xl font-bold mb-12;
}
.article-grid__list {
@apply grid grid-cols-1 gap-4;
}
}
}
article {
@apply py-12 my-12;
.article-title {
@apply mb-8;
}
.article-tags {
@apply mb-12;
}
}
}

View File

@ -0,0 +1,109 @@
.page--single-revue,
.page--single-articles {
.revue-header {
@apply bg-purple-50 text-primary py-32;
h1 {
@apply uppercase font-medium text-7xl;
line-height: 1.2;
}
&__inner {
@apply container mx-auto grid gap-24;
grid-template-columns: 1fr 4fr;
}
.thumbnail-wrapper {
@apply bg-red-200;
img {
/* max-height: 200px; */
@apply object-contain;
}
}
.revue-meta {
@apply flex gap-28 mt-12;
&__label {
@apply uppercase font-bold text-lg;
letter-spacing: 0.2em;
}
}
.revue-issue {
@apply flex items-center gap-2;
.revue-issue-number {
@apply bg-white text-carhop-green-700 px-4 py-2 font-normal h-fit;
}
}
.socials-buttons {
@apply flex gap-4;
&__button {
@apply bg-white text-carhop-green-700 px-4 py-2 font-normal w-32 rounded-full border-primary w-fit border-2 flex items-center gap-2;
img {
@apply w-8 h-8 filter-primary;
}
}
}
}
.content-wrapper {
@apply container mx-auto grid grid-cols-12 gap-12 py-12;
grid-template-columns: 1fr 4fr;
}
.sidebar {
.search-field {
input {
@apply border border-primary w-full;
@apply w-full p-4;
}
}
.tags__title {
@apply text-xl uppercase font-semibold mt-8 my-4 nunito;
}
.tags-list {
@apply flex flex-wrap gap-4;
}
.article-tag {
@apply block;
}
}
.content-area {
@apply max-w-screen-2xl mx-auto w-full;
.edito {
@apply border border-primary p-6 mb-12;
summary:marker {
@apply !hidden !bg-red-400;
}
&__title {
@apply text-4xl font-bold mb-4;
}
&__content {
@apply text-lg;
}
&__cta {
@apply my-4;
}
}
.table-matieres {
&__title {
@apply text-4xl font-bold mb-12;
}
.article-grid__list {
@apply grid grid-cols-1 gap-4;
}
}
}
article {
@apply py-12 my-12;
.article-title {
@apply mb-8;
}
.article-tags {
@apply mb-12;
}
}
}

View File

@ -0,0 +1 @@
<svg width="33.243" xmlns="http://www.w3.org/2000/svg" height="33.243" id="screenshot-a2556a6c-3214-8099-8006-165931dde031" viewBox="-0.121 -0.121 33.243 33.243" xmlns:xlink="http://www.w3.org/1999/xlink" fill="none" version="1.1"><g id="shape-a2556a6c-3214-8099-8006-165931dde031" rx="0" ry="0" style="fill: rgb(0, 0, 0);"><g id="shape-a2556a6c-3214-8099-8006-165931dde032" style="display: none;"><g class="fills" id="fills-a2556a6c-3214-8099-8006-165931dde032"><rect width="32.99999999999818" height="32.997226940004225" x="-0.000010239060429739766" transform="matrix(0.999973, 0.007385, -0.007385, 0.999973, 0.122307, -0.121397)" style="fill: rgb(214, 195, 255); fill-opacity: 1;" ry="0" fill="none" rx="0" y="0.0027730221845558845"/></g></g><g id="shape-a2556a6c-3214-8099-8006-165931dde033"/><g id="shape-a2556a6c-3214-8099-8006-165931dde034"><g class="fills" id="fills-a2556a6c-3214-8099-8006-165931dde034"><rect width="28.870975068950884" height="17.792708437504757" class="cls-1" x="2.0645861314221747" transform="matrix(0.712339, -0.701836, 0.701896, 0.712280, -6.833029, 16.326982)" style="fill: rgb(214, 195, 255); fill-opacity: 1;" ry="0" rx="0" y="7.601056546915743"/></g></g></g></svg>

After

Width:  |  Height:  |  Size: 1.2 KiB

View File

@ -4,27 +4,55 @@ export default function singleRevue() {
);
if (!isSingleRevue) return;
const socialsButtons = isSingleRevue.querySelectorAll(
handleButtons();
hydrateRevueAuthors();
handleAuthorsButton();
}
function getRevueID() {
const revueID = document
.querySelector('.page--single-revue')
.getAttribute('data-revue-id');
return revueID ?? null;
}
function handleAuthorsButton() {
const authorsButton = document.querySelector(
'.authors-button'
);
authorsButton.addEventListener('click', () => {
hydrateRevueAuthors();
});
}
function handleButtons() {
const socialsButtons = document.querySelectorAll(
'.socials-buttons__button'
);
// socialsButtons.forEach((button) => {
// button.addEventListener('click', () => {
// alert('clicked');
// });
// });
const shareButton = isSingleRevue.querySelector(
const shareButton = document.querySelector(
'.socials-buttons__button--share'
);
shareButton.addEventListener('click', () => {
const url = window.location.href;
const title = document.title;
const text = 'Check out this article: ' + url;
const shareUrl =
'https://www.facebook.com/sharer/sharer.php?u=' +
encodeURIComponent(url);
// const url = window.location.href;
// const title = document.title;
// const text = 'Check out this article: ' + url;
// const shareUrl =
// 'https://www.facebook.com/sharer/sharer.php?u=' +
// encodeURIComponent(url);
// window.open(shareUrl, '_blank');
console.log(url, title, text, shareUrl);
});
}
async function hydrateRevueAuthors() {
const revueID = getRevueID();
if (!revueID) return;
const response = await fetch(
`/wp-json/dynamiques-datas/v1/build/revue/authors?revue-id=${revueID}`
);
const revueAuthors = await response.json();
// console.log(revueAuthors);
const authorsList =
document.querySelector('.authors-list');
authorsList.innerHTML = revueAuthors.html_template;
}

64
single-articles.php Normal file
View File

@ -0,0 +1,64 @@
<?php get_header(); ?>
<div class="page--single-articles" data-revue-id="<?php echo get_the_ID(); ?>">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php get_template_part('template-parts/revues/revue-header'); ?>
<div class="content-wrapper">
<div class="sidebar">
<div class="search-field">
<input type="text" placeholder="Rechercher">
</div>
<?php
$tags = get_terms(array(
'taxonomy' => 'etiquettes',
));
?>
<?php if ($tags) : ?>
<div class="tags">
<h3 class="tags__title">Tags</h3>
<ul class="tags-list">
<?php foreach ($tags as $tag) : ?>
<li>
<a class="article-tag" href="<?php echo get_term_link($tag); ?>"><?php echo $tag->name; ?></a>
</li>
<?php endforeach; ?>
<?php endif; ?>
</ul>
</div>
</div>
<div class="content-area">
<?php get_template_part('template-parts/articles/article-content', null, array(
'ID' => get_the_ID()
)); ?>
</div>
</div>
<!-- #### EXPLORE TAGS #### -->
<?php get_template_part('template-parts/components/explore-tags'); ?>
<!-- #### INFOLETTRE #### -->
<?php get_template_part('template-parts/components/subscribe-infolettre'); ?>
</div>
</div>
</article>
<?php endwhile; ?>
<?php endif; ?>
</div>
<?php
get_footer();

View File

@ -2,17 +2,16 @@
<?php
$current_issue = get_queried_object();
$issue_related_articles = get_field('articles', $current_issue->ID);
$articles = get_field('articles', $current_issue->ID);
?>
<div class="page--single-revue">
<div class="page--single-revue" data-revue-id="<?php echo get_the_ID(); ?>">
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php get_template_part('template-parts/revues/single-revue__header'); ?>
<?php get_template_part('template-parts/revues/revue-header'); ?>
<div class="content-wrapper">
<div class="sidebar">
@ -23,7 +22,6 @@ $articles = get_field('articles', $current_issue->ID);
$tags = get_terms(array(
'taxonomy' => 'etiquettes',
));
?>
<?php if ($tags) : ?>
<div class="tags">
@ -39,7 +37,16 @@ $articles = get_field('articles', $current_issue->ID);
</div>
</div>
<div class="revue-content">
<div class="content-area">
<div class="authors">
<!-- <button class="authors-button">get Auteurs</button> -->
<div class="authors-list">
</div>
</div>
<details class="edito" open="true">
<summary>

View File

@ -0,0 +1,10 @@
<?php
$articleID = $args['ID'];
$articleContent = get_the_content($articleID);
$articleTitle = get_the_title($articleID);
?>
<div class="article-content">
<h1><?php echo $articleTitle; ?></h1>
<?php echo $articleContent; ?>
</div>

View File

@ -0,0 +1,31 @@
<?php
$ID = $args['ID'];
$name = get_the_title($ID);
$link = get_the_permalink($ID);
$profilePicture = get_field('profile_thumbnail', $ID);
$profilePictureUrl = $profilePicture['url'] ?? '';
$profilePictureAlt = $profilePicture['alt'] ?? '';
$description = get_field('description', $ID);
$totalArticles = count_user_articles($ID, 'articles');
?>
<a href="<?php echo $link; ?>" class="author-card">
<div class="author-card__profile-picture">
<?php if ($profilePictureUrl) : ?>
<img src="<?php echo $profilePictureUrl; ?>" alt="<?php echo $profilePictureAlt; ?>">
<?php else : ?>
<div class="author-card__profile-picture-placeholder">
</div>
<?php endif; ?>
</div>
<div class="author-card__infos">
<h3 class="author-card__name"><?php echo $name; ?></h3>
<p class="author-card__articles-amount"><?php echo $totalArticles; ?> articles</p>
</div>
<div class="author-card__description">
<?php echo $description; ?>
</div>
</a>

View File

@ -0,0 +1,19 @@
<?php
$revueID = $args['revueID'];
$authors = getRevueAuthors($revueID);
?>
<section class="revue-authors-list">
<h3 class="revue-authors-list__title">Auteur·e·s de la revue</h3>
<?php foreach ($authors as $authorID) : ?>
<?php get_template_part(
'template-parts/authors/card-author',
null,
array(
'ID' => $authorID,
)
); ?>
<?php endforeach; ?>
</section>

View File

@ -1,7 +1,21 @@
<?php
$currentPostType = get_post_type();
if ($currentPostType === 'revues') {
$currentRevueID = get_the_ID();
}
if ($currentPostType === 'articles') {
$currentRevueID = get_field('related_revue', get_the_ID());
}
if (!$currentRevueID) return;
$revueTitle = get_the_title($currentRevueID);
$issueNumber = get_field('issue_number', $currentRevueID);
?>
<section class="single-revue__header ">
<div class="single-revue__header__inner ">
<section class="revue-header ">
<div class="revue-header__inner ">
<div class="thumbnail-wrapper">
<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
</div>
@ -9,19 +23,19 @@
<div class="content-meta">
<span class="content-meta__type content-meta__type--revue">Revue</span>
</div>
<h1> <?php the_title(); ?></h1>
<h1> <?php echo $revueTitle; ?></h1>
<div class="revue-meta">
<p class="revue-issue">
<span class="revue-issue-label revue-meta__label">Numéro</span>
<span class="revue-issue-number revue-meta__value">25</span>
<span class="revue-issue-number revue-meta__value"><?php echo $issueNumber; ?></span>
</p>
<div class="revue-date-info">
<p class="revue-date-label revue-meta__label">Publication</p>
<time class="revue-publish-date revue-meta__value" datetime="<?php echo get_the_date('Y-m-d'); ?>"><?php echo get_the_date('d F Y'); ?></time>
<time class="revue-publish-date revue-meta__value" datetime="<?php echo get_the_date('Y-m-d', $currentRevueID); ?>"><?php echo get_the_date('d F Y', $currentRevueID); ?></time>
</div>
<div class="revue-date-info">
<p class="revue-date-label revue-meta__label">Mis à jour</p>
<time class="revue-update-date revue-meta__value" datetime="<?php echo get_the_modified_date('Y-m-d'); ?>"><?php echo get_the_modified_date('d F Y'); ?></time>
<time class="revue-update-date revue-meta__value" datetime="<?php echo get_the_modified_date('Y-m-d', $currentRevueID); ?>"><?php echo get_the_modified_date('d F Y', $currentRevueID); ?></time>
</div>
</div>