Event & community page

_includes/banner-event.html

@@ -0,0 +1,101 @@
+<div class="banner-event-slides">
+  <div id="poster">
+    <img
+      src="{{ page.image }}"
+      alt=""
+      draggable="false"
+      style="view-transition-name: post-image-{{ page.title | slugify }};"
+    />
+  </div>
+  <div id="map" data-location="{{ page.location | uri_escape }}"></div>
+</div>
+
+<ol class="banner-event-links">
+  <li>
+    <a href="#poster" tabindex="-1">Poster</a>
+  </li>
+  <li>
+    <a href="#map" tabindex="-1">Map</a>
+  </li>
+</ol>
+
+<script>
+  function initMap() {
+    const location = { lat: -34.397, lng: 150.644 };
+    const map = new google.maps.Map(document.getElementById("map"), {
+      zoom: 12,
+      center: location,
+      disableDefaultUI: true,
+      zoomControl: false,
+      mapTypeControl: false,
+      scaleControl: false,
+      streetViewControl: false,
+      rotateControl: false,
+      fullscreenControl: false,
+    });
+
+    const marker = new google.maps.Marker({
+      position: location,
+      map: map,
+    });
+  }
+</script>
+
+<!-- <script>
+  function initMap(lat, lng) {
+    const location = { lat: lat, lng: lng };
+    const map = new google.maps.Map(document.getElementById("map"), {
+      zoom: 12,
+      center: location,
+      disableDefaultUI: true,
+      zoomControl: false,
+      mapTypeControl: false,
+      scaleControl: false,
+      streetViewControl: false,
+      rotateControl: false,
+      fullscreenControl: false,
+    });
+
+    const marker = new google.maps.Marker({
+      position: location,
+      map: map,
+    });
+  }
+
+  function geocodeAddressAndInitMap(address) {
+    const geocoder = new google.maps.Geocoder();
+
+    geocoder.geocode({ address: address }, function (results, status) {
+      if (status === "OK") {
+        const lat = results[0].geometry.location.lat();
+        const lng = results[0].geometry.location.lng();
+        initMap(lat, lng);
+      } else {
+        alert("Geocode was not successful for the following reason: " + status);
+      }
+    });
+  }
+
+  document.addEventListener("DOMContentLoaded", function () {
+    const locationDataElement = document.getElementById("locationData");
+    const locationAddress = locationDataElement.getAttribute("data-location");
+
+    geocodeAddressAndInitMap(locationAddress);
+  });
+</script> -->
+
+<script>
+  document.addEventListener("DOMContentLoaded", function () {
+    const bannerEventSlides = document.querySelectorAll(".banner-event-slides");
+
+    bannerEventSlides.forEach((slide) => {
+      const slideImage = slide.querySelector("img");
+      if (slideImage) {
+        colorjs.average(slideImage.src).then((color) => {
+          const rgbColor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
+          slide.style.backgroundColor = rgbColor;
+        });
+      }
+    });
+  });
+</script>

_includes/header.html

@@ -1,17 +1,4 @@
 <header>
-  <!-- <a href="/">
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      viewBox="0 0 1800 862"
-      alt="{{ site.title }} logo"
-      loading="lazy"
-    >
-      <path
-        d="M704.613 750.35 673.4 666.413l-79.835-214.795H497.72l-113.05 304.335L345.353 861.8l95.143.1L453 828.385l.3-.1 165.674-51.323L650.69 862h95.143l-41.219-111.65ZM492.72 722.438l-24.41 7.603 29.512-21.41 47.622-128.356v-.2l.2.2 42.018 112.65-94.942 29.513Zm355.158-155.87-9.704-22.31 9.704 22.31Zm272.02-115.25V861.8h-89.74v-.1h-54.723L838.173 544.259l17.307 72.932V861.8l-89.74-.5V451.317h32.315l-.1-.1h99.644l.1.1 132.459 306.637V451.317h89.74Zm462.606 89.24v73.632h130.058v91.04h-130.058l-31.414-.1.5.1 30.914 12.006v55.724H1800v88.74h-308.237v-.4h-.3V451.718H1800v88.84h-217.497Zm-111.75-89.54v90.54h-124.755c-64.028 0-115.951 51.322-115.951 115.35 0 60.128 45.72 109.45 104.246 115.252 2.001.2 3.902.3 5.903.4 1.9.1 3.901.1 5.802.1h124.756v89.14h-124.756c-113.65 0-205.791-91.841-205.791-205.492 0-113.55 91.64-205.09 205.191-205.29h125.356Zm80.837 254.212-.5-.1M177.478 451.117l-176.779.2L0 862h177.079c113.65 0 205.791-91.84 205.791-205.491S291.23 451.117 177.48 451.117Zm11.405 321.043c-2 .2-3.902.3-5.903.4-1.9.1-3.801.1-5.802.1H52.423l36.517-9.804V541.457h88.239c64.028 0 115.951 51.323 115.951 115.352.1 60.227-45.62 109.549-104.246 115.351ZM706.214 0H610.37l-112.85 303.935-.2.4-39.117 105.447-.2.4 95.142.1 12.706-33.915.2-.1 165.573-51.323.1.3 31.714 85.038h95.143L706.214 0ZM581.859 277.824l28.712-20.81 47.622-128.357v-.1l.2.2 41.918 112.35-118.452 36.717ZM435.393.1v410.182h-89.04l.201-147.265H157.27v147.265H68.23V.1h89.04v174.077l189.484.3.3-174.377h88.34Zm64.029 303.835-.1.4-39.117 105.447h-.2l39.317-105.747.1-.1Zm1141.407 15.507h90.94v90.94h-90.94v-90.94ZM1264.262 90.34v.1-.1ZM1441.241 0l-176.779.2-.7 410.683h177.078c113.651 0 205.792-91.841 205.792-205.492S1554.992 0 1441.24 0Zm11.505 321.043c-2.001.2-3.902.4-5.903.4-1.9.1-3.802.2-5.803.2h-124.755l36.516-9.904V90.44h88.24c64.028 0 116.051 51.323 116.051 115.352-.1 60.026-45.82 109.348-104.346 115.25Zm-208.993 89.44h-125.056L971.032 262.916h-2.802v147.565h-.1l-88.639.5.1-296.13h88.64v59.726h136.66c23.71 0 43.02-19.209 43.02-43.02 0-21.91-16.408-40.017-37.718-42.618H848.578L815.763.4h295.23c38.218 1.701 72.233 19.809 95.143 47.421a121.504 121.504 0 0 1 12.306 17.708c11.305 19.409 17.808 41.919 17.808 66.03 0 72.532-58.827 131.258-131.259 131.258h-33.815l37.317 12.005 135.26 135.66Z"
-      />
-    </svg>
-  </a> -->
-
   <ul role="menu">
     <li role="presentation">
       <a

_includes/hosts.html

@@ -0,0 +1,55 @@
+{% for host in page.hosts %}
+<li>
+  {% assign lowercase_host = host | slugify %} {% if lowercase_host == 'q-dance'
+  %}
+  <a href="https://www.q-dance.com" target="_blank" rel="noopener noreferrer">
+    <div class="icon">
+      <svg alt="{{ host }} icon" aria-hidden="true">
+        <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use>
+      </svg>
+    </div>
+    {{ host }}
+  </a>
+  {% elsif lowercase_host == 'b2s' %}
+  <a href="https://www.b2s.nl" target="_blank" rel="noopener noreferrer">
+    <div class="icon">
+      <svg alt="{{ host }} icon" aria-hidden="true">
+        <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use>
+      </svg>
+    </div>
+    {{ host }}
+  </a>
+  {% elsif lowercase_host == 'art-of-dance' %}
+  <a href="https://www.artofdance.nl" target="_blank" rel="noopener noreferrer">
+    <div class="icon">
+      <svg alt="{{ host }} icon" aria-hidden="true">
+        <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use>
+      </svg>
+    </div>
+    {{ host }}
+  </a>
+  {% elsif lowercase_host == 'tomorrowland' %}
+  <a
+    href="https://www.tomorrowland.com"
+    target="_blank"
+    rel="noopener noreferrer"
+  >
+    <div class="icon">
+      <svg alt="{{ host }} icon" aria-hidden="true">
+        <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use>
+      </svg>
+    </div>
+    {{ host }}
+  </a>
+  {% elsif lowercase_host == 'bass-events' %}
+  <a href="https://www.bassevents.be" target="_blank" rel="noopener noreferrer">
+    <div class="icon">
+      <svg alt="{{ host }} icon" aria-hidden="true">
+        <use xlink:href="/assets/symbols.svg#{{ lowercase_host }}"></use>
+      </svg>
+    </div>
+    {{ host }}
+  </a>
+  {% else %} {{ host }} {% endif %}
+</li>
+{% endfor %}

_layouts/community.html

@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+  <head>
+    {% include head.html %}
+    <script src="https://cdn.jsdelivr.net/npm/@widgetbot/html-embed"></script>
+  </head>
+  <body>
+    {% include header.html %}
+    <widgetbot
+      server="872048962041970709"
+      channel="872048962041970712"
+      width="100%"
+      height="100%"
+    ></widgetbot>
+    {% include footer.html %} {% include dialog.html %}
+  </body>
+</html>

_layouts/event.html

@@ -3,46 +3,103 @@
   <head>
     {% include head.html %}
     <script src="https://unpkg.com/[email protected]/dist/color.js"></script>
+    <script
+      async
+      defer
+      src="https://maps.googleapis.com/maps/api/js?key={{ site.google_maps_api_key }}&callback=initMap"
+    ></script>
   </head>
   <body>
     {% include header.html %}
 
+    <div class="banner" data-variant="event" id="top">
+      {% include banner-event.html %}
+    </div>
+
     <main>
-      <div
-        class="banner event-banner"
-        style="background-image: url({{ page.image }});"
-      >
-        <h1>{{ page.title }}</h1>
+      <div class="page-title">
+        <h1
+          style="view-transition-name: post-title-{{ page.title | slugify }};"
+        >
+          {{ page.title }}
+        </h1>
+
+        <ul class="page-title-input-container">
+          {% if page.facebook %}
+          <li>
+            <a
+              href="{{ page.facebook }}"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Facebook
+            </a>
+          </li>
+          {% endif %} {% if page.tickets %}
+          <li>
+            <a
+              href="{{ page.tickets }}"
+              target="_blank"
+              rel="noopener noreferrer"
+            >
+              Purchase
+            </a>
+          </li>
+          {% endif %}
+        </ul>
       </div>
 
-      <iframe
-        width="520"
-        height="400"
-        frameborder="0"
-        scrolling="no"
-        marginheight="0"
-        marginwidth="0"
-        id="gmap_canvas"
-        src="https://maps.google.com/maps?width=520&amp;height=400&amp;hl=en&amp;q={{ page.location | uri_escape }}+()&amp;t=&amp;z=12&amp;ie=UTF8&amp;iwloc=B&amp;output=embed"
-      ></iframe>
-    </main>
+      <dl>
+        <dt>Date announced</dt>
+        <dd>
+          <time datetime="{{ page.date | date: '%Y-%m-%d' }}">
+            {{ page.date | date: "%B %d, %Y" }}
+          </time>
+        </dd>
 
-    <script>
-      document.addEventListener("DOMContentLoaded", function () {
-        // Select all images
-        const images = document.querySelectorAll(".event-list-item-image");
+        <dt>Date{% if page.dateend %}s{% endif %}</dt>
+        <dd>
+          <time datetime="{{ page.datestart | date: '%Y-%m-%d' }}">
+            {{ page.datestart | date: "%B %d, %Y" }}
+          </time>
+          {% if page.dateend %}&nbsp;–&nbsp;
+          <time datetime="{{ page.dateend | date: '%Y-%m-%d' }}">
+            {{ page.dateend | date: "%B %d, %Y" }}
+          </time>
+          {% endif %}
+        </dd>
+
+        {% if page.location %}
+        <dt>Location</dt>
+        <dd>
+          <a
+            href="https://www.google.com/maps/place/{{ page.location | uri_escape }}"
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {{ page.location }}
+          </a>
+        </dd>
+        {% endif %} {% if page.type %}
+        <dt>Type</dt>
+        <dd>{{ page.type }}</dd>
+        {% endif %} {% if page.genre %}
+        <dt>Genre</dt>
+        <dd>{{ page.genre }}</dd>
+        {% endif %} {% if page.age %}
+        <dt>Age</dt>
+        <dd>{{ page.age }}</dd>
+        {% endif %} {% if page.hosts %}
+        <dt>Host{% if page.hosts.size > 1 %}s{% endif %}</dt>
+        <dd>
+          <ul>
+            {% include hosts.html %}
+          </ul>
+        </dd>
+        {% endif %}
+      </dl>
+    </main>
 
-        images.forEach((img) => {
-          const index = img.dataset.index; // Get the index from the data attribute
-          colorjs.average(img.src).then((color) => {
-            const rgbColor = `rgb(${color[0]}, ${color[1]}, ${color[2]})`;
-            const listItem = document.getElementById(
-              `event-list-item-${index}`
-            );
-            listItem.style.backgroundColor = rgbColor; // Apply the color to the <li>
-          });
-        });
-      });
-    </script>
+    {% include footer.html %} {% include dialog.html %}
   </body>
 </html>