FEATURE Introducing the get_archive_page inforlmations utilities functions

archive-analyses-etudes.php

@@ -0,0 +1,38 @@
+<?php get_header(); ?>
+
+<main id="content" class="site-content flex-grow">
+	<?php get_template_part('template-parts/page-header', null, array(
+		'title' => 'Analyses et études',
+		'subtitle' => 'Accédez à nos recherches et publications thématiques',
+		'description' => 'Le CARHOP produit des analyses et des études ancrées dans l’histoire sociale, en lien étroit avec les réalités du monde du travail et des mouvements sociaux. Ces productions visent à éclairer l’actualité par une lecture historique, critique et accessible.',
+		'cover' => array(
+			'url' => get_stylesheet_directory_uri() . '/resources/img/covers/carhop-page-analyses-etudes-cover.svg',
+			'alt' => 'Revues'
+		),
+		'background_style' => 'sliced',
+		'cta' => array(
+			'title' => __('Trouver une publication', 'carhop'),
+			'url' => '#prochaines-publications',
+		)
+	)); ?>
+
+
+
+	<?php get_template_part('template-parts/revues/revues-grid'); ?>
+
+	<!-- #### EXPLORE TAGS #### -->
+	<?php
+	$block_content = '<!-- wp:dynamiques-blocks/explore-tags /-->';
+	echo do_blocks($block_content);
+	?>
+
+	<!-- #### PROCHAINEMENT #### -->
+	<?php get_template_part('template-parts/components/decouvrez-prochainement'); ?>
+
+
+	<!-- #### INFOLETTRE #### -->
+	<?php get_template_part('template-parts/components/subscribe-infolettre'); ?>
+</main>
+
+<?php
+get_footer();

footer.php

@@ -1,5 +1,3 @@
-</main>
-
 <?php do_action('tailpress_content_end'); ?>
 
 

front-page.php

@@ -1,17 +1,17 @@
 <?php get_header(); ?>
+<main id="content" class="site-content flex-grow">
 
-
-	<?php if ( have_posts() ) : ?>
+	<?php if (have_posts()) : ?>
 		<?php
-		while ( have_posts() ) :
+		while (have_posts()) :
 			the_post();
 			the_content();
-			?>
+		?>
 
 
 		<?php endwhile; ?>
 
 	<?php endif; ?>
 
-<?php
-get_footer();
+	<?php get_footer(); ?>
+</main>

header.php

@@ -39,4 +39,3 @@
 		<?php do_action('tailpress_content_start'); ?>
 
 		<?php get_template_part('template-parts/utils/scroll-top'); ?>
-		<main id="content" class="site-content flex-grow">

includes/navwalker.php

@@ -6,21 +6,38 @@
 
 function wrap_parent_menu_item_buttons($output, $item, $depth, $args)
 {
+
+
     // #### MENU HOMEGRADE HEADER
     if ($args->theme_location === "secondary"  && in_array('menu-item-has-children', $item->classes, true)) {
         $output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $item->title . '</button>';
+        return $output;
     }
-    if ($args->theme_location === "primary" && in_array('menu-item-has-children', $item->classes, true)) {
+    if ($args->theme_location === "primary" && in_array('menu-item-has-children', $item->classes, true) && $depth === 0) {
         $page_icon = get_field('page_icon', $item->object_id) ?? null;
         $icon = isset($page_icon) && is_array($page_icon) && !empty($page_icon['url']) ? '<img class="page_icon" src="'  . $page_icon['url'] . '" alt=""/>' : '';
         $output = '<button type="button" class="menu-item__submenu-toggle" aria-expanded="false" aria-controls="sub-menu-' . $item->ID . '">' . $icon . $item->title . '</button>';
+        return $output;
     }
-    // write_log($item->classes);
-    if ($args->theme_location === "primary" && !in_array('menu-item-has-children', $item->classes, true)) {
 
+
+
+    if ($args->theme_location === "primary" && !in_array('menu-item-has-children', $item->classes, true) && $depth === 1) {
         $page_icon = get_field('page_icon', $item->object_id) ?? null;
-        $icon = isset($page_icon) && is_array($page_icon) && !empty($page_icon['url']) ? '<img class="page_icon" src="'  . $page_icon['url'] . '" alt=""/>' : '';
-        $output = '<a href="' . $item->url . '">' . $icon . $item->title . '</a>';
+        $icon_html = isset($page_icon) && is_array($page_icon) && !empty($page_icon['url']) ? '<img class="page_icon" src="'  . $page_icon['url'] . '" alt=""/>' : '';
+
+        $page_subtitle = get_field('page_subtitle', $item->object_id) ?? '';
+        $subtitle_html = '<span class="page_subtitle">' . $page_subtitle . '</span>';
+
+        if ($item->type === 'post_type_archive') {
+            $icon_html = get_archive_page_icon_html($item->object);
+            $subtitle_html = get_archive_page_subtitle_html($item->object);
+        }
+
+
+
+        $output = '<a href="' . $item->url . '">' . $icon_html . '<div class="menu-item__content-inner"><span class="menu-item__title">' .  $item->title . '</span>' . $subtitle_html . '</div></a>';
+        return $output;
     }
     return $output;
 }
@@ -69,7 +86,7 @@ function tailpress_nav_menu_add_submenu_class($classes, $args, $depth)
 add_filter('nav_menu_submenu_css_class', 'tailpress_nav_menu_add_submenu_class', 10, 3);
 
 /* ----------------------------------------------------------------
-	##### Inject ACF page_icon into submenu items
+	##### Inject ACF page_icon and page_subtitle into submenu items
  ------------------------------------------------------------------*/
 function carhop_add_submenu_item_icon($output, $item, $depth, $args)
 {

includes/nawalker_fction.php

@@ -8,12 +8,9 @@ function carhop_wrap_parent_menu_item_buttons($output, $item, $depth, $args)
 {
 	if ($args->theme_location === "primary") {
 		$page_icon = get_field('page_icon', $item->object_id) ?? null;
-		// $test = get_field('page_icon', 729);
-		// write_log($test);
 
 		if (isset($page_icon) && is_array($page_icon) && !empty($page_icon['url'])) {
 			$icon = '<img class="page_icon" src="'  . $page_icon['url'] . '" alt=""/>';
-			// Insérer l'icône à l'intérieur du lien (seulement la première occurrence)
 			$output = preg_replace('/>/', '>' . $icon, $output, 1);
 		}
 	}
@@ -36,7 +33,7 @@ add_filter('walker_nav_menu_start_el', 'carhop_wrap_parent_menu_item_buttons', 1
 function carhop_add_page_icon_class($classes, $item)
 {
 	$page_icon = get_field('page_icon', $item->object_id);
-	if (isset($page_icon)) {
+	if (isset($page_icon) || $item->type === 'post_type_archive') {
 		$classes[] = 'has-page-icon';
 	}
 	return $classes;

includes/utilities.php

@@ -26,3 +26,29 @@ function test()
 
 	return $tags;
 }
+
+
+function get_archive_page_icon_html($post_type)
+{
+	switch ($post_type) {
+		case 'analyses-etudes':
+			return '<img class="page_icon"  src="' . get_template_directory_uri() . '/resources/img/icons/icon-analyses-etudes.svg" alt="Analyses et études" />';
+		case 'revues':
+			return '<img class="page_icon"  src="' . get_stylesheet_directory_uri() . '/resources/img/icons/revues.svg" alt="Revues" />';
+		default:
+			return '';
+	}
+}
+
+
+function get_archive_page_subtitle_html($post_type)
+{
+	switch ($post_type) {
+		case 'analyses-etudes':
+			return '<span class="page_subtitle">Accédez à nos recherches et publications thématiques.</span>';
+		case 'revues':
+			return '<span class="page_subtitle">Accédez à nos revues et publications</span>	';
+		default:
+			return '';
+	}
+}

page.php

@@ -1,16 +1,18 @@
 <?php get_header(); ?>
 
-
-<?php if (have_posts()) : ?>
-<?php
-	while (have_posts()) :
-		the_post();
-		the_content();
-?>
+<main id="content" class="site-content flex-grow">
+	<?php if (have_posts()) : ?>
+		<?php
+		while (have_posts()) :
+			the_post();
+			the_content();
+		?>
 
 
-<?php endwhile; ?>
+		<?php endwhile; ?>
 
-<?php endif; ?>
+	<?php endif; ?>
+	</div>
 
-<?php get_footer();
+	<?php get_footer(); ?>
+</main>

resources/css/blocks/chapter-section.css

@@ -1,7 +1,7 @@
 .chapter-section {
   @apply relative flex flex-col lg:flex-row  items-center justify-between gap-8  2xl:gap-12 !my-16;
   @apply py-16 md:py-32 xl:py-32 2xl:py-48 px-8 md:px-20;
-  @apply max-w-screen-2xl mx-auto;
+  @apply !max-w-screen-2xl mx-auto;
   color: var(--content-box-text-color);
   min-height: 60vh;
 

resources/css/components/page-header.css

@@ -1,5 +1,21 @@
 .page-header {
-  @apply bg-primary text-white py-16  items-center;
+  @apply bg-primary text-white py-16  items-center relative;
+
+  &--sliced-background {
+    @apply bg-transparent;
+    &::before {
+      z-index: -1;
+      content: '';
+      @apply absolute inset-0;
+      background-image: url('../resources/img/shapes/background-shape-A_green.svg');
+      background-size: 100% 100%;
+      background-position: center;
+      background-repeat: no-repeat;
+
+      width: 100%;
+      height: 100%;
+    }
+  }
 
   &__inner {
     @apply grid grid-cols-1 gap-x-24 gap-y-20 !py-0;
@@ -16,6 +32,7 @@
   }
   &__subtitle {
     @apply text-white text-5xl;
+    line-height: 1.2;
   }
   &__description {
     @apply mb-8 lg:mb-16;

resources/css/editor-style.css

@@ -39,3 +39,7 @@ body {
     @apply pointer-events-none;
   }
 }
+/* block-editor-block-list__block wp-block has-child-selected carhop-heading carhop-heading--hierarchy-classic wp-block-carhop-blocks-heading */
+.block-editor-block-list__block.wp-block-carhop-blocks-heading {
+  @apply mx-auto;
+}

resources/css/layout/gutenberg.css

@@ -45,26 +45,30 @@ article > *:not(.entry-content),
     }
   }
 }
+.wp-singular.page{
 
-.site-content {
-  > :first-child {
-    @apply !mt-0;
-  }
-  > .carhop-heading {
-    @apply px-4 md:px-0;
-  }
-  p,
-  li {
-    strong {
-      @apply font-bold;
+  .site-content {
+    > *:not(.alignfull, .alignwide) {
+      @apply max-w-content  mx-auto;
+    }
+    > :first-child {
+      @apply !mt-0;
+    }
+    > .carhop-heading {
+      @apply px-4 md:px-0;
+    }
+    p,
+    li {
+      strong {
+        @apply font-bold;
+      }
     }
   }
-
 }
 
-.content-box{
-  &__innerblocks{
-    .block-editor-inner-blocks{
+.content-box {
+  &__innerblocks {
+    .block-editor-inner-blocks {
       max-width: 960px !important;
     }
   }

resources/css/layout/nav/primary-menu.css

@@ -63,6 +63,7 @@
 			text-lg
 			text-center;
 
+      &:hover > button,
       &:hover > a,
       a:focus {
         @apply cursor-pointer
@@ -116,14 +117,16 @@
         @apply w-7 h-7 object-contain object-center;
         transition: transform 0.3s ease-out;
       }
-      &:hover .page_icon {
+
+      &:hover > button > .page_icon,
+      &:hover > a > .page_icon {
         transform: scale(1.2);
       }
     }
     li.menu-item.menu-item-has-children:hover {
-      &:hover .page_icon {
+      /* &:hover .page_icon {
         transform: none;
-      }
+      } */
       @screen lg {
         .menu-item-submenu-toggle:after {
           transform: rotate(180deg);
@@ -167,29 +170,58 @@
           translate: 0 -30px;
         }
       }
+      li.current-menu-item {
+        a {
+          @apply no-underline;
+          .menu-item__title {
+            @apply !underline underline-offset-8 decoration-1 decoration-secondary;
+          }
+        }
+      }
 
       li {
-        @apply lg:text-left;
+        @apply max-w-3xl w-full lg:text-left;
         border-bottom: 1px solid #fff;
+
         &:nth-last-child(-n + 2),
         &:last-child {
           border-bottom: none;
         }
-        @apply max-w-3xl w-full;
 
         &:nth-child(odd) {
           @apply ml-auto;
         }
+
+        .page_subtitle {
+          @apply opacity-80 font-light mt-1;
+        }
+
         &.menu-item.has-page-icon a {
-          @apply flex gap-4 items-center justify-start flex-row p-6 py-8;
+          @apply flex gap-6 items-center justify-start flex-row p-6 py-8;
           .page_icon {
             @apply w-12 h-12;
           }
         }
+        .menu-item__content-inner {
+          transition: all 0.3s ease-out;
+          span {
+            @apply block;
+          }
+        }
         &:hover {
           @apply bg-black/10;
           a {
             @apply gap-12;
+            .page_icon {
+              transform: none !important;
+            }
+            @apply no-underline;
+            .menu-item__content-inner {
+              transform: translateX(4px);
+            }
+            .menu-item__title {
+              @apply !underline;
+            }
           }
         }
       }

resources/img/covers/carhop-page-analyses-etudes-cover.svg

@@ -0,0 +1,17 @@
+<svg width="311" height="298" viewBox="0 0 311 298" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M162 298C244.29 298 311 231.29 311 149C311 66.7096 244.29 0 162 0C79.7096 0 13 66.7096 13 149C13 231.29 79.7096 298 162 298Z" fill="#FFA630"/>
+<rect y="13" width="77.6812" height="75.0026" fill="white"/>
+<g clip-path="url(#clip0_2418_26624)">
+<path d="M29.2266 41.3322H50.1972H55.9056V74.8813H29.2266V41.3322Z" stroke="#136F63" stroke-width="2"/>
+<path d="M29.2235 66.9052H21.0938V31.1187H49.5587V41.3322" stroke="#136F63" stroke-width="2"/>
+<path d="M51.3778 54.9912H33.957" stroke="#136F63" stroke-width="2"/>
+<path d="M51.3778 67.9679H33.957" stroke="#136F63" stroke-width="2"/>
+<path d="M46.5241 48.5029H33.957" stroke="#136F63" stroke-width="2"/>
+<path d="M46.5241 61.4796H33.957" stroke="#136F63" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_2418_26624">
+<rect width="37" height="46" fill="white" transform="translate(20 30)"/>
+</clipPath>
+</defs>
+</svg>

resources/img/icons/icon-analyses-etudes.svg

@@ -0,0 +1,16 @@
+<svg width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="50" height="50" fill="white"/>
+<g clip-path="url(#clip0_2440_15957)">
+<path d="M18.7319 17.376H34.0349H38.2004V42.1732H18.7319V17.376Z" stroke="#136F63" stroke-width="2"/>
+<path d="M18.7318 36.2777H12.7993V9.82684H33.571V17.376" stroke="#136F63" stroke-width="2"/>
+<path d="M34.8985 27.4718H22.186" stroke="#136F63" stroke-width="2"/>
+<path d="M34.8985 37.0632H22.186" stroke="#136F63" stroke-width="2"/>
+<path d="M31.3566 22.6761H22.186" stroke="#136F63" stroke-width="2"/>
+<path d="M31.3566 32.2675H22.186" stroke="#136F63" stroke-width="2"/>
+</g>
+<defs>
+<clipPath id="clip0_2440_15957">
+<rect width="27" height="34" fill="white" transform="translate(12 9)"/>
+</clipPath>
+</defs>
+</svg>

resources/img/shapes/background-shape-A_green.svg

@@ -1,3 +1,3 @@
-<svg width="1440" height="744" viewBox="0 0 1440 744" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M0 0H1440V686.701L0 744V0Z" fill="#136F63"/>
+<svg width="1440" height="744" viewBox="0 0 1440 744" fill="none" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none">
+  <path d="M0 0H1440V686.701L0 744V0Z" fill="#136F63" preserveAspectRatio="none"/>
 </svg>

resources/js/header.js

@@ -5,7 +5,12 @@ export default function menuInit() {
   const burgerMenuToggle = header.querySelector('#burger-menu-toggle');
   const submenuToggles = header.querySelectorAll('.menu-item__submenu-toggle');
 
-  console.log(submenuToggles);
+  function closeSubmenus(e) {
+    submenuToggles.forEach((button) => {
+      button.setAttribute('aria-expanded', false);
+      button.parentElement.querySelector('.sub-menu').classList.remove('sub-menu-open');
+    });
+  }
 
   // #### Open/close burger nav
   // burgerMenuToggle.addEventListener('click', function (e) {
@@ -41,9 +46,18 @@ export default function menuInit() {
   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');
+      closeSubmenus(e);
+      if (!isExpanded) {
+        button.setAttribute('aria-expanded', true);
+        button.parentElement.querySelector('.sub-menu').classList.add('sub-menu-open');
+      }
     });
   });
+
+  document.addEventListener('keydown', function (e) {
+    if (e.key === 'Escape') {
+      closeSubmenus(e);
+    }
+  });
 }

template-parts/page-header.php

@@ -0,0 +1,34 @@
+<?php
+
+$title = $args['title'];
+$subtitle = $args['subtitle'];
+$description = $args['description'];
+$cover = $args['cover'];
+$background_style =  $args['background_style'] ?? 'normal';
+$cta = $args['cta'];
+?>
+
+<section class="page-header content-section content-section--full-width page-header--<?php echo $background_style; ?>-background">
+	<div class="content-section__inner page-header__inner">
+		<div class="page-header__content">
+			<h1 class="page-header__title title-small "><?php echo $title; ?></h1>
+			<?php if ($subtitle) : ?>
+				<p class="page-header__subtitle subtitle-big"><?php echo $subtitle; ?></p>
+			<?php endif; ?>
+			<?php if ($description) : ?>
+				<p class="page-header__description"><?php echo $description; ?></p>
+			<?php endif; ?>
+			<?php if ($cta) : ?>
+				<a href="<?php echo $cta['url']; ?>" class="page-header__cta"><?php echo $cta['title']; ?></a>
+			<?php endif; ?>
+		</div>
+
+		<div class="page-header__image">
+			<?php if ($cover) : ?>
+				<img src="<?php echo $cover['url']; ?>" alt="<?php echo $title; ?>">
+			<?php endif; ?>
+		</div>
+
+	</div>
+
+</section>