✨ ajout de l'affichage du lien d'affilication digital ocean

Author: mckenziearts

resources/css/base.css

@@ -9,3 +9,9 @@ input {
 .hide-scroll::-webkit-scrollbar { display: none; }
 
 [x-cloak] {display: none; }
+
+.affiliate img {
+  margin-bottom: 0 !important;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+}

resources/js/components/Comments.jsx

@@ -6,7 +6,7 @@ import { findAllReplies, addReply, updateReply, deleteReply, likeReply } from '@
 import { DefaultButton, PrimaryButton } from '@components/Button';
 import { Field } from '@components/Form'
 import { Markdown } from '@components/Markdown'
-import { ChatIcon, HeartIcon } from '@components/Icon'
+import { HeartIcon } from '@components/Icon'
 import { canManage, currentUser, isAuthenticated, getUserId } from '@helpers/auth'
 import { scrollTo } from '@helpers/animation'
 import { catchViolations } from '@helpers/api'

resources/js/elements/index.js

@@ -1,8 +1,8 @@
 import preactCustomElement from '@helpers/preact.js'
-import { Comments } from '@components/Comments.jsx'
-import { Confetti } from './Confetti.js'
-import { TimeAgo } from './TimeAgo.js'
-import { TimeCountdown } from './TimeCountdown.js'
+import { Comments } from '@components/Comments'
+import { Confetti } from './Confetti'
+import { TimeAgo } from './TimeAgo'
+import { TimeCountdown } from './TimeCountdown'
 
 customElements.define('con-fetti', Confetti)
 customElements.define('time-ago', TimeAgo)

resources/js/helpers.js

@@ -1,23 +1,23 @@
-import hljs from 'highlight.js';
-import Choices from 'choices.js';
+import hljs from 'highlight.js'
+import Choices from 'choices.js'
 
 // Create a multiselect element.
 window.choices = (element) => {
   return new Choices(element, { maxItemCount: 3, removeItemButton: true });
-};
+}
 
 // Syntax highlight code blocks.
 window.highlightCode = (element) => {
   element.querySelectorAll('pre code').forEach((block) => {
     hljs.highlightBlock(block);
-  });
-};
+  })
+}
 
 // Create Capitalize string
-window.capitalize = (string) => string.replace(/^\w/, (c) => c.toUpperCase());
+window.capitalize = (string) => string.replace(/^\w/, (c) => c.toUpperCase())
 
 // Create a snake case string
-window.snakeCase = (string) => string && string.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g).map(s => s.toLowerCase()).join('_');
+window.snakeCase = (string) => string && string.match(/[A-Z]{2,}(?=[A-Z][a-z]+[0-9]*|\b)|[A-Z]?[a-z]+[0-9]*|[A-Z]|[0-9]+/g).map(s => s.toLowerCase()).join('_')
 
 // Share a content to social Media
 const share = function () {
@@ -65,3 +65,31 @@ const share = function () {
 }
 
 share()
+
+// Get all p tag of a content and get the 8th to add a link element with affiliate link
+const addAffiliateLink = function () {
+  let articleContent = document.getElementById('content')
+
+  if (! articleContent) {
+    return;
+  }
+
+  let pTags = document.getElementById('content').querySelectorAll('p')
+  let i = 0
+  pTags.forEach((p) => {
+    if (i === 7) {
+      let a = document.createElement('a')
+      a.setAttribute('href', 'https://www.digitalocean.com/?refcode=d6dca1691fb4&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge')
+      a.setAttribute('target', '_blank')
+      a.classList.add('relative', 'affiliate', 'block', 'w-full', 'mb-6', 'overflow-hidden', 'rounded-lg', 'cursor-pointer')
+      a.innerHTML = `
+           <img src="/images/affiliate-link.jpg" class="w-full rounded-t-lg" alt="Affiliate link" />
+           <span class="block w-full h-auto px-3 py-2 font-bold text-center text-white uppercase text-xs bg-gradient-to-r from-green-500 via-indigo-600 to-blue-500">Obtenez le code gratuit en créant votre serveur 🚀</span>
+       `
+      p.parentNode.insertBefore(a, p.nextSibling)
+    }
+    i++
+  })
+}
+
+addAffiliateLink()