attempting to dynamic tags, idfk if github pages will allow it

pixepchief · Jun 23, 2024 · 7b97040 · 7b97040
1 parent 7d0300f
commit 7b97040
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 2 deletions.
diff --git a/deck/index.html b/deck/index.html
@@ -9,9 +9,9 @@
     <link rel="stylesheet" href="./style.css">
     <link rel="icon" href="./favicon-32x32.png">
     <meta content="100% Orange Juice Deck Builder" property="og:title">
-    <meta content="An online deck builder for the game 100% Orange Juice, fully in your web browser!" property="og:description">
+    <meta id = "ogDescriptionMeta" content="An online deck builder for the game 100% Orange Juice, fully in your web browser!" property="og:description">
     <meta content="100% Orange Juice Deck Builder" property="og:site_name">
-    <meta content='https://pixepchief.github.io/100oj/images/siteLogo.png' property='og:image'>
+    <meta id = "ogImageMeta" content='https://pixepchief.github.io/100oj/images/siteLogo.png' property='og:image'>
     <meta name="theme-color" content="#FFBE64">
     <script src = "https://cdnjs.cloudflare.com/ajax/libs/tsparticles/1.18.11/tsparticles.min.js"> </script>
     <script>

diff --git a/deck/script.js b/deck/script.js
@@ -45,6 +45,7 @@ fetch('cards.json')
             const encodedDeck = urlParams.get('deck');
             deck = decodeDeck(encodedDeck);
             updateDeckDisplay();
+            updateMetaDescription(deck);
         }
 
         function updateDeckDisplay() {
@@ -118,6 +119,22 @@ fetch('cards.json')
             document.getElementById('page-number').innerText = `${currentPage}/${totalPages}`;
         }
 
+        function updateMetaDescription(deck) {
+            const ogDescriptionMeta = document.getElementById('ogDescriptionMeta');
+            const ogImageMeta = document.getElementById('ogImageMeta');
+            if (ogDescriptionMeta && ogImageMeta) {
+                const firstCard = deck.find(card => card !== null);
+                if (firstCard) {
+                    const deckDescription = deck.filter(card => card !== null).map(card => card.name).join(', ');
+                    ogDescriptionMeta.setAttribute('content', `A shared deck that contains the cards: ${deckDescription}`);
+                    ogImageMeta.setAttribute('content', `https://orangejuice.wiki/${firstCard.picture}`);
+                } else {
+                    ogDescriptionMeta.setAttribute('content', `An online deck builder for the game 100% Orange Juice, fully in your web browser!`);
+                    ogImageMeta.setAttribute('content', `https://orangejuice.wiki/w/images/Images/100OrangeJuice_images/2/2d/Back_0.png`);
+                }
+            }
+        }
+
         document.getElementById('prev-page').addEventListener('click', () => {
             if (currentPage > 1) {
                 currentPage--;