Merge pull request #531 from hpehl/conference

WildFly mini conference page

_data/conference.yaml

@@ -0,0 +1,40 @@
+- title: Welcome and opening ceremony
+  from: "14:00"
+  to: "14:15"
+- title: Introduction to WildFly and how to get started fast
+  from: "14:15"
+  to: "15:00"
+  abstract:
+    - "In this session the WildFly project itself will be introduced. You will get to know the different components that make up WildFly. We will take a closer look at the architecture and internal functionality of WildFly."
+    - "The session will also include a demo how to get started fast and how to deploy and evolve a very basic application."
+  speaker: hpehl
+  bio: "Harald Pehl is a principal software engineer at Red Hat. He works on the management capabilities of WildFly and leads the management console (HAL)."
+- title: Deploying WildFly applications to bare-metal and the cloud
+  from: "15:00"
+  to: "15:45"
+  abstract:
+    - "In this session, we'll see how Ansible can help deploy, configure, managed and maintened up to date Wildfly on any platform, from bare metal to VM and even clouds. We'll deal with Day 1 tasks in fully automated fashion, but also cover how to keep the system running after the initial deployment (Day 2)."
+  speaker: rpelisse
+  bio: "Romain Pelisse works at Red Hat for over a decade. He started as runtimes consultant, building on expertise on JBoss EAP (Wildfly), and moved to engineering where he became the lead of the Ansible runtimes initiative, focusing on providing the best integration possible between Red Hat middleware solutions and Ansible Automation Platform."
+- title: Break
+  from: "15:45"
+  to: "16:00"
+- title: What is new in WildFly and roadmap for future releases
+  from: "16:00"
+  to: "16:45"
+  abstract:
+    - "In this session we'll provide an overview of what's new in the WildFly project in the last several months, particularly in the WildFly 31 release. Then we'll describe where we see things going in WildFly over the remainder of 2024 -- release plans, a possible roadmap for Jakarta EE 11 support, plans around Java SE support and ideas around significant new features and initiatives."
+  speaker: bstansberry
+  bio: "Brian Stansberry is the lead of the WildFly application server project and the principal architect of Red Hat's JBoss Enterprise Application Platform."
+- title: WildFly Glow
+  from: "16:45"
+  to: "17:30"
+  abstract:
+    - "In this session you will be introduced to WildFly Glow, a new approach to the WildFly provisioning."
+    - "We will cover WildFly provisioning in general, discuss potential issues, and we will see how WildFly Glow simplifies the WildFly provisioning experience."
+    - "During the presentation WildFly Glow tooling will be demonstrated."
+  speaker: jfdenise
+  bio: "Jean-François Denise is a principal software engineer at Red Hat. He is involved in WildFly provisioning and tooling (WildFly CLI, WildFly Bootable JAR, Openshift images, WildFly Glow)."
+- title: Feedback and closing ceremony
+  from: "17:30"
+  to: "18:00"

_layouts/conference.html

@@ -0,0 +1,84 @@
+---
+layout: base
+---
+
+<div class="about-page grid-wrapper conference">
+  <div class="grid__item width-12-12">
+    <h1>Wild<strong>Fly</strong> Mini Conference</h1>
+    <h2 class="page-subtitle">A dedicated conference for the community with topics around Wild<strong>Fly</strong>.
+    </h2>
+  </div>
+
+  <div class="grid__item width-12-12 sec-title-red">
+    <h2>What you need to know</h2>
+    <dl class="c-when-and-where">
+      <dt>Date</dt>
+      <dd id="c-date" data-date="2024-03-06"><a href="{{site.baseurl}}/assets/data/wildfly-mini-conference.ics" title="Click here to download an ICS file for the conference" type="text/calendar" download>Wednesday, March 6, 2024</a></dd>
+      <dt>Time</dt>
+      <dd>14:00 - 18:00 UTC</dd>
+      <dt>Location</dt>
+      <dd>
+        Virtually on <a href="https://www.youtube.com/live/_8g1rZ80u2A" target="_blank">YouTube Live</a>
+      </dd>
+    </dl>
+    <p>Registration is not required, but you can let us know that you <a href="https://forms.gle/zK6apuNk6rotXrkq5" target="_blank">plan to attend</a>. Click on the date to add the event to your calendar.<br/>You can also use the "Notify Me" button on YouTube if you would like to be notified about the conference.</p>
+  </div>
+
+  <div class="grid__item width-12-12 sec-title-yellow">
+    <h2>What you can expect</h2>
+    <p>The conference includes four sessions with topics for both beginners and advanced WildFly users. There will
+      be an opening and closing ceremony and a 15-minute break between the second and third session. We want all
+      sessions to be interactive, and you can ask questions at any time. Remember this is a conference for you -
+      the WildFly community!</p>
+
+    <div class="admonitionblock note" style="margin-bottom: 2rem">
+      <table>
+        <tbody>
+        <tr>
+          <td class="icon">
+            <div class="title">Note</div>
+          </td>
+          <td class="content">
+            <div class="paragraph">
+              <p>All times are in <strong>UTC</strong>. Click on the time to show the time in your time
+                zone.</p>
+            </div>
+          </td>
+        </tr>
+        </tbody>
+      </table>
+    </div>
+
+    {% for session in site.data.conference %}
+    {%- capture session_bg -%}
+    {%- if session.abstract -%}c-session-blue{%- else -%}c-session-gray{%- endif -%}
+    {%- endcapture -%}
+    <div class="c-session {{ session_bg }}">
+      <div class="c-time">
+        <span class="c-from">{{ session.from }}</span><span class="c-to">{{ session.to }}</span>
+      </div>
+      <div class="c-title">{{ session.title}}</div>
+      {% if session.abstract %}
+      <div class="c-abstract"><p>{{ session.abstract | join: "<br/>" }}</p></div>
+      {% endif %}
+      {% if session.speaker %}
+      {% assign speaker = site.data.authors[session.speaker] -%}
+      <div class="c-speaker-avatar">
+        <img class="avatar" height="60px" width="60px" src="{{site.baseurl}}/assets/img/authors/{{ session.speaker }}.jpg"
+             alt="{{ speaker.name }}" title="{{ speaker.name }}"/>
+      </div>
+      <div class="c-speaker-bio">{{ session.bio }}</div>
+      {% endif %}
+    </div>
+    {% endfor %}
+  </div>
+
+  <div class="grid__item width-12-12 sec-title-teal">
+    <h2>After the conference</h2>
+    <p>Please take some time to answer a few questions about the conference. What did you like, what can we do
+      better? It won't take long, and will help us make the next WildFly conference even better: <a
+              href="https://forms.gle/ruEytViEBBwthr5K7" target="_blank">conference feedback</a></p>
+
+  </div>
+</div>
+<script type="text/javascript" src="{{ '/assets/javascript/conference.js' | relative_url }}"></script>

_layouts/index.html

@@ -17,6 +17,12 @@ <h3>Now available: <span style="font-weight: 100;">Wild</span><strong>Fly</stron
 
   </div>
 
+  <div class="grid__item width-12-12 home-section">
+    <h2>Save the date!</h2>
+    <h3>We're hosting a conference on<br/>Wednesday, March 6</h3>
+    <h3><a href="{{site.baseurl}}/conference/">Wild<strong>Fly</strong> Mini Conference</a></h3>
+  </div>
+
   <div class="grid__item width-12-12 home-section">
     <div class="home-icons">
       <a href="https://github.com/wildfly/wildfly" class="github" target="_blank">Github</a>

_sass/layouts/conference.scss

@@ -0,0 +1,131 @@
+.conference {
+  .c-when-and-where {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-gap: 1.5rem;
+    font-size: 1.5rem;
+    line-height: 1.5rem;
+
+    dt {
+      font-weight: 600;
+      grid-column: 1;
+      text-align: right;
+    }
+
+    dd {
+      grid-column: 2;
+      margin: 0;
+    }
+  }
+
+  .c-session {
+    display: grid;
+    grid-template-columns: auto 1fr;
+    grid-template-rows: auto 1fr auto;
+    grid-template-areas:
+      "time title"
+      "time abstract"
+      "avatar bio";
+    grid-column-gap: 3rem;
+    padding: 2rem 1rem;
+
+    &:not(:last-of-type){
+      border-bottom: 1px solid white;
+    }
+  }
+
+  .c-session-gray {
+    background-color: $gray-2;
+  }
+
+  .c-session-blue {
+    background-color: $blue;
+  }
+
+  .c-time {
+    display: flex;
+    flex-direction: row;
+    grid-area: time;
+
+    @media (max-width: $breakpoint-m) {
+      flex-direction: column;
+      margin-right: 2rem;
+    }
+  }
+
+  .c-from, .c-to {
+    font-size: 1.5rem;
+    font-weight: 600;
+    line-height: 2rem;
+    opacity: 0.5;
+
+    @media (max-width: $breakpoint-m) {
+      font-size: 1.2rem;
+      line-height: 1.5rem;
+    }
+  }
+
+  .c-from {
+    white-space: nowrap;
+    &:after {
+      content: " - ";
+    }
+
+    @media (max-width: $breakpoint-m) {
+      &:after {
+        content: none;
+        white-space: normal;
+      }
+    }
+  }
+
+  .c-local-time:popover-open {
+    border: none;
+    font-size: 1.2rem;
+    font-weight: 500;
+    line-height: 1.5rem;
+    margin: 0 !important;
+    padding: 0.25rem;
+    text-wrap: balance;
+
+    @media (max-width: $breakpoint-m) {
+      font-size: 1rem;
+      line-height: 1.2rem;
+    }
+  }
+
+  .c-title {
+    font-size: 2rem;
+    font-weight: 100;
+    grid-area: title;
+    line-height: 2rem;
+
+    @media (max-width: $breakpoint-m) {
+      font-size: 1.5rem;
+    }
+  }
+
+  .c-abstract {
+    grid-area: abstract;
+    line-height: 1.2rem;
+  }
+
+  .c-speaker-avatar {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    grid-area: avatar;
+
+    @media (max-width: $breakpoint-m) {
+      order: 1;
+    }
+  }
+
+  .c-speaker-bio {
+    align-self: center;
+    font-size: 0.9rem;
+    font-weight: 100;
+    opacity: 0.6;
+    grid-area: bio;
+  }
+}

assets/css/main.scss

@@ -19,6 +19,7 @@ $content-width: 1000px;
 @import "includes/header-banner";
 
 @import "layouts/home";
+@import "layouts/conference";
 @import "layouts/downloads";
 @import "layouts/news";
 @import "layouts/error-page";

assets/data/wildFly-mini-conference.ics

@@ -0,0 +1,17 @@
+BEGIN:VCALENDAR
+VERSION:2.0
+PRODID:[email protected]
+BEGIN:VEVENT
+UID:20240209T113915Z@wildfly.org
+DTSTAMP:20240209T113915Z
+DTSTART:20240306T140000Z
+DTEND:20240306T180000Z
+SUMMARY:WildFly Mini Conference
+URL:https://wildfly.org/conference
+DESCRIPTION:A dedicated conference for the community with topics 
+ around WildFly.
+LOCATION;ALTREP="https://youtube.com/live/_8g1rZ80u2A":
+ Virtually on YouTube Live
+CLASS:PUBLIC
+END:VEVENT
+END:VCALENDAR

assets/javascript/conference.js

@@ -0,0 +1,64 @@
+/*
+ * JBoss, Home of Professional Open Source.
+ *
+ * Copyright 2024 Red Hat, Inc., and individual contributors
+ * as indicated by the @author tags.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+(() => {
+    "use strict";
+
+    window.addEventListener("load", () => {
+        const supportsPopover = HTMLElement.prototype.hasOwnProperty("popover");
+        if (supportsPopover) {
+            const timeFormat = new Intl.DateTimeFormat(navigator.language, {
+                hour: "numeric",
+                minute: "numeric"
+            });
+            const date = document.querySelector("#c-date").dataset["date"];
+            const timeElements = document.querySelectorAll(".c-time");
+            timeElements.forEach(timeElement => {
+                const from = new Date(date + "T" + timeElement.querySelector(".c-from").textContent + "Z");
+                const to = new Date(date + "T" + timeElement.querySelector(".c-to").textContent + "Z");
+                const localTime = timeFormat.format(from) + " - " + timeFormat.format(to);
+                const popover = document.createElement("div");
+                popover.classList.add("c-local-time")
+                popover.textContent = localTime;
+                popover.popover = "auto";
+                popover.addEventListener("toggle", (event) => {
+                    if (event.newState === 'open') {
+                        popover.style.left = timeElement.getBoundingClientRect().left + "px";
+                        popover.style.top = timeElement.getBoundingClientRect().top + "px";
+                        popover.style.width = timeElement.getBoundingClientRect().width + "px";
+                    }
+                });
+                timeElement.appendChild(popover);
+                timeElement.addEventListener("click", () => popover.togglePopover());
+            });
+
+            let ticking = false;
+            document.addEventListener("scroll", () => {
+                if (!ticking) {
+                    window.requestAnimationFrame(() => {
+                        document.querySelectorAll(".c-local-time:popover-open")
+                            .forEach(p => p.hidePopover());
+                        ticking = false;
+                    });
+                    ticking = true;
+                }
+            });
+        }
+    });
+})();

conference.md

@@ -0,0 +1,5 @@
+---
+layout: conference
+title: WildFly Mini Conference
+permalink: /conference/
+---