Live banner

assets/scss/custom.scss

@@ -69,6 +69,11 @@
     text-decoration: underline;
 }
 
+.frontpage-stream-container {
+    max-height: calc(75vh);
+    min-height: 36rem;
+    aspect-ratio: 16 / 9;
+}
 
 .video-container {
   aspect-ratio: 16 / 9;

content/english/_index.md

@@ -7,6 +7,31 @@ banner:
   content: "We are the largest indie conferences for low-level programmers. This is your portal to meet with folks into graphics, game engines, kernels, compilers, and more!"
   image: "/images/hmc_spread.png"
   hide_banner_img: true
+  live_banner:
+    enable: true
+    use_twitch: true
+    use_youtube: false
+    title: "Handmade Seattle 2024"
+    title_class: "text-black dark:text-white mb-4"
+    twitch_channel: "abnercoimbre"
+    youtube_channel_id: "UCkiOutDcOG0KRLQc71Pd-Fg" # found at: https://www.youtube.com/account_advanced, is currently yt/handmadecities
+    section_class: "pb-24"
+    buttons_class: "p-2 px-3"
+    buttons_row_class: "mt-4 text-white gap-4"
+    buttons:
+      - title: "Join Private Chat"
+        link: "https://chat.handmadecities.com"
+        class: "btn seattle-bg"
+      - title: "Twitch"
+        link: "https://twitch.tv/abnercoimbre"
+        class: "btn meetups-bg"
+        icon_only: true
+        icon: "fa-brands fa-twitch"
+      - title: "YouTube"
+        link: "https://youtube.com/handmadecities"
+        class: "btn bg-[#ff0000]"
+        icon_only: true
+        icon: "fa-brands fa-youtube"
   triple_section:
     enable: true
     img_left: "/images/hmb/boston-light-mode.svg"

content/english/jobs/_index.md

@@ -0,0 +1,4 @@
+---
+title: "Jobs"
+layout: under_construction
+---

layouts/_default/under_construction.html

@@ -1,7 +1,7 @@
 {{ define "main" }}
 <div class="bg-[url('/images/devon_starfield.png')] bg-cover min-h-screen flex items-center justify-center">
   <div class="text-4xl font-bold text-white">
-      <h1>Under Construction</h1>
+      <h1 class="text-white">Under Construction</h1>
       <p class="text-lg text-white text-center">We're actively working on this bit!</p>
   </div>
 </div>  

layouts/partials/components/live_banner.html

@@ -0,0 +1,51 @@
+{{ with .live_banner }}
+{{ if .enable }}
+<div class="{{ .section_class }}">
+  <h2 class="{{ .title_class }}">{{ .title }}</h2>
+  <div class="frontpage-stream-container">
+    <!-- twitch -->
+    {{ if .use_twitch }}
+    <!-- Add a placeholder for the Twitch embed -->
+    <div id="twitch-embed" style="width: 100%;height: 100%;"></div>
+
+    <!-- Load the Twitch embed JavaScript file -->
+    <script src="https://embed.twitch.tv/embed/v1.js"></script>
+
+    <!-- Create a Twitch.Embed object that will render within the "twitch-embed" element -->
+    <script type="text/javascript">
+      new Twitch.Embed("twitch-embed", {
+        width: "100%",
+        height: "100%",
+        channel: "{{ .twitch_channel }}",
+      });
+    </script>
+    {{ end }}
+    <!-- /twitch -->
+    {{ if .use_youtube }}
+    <div id="youtube-embed" style="width: 100%;height: 100%">
+      <iframe width="100%" height="100%"
+        src="https://www.youtube.com/embed/live_stream?channel={{ .youtube_channel_id }}" frameborder="0"
+        allowfullscreen>
+      </iframe>
+    </div>
+
+    {{ end }}
+
+    <!-- buttons -->
+    {{ $button_global_class := .buttons_class }}
+    {{ $buttons_row_class := .buttons_row_class }}
+    {{ if .buttons }}
+    <div class="col-10 {{ $buttons_row_class }}">
+      {{ range $i, $button := .buttons }}
+      <a href="{{ $button.link }}" class="{{ $button.class }} {{ $button_global_class }}" title="{{ $button.title }}">{{
+        if $button.icon }}<i class="{{ $button.icon }}"></i>{{ end }}{{ if ne $button.icon_only true }}{{ $button.title
+        | markdownify }}{{ end }}</a>
+      {{ end }}
+    </div>
+    {{ end }}
+    <!-- /buttons -->
+
+  </div>
+</div>
+{{ end }}
+{{ end }}