updating news pages system

resources/css/pages/single-news.css

@@ -0,0 +1,13 @@
+body.acoustisque {
+  @apply bg-slate-800;
+}
+.entry-content.single-news-editor-content {
+  @apply mx-auto mt-8 px-4;
+  ul li::marker,
+  ol li::marker {
+    @apply text-purple-500;
+  }
+  ul li:before {
+    @apply !bg-secondary;
+  }
+}

resources/js/archive-template-news.js

@@ -13,17 +13,16 @@ function filterNewsInit() {
   const filterNewsToolbar = document.querySelector('.filters-toolbar--archive-news');
   if (!filterNewsToolbar) return;
 
-  const filterButtons = filterNewsToolbar.querySelectorAll('.filter__action-button');
+  const filterButtons = filterNewsToolbar.querySelectorAll('.filters-toolbar__action-button');
   if (!filterButtons) return;
 
   filterButtons.forEach((button) => {
     const termId = button.getAttribute('data-term-id');
-    button.addEventListener('click', hydrateNewsFeedByTypeId);
+    button.addEventListener('click', (e) => filterPosts(e));
   });
 }
 
-async function hydrateNewsFeedByTypeId(e) {
+async function hydrateNewsFeedByTypeId(filterID) {
-  const filterID = e.target.getAttribute('data-term-id');
   let newCardsContent;
   if (filterID === 'all') {
     const response = await fetch(`/wp-json/homegrade-datas/v1/build/news`);
@@ -37,6 +36,22 @@ async function hydrateNewsFeedByTypeId(e) {
   container.innerHTML = newCardsContent;
 }
 
+async function filterPosts(e) {
+  const filterID =
+    e.target.getAttribute('data-term-id') ??
+    e.target.parentElement.getAttribute('data-term-id') ??
+    null;
+  console.log('filterID');
+  console.log(filterID);
+  const filterButtons = document.querySelectorAll('.filters-toolbar__action-button');
+
+  filterButtons.forEach((button) => {
+    button.classList.remove('filters-toolbar__action-button--active');
+  });
+  await hydrateNewsFeedByTypeId(filterID);
+  e.target.classList.add('filters-toolbar__action-button--active');
+}
+
 export default function archiveNewsInit() {
   loadMoreNewsInit();
   filterNewsInit();

single-post.php

@@ -0,0 +1,63 @@
+<?php
+get_header();
+$args = array(
+	'meta_key' => '_wp_page_template',
+	'meta_value' => "template-news.php"
+);
+$relatedPageTemplatePage = get_pages($args) ? get_pages($args)[0] : null;
+?>
+
+<?php if (have_posts()) : ?>
+	<?php while (have_posts()) : the_post(); ?>
+
+		<nav class="breadcrumbs_navigation" aria-label="breadcrumbs">
+			<ol>
+				<li>
+					<a href="<?php echo home_url() ?>" title="<?php echo __("Accueil", "homegrade-theme__texte-fonctionnel") ?>">
+						<img src="<?php echo get_template_directory_uri() . "/resources/img/pictogrammes/icon_house_dark.svg" ?>" alt="">
+					</a>
+				</li>
+				<li>
+					<a href="<?php echo get_the_permalink($relatedPageTemplatePage) ?>">
+						<?php echo __("News", "homegrade-theme__texte-fonctionnel") ?>
+					</a>
+				</li>
+				<li>
+					<a href="<?php echo get_the_permalink(get_the_id()) ?>" aria-current='location'>
+						<?php echo get_the_title(get_the_id()) ?>
+					</a>
+				</li>
+			</ol>
+		</nav>
+
+
+		<div class="post-news-page-container">
+			<?php /* --------
+					HEADING BOX
+			---------------*/ ?>
+			<?php
+			get_template_part("template-components/news-heading-box", null, array(
+				"news_type" => get_the_terms(get_the_ID(), 'news-type'),
+				"title" => get_the_title(),
+				"thumbnail" => get_the_post_thumbnail(get_the_ID(), "full", array('class' => 'news-heading-box__thumbnail')),
+				"published" => get_the_date()
+
+			));
+			?>
+			<div class="entry-content  single-news-editor-content">
+				<?php
+				the_content();
+				?>
+			</div>
+		</div>
+
+	<?php endwhile; ?>
+<?php endif; ?>
+
+
+
+
+
+
+<?php
+get_footer();

template-news.php

@@ -10,24 +10,38 @@ $pageIcon = get_field('page_icon', get_queried_object_id()) ?? null;
 
 ?>
 <div class="template-archives template-archives--publications">
+	<?php /* --------
+		BREADCRUMB
+ ---------------*/ ?>
 	<nav class="breadcrumbs_navigation" aria-label="breadcrumbs">
 		<ol>
-			<li><a href="<?php echo home_url() ?>">Home</a></li>
+			<li>
+				<a href="<?php echo home_url() ?>" title="<?php echo __("Accueil", "homegrade-theme__texte-fonctionnel") ?>">
+					<img src="<?php echo get_template_directory_uri() . "/resources/img/pictogrammes/icon_house_dark.svg" ?>" alt="">
+				</a>
+			</li>
 			<li><a href="<?php echo get_the_permalink($relatedPageTemplatePage) ?>" aria-current='location'>
 					<?php echo __("News", "homegrade-theme__texte-fonctionnel") ?>
 				</a></li>
 		</ol>
 	</nav>
-</div>
 
-<div class="heading-box ">
-	<img class="heading-box__page-icon" src="<?php echo $pageIcon['url']  ?>" alt="" />
-	<h1 class="heading-box__title"><?php echo get_the_title(get_queried_object_id()) ?></h1>
-	<p class="heading-box__description"> <?php echo __("Qu'y a-t-il de nouveau 
-chez Homegrade ?", "homegrade-theme__texte-fonctionnel")  ?></p>
-</div>
 
-<ul class="filters-toolbar filters-toolbar--archive-news">
+	<?php /* --------
+		HEADING BOX
+ ---------------*/ ?>
+	<?php
+	get_template_part("template-components/heading-box", null, array(
+		"pageIcon" => $pageIcon,
+		"title" => get_the_title(get_queried_object_id()),
+		"description" =>  __("Qu'y a-t-il de nouveau chez Homegrade ?", "homegrade-theme__texte-fonctionnel"),
+	));
+	?>
+
+	<?php /* --------
+		FILTERS
+ ---------------*/ ?>
+	<ul class="filters-toolbar filters-toolbar--archive-news">
 		<?php
 		$news_types = get_terms(array(
 			'taxonomy' => 'news-type',
@@ -36,28 +50,43 @@ chez Homegrade ?", "homegrade-theme__texte-fonctionnel")  ?></p>
 
 		?>
 		<li>
-		<button class="filter__action-button" data-term-id="all">Tous</button>
+			<button class="filters-toolbar__action-button" data-term-id="all">Tous</button>
 		</li>
 		<?php foreach ($news_types as $typeTerm) : ?>
+			<?php
+
+			$termIcon = get_field('news_type_icon', "news-type" . '_' . $typeTerm->term_id) ?? null;
+
+			?>
 			<li>
-			<button class="filter__action-button" data-term-id="<?php echo $typeTerm->term_id ?>"><?php echo $typeTerm->name ?></button>
+				<button class="filters-toolbar__action-button" data-term-id="<?php echo $typeTerm->term_id ?>">
+					<?php if ($termIcon) : ?>
+						<img class="icon" src="<?php echo $termIcon['url'] ?>" alt='' />
+					<?php endif; ?>
+
+					<?php echo $typeTerm->name ?>
+
+				</button>
 			</li>
 		<?php endforeach; ?>
-</ul>
+	</ul>
 
-<?php
+
-$post_per_page = 12;
+	<?php /* -------------
-$args = array(
+		POSTS CARDS GRID
+ --------------------*/ ?>
+
+	<section class="news-container">
+		<?php
+		$post_per_page = 12;
+		$args = array(
 			"post_type" => "post",
 			"status" => "publish",
 			"posts_per_page" => $post_per_page,
 
-);
+		);
-$posts = new WP_Query($args);
+		$posts = new WP_Query($args);
-
+		?>
-
-?>
-<section class="news-container">
 
 		<div class="card-grid-container">
 
@@ -85,7 +114,11 @@ $posts = new WP_Query($args);
 		<?php if ($posts->max_num_pages > 1) : ?>
 			<button id="load-more-news" class="cta cta--outline cta--button mx-auto mb-32">Charger Plus</button>
 		<?php endif; ?>
-</section>
+	</section>
+
+</div>
+
+
 
 <?php
 get_footer();