re-arrange proposed video and content into two columns

.github/workflows/sync-working-groups.yml

@@ -0,0 +1,46 @@
+name: Sync working groups
+
+env:
+  JVM_VERSION: '21'
+
+on:
+  schedule:
+    - cron: '0 * * * *'
+  workflow_dispatch:
+jobs:
+  sync:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: main
+
+      - name: Install JDK ${{ env.JVM_VERSION }}
+        uses: actions/setup-java@v4
+        with:
+          distribution: temurin
+          java-version: ${{ env.JVM_VERSION }}
+
+      - name: Build working groups YAML file
+        uses: jbangdev/jbang-action@v0.115.0
+        with:
+          script: working-groups/src/main.java
+          jbangargs: --verbose -Dworking-groups.output=_data/wg.yaml
+        env:
+          JBANG_REPO: /root/.jbang/repository
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }} 
+
+      - name: Configure Git author
+        run: |
+            git config --local user.email "action@github.com"
+            git config --local user.name "GitHub Action"
+
+      - name: Commit changes
+        shell: bash
+        run: |
+            git add _data/wg.yaml
+            if [ -n "$(git status --porcelain)" ]; then
+              git commit -am "Sync working groups"
+            fi
+            git pull origin main --rebase
+            git push origin main

_data/wg.yaml

@@ -0,0 +1,73 @@
+---
+working-groups:
+    - title: "WebSocket Next"
+      board-url: "https://github.com/orgs/quarkusio/projects/26"
+      short-description: WebSocket-Next related tasks
+      readme: |
+        <p>The WebSocket Next <em>focus group</em> aims to improve our WebSocket experience.</p>
+        <p>Recently, we delivered a new approach to dealing with WebSocket (both for the server and client). This was the first step. There are still a few areas to improve, such as documentation, security, observability, and testability. The goal of this focus group is to track these efforts.</p>
+        <p>Point of contact: @mkouba (@<strong>Martin Kouba</strong>  on Zulip)</p>
+      status: on track
+      last-activity: 12/07/2024
+    - title: "Quarkus 3.15 LTS"
+      board-url: "https://github.com/orgs/quarkusio/projects/28"
+      short-description: This WG focuses on defining the issues we would like to have in the next-to-be LTS (Quarkus 3.14/3.15)
+      readme: |
+        <p>This working group uses a different board:</p>
+        <ul>
+        <li>The <code>under discussion</code> column contains the issues we would like to have in the next LTS but are still under consideration.</li>
+        <li>The <code>out of scope</code> column contains the issues under discussion' that won't be included. The reason can be time or technical...</li>
+        <li>The <code>in progress</code> means that the work has started and should be completed before the TLS cut date</li>
+        <li>The <code>done</code> column means that the issues have been completed</li>
+        </ul>
+      status: at risk
+      last-activity: 11/07/2024
+    - title: "Enhanced TLS support"
+      board-url: "https://github.com/orgs/quarkusio/projects/24"
+      short-description: Track the progress around the new TLS configuration centralization and new features (like Let's Encrypt, Cert-Manager, and local experience...)
+      readme: |
+        <p>TLS is becoming increasingly common and recommended. However, for years, each Quarkus extension has been doing its own TLS configuration and management. As a result, the configuration looks different everywhere, and many extensions have incomplete configurations.</p>
+        <p>Based on the newly integrated TLS registry, we now have a single place to configure TLS. At runtime, it provides methods to configure Vert.x and &quot;pure&quot; Java clients (using an <code>SSLContext</code>).</p>
+        <p>The goal of this focus group is to continue integrating the TLS registry and improve Quarkus integration with certificate providers (Let's Encrypt, Cert-Manager). In addition, we would like to provide a frictionless local experience around TLS (i.e., without the infamous untrusted certificate screen).</p>
+        <p><em>Point of contact:</em> @cescoffier (@<strong>Clement Escoffier</strong> on Zulip)</p>
+      status: on track
+      last-activity: 09/07/2024
+    - title: "Docker file generation"
+      board-url: "https://github.com/orgs/quarkusio/projects/27"
+      short-description: A working group focusing on the generation of Dockerfile / ContainerFile
+      readme: |
+        <p>At the moment, when you create a Quarkus project (from code.quarkus.io or the CLI), a set of <code>Dockerfiles</code> is generated. However,</p>
+        <ol>
+        <li>Not all these files are used by the user</li>
+        <li>These files are very quickly outdated</li>
+        <li>It does not allow <em>extensions</em> to customize the content</li>
+        </ol>
+        <p>This working group aims to replace these `Dockerfiles' with a CLI command that generates an up-to-date Dockerfile and includes extension customization.</p>
+        <p>The goal is not to allow updating these files once generated but to provide a one-off generation that the user can consult and use. It will use the recommended and up-to-date <code>FROM</code> image to improve security and, depending on the generated <em>variant</em> (JVM, native, native-micro...), follow good practices (such as using <code>run-java</code> for the JVM one).</p>
+        <p>You can find more details about this working group on <a href="https://github.com/quarkusio/quarkus/discussions/41352">this discussion</a>.
+        Once completed, this working group will be followed by other initiatives focusing on generating the Github Action and Tekton pipelines.</p>
+        <p><em>Point of contact</em>: @iocanel (<code>Ioannis Canellos</code>on Zulip)</p>
+      status: on track
+      last-activity: 09/07/2024
+    - title: "Roq :: Quarkus SSG"
+      board-url: "https://github.com/orgs/quarkiverse/projects/6"
+      short-description: Allow Static Site Generation with Quarkus.
+      readme: |
+        <p>New initiative to allow Static Site Generation with Quarkus.</p>
+        <p>Quarkus already provides most of the pieces to create great web applications (https://quarkus.io/guides/web).</p>
+        <p>I recently added https://github.com/quarkiverse/quarkus-roq. It will allow generating a static website out of any Quarkus application (it starts the app, fetch all the configured pages and assets, generate a static website and stop), it already works but it is still very alpha.</p>
+        <p>What's missing? we now need to incrementally add the toolkit to ease the process of creating static content through Quarkus:</p>
+        <ul>
+        <li>Static Data</li>
+        <li>Markdown/Asciidoc and frontmatter</li>
+        <li>SEO</li>
+        <li>Image processing</li>
+        <li>Easy to configure routing</li>
+        </ul>
+        <p>This will allow to develop the content using Quarkus dev-mode, and then generate for Github Pages or similar when it's ready.</p>
+        <p>Bonus, everything added will benefit any &quot;non-static&quot; Quarkus app and any Static Quarkus app could also become non static.</p>
+        <p>This effort is now tracked using a &quot;Working Group&quot; project: https://github.com/orgs/quarkiverse/projects/6</p>
+        <p>This is a great opportunity to participate in fun effort and be involved with the Quarkus community, if anyone is interested in being a part of this, please reach out to me 🚀</p>
+      status: on track
+      last-activity: 08/07/2024
+      last-update: Good progress so far.

_includes/about.html

@@ -34,4 +34,15 @@ <h3>Imperative and reactive code</h3>
       <p>This is helpful for both Java developers who are used to working with the imperative model and don’t want to switch things up, and those working with a cloud-native/reactive approach. The Quarkus development model can adapt itself to whatever app you’re developing. <br><a href="/continuum/">Learn more about Reactive</a></p>
     </div>
   </div>
+  <div class="grid-wrapper video-content-band">
+    <div class="width-12-12 width-12-12-m">
+      <h2>The inspiration behind Quarkus...</h2>
+    </div>
+    <div class="width-6-12 width-12-12-m video-container">
+      <iframe src="https://www.youtube.com/embed/SQDR34KoC-8" title="Quarkus why, how and what by Emmanuel Bernard" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
+    </div>
+    <div class="width-6-12 width-12-12-m">
+      <p>For more about the why, how and what of Quarkus, check out the Devoxx Belgium presentation where Quarkus 1.0 was released in November 2019.</p>
+    </div>
+  </div>
 </div>

_includes/working-group-band.html

@@ -0,0 +1,30 @@
+<div class="full-width-bg component-slim">
+  <div class="grid-wrapper working-groups-cards">
+    <div class="width-12-12 width-12-12-m">
+      <p class="mt-0 lead">
+        <span class="emph">Working Groups</span> are a way to organize the community around a specific topic or goal. 
+        They are a great way to get involved and help shape the future of Quarkus. 
+        If you are interested in joining a working group, please reach out to the point of contact on GitHub or Zulip.
+      </h3>
+    </div>
+
+
+    {% for item in site.data.wg.working-groups %}
+    <div class="card">
+      <div class="card-header">
+        <span class="card-title">{{ item.title }}</span>
+      </div>
+      <div class="card-body">
+        <p class="card-text"><span class="key">Status:</span>&nbsp;<span class="status {{ item.status | | replace: ' ', '-'}}">{{ item.status }}</span></p>
+        <p class="card-text"><span class="key">Description:</span>&nbsp;<span class="short-description">{{ item.short-description }}</span></p>
+        <p class="card-text"><span class="key">Last Activity:</span>&nbsp;<span class="last-activity">{{ item.last-activity }}</span></p>
+        {% if item.last-update %}<p class="card-text"><span class="key">Last status update:</span>&nbsp;<span class="last-update">{{ item.last-update }}</span></p>{% endif %}      
+      </div>
+      <div class="card-footer">
+        <!-- <a href="#" class="btn btn-sm btn-secondary me-1 mb-1 float-start" data-bs-toggle="modal" data-bs-target="#modal-{board.id}">More info</a> -->        
+        <a href="{{ item.board-url }}" class="button-cta float-end">Board</a>
+      </div>
+    </div>
+    {% endfor %}      
+  </div>
+</div>

_layouts/working-groups.html

@@ -0,0 +1,8 @@
+---
+layout: base
+---
+
+{% include title-band.html %}
+{% include working-group-band.html %}
+
+

_sass/layouts/working-groups.scss

@@ -0,0 +1,140 @@
+
+.working-groups-cards {
+
+  .emph {
+    font-weight: 600;
+    color: var(--link-color);
+  }
+
+  .card-header:first-child {
+    border-radius: 5px 5px 0 0;
+  }
+
+  .button-cta {
+    font-size: 1rem;
+    line-height: 1.2;
+    font-weight: normal;
+    padding: .5rem 1.2rem;
+  }
+
+  .lead {
+    font-size: 20px;
+    line-height: 1.8rem;
+    font-weight: 400;
+    margin-left: 0;
+    margin-right: 0;
+    margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+
+.float-end {
+    float: right !important;
+}
+
+  .text-start {
+    text-align: left !important;
+  }
+
+  .card-header {
+    padding-left: 10px;
+    padding-top: 10px;
+    padding-bottom: 5px;
+    color: rgb(33, 37, 41);
+    background-color: rgba(33, 37, 41, 0.03);
+    border-bottom: 1px solid rgba(0, 0, 0, 0.176);
+  }
+
+  .card-body {
+    padding: 1rem 1rem;
+    color: rgb(255, 255, 255);
+  }
+
+  .card-footer {
+    padding-top: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    padding-bottom: 10px;
+    color: rgb(33, 37, 41);
+    background-color: rgba(33, 37, 41, 0.03);
+    border-top: 1px solid rgba(0, 0, 0, 0.176);
+  }
+
+  .card-title {
+    font-size: 1.25rem;
+    font-weight: 400;
+  }
+
+  .card-text {
+    margin-bottom: 0.5rem;
+  }
+
+  .key {
+    font-weight: 600;
+  }
+
+  .card {
+    display: inline-grid;
+    font-family: "Open Sans", sans-serif;
+    font-size: 16px;
+    position: relative;
+    color: rgb(33, 37, 41);
+    word-wrap: break-word;
+    background-color: rgb(255, 255, 255);
+    background-clip: border-box;
+    border: 1px solid rgba(0, 0, 0, 0.176);
+    width: calc(100% - 2rem);
+
+    grid-column: span 6;
+
+        @media screen and (max-width: 1300px) {
+         grid-column: span 6;
+        }
+
+        @media screen and (max-width: 768px) {
+          grid-column: span 12;
+        }
+
+        @media screen and (max-width: 480px) {
+          grid-column: span 12;
+        }
+  }
+
+  .status {
+    font-family: "Open Sans", sans-serif;
+    font-weight: lighter;
+    display: inline-block;
+    padding: 0.35rem 0.65rem;
+    line-height: 1;
+    text-align: center;
+    vertical-align: baseline;
+    border-radius: 0.375rem;
+
+  }
+
+  .inactive {
+    color: #fff !important;
+    background-color: RGBA(108, 117, 125, 1) !important;
+  }
+
+  .on-track {
+    color: #fff !important;
+    background-color: RGBA(25, 135, 84, 1) !important;
+  }
+
+  .at-risk, .staled {
+    color: #000 !important;
+    background-color: RGBA(255,193,7, 1) !important;
+  }
+
+  .off-track {
+    color: #fff !important;
+    background-color: RGBA(220, 53, 69, 1) !important;
+  }
+
+  .complete {
+    color: #000 !important;
+    background-color: RGBA(13, 202, 240, 1) !important;
+  }
+
+
+}

assets/css/main.scss

@@ -46,6 +46,7 @@ $baseurl: "{{ site.baseurl }}";
 @import "layouts/catalog";
 @import "layouts/publications";
 @import "layouts/documentation";
+@import "layouts/working-groups";
 @import "includes/header-navigation";
 @import "includes/libraries-standards-band";
 @import "includes/homepage-hero-band";

wg.md

@@ -0,0 +1,6 @@
+---
+layout: working-groups
+title: Working Groups
+subtitle: This page lists the currently running working groups.
+permalink: /wg/
+---

working-groups/application.yaml

@@ -0,0 +1,13 @@
+working-groups:
+  organizations:
+      - quarkusio
+      - quarkiverse
+  project-prefix: WG -
+
+
+quarkus:
+  smallrye-graphql-client:
+    github:
+      url: https://api.github.com/graphql
+      header:
+        Authorization: Bearer ${GITHUB_TOKEN}