Merge remote-tracking branch 'origin/better-zeus'

Gemfile

@@ -10,8 +10,6 @@ gem 'nanoc'
 gem 'pdfkit'
 gem 'sass'
 gem 'nokogiri'
-gem 'sassc'
-gem 'slim'
 
 group :nanoc do
   gem 'guard-nanoc'

Makefile

@@ -1,2 +1,11 @@
+.PHONY: live build setup
+
+live:
+	bundle exec nanoc live
+
 build:
-	nanoc
+	bundle exec nanoc
+
+setup:
+	which bundle || { { gem install bundler && which bundle; } || echo 'Could not find `bundle`.'" Make sure the directory with the Ruby's gem executables is in your PATH. (Typically ~/.gem/ruby/*/bin)" && false; }
+	bundle install

README.md

@@ -3,22 +3,24 @@ Durf Doen 2.0
 
 ## Setup instructions
 
-1. Install bundler (`gem install bundler`)
-2. Install other gems (`bundle install`)
-3. Build and serve the site (`bundle exec nanoc live`)
+1. Install Ruby, preferably the version specified in `.ruby-version`
+2. Install bundler (`gem install bundler`)
+3. Install other dependencies (`bundle install`)
+4. Build and serve the site (`bundle exec nanoc live`)
+
+To build the artefacts for production: `bundle exec nanoc`
 
 ### Setup on windows
 
-This is very flacky, but it might help to 
-- Ofcourse only install ruby 2.6
-- change `gem 'mini_racer'` to `gem 'mini_racer', platforms: :ruby` in Gemfile
-- following this github page https://github.com/eakmotion/therubyracer_for_windows
-- Edit this file `C:\Ruby26-x64\lib\ruby\gems\2.6.0\gems\eventmachine-1.2.7-x64-mingw32\lib` by adding `require 'em pure_ruby'` and a newline to the top of the file.
+This is very flaky, but it might help to
+- Of course only install Ruby 2.6
+- Change `gem 'mini_racer'` to `gem 'mini_racer', platforms: :ruby` in Gemfile
+- Follow this GitHub page https://github.com/eakmotion/therubyracer_for_windows
+- Edit this file `C:\Ruby26-x64\lib\ruby\gems\2.6.0\gems\eventmachine-1.2.7-x64-mingw32\lib`, adding `require 'em pure_ruby'` and a newline to the top of the file
 - After all this, on my machine, it still throws an exception, but the live reloading works, until it doesn't (most of the time after a failed compile)
 
+### Optional setup via Docker
 
-### Optional setup via docker
-
-You can run the code in a separated docker environment. It compiles the code and serves the files via nginx.
+You can run the code in a separated Docker environment. It compiles the code and serves the files via nginx.
 
     docker build --tag durfdoen2 . && docker run --publish 8080:80 --detach --name dd durfdoen2

Rules

@@ -6,7 +6,8 @@ preprocess do
   themas.each do |thema|
     content = ''
     attributes = {
-        naam: thema
+        identifier: thema,
+        naam: thema.capitalize
     }
     identifier = "/themas/#{thema}"
 

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.prepend(node);
+  }
+});

content/faq.erb

@@ -4,7 +4,7 @@ navigable: true
 order: 3
 ---
 <div>
-<h1>FAQ — Vaakgestelde vragen</h1>
+<h2>FAQ — Vaakgestelde vragen</h2>
 <% @items.find_all('/faq/*').each do |question| %>
   <details>
     <summary>

content/homepage.md

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

content/quiz/vraag4.md

@@ -125,7 +125,7 @@ antwoorden:
     antwoorden:
       - tekst: Vlaamse en nationale politiek
         vraag: Welke overtuiging?
-        type: dropdown
+        type: meerkeuze
         antwoorden:
           - tekst: Vlaams-Nationalistisch
             verenigingen:
@@ -136,32 +136,32 @@ antwoorden:
               - naam: kvhv
 
           - tekst: Antikapitalistisch
-            verenigingenen:
+            verenigingen:
               - naam: als
 
           - tekst: Christendemocratisch
-            verenigingenen:
+            verenigingen:
               - naam: cds
 
           - tekst: Marxistisch
-            verenigingenen:
+            verenigingen:
               - naam: comac
 
           - tekst: Ecologistisch
-            verenigingenen:
+            verenigingen:
               - naam: jgroen
               - naam: durgent
 
           - tekst: Vlaams-republikeins
-            verenigingenen:
+            verenigingen:
               - naam: jongnva
 
           - tekst: Socialistisch
-            verenigingenen:
+            verenigingen:
               - naam: js
 
           - tekst: Liberaal
-            verenigingenen:
+            verenigingen:
               - naam: lvsv
 
       - tekst: Europese politiek

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);
@@ -471,67 +501,71 @@ fieldset p label input {
   column-gap: 0.5rem;
   row-gap: 0.5rem;
 
-  align-items: center;
+  align-items: top;
   justify-items: center;
   align-content: center;
   grid-template-columns: repeat(3, minmax(33%, 170px));
 }
 
 .tile {
-  min-width: 200px;
-  max-width: 300px;
-  flex: 1 0 calc(25% - 10px);
+  flex-direction: column;
   position: relative;
-}
-
-.tile--small {
-  min-width: 50px;
-  max-width: 50px;
-}
-
-.tile--medium {
-  min-width: 150px;
-  max-width: 200px;
-}
-
-.tile--blue {
-  background-color: var(--darkblue);
-}
-
-.tile::before {
-  content: "";
-  float: left;
-  padding-top: 100%;
+  width: 200px;
+  text-decoration: none;
 }
 
 .tile__image {
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-  height: 95%;
-  width: auto;
+  width: 200px;
+  height: 200px;
+}
 
-  transition: ease-in 0.2s;
-  transition-property: filter;
+.tile--small {
+  width: 50px;
+}
+.tile--small .tile__image {
+  width: 50px;
+  height: 50px;
+}
 
+.tile--medium {
+  width: 150px;
+}
+.tile--medium .tile__image {
+  width: 150px;
+  height: 150px;
+}
+
+.tile__image--blue {
+  background-color: var(--darkblue);
+}
+
+.tile__image {
+  height: 100%;
+  width: 100%;
+
+  padding: 1rem;
   display: flex;
   justify-content: center;
-}
 
-.tile__image--svg {
-  width: 80%;
-  height: auto;
-
-  fill: var(--white);
-}
-
-.tile__image svg {
-  width: 100%;
+  transform: scale(1);
+  transition: transform ease-in 0.1s;
 }
 
 .tile:hover .tile__image {
-  filter: blur(2px);
+  transform: scale(1.1);
+}
+
+.tile__image--svg {
+  width: 100%;
+  height: 100%;
+}
+
+.tile__image img, .tile__image svg {
+  width: auto;
+  height: 100%;
+}
+.tile__image svg {
+  fill: var(--white);
 }
 
 .tile:hover .tile__title {
@@ -539,42 +573,21 @@ fieldset p label input {
 }
 
 .tile__title {
-  opacity: 0;
-  position: absolute;
-  bottom: 0;
-  left: 0;
+  color: black;
   width: 100%;
-  max-width: 100%;
 
   font-size: 1.5rem;
 
   text-align: center;
   font-weight: bold;
-  color: white;
-  text-shadow: 2px 2px #333;
 
   padding: 5px;
-
-  transition: ease-in 0.2s;
-  transition-property: opacity;
 }
 
 .tile__title--medium {
   font-size: 1.2rem;
 }
 
-.clickable {
-  transform: scale(1);
-  transition: ease-in 0.2s;
-
-  transition-property: transform;
-}
-
-.clickable:hover {
-  cursor: pointer;
-  transform: scale(1.05);
-}
-
 .split-2 {
   display: flex;
   flex-wrap: wrap;
@@ -596,6 +609,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;

content/verenigingen.md

@@ -1,5 +1,5 @@
 ---
-naam: Ontdek Verenigingen
+naam: Ontdek verenigingen
 navigable: true
 order: 2
 ---

content/verenigingen/durgent.md

@@ -3,8 +3,6 @@ naam: D'URGENT
 id: durgent
 verkorte_naam: D'URGENT
 titel: D'URGENT
-id: ugent1010
-naam: UGent1010
 konvent: wvk
 website: https://www.greencommunity.be/durgent
 social:

content/verenigingen/westlandia.md

@@ -11,7 +11,7 @@ social:
     link: https://www.facebook.com/MoederWestlandia/
 themas:
   - streek
-postcode:
+postcodes:
   - 8600
   - 8610
   - 8620

content/verenigingen/zeus.md

@@ -6,16 +6,30 @@ verkorte_naam: Zeus WPI
 themas:
   - wetenschap en techniek
 konvent: wvk
-logo: placeholder.png
 contact: bestuur@zeus.ugent.be
 website: https://zeus.ugent.be/
 social:
   - platform: facebook
     link: https://www.facebook.com/zeus.wpi/
 showcase:
-  - photo: https://via.placeholder.com/300.png/09f/fff
-  - photo: https://via.placeholder.com/300.png/09f/fff
-  - photo: https://via.placeholder.com/300.png/09f/fff
+  - photo: /assets/logos/ZeusA.jpg
+  - photo: /assets/logos/ZeusB.jpg
+  - photo: /assets/logos/ZeusC.jpg
 ---
 
-Een passie voor informatica en zin om hands-on bij te leren? Zeus doet je verder kijken dan wat het lessenpakket aanbiedt. Bij ons vind je niet alleen lezingen en workshops rond alles wat met de computerwetenschappen te maken heeft maar ook een hoop coole projecten die we samen met onze leden uitwerken.
+Heb je je altijd al willen verdiepen in de duistere kunsten en leren hoe je computers laten doen wat je wil? Dan is Zeus WPI (of kort: Zeus) de vereniging voor jou! Zeus heeft haar lokaal in de kerkers (kelder) van S9, want informatici hebben toch geen zonlicht nodig...
+
+Zeus WPI is dé studentenvereniging voor iedereen die geïntereseerd is in computers, informatica en alles daarrond.
+
+Heb je (een idee voor) een project en wil je wat hulp, of feedback, wil je meewerken aan een reeds lopend (open-source) project, gewoon wat  random dingen doen met computers of een plekje hebben om samen te zitten met andere informatici? Dan is de kelder "the place to be". Nog geen ervaring met programeren of grotere projecten? Dan helpen wij je op weg!
+
+Meerdere keren per academiejaar organiseren we code-nights! Dit zijn avonden waar het vooral gaat om het gezellig samen zijn, maar natuurlijk wordt er nog geprogrammeerd ook, want in ons hart blijven we altijd informatici.
+
+Deze code-nights staan soms in het thema van één van onze talloze projecten; het telsysteem voor de 12-urenloop, de Hydra app (zeker eens proberen), en gamification (want voor ons is programeren soms een wedstrijd, maar deelnemen is belangrijker dan winnen).
+
+Tijdens de week ben je ook altijd welkom om je passie voor informatica te delen of gewoon even gezellig samen te zitten en wat ideeën uit te
+wisselen.
+
+Ook voor een Linux-install (er is ook de Linux Install Party, een event waar we Linux installeren) kan je altijd bij ons terecht!
+
+Voor een lijstje van projecten waar we mee bezig zijn, zie onze [GitHub](https://github.com/ZeusWPI)

layouts/homepage.erb

@@ -34,10 +34,32 @@
 <main id="main" class="align">
   <article>
     <h2>Kende je bijvoorbeeld deze vereniging al?</h2>
-
-    <section class="randomVereniging">
-      <h3>Weus ZPI</h3>
-      <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>
-    </section>
+    <div class="randomVerenigingenWrapper" id="display_repo">
+      <noscript>
+        <div class="randomVerenigingWrapper">
+          <a href="https://zeus.ugent.be">
+            <section class="randomVereniging">
+             <div class="randomVereniging_imageWrapper"><img loading=lazy src="https://zinc.zeus.gent" alt="logo van zeus %>" height="100"></div>
+              <hr class="randomVereniging_hr">
+              <h3>Zeus WPI</h3>
+              <p>Speciaal voor mensen zonder JavaScript</p>
+            </section>
+          </a>
+        </div>
+      </noscript>
+    </div>
+    <div class="randomVerenigingenWrapper hidden" id="hidden_repo">
+      <% for item in verenigingen %>
+        <div class="randomVerenigingWrapper" <%= (item['id'] == "zeus") ? "data-iszeus" : "" %> >
+          <a href="<%= item['path'] || test %>">
+            <section class="randomVereniging">
+             <div class="randomVereniging_imageWrapper"><img loading=lazy src="<%= item["image_url"] %>" alt="logo van <%= item['naam'] %>" height="100"></div>
+              <hr class="randomVereniging_hr">
+              <h3><%= item['naam'] %></h3>
+            </section>
+          </a>
+        </div>
+      <% end %>
+    </div>
   </article>
 </main>

layouts/partials/navbar.erb

@@ -9,7 +9,7 @@
     <% for i in navigables %>
       <li class="nav-item">
         <a href="<%= i.path %>" class="nav-link">
-          <%= @items["/assets/navbar_icons/"+i[:naam]+".svg"].compiled_content %>
+          <%= @items["/assets/navbar_icons/"+i.identifier.without_ext[1..]+".svg"].compiled_content %>
           <span class="link-text"><%= i[:naam] %> </span>
         </a>
       </li>
@@ -27,7 +27,7 @@
 </nav>
 
 <script>
-  const nav_links = document.querySelectorAll(".nav_link");
+  const nav_links = document.querySelectorAll(".nav-link");
   nav_links.forEach(nav_link => {
     if (nav_link.getAttribute("href") === window.location.pathname) {
       nav_link.classList.add("active_link");

layouts/partials/question.erb

@@ -42,12 +42,14 @@
 
       return postcodes;
     })();
-
+    console.log(postcodes);
     let last_answered = [];
 
     const postcodeField = document.getElementById("postcodeField");
 
     const handler = () => {
+      console.log(postcodeField.value);
+
       const selected = postcodes[postcodeField.value] || [];
 
       // Update results

layouts/quiz.erb

@@ -1,5 +1,5 @@
 <div>
-  <% @items.find_all("/quiz/*").each_with_index do |quest, i| %>
+  <% @items.find_all("/quiz/*").sort_by{ |x| x.path }.each_with_index do |quest, i| %>
     <div id="question_<%=i+1%>" class="question hidden">
       <%= render '/partials/question.*', question: quest, number: i.to_s %>
     </div>

layouts/verenigingen.erb

@@ -1,25 +1,27 @@
 <div class="split-2">
   <div class="split-2-1">
-    <h1 class="split-title"> Thema's </h1>
+    <h2 class="split-title">Thema's</h2>
     <div class="tile-grid">
       <% for thema in themas %>
-        <div class="tile clickable tile--medium tile--blue" onclick="window.location.href = '<%= thema.path %>'">
-          <div class="tile__image tile__image--svg">
-            <%= @items["/assets/themas_icon/"+thema[:naam]+".svg"].compiled_content %>
+        <a class="tile clickable tile--medium" href="<%= thema.path %>">
+          <div class="tile__image tile__image--svg tile__image--blue">
+            <%= @items["/assets/themas_icon/"+thema[:identifier]+".svg"].compiled_content %>
           </div>
           <p class="tile__title tile__title--medium"> <%= thema[:naam] %> </p>
-        </div>
+        </a>
       <% end %>
     </div>
   </div>
   <div class="split-2-2">
-    <h1 class="split-title"> Konventen </h1>
+    <h2 class="split-title">Konventen</h2>
     <div class="tile-grid">
       <% for item in konventen %>
-        <div class="tile clickable tile--medium" onclick="window.location.href = '<%= item.path %>'">
-          <img class="tile__image" src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">
+        <a class="tile clickable tile--medium" href="<%= item.path %>">
+          <div class="tile__image">
+            <img src="https://dsa.ugent.be/api/verenigingen/<%= abbreviation(item) %>/logo?size=medium" alt="<%= item[:naam] %>">
+          </div>
           <p class="tile__title tile__title--medium"> <%= item[:titel] || item[:naam] %> </p>
-        </div>
+        </a>
       <% end %>
     </div>
   </div>

lib/helpers/verenigingen.rb

@@ -47,6 +47,9 @@ module VerenigingenHelper
         "konvent" => x[:konvent],
         "themas" => x[:themas],
         "postcodes" => x[:postcodes].to_a,
+        "id" => x[:id],
+        "path" => x.path,
+        "image_url" => image_url(x)
     } }.to_a
   end
 
@@ -74,15 +77,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