Widget: Homepage: Difference between revisions

Revision as of 14:50, 15 October 2023

Second version of the LINKS Community Center homepage.
Do not modify!

@@ Line 137: / Line 137: @@
              #hp-changes { border-top: var(--hp-border); }
          }
+        /* SNIPPETS */
+        .snippet { display: inline-block; }
      </style>
@@ Line 144: / Line 147: @@
              const searchString = document.getElementById('hp-search-input').value;
              window.location.assign('/index.php?search=' + encodeURIComponent(searchString) + '&title=Special%3ASearch&profile=default&fulltext=1');
+        }
+    </script>
+    <script>
+        const maxAmount = 6;    // maximum number of snippets
+        const snippets = [
+            {
+                "title": "Are you overwhelmed by too many social media technologies?",
+                "body": "Visit our Technologies Library to find the technology you need.",
+                "action": "/index.php/List_of_Disaster_Community_Technologies",
+                "product": "TL",
+            },
+            {
+                "title": "Do you want to be prepared when disaster strikes?",
+                "body": "Learn from over 30 use cases about social media and crowdsourcing.",
+                "action": "/index.php/List_of_Use_Cases",
+                "product": "UCL",
+            },
+        ];
+        const container = document.getElementById('snippets');
+        // Fisher-Yates shuffling algorithm
+        const shuffleArray = (array) => {
+            for (let i = array.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1));
+                [array[i], array[j]] = [array[j], array[i]];
+            }
+            return array;
+        };
+        const indices = Array.from({ length: snippets.length }, (_, index) => index);
+        // Array of randomly selected snippets (by index)
+        // TODO: Make sure there is at least one snippet per product.
+        let selection = shuffleArray(indices);
+        if (selection.length > maxAmount) selection = selection.slice(0, maxAmount);
+        for (const index of selection) {
+            const snippet = snippets[index];
+            let el = '<a class="snippet ' + snippet.product + '" href="' + snippet.action + '">';
+                el += '<div class="snippet-header">' + snippet.title + '</div>';
+                el += '<div class="snippet-body"'> + snippet.body + '</div>';
+                el += '</a>';
+            container.innerHTML += el;
          }
      </script>
@@ Line 171: / Line 218: @@
              </div>
          </div>
+        <div id="snippets" style="display: none"></div>
          <div id="hp-main">