Update layout, code snippets dark mode, bump deps (#12)

jotak · jpinsonneau · web-flow · commit e2e0c82601f0 · 2025-02-13T17:01:07.000+01:00
* Update layout, code snippets dark mode, bump deps

* add sitemap

* Update templates/layouts/roq-default/post.html

Co-authored-by: Julien Pinsonneau &lt;91894519+jpinsonneau@users.noreply.github.com&gt;

* New admonition CSS

---------

Co-authored-by: Julien Pinsonneau &lt;91894519+jpinsonneau@users.noreply.github.com&gt;
diff --git a/.github/workflows/build-pr-preview.yml b/.github/workflows/build-pr-preview.yml
@@ -14,9 +14,7 @@ jobs:
         uses: quarkiverse/quarkus-roq@v1
         with:
           maven-executable: 'mvn'
-          maven-build-args: '-DskipTests -Dquarkus.profile=gh-pages'
           github-pages: 'false'
-          setup-java: 'false'
 
       - name: Store PR id
         run: |
diff --git a/content/posts/2022-12-12-3d_topology.md b/content/posts/2022-12-12-3d_topology.md
@@ -6,8 +6,11 @@ tags: Topology,Visualization,3D
 authors: [jpinsonneau]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/how-to-display-your-kubernetes-/-openshift-network-flows'>How to Display Your Kubernetes / OpenShift Network Flows</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/how-to-display-your-kubernetes-/-openshift-network-flows'>How to Display Your Kubernetes / OpenShift Network Flows</a>.
+  </p>
 </div>
 
 Red Hat OpenShift Container Platform (OCP) has had monitoring capabilities from the start and [Network Observability as Developer Preview](https://cloud.redhat.com/blog/a-guide-to-providing-insight-with-network-observability) since OCP 4.10 release.
diff --git a/content/posts/2023-09-12-dns_tracking.md b/content/posts/2023-09-12-dns_tracking.md
@@ -6,8 +6,11 @@ tags: eBPF,DNS,Monitoring,Troubleshooting
 authors: [jpinsonneau,memodi,msherif1234]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/network-observability-per-flow-dns-tracking'>Network Observability per flow DNS tracking</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/network-observability-per-flow-dns-tracking'>Network Observability per flow DNS tracking</a>.
+  </p>
 </div>
 
 ![logo]({page.image('dns-tracking/dns-tracking-logo.png')})
diff --git a/content/posts/2023-09-12-packet_drops.md b/content/posts/2023-09-12-packet_drops.md
@@ -6,8 +6,11 @@ tags: eBPF,Drops,Monitoring,Troubleshooting
 authors: [Amoghrd,jpinsonneau,msherif1234]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/network-observability-real-time-per-flow-packets-drop'>Network Observability real-time per flow packets drop</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/network-observability-real-time-per-flow-packets-drop'>Network Observability real-time per flow packets drop</a>.
+  </p>
 </div>
 
 ![logo]({page.image('packet-drops/packets-drop-logo.png')})
diff --git a/content/posts/2023-10-02-lokiless.md b/content/posts/2023-10-02-lokiless.md
@@ -6,8 +6,11 @@ tags: Infrastructure,Storage,ClickHouse,Loki
 authors: [jotak]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/deploying-network-observability-without-loki-an-example-with-clickhouse'>Deploying Network Observability without Loki: An example with ClickHouse</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+		Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/deploying-network-observability-without-loki-an-example-with-clickhouse'>Deploying Network Observability without Loki: An example with ClickHouse</a>.
+  </p>
 </div>
 
 This blog post talks about a new feature that comes with Network Observability (NetObserv) 1.4: the ability to deploy it without Loki, coupled with exporting flows to an alternative storage. It clarifies what this change is and what it isn't. Then it demonstrates the optional configuration for consuming flows outside of Loki. Finally, it explores potential avenues for future development that this feature enables.
diff --git a/content/posts/2023-10-02-secondary_interface.md b/content/posts/2023-10-02-secondary_interface.md
@@ -6,8 +6,11 @@ tags: Monitoring,Network,Multus,SRIOV
 authors: [msherif1234]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/fr/blog/network-observability-secondary-interface-support'>Network Observability secondary interface support</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/fr/blog/network-observability-secondary-interface-support'>Network Observability secondary interface support</a>.
+  </p>
 </div>
 
 Network observability for secondary interfaces with Multus and SR-IOV plugins
diff --git a/content/posts/2023-10-16-whats_new_1_4.md b/content/posts/2023-10-16-whats_new_1_4.md
@@ -6,8 +6,11 @@ tags: What's New,SRIOV,Drops,DNS,Latency
 authors: [stleerh]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/fr/blog/whats-new-in-network-observability-1.4'>What's new in Network Observability 1.4</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/fr/blog/whats-new-in-network-observability-1.4'>What's new in Network Observability 1.4</a>.
+  </p>
 </div>
 
 OpenShift Container Platform (OCP) is the leading Kubernetes environment for managing container-based applications.  However, this is just the core platform.  If you go to **OperatorHub** on the OpenShift web console (UI), you will see hundreds of *optional* operators, which are analogous to extensions for your browser.  Buried in this operator gold mine is one called Network Observability.  <img src="{page.image('whats-new-1-4/netobserv-operator.png')}" alt="Network Observability operator" width="300" align="right">
diff --git a/content/posts/2023-12-05-acm.md b/content/posts/2023-12-05-acm.md
@@ -6,8 +6,11 @@ tags: ACM,Multicluster,Metrics,Monitoring
 authors: [jotak]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/leveraging-netobserv-metrics-red-hat-advanced-cluster-management-kubernetes'>Leveraging NetObserv metrics in Red Hat Advanced Cluster Management for Kubernetes</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat blog: <a href='https://www.redhat.com/en/blog/leveraging-netobserv-metrics-red-hat-advanced-cluster-management-kubernetes'>Leveraging NetObserv metrics in Red Hat Advanced Cluster Management for Kubernetes</a>.
+  </p>
 </div>
 
 _Credits: Scott Berens, Sara Thomas, Julien Pinsonneau, Steven Lee, Olivier Cazade: thank you for kindly reviewing_
diff --git a/content/posts/2024-01-18-rtt.md b/content/posts/2024-01-18-rtt.md
@@ -6,8 +6,11 @@ tags: eBPF,Latency,Network
 authors: [dushyantbehl,jpinsonneau,msherif1234]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/02/27/network-observability-using-tcp-handshake-round-trip-time'>Network observability using TCP handshake round-trip time</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/02/27/network-observability-using-tcp-handshake-round-trip-time'>Network observability using TCP handshake round-trip time</a>.
+  </p>
 </div>
 
 In OpenShift Container Platform (OCP), ensuring efficient packet delivery is
diff --git a/content/posts/2024-02-28-whats_new_1_5.md b/content/posts/2024-02-28-whats_new_1_5.md
@@ -6,8 +6,11 @@ tags: What's New,Latency,Metrics,Configuration,AZ
 authors: [stleerh]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/03/20/whats-new-network-observability-15'>What's new in Network Observability 1.5</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/03/20/whats-new-network-observability-15'>What's new in Network Observability 1.5</a>.
+  </p>
 </div>
 
 Network Observability 1.5 is the new version of the operator from Red Hat that focuses on providing insights into networking.  There's an upstream version that runs on plain Kubernetes, but this blog will focus on using OpenShift Container Platform (OCP) and the OpenShift web console for the user interface.
diff --git a/content/posts/2024-07-25-cli.md b/content/posts/2024-07-25-cli.md
@@ -6,8 +6,11 @@ tags: CLI,Troubleshooting,Packet Capture
 authors: [jpinsonneau]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/09/17/network-observability-demand'>Network observability on demand</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/09/17/network-observability-demand'>Network observability on demand</a>.
+  </p>
 </div>
 
 ![logo]({page.image('cli/cli-logo.png')})
diff --git a/content/posts/2024-09-19-lokiless_netobserv.md b/content/posts/2024-09-19-lokiless_netobserv.md
@@ -6,8 +6,11 @@ tags: Performance,Metrics,Loki
 authors: [memodi,stleerh]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/09/19/lightweight-network-observability-operator-without-loki'>Light-weight Network Observability operator without Loki</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/09/19/lightweight-network-observability-operator-without-loki'>Light-weight Network Observability operator without Loki</a>.
+  </p>
 </div>
 
 Recently, the Network Observability Operator released version 1.6, which added a major enhancement to provide network insights for your OpenShift cluster without Loki. This enhancement was also featured in [What's new in Network Observability 1.6](https://developers.redhat.com/articles/2024/08/12/whats-new-network-observability-16) blog, providing a quick overview of the feature. Until this release, Loki was required to be deployed alongside Network Observability to store the network flows data. In this blog, lets look at some of the advantages and trade-offs users would have when deploying the Network Observability Operator with Loki disabled. As more metrics are enabled by default with this feature, we'll also demonstrate a use-case on how those metrics can benefit users for real world scenarios.
diff --git a/content/posts/2024-10-18-network_events.md b/content/posts/2024-10-18-network_events.md
@@ -6,8 +6,11 @@ tags: Monitoring,Network,NetworkPolicy,OVN
 authors: [msherif1234]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/11/19/monitor-ovn-networking-events-using-network-observability'>Monitor OVN networking events using Network Observability</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/11/19/monitor-ovn-networking-events-using-network-observability'>Monitor OVN networking events using Network Observability</a>.
+  </p>
 </div>
 
 <p align="center">
diff --git a/content/posts/2024-10-23-whats_new_1_6.md b/content/posts/2024-10-23-whats_new_1_6.md
@@ -6,8 +6,11 @@ tags: What's New,Prometheus,Loki,Performance,Configuration,Metrics,CLI
 authors: [stleerh]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/08/12/whats-new-network-observability-16'>What's new in Network Observability 1.6</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/08/12/whats-new-network-observability-16'>What's new in Network Observability 1.6</a>.
+  </p>
 </div>
 
 Network Observability 1.6 was released on June 2024.  Even though this is considered a minor version upgrade from 1.5, it is a significant release that could lower the barrier to adoption into production.
diff --git a/content/posts/2024-11-07-whats_new_1_7.md b/content/posts/2024-11-07-whats_new_1_7.md
@@ -6,8 +6,11 @@ tags: What's New,Developer,OpenTelemetry,eBPF,CLI
 authors: [stleerh]
 ---
 
-<div class="heading-info">
-Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/11/28/whats-new-network-observability-17'>What's new in Network Observability 1.7</a>.
+<div class="admonition admonition-info">
+  <p class="admonition-title"><i class="fa fa-lightbulb"></i>Update</p>
+  <p>
+    Check out the revised version of this post on the Red Hat developers blog: <a href='https://developers.redhat.com/articles/2024/11/28/whats-new-network-observability-17'>What's new in Network Observability 1.7</a>.
+  </p>
 </div>
 
 Network Observability 1.7 aligns with OpenShift Container Platform (OCP) 4.17, although it is compatible all the way back to 4.12.  Network Observability is an optional operator that provides insights into your network traffic and can help you troubleshoot networking issues.  There is an upstream version that runs on bare Kubernetes, but this blog focuses on the downstream version on OCP where you get the most benefit.
diff --git a/content/sitemap.xml b/content/sitemap.xml
@@ -0,0 +1 @@
+{#include fm/sitemap.xml}
diff --git a/pom.xml b/pom.xml
@@ -13,8 +13,8 @@
         <project.reporting.outputEncoding>UTF-8</project.reporting.outputEncoding>
         <quarkus.platform.artifact-id>quarkus-bom</quarkus.platform.artifact-id>
         <quarkus.platform.group-id>io.quarkus.platform</quarkus.platform.group-id>
-        <quarkus.platform.version>3.16.1</quarkus.platform.version>
-        <quarkus-roq.version>1.2.0</quarkus-roq.version>
+        <quarkus.platform.version>3.18.3</quarkus.platform.version>
+        <quarkus-roq.version>1.3.0.Alpha2</quarkus-roq.version>
         <skipITs>true</skipITs>
         <surefire-plugin.version>3.5.2</surefire-plugin.version>
     </properties>
@@ -57,6 +57,11 @@
             <artifactId>quarkus-roq-plugin-asciidoc</artifactId>
             <version>${quarkus-roq.version}</version>
         </dependency>
+        <dependency>
+            <groupId>io.quarkiverse.roq</groupId>
+            <artifactId>quarkus-roq-plugin-sitemap</artifactId>
+            <version>${quarkus-roq.version}</version>
+        </dependency>
         <dependency>
             <groupId>com.fasterxml.jackson.datatype</groupId>
             <artifactId>jackson-datatype-jsr310</artifactId>
diff --git a/src/main/resources/web/app/main.js b/src/main/resources/web/app/main.js
@@ -1,4 +1,4 @@
 import hljs from 'highlight.js';
-import 'highlight.js/scss/github.scss';
+import 'highlight.js/scss/a11y-dark.scss';
 
 hljs.highlightAll();
diff --git a/templates/layouts/roq-default/post.html b/templates/layouts/roq-default/post.html
@@ -8,16 +8,37 @@
 .page-share {
   visibility: hidden;
 }
-.heading-info {
-	font-size: 15pt;
-	background-color: #e7ffdc;
-	border-left: 5px solid #338a26;
-	padding-left: 1.1rem;
-	margin-left: 1rem;
-	font-style: italic;
-	color: #ada8a8;
-	padding-top: 0.3rem;
-	padding-bottom: 0.3rem;
+.admonition {
+  padding: 0.5rem 1rem;
+  border-left: .25em solid black;
+  margin-bottom: 1rem;
+  font-weight: 500;
+}
+.admonition-title {
+  line-height: 1;
+}
+.admonition-title .fa {
+  margin-right: 0.3rem;
+}
+.admonition > :last-child {
+  margin-bottom: 0;
+}
+.admonition-info {
+  border-left-color: #0969da;
+}
+.admonition-info .admonition-title {
+  color: #0969da;
+}
+.wrapper {
+  max-width: 1500px;
+}
+pre code.hljs {
+  max-width: 1016px;
+  white-space: pre;
+  background-color: #222;
+}
+p:has(>img) {
+  text-align: center;
 }
 </style>
 
