FEATURE introducing the component

CHORE stop watching this build File
FEATURE introducing the file
2025-06-10 15:02:44 +02:00 · 2025-06-10 15:02:34 +02:00 · 2025-06-10 15:01:47 +02:00 · 2025-06-10 15:01:37 +02:00 · 2025-06-10 15:01:08 +02:00 · 2025-06-10 15:00:56 +02:00
17 changed files with 327 additions and 113 deletions
--- a/.gitignore
+++ b/.gitignore
@ -7,6 +7,8 @@ Makefile
 init_script.sh	
 /css
 /js
+/css/
+/js/
 .env
 .env-sample
 .env-dev
--- a/archive-articles.php
+++ b/archive-articles.php
@ -17,10 +17,7 @@ Chaque parution propose un dossier thématique nourri de contributions plurielle
 <?php get_template_part('template-parts/articles/articles-grid'); ?>

 <!-- #### EXPLORE TAGS #### -->
-<?php
-$block_content = '<!-- wp:dynamiques-blocks/explore-tags /-->';
-echo do_blocks($block_content);
-?>
+<?php get_template_part('template-parts/components/explore-tags'); ?>

 <!-- #### PROCHAINEMENT #### -->
 <?php get_template_part('template-parts/components/chapter-section', null, array(
@ -44,14 +41,7 @@ echo do_blocks($block_content);


 <!-- #### INFOLETTRE #### -->
-<?php
-$block_content = '<!-- wp:carhop-blocks/subscribe-infolettre {"title":"Restez connectés à l’histoire sociale","className":"wp-block-carhop-blocks-subscribe-infolettre subscribe-infolettre"} -->
-<!-- wp:paragraph {"placeholder":"Description","className":"subscribe-infolettre__description"} -->
-<p class="subscribe-infolettre__description">Recevez les dernières actualités du CARHOP directement dans votre boîte mail. Abonnez-vous et surveillez votre boîte : un mail de confirmation vous attend !</p>
-<!-- /wp:paragraph -->
-<!-- /wp:carhop-blocks/subscribe-infolettre -->';
-echo do_blocks($block_content);
-?>
+<?php get_template_part('template-parts/components/subscribe-infolettre'); ?>


 <?php
--- a/functions.php
+++ b/functions.php
@ -7,3 +7,4 @@ require_once(__DIR__ . '/includes/columns.php');
 require_once(__DIR__ . '/includes/revue.php');
 require_once(__DIR__ . '/includes/auteurs.php');
 require_once(__DIR__ . '/includes/article.php');
+require_once(__DIR__ . '/includes/api.php');
--- a/includes/api.php
+++ b/includes/api.php
@ -0,0 +1,88 @@
+<?php
+
+add_action('rest_api_init', function () {
+
+	/* ----------------
+		BUILDING ROUTES
+ 	-----------------*/
+
+	// ################ NEWS ################
+
+	// * BUILD MORE NEWS CARDS 
+	register_rest_route('dynamiques-datas/v1/build', '/revue/authors', array(
+		'methods' => 'GET',
+		'callback' => 'build_revue_authors',
+		'permission_callback' => '__return_true',
+	));
+});
+
+
+// ################ NEWS ################
+
+function build_revue_authors($request)
+{
+
+	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,
+	// );
+
+
+	$response = new WP_REST_Response($response_data);
+
+	$response->set_status(200);
+
+	return $response;
+}
--- a/includes/init.php
+++ b/includes/init.php
@ -73,8 +73,9 @@ function dynamiques_enqueue_scripts()
 	wp_enqueue_script_module('carhop-js',  get_template_directory_uri() . '/js/app.js', array(), $theme->get('Version'));

 	// Enqueue child theme styles
-	wp_enqueue_style('carhop-main-css', dynamiques_asset('css/app.css'), array('parent-style'), $theme->get('Version'));
-	wp_enqueue_script('carhop-main-js', dynamiques_asset('js/app.js'), array(), $theme->get('Version'));
+	wp_enqueue_style('dynamiques-main-css', get_stylesheet_directory_uri() . '/css/app.css', array('parent-style'), $theme->get('Version'));
+	wp_enqueue_script('dynamiques-main-js', get_stylesheet_directory_uri() . '/js/app.js', array(), $theme->get('Version'));
+
 }


--- a/js/app.js
+++ b/js/app.js
@ -1,42 +0,0 @@
-(() => {
-  // resources/js/header.js
-  function menuInit() {
-    let main_navigation = document.querySelector("#primary-menu");
-    const header = document.querySelector("#primary-header");
-    const primary_menu = header.querySelector("#primary-menu");
-    const burgerMenuToggle = header.querySelector("#burger-menu-toggle");
-    const submenuToggles = primary_menu.querySelectorAll(".menu-item-submenu-toggle");
-    burgerMenuToggle.addEventListener("click", function(e) {
-      e.preventDefault();
-      header.classList.toggle("nav-open");
-      burgerMenuToggle.toggleAttribute("aria-expanded");
-      gsap.from(primary_menu, {
-        opacity: 20,
-        y: "-100vh",
-        duration: 0.5,
-        ease: Power4.easeOut
-      });
-    });
-    document.addEventListener("focusin", (e) => {
-      const header2 = document.querySelector("#primary-header");
-      console.log(header2.contains(document.activeElement));
-      if (header2.classList.contains("nav-open") && !header2.contains(document.activeElement)) {
-        header2.classList.remove("nav-open");
-        burgerMenuToggle.setAttribute("aria-expanded", false);
-        burgerMenuToggle.focus();
-      }
-    }, true);
-    submenuToggles.forEach((button) => {
-      button.addEventListener("click", function(e) {
-        let isExpanded = button.getAttribute("aria-expanded") === "true";
-        button.setAttribute("aria-expanded", !isExpanded);
-        button.parentElement.querySelector(".sub-menu").classList.toggle("sub-menu-open");
-      });
-    });
-  }
-
-  // resources/js/app.js
-  window.addEventListener("load", function() {
-    menuInit();
-  });
-})();
--- a/resources/css/app.css
+++ b/resources/css/app.css
@ -4,6 +4,7 @@

 /* ########### BASE ############ */
@import './base/typography.css';
+@import './base/filters.css';
 /* @import './base/base.css';
@import './base/buttons.css'; */

--- a/resources/css/base/filters.css
+++ b/resources/css/base/filters.css
@ -0,0 +1,5 @@
+.filter-primary {
+  filter: brightness(0) saturate(100%) invert(35%)
+    sepia(26%) saturate(1165%) hue-rotate(123deg)
+    brightness(93%) contrast(93%);
+}
--- a/resources/css/pages/single-revues.css
+++ b/resources/css/pages/single-revues.css
@ -1,18 +1,20 @@
 .page--single-revue {
  .single-revue__header {
-    @apply bg-carhop-green-700 text-white py-32;
+    @apply bg-purple-50 text-primary py-32;

    h1 {
-      @apply text-white uppercase font-medium text-7xl;
+      @apply uppercase font-medium text-7xl;
      line-height: 1.2;
    }
    &__inner {
-      @apply container mx-auto  grid grid-cols-1 md:grid-cols-2 gap-4;
+      @apply container mx-auto  grid  gap-24;
+      grid-template-columns: 1fr 4fr;
    }

    .thumbnail-wrapper {
+      @apply bg-red-200;
      img {
-        max-height: 800px;
+        /* max-height: 200px; */
        @apply object-contain;
      }
    }
@ -32,6 +34,67 @@
        @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;
--- a/resources/js/app.js
+++ b/resources/js/app.js
@ -1,4 +1,6 @@
 import menuInit from './header';
-window.addEventListener('load', function () {
+import singleRevue from './single-revue';
+window.addEventListener('DOMContentLoaded', function () {
  menuInit();
+  singleRevue();
 });
--- a/resources/js/header.js
+++ b/resources/js/header.js
@ -31,7 +31,6 @@ export default function menuInit() {
      const header = document.querySelector(
        '#primary-header'
      );
-      console.log(header.contains(document.activeElement));
      if (
        header.classList.contains('nav-open') &&
        !header.contains(document.activeElement)
--- a/resources/js/single-revue.js
+++ b/resources/js/single-revue.js
@ -0,0 +1,30 @@
+export default function singleRevue() {
+  const isSingleRevue = document.querySelector(
+    '.page--single-revue'
+  );
+  if (!isSingleRevue) return;
+
+  const socialsButtons = isSingleRevue.querySelectorAll(
+    '.socials-buttons__button'
+  );
+  // socialsButtons.forEach((button) => {
+  //   button.addEventListener('click', () => {
+  //     alert('clicked');
+  //   });
+  // });
+
+  const shareButton = isSingleRevue.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);
+    // window.open(shareUrl, '_blank');
+
+    console.log(url, title, text, shareUrl);
+  });
+}
--- a/single-revues.php
+++ b/single-revues.php
@ -3,19 +3,7 @@
 <?php
 $current_issue = get_queried_object();

-$issue_related_articles =  new WP_Query(array(
-	'post_type' => 'articles',
-	'posts_per_page' => 3,
-	'orderby' => 'date',
-	'order' => 'DESC',
-	'meta_query' => array(
-		array(
-			'key' => 'related_revue',
-			'value' => $current_issue->ID,
-			'compare' => '=',
-		),
-	),
-));
+$issue_related_articles = get_field('articles', $current_issue->ID);

 $articles = get_field('articles', $current_issue->ID);
 ?>
@ -23,53 +11,82 @@ $articles = get_field('articles', $current_issue->ID);

 <div class="page--single-revue">
 	<?php if (have_posts()) : ?>
-
 		<?php while (have_posts()) : the_post(); ?>
-			<section class="single-revue__header ">
-				<div class="single-revue__header__inner ">
-					<div class="content">
-						<div class="content-meta">
-							<span class="content-meta__type content-meta__type--revue">Revue</span>
+			<?php get_template_part('template-parts/revues/single-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>
-						<h1> <?php the_title(); ?></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>
-							</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>
+
+				</div>
+				<div class="revue-content">
+
+					<details class="edito" open="true">
+						<summary>
+							<h2 class="edito__title">
+								Edito
+							</h2>
+							<div class="open-close-icon">
+								<img src="https://homegrade.brussels/wp-content/themes/Deligraph_Homegrade/resources/img/graphic-assets/chevron_down.svg" class="open-close-cta" alt="">
 							</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>
+						</summary>
+						<div class="edito__content-wrapper">
+							<div class="edito__content">
+
+								<?php the_excerpt(); ?>
+								<div class="edito__cta">
+									<button class="cta cta--primary">Bonne Lecture</button>
+								</div>
 							</div>
 						</div>
-					</div>
-					<div class="thumbnail-wrapper">
-						<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
-					</div>
+					</details>
+
+
+					<section class="table-matieres">
+						<h2 class="table-matieres__title">Table des matières</h2>
+						<ul class="post-grid__list article-grid__list">
+							<?php foreach ($issue_related_articles  as $article) : ?>
+								<?php get_template_part('template-parts/articles/card-article', null, array(
+
+									'date' => $article->post_date,
+									'image' => get_the_post_thumbnail_url($article->ID),
+									'link' => get_the_permalink($article->ID),
+									'ID' => $article->ID
+								)); ?>
+							<?php endforeach; ?>
+						</ul>
+					</section>

 				</div>

-			</section>
-			<?php if ($issue_related_articles->have_posts()) : ?>
-				<?php while ($issue_related_articles->have_posts()) : $issue_related_articles->the_post(); ?>
-					<?php $terms = get_the_terms($post->ID, 'etiquettes'); ?>
+			</div>

-					<article class="single-revue__articles">
-						<h2 class="single-revue__articles__title article-title"> <?php echo get_the_title($article); ?></h2>
-						<ul class="single-revue__articles__tags article-tags-list">
-							<?php foreach ($terms as $term) : ?>
-								<li class="single-revue__articles__tag article-tag"> <?php echo $term->name; ?></li>
-							<?php endforeach; ?>
-						</ul>
+			<!-- #### EXPLORE TAGS #### -->
+			<?php get_template_part('template-parts/components/explore-tags'); ?>
+
+			<!-- #### INFOLETTRE #### -->
+			<?php get_template_part('template-parts/components/subscribe-infolettre'); ?>

-						<p class="single-revue__articles__excerpt"> <?php the_content(); ?></p>
-					</article>
-				<?php endwhile; ?>
-			<?php endif; ?>
 </div>

 </div>
--- a/template-parts/articles/articles-grid.php
+++ b/template-parts/articles/articles-grid.php
@ -57,7 +57,6 @@ $thematiques = get_terms(array(
 		</div>

 		<ul class="post-grid__list">
-
 			<?php if ($articles->have_posts()) : ?>
 				<?php while ($articles->have_posts()) : $articles->the_post(); ?>
 					<?php get_template_part('template-parts/articles/card-article', null, array(
@ -69,5 +68,6 @@ $thematiques = get_terms(array(
 					)); ?>
 				<?php endwhile; ?>
 			<?php endif; ?>
+		</ul>
 	</div>
 </section>
--- a/template-parts/components/explore-tags.php
+++ b/template-parts/components/explore-tags.php
@ -0,0 +1,5 @@
+<!-- #### EXPLORE TAGS #### -->
+<?php
+$block_content = '<!-- wp:dynamiques-blocks/explore-tags /-->';
+echo do_blocks($block_content);
+?>
--- a/template-parts/components/subscribe-infolettre.php
+++ b/template-parts/components/subscribe-infolettre.php
@ -0,0 +1,7 @@
+<?php
+$block_content = '<!-- wp:carhop-blocks/subscribe-infolettre {"title":"Restez connectés à l’histoire sociale","className":"wp-block-carhop-blocks-subscribe-infolettre subscribe-infolettre"} -->
+<!-- wp:paragraph {"placeholder":"Description","className":"subscribe-infolettre__description"} -->
+<p class="subscribe-infolettre__description">Recevez les dernières actualités du CARHOP directement dans votre boîte mail. Abonnez-vous et surveillez votre boîte : un mail de confirmation vous attend !</p>
+<!-- /wp:paragraph -->
+<!-- /wp:carhop-blocks/subscribe-infolettre -->';
+echo do_blocks($block_content);
--- a/template-parts/revues/single-revue__header.php
+++ b/template-parts/revues/single-revue__header.php
@ -0,0 +1,45 @@
+<?php
+?>
+<section class="single-revue__header ">
+	<div class="single-revue__header__inner ">
+		<div class="thumbnail-wrapper">
+			<?php the_post_thumbnail('full', ['class' => 'thumbnail']); ?>
+		</div>
+		<div class="content">
+			<div class="content-meta">
+				<span class="content-meta__type content-meta__type--revue">Revue</span>
+			</div>
+			<h1> <?php the_title(); ?></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>
+				</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>
+				</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>
+				</div>
+			</div>
+
+			<div class="socials-buttons">
+				<button class="socials-buttons__button socials-buttons__button--quote">
+					<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-citer-article.svg" alt="">
+					Citer
+				</button>
+				<button class="socials-buttons__button socials-buttons__button--like">
+					<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-soutenir.svg" alt="">
+					J'aime
+				</button>
+				<button class="socials-buttons__button socials-buttons__button--share">
+					<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-partager-social.svg" alt="">
+					Partager
+				</button>
+			</div>
+		</div>
+
+	</div>
+</section>
Author	SHA1	Message	Date
Antoine M	0dd5358dc0	FEATURE introducing the component All checks were successful continuous-integration/drone/push Build is passing Details	2025-06-10 15:02:44 +02:00
Antoine M	76d2144851	CHORE stop watching this build File	2025-06-10 15:02:34 +02:00
Antoine M	a1a2583039	FEATURE introducing the file	2025-06-10 15:01:47 +02:00
Antoine M	0fe1c8b79f	INCLUDE api file	2025-06-10 15:01:37 +02:00
Antoine M	ef67ea5738	INCLUDE single-revue file	2025-06-10 15:01:08 +02:00
Antoine M	219ebd65a4	FEATURE intropducing the file	2025-06-10 15:00:56 +02:00
Antoine M	5d86737b30	REFACTOR in external propper component	2025-06-10 15:00:34 +02:00
Antoine M	5f45715955	FEATURE Refining styles	2025-06-10 15:00:20 +02:00
Antoine M	57b51dea2a	INCLUDE filters css	2025-06-10 15:00:06 +02:00
Antoine M	8a29d0f545	CHORE updating gitignore	2025-06-10 14:59:49 +02:00
Antoine M	913db41e0e	REFACTOR Cleaning uncessary console.log	2025-06-10 14:59:40 +02:00
Antoine M	11ead48ff0	REFACTOR Introducing cleaner template part component	2025-06-10 14:58:18 +02:00
Antoine M	8c97b788ce	FEATURE Introducing filters to use in dynamiques theme	2025-06-10 14:57:40 +02:00
Antoine M	dbcaf63676	REFACTOR Cleaning scripts and assets Call	2025-06-10 14:57:13 +02:00
Antoine M	34f2672aec	REFACTORING and ehancing FEATURES	2025-06-10 14:56:54 +02:00
Antoine M	c0e14a39e6	REFACTORING with cleaner template-parts	2025-06-10 14:56:28 +02:00
Antoine M	1aa1b52d00	FIX Fixing ul	2025-06-10 14:55:26 +02:00