Friday night work (#36)

* Initial push. * Rebuild * Add `og:video` if post is featured and has video.
Hard-Dance · Feb 17, 2024 · ca5915c · ca5915c
1 parent 98018a1
commit ca5915c
Show file tree

Hide file tree

Showing 19 changed files with 222 additions and 91 deletions.
diff --git a/404.md b/404.md
@@ -0,0 +1,5 @@
+---
+layout: error
+title: Error
+image: /assets/img/og.png
+---
diff --git a/_config.yml b/_config.yml
@@ -21,6 +21,11 @@ sass:
 
 incremental: true
 
+facebook:
+  app_id: 2501572726592422
+  publisher: "https://www.facebook.com/harddotdance"
+  admins: 10161721660276983
+
 admins:
   - name: Eugene Berzin
     alias: Treachery

diff --git a/_includes/banner-event.html b/_includes/banner-event.html
@@ -1,4 +1,22 @@
 <div class="banner-event-slides">
+  {% if page.featured and page.video %}
+  <div id="trailer">
+    <video autoplay muted loop playsinline poster="{{ page.image }}">
+      <source
+        src="/assets/video/events/{{ page.title | slugify }}.mp4"
+        type="video/mp4"
+      />
+      <source
+        src="/assets/video/events/{{ page.title | slugify }}.ogv"
+        type="video/ogv"
+      />
+      <source
+        src="/assets/video/events/{{ page.title | slugify }}.webm"
+        type="video/webm"
+      />
+    </video>
+  </div>
+  {% endif %}
   <div id="poster" style="--_post-image: url({{ page.image }});">
     <img
       src="{{ page.image }}"
@@ -11,6 +29,11 @@
 </div>
 
 <ul class="button-group banner-event-links" data-variant="overlay">
+  {% if page.featured and page.video %}
+  <li>
+    <a class="button" href="#trailer" tabindex="-1">Trailer</a>
+  </li>
+  {% endif %}
   <li>
     <a class="button" href="#poster" tabindex="-1">Poster</a>
   </li>
@@ -41,49 +64,6 @@
   }
 </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");

diff --git a/_includes/title-bar.html b/_includes/title-bar.html
@@ -1,7 +1,8 @@
 <div class="page-title">
+  <h1 {% if page.layout == 'event' %}style="view-transition-name: post-title-{{ page.title | slugify }};"{% endif %}>{{ page.title }}</h1>
+
+  {% if page.layout == 'events' %}
   <div class="page-title-start">
-    {% if page.layout == 'events' %}
-    <h1>{{ page.title }}</h1>
     <a aria-label="View past events" class="button" href="/events/">
       <svg alt="Past icon" aria-hidden="true">
         <use xlink:href="/assets/symbols.svg#past"></use>
@@ -18,16 +19,8 @@ <h1>{{ page.title }}</h1>
       </svg>
       <span class="hide-on-mobile">Add</span>
     </button>
-    {% elsif page.layout == 'event' %}
-    <h1 style="view-transition-name: post-title-{{ page.title | slugify }};">
-      {{ page.title }}
-    </h1>
-    {% elsif page.layout == 'archives' %}
-    <h1>Past events</h1>
-    {% endif %}
   </div>
 
-  {% if page.layout == 'events' %}
   <div class="page-title-end">
     <a
       aria-label="Subscribe to RSS feed"
@@ -52,27 +45,31 @@ <h1>Past events</h1>
       <span class="hide-on-mobile">Filters</span>
     </label>
   </div>
-  {% elsif page.layout == 'event' %} {% if page.links %}
-  <ul class="button-group event-button-group page-title-end">
-    {% for link in page.links %}
-    <li>
-      <a
-        class="button"
-        href="{{ link.url }}"
-        target="_blank"
-        rel="noopener noreferrer"
-      >
-        <svg alt="{{ link.title }} icon" aria-hidden="true">
-          <use
-            xlink:href="/assets/symbols.svg#{{ link.title | slugify }}"
-          ></use>
-        </svg>
-        <span class="hide-on-mobile">{{ link.title }}</span>
-      </a>
-    </li>
-    {% endfor %}
-  </ul>
-  {% endif %} {% endif %} {% if page.layout == 'events' %}
+  {% elsif page.layout == 'event' %}
+    {% if page.links %}
+    <ul class="button-group page-title-end">
+      {% for link in page.links %}
+      <li>
+        <a
+          class="button"
+          href="{{ link.url }}"
+          target="_blank"
+          rel="noopener noreferrer"
+        >
+          <svg alt="{{ link.title }} icon" aria-hidden="true">
+            <use
+              xlink:href="/assets/symbols.svg#{{ link.title | slugify }}"
+            ></use>
+          </svg>
+          <span class="hide-on-mobile">{{ link.title }}</span>
+        </a>
+      </li>
+      {% endfor %}
+    </ul>
+    {% endif %}
+  {% endif %}
+
+  {% if page.layout == 'events' %}
   <div class="page-title-drawer">
     <label for="filter-location">
       Location

diff --git a/_layouts/error.html b/_layouts/error.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="{{ page.lang | default: site.lang | default: 'en' }}">
+  <head>
+    {% include head.html %}
+  </head>
+  <body style="overflow: hidden">
+    {% include header.html %}
+    <video
+      autoplay
+      muted
+      loop
+      playsinline
+      poster="/assets/video/about-banner.jpg"
+      class="error-video"
+    >
+      <source src="/assets/video/about-banner.mp4" type="video/mp4" />
+      <source src="/assets/video/about-banner.ogv" type="video/ogv" />
+      <source src="/assets/video/about-banner.webm" type="video/webm" />
+    </video>
+
+    <div class="error-content">
+      <img src="/assets/img/error.gif" alt="Where am I?" draggable="false" />
+      <h1 id="error-title"></h1>
+      <a href="/" class="button" data-variant="call-to-action">Go home</a>
+    </div>
+
+    <script>
+      document.addEventListener("DOMContentLoaded", function () {
+        var messages = [
+          "Somehow you found yourself somewhere you shouldn't be!",
+          "You’ve wandered outside the festival grounds!",
+          "Too much partying, you’ve lost your way!",
+          "Dude, you're in the wrong tent!",
+          "Seems like you took too much special K, and have dissociated!",
+        ];
+        var randomIndex = Math.floor(Math.random() * messages.length);
+        var randomMessage = messages[randomIndex];
+
+        document.getElementById("error-title").innerText = randomMessage;
+      });
+    </script>
+  </body>
+</html>
diff --git a/_layouts/event.html b/_layouts/event.html
@@ -1,7 +1,12 @@
 <!DOCTYPE html>
 <html lang="{{ page.lang | default: site.lang | default: 'en' }}">
   <head>
-    {% include head.html %}
+    {% include head.html %} {% if page.featured and page.video %}
+    <meta
+      property="og:video"
+      content="{{ site.url }}/assets/video/events/{{ page.title | slugify }}.mp4"
+    />
+    {% endif %}
     <script src="https://unpkg.com/[email protected]/dist/color.js"></script>
     <script
       async

diff --git a/_layouts/events.html b/_layouts/events.html
@@ -51,6 +51,29 @@
           %}
           data-aos="zoom-in-up"
         >
+          {% if post.featured and post.video %}
+          <video
+            autoplay
+            muted
+            loop
+            playsinline
+            poster="{{ post.image }}"
+            class="grid-item-image"
+          >
+            <source
+              src="/assets/video/events/{{ post.title | slugify }}.mp4"
+              type="video/mp4"
+            />
+            <source
+              src="/assets/video/events/{{ post.title | slugify }}.ogv"
+              type="video/ogv"
+            />
+            <source
+              src="/assets/video/events/{{ post.title | slugify }}.webm"
+              type="video/webm"
+            />
+          </video>
+          {% endif %}
           <img
             class="grid-item-image"
             src="{{ post.image }}"

diff --git a/_posts/2024-06-27-defqon-1-weekend-festival-2024.md b/_posts/2024-06-27-defqon-1-weekend-festival-2024.md
@@ -17,4 +17,7 @@ links:
   - title: Facebook
     url: https://www.facebook.com/events/838924394232971
 image: /assets/img/events/defqon-1-weekend-festival-2024.jpg
+
+featured: true
+video: true
 ---
diff --git a/_sass/components/_footer.scss b/_sass/components/_footer.scss
@@ -6,8 +6,8 @@ footer {
   margin-top: auto;
   color: var(--color-text-muted);
   font-size: var(--font-size-small);
-  height: var(--header-height);
-  padding-bottom: 1rem;
+  height: calc(var(--header-height) + env(safe-area-inset-bottom));
+  padding-bottom: min(1rem, env(safe-area-inset-bottom));
 
   // Mobile
   @media only screen and (max-width: 768px) {

diff --git a/_sass/components/_title-bar.scss b/_sass/components/_title-bar.scss
@@ -1,9 +1,36 @@
 .page-title {
   grid-column: full-width-start / full-width-end;
   display: grid;
-  column-gap: var(--page-padding);
-  grid-template-columns: 1fr auto;
-  grid-template-areas: "start end" "drawer drawer";
+  column-gap: var(--padding);
+  align-items: start;
+
+  // Desktop
+  @media only screen and (min-width: 769px) {
+    grid-template-columns: auto 1fr auto;
+    grid-template-areas:
+      "title start end"
+      "drawer drawer drawer";
+  }
+
+  // Mobile
+  @media only screen and (max-width: 768px) {
+    grid-template-columns: 1fr auto;
+    grid-template-areas:
+      "title title"
+      "start end"
+      "drawer drawer";
+  }
+
+  > h1 {
+    grid-area: title;
+    text-wrap: balance;
+    margin-left: max(var(--page-padding), env(safe-area-inset-left));
+
+    // Mobile
+    @media only screen and (max-width: 768px) {
+      margin-right: max(var(--page-padding), env(safe-area-inset-right));
+    }
+  }
 }
 
 .page-title-start,
@@ -15,10 +42,10 @@
 .page-title-start {
   grid-area: start;
   column-gap: var(--padding);
-  margin-left: max(var(--page-padding), env(safe-area-inset-left));
 
-  > h1 {
-    text-wrap: balance;
+  // Mobile
+  @media only screen and (max-width: 768px) {
+    margin-left: max(var(--page-padding), env(safe-area-inset-left));
   }
 }
 

diff --git a/_sass/pages/_error.scss b/_sass/pages/_error.scss
@@ -0,0 +1,28 @@
+.error-video,
+.error-content {
+  width: 100vw;
+  width: 100dvw;
+  height: 100vh;
+  height: 100dvh;
+}
+
+.error-video {
+  object-fit: cover;
+  position: absolute;
+  inset: 0;
+  z-index: -1;
+}
+
+.error-content {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  row-gap: 1rem;
+  text-align: center;
+  text-wrap: balance;
+  padding-top: max(var(--page-padding), env(safe-area-inset-top));
+  padding-left: max(var(--page-padding), env(safe-area-inset-left));
+  padding-right: max(var(--page-padding), env(safe-area-inset-right));
+  padding-bottom: max(var(--page-padding), env(safe-area-inset-bottom));
+}