STYLE Finetuning notyf toast style for cite button

package-lock.json

@@ -510,9 +510,9 @@
 			}
 		},
 		"node_modules/caniuse-lite": {
-			"version": "1.0.30001359",
+			"version": "1.0.30001724",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001359.tgz",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001724.tgz",
-			"integrity": "sha512-Xln/BAsPzEuiVLgJ2/45IaqD9jShtk3Y33anKb4+yLwQzws3+v6odKfpgES/cDEaZMLzSChpIGdbOYtH9MyuHw==",
+			"integrity": "sha512-WqJo7p0TbHDOythNTqYujmaJTvtYRZrjpP8TCvH6Vb9CYJerJNKamKzIWOM4BkQatWj9H2lYulpdAQNBe7QhNA==",
 			"dev": true,
 			"funding": [
 				{
@@ -522,8 +522,13 @@
 				{
 					"type": "tidelift",
 					"url": "https://tidelift.com/funding/github/npm/caniuse-lite"
+				},
+				{
+					"type": "github",
+					"url": "https://github.com/sponsors/ai"
 				}
-			]
+			],
+			"license": "CC-BY-4.0"
 		},
 		"node_modules/chalk": {
 			"version": "4.1.2",
@@ -3647,9 +3652,9 @@
 			"dev": true
 		},
 		"caniuse-lite": {
-			"version": "1.0.30001359",
+			"version": "1.0.30001724",
-			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001359.tgz",
+			"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001724.tgz",
-			"integrity": "sha512-Xln/BAsPzEuiVLgJ2/45IaqD9jShtk3Y33anKb4+yLwQzws3+v6odKfpgES/cDEaZMLzSChpIGdbOYtH9MyuHw==",
+			"integrity": "sha512-WqJo7p0TbHDOythNTqYujmaJTvtYRZrjpP8TCvH6Vb9CYJerJNKamKzIWOM4BkQatWj9H2lYulpdAQNBe7QhNA==",
 			"dev": true
 		},
 		"chalk": {

resources/css/app.css

@@ -14,6 +14,7 @@
 @import './components/post-card-dbmod.css';
 @import './components/news-card.css';
 @import './components/post-grid.css';
+@import './components/footnote-reference.css';
 
 @import './components/revues-grid.css';
 @import './components/articles-grid.css';

resources/css/base/typography.css

@@ -1,6 +1,6 @@
-@import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');
+/* @import url('https://fonts.googleapis.com/css2?family=Fjalla+One&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap'); */
 
-body {
+/* body {
   font-family: 'Nunito Sans', sans-serif;
   @apply text-primary text-xl;
 }
@@ -36,7 +36,7 @@ body.wp-admin h6:not(.editor-visual-editor h6) {
   letter-spacing: unset !important;
   text-transform: unset !important;
   text-align: unset !important;
-}
+} */
 
 .nunito {
   font-family: 'Nunito Sans', sans-serif;

resources/css/components/footnote-reference.css

@@ -0,0 +1,12 @@
+.footnote-reference {
+  color: unset;
+  &:after {
+    @apply nunito;
+  }
+
+  .wp-block-pullquote & {
+    &:after {
+      transform: translate(0px, -6px);
+    }
+  }
+}

resources/css/components/post-header.css

@@ -36,8 +36,17 @@
 
   .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;
+      @apply bg-white text-carhop-green-700 px-4 py-2 font-normal rounded-full border-primary w-fit border-2 flex items-center gap-2;
+      transition: transform 0.3s ease-in-out;
+      &:hover {
+        transform: scale(1.05);
+      }
+
+      &[disabled='true'] {
+        @apply opacity-50 cursor-not-allowed;
+      }
       img {
         @apply w-8 h-8 filter-primary;
       }

resources/css/pages/singles.css

@@ -63,11 +63,17 @@
     p {
       @apply mb-6;
     }
-
+    h1 {
+      @apply mb-10;
+    }
     h2,
     h3 {
       @apply font-bold nunito mb-3 mt-12;
       font-size: 1.7rem;
     }
   }
+
+  #cite-reference {
+    @apply hidden;
+  }
 }

resources/js/app.ts

@@ -1,6 +1,8 @@
 import menuInit from './header';
 import singleRevue from './single-revue';
+import singlesInit from './singles';
+
 window.addEventListener('DOMContentLoaded', function () {
   menuInit();
-  singleRevue();
+  singlesInit();
 });

resources/js/single-revue.js

@@ -1,58 +0,0 @@
-export default function singleRevue() {
-  const isSingleRevue = document.querySelector(
-    '.page--single-revue'
-  );
-  if (!isSingleRevue) return;
-
-  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'
-  );
-
-  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);
-    // window.open(shareUrl, '_blank');
-  });
-}
-
-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;
-}

resources/js/single-revue.ts

@@ -0,0 +1,59 @@
+interface RevueAuthorsResponse {
+  html_template: string;
+}
+
+export default function singleRevue(): void {
+  const isSingleRevue: HTMLElement | null =
+    document.querySelector('.page--single-revue');
+  if (!isSingleRevue) return;
+
+  hydrateRevueAuthors();
+  handleAuthorsButton();
+}
+function getRevueID(): string | null {
+  const revueElement: HTMLElement | null =
+    document.querySelector('.page--single-revue');
+  if (!revueElement) {
+    return null;
+  }
+  return revueElement.getAttribute('data-revue-id');
+}
+
+function handleAuthorsButton(): void {
+  const authorsButton: HTMLButtonElement | null =
+    document.querySelector('.authors-button');
+  if (authorsButton) {
+    authorsButton.addEventListener('click', () => {
+      hydrateRevueAuthors();
+    });
+  }
+}
+
+async function hydrateRevueAuthors(): Promise<void> {
+  const revueID = getRevueID();
+  if (!revueID) return;
+
+  try {
+    const response = await fetch(
+      `/wp-json/dynamiques-datas/v1/build/revue/authors?revue-id=${revueID}`
+    );
+    if (!response.ok) {
+      throw new Error(
+        `HTTP error! status: ${response.status}`
+      );
+    }
+    const revueAuthors: RevueAuthorsResponse =
+      await response.json();
+
+    const authorsList: HTMLElement | null =
+      document.querySelector('.authors-list');
+    if (authorsList) {
+      authorsList.innerHTML = revueAuthors.html_template;
+    }
+  } catch (error) {
+    console.error(
+      'Failed to fetch and hydrate revue authors:',
+      error
+    );
+  }
+}

resources/js/singles.ts

@@ -0,0 +1,63 @@
+export default function singles(): void {
+  const isSingleRevue: HTMLElement | null =
+    document.querySelector('.page--single-revue');
+  const isSingleArticle: HTMLElement | null =
+    document.querySelector('.page--single-articles');
+  if (!isSingleRevue && !isSingleArticle) return;
+
+  handleCiteButton();
+}
+
+function handleCiteButton(): void {
+  const citeButton: HTMLElement | null =
+    document.querySelector(
+      '.socials-buttons__button--cite'
+    );
+  const citeReference: HTMLElement | null =
+    document.querySelector('#cite-reference');
+  if (!citeButton || !citeReference) return;
+
+  if (!window.isSecureContext) {
+    citeButton.setAttribute('disabled', 'true');
+    citeButton.setAttribute(
+      'title',
+      'Vous devez utiliser un navigation sécurisé (https) pour copier la citation'
+    );
+  }
+
+  citeButton.addEventListener('click', () => {
+    const textToCopy = citeReference.textContent;
+    if (!textToCopy) return;
+
+    if (navigator.clipboard && window.isSecureContext) {
+      navigator.clipboard
+        .writeText(textToCopy)
+        .then(() => {
+          const notyf = new Notyf({
+            duration: 4000,
+            ripple: false,
+            dismissible: true,
+            types: [
+              {
+                type: 'success',
+                icon: {
+                  className: 'notyf__icon--success',
+                  tagName: 'i',
+                },
+              },
+            ],
+            position: {
+              x: 'right',
+              y: 'top',
+            },
+          });
+          notyf.success(
+            'Citation copiée dans le presse-papiers ! <br> Vous pouvez maintenant la coller dans votre document.'
+          );
+        })
+        .catch((err) => {
+          console.error('Failed to copy text: ', err);
+        });
+    }
+  });
+}

template-parts/articles/article-content.php

@@ -2,9 +2,15 @@
 $articleID = $args['ID'];
 $articleContent = get_the_content($articleID);
 $articleTitle = get_the_title($articleID);
+$citeReference = get_field('cite_reference', $articleID);
 ?>
 
 <article class="article-content">
 	<h1><?php echo $articleTitle; ?></h1>
 	<?php echo $articleContent; ?>
+	<?php if ($citeReference) : ?>
+		<p id="cite-reference">
+			<?php echo $citeReference; ?>
+		</p>
+	<?php endif; ?>
 </article>

template-parts/post-header.php

@@ -62,7 +62,7 @@ $hasThumbnail = has_post_thumbnail();
 					</div>
 				<?php endif; ?>
 				<div class="socials-buttons">
-					<button class="socials-buttons__button socials-buttons__button--quote">
+					<button class="socials-buttons__button socials-buttons__button--cite">
 						<img src="<?php echo get_template_directory_uri(); ?>/resources/img/icons/carhop-citer-article.svg" alt="">
 						Citer
 					</button>