Add random verenigingen on homepage

content/assets/js/random_vereniging.js

@@ -0,0 +1,16 @@
+window.addEventListener('load', function() {
+  let options = document.getElementsByClassName('randomVerenigingWrapper');
+  let selected = Array.from(options).map(x => ({ x, r: Math.random() + -0.5 * x.hasAttribute('data-iszeus')}))
+   .sort((a, b) => a.r - b.r)
+   .map(a => a.x)
+   .slice(0, 3)
+   .map(x => ({ x, r: Math.random()}))
+   .sort((a, b) => a.r - b.r)
+   .map(a => a.x);
+
+  let destination = document.getElementById("display_repo");
+  for (node of selected) {
+    node.getElementsByTagName("img")[0].setAttribute("loading", "eager");
+    destination.appendChild(node);
+  }
+});

content/homepage.md

@@ -2,4 +2,5 @@
 naam: Home
 navigable: false
 order: 1
+head: <script src="/assets/js/random_vereniging.js"></script>
 ---

content/stylesheets/main.css

@@ -131,6 +131,46 @@ footer {
   outline: none;
 }
 
+.randomVerenigingen p:nth-child(odd) {
+    -webkit-text-stroke-width: 2px;
+    -webkit-text-stroke-color: var(--lightblue);
+    color: transparent;
+}
+
+.randomVerenigingen p {
+    text-transform: uppercase;
+}
+
+.randomVereniging{
+    border: 2px solid var(--yellow);
+    padding: 1rem;
+    margin: 1rem;
+}
+
+.randomVerenigingWrapper{
+    min-width: 20rem;
+    flex: 1;
+}
+
+.randomVerenigingenWrapper {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+}
+.randomVerenigingWrapper:nth-child(1){
+    padding-top: 4rem;
+}
+.randomVerenigingWrapper:nth-child(2){
+    padding-top: 2rem;
+}
+
+.randomVereniging_imageWrapper{
+    display: flex;
+    justify-content: center;
+    margin-bottom: 2rem;
+    margin-top: 1rem;
+}
+
 /* Small screens */
 @media only screen and (max-width: 600px) {
   .navbar {
@@ -358,16 +398,6 @@ h2 {
   top: 20%;
 }
 
-.randomVerenigingen p:nth-child(odd) {
-  -webkit-text-stroke-width: 2px;
-  -webkit-text-stroke-color: var(--lightblue);
-  color: transparent;
-}
-
-.randomVerenigingen p {
-  text-transform: uppercase;
-}
-
 .underline,
 .active_link {
   box-shadow: inset 0 -0.15em 0 var(--yellow);
@@ -590,6 +620,12 @@ fieldset p label input {
   }
 }
 
+@media only screen and (max-width: 1024px) {
+  .randomVerenigingWrapper:nth-child(1), .randomVerenigingWrapper:nth-child(2){ /* Dit heeft hogere prioriteit dan elk kind. */
+        padding-top: 0;
+  }
+}
+
 @media only screen and (max-width: 300px) {
   .tile-grid {
     grid-template-columns: auto;

layouts/homepage.erb

@@ -34,10 +34,19 @@
 <main id="main" class="align">
   <article>
     <h2>Kende je bijvoorbeeld deze vereniging al?</h2>
-
+    <div class="randomVerenigingenWrapper" id="display_repo"></div>
-    <section class="randomVereniging">
+    <div class="randomVerenigingenWrapper hidden" id="hidden_repo">
-      <h3>Weus ZPI</h3>
+      <% for item in verenigingen %>
-      <p>Weus ZPI is de studentenvereniging voor InFoRmAtIcA aan de UGent. Ons doel is een bullshitty omgeving te bullshitten voor bullshitted studenten die hun bullshit willen uitbreiden door zich te engageren voor bullshitprojecten.</p>
+        <div class="randomVerenigingWrapper" <%= (item['id'] == "zeus") ? "data-iszeus" : "" %> >
-    </section>
+          <a href="<%= item['path'] || test %>">
+            <section class="randomVereniging">
+             <div class="randomVereniging_imageWrapper"><img loading=lazy src="<%= image_url(item) %>" alt="logo van <%= item['naam'] %>" height="100"></div>
+              <hr class="randomVereniging_hr">
+              <h3><%= item['naam'] %></h3>
+            </section>
+          </a>
+        </div>
+      <% end %>
+    </div>
   </article>
 </main>

lib/helpers/verenigingen.rb

@@ -47,6 +47,8 @@ module VerenigingenHelper
         "konvent" => x[:konvent],
         "themas" => x[:themas],
         "postcodes" => x[:postcodes].to_a,
+        "id" => x[:id],
+        "path" => x.path
     } }.to_a
   end
 
@@ -59,7 +61,7 @@ module VerenigingenHelper
 
 
   def abbreviation(item)
-    item.identifier.without_ext.split('/').last
+    item['id']
   end
 
   def all_groups
@@ -74,15 +76,6 @@ module VerenigingenHelper
     end
   end
 
-  def verenigingen_random(amount)
-    @items.find_all("**/verenigingen/*").map { |x| {
-        "titel" => x[:titel],
-        "naam" => x[:naam],
-        "konvent" => x[:konvent],
-        "themas" => x[:themas]
-    } }.to_a.shuffle[0..amount]
-  end
-
   def image_tag(item)
     "<img src='#{ image_url item }' alt='#{ item[:naam] } logo' />"
   end